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:
Tanfolyam ajánló
