C++

VŠB - Technická univerzita Ostrava Fakulta elektrotechniky a Informatiky Katedra Informatiky

Vytvoření obrázků a animací chování a funkčnosti jazyka C/C++

2007

David Osička

Prohlašuji, že jsem tuto diplomovou práci vypracoval samostatně. Uvedl jsem všechny literární prameny a publikace, ze kterých jsem čerpal. V Ostravě 9. května 2007

………………………

Rád bych poděkoval Ing. Zdeňku Velartovi za cenné informace a připomínky, které mi pomohly s tvorbou této práce.

Abstrakt Tato bakalářská práce seznamuje čtenáře s možnostmi využití animací v digitálním světě internetu. Jejím hlavním tématem je technologie Flash, kterou detailně popisuje spolu s praktickými ukázkami. Představuje také vývojové prostředí pro tvorbu animací, Macromedia Flash. Hlavní část práce je zaměřena na vytváření výukového materiálu ve Flashi, jehož tématické okruhy se týkají programovacího jazyka C/C++. Klíčová slova: Flash, Macromedia, C, C++, animace, ActionScript

Abstract This work introduces the reader with the posibility of use the animations in the digital world of internet. Its main theme is the technology called Flash, which is detailed described together with the practical shows. It also introduces the development enviropment for making the animations, Macromedia Flash. The main part of the work is specialized to creating the learning material made in Flash, which thematic range is referend to the programming language C/C++. Keywords: Flash, Macromedia, C, C++, animation, ActionScript

Seznam použitý zkratek a symbolů ASP CGI DOC EXE FLA GIF HTML JPEG MOV PDF PHP SMIL SWF XML

- Active Server Pages - Common Gateway Interface - Microsoft Word Files - An executable file - Flash source file - Graphics Interchange Format - Hypertext Markup Language - Joint Photographic Experts Group - Apple QuickTime Movie file format - Portable Document Format - Personal Home Page - Synchronized Multimedia Integration Language - Playable Macromedia Flash animation - Extensible Markup Language

OBSAH

1

Obsah 1

Úvod …………………………………………………………………………………...4

2

Animace na webu……………………………………………………………………...5 2.1. Druhy animací……………………………………………………………………..6

3

ActionScript…………………………………………………………………………. 10 3.1. Historie…………………………………………………………………………...10 3.2. ActionScript 2.0………………………………………………………………… 10 3.3. Předdefinované funkce a proměnné……………………………………………...11 3.4. Externí zdroje dat………………………………………………………………... 12 3.4.1. Externí skripty…………………………………………………………...13 3.4.2. Externí datové soubory…………………………………………………. 13 3.4.3. Serverové skripty………………………………………………………...14 3.4.4. XML……………………………………………………………………..15

4

Macromedia Flash…………………………………………………………………...17 4.1. Uživatelské rozhraní……………………………………………………………...17 4.2. Důležité prvky při tvorbě animací………………………………………………..18 4.2.1. Časová osa……………………………………………………………… 18 4.2.2. Panel Properties………………………………………………………… 19 4.2.3. Panel Actions…………………………………………………………… 20 4.2.4. Panel Components……………………………………………………… 21 4.2.5. Panel Library…………………………………………………………….21 4.3. Publikování……………………………………………………………………….23

5

Flashové animace chování jazyka C/C++…………………………………………. 26 5.1. Tvorba prostředí…………………………………………………………………. 26 5.2. Ovládací prvky animace………………………………………………………….27 5.2.1. Tlačítka…………………………………………………………………. 27 5.2.2. Nápověda……………………………………………………………….. 28 5.3. Flashové animace………………………………………………………………... 29 5.3.1. Cyklus for………………………………………………………………. 29 5.3.2. Cyklus while……………………………………………………………. 30 5.3.3. Cyklus do-while…………………………………………………………31 5.3.4. Přepínač switch………………………………………………………….31 5.4.5. Vstup a výstup ze souboru………………………………………………32

6

Závěr ………………………………………………………………………………… 34

7

Literatura…………………………………………………………………………….35

Přílohy A Obsah CD………………………………………………………………………….. 37

SEZNAM OBRÁZKŮ

2

Seznam obrázků 1 2 3 4 5 6 7 8 9 10 11 12 13

Sekvenční řazení snímků znázorňující pohyb………………………………………….5 Logo Future Splash Animator………………………………………………………….8 Uživatelské rozhraní Macromedia Flash……………………………………………...18 Časová osa…………………………………………………………………………….19 Panel Properties……………………………………………………………………….20 Panel Actions………………………………………………………………………….20 Vizuální podoba komponent CheckButton, ComboBox a Buton……………………. 21 Panel Library………………………………………………………………………….23 Možné formáty pro publikování………………………………………………………24 Prostředí animace……………………………………………………………………...26 Rotující krychle……………………………………………………………………….28 Graficky znázorněný průchod polem…………………………………………………29 Čtení dat ze souboru…………………………………………………………………..33

SEZNAM ZDROJOVÉHO KÓDU

3

Seznam zdrojového kódu 1 2 3 4 5 6 7 8

Struktura XML dokumentu…………………………………………………………... 15 Instance objektu XML………………………………………………………………...15 Čtení dat z XML………………………………………………………………………16 Obsluha událostí tlačítka Play………………………………………………………...27 Obsluha událostí tlačítka Stop………………………………………………………...27 Obsluha událostí tlačítka Reward……………………………………………………..28 Obsluha událostí nápovědy…………………………………………………………... 28 Náhodný výběr přehrávané animace………………………………………………….32

1. ÚVOD

4

1. Úvod Prostředí internetu již není pouze statické, neklade tolik důraz na obsah. Webové stránky nabízejí stále více interaktivity a komunikace s uživatelem, pro kterého již internet není pouze informačním médiem, ale více se stává součástí jeho každodenního života, zdrojem zábavy a vzdělání. V době, kdy se stránky neposuzují podle kvality zpracovaného textu, množství informací, ale podle návštěvnosti, vzniká více technik, jak na tomto virtuálním bojišti konkurence zvítězit, a nebo alespoň nezaostávat. Přicházejí proto stále nové technologie, které s sebou přinášejí mnoho možností, jak toho docílit. Ne všechny ale zůstávají používány, jelikož nároky uživatelů jsou větší a větší. Existují však i takové, které si nejen zajistily své místo na internetu, ale postupným vývojem svou pozici posilují. Nejvýznamnějším fenoménem posledních let se stala technologie Flash, která dokázala jak splnit nároky uživatelů, tak nabídnout dokonce i více. Právě o ní pojednává tato práce, která popisuje Flash od svého začátku až do dnešní doby a ukazuje možnosti jejího využití. Součástí je také výukový materiál o vybraných oblastech jazyka C/C++ vytvořený jako flashová animace. Začátek bakalářské práce je zaměřen na animace na webu, které jsou v současnosti využívány pro oživení a interakci obsahu na internetu. Další částí je popis programovacího jazyka, který je součástí technologie Flash. Kromě historie jazyka a možností jeho použití jsou také uvedeny ukázky zdrojového kódu. K tvorbě animacím ve Flashi také neodmyslitelně patří vývojové prostředí Macromedia Flash, kterému je věnována čtvrtá kapitola. Poslední částí bakalářské práce je tvorba výukového materiálu a popisu jeho témat.

2. ANIMACE NA WEBU

5

2. Animace na webu Na počátku internetu byly webové stránky pouze statické. Obsah byl informativní a jeho pochopení bylo závislé na autorových pisatelských schopnostech. Bylo tedy nutné najít i jinou formu vyjádření. Použití obrázků vyřešilo jen vizuální stránku, ale stále nedokázalo dostatečně popsat pohyb či transformaci, tedy děj v čase. To, co se ukázalo být tím nejlepším řešením, byly právě animace. Význam animace je oživení, tedy rozpohybování statických prvků. Je to ale jen pouhá iluze. Ve skutečnosti jde o zachycení a následné promítání sekvenčně řazených snímků, tzv. animování, které se od sebe liší umístěním nebo transformací objektů.

Obrázek 1: Sekvenční řazení snímků znázorňující pohyb

Tato technika si získala své místo v mnoha oblastech internetu. Velký význam má například pro marketing, jelikož je zde zdrojem nemalých finančních výnosů. Snad každý si při slově „reklamní banner“ představí pohyblivý text, poutavé obrázky, které poletují sem a tam, nebo krátkou smyčku videa. Dnes jsou již běžnou součástí webové stránky, kde zabírají někdy až příliš velkou plochu. Co ale návštěvníka nejvíce zaujme, není ona plocha, ale to, co se na ní odehrává, tedy samotná animace. S rozvojem internetu a jeho větší dostupností se pro mnohé stalo prohlížení webových stránek každodenní záležitostí. Lidé internet stále více využívají jako zdroj zábavy. Právě animace byly pro tento účel jako stvořené, a proto jejich rozšíření bylo celosvětově tak rychlé. Velmi oblíbené se staly například stránky nabízející online hry, které umožňují také hry pro více hráčů z celého světa. K tomu si může uživatel pustit internetové rádio, jehož ovládání umožňuje opět některá z technologií pro tvorbu animací. Tím se dostáváme k použití multimédií na internetu, které by se bez animací neobešly. Velkým fenoménem poslední doby v této oblasti se stalo sdílení videa, jehož průkopníkem je dnes již světoznámý youtube. Ten nabízí mnoho videí, jejichž přehrání umožňuje aplikace vytvořená technologií Flash, která bude podrobněji popsána později. Animace se tak spolu s internetem staly součástí každodenního života mnoha lidí. Možnosti jejich využití zajisté nebyly dosud vyčerpány. Výhody animací jsou nesporné, jak velký ale mají pro nás přínos již musí posoudit každý zvlášť, a právě následující kapitoly v tomto mohou napomoci.

2. ANIMACE NA WEBU

6

2.1. Druhy animací Animovaný gif Gif je rastrový grafický formát, který byl roku 1987 představen firmou CompuServe. Díky svým dobrý kompresním vlastnostem je již od počátku spojován s publikováním obrázků na internetu. Využívá bezztrátový kompresní algoritmus LZW a navíc se jeho barevná paleta omezuje na 256 barev. Jeho větší oblíbenost ale vzrostla až při zavedení transparentnosti, čili průhlednosti. S novou možností jazyka HTML, tedy vkládáním obrázků, se zvýšila i míra publikování firem na internetu. Žádná z takovýchto prezentací se nemohla obejít bez firemního loga či znaku, ale zde již od počátku nastal problém. Obrázky musely být pouze obdélníkového tvaru, což bylo nedostačující pro grafiku jiných tvarů. Řešením byl právě formát gif, který již při vytváření obrázků poskytuje možnost prohlásit jednu z 256 barev palety za neprůhlednou, zpravidla se jedná o pozadí. Internetový prohlížeč tuto barvu jednoduše nezobrazí, čímž se tato oblast stává transparentní. [16] Roku 1989 přišel tento formát ve verzi GIF89a s používáním vrstev. Tato možnost se ukázala být vhodná pro potřeby animace, jelikož prohlížeč, který narazí na vícevrstvý gif, postupně zobrazuje jednotlivé vrstvy v pořadí jdoucím za sebou. Při jejich vytváření dokonce grafický editor nabízí volbu dobu zpoždění mezi jednotlivými vrstvami či počet jejich opakování. Animovaný gif zvyšuje kompresní poměr také tím, že ukládá pouze oblasti změny, tedy ta místa, kde se pixely následující vrstvy liší svou barvou od předchozí. Výhodou je i to, že prohlížeč, který neumí přehrát sekvenčně řazené obrázky v animaci, zobrazí pouze první z nich. [19]

Java Applet Applet je program napsaný v jazyce Java, který je umístěn na serveru. Pro svůj běh potřebuje webový prohlížeč s podporou Javy, jelikož je začleněn do HTML kódu párovou značkou APPLET. Jejími klíčovými parametry jsou code pro název třídy, codebase určující cestu k třídě a dále dvojice width, height udávající rozměry. Odkaz na applet potom vypadá následovně: Při návštěvě stránky se applet nahraje do počítače klienta a tam se spustí. Proto bývá zpravidla kratší a jeho velikost je malá, aby se neprodlužovala doba nahrávání. Z důvodu bezpečnosti je jeho funkcionalita částečně omezena. Applet nemůže navazovat spojení s jiným než domovským serverem, nemůže spouštět aplikace jak na serveru, tak na straně klienta, kde je mu také zamezen zápis do souboru. [1]

2. ANIMACE NA WEBU

7

SMIL SMIL (Synchronized Multimedia Integration Language) je značkovací jazyk, standard konsorcia W3C od roku 1998, který umožňuje vytvářet multimediální prezentace určené pro internet. Jelikož vychází z XML, je také tvořen strukturou elementů. Samozřejmě je stejně dobře editovatelný, protože jej lze otevřít v jakémkoliv textovém editoru. SMIL dává možnost integrovat již hotové multimediální prvky do HTML nebo XML, nevytváří tedy nové. Podporuje mnoho různých odlišných formátů od prostého textu (HTML …), obrázků (GIF, JPG, PNG, …), audio souborů (mp3, wav, au, ogg, …) až k formátům videa (AVI, MPG, MOV, …). Možnosti SMILu zajisté nejsou neomezené a jejich další vývoj bude také záležet na oblíbenosti formátu. Dají se ale shrnout do několika základních technik: • Pohyb po křivce Křivka je ohraničena dvěma krajními body, mezi kterými se objekt pohybuje v závislosti na dané časové jednotce. Další možnost pohybu udává změna polohových souřadnic objetku. • Změna atributu Záměnou vlastností objektu můžeme vytvořit různé efekty jako například fading (změna alpha kanálu), brightness (změna intenzity barvy) nebo kontrast (změna sytosti barvy). • Události Akce vyvolané najetím myši na obrázek můžou Movie Clip například zaměnit za jiný, a nebo na něj použít změnu atributu. • Střídání obrázků Promítaní obrázků, které se liší jen nepatrně například polohou na nich zobrazeného objektu, s velmi krátkým časovým zpožděním, vytváří pro lidské oko dojem pohybu. Těmito technikami se tvorba prezentací podobá Powerpointu, který ale není tak přenositelný, jelikož pro otevření formátu PPT, který vytváří, je třeba nainstalovat Microsoft Office. Přestože webové prohlížeče neobsahují podporu formátu SMIL, lze je otevřít v přehrávačích videa Quick Time Player a Real Player, které fungují na různých platformách, a hlavně jsou také zdarma.

Macromedia Shockwave Shockwave Flash je vektorový formát společnosti Adobe Systems, který přináší na web multimediální prvky a přitom zachovává únosnou velikost datových souborů. Kromě obrázků

2. ANIMACE NA WEBU

8

dokáže pojmout zvuky i videosekvence. Využívá se k tvorbě multimediálních prezentací, výukových programů nebo jednoduchých her s pokročilým 3D enginem. Oficiální nástroj pro tvorbu interaktivních prvků Shockwave Flash je Macromedia Director. K přehrání tohoto formátu je potřeba mít v prohlížeči příslušný plugin. Pokud ten při přístupu na stránku obsahující Shockwave Flash není nalezen, je nabídnuta internetová adresa s možností jeho okamžitého doinstalování. Společnost Adobe Systems uvádí, že v současné době má přes 390 miliónů uživatelů Internetu na celém světě nainstalovanou podporu tohoto formátu v prohlížeči. [12]

Macromedia Flash Flash je vektorový formát vytvořený společností Macromedia, ale stejně jako její produkt, Shockwave, je již ve vlastnictví společnosti Adobe Systems. Jeho počátky sahají do roku 1994, kdy ještě jako SmartSketch založený na jazyce Java nebyl produktem Macromedie ale softwarové firmy Future Wave. Jeho vývoj se začal rychle ubírat úplně jiným směrem, jelikož Java byla kvůli rychlosti nevyhovující. O rok později se objevuje jako FutureSplash Animator, který je již v prohlížečích přehráván pomocí příslušného playeru díky zásuvným modulům. Využívá vektorové grafiky, což je v době rastrových obrázků zcela nový přístup tvorby. Je to ale také nástroj pro tvorbu animací, jejichž výsledná velikost je velmi malá, a tedy ideální pro publikování na internetu.

Obrázek 2: logo Future Splash Animator

V roce 1996 kupuje FutureSplash Animator společnost Macromedia a vydává jeho upravenou verzi nazvanou Flash. Ten do dnešní podoby prošel již desetiletým vývojem plným novinek a vylepšením, které je shrnuto v následujících bodech: • Flash 1.0 Nástroj pro tvorbu vektorové grafiky a animací poprvé vydaný pod záštitou Macromedia.

2. ANIMACE NA WEBU

9

• Flash 2.0 Objevují se jednoduché skripty pro ovládání animace a prvky jako tlačítko nebo grafika. • Flash 3.0 Do animací je možné vkládat zvuky. • Flash 4.0 Tato verze přináší převážně přepracovaný ActionScript, který již umožňuje také načítání dat z externích zdrojů. • Flash 5.0 V editoru se poprvé objevuje Smart Clip neboli komponenta, což je speciální druh Movie Clipu vytvořený pro určitý účel. • Flash 6.0 Vznikají UI komponenty například pro tvorbu formulářů (ComboBox, ListBox, ScrollBar, …), pro čtení externích zdrojů z XML (XML Connector) nebo pro přehrávání multimédií (MediaDisplay, MediaController, PlayButton, StopButton, VolumeBar, …). Komunikaci se serverovými službami umožňuje nový protokol RTMP, Server-side ActionScript a serverový balík Flash Comunnication Server MX. • Flash MX 2004 Tato verze vychází ve dvou podobách, MX 2004 a MX 2004 Pro. Přináší vylepšené rozhraní, časovou osu a trasování bitmap, efekty pro práci s textem, podporu kaskádových stylů, rozšíření kompatibility importovaných objektů (PDF, EPS, …). Nově se také objevuje panel historie, šablony pro vytváření složitých Motion a Shape Tweenů a ActionScript 2.0. • Flash 8.0 Editor významně vylepšil práci s ActionScriptem. Debugger nyní poskytuje obsáhlejší informace o chybách, nápověda je propracovanější s mnoha konkrétními příklady a panel Actions nabízí funkci automatického dokončování psaní kódu. Flash jak jej známe dnes, se používá pro tvorbu interaktivních prezentací, reklamních bannerů a jednoduchých her. K jeho velkému využití a podpoře prohlížeče pomohly obrovské možnosti animací v protikladu s velmi malou velikostí výsledného souboru. Tento fakt, spolu se stále probíhajícím vývojem nastiňuje Macromedii Flash ještě dlouhou budoucnost.

3. ACTIONSCRIPT

10

3. ActionScript ActionScript je programovací jazyk, který byl vyvinut v roce 2000 na bázi standardizované verze jazyka JavaScript, nazvané ECMAScript. Umožňuje vytvářet akce pro prvky stránek jako tlačítka, menu, ale slouží také jako prostředník pro komunikaci s externími zdroji dat nebo k přehrávání multimédií. Samotný je nepoužitelný, jelikož je součástí Macromedia Flash. Přestože jsou si oba jazyky velmi podobné, existují mezi nimi některé zásadní rozdíly. ActionScript například nepodporuje objekty definované výhradně pro Javascript jako objekty prohlížeče Anchor, Windows a Document. [6] Obecně ale platí, že programátorovi, který se již setkal s jedním jazykem, nebude ten druhý připadat jako nový.

3.1. Historie V roce 1997 s Flash 2.0 přichází i první skripty týkající se přehrávání a událostí tlačítek. Poprvé se také objevuje proměnná, tedy programátorem vytvořená konstanta nesoucí nějakou hodnotu. O rok později přichází příkaz fscommand, který exportované animaci do exe souboru přidává parametry pro zobrazení, jako například fullscreen (true/false), showmanu (true/false) a nebo suit. V roce 2000 je vydáván přelomový Flash 5, který s sebou přináší ActionScript 1.0. Ten je již tak přepracován, že se může považovat za nový jazyk. Obsahuje velké množství nových příkazů, vznikají funkce a cykly. ActionScript dokáže načítat proměnné z externích zdrojů nebo pomocí nich také komunikovat se serverem, přináší objekty se svými metodami a vlastnostmi. Postupně přibývaly další nové možnosti a vylepšení až do roku 2004, kdy byla vydána Flash MX 2004. ActionScript je nyní již ve své druhé verzi plně objektovým jazykem. Kromě toho nabízí například pokročilou verzi s videem včetně alpha kanálů nebo antialiasing písma. V současné době přichází ActionScript 3.0, který zvyšuje svou rychlost a zjednodušuje vývoj komplexnějších projektů. Je také navržen jako prostředek k rychlé a efektivní tvorbě RIA (Rich Internet Applications). Jelikož ale ještě nebyla oficiálně vydána jeho finální verze, omezují se následující kapitoly pouze na ActionScript 2.0.

3.2. ActionScript 2.0 ActionScript 1.0 není tak formální jako jeho následovník. I dnes nám ale postačí k vytváření jednoduchých akcí jako je například obsluha stisku tlačítka nebo animací pro starší verze Flashového přehrávače. Pro komplexnější projekty je již ale nedostačující, a proto byl vyvinut ActionScript 2.0. Jak se již stalo pravidlem, přichází tento jazyk současně s novou verzí Flashe s označením MX 2004 a společně s ní tak dává animacím nové možnosti. ActionScript 2.0 přinesl mnohé revoluční vylepšení, které se dají částečně shrnout v několika bodech:

3. ACTIONSCRIPT

11

• objektově orientovaný jazyk Jazyk je založen na větší podpoře tříd a cest k nim, dědičnosti a možnosti vkládání balíků tříd (package). •

formální syntaxe psaní tříd (podle ECMAScript specifikace)

• nová klíčová slova (keywords) Přibyla další slova prohlášena za klíčová, tedy taková, která se nesmí použít(používat) jako názvy proměnných či funkcí. Jsou to class, interface, extends, implements, public, private, static, dynamic, import, class path (package), get a set • striktní definování proměnných Na počátku byl ActionScript beztypový jazyk, tedy neznal datové typy. Později bylo možno proměnnou deklarovat jako integer nebo string. Typová kontrola ale umožňovala přiřadit číselnou hodnotu typu string a nebo naopak textový řetězec proměnné, který byl integer. V ActionScript 2.0 je již striktně hlídána hodnota spolu s datovým typem proměnné. •

rozlišování velkých a malých písmen v názvech funkcí a proměnných

•

getter/setter metody pro efektivnější práci s vlastnostmi tříd

•

nový model vysílání událostí (broadcasting event model)

• nové příkazy a předdefinované třídy jako Camera a PrintJob Spolu s rozšířením možnosti práce s externími datovými zdroji, přináší ActionScript 2.0 také v rámci komponent příkazy pro externí volání systémových funkcí pro práci s tiskárnou, kamerou či fotoaparátem.

3.3. Předdefinované funkce a proměnné Každá námi vytvořená funkce musí začínat klíčovým slovem function. Kromě toho nám ale ActionScript poskytuje také předdefinované funkce či proměnné, které jsou v něm striktně vyžadovány. Nejenže nám ulehčí použití tohoto jazyka, ale také výsledný efekt bývá velmi zdařilý. Přehrávání Pro přehrávání animace slouží play(), pro její zastavení pak metoda stop(). Jednotlivé snímky jsou zobrazovány za sebou tak, jak jsme je umístili na časové ose. Někdy je potřeba

3. ACTIONSCRIPT

12

toto uspořádání porušit, pokud potřebujeme například několikrát přehrát pouze určitý úsek. K tomu slouží metody gotoAndPlay() a gotoAndStop(), jejichž parametry jsou číslo nebo název cílového snímku. Události Typickým prvkem pro události je tlačítko, které samo nevykonává žádnou činnost, ale čeká na určitý podnět, na nějž zareaguje příslušnou reakcí. Funkcí pro tlačítka je on(), jejíž parametry je buď press, rollOut, rollOver a nebo release. Movie clip nečeká na žádný podnět vyvolaný uživatelem, ale na podněty vyvolané přehráváním animace. Pro opakované akce použijeme metodu onClipEvent(enterFrame), která je vyvolána vždy při přehrávání každého dalšího snímku. Pokud ale chceme akci provést pouze v okamžik zobrazení Movie clipu na scéně, použijeme funkci onClipEvent(load). Atributy Každý Movie clip na scéně má své atributy, které se implicitně nastavují v panelu Properties. Pokud s ním ale chceme pohybovat nebo ho transformovat, nastavení hodnoty atributů do proměnné je mnohem snažší a rychlejší, než je pro(vyhodit) každý nový snímek vyklikávat ručně. Proto nám ActionScript nabízí proměnné _x, _y, _width, _height a _visible. Jejich hodnoty můžeme nastavit buď přímým přiřazením nazevClipu._height=100, a nebo pomocí funkce setProperty().

3.4. Externí zdroje dat Přestože byl Flash původně vyvinut jako formát vhodný pro animace, vzrůstající obliba zavedla jeho použití snad do všech oblastí použití počítačů od běžných animovaných bannerů, přes jednoduché aplikace, hry až k webovým stránkám. A právě internet na něj kladl vysoké nároky, jelikož zde měl konkurovat velkým projektům, při kterých stránky v HTML plně využívaly PHP, ASP a jiných technologií. Přestože Flash díky ActionScriptu dokáže reagovat na události, a při malé velikosti může pojmout velké množství kódu a multimédií, je nemožné v jediném souboru zachytit všechny eventuální situace, vyvolané na dynamickém webu. První myšlenky se paradoxně ubíraly k použití jediného souboru, ten byl generován za běhu aplikace (on-the-fly) na straně serveru a zaslán klientovi jako reakce na jeho podnět. Macromedia Generátor takto vytvářel šablonu SWT, která obsahovala dynamická data, např. dotaz nad databází, a nebo soubor SWF poskládaný z více menších SWF. Příchodem Flash 4 se ale možnosti komunikace se serverem rozšířili, a to díky nové funkci ActionScriptu loadVariables(). Veškerá dynamičnost se tak děje na straně klienta, který si vyžádá data a server je zašle zpět ve formátu proměnná=hodnota. Už ale nejde pouze o

3. ACTIONSCRIPT

13

jediný SWF, Flash je tak obohacen o možnost číst z jakéhokoliv souboru, a nebo zapisovat. Tato metoda komunikace se začala poustupně více rozšiřovat, pomohly tomu i další funkce jako například sendAndLoad(), a tak se dnes již s Macromedia Generátorem téměř nesetkáme.

3.4.1. Externí skripty Při častém opakování určité části kódu, si ji můžeme oddělit do samostatného souboru a v místě použití pouze vložit odkaz. Macromedia sice doporučuje příponu .as, ale ActionScript lze vložit i do běžného txt souboru. Mějme například několik tlačítek ve více snímcích, které nám vrací animaci na začátek, při jejich stisku stále voláme gotoAndPlay(1). Metodu si tak uložíme do souboru zacatek.as. Kód tlačítka potom bude vypadat následovně: on(press){ #include „zacatek.as“ } Soubor zacatek.as ale může obsahovat i celou událost on(press) a místo ní už jen pak vložit #include „zacatek.as“. Pokud ale vyexportujeme výsledný SWF, je do něj externí skript nahrán napevno, jeho pozdější změna tak již nemá na animaci vliv. Kromě usnadnění práce při programování je tak efektivita stejná.

3.4.2. Externí datové soubory Hodnota proměnné uložená v externím datovém souboru se nahraje až při jejím vyžádání. Jelikož se tak děje při běhu animace, je hodnota proměnné vždy aktuální. K nahrání nám slouží funkce loadVariables(). Použít ji můžeme více způsoby, ale vždy se stejným výsledkem, takže závisí jen na programátorských technikách a zvycích, které si každý zvolí. Cílový Movie Clip přiřadíme metodě již jako parametr: loadVariables(„datovySoubor.txt“, MovieClip) ; Další možností je nahrát data přímo do Movie Clipu: MovieClip.loadVariables(„datovySoubor.txt“) ;

3. ACTIONSCRIPT

14

ActionScript 2.0 také nabízí řešit vše pomocí objektu: objektData = new loadVars(); objektData.load(„datovySoubor.txt“); Obsah souboru se načítá zpravidla do dynamického textového pole. Flash také umožňuje zobrazit externí HTML soubor jako webovou stránku, jak ji vidíme v prohlížeči. Před párovou značkou , ale musí být název proměnné s rovnítkem. I zde se totiž načítá dvojice proměnná=hodnota, kde hodnota je celý HTML kód. U vlastností textového pole se dále musí zaškrtnout položka „html“. Kromě textových souborů můžeme ale i načítat obrázky nebo jiné SWF soubory: loadMovie(„fotka.jpg“, MovieClip);

3.4.3. Serverové skripty Existuje mnoho jazyků pro psaní serverových skriptů, které dokáží vytvářet kódované řetězce pro URL založené na dynamicky generovaných informacích, jako například Perl, ASP, CGI, PHP. Jsou však psány za stejný účelem, a to pro spolupráci s databázemi. Stejně jako HTML dokáže i Flash získat data vygenerovaná z databáze v závislosti na aktuálním čase, navíc ale tyto informace dokáže aktualizovat, aniž by musel být znovu načten SWF soubor. Celá komunikace, při které využívá standardních metod GET a POST, se dá rozdělit na tyto možnosti: •

Flash zasílá data serveru

loadVariablesNum("login.php", "0", "POST"); •

Flash si vyžádá data od serveru

loadVariables ("login.php", "0", "GET"); •

Flash zasílá data s požadavkem a následně od serveru přijímá vyřízenou žádost

sendAndLoad("vyhledat.php", MovieClip, "POST"); • •

Flash zasílá data serveru a současně přechází na jinou webovou stránku Server zašle data do HTML souboru a ten je předá animaci Flashe při jejím prvním načtení

3. ACTIONSCRIPT

15

3.4.4. XML Nevýhodou předchozích zdrojů byl hlavně formát proměnná=hodnota, pomocí kterého se data předávaly Flashi. Struktura takových dat musela být neměnná, takže bylo nutné si ji předem pečlivě rozmyslet a zvážit nejlepší variantu. Formát XML jde ale mnohem dále. Vytvořenou strukturu je možné ještě rozšiřovat, lze přidávat další nové úrovně, aniž bychom ty předchozí nějak narušili. Takto formátovaná data je potom Flash schopen nahrát a pracovat s nimi. Druhou neodmyslitelnou předností použití XML je fakt, že tento formát je již dnes velmi rozšířený standard, který je využíván mnoha aplikacemi, takže námi vytvořenou datovou strukturu nemusíme omezit pouze na Flashovou prezentaci. XML je značkovací jazyk, jeho dokument má stromovou strukturu, na jejímž vrcholu je kořenový element. Všechny další elementy se do sebe různě zanořují podle potřeby navrhované struktury, ale nikdy se nesmí překrývat. Jednoduchý XML dokument může vypadat následovně: <Student jmeno=”David Osička”> Flashové animace chování jazyka C/C++ Zdeněk Velart Výpis 1: Struktura XML dokumentu

Abychom mohli ve Flashi s těmito daty pracovat, musíme si vytvořit instanci objektu XML: xmlBakalarka = new XML; xmlBakalarka.load („bakalarske_prace.xml“); xmlBakalarka.ignoreWhite = 1; xmlBakalarka.onLoad = naseVytvorenaMetoda(); Výpis 2: Instance objektu XML

Třetí řádek nastavuje hodnotu vlastnosti ignoreWhite, která udává, kde začíná kořenový element. Ten totiž Flash implicitně hledá na prvním řádku za deklarací. Pokud ale ignoreWhite = 1, můžeme jej psát na řádku pod ní. Vlastnost onLoad říká, co se provede po načtení dat z XML. Poslední dva řádky ale nejsou povinné.

3. ACTIONSCRIPT

16

Flash poté v cyklu nahrává data podle struktury XML, tedy od kořenového uzlu, s vlastností firstChild, až po poslední element, jehož každá úroveň je vlastností childNodes objektu předchozího elementu. koren = xmlBakalarka; korenNazev = koren.nodeName; prvniUroven = new Array(); prvniUroven = koren.childNodes; for (i = 0; i < prvniUroven.lenght: i++) { thisChild = prvniUroven [i]; druhaUroven = thisChild.ChildNodes; for (j = 0; j < druhaUroven.lenght: j++) { … } } Výpis 3: Čtení dat z XML

4. MACROMEDIA FLASH

17

4. Macromedia Flash

4.1. Uživatelské rozhraní Přestože je Macromedia Flash profesionální nástroj pro tvorbu animací, jeho prostředí je intuitivní a navržené i pro pochopení běžným uživatelem. Svou stavbou se totiž podobá některým kancelářským balíkům a nebo například nástrojům pro střih videa. Uživatelské prostředí je tvořeno několika panely, které lze pomocí myši libovolně uchytit a přemístit pro lepší práci každého jednotlivce. Následující popis proto odráží podobu standardního vzhledu Macromedia Flash. Horní část je vyhrazena pro grafické menu, jehož ikony jsou dobře známy z každé větší aplikace. Nabízí například funkce pro ukládání, otevření souboru, undo a nebo redo. Kromě nich jsou zde ale i ikony specifické pro tvorbu flashových aplikací, které nám umožní přehrát či zastavit přehrávání časové osy, a nebo krokovat po snímcích tam i zpět. V levé části aplikace je panel nástrojů, jehož ikony nalezneme v každém grafickém editoru společnosti Adobe. Nutno ale podotknout, že Macromedia Flash mezi tyto editory nepatří, a proto i nástroje pro práci s grafikou jsou značně omezené. Dalším prvkem uživatelského rozhraní je časová osa. Její výška je rozšiřitelná, vzhledem k téměř neomezenému počtu vrstev, které do ní můžeme pod sebou umisťovat. Pod časovou osou je volná plocha, nazvaná scéna, na níž tvoříme samotnou animaci. Ukončena je panely pro nastavení, skripty AcrionScriptu a nápovědou. Jsou to snad jedny z nejdůležitějších prvků pro tvorbu, jelikož na nich velmi závisí kvalita výsledné animace. Pravá strana Macromedia Flash na první pohled běžného uživatele nijak nezaujme, jelikož je tvořena několika sbalenými nabídkami, ale ve skutečnosti skýtá velmi silné nástroje pro práci s flashem. Nalezneme zde správu barev, zarovnání a transformaci objektu, komponenty pro práci s externími multimédii a daty, v poslední řadě dvě knihovny objektů, obrázků a multimédií. Ta první nabízí již vytvořená tlačítka a jiné ovládací prvky spolu s jejich animacemi. V druhé knihovně se nachází vše, co jsme při tvorbě animace použili.

4. MACROMEDIA FLASH

18

Obrázek 3: Uživatelské rozhraní Macromedia Flash

4.2. Důležité prvky při tvorbě animací

4.2.1. Časová osa Animace se skládá z jednoho nebo více klíčových snímků, které jsou po spuštění souboru přehrávány jeden za druhým určitou rychlostí. Rychlost je dána jejich zobrazením za jednu vteřinu. Implicitně je hodnota nastavena na 12fps (frame per second). Znamená to tedy, že za jednu vteřinu se přehraje dvanáct snímků, tedy jeden snímek se bude přehrávat 0,2 vteřiny. Tuto hodnotu lze samozřejmě nastavit i jinak, je to kompromis mezi výpočetní rychlostí procesoru a vnímáním lidského oka. Přehrávání a výpočet každého snímku totiž dokáže procesor značně vytížit. Na druhou stranu při dvanácti snímcích za vteřinu lidské oko nezaznamenává nějaké anomálie, ale vidí iluzi plynulého pohybu.

4. MACROMEDIA FLASH

19

Základním prvkem časové osy je klíčový snímek. Ten se může skládat z jednoho nebo více snímků. Každý klíčový snímek může plnit jinou činnost, vyvolat rozdílné funkce nebo přemisťovat Movie Clip na jinou pozici. Přechod mezi klíčovými snímky tvoří potom dojem animace. Snímky jsou umístěny a očíslovány na časové ose, která je v každé scéně pouze jedna. Horizontálně je členěna na jednotlivé snímky. Kromě toho je také rozdělena do řádků na vrstvy. Pro přehlednost se doporučuje umístit každý Movie Clip do jiné vrstvy. Ty si lze přejmenovat pro lepší orientaci v ose. Maximální délka pojmenování je 64 znaků. Časová osa znázorňuje graficky různé stavy a události. Každý snímek je ohraničen černou barvou, čímž jej lze odlišit mezi jinými řádky nebo volnými místy v ose. Prázdný snímek má bílou barvu s bílým kruhem. Při jeho pojmenování se v něm objeví červená vlajka. Pokud mu ale žádný název nepřidělíme, lze se na něj v časové ose odkazovat podle čísla pozice, na které se nachází. Klíčový snímek mimo jiné může obsahovat zdrojový kód. V tom případě se v něm objeví malé písmeno „a“. Jestliže klíčový snímek není prázdný, obsahuje jeden nebo více Movie Clipů a jeho barva je šedá a kruh uvnitř černý. Při použití Motion Tween jsou snímky, na které je metoda aplikována fialové. Z prvního z nich navíc vychází šipka, která je zakončena posledním klíčovým snímkem v Motion Tween. V časové ose je možno klíčové snímky přemisťovat nebo je natahovat do více snímků technikou Drag and drop, tedy pomocí myši.

Obrázek 4: Časová osa

4.2.2. Panel Properties Panel Properties obsahuje nastavení vlastností pro prvky na scéně. Jeho možnosti jsou aktivní až po vybrání příslušného prvku. Pouze tady mu lze přiřadit název, což je velmi důležité pro psaní ActionScriptu. Šířka, výška a přesné umístění na souřadnicích x, y jsou vypsány v

4. MACROMEDIA FLASH

20

textovém poli, což umožňuje hodnoty přepsat, aniž bychom použili k pohybu či transformaci myš. Navíc jsou zadány s přesností na desetiny, takže tímto postupem mnohdy dosáhneme lepších výsledků. Pro zobrazení panel poskytuje několik filtrů jako jsou zaostření, rozmazání či zprůhlednění. Poslední funkcí je nastavení parametrů, kterých se využívá pouze u komponentů.

Obrázek 5: Panel Properties

4.2.3. Panel Actions Panel Actions slouží výhradně pro psaní programového kódu. I svými funkcemi a možnostmi připomíná nějakou jednodušší verzi vývojového prostředí. Pomoc při psaní kódu je velmi dobrá a usnadní tak práci každému začínajícímu programátorovi. Kromě automatického dokončování, začátečník určitě ocení tlačítko pro asistenci psaní kódu. Díky němu si přes různé nabídky stačí navolit jen názvy funkcí a proměnných. O jakékoliv vazby či jiná pravidla se panel Actions postará sám a vypíše kód správně. Dalšími tlačítky lze například zkontrolovat syntaxi, či vypsat plnou cestu objektu. Vlevo od textového pole je stromová struktura celého projektu obsahující jak scény s objekty, tak vytvořený kód v tomto panelu. Při jednodušších animacích simulujících například pohyb, nemusíme panel Actions ani použít, ale pokud chceme objektu přiřadit akci, tak se bez něj neobejdeme.

4. MACROMEDIA FLASH

21

Obrázek 6: Panel Actions

4.2.4. Panel Components Tento panel obsahuje komponenty, někdy taky nazývané jako Smart Clipy. Jsou to speciální druhy Movie Clipu, které kromě grafické stránky obsahují také ActionScript rozhraní. Programátor tak pomocí kódu ovládá vzhled, umístění a chování komponent. Jejich používání tedy může snížit čas určený k programování a zvýšit rychlost a efektivitu výsledné animace. Téměř každá nová verze Flash přináší nové nebo vizuálně a programově přepracované Smart Clipy. K původnímu balíku UI (user interface) komponent tak přibyli i komponenty pro práci s daty (Data Components) a médii (Media Components). Těm, kteří nechtějí čekat na nové Smart Clipy v další verzi Flash, nabízí Adobe jejich přidání do stávající verze prostředí online na svých stránkách. Panel Components dovoluje programátorovi přidat si své vlastní komponenty. V panelu Library si označíme Movie Clip, pravým tlačítkem myši zobrazíme menu, ve kterém si zvolíme volbu Component Definition. V ní lze potom nastavit vše potřebné od parametrů až po ikonu. Důležitá je ale hlavně položka Display in Components Panel, jejímž zvolením náš Movie Clip exportujeme mezi přednastavené komponenty a budeme jej tak mít k dispozici i pro jiné projekty. S panelem Components se pracuje stejně jako s panelem Library. Komponenty v něm umístěné lze pomocí myši přetáhnout na scénu, čímž se automaticky přidají do knihovny, a nastavovat jim vlastnosti a akce.

4. MACROMEDIA FLASH

22

Obrázek 7: Vizuální podoba komponent CheckButton, ComboBox a Button

4.2.5. Panel Library Poslední zmíněný panel se od těch předchozích liší hlavně v tom, že je na začátku projektu prázdný a programátor do něj sám přidává ty prvky, s kterými pracuje. Kromě toho, že jsou všechny tyto objekty v rámci projektu pohromadě, má Library ještě další významnou funkci. Všechny objekty lze totiž převést na symboly, ty lze potom přenést na scénu, čímž je vytvořena jejich instance. Instancí jednoho objektu potom může být libovolně mnoho, ale symbol bude uložen právě jeden. Tato funkce hraje velmi významnou roli při výsledné velikosti SWF souboru. [9] V panelu Library můžeme nalézt tři základní druhy symbolů, nad nimiž se nachází náhled právě označeného: • grafika Je to nejjednodušší symbol, který obsahuje pouze nehybnou grafiku. • tlačítko Skládá se ze čtyř snímků pro různé události (Up, Over, Down, Hit). • Movie Clip Tento symbol má vlastní časovou osu, tudíž může obsahovat vlastní animaci spolu s předchozími typy symbolů. Kromě základních mohou být také vloženy symboly speciální: •

rastrový obrázek

4. MACROMEDIA FLASH

23

• zvuk Zvukové soubory formátu mp3, wav, aj. • složka Slouží k přehlednější organizaci symbolů v panelu Library. • komponenta Při použití Smart Clipu z panelu Components na scéně, je automaticky vložen také do Library. • font Lze vložit libovolný druh písma, který je v systému nainstalován, a nebo z něj jen vybrat určité symboly. • video Je možné vkládat videa ve formátech MPEG, DV, MOV a AVI.

Obrázek 8: Panel Library

4. MACROMEDIA FLASH

24

4.3. Publikování Soubor, ve kterém pracujeme a vytváříme animace, má koncovku FLA. Tento formát je možné opakovaně otevírat a editovat v Macromedia Flash. Pokud ale chceme animaci poskytnout pouze k prohlížení, musíme jej vyexportovat do formátu SWF. Ten se již stal standardem a tak si s ním poradí jakýkoliv novější Flashový přehrávač, který je integrován téměř ve všech webových prohlížečích. Před exportem si můžeme výslednou animaci prohlédnout také v prostředí Macromedia Flash, a to příkazem Test Movie v nabídce Control (Ctrl+Enter). Pokud je tedy již vše v pořádku, soubor SWF vytvoříme volbou Export File v menu File (Ctrl+Alt+Shift+S). Publikování animace nám dává možnost převodu pracovního FLA souboru do osmi různých formátů. Příkazem Publish v nabídce File (Shift+F12), tak lze kromě souboru SWF, získat například sérii obrázků jednotlivých snímků formátů GIF či JPG, a nebo vytvořit video ve formátu MOV, který je spustitelný v různých operačních systémech.

Obrázek 9: Možné formáty pro publikování Dialogové okno pro publikování nám také pod záložkou Flash nabízí některá důležitá nastavení výsledného SWF souboru: • Version Tato nabídka nám dává možnost exportu animace do libovolné verze Flash. Měli bychom ale dát pozor, zda nepoužíváme prvky vyšších verzí, protože v těch nižších fungovat nebudou.

4. MACROMEDIA FLASH

25

• Load Order Load Order znamená pořadí, ve kterém se nahrají jednotlivé vrstvy animace. Můžeme si zvolit ze dvou možností, Top Down (zdola nahoru) a Boom Up (shora dolů). Jestliže například spodní vrstva, která se má nahrát jako poslední, obsahuje rastrový obrázek velkých rozměrů, při přehrávání se zobrazí zpožděním, což je zajisté nežádoucí efekt. Proto je potřeba si tuto volbu nastavení exportu promyslet v závislosti na optimalizaci animace. • Protect from import Potvrzením této volby zakážeme otevření SWF souboru jako pracovního FLA, čímž ochráníme své zdrojové kódy. Z osobní zkušenosti ale vím, že tuto funkci i přes zadané heslo prolomí jakýkoliv decompiler. Programátorovi tak může pomoci jedině legislativa, která již v některých zemích zakazuje použití decompilerů. • Omit trace actions Tato nabídka zabraňuje při přehrávání otevřít okno Output s komentáři vyvolané metodou trace(). • Debugging Permitted Zaškrtnutím této volby se aktivuje debugger a umožní ladit animaci na dálku. • Compress movie Nabídka částečně zmenší výsledný SWF soubor. • JPEG quality Nastaví kvalitu vložených obrázků formátu JPG. Standardně je hodnota 80%, což je dostačující, ale při velmi nízkých hodnotách by zobrazení bylo velmi nekvalitní. • Local playback security Povolí načítání dat z externích souborů, které jsou umístěny buď na lokálním disku a nebo na síťových discích.

5. FLASHOVÉ ANIMACE CHOVÁNÍ JAZYKA C/C++

26

5. Flashové animace chování jazyka C/C++

5.1. Tvorba prostředí Prostředí animace se skládá ze čtyř částí, které jsou viditelně graficky odděleny. Každá z nich plní svou specifickou funkci a obsahuje prvky k ní příslušné. Tři tmavě žlutá pole s alpha kanálem 80% jsou doplňkem hlavní části znázorňující hlavní animaci. Horní část je pouze informační, neobsahuje žádné skripty pro ovládání.Pravé pole obsahuje všechny prvky, pomoci kterých se dá animace ovládat. K dispozici jsou tlačítka pro přehrávání (play, stop, pause, forward, backward) a tlačítko, které zapíná nebo vypíná zobrazování popisků ke zdrojovému kódu. Dalším prvkem je textové pole, umožňující vyhledat výraz přímo na oficiálních stránkách jazyka C/C++. Při přehrávání je zde také zobrazen uplynulý čas od spuštění animace a aktuálně zobrazený snímek.Ve spodní části prostředí jsou po určitých časových intervalech náhodně zobrazovány tipy, rady pro používání animace a popisy funkcí a prvků.V bílé a zároveň největší části prostředí je po stisku tlačítka play přehrávána animace popisu jazyka C/C++. Kromě toho pravá spodní část zobrazuje rotující krychli s otazníky na stranách, která po najetí myši zobrazí nápovědu k příslušnému tématu.

Obrázek 10: Prostředí animace

5. FLASHOVÉ ANIMACE CHOVÁNÍ JAZYKA C/C++

27

5.2. Ovládací prvky animace

5.2.1. Tlačítka Animaci je možné spustit, v libovolné chvíli zastavit a následně krokovat po snímcích tam a zpět. K tomu slouží ovládací tlačítka umístěné v pravém menu. • tlačítko Play a Pause Tlačítko Play slouží k spuštění animace a zároveň zakrývá druhé tlačítko nastavení vlastnosti _visible na hodnotu true, Pause, které se dostane do popředí, pokud je Play stisknuto, a tedy animace přehrávána. Pause animaci zastaví na aktuálně se nacházejícím snímku. on(release){ this.button_play._visible = false; this.button_pause._visible = true; play(); } Výpis 4: Obsluha událostí tlačítka Play

• tlačítko Stop Tlačítko Stop zastaví přehrávání a vrací animaci na první snímek. on(release){ this.button_pause._visible = false; this.button_play._visible = true; gotoAndStop(1); } Výpis 5: Obsluha událostí tlačítka Stop

• tlačítka Reward a Forward Tyto dvě tlačítka slouží ke krokování animace po jednotlivých scénách dopředu a zpět. on(release){ this.button_pause._visible = false; this.button_play._visible = true;

5. FLASHOVÉ ANIMACE CHOVÁNÍ JAZYKA C/C++

28

gotoAndStop(193); scena++; vterina=15; } Výpis 6: Obsluha událostí tlačítka Reward

5.2.2. Nápověda Tento Movie Clip je neustále přehráván (rotuje kolem své osy), a to nezávisle na jakémkoliv jiném prvku či snímku, ve které se momentálně nachází. Po najetí myši se z horního okraje bílého pole spustí nápověda, která překryje vše, co je v poli právě zobrazeno. Nápověda obsahuje stručně ale výstižně zpracovanou teorii týkající se daného tématu animace. Kromě popisu kódu, jehož zobrazování se aktivuje příslušným tlačítkem, tak i tento prvek slouží nejen pro lepší pochopení zdrojového kódu, ale také k ujasnění celé problematiky. Movie Clip rotující krychle reaguje na kursor myši funkcí on() s parametry pro jednotlivé události rollOver a rollOut. on(rollOver){ this._parent.line_anim.gotoAndPlay("go"); } on(rollOut){ this._parent.line_anim.gotoAndPlay("leave"); } Výpis 7: Obsluha událostí nápovědy

Obrázek 11: Rotující krychle

5. FLASHOVÉ ANIMACE CHOVÁNÍ JAZYKA C/C++

29

5.3. Flashové animace

5.3.1. Cyklus for Cyklus for v C/C++ poskytuje předpis na provádění opakovaných úloh. Skládá se z řídící sekce, která na první pohled vypadá jako funkce, jelikož obsahuje kulaté závorky, a z těla cyklu obsahujícího samotnou úlohu. Těch může být v těle i více, ale stále budou považovány jako jeden příkaz a vykonány bez přerušení sekvenčně v jednom cyklu. Řídící sekce je složena ze tří výrazů oddělených středníkem a uzavřených do závorek.

for (inicializace; testovací výraz; aktualizační výraz) tělo Inicializace, která se provede pouze jednou, nastaví proměnnou na počáteční hodnotu. Ta se potom v poslední aktualizační části sekce inkrementuje (popř. dekrementuje) každým dalším průchodem cyklu. Testovací výraz kontroluje zda hodnota proměnné odpovídá podmínce. Jestliže ji překročí, celý cyklus končí a program vykonává příkazy za ním. Cyklus for se velmi často využíván pro průchod polem, kde je dobře patrné jeho fungování, a proto byl právě tento případ vybrán jako demonstrativní ukázka pro animaci. Inicializační hodnota je ztotožněna s počátečním indexem pole. Každým cyklem se provádí příkaz, který do nového pole vkládá hodnotu původního pole v opačném pořadí a následně je vypisuje. swapPole[i] = pole[6-i]; cout << swapPole[i]; Testovací výraz poté zkontroluje, zda nebyla překročena velikost pole, a v negativním případě inicializační hodnotu inkrementuje. Graficky jsou obě pole znázorněna jako bílé čtverce s hodnotami. Aktuální pozice má pak barvu červenou. Čtverce s hodnotami jsou z prvního pole přesouvány do nového pole pod ním. Animace tak končí ve chvíli, kdy má spodní pole na každé pozici svou hodnotu.

Obrázek 12: Graficky znázorněný průchod polem

5. FLASHOVÉ ANIMACE CHOVÁNÍ JAZYKA C/C++

30

5.3.2. Cyklus while While na rozdíl od cyklu for neobsahuje inicializační a aktualizační výraz, ale tvoří jej pouze testovací podmínka a tělo s příkazy. while (testovací výraz) tělo Jakmile program ukončí tělo s příkazy, vrací se k testovací podmínce, která se vyhodnotí. Je-li její hodnota nenulová, vykoná se znovu tělo cyklu. Takto se vše opakuje, dokud se testovací podmínka nevyhodnotí jako false. Jelikož je ale while cyklem se vstupní podmínkou, tělo s příkazy se nemusí provést ani jednou, pokud je hodnota testovacího výrazu false již před prvním průchodem. Animace cyklus while je demonstrována na jednoduchém a srozumitelném příkladě, kdy je na začátku inicializována proměnná a s hodnotou 0. Každým průchodem těla je proveden výpis aktuální hodnoty proměnné a její následná inkrementace. Testovací výraz vyhodnocuje, zda platí podmínka a<5, jinak pokračuje ve vykonávání těla. V animaci je hodnota proměnné a vyjádřena graficky jako bílá přihrádka s příslušným číslem. Při inkrementaci je přidána přihrádka nová s navýšenou hodnotou. Pro hodnoty, kterých bude proměnná teprve nabývat v pozdějších fázích cyklu, jsou vyhrazeny pouze hranice nových přihrádek. Dosažením té poslední, červené, která obsahuje hodnotu 5, a tudíž již projde podmínkou jako false, animace končí.

5.3.3. Cyklus do-while Do-while se od obou předchozích cyklů liší tím, že je cyklem s výstupní podmínkou. To znamená, že nejprve provede tělo s příkazy a až poté se dostává k podmínce, ve které následně zjišťuje, zda bude pokračovat v opětovném vykonávání těla a nebo se cyklus ukončí. Syntaxe do-while proto vypadá následovně: do tělo while (testovací výraz) Animace znázorňuje proměnnou a, jejíž hodnota je v prvním cyklu vypsána a inkrementována o jedničku. Vytvoří se tak políčko znázorňující aktuální hodnotu proměnné. V této části cyklu ale ještě není zřejmé zda bude cyklus dále pokračovat. Proto se po prvním průchodu tělem zkontroluje podmínka, pro kterou je možné pokračovat. Dále se vytvoří volná oblast pro nová políčka s inkrementovanou hodnotou proměnné podle již známé podmínky. Poslední políčko, červené, znázorňuje hodnotu, jejímž dosažením se ukončí vykonávání těla cyklu.

5. FLASHOVÉ ANIMACE CHOVÁNÍ JAZYKA C/C++

31

5.3.4. Přepínač switch Příkaz switch funguje jako směrovací zařízení, které udává, na který řádek kódu má program skočit a vykonat. Jedná se právě o ten řádek, jehož hodnota návěští odpovídá hodnotě výrazu, jde zpravidla o konstanty typu char nebo int. Pokud není odpovídající řádek nalezen, program přeskočí na řádek označený default. Toto návěští je nepovinné a pokud není uvedeno, pokračuje se ve vykonávání dalšího příkazu, který následuje za switch. switch (výraz) { case návěští_1: příkaz; break; case návěští_2: příkaz; break; … case default: příkaz } Na rozdíl od Pascalu funguje návěští case jako návěští řádku, nikoliv jako hranice mezi příkazy. Proto musíme příkaz ukončit pomocí break, jinak by pokračoval na další case. Animace přepínače switch znázorňuje jeho nejčastější použití, vytvoření obrazovkového menu. Nejprve je tedy uživatel dotázán pro výběr čísla podle volby menu. Poté je vykonán příslušný příkaz, v tomto případě určitý výpis. Přepínač switch obsahuje návěští pro hodnoty 1, 2 a default. Jelikož program po vykonání příkazu pokračuje ve zdrojovém kódu za switchem, a tedy animace při přehrání ukáže pouze jednu možnost volby, jsou vytvořeny všechny možnosti výběru menu, které jsou náhodně spouštěny. Uživatel tak není omezen pouze na jednu volbu. _root.nahCislo=Math.round((Math.random()*100)%2); if(_root.nahCislo == 0) { gotoAndPlay(2); } else if(_root.nahCislo == 1) { gotoAndPlay(122); } else if(_root.nahCislo == 2) { gotoAndPlay(242); } Výpis 8: Náhodný výběr přehrávané animace

5. FLASHOVÉ ANIMACE CHOVÁNÍ JAZYKA C/C++

32

5.4.5. Vstup a výstup ze souboru Přesměrování výstupu do souboru nebo zpětné čtení dat z něj využívají aplikace již na systémové úrovni. Například jsou to procesy, které ukládají svou činnost do pomocných log souborů pro její zpětné vyvolání. Samotný systém ale také musí někde uchovávat své nastavení, aby byl spuštěn za stejného stavu, ve kterém skončil svou činnost. Soubory pro svou práci potřebují také běžné klientské aplikace. Známým příkladem je zajisté kdejaký internetový prohlížeč, který si uchovává údaje o navštívených stránkách a nebo o přihlašovacích údajích uživatele. Tyto a mnohé jiné činnosti v C/C++ umožňuje balík tříd pro vstup a výstup odvozený od tříd v hlavičkovém souboru iostream. Abychom mohli ze souboru číst, potřebujeme vytvořit objekt třídy ifstream, který bude spravovat výstupní proud, a pomocí metody open() objektu přiřadit zdroj dat. Objekt cteni se potom může používat stejně jako cin, objekt pro standardní vstup. [8] ifstream cteni; cteni.open(„soubor.txt“); cteni.getline(buffer,100); Pro zápis do souboru je postup velmi podobný. Nejprve se vytvoří objekt třídy ofstream, který se stará o výstupní proud. Objekt dále přiřadíme určitému souboru například metodou open() a používáme jej stejně jako objekt pro standardní výstup, cout. ofstream zapis; zapis.open(„soubor.txt“); zapis << "Hello, World"; Spojení se souborem se přeruší automaticky, jakmile skončí platnost objektu vstupního nebo výstupního proudu. Děje se tak například při ukončení programu a nebo explicitně použitím metody close(). [15] cteni.close(); zapis.close(); V animaci jsou hlavními aktéry tři objekty znázorňující datový soubor, vyrovnávací paměť a konzoli, mezi kterými se data přelévají v daném směru podle toho, zda jde o čtení či zápis.

5. FLASHOVÉ ANIMACE CHOVÁNÍ JAZYKA C/C++

33

Obrázek 13: Čtení dat ze souboru

Množství přečtených nebo naopak zapsaných dat v souboru je znázorněno červenou plochou, která soubor postupně pokrývá. Animace končí, jestliže jsou v případě čtení všechna data přenesena do konzole, a nebo v případě zápisu do souboru.

6. ZÁVĚR

34

6. Závěr Tato práce dává ucelený obraz o technologii, která v posledních deseti letech tak významně změnila tvář internetu a v mnohém ukázala směr jeho dalšího rozvoje. Popisuje výhody, použití a mnohé možnosti, které Flash nabízí. Podrobně také seznamuje s prostředím Macromedia Flash, ve které jsou animace vytvářeny. V praktické části bylo mým cílem vytvořit flashové animace ke zvoleným tématickým okruhům, které poslouží jako výukový materiál programování v jazyce C/C++. Věřím, že má práce poslouží jako základ pro začínající programátory, a zároveň poskytne cenné informace, které budou využity u větších projektů napsaných v C/C++ nebo jako animace Flash.

7. LITERATURA

35

7. Literatura [1]

KOTALA, Z.; TOMAN, P. 17. Applet [online]. 2001 [cit. 2007-05-03]. Dostupný z WWW: < http://dione.zcu.cz/java/sbornik/17.html#17_SEC />

[2]

KOTALA, Z.; TOMAN, P. 4. První šálek aneb Začínáme [online]. 2001 [cit. 2007-05-03]. Dostupný z WWW:

[3]

ActionScript [online]. 2005 [cit. 2007-05-03]. Dostupný z WWW:

[4]

ŽIGMONT, Milan. ActionScript 2.0 - úvod [online]. 2004 [cit. 2007-05-03]. Dostupný z WWW:

[5]

Flash [online].2007 [cit. 2007-05-03].Dostupný z WWW:

[6]

Flash - ActionScript 1.díl [online]. 2004 [cit. 2007-05-03]. Dostupný z WWW:

[7]

HONZÍK, Martin. Flash - Seznámení [online]. [cit. 2007-05-03].Dostupný z WWW:

[8]

Ifstream [online]. 2000 [cit. 2007-05-03]. Dostupný z WWW:

[9]

HONZÍK, Martin. Knihovna [online]. [cit. 2007-05-03].Dostupný z WWW:

[10] PRATA, Stephen. Mistrovství v C++. 1. vyd. Praha : Computer Press, 2001. [cit. 2007-05-03]. 966 s. ISBN 80-7226-339-0. [11] Macromedia Shockwave Flash [online]. [cit. 2007-05-03]. Dostupný z WWW: [12] Macromedia Shockwave Player [online]. 2007 [cit. 2007-05-03]. Dostupný z WWW: [13] DOLEŽÍ, Jan. Možnosti využití programu Flash MX. Opava, 2005 [cit. 2007-05-03]. Diplomová práce

7. LITERATURA

36

[14] SEMECKÝ, Jiří. Naučte se Javu - applety [online]. 2002 [cit. 2007-05-03]. Dostupný z WWW: [15] VESELKA, Aleš. Obohaťte své uživatele pomocí RIA [online]. 2007 [cit. 2007-05-03]. Dostupný z WWW: [16] Ofstream [online]. 2000 [cit. 2007-05-03]. Dostupný z WWW: [17] PETERKA, Jiří. Transparentní a animovaný GIF [online]. 1996 [cit. 2007-05-03]. Dostupný z WWW: [18] HOVAD, Josef. Úskalí publikování z Flashe do SWF souborů [online]. 2002 [cit. 2007-05-03]. Dostupný z WWW: [19] HONZÍK, Martin. Vložení animace do HTML [online]. [cit. 2007-05-03]. Dostupný z WWW: [20] HLADIL, Martin. Vytvoření obrázků a animací chování a funkčnosti jazyka C/C++ pro použití v kurzu v systému AHA! Ostrava, 2006. [cit. 2007-05-03]. Diplomová práce.

A OBSAH CD

A Obsah CD Součástí bakalářské práce je také přiložené CD, jehož adresářová struktura s příslušným obsahem je následující: • / Obsahuje abstrakt v češtině i angličtině a HTML stránku s obsahem CD. • /animace Obsahuje v adresářích animace uvedené níže. • /animace/dowhile Pracovní FLA a exportovaný SWF a EXE soubor animace Cyklus do-while. • /animace/for Zdrojový FLA a exportovaný SWF a EXE soubor animace Cyklus for. • /animace/switch Zdrojový FLA a exportovaný SWF a EXE soubor animace Přepínač switch. • /animace/vstupZeSouboru Zdrojový FLA a exportovaný SWF a EXE soubor animace Vstup ze souboru. • /animace/vystupDoSouboru Zdrojový FLA a exportovaný SWF a EXE soubor animace Výstup do souboru. • /animace/while Zdrojový FLA a exportovaný SWF a EXE soubor animace Cyklus while. • /sablona Zdrojový FLA a exportovaný SWF a EXE soubor šablony pro animace. • /text Obsahuje text bakalářské práce rozdělený do adresářů podle formátu. • /text/pdf Text bakalářské práce ve formátu PDF. • /text/word Text bakalářské práce ve formátu DOC.

37