Motion editor – Editor pohybu

29.6.2010· Autor: Ondřej Brichta· Přidat komentář

V dnešním článku se seznámíme s panelem editoru pohybu – Motion Editor

Editace animace pohybu

Od verze Flash CS4 došlo k rozšíření animací na časové ose o nový typ, který převzal původní název MotionTween. Aby se to nepletlo, tak původní styl animací byl přejmenován na Classic Tween.

Pokud se rozhodneme pro nový typ - MotionTween, stačí nám vždy je jeden klasický klíčový snímek - keyframe, od kterého vytvoříme animaci pomocí příkazu „Create Motion Tween", který se objeví v menu pod pravým tlačítkem myši.

01

U takto vytvořené animace nemusíme ručně vytvářet klíčové snímky, ale stačí se posunout na potřebný snímek časové osy a zde provést změnu některých vlastností objektu. Potřebný klíčový snímek je pak automaticky doplněn.  

03

V případě, že se chceme pustit do detailnější editace pohybu, můžeme už přímo na scéně upravit cestu pohybu. Mnohem větší možnosti se ale skrývají na panelu editace pohybu - Motion Editor.

Panel Motion Editor je poměrně rozsáhlý, takže přítomnost druhého monitoru se pro jeho používání stává téměř nutností. Při jeho zobrazení se nejdříve zaměříme na tři drobná tlačítka vlevo dole:

02

První tlačítko slouží pro nastavení výšky minimalizovaných řádků, druhé pak pro nastavení velikosti maximalizované výšky řádků a nakonec poslední tlačítko slouží pro nastavení počtu snímků, které najednou na panelu vidíme.


 04


Přepnutí mezi minimalizovaným a maximalizovaným řádkem provedeme jednoduchým kliknutím na konkrétní vlastnost. Například pokud vybereme řádek animace x-ové pozice:

05

Na samotném panelu Motion Editoru jsou v prvním sloupci uvedeny všechny vlastnosti, které lze u vybraného objektu animovat. Pokaždé zde najdeme možnosti editace pozice a rotace, změnu velikosti, barvy a filtrů.

Pokud se zaměříme na pravou část panelu, vidíme zde graf, na jehož pozadí jsou schématicky pomocí vertikálních čar naznačeny snímky časové osy (jejich počet lze měnit pomocí tlačítek panelu vlevo dole). Nejvýraznějším prvkem je pak černá čára, vyznačující změnu hodnot vybrané vlastnosti. Na vertikální ose jsou vyneseny hodnoty vlastnosti, na horizontální ose jsou pak uvedeny snímky časové osy.

Klíčové snímky (tedy snímky, kde lze nastavit novou hodnotu konkrétní vlastnosti) jsou zobrazeny malým černým čtvercem. Kliknutím pravým tlačítkem myši na libovolný bod černého grafu máme
možnost přidávat další klíčové snímky:

06

A naopak, kliknutím na vybraný klíčový snímek jej můžeme odstranit, nastavit bod jako plovoucí, případně můžeme upravit vlastnosti bodu tak, že bude ovlivňovat zakřivení procházející křivky.

07

 

Vedle editace hodnot v klíčových snímcích máme možnost ovlivňovat animaci pomocí nejrůznějších stylů zrychlení a zpomalení. Pokud chceme nějaký ze stylů použít, použijeme sekci „Eases", kde pomocí tlačítka „+" vybereme nový styl, který chceme použít:

08

Po rozkliknutí efektu se objeví detailní křivka, kterou bude ovlivněna změna hodnot vybrané vlastnosti. X-ová osa zůstává stejná, y-ová osa pak má hodnoty od 0% do 100%, které se vztahují na konečnou hodnotu vybrané vlastnosti.

09

 

Jakmile máme požadovaný styl doplněn, můžeme jej připojit k vybrané vlastnosti opět přes tlačítko „+":

10

Zeleně je pak zobrazen výsledný pohyb (změna vybrané vlastnosti), který vznikl kombinací efektu a křivky změny této vlastnosti:

11

Pokud bychom se podívali na menu pod pravým tlačítkem myši, nalezneme zde zajímavou volbu kopírování křivky efektu:

12

 

Kterou můžeme následně aplikovat na libovolnou další vlastnost:

 13

14

 

Ondřej Brichta Vývojář multimediálních aplikací, šéfredaktor Flash.cz, školitel produktů Flash, Flex, Flash Media Server

Web: http://www.obria.cz |

Motto: <°))))><

Komentáře k článku  

Přihlášení uživatele