Tvorba vzdel. obsahu v Macromedia Flash

1 Úvod

Macromedia Flash je dnes už svetovým štandardom pre vytváranie atraktívnych internetových stránok, prezentácií a aplikácií. Či už sú to animované logá, navigačné paneli pre webové stránky, dlhé animácie, animované seriály, celé internetové stránky používajúce Flash alebo internetové aplikácie je schopným a flexibilným prostriedkom, ktorý sa stáva neodmysliteľnou súčasťou modernej internetovej stránky.

História Flashu siaha do roku 1994. Vtedy vlastne ešte nešlo o Flash, ako ho poznáme dnes. Volal sa SmartSketch a bol založený na Jave. Od tohto smeru sa však ustúpilo. Java ako programovací jazyk totiž v tej dobe nebol dostatočne rýchly a spoľahlivý. Keď sa v roku 1995 objavili prehliadače podporujúce zásuvné moduly typu PLUG-IN, bol SmartSketch premenovaný na FutureSplash Animator a bola celkovo zmenená jeho podoba. Macromedia v tejto dobe pracovala na svojom projektu s názvom Shockwave.

V roku 1996 Macromedia kúpila FutureSplash Animator a vznikol tak Macromedia Flash 1.0. Táto verzia ešte neobsahovala skriptovanie Actionscript. Nasledujúca verzia 2, už dovoľovala základnú skriptovanú manipuláciu s prehrávaním animácie. Objavujú sa prvky ako tlačidlo a grafika, vznikla premenná. Verzia 3 priniesla ozvučenie animácií a s tým spojené príkazy, potom príkazy typu fscommand a možnosť skriptovane načítať SWF animácie.

Verzia 4. bola skutočne revolučná. Celý Actionscript bol prepracovaný, vzniklo veľké množstvo príkazov a funkcií, napr. príkazy pre movieclip, podmienky a cykly, nové operátory, načítanie premenných zo súboru a veľa ďalších Verzie 5 bola opäť prelomová. Vznikajú objekty so svojimi metódami a vlastnosťami. Je možné vytvárať vlastné funkcie. Vznikajú komponenty. Väčšina príkazov je preorientovaná na objekty. Vzniká prehľadnejšia dot syntax a podporovaná je komunikácia so serverom pomocou XML Socket. Verzia 6 (MX) priniesla podstatné rozšírenie objektov a metód.

Vznikajú UI komponenty a spolupráce s videom. Flash player 6 vznikla podpora obojsmerného streamovaného prenosu zvuku a videa pomocou kamier a mikrofónov. Je vyvinutý nový komunikačný protokol RTMP a Server-side Actionscript pre komunikáciu so serverovými službami a serverový balík Flash Communication Server MX. A konečne 7. verzia pomenovaná MX 2004. Táto verzia má dve podoby: MX 2004 a MX 2004 Pro.

Obe verzie ponúkajú vylepšené rozhranie, nové efekty (hlavne pre prácu s textom - podpora CSS), vylepšenú časovú osu, rozšírenie kompatibility importovaných objektov (PDF, EPS, …), šablóny pre vytváranie zložitých Motion a Shape Tweenov, vylepšené trasovanie bitmáp a Actionscript 2.0, ktorý sa vyznačuje väčšou priamočiarosťou a robustnosťou.

Cieľ práce

Cieľom teoretickej časti je vysvetlenie základných princípov tvorby obsahu v prostredí Macromedia Flash MX2004.

Cieľom praktickej časti je vytvorenie internetovej stránky Flash pre začiatočníkov, ktorá má za úlohu čo najjednoduchším spôsobom oboznámiť užívateľa s prostredím Macromedia Flash MX2004 a naučiť ho základom kreslenia, animácie a Actionscriptu v tomto prostredí.

Princípy tvorby prezentácií v Macromedia Flash 3.1 Pravidlá tvorby

Pri vytváraní obsahu v Macromedia Flash je treba dodržať aspoň niekoľko základných pravidiel.

Flash je mocný nástroj, ale nehodí sa na všetko. Hlavne nie na dlhé texty, redakčné systémy a podobné typy internetových prezentácií. Preto je vhodné sa nesnažiť používať Flash za každú cenu. Treba pamätať na to, že aktualizácia Flash stránky bude zložitejšia. Pokiaľ je teda nutné publikovať väčšie množstvo textu, odporúča sa vytvoriť vo Flashi len časť stránky.

Hlavnou prednosťou vektorovej grafiky je jej dátová veľkosť (resp. vlastne malosť). Tohto treba využívať čo najviac. Flash povoľuje vkladať rastrové obrázky, ale toho by malo byť využité len v minimálnom množstve. Ďalej zväčšujú veľkosť animácie zvuky a videosúbory. Podstatné je tiež čo najviac používať kópie symbolov v knižnici - symbol bude uložený len jeden krát a jeho inštancie animáciu nezväčšujú.

Čo šetria vektorové objekty na veľkosti súboru, to berú na záťaži procesoru. Ten totiž musí obdržané informácie vyhodnotiť a správne zobraziť. Najnáročnejšie je vykresľovanie priehľadných objektov – najhoršie je, keď sa ich niekoľko prekrýva a navzájom sa pohybujú. Preto je potrebné myslieť na počítače s menším výpočtovým výkonom.

Žiadne gýčovitosti. Flash je hotovým rajom pre webdesignérov – nie sú tu zväzovaný nespoľahlivým HTML a CSS pozíciovaním objektov a to potom zvádza k najrôznejším grafickým efektom, ktoré síce môžu byť pekné, ale z hľadiska užívateľa neprehľadné. Je potrebné teda krotiť svoju fantáziu a aj keď to nie je nutné, snažte sa čo najviac dodržiavať blokové schéma internetových stránok. Človeka síce poteší text prilietavajúci po písmenkách, ale ne keď ho potom musí čítať po špirále.
Nesnažte sa byť chytrejší, ako užívateľ. Túto chybu spravil Microsoft Word a svojou činnosťou pripomína skôr výherný automat. Čiže je podstatné dať užívateľovi možnosť výberu a nie sa snažiť predvídať, čo asi bude chcieť robiť. Dobrým príkladom tohto je predovšetkým otváranie okien internetového prehliadača spôsobom na celú obrazovku (fullscreen), nekontrolovateľné prehrávanie zvukov a podobné.
Kreslenie

Program Macromedia Flash MX2004 dáva užívateľovi na výber niekoľko rozdielnych nástrojov. Ich použitím získame vektorový objekt, ktorý je plne editovateľný bez straty kvality. Každý takýto objekt je vo Flashi tvorený obrysom a výplňou. Zmena tvaru objektu sa robí zmenou obrysu. Výplň sa generuje automaticky. Ohraničenie alebo výplň nie sú u objektov povinné. Zmena druhu farby ohraničenia alebo výplne sa dá vykonať kedykoľvek počas kreslenia.

Objekt s obrysom Objekt s obrysom Objekt s výplňou
Obr. 1

Na kreslenie jednoduchých útvarov ako sú štvorec, obdĺžnik, kruh a ovál postačí panel nástrojov(tools). Ale zložitejšie útvary sa kreslia pomocou spájania, rozdeľovania jednoduchých tvarov do zložitejších alebo priamo kreslením a editáciou kriviek.
Vektory a bitmapy

Či už sa jedná o vektorové alebo bitmapové vyjadrenie grafiky, každé má svoje výhody a nevýhody. Vektorová grafika je jednoznačne dátovo menej náročná. Je to dané matematickým spôsobom vyjadrením každého bodu, krivky alebo plochy. Krivka je definovaná súradnicami počiatočného bodu, vektorom, ktorý určuje smer a zakrivenie a koncovým bodom. K tejto rovnici sa ešte pridajú informácie o hrúbke a farbe čiary. Zložitejšie krivky sú tvorené niekoľkými jednoduchými v koncových bodoch pospájanými úsekmi.

Výhody z toho plynúce sú, že program vykresľuje obrázok pomocou matematických vzorcov, u ktorých nie je problém prepočítať obrázok na inú veľkosť bez straty kvality. Tieto rovnice sa dajú taktiež jednoducho meniť a editovať. Zmena farby sa taktiež robí iba zmenou matematického vyjadrenia odtieňu farby. Nevýhody sú v obtiažnom vyjadrení zložitých farebných prechodov a nutnosti zobrazovať vektorové obrázky pomocou špeciálnych prehliadačov. Naproti tomu sú bitmapové obrázky tvorené rastrom bodov, kde každý bod má presne určenú polohu a farbu.

Bitmapa v nekoprimovanej podobe obsahuje toľko bodov koľko sa dá vypočítať vynásobením počtu bodov na výšku a šírku obrázku. Nevýhody bitmapových obrázkov sú ich dátová veľkosť a zmena veľkosti obrázku, kde sa strate kvality nedá vyhnúť. Donedávna boli bitmapy jedinou možnosťou ako zobraziť grafiku v internetovom prehliadači. Dnes sa ale oba spôsoby vyjadrenia grafiky veľmi zbližujú a nie je výnimkou ich kombinácia v jeden celok.

Obr.2

Ukážka rozdielu medzi vektorovým a bitmapovým spôsobom zobrazenia grafiky pri zväčšení.
Panel nástrojov (tools)
Panel nástrojov slúži ku kresleniu a editácii objektov a štandardne sa nachádza v ľavej časti obrazovky a má 16 ikoniek.
Arrow tool (V) - Slúži hlavne k označovaniu objektov a ich premiestňovaniu. Používa sa aj k editácii čia a okrajov objektov.

Subselect Tool ( A )
Slúži k editácii kriviek a koncových bodov štandardných symbolov. Klepnutím na akýkoľvek objekt, ktorý sa skladá z kriviek, sa zobrazia kľúčové body objektu, ktoré je možno následne editovať.

Line Tool ( N )
Slúži ku kresleniu čiar. Farba, hrúbka a typ čiary sa nastavuje v dolnom paneli Properties.

Lasso Tool ( L )

Slúži k výberu nepravidelných oblastí ,či častí objektov.

Pen Tool ( P )

Slúž pre vytváranie vektorových kriviek. Krivky sa vytvárajú umiestňovaním kľúčových bodov, pričom pri umiestení každého z nich sa dá nastaviť smer a zaoblenie krivky. Vlastnosti čiar(hrúbka, typ a farba) sa nastavujú v paneli Properties.

Text Tool ( T )

Slúži ku vkladaniu textu. Kliknutím na pracovní plochu

s vybraným nástrojom Text Tool sa vytvorí textové pole, ktorého vlastnosti sa nastavujú v paneli Properties.

Oval Tool ( O )

Slúži ku kresleniu kruhov a oválov. Na lište Colors sa dá nastaviť farba výplne a ohraničenia.

Rectangle Tool ( R )

Slúži ku kresleniu štvorcov a obdĺžnikov. Rovnako ako u nástroja Oval Tool sa v paneli Colors dá nastaviť farba výplne a ohraničenia. Navyše sa v paneli Options pod ikonkou s názvom Round Rectangle Radius skrýva panel Rectangle Settings, ktorý umožňuje nastaviť zaoblenie okrajov vytvoreného štvorca či obdĺžnika.
Pencil Tool ( Y )

Nástroj vhodný pre kreslenie od ruky. V paneli Options sa dá vybrať z troch druhov kreslenia. Funkcie Straighten zarovnáva nakreslené čiary, takže sa dajú od ruky kresliť úplne rovné čiary. Smooth naopak pri kreslení čiary zaobľuje a vyhladzuje nepresnosti vzniknuté kreslením. Funkcia Ink najviac zachováva pôvodný tvar nakreslenej krivky a vytvorenú kresbu nijak neupravuje.

Brush Tool ( B )

Je nástroj, ktorý pracuje podobne ako Pencil Tool, ale výsledkom je čiara tvorená obrysom a výplňou. Je to vlastne taký štetec. V paneli options sa dá, okrem hrúbky a tvaru štetca, nastaviť tiež chovanie nakresleného objektu voči ostatným objektom .

Paint Normal -Normálne kreslenie.
Paint Fills -Kreslí iba cez objekty, ale nie cez čiary.
Paint Behind -Kreslí iba na pozadí scény. Objekty a čiary zostávajú v popredí.
Paint Selection -Kreslí iba v oblasti vybranej pomocou Arrow Tool.
Paint Inside -Kresba automaticky končí tam, kde je prerušená inou čiarou, alebo objektom.

Free Transform Tool ( Q )

Pri označení objektu týmto nástrojom sa okolo objektu vytvoria transformačné body, ktoré umožňujú zmenu veľkosti, natočenia a skosenia. So stlačenou klávesov Ctrl môžete editovať každý rohový bod zvlášť.

Fill Transform Tool ( F )

Nástroj určený pre zmeny vzhľadu výplne farebným prechodom, alebo obrázkom.

Ink Bottle Tool ( S )

Slúži pre zmenu farby a typu ohraničenia.

Paint Bucket Tool ( K )

Slúži k vyplnení objektu farbou, farebným prechodom, alebo bitmapovým obrázkom. V paneli Options sa dá nastaviť tolerancia pre vyplňovanie objektov.
Don´t Close Gaps

vyplní sa iba celkovo uzavreté objekty.
Close Small, Medium a Large Gaps - vyplnia sa objekty čiastočne otvorené.

Dropper Tool ( I )

Slúži k odobratiu vzorky farby z už nakreslených objektov.
Eraser Tool ( E )

Slúži k mazaniu častí objektov alebo čiar. V paneli options sa nachádza niekoľko režimov nastavení, ktoré umožnia mazať iba niektoré vybrané časti objektu.

Erase Normal - Maže všetko.
Erase Fills - Maže iba výplň.
Erase Lines - Maže ohraničenie.
Erase Selected Fills - Maže označené výplne.
Erase Inside - Maže iba vtedy, ak sa začne mazať vo vnútri objektu.
Vytváranie zložitejších objektov spájaním a delením.

Väčšina zložitejších tvarov sa dá zložiť s niekoľko jednoduchých objektov pomocou spájania a delenia. Táto technika je veľmi jednoduchá a účinná.
Príklad spájania dvoch kruhov.

Nástrojom Oval Tool(O) si nakreslíme dva kruhy tak aby sa neprekrývali(Obr.3). Nástrojom Arrow Tool(V) si dvojklikom vyberieme jeden z nich, z ktorým môžeme pohybovať nezávisle na druhom. Treba posunúť jeden z kruhov tak aby sa navzájom prekrývali(Obr.4). Vyberieme časť ohraničenia, ktorá je v mieste prekrytia a vymažeme ju(Obr.5). Následne vybratím objektu zistíme, že dva kruhy sa spojili v jeden zložitý objekt.


Príklad odčítania dvoch kruhov.

Nástrojom Oval Tool(O) si nakreslíme dva kruhy rozdielnych farieb tak aby sa neprekrývali a odstránime ohraničenie(Obr.6). Nástrojom Arrow Tool(V) posunieme jeden z kruhov tak, aby sa prekrývali(Obr.7). Označíme pravý kruh a posunieme ho doľava (Obr.8). V ľavom kruhu zostane vykrojený tvar pravého kruhu, ale pravý zostane nezmenený.

Príklad delenia kruhu čiarou(delenie objektov na viacej častí).

Nakreslíme kruh a cez neho čiaru nástrojom Line Tool(N)(Obr.9).Potom môžeme každú časť označiť a editovať oddelene(Obr.10). [1][2]

Nástroj pero – Pen Tool.

Vytváranie zložitých útvarov pomocou kreslenia je najpresnejšie ale zároveň najprácnejší spôsob ako dosiahnuť požadovaného tvaru.
Priamka.

Vektorová priamka je tvorená dvomi koncovými bodmi a úsečkou ktorá je spojnicou týchto bodov.

Klepnutím na pracovnú plochu nástrojom Pen Tool(P) získame počiatočný bod priamky. Každým ďalším klepnutím na iné miesto plochy sa vytvorí ďalší bod a medzi bodmi sa nakreslí priamka.

Krivka

Krivka je rovnako ako priamka tvorená dvoma koncovými bodmi, ale navzájom sú spojené krivkou. Polomer zakrivenia a priebeh krivky je daný dĺžkou a smerom riadiacich úsečiek.

Klepnutím na pracovnú plochu nástrojom Pen Tool(P) získame počiatočný bod. Po ďalšom kliku necháme tlačidlo myšky stlačené a posúvame kurzor myšky dole a následne tlačidlo uvoľníme. Posunutím kurzoru sa z koncového bodu vytiahne riadiaca úsečka. Ďalším klikom na iné miesto plochy sa vytvorí ďalší segment, ktorý je opäť zakrivený (Obr.12). Krivka je teraz tvorená tromi bodmi, kde koncové sú bez riadiacich priamok a prostredný bod má dve riadiace priamky, ktoré ovplyvňujú krivku prechádzajúcu týmto bodom.
Zmena výplne a ohraničenia.

Základné nastavenie druhu farby a farby výplne sa robí v paneli Color Mixer. Zo zoznam