Umíme ve Flashi - 30. díl - plastická hmota

Bevel filtr

Určitě jsme již zaregistrovali, že v nové verzi Flashe přibyly, kromě jiných vylepšení, velmi zajímavé bitmapové filtry. Jako základ dnešní animace poslouží filtr, umožňující vytvořit zajímavý efekt plastičnosti, neboli vyvýšení objektu.

Nakresleme si nyní na hlavní scéně libovolný vektorový objekt, převedeme jej na Movie Clip, vybereme jej, otevřeme si ve spodní části pracovní plochy panel vlastností a přejdeme zde na záložku Filters. Pomocí tlačítka „+“ v levé části zobrazeného panelu přidáme k objektu filtr s názvem „Bevel“.

V zobrazeném panelu máme nyní několik možností, jak nastavit výslednou podobu použitého filtru. Rozsah šumu (Blur X, Blur Y) nastavíme na 10, množství (Strenght) nastavíme na 70%, kvalitu dáme nejvyšší a jako typ zvolíme „Full“. Ostatní položky necháme tak, jak jsou nastavené. Objekt by se měl zobrazit podobně jako tento:

Popis efektu

Efekt, který se dnes pokusíme vytvořit, je založen na jednoduchém principu aplikace filtru na MC, který obsahuje jiné, částečně se překrývající objekty. Po vložení filtru dojde ke „slití“ výsledného tvaru, který tak působí mnohem komplexněji než původní, přesně ohraničený tvar.

Je nutné ovšem zdůraznit, že by měly mít použité objekty stejnou barvu, aby výsledný efekt neobsahoval rušivé přechody mezi barvami.

Abychom měli práci co nejsnazší, použijeme pouze jeden objekt, který budeme z knihovny pomocí příkazů AS duplikovat a vkládat na hlavní scénu. Každý objekt se bude náhodně pohybovat ve vymezeném prostoru a navíc bude na všechny objekty aplikován již zmíněný filtr.

Pohyb objektů svěříme velmi užitečné Transition třídě, která společně s Easing třídou umožňují vytvářet plynule pohybující se objekty. Kromě samotného pohybu se budou objekty navíc plynule zvětšovat a zmenšovat. To vše bude probíhat náhodně, bez jakéhokoliv našeho dalšího zásahu.

Tvorba efektu

Otevřeme si nový dokument, a jak již bylo naznačeno, nakreslíme si objekt, který bude tvořit základ celkového efektu. Objektem by měl být kruh, zhruba o velikosti 60x60px. Kruh Převedeme na MC a nastavíme u něj export pro AS (Klikneme na něj v knihovně symbolů pravým tlačítkem myši a zvolíme položku „Linkage“, zde zaškrtneme položku „Export for Action Script“ a napíšeme identifikační název, podle kterého budeme později objekt používat.)

Jako identifikátor napíšeme „kruh“. Vrátíme se na hlavní scénu a zde nakreslíme obdélník, který nám bude sloužit pro vymezení oblasti, ve které se budou moci kopírované objekty kruhu pohybovat.

Nakreslený obdélník převedeme na MC a pojmenujeme jeho instanci „oblast“. Nyní zvolíme první snímek hlavní časové osy, otevřeme si spodní panel akcí tohoto snímku a vložíme sem první část kódu:

pocetObjektu = 10;
posuvX = 50;
posuvY = 50;
scX = 150;
delka = 48;
delka2 = 24;
this.createEmptyMovieClip("plastelina", this.getNextHighestDepth());

V této části si připravíme několik proměnných, pomocí kterých určíme celkový počet pohybujících se objektů (pocetObjektu), dále zde máme proměnné pro určení maximální vzdálenosti, kterou může prvek při náhodné volbě najednou překonat. Následuje maximální velikost objektu v procentech a délky trvání jednotlivých přechodů. Jako poslední akci si připravíme  MC („plastelina“), do kterého budeme kopírovat objekty kruhu a na který aplikujeme filtr vyvýšení.

Vložíme nyní další část kódu:

for (i=1; i<(pocetObjektu+1); i++) {
 plastelina.attachMovie("kruh", "kruh"+i, i);
 eval("plastelina.kruh"+i)._x = oblast._x;
 eval("plastelina.kruh"+i)._y = oblast._y;
 eval("plastelina.kruh"+i).timer = 0;
 eval("plastelina.kruh"+i).konst = 24;
 eval("plastelina.kruh"+i).zmena = false;
 eval("plastelina.kruh"+i).onEnterFrame = function() {
  this.timer++;
  if (this.timer>this.konst) {
   this.posunX.stop();
   this.posunY.stop();
   this.konst = 24+Math.round(Math.random()*24);
   this.timer = 0;
   this.nahodneX = Math.round(Math.random()*posuvX);
   this.nahodneY = Math.round(Math.random()*posuvY);
   this.nahodneScX = Math.round(80+Math.random()*scX);
   this.nahodneScY = this.nahodneScX;
   this.smerX = Math.pow((-1), Math.round(Math.random()*2));
   this.smerY = Math.pow((-1), Math.round(Math.random()*2));
   this.zacatekX = this._x;
   this.konecX = this.zacatekX+this.nahodneX*this.smerX;
   this.zacatekY = this._y;
   this.konecY = this.zacatekY+this.nahodneY*this.smerY;
   if (!oblast.hitTest(this.konecX, this.konecY, true)) {
    this.konecY = this._y;
    this.konecX = this._x;
   }
   this.posunTyp = mx.transitions.easing.Strong.easeOut;
   this.posunX = new mx.transitions.Tween(this, "_x", this.posunTyp, this.zacatekX, this.konecX, this.konst, false);
   this.posunY = new mx.transitions.Tween(this, "_y", this.posunTyp, this.zacatekY, this.konecY, this.konst, false);
   this.posunTyp2 = mx.transitions.easing.Elastic.easeOut;
   this.scX = new mx.transitions.Tween(this, "_xscale", this.posunTyp2, this._xscale, this.nahodneScX, this.konst, false);
   this.scY = new mx.transitions.Tween(this, "_yscale", this.posunTyp2, this._yscale, this.nahodneScY, this.konst, false);
  }
 };
}

Zde je samotný kód pro nakopírování tolika objektů kruhu, kolik jsme si na začátku určili pomocí proměnné „pocetObjektu“. Všechny objekty budou na začátku vycházet ze stejného místa, kterým je souřadnice objektu „oblast“. Samotný náhodný pohyb každého objektu zajistíme pomocí událostí „onEnterFrame“.

Pokud použijeme menší množství objektů, můžeme bez obav použít tuto událost pro každý prvek zvlášť. Při větším množství prvků by ale bylo vhodnějším řešením použít pouze jednu hlavní „onEnterFrame“ událost, která by najednou řídila všechny objekty.

Při dynamickém přiřazení události využijeme v zápisu odkaz „this“, který zajistí, že se jednotlivé proměnné této události vloží do příslušného objektu. Pokud bychom před proměnnými nepoužili „this“, odkazovali bychom se v událostech na jednu a tu samou proměnnou, což nechceme.

V každém události generujeme náhodné hodnoty posuvu objektů a stejně tak neustále generujeme náhodnou proměnnou (konst), pomocí které měníme interval, kdy se pohyb objektu spouští.

Jako poslední akce je vytvoření plynulé animace přechodu na novu pozici, během které dojde k elastickému zvětšení/zmenšení velikosti přesouvaného objektu. Před samotným posunem je ovšem nutné překontrolovat umístění objektu, a pokud se ocitá mimo prostor vymezený objektem „oblast“ necháme jej na místě, dokud se pomocí náhodných čísel neodsune na jinou stranu.

K dokončení už zbývá pouze část kódu, která slouží k aplikaci filtru vyvýšení na MC „plastelina“:

import flash.filters.BevelFilter;
var distance:Number = 5;
var angleInDegrees:Number = 45;
var highlightColor:Number = 0xFFFFFF;
var highlightAlpha:Number = .7;
var shadowColor:Number = 0x000000;
var shadowAlpha:Number = .7;
var blurX:Number = 10;
var blurY:Number = 10;
var strength:Number = 1;
var quality:Number = 2;
var type:String = "full";
var knockout:Boolean = false;
var filter:BevelFilter = new BevelFilter(distance, angleInDegrees, highlightColor, highlightAlpha, shadowColor, shadowAlpha, blurX, blurY, strength, quality, type, knockout);
plastelina.filters = new Array(filter);

Výsledná animace tak může vypadat takto (vzhledem k použitím filtrům je animace exportována pro flashplayer 8 a vyšší).

Zdrojový soubor dnešní ukázky je k dispozici zde.