Ondřej Brichta 18.4.2005
Často se setkáme s případy, když někdo dělá z komára velblouda. My, co se učíme Flash, budeme moci po dnešní lekci říct, že umíme udělat velblouda i ze žáby. Naučíme se totiž další ze zajímavých animačních technik, která nám umožňuje tzv. morfování objektů.
Jak budeme v animaci postupovat? Velice snadno, protože už umíme Motion Tween a postup při morfování je, až na dvě drobnosti, shodný. Vytvoříme si dva klíčové snímky, do prvního vložíme objekt žáby, převedeme jí na křivky a do druhého klíčového snímku vložíme objekt velblouda, který opět rozložíme na základní křivky. V prvním snímku provedeme volbu „Motion - Shape“ a může pozorovat jak se nám zvířátka hezky mění.
Změnu jednoho objektu v druhý umožňuje funkce animace obrysů, kterou najdeme na panelu vlastností snímku časové osy u rozbalovacího menu „Tween:“. Funkce je pojmenována „Shape“.
Obr. 1
Začneme vložením prvního objektu žáby. Dovolil jsem s lehce upravit kliparty z webu Microsoftu, abychom mohli snadněji pracovat. V hlavním menu zvolíme „File -Import - Import to Stage“ a vybereme SWF soubor s žabkou, který si můžete stáhnout zde. Tímto jsme vložili do prvního snímku hlavní scény objekt žáby.
Pokud chceme použít funkci pro animaci obrysů, je nutné žábu rozložit na křivky. Ucelený objekt, který bychom přetáhli například z knihovny nelze přímo animovat.
Rozložení na křivky povedeme kliknutím pravého tlačítka myši na objekt žáby a z kontextového menu zvolíme „Break Apart“.
Obr. 2
Objekt nyní vypadá následovně:
Obr. 3
Černá, vytečkovaná plocha, znamená, že jsme již tuto část rozložili na křivky. Vyskytují se nám tam ale ještě dva objekty, které jsou v modrém rámečku. Je nutné rozložit i tyto objekty. Postup je stejný, pravým tlačítkem myši zobrazíme menu a zvolíme „Break Apart“. Žába by měla vypadat asi takto:
Obr. 4
Pokud použijeme složitější objekty, nebo objekty, které v sobě obsahují další skupiny objektů, provádíme příkaz „Break Apart“ do té chvíle, než máme všechnu plochu vytečkovanou, objekt je rozložen na křivky.
Pro zobrazení kontextového menu při rozkladu používáme nástroj „Selection Tool“, kterým vybíráme potřebné objekty, nebo skupiny objektů na scéně.
Dále chceme vytvořit prázdný klíčový snímek, do kterého importujeme velblouda. Klikneme pravým tlačítkem myši na 20. snímek časové osy a zvolíme „Insert Blank Keyframe“ (obr. 5).
Obr. 5
Časová osa nyní vypadá takto:
Obr. 6
Nyní importujeme obrázek velblouda. SWF sobor máte k dispozici zde. Opět pomocí „File - Import - Import to Stage“ vložíme soubor s velbloudem. Na časové ose se vytvořila další vrstva, ve které se nachází objekt velblouda (obr.7) . My ale potřebujeme, aby byl klíčový snímek s velbloudem ve stejné vrstvě jako je žába, na pozici 20. snímku vrstvy.
Obr. 7
Přesun provedeme následovně. Klikneme na klíčový snímek druhé vrstvy (té s velbloudem). Tím jsme tento snímek vybrali. Poté opět klikneme na snímek a tažením myši přesuneme snímek na pozici 20 vrstvy s žábou. Osa by měla vypadat takto:
Obr. 8
Zůstala nám jedna prázdná vrstva. Pokud klikneme pravým tlačítkem na její název, můžeme z kontextového menu vybrat „Delete Layer“ a vrstvu vymazat.
Obr. 9
Stejným postupem jako u žáby rozložíme na 20. snímku časové osy objekt velblouda na křivky.
Už jsme téměř hotovi. Stačí se přesunout na první snímek časové osy, otevřít spodní panel vlastností „Properties“ a u položky „Tween“ zvolíme „Shape“. Podobně jako u Motion Tweenu se změnila barva snímků na časové ose:
Obr. 10
Zkuste přehrát animaci pomocí stisknutím klávesy „Enter“ (tato funkce vyžaduje mít zvolené „Control - Enable Live Preview“) anebo zvolit z menu „Control - Test Movie“. Vidíme, jak se nám žába pomalu mění ve velblouda.
Jeden z hlavních problémů při této animaci spočívá v použitých objektech. Pokud je výchozí a konečný tvar celistvý, je animace relativně bezproblémová. Pokud však objekty obsahují oddělené části ( zornička oka u žáby, přední a zadní noha velblouda... ), animace nemusí probíhat zcela podle představ. Výhodné je, pokud oba objekty obsahují stejný počet oddělených částí na podobných místech.
Nepřesnou animaci lze ale snadno přinutit, aby probíhala dle našich původních představ. V našem případě asi bohužel neodstraníme změnu zorničky žáby v zadní nohu velblouda, ale ostatní části těla obou živočichů můžeme lépe animovat pomocí tzv. „Shape Hints“. Jedná se body, které ukotví určitou část obrysu objektu.
Názornější bude praktická ukázka těchto bodů. Přesuneme se na první snímek časové osy, v hlavním menu zvolíme „View - Show Shape Hints“ a kombinací CTRL + Shift + H vložíme první bod.
Obr. 11
Je zobrazen červeně a má písmeno „a“. Přesuneme vložený bod nad oko žáby. Všimneme si, jak se při přiblížení k okraji objektu, přichytává hran, což nám velmi usnadňuje umisťování. Nyní zvolíme snímek číslo 20 časové osy. Zde také vidíme bod „a“, který tentokrát přesuneme na hlavu velblouda. Oba body by mohly být umístěny takto:
Obr. 12
Žlutá barva na prvním snímku a zelená na 20. snímku značí, že bude animace v pořádku. Tímto jsme určili, že místo pod bodem „a“ v prvním snímku, se změní na místo pozice bodu „a“ na 20. snímku animace. Přidáváním dalších bodů lze celou animaci usměrnit do správných mezí a vytvořit tak plynulejší přechod mezi objekty. Vrátíme se proto na první snímek časové osy a budeme postupně přidávat a umisťovat body podle následujícího obrázku:
Obr. 13
Písmenka začínají nahoře vlevo a pokračují směrem vpravo po obvodu. Pokud se nám povede body umístit, můžeme si překontrolovat animaci a zjistíme, jak se některé části, především končetiny, mění mnohem lépe.V případě, že se nám určitý bod nelíbí, můžeme na něj kliknout pravým tlačítkem myši a z menu zvolit „Remove Hint“.
Pozor, toto menu lze zobrazit pouze v prvním klíčovém snímku, tedy ve snímku, ze kterého animace začíná.
Ke stažení: zdrojový soubor ukázky
