Flash I

Software Adobe® Flash® Professional CS6 je špičkové prostředí pro vytváření animací a multimediálního obsahu. 
Navrhujte poutavý interaktivní obsah, který má konzistentní podobu ve všech počítačích a zařízeních, 
včetně tabletů, smartphonů či televizorů.

Zjednodušeně:

Adobe Flash Professional je software vytvářející multimediální výstupy, využívaný k tvorbě animací, 
interaktivních prvků pro web, her, videa a prezentací. 
Programovací jazyk Flashe je Action Script 3.  
Flash pracuje s vektory i bitmapovou grafikou, jeho součástí může být text. Podporuje přehrávání audia a videa. 
Flash může být přehráván prostřednictvím počítače, nebo dalších zařízení využívajících Adobe Flash Player.
Tento přehrávač je poskytován zdarma jako komponenta pro webové prohlížeče, pro některá mobilní zařízení a další elektronické přístroje.

Další články a materiály, které vám pomohou si udělat lepší představu o tom, jak Flash Builder pracuje a jak naopak pracovat s ním:

• Oficiální stránka produktu http://www.adobe.com/cz/products/flash.html
• Flash.cz Server o programech Flash, Dreamweaver, Fireworks, Photoshop http://www.flash.cz/portal/
• Wikipedia (česky) http://cs.wikipedia.org/wiki/Adobe_Flash
• Wikipedia (anglicky) http://en.wikipedia.org/wiki/Adobe_Flash
• Actionscript.org http://www.actionscript.org/

Po prvním spuštění (nebo v režimu zobrazení CLASSIC) se nám ukáže takovéto rozložení:

• po levé straně jsou základní nástroje (Tools CTRL+F2)
• nahoře je časová osa (Timeline)
• po pravé straně vlastnosti (Properties)
• uprostřed je nabídka vytvoření nového souboru, otevření posledního souboru a nabídka vzorů a tutoriálů

Otevřeme si nový soubor (v jazyku ActionScript 3). Buď nabídkou přes „prostřední menu“:

Nebo pomocí horní lišty:

Po vytvoření nového souboru se nám rozšířila nabídka na horní liště. Co se pod kterou nabídkou (ve zkratce) skrývá:

• File (nový dokument, otevřít, zavřít, uložit, import(soubori AI, bitmapy, zvuky, video, swf a další), export, publikování)
• Edit (vyjmout, vložit, kopírovat atd., klávesové zkratky, hledání, editace časové osy)
• View (pravitka, vodítka, lupa, přiblížení/oddálení, přichytávání, pohyb mezi scénami)
• Insert (nový symbol, tweeny, klíčový snímek, snímek atd.)
• Modify (převedení na symbol, na bitmapu, úpravy tvaru, vlastnosti vrstev, transformace, rozmístění, změna pozice, seskupení)
• Text (font, velikost, styl, pravopis)
• Commands (příkazy v kódu)
• Control (přehrávání časové osy, testování scény)
• Debug (testování, odstraňování chyb)
• Window (otevře jednotlivá okna nabídky, přepíná mezi jednotlivými otevřenými soubory)
• Help

Zobrazila se časová osa:

Animace ve flashi využívá systém po sobě následujících snímků (framů). Klíčový snímek je takový, který určuje obsah po něm následujících snímků (framů). Může být buď prázdný (Blank keyframe), nebo nese nějakou grafiku (plný označujeme jednoduše – Keyframe).

snímky můžeme přidávat na časovou osu buď pomocí menu:

nebo kliknutím pravým tlačítkem na časovou osu:

a nebo klávesovými zkratkami:

• frame – F5
• keyframe – F6
• blank keyframe – F7

Obrys a vektor Ve Flashi můžeme pracovat s tzv. „syrovou grafikou“, to znamená s vektory a bitmapami. Do flashe můžeme vektory i bitmapy importovat a dále je upravovat. (Vektory pomocí duté šipky nebo pera, bitmapy lze jen deformovat transformačním nástrojem, nebo gumovat, případně ořezávat výběrovým nástrojem.) Grafika, kterou ve Flashi vytváříme se dá rozdělit na dva prvky – obrys a výplň. Tato grafika se VŽDY zaznamenává jako soubor jednotlivých bodů a křivek. Obrys a výplň můžeme upravovat, měnit jejich barvu a tvar. V rámci jedné vrstvy se ovšem obrys a vektor nedokáží překrývat, spodní objekt je vždy automaticky vymazán. Obrysy a vektory můžeme animovat za pomocí Shape tweenu.

Symboly (třídy) Pro snadnější práci s objekty seskupujeme jednotlivé „obrysy a tahy“ do symbolů (tříd, které nesou společné vlastnosti). Symboly se dělí do tří typů:

• Grafika
• Button
• Movieclip

Movieclip je třída, která má společné určité nastavitelné vlastnosti (výška, šířka, průhlednost, barva(tint), jas(brightness) a další), které mají všechny movieclipy společné. Jednoduše by se dal Movieclip popsat jako schránka, do které se může ukládat obsah, který může a nemusí mít vlastní děj, může obsahovat další movieclipy, bitmapy, zvuky, nebo video. Do Movieclipů budeme vkládat animace a pak je ovládat Actionscriptem z hlavní scény. Movieclipy můžeme také pohybovat za pomocí Classic a Motion Tweenu. Časová osa Movieclipu je nezávislá na hlavní scéně. I v momentě, kdy na scéně je jen jeden snímek, Movieclip se bude přehrávat stále dokola, pokud mu Actionscriptem nepřikážeme něco jiného.

Vytvoření Movieclipu:

Movieclip můžeme opět vytvořit několika způsoby. Buď z již existujícího objektu nebo objektů (obrysu, tahu, bitmapy), nebo prázdný. Nejprve vytvoříme MovieClip z obdélníku, který již máme na scéně: Celý objekt je třeba označit výběrovým nástrojem (plná šipka) a kliknout na něj pravým tlačítkem a vybrat možnost „Convert to Symbol“ (převést na symbol):

Objeví se nám další menu, kde nastavíme jméno(Name), pod kterým bude třída uložená v knihovně a typ symbolu, na jaký ji chceme převést. (Nyní Movieclip).

Po převedení objektu na symbol nám zůstane na scéně a objeví se uložený v knihovně. Tam můžeme vidět jeho náhled a jméno, pod kterým jsme symbol (třídu) uložili.

Podle ikony v knihovně můžeme poznat typ symbolu:

Další způsob vytváření Movieclipu je možný přímo přes Knihovnu, poklepáním na ikonu „nový symbol“. Objeví se nám pak stejné nastavení, ale Movieclip NEBUDE NA SCÉNĚ (objeví se jen v knihovně) a bude PRÁZDNÝ.

Úprava obsahu Movieclipu:

Pro úpravu obsahu Movieclipu se nejprve musíme dostat „do něj“. Což lze těmito způsoby:

• Dvakrát poklepeme na Movieclip na scéně (pokud jsme jej vytvářeli z grafiky na scéně
• Dvakrát poklepeme na Movieclip v knihovně
• Označíme Movieclip jedním klepnutím a přejdeme na hlavní menu: Edit > Edit symbols

Poté jsme uvnitř Movieclipu a můžeme měnit jeho obsah. Movieclip je ve své podstatě „matrice“ nebo „razítko“. Jeho vzor (třída) je uložená v knihovně a na scénu z knihovny vytahujeme jen jednotlivé kopie. Tyto kopie budou mít vždy stejný obsah! Což znamená, že pokud změníme jednu kopii – nebo matrici v knihovně – změní se automaticky obsah všech.

To, kde se momentálně nacházíme, poznáme podle lišty nad plochou scény:

(na příkladu jsme tedy uvnitř Movieclipu obdélník, který se nachází na hlavní scéně)

Když vstupujeme do Movieclipu ze scény, zůstane kolem něj vidět „jeho okolí“. Což je výhodné zejména u animace, stále můžeme kontrolovat, v jakém kontextu se animace odehrává.) V momentě, kdy do Movieclipu vstupujeme z knihovny je kolem nekonečné bílé pozadí. Pokud se chceme z úpravy obsahu vrátit na scénu, nebo o úroveň výš, buď klikneme na název úrovně, na kterou se chceme vrátit, nebo dvakrát poklepeme na plochu scény.

Úprava vnějšího vzhledu Movieclipu:

V případě, že chceme na scéně mít více kopií (instancí) jednoho Movieclipu, stačí další objekt jednoduše přetáhnout myší z knihovny:

Může se stát, že budeme ve svém projektu využívat větší množství stejných Movieclipů (např. mraky, hvězdy, tráva aj.), aby všechny objekty nevypadaly stejně, dají se určité vlastnosti jednotlivým Movieclipům nastavit – bez ovlivnění obsahu.

Movieclip má tyto vlastnosti (v Properties):

• instance name – jméno instance (pojmenujeme vždy jednu určitou instanci a tu pak můžeme ovládat actionscriptem)
• .width – výška
• .height – šířka
• .x – pozice podle osy x (horizontální, z leva do prava)
• .y – pozice podle osy y (vertikální, odshora dolu)
• .alpha – průhlednost (0 průhledná – 1 plná)
• .rotation – rotace (ve stupních, výchozí pozice je ta kterou má objekt v knihovně)
• .scaleX – zkosení horizontální
• .scaleY – zkosení vertikální
• brightness (jas)
• tint (odstín)
• 3D pozice, filtry a další

Movieclip tedy můžeme změnit, obarvit, zkosit a jinak upravit a tímto vytvoříme iluzi různých objektů. Ve skutečnosti jde jen o vnější úpravy. vnitřní obsah Movieclipu zůstane stejný.

Příklad: Obdélníky na obrázku vypadají jako různé objekty, ale ve skutečnosti jde jen o tři instance stejné třídy:

Tweeny:

Pokud chceme ve flashi animovat, máme k tomu dva možné typy animace:

• Frame to frame (snímek po snímku – „ručně“ nakreslený, nebo upravený)
• Tweeny (dopočítání animace počítačem)

Ve flashi jsou tři druhy tweenů:

• Shape Tween – pracuje JEN se surovou grafikou (obrys, tah), potřebuje počáteční a koncový snímek
• Classic Tween – pracuje s Movieclipy (Symboly), potřebuje počáteční a koncový snímek
• Motion Tween – pracuje s Movieclipy(Symboly), stačí potřebuje JEN počáteční snímek

Rozdíl v použití Tweenů

1. optimalizování – co nejméně bodů (vyhlazení(smooth), vyrovnání (straighten)), na počátečním snímku musí být stejný počet bodů jako na konci
2. obrys tužkou a výplň plechovkou (NE štětec)
3. pokud možno obrys jedním tahem
4. v objektu se nesmí křivky křížit
5. na jeden shape tween pouze jeden objekt
6. objekt nesmí mít výřezy (prázdné plochy uvnitř sebe)
7. používat shape hints (hinty zadávat postupně)

Shape tween

shape_tween_priklady.zip

1. na vrstvě smí být pouze JEDEN objekt, který je animován Classic tweenem (pozor na zapomenuté tahy a výplně, s takovou chybou vám animace nebude fungovat správně)
2. Animovaný objekt musí být VŽDY v Symbolu před vytvořením tweenu
3. Nejprve vždy vytvořit vrstvu, do ní dát Movieclip (případně změnit grafiku na Movieclip), který se má animovat, a až POTOM vytvořit klíčový snímek, kterým bude animace končit. Poté teprve upravit objekt na konečném snímku a až na závěr vytvořit tween.

rybicky.zip

1. na vrstvě smí být pouze JEDEN objekt, který je animován Classic tweenem (pozor na zapomenuté tahy a výplně, s takovou chybou vám animace nebude fungovat správně)
2. Animovaný objekt musí být VŽDY v Symbolu před vytvořením tweenu

Vytváření tweenů krok po kroku najdete u zadání prvního úkolu: http://patf-biokyb.lf1.cuni.cz/wiki/vyuka/ukol_1_-_1.rocnik_2012