SEZNAMTE SE - FLASH 4 - II - Grafika.cz - vše o počítačové grafice

31. ledna 2000, 00.00 | Pokračování seriálu o Flash 4. Učíme se na příkladech. Dnes malá animace tweening.

Tento seriál bude především pro ty, kterým se zamlouvají Flashové stránky a mají chuť se na něco takového vrhnout. Profesionálům tyto články asi nic neřeknou, protože už to dávno znají. A nyní k věci:
Pro zobrazování Flashových aplikací si můžete stáhnout plug-in.

Vytvoření této jednoduché animace si předvedeme:

Nastavíme vlastnosti animace : Modify - Movie (Ctrl+M)

-Frame Rate-tady nastavujeme rychlost animace(počet framů za sekundu).
-Dimensions-nastavujeme rozměry plochy (jeviště), podle jednotek, které zvolíme v Ruler Units. Pokud chceme při tvorbě zobrazit mřížku, zatrhneme Show grid. Její hustotu nastavíme v Grid Spacing a barvu v Colors. Barvu pozadí volíme v Background.
Všechna tato nastavení se dají kdykoliv změnit během tvorby celé animace !

Výhodou Flashe je, že celkem nemusíme přemýšlet nad pořadím vrstev, protože se dají přetahovat. Flash má také několik způsobů animace, my začneme animací Tweening:
-Nakreslíme, nebo vložíme (File » Import) již hotový obrázek (Flash importuje mnoho formátů). Pokud importujeme obrázky ve formátu jpg, gif, bmp atd. zvětšuje se tímto výsledný soubor. Výhodné je třeba nakreslit obrázek v Ilustratoru a importovat ve formátu emf.
( V našem případě, barvy čtverce i jeho okraje jsem vybral odstíny šedé)
-Vybereme obrázek (dvojklik nástrojem šipka [Arrow]) Insert - Convert to Symbol (F8) - zadáme Graphic a napíšeme jméno obrázku.
-Určíme způsob animace: Modify - Frame - Tweening - Motion

V timeline dvojklikem na Layer1 napíšeme název vrstvy (obdélník1), potom klikneme na místo, kde chceme další pohyb obrázku a dáme F6 (vložíme keyframe). Obrázek přesuneme tam, kde ho chceme umístit (dal jsem ho do pravého horního rohu). Klávesou Enter si animaci přehrajeme přímo v programu, Ctrl+Enter přehráváme ve Flashi, F12 přehráváme v prohlížeči. Po jednotlivých políčkách v timeline přehráváme klávesami jako závorka v HTML.

V timeline určíme další pohyb a jak se bude obrázek chovat. Nástroji Rotate a Scale obrázek : přesuneme, zvětšíme, zmenšíme, zkosíme, zrcadlově otočíme atd. Možností je mnoho.(pouze jsem ho nástrojem Scale zmenšil) Můžeme také zadat barevné efekty dvojklik na obrázek - Color Effect - a vybereme ze čtyř možností.(nastavil jsem viz obr.)

V timeline přidáme další keyframe (F6) na políčko 20, posuneme čtverec do středu,nástrojem Scale uděláme obdélník a zvětšíme. Aby nějakou dobu obdélník zůstal v klidu, přidáme další keyframe na pole 30. Určíme další pohyb obrázku na poli 40 (F6), nástrojem Rotate jej otočíme o 90 a uděláme z něj stejný obdélník. Na tomto poli bude také změna barvy. Dvojklik na obrázek - Color Effect - Tint. Vybereme barvu na kterou se nám obrázek přemění. Aby zůstal v opět v klidu, přidáme na pole 50 keyframe. Myší klikneme na keyframe 1 (základní obrázek), pravým tlačítkem z menu vybereme Copy Frames (Ctrl+Alt+C), klik na pole 60 a Paste Frames (Ctrl+Alt+V). Opět aby obrázek zůstal v klidu přidáme na pole 70 keyframe.
Změníme barvu pozadí na černou : Modify - Movie - Background

Pokud jsme spokojeni můžeme přidat další vrstvu. V timeline klikneme na Add Layer, potom klik na Layer Name a zapíšeme jméno vrstvy (dvojklik na Layer2).

Potom nakreslíme, nebo vložíme další obrázek a opakujeme vše znovu.

V jednotlivých vrstvách můžeme animace, nebo jejich části přesouvat, mazat nebo přidávat podle libosti. Přesouvat můžeme i mezi vrstvami. Přesun animace : myší v timeline klikneme na políčko, držíme levé tlačítko a označíme část kterou chceme přesunout. Po uvolnění tlačítka nám vybraná část zůstane černá. Uchopíme ji a přesuneme kam je libo. Mazání je obdobné. Máme označenu část, klikneme pravým tlačítkem, otevře se menu a dáme Clear Keyframe. Zde je dobré prostudovat menu důkladně, hodně funkcí se používá častěji. Je také vhodné se naučit klávesové zkratky, alespoň ty nejdůležitější.
Samozřejmě postupů jak takovou animaci vytvořit je několik, toto je jeden z nich.

Příště se podíváme na tweening po předem určené dráze.

První díl seriálu naleznete ZDE.