Karácsonyfa animáció Flash segítségével

A közelgő karácsonyi ünnepek alkalmából készítettünk egy Flash tutorialt, amelyből megtudhatod, hogyan kell néhány egyszerű lépessel látványos karácsonyfa animációt készíteni a weboldaladra.

A segédlet elvégzéséhez szükséges némi Flash ismeret, amit megtanulhatsz a Top School Oktató Központban egy színvonalas tanfolyamon. A rajzok Illustrator grafikai szoftverben készültek, majd innen lettek importálva a Flashbe. Manapság, amikor az alkalmazás-integráció szinte teljes az Adobe szoftvercsomagok között, ez egy nagyon gyakori és népszerű módszer.

Mellékesen megjegyeznénk, hogy érdemes megtanulni az Illustrator is használatát is, mert ugyan a Flash rajzeszközeivel nagyon sok mindent meg lehet oldani, néhány dolgot egyszerűbb Illustratorban, főleg az év végi hajtásban, amikor igen is számít az az 1-2 óra, amit meg lehet spórolni.

Terjedelmi és témaköri korlátok miatt a rajzolási részt kihagyjuk a Flash segédletből, de cserébe a címünkkel ellentétben a kész animációt mindenki felteheti a weboldalára!

 

1. lépés

Nyissuk meg a „karacsonyfa_anim_kezdo.flv” fájlt. A kezdő FLV állományt itt töltheted le: karacsonyfa_anim_kezdo.flv.

2. lépés: a fa animálása

Jelöljük ki a fát és készítsünk belőle movie clipet. Adjuk neki a „fa_anim” nevet.

Lépjünk be duplakattintással a létrehozott movie clipbe. A fának egy folyamatosan ismétlődő mozgást fogunk animálni.

Hozzunk létre egy kulcs-képkockát a 25. és az 50. frame-nél, és állítsunk be két Motion Tweent a kulcs-képkockák között.

Az objektum transzformációs középpontja az objektum közepén van. A Free Transform Tool segítségével helyezzük át az alsó oldalfelezőhöz mind a három kulcs-képkockánál.

Az 1. és 50. frame-en nem változtatunk a fa méretén, a 25. frame-en a felső oldalfelezőt megfogva növeljük meg kissé a fa méretét.

Ezzel el is készült a fa animációja.

3. lépés: a kameramozgás

Ráközelítés a fára: mivel a Flash nem tartalmaz beépített kamerát, az objektumok méretnövelésével fogjuk elérni a folyamatos közelítés hatását.
Lépjünk vissza a fő scene-be. Jelöljük ki az összes objektumunkat (fa, szöveg és háttér), és hozzuk létre a kamera elnevezésű movie clipet.
A movie clip animálását a fő scene-ben fogjuk elvégezni.

Hozzunk létre egy kulcs-képkockát a 80. frame-hez és növeljük meg a szimbólum méretét a kétszeresére.

Tesztelhetjük a videót a Control > Test Movie-ban. Figyeljünk arra, hogy a nagyítás után a karácsonyfa maradjon a munkaterület közepén. Ehhez kissé le kell tolnunk a kamera elnevezésű movie clipet.

Hozzunk létre egy kulcs-képkockát a 120. frame-re. Ez lesz az utolsó képkocka, amelyen a felnagyított movie clipet láthatjuk.

A 121. frame-re hozzunk létre egy kulcs-képkockát, és másoljuk rá az 1. frame-en található eredeti méretű szimbólumot, majd toljuk ki a 145. frame-ig.

Erre azért lesz szükség, hogy a videó loopolva is folytonos maradjon. Fehér fénnyel fogjuk letakarni a 121. frame-en található hirtelen méretcsökkenést. (Lásd kész videó).

4. lépés: a fény animálása

A fő scene-ben, külön rétegen fogjuk animálni a folyamatosan szétterjedő, majd szétoszló fényt.

A fény rétegen a 95., 120. és 145. frame-re helyezzünk kulcs-képkockát. A 95. frame-en még nem látható a fény, a 120.-on az egész munkaterületünk fehér, a 145. frame-en pedig már nem látható a fény. Mindezt stílusos animáció keretein belül kell elkészítenünk.

Hozzunk létre fehér kitöltéssel, körvonallal nem rendelkező 700x700as négyzetet a fény réteg 95. frame-en lévő kulcs-képkockájára. Pozícionáljuk úgy, hogy teljesen lefedje a munkaterületünket. Ha a többi objektumtól nem látjuk a munkaterület kiterjedését, nyugodtan használjuk a rétegkezelő „Show All Layers as Outlines” eszközét.

 

A létrehozott négyzetet alakítsuk movie clippé, fény néven. Az átalakítás oka a filterek elérése. Jelöljük ki fény movie clipet és nyissuk meg a Filters panelt.

Az Add Filter gomb lenyomása után válasszuk ki a Blurt, és állítsuk be az értékeket az alábbi képen látható módon.

Másoljuk a movie clipet a 120. és 145. frame-re a Paste in Place (ctrl + shift + v) paranccsal, és hozzuk létre az alábbi képen látható két Motion Tweent (fény rétegen).

A 120. frame-en lévő fényobjektum elnyerte végleges formáját.

A 95. frame-en méretezzük a fény objektumot 45x45 pixel méretűre. Az alig látható objektumot toljuk el úgy, hogy a karácsonyfa tetején lévő csillag felett legyen.

Teszteljük az animációt. Láthatjuk, hogy a 95. frame-től folyamatosan bontakozik ki a fényobjektum a 120. frame-ig.
Másoljuk a 95. frame tartalmát a 145. frame-re. Ha teszteljük a videót, láthatjuk, hogy a fény lassan eltűnik és már eredeti, kezdő méretében látjuk a karácsonyfát.

Elkészült a fény animációja.

5. lépés: a hó animálása

A hó rétegünk első frame-jén egy hópelyheket tartalmazó szimbólum található. Úgy kell animálnunk a pozícióját, hogy hóesés hatását keltse.

Hozzunk létre egy kulcs-képkockát a 120. frame-en, és állítsunk be egy Motion Tweent. Az 1. frame-en a hó-szimbólum marad a kezdőpozícióban, tehát a munkaterületünk felett. A 120. frame-en húzzuk be a szimbólumot a munkaterületünkbe, de figyeljünk arra, hogy a legfelső hópelyhek a munkaterületünk felső részén legyenek.

Teszteljük a videót. A hóesés létrejött, de áttetszővé kell tenni a pelyheket.

Jelöljük ki a hópehely-szimbólumunkat az 1. frame-en. A Properties panelben válasszuk ki az Alpha beállítást, és állítsuk az értékét 50%-ra. Végezzük el ugyanezt a 120. frame-en is.

Elkészült az áttetsző hó animációja és ezzel együtt a végleges animáció is!

Linkajánló:

• flash.lap.hu
• actionscript.lap.hu
• Top School Ninja flashben készült játék

Tanfolyamok és képzések:

• Flash tanfolyam
• ActionScript tanfolyam
• Webdesigner tanfolyam

Vissza design, grafika és webdesign cikkekhez