ZÁKLADNÍ ZPŮSOB TVORBY VÝUKOVÝCH MATERIÁLŮ VE FLASH BASIC METHOD OF CREATION TEACHING MATERIALS IN A FLASH

Transkript

1 ZÁKLADNÍ ZPŮSOB TVORBY VÝUKOVÝCH MATERIÁLŮ VE FLASH BASIC METHOD OF CREATION TEACHING MATERIALS IN A FLASH Jiří Hrbáček hrbacek@posta.ped.muni.cz ANOTACE Flash umožňuje vytvářet animace velmi dynamicky. Způsob tvorby je velmi závislý na zkušenostech autora.mnohou autorů se však často potýká s problémem, jak jednoše vytvořit multimediální výukový materiá. Existují způsoby, které jsou společné pro tvorbu ve Flash, Captivate i jiných nástrojích. Příspěvek si klade za cíl ukázat jeden, který se dá bez nadsázky nazvat základním Lze jej použít pro tvorbu webových stránek, multimediálních výukových opor i simulací práce s programy. Kreativní uživatel nalezne jistě ještě mnoho dalších aplikací, kde jej lze s výhodou využít. KLÍČOVÁ SLOVA Flash, animace, interaktivní, výukové materiály, studijní opory. SUMMARY Flash allows you to create animation very dynamic. The method of formation is very dependent on the experience of author. Many authors, however, often has a problem, how is posible easily create multimedia educational materials. There are ways that are common to the creation of Flash, Captivate and other instruments. The contribution aims to show the one which can be called without exaggeration the base can be used for creating Web pages, multimedia teaching and study materials with simulation programs. Creative users will still find many other applications where it can be used. KEYWORDS Flash, animation, interactive, teaching materials, study support. 1. Úvod Pomocí animací lze zlepšit názornost výkladu, vysvětlení činnosti nebo postupu. Flash patří mezi nejlepší nástroje, pro vytváření animací. Ve Flash existují v zásadě tři základní způsoby animací. První způsob je klasická animace kdy se rychle střídají bitmapové obrázky. Takto se přehrával klasický film. Player jednoduše zobrazuje snímek za snímkem jeden po druhém. Druhým způsobem jsou animace vytvořené staticky, tedy přímo ve vývojovém prostředí s použitím MotionTweenu a ShapeTweenu. Definujeme počáteční a koncovou polohu (parametr), nebo tvar ve dvou od sebe vzdálených snímcích a vývojové prostředí flash vytvoří přechod ve snímcích mezi nimi. FlashPlayer postupně jak přehrává snímky vždy nejprve umístí objekty do odpovídajícího místa a pak je zobrazí. Třetím způsobem je dynamická animace. Poloha objektu je pro každý snímek vypočítávaná. V tom případě FlashPlayer nejdříve vypočte novou polohu objektu, pak objekty umístí na vypočtenou pozici a poté je zobrazí. Způsobů, jak tyto základní animace spolu vzájemně propojit tak, aby výsledná animace byla dynamická a dala se řídit i skriptem existuje mnoho. Podívejme se na některé z nich. 2. Animace Frame by Frame trochu jinak Animaci Frame by Frame (snímek za snímkem) zná každý z nás. Přesně tak se chová filmový pás. Zobrazuje snímek za snímkem. Oko přechody snímků nevnímá a jednotlivé snímky spojí do plynulého pohybu.

2 Obr 1: Animace pohybu frame by frame (snímek za snímkem) Ve flashi tyto animace lze dělat také pomocí MotionTween a ShapeTveen. Příklad tohoto způsobu animace je na obrázku. Objekty jsou na jednotlivých snímcích vzájemně posunuty. Pokud tuto animaci spustíme, modrý balonek plynule zapluje za žlutý. Rychlost přehrávání snímků použijeme 25 snímků/sec. Při této rychlosti je pohyb plynulý. Jak jsem již uvedl, tento způsob animace je dobře známý. Animace frame by frame, kdy snímky nejsou plynule přehrávány již tak moc známá není. I kyž ji vlastně každý přirozeně dělá například při prezentacích. V tomto případě obvykle přecházíme ze snímku na snímek například po kliknutí myší na tlačítko. Tento způsob animace připomíná obracení stránek knihy. Přečteme stránku a obrátíme list. Je to skvělý způsob pro vytváření multimediálních studijních opor. Text není rolován, jako například když jej prohlížíme třeba v textovém editoru. Tento způsob má jistá specifika. Obr 2: Animace frame by frame použitá pro vytvoření studijní opory Autor je donucen promýšlet obsah stránky tak, aby obsahovala vše potřebné pro vysvětlení probíraného tématu. Je třeba materiály vytvářet tak, aby se nemuselo stále přecházet na předchozí či následující snímek. Pokud jde například o popis obrázku, lze jej udělat převyprávěný, jako zvukovou nahrávku. Můžeme také k obrázku připojit text, který bude rolovaný nebo v podobě titulků synchrronizovaný se zvukovou nahrávkou. Do stránky lze vkládat videonahrávky, nebo aktivní odkazy, které otevřou jiné animace, nebo webové stránky. Důležité je, aby každá stránka byla opravdu samostatným snímkem. Další možnost, kterou poskytuje animace frame by frame je vytvoření rozbalovacích nabídek. V tomto případě každý snímek zobrazuje jeden stav. Přecházením mezi stavy vyvoláme dojem, že se nabídky rozbalují a sbalují. Obr 3: Animace frame by frame použitá pro vytvoření rozbalovacích nabídek

3 Potřebujeme-li na stránce výukového materiálu umístit animaci, vytvoříme animaci a celou zapouzdříme do MovieClipu. Velmi to připomíná vložení běžného videa. Vkládání animací do snímků studijní opory toto oporu velmi oživí a přidá do opory interaktivitu. Do animace lze také vkládat i již hotové flash animace (soubory SWF).Vložení SWF externí animace do stránky je otázkou několika málo řádků skriptu. Je-li SWF animace umístěná ve stejném adresáři, jako celá aplikace, pak může vypadat například tak jak je ukázáno na následujícím obrázku. Obr 4: Skript, který načte a spustí externí animaci První řádek vytvoří objekt, do kterého se externí SWF načte. Ve druhém a třetím řádku vytvoříme požadavek na načtení konkrétního soboru. V našem případě Krtek.swf, který je v aktuálním adresáři s vytvářenou animací. Tyto dva řádky lze sloučit do jednoho takto: var urlreq:urlrequest= new URLRequest( Krtek.swf ); Předposlední řádek odstartuje načítání SWF souboru a poslední pak načtený soubor zobrazí na scéně. Jwk prosté. Potřebujeme-li posouvat animaci pomocí tlačítek o snímek vpřed či vzad, vytvoříme grafickou podobu tlačítka a připojíme k němu následující skript, který umístíme do samostatných souborů TlVpred.as a TlVzad.as V souboru TlVzad.as je následující skript. package { import flash.display.movieclip; import flash.events.mouseevent; import flash.display.simplebutton; public class TlVzad extends MovieClip { public function TlVzad() { this.addeventlistener(mouseevent.click,okrokvzad); private function okrokvzad(e:mouseevent) { (this.parent as MovieClip).prevFrame();

4 V souboru TlVpred.as je následující skript. package { import flash.display.movieclip; import flash.events.mouseevent; import flash.display.simplebutton; public class TlVpred extends MovieClip { public function TlVpred() { this.addeventlistener(mouseevent.click,okrokvpred); private function okrokvpred(e:mouseevent) { (this.parent as MovieClip).nextFrame(); Jsou to textové soubory umístěné opět v adresáři s aplikací. Jediné, co v těcto souborech vykonává potřebnou činnost jsou tučné řádky. První způsobí to, že tlačítko začne reagovat na kliknutí myší na tlačítko. Druhý po kliknutí provede přesun časové osy na které je tlačítko umístěné o snímek vpřed (nextframe), nebo vzad (prevframe). Aby tlačítka fungovala, stačí tyto soubory k nim připojit kliknutím pravým tlačítkem myši na symbol tlačítka a nastavit jeho properties takto: Obr 5: Připojení skriptů k talčítkům Lze tak velmi snadno vytvořit stránkování textu, přechod mezi stránkami celé výukové opory apod. Závěr Ukázali jsme si zde základní způsoby použití animací frame by frame pro vytvoření působivé studijní opory, webové stránky či prezentace.

5 Pokud je animace přehrávána plynule, umožňuje vytvářet plynulé animace. Naplníme-li snímky hlavní časové osy požadovaným obsahem, ponecháme přechod mezi snímky na kliknutí myši. K tomu lze použít například tlačítka vpřed a vzad. Vytvoříme jednoduše prezentaci nebo výukovou oporu, kde každý snímek je jednou stránkou této opory. Podobně lze vytvořit rozbalovací nabídky apod. Není zde kompletní postup jak vše udělat. Jsou zde ukázány základní kroky tak, aby bylo vidět jak snadné je takovou animaci udělat. Lze se ji naučit za několik hodin. Nejdůležitější však je pochopit, co vše lze vytvořit. Často se setkáváme v prezentacích ve Flash, PowerPointu či Captivate s tím, že jejich struktura je zbytečně velmi složitá. Autoři mají problémy s vytvořením požadované struktury. Mnohdy dávají složité animace tam, kde jich není třeba vkládají komplikované přechody a vzájemně navazující animace do snímků. Využití těchto způsobů frame by frame lze aplikovat i do těchto systémů. Věřím, že příspěvek nastínil možnosti a ukázal několik námětů, jak řešit nejčastější problémy. Příspěvek vznikl v rámci výzkumného záměru - kód: MSM , Speciální potřeby žáků v kontextu Rámcového vzdělávacího programu pro základní vzdělávání. LITERATURA: [1] Hrbáček, Jiří. Flash 1 - tvorba inteligentní grafiky - multimediální učebnice. Brno : MSD, spol. s.r.o Brno, s. První. ISBN [2] Hrbáček, Jiří. Flash2, Základy programování v AS2-multimediální učebnice. první. Brno : MSD, spol. s.r.o. Brno, s. první. ISBN [3] In Ondřej Brichta: Články věnující se práci s Flash, Publikováno [4] Stuchlíková, Ľ., Gron, M., Radobický, J., Csabay, O., Rovanová, Ľ., Beňo, J., Mondočko, P., Števove, M., Ondrášková, I., Hulényi, L., Kinder, R., Helbich, M., Vacek, F., Nagy, A., Bednár, M., Nemčok, P.: Interactive Animations as an e-learning motivation agent, In: 6th International Conference Virtual University. Proceedings. Bratislava, December 15-16, 2005, pp Ing. Jiří Hrbáček, Ph.D. Katedra technické a informační výchovy, Masarykova univerzita