Flash - tanec farebných kruhov

28.04.2009

Vítam Vás pri dnešnom článku. Dúfam, že Vás niečomu priučí a zabaví. ;) Prosím zároveň čitateľa o pochopenie v prípade nejasností v niektorom kroku, ale je to môj úplne prvý tutoriál. Cieľom je vytvoriť náhodne sa objavujúce farebné kruhy rôznej veľkosti vo flashi. Využijeme tu najmä cyklus pomocou AS.

Autor: PeeDee | Hodnotenie:

1. Otvoríme nový dokument 500x500 s čierným pozadím a FrameRate nastavíme na 30 fps.

2. Pomocou OvalTool (O) nakreslíme kruh, napríklad modrej farby bez okrajov a vycentrujeme ho na stred scény. Zmeníme ho na symbol (F8) MovieClip a nazveme ho „clip“. Dvojklikom ho sprístupníme pre editáciu. Znova označíme kruh vo vnútri MovieClipu a znova pomocou F8 konvertujeme na symbol MovieClip. Nazveme ho tentoraz „kruh“.

Kruh sme museli konvertovať na symbol 2x, pretože po prvej konvertácii by sme ho mohli animovať len na hlavnej scéne. Avšak tú chceme len jednosnímkovú, preto potrebujeme tento „clip“ animovať vo vnútri ďalšieho MovieClipu. V tomto prípade ním je „kruh“.

3. Skontrolujeme, či sa nachádzame v editácii „clip“. Na prvom snímku v Properties zvolíme Tween: Motion, označíme 30. snímok a vložíme KeyFrame. Na tomto snímku kruh zmenšíme napríklad na 30% a posunieme ho úplne na pravý okraj scény. Na snímok 31 vložíme BlankKeyFrame a do Action Scriptu napíšeme:

stop();

„stop();“ sme vložili kvôli tomu aby sa nám animácia v MovieClip nezacyklila. Vytvorilo by to totiž oveľa viac kruhov ako potrebujeme. Cykliť to budeme pomocou ActionScript v nasledujúcom kroku.

4. Vrátime sa na hlavnú scénu, označíme náš kruh a v Properties mu priradíme InstanceName. Môžeme kľudne použit napríklad „instkruh“. Toto nám umožní komunikáciu ActionScriptu s naším symbolom.

5. Na hlavnej scéne označíme 1. Snímok a do ActionScriptu (F9) vložíme nasledujúce riadky:

i = 0;  
this.onEnterFrame = function() {   
i++;
instkruh.duplicateMovieClip(_root.instkruh+i, i, {_alpha:100, _rotation:random(360)});
};

Na začiatku si definujeme premennú ‘i’ rovnú nule. Druhý riadok skriptu vraví, že funkcia sa prehrá na každom snímku. V našom prípade to je 30x za sekundu. Pomocou `i++` zaručíme že ‘i’ sa každým prehratím zväčší o jedno. Pri duplikovaní klipu “kruh”, dostane každý nový klip názov “kruh+i“ (kruh1, kruh2, kruh3,...). Pomocou _rotation:random zabezpečíme, že každý nový klip sa duplikuje v náhodne zvolenom stupni vzhľadom na pôvodný od 0 do 359 (pre lepšie pochopenie skúste zmeniť toto číslo napríklad na 90 alebo 180 a vyskúšajte, čo to spraví).

Tieto riadky ActionScriptu budú na každom snímku animácie duplikovať náš MovieClip. To však vedie k tomu že po niekoľkých minútach, budeme mať na scéne nespočetné množstvo už nepotrebných klipov. Preto v nasledujúcom kroku napíše kód ktorý zabezpečí odstránenie duplikovaných a už nepoužiteľných MovieClipov.

6. Na hlavnej scéne kliknite na kruh aby ste ho označili. K nemu do ActionScriptu priraďte tieto riadky:

onClipEvent(enterFrame){
if(random(100) == 0){
removeMovieClip(this)
}
}

7. Ostáva nám už len zabezpečiť viacero takýchto kruhov na scéne a ich farebnosť. Takže dvojklikom na kruh v hlavnej scéne začneme. V MovieClip „clip“, označíme tento kruh a znova ho budeme konvertovať na symbol MovieClip s názvom napríklad „kruh2“. V „kruh2“ označíme znova tento kruh, priradíme mu v Properties Instance Name ‚instkruh2’. Označíme 1. Snímok a do ActionScript skopírujeme:

i = 0; 
this.onEnterFrame = function() {
i++;
instkruh2.duplicateMovieClip(_root.instkruh2+i, i, {_alpha:100, _x:random(500), _y:random(500)});
};

Je to veľmi podobný kód, aký sme použili predtým, obmenili sme však meno klipu a taktiež miesto rotation budeme generovať náhodnú pozíciu na osi x a y.

Takisto aj tu treba zabezpečiť odstránenie nepoužívaných klipov takže označte kruh a do ActionScriptu skopírujte ten istý kód, ktorý sme na odstránenie použili predtým.

8. Farebnosť kruhov zabezpečíme trošku pracne, ale až tak namáhavé to nebude. Vrátime sa do editácie MovieClipu “clip”, a na každý piaty snímok vložíme KeyFrame. Na každom jednom KeyFrame nám stačí už len označiť kruh a v Properties Color: Advanced si navoliť žiadúce farby, ktoré chceme aby sa nám prestriedali.

9. Keď ste s týmto hotoví, zvoľte ešte raz pre editáciu MovieClip “kruh2” a jeho Color:Alpha v Properties nastavte na 0. Tým sme sa zbavili nehybného kruhu v strede. Pomocou CTRL+ENTER už len stačí skontrolovať výsledok.

Dúfam že ste spokojní a budete sa tešiť na ďalší tutorial.