Corel R.A.V.E. – Animované interaktivní prvky - Grafika.cz - vše o počítačové grafice

17. dubna 2001, 00.00 | Tlačítka a jiné interaktivní prvky nemusí mít jen tři statické polohy. Každou z poloh je možné animovat a právě o tom je poslední díl našeho seriálu.

Jestliže jsme si v předchozí části našeho seriálu objasnili základy vytváření tzv. rollovers v Corel R.A.V.E., pak dnes je na řadě jejich animace. V podstatě se bude jednat o malé opáčko z již publikovaných postupů, ale nezapomeneme ani na nové důležité poznatky.

Cílem následujícího příkladu je vytvořit interaktivní tlačítko, které - když nad něj najedeme kurzorem myši - provede animovanou sekvenci.
Jako v minulé části tedy začneme tím, že v novém dokumentu nastavíme velikost pracovní plochy cca 100 x 30 pixelů a vytvoříme libovolný objekt, který bude představovat tlačítko.

Známým příkazem Effects – Rollover – Create Rollover, nebo tlačítkem na panelu Internet, vytvoříme z nakreslených objektů interaktivní tlačítko. Ihned po provedení se můžeme přepnout do režimu editace rolloveru. Předpokládejme, že polohu Normal animovat nebudeme, a proto klikneme na polohu Over. Pro zjednodušení výkladu budeme provádět jednoduchou animaci, kdy nápis na tlačítku „pumpuje“ – neustále se zvětšuje a následně zase zmenšuje. Postup je stejný jako u jakéhokoliv tweeningu.
Nejprve tedy natáhneme animační linku textu na cca 10 framů a na konec přidáme keyframe. Následně přidáme ještě jeden klíčový snímek uprostřed linky, a v tomto bodu animace text zvětšíme. Zjišťujeme ale jednu nepříjemnou skutečnost, a to, že se při zvětšování nemáme podle čeho orientovat, protože podklad tlačítka zůstává na prvním snímku sekvence, kdežto my se pohybujeme někde na pátém. Náprava je prostá - natáhneme animační linky všech objektů na celou délku animační sekvence. Timeline pak vypadá podobně jako na následující ilustraci.

Ovšem pozor, je důležité, abychom prodloužili animační linky všech objektů také v poloze Normal, přestože jsme ji animovat nechtěli. Neučiníme-li tak, rollover bude neustále blikat – viz. ukázka:

Můžeme samozřejmě ještě změnit vzhled tlačítka v poloze Down. Je ale vcelku nesmyslné jej v této poloze animovat a také není nutné natahovat animační linky objektů. Každý uživatel na jakýkoliv aktivní prvek jen klikne a těžko na něm bude držet tlačítko myši stisknuté delší dobu.
Výsledek naší práce tedy může vypadat třeba takto:

Předchozí výklad se zabýval pouze animací tlačítek nebo jiných interaktivních prvků. Jsou-li však tyto prvky součástí delší animace, může nastat problém s rozdílnou délkou. Tlačítko může mít délku, či spíše dobu animace např. 10-15 framů, kdežto celá animace může nabývat doby mnohem větší. My však chceme, aby tlačítko bylo zobrazené v animaci po celou dobu animace. Pro ilustraci jsem zvolil jednoduchou ukázku.

Jak je vidět, tlačítko po uplynutí „svého času“ zmizí. Co s tím? Řešení spočívá v tom, že u objektu Rollover aktivujeme Loop/opakování. Mohli bychom sice jednoduše kliknout na šipku u ikonky Rolloveru a tím „zloopovat“ najednou celé tlačítko. Věc má ale trochu zádrhel. Soubor je tím zbytečně datově objemný. Výše uvedená ukázka tlačítka s rotující kuličkou by měla velikost 49 kB, což se mi zdá trochu dost. Timeline v tomto případě vypadá takto:

Zmenšení datového objemu souboru vede přes sice složitější postup, ale pro nás je důležité, že z 49 kB se dostaneme na nějakých 32 kB. Nejprve natáhneme animační linku objektu Rollover na celou délku animace.

Poté rozbalíme seznam objektů rolloveru a aktivujeme funkci Loop pouze u Rollover [NORMAL]. Jednoduše klikneme myší na rovnou šipku vlevo před názvem. Šipka se změní na dvě protilehlé kruhové šipky a máme vystaráno. Timeline by měla vypadat podobně jako na následujícím obrázku.

Když nyní animaci vyexportujeme do formátu SWF, tlačítko zůstává „na svém místě“ po celou dobu a veškerá funkčnost je zachovaná.