Ovladatelné animace pro podporu výuky problematiky výpočetní techniky

Mendelova zemědělská a lesnická univerzita v Brně Provozně ekonomická fakulta

Ovladatelné animace pro podporu výuky problematiky výpočetní techniky

Bakalářská práce

Vedoucí práce: Ing. Petr Jedlička, Ph. D.

Vlastimil Knápek

Brno 2009

2 /Abstract

Tímto bych chtěl poděkovat Ing. Petru Jedličkovi, Ph.D. za jeho rady na konzultacích a celkovou pomoc a vedení při tvorbě této práce.

3 /Abstract

Prohlašuji, že jsem bakalářskou práci na téma „Ovladatelné animace pro podporu výuky problematiky výpočetní techniky“ vypracoval samostatně a použil uvedenou literaturu. V Brně dne 18. května 2009

............................

4 /Abstract

Abstract Knápek, V. Manageable animation for the support education problems of computer technology. Bachelor's thesis. Brno, 2009. This bachelor thesis is concerned with the creation of the manageable animation for the support education of the computer technology. In theoretic parts is performed analysis and selection suitable tools. In practical parts is described procedure of the creation animation. Key words: manageable animation, support education, computer technology, Flash.

Abstrakt Knápek, V. Ovladatelné animace pro podporu výuky problematiky výpočetní techniky. Bakalářská práce. Brno, 2009. Tato bakalářská práce se zabývá tvorbou ovladatelných animací pro podporu výuky výpočetní techniky. V teoretické části je provedena analýza a výběr vhodného nástroje. V praktické části je popsán postup tvorby animací. Klíčová slova: ovladatelné animace, podpora výuky, výpočetní technika, Flash.

5
Obsah 1

2

Úvod a cíl práce ............................................................................................................................... 7 1.1

Úvod do problematiky ............................................................................................................. 7

1.2

Cíl práce ................................................................................................................................... 7

Možnosti tvorby ovladatelných animací pro prostředí webových prohlížečů ................................ 8 2.1

Java .......................................................................................................................................... 8

2.2

JavaScript + SVG ...................................................................................................................... 8

2.2.1

JavaScript ......................................................................................................................... 8

2.2.2

SVG .................................................................................................................................. 9

2.3 3

Flash MX 2004 ............................................................................................................................... 11 3.1

Představení ............................................................................................................................ 11

3.2

Prostředí ................................................................................................................................ 11

3.3

Možnosti Flashe..................................................................................................................... 12

3.3.1

Tvorba prvků animace ................................................................................................... 12

3.3.2

Symboly ......................................................................................................................... 12

3.3.3

ActionScript ................................................................................................................... 13

3.3.4

Časová osa ..................................................................................................................... 15

3.4 4

Flash....................................................................................................................................... 10

Tvorba projektu ve Flash MX 2004 ........................................................................................ 15

Animace ......................................................................................................................................... 16 4.1

Animace pipelining ................................................................................................................ 16

4.1.1

Základní podmínky ........................................................................................................ 17

4.1.2

Vlastní realizace animace .............................................................................................. 17

4.2

Animace laserová tiskárna..................................................................................................... 20

4.2.1


4.2.2


4.3

Animace Token Ring .............................................................................................................. 23

4.3.1


4.3.2


4.4

Animace IRQ – požadavek přerušení..................................................................................... 28

4.4.1


4.4.2


5

Diskuze a závěr .............................................................................................................................. 32

6

Literatura ....................................................................................................................................... 33

6 Přílohy.................................................................................................................................................... 34 A

Zhotovené animace ....................................................................................................................... 35

7 Úvod a cíl práce

1 Úvod a cíl práce 1.1 Úvod do problematiky Je všeobecně známo, že ve výuce při vysvětlování nějakého problému nebo věci, je vždy lepší mít nějakou vizuální pomůcku nebo příklad. Ať už se jedná o reálný model daného zařízení, nebo například, když se v matematice ukáže vzorec nebo postup, a pak se podle něj spočítá vzorový příklad. Daný problém je poté jednodušší pochopit a zapamatovat. To platí i v oblasti výpočetní techniky. Nachází se zde spousta jevů a věcí, které jsou při pouze slovním vysvětlování na první pohled složité nebo nepochopitelné. V dnešní době, kdy již není problém vzhledem k možnostem počítačů a k tomu určeného softwaru vytvořit simulaci problému pomocí animace nebo modelu zařízení apod., je čím dál snadnější zařazovat do výuky takovéto vizuální pomůcky v podobě animací. Právě na možnosti tvoření animací pro podporu výuky v rámci webového prohlížeče je tato práce zaměřena. Díky tomu, že lze animaci přehrát v okně webového prohlížeče, odpadá i problém se zapomenutým médiem, na kterém byla animace nahrána nebo chybějícího přehrávače (CD, DVD nebo i flash paměti či pamětových karet) na počítači a hlavně je možné je přehrát prakticky odkudkoliv a kdykoliv.

1.2 Cíl práce Cílem této bakalářské práce je v první řadě najít nejvhodnější nástroj (vývojové prostředí) k tvorbě ovladatelných animací pro podporu výuky výpočetní techniky. A tímto nástrojem poté vytvořit sadu animací pomáhajících pochopit některé pojmy a problémy výpočetní techniky, které jsou bez vizuální představy hůře pochopitelné.

8 Možnosti tvorby ovladatelných animací pro prostředí webových prohlížečů

2 Možnosti tvorby ovladatelných animací pro prostředí webových prohlížečů 2.1 Java Java je objektově orientovaný programovací jazyk, který vyvinula firma Sun Microsystems. Patří mezi nejpoužívanější a nejrozšířenější programovací jazyky na světě. Je distribuován pro všechny používané operační systémy, jako jsou Windows, Linux, Mac OS apod. Je oblíbený díky své přenositelnosti. Lze používat pro vývoj programů pro mobilní zařízení a telefony (platforma Java ME), aplikace určené pro desktopové počítače (platforma Java SE) až po rozsáhlé distribuované systémy pracující na více počítačích (platforma Java EE). Všechny tyto platformy jsou tedy nazývány jako celek platforma Java. Důležitou vlastností Javy je, že od 8. května 2007 je vyvíjena jako open source.(což znamená jak technickou dostupnost, tak legální dostupnost kódu - licenci software, která umožňuje, při dodržení jistých podmínek, uživatelům zdrojový kód využívat, například prohlížet a upravovat). Java je nepochybně kvalitní programovací jazyk, ale spíše k tvorbě klasických aplikací. K tvorbě animací pro webové prohlížeče je potřeba využít Java Appletu. Applet (program v jazyce Java) je při každé návštěvě webové stránky, v níž je obsažen, natažen do internetového prohlížeče, kde je mu na stránce vyhrazen obdélníkový prostor pro komunikaci s uživatelem. Je spouštěn v prostředí Virtual Java Machine, které se na počítač instaluje spolu s prohlížečem. U některých prohlížečů (například Microsoft Internet Explorer) není instalace Virtual Java Machine obsažena v typické instalaci. To je i jedna z nevýhod tohoto řešení. Obecně i tvorba Appletu je náročnější na znalosti. Je totiž potřeba již pokročilé znalosti samotné Javy. Samotná implementace Appletu do webové stránky již tak komplikovaná není. Tyto nevýhody, a celkově nižší rozšířenost Javy v prostředí webových prohlížečů, nedělá z tohoto řešení optimální možnost.

2.2 JavaScript + SVG 2.2.1 JavaScript Díky jeho názvu si spousta lidí myslí, že JavaScript je nějakým subjazykem nebo odnoží Javy. Tak tomu, ale vůbec není. Některé jejich základní konstrukce jsou sice stejné, jejich podstata je v principu odlišná. JavaScript je interpretovaný jazyk, který se vyskytuje pouze ve formě zdrojového kódu. JavaScript je multiplatformní, objektově orientovaný skriptovací jazyk, jehož autorem je Brendan Eich z tehdejší společnosti Netscape. Dnes je nejvyužívanější jako programovací jazyk pro www stránky. Často se vkládá přímo do HTML kódu. Jsou jím obvykle ovládány interaktivní prvky stránky nebo tvořeny animace či různé efekty obrázků.

9 Možnosti tvorby ovladatelných animací pro prostředí webových prohlížečů

2.2.2 SVG Je značkovací jazyk (z anglického Scalable Vector Graphics - škálovatelná vektorová grafika) a formát souboru, který popisuje dvojrozměrnou vektorovou grafiku pomocí XML. Formát SVG by se měl v budoucnu stát základním otevřeným formátem pro vektorovou grafiku na Internetu. Zatímco pro rastrovou grafiku je na Internetu formátů dostatek (např. GIF, PNG a JPEG), otevřený vektorový formát zatím chyběl. SVG definuje tři základní typy grafických objektů: • vektorové tvary (vector graphic shapes – obdélník, kružnice, elipsa, úsečka, lomená čára, mnohoúhelník a křivka) • rastrové obrazy (raster images) • textové objekty Tyto objekty mohou být různě seskupeny, formátovány pomocí atributů a polohovány pomocí obecných prostorových transformací. SVG též podporuje ořezávání objektů, alpha masking, interaktivitu, filtrování obrazu (konvoluce, displacement mapping, atd…) a animaci. Ne všechny SVG prohlížeče však umí všechny tyto vlastnosti. JavaScript je tedy možné použít i přímo v SVG souborech, takže již delší dobu existují samostatné SVG prohlížeče, které JavaScript nativně podporují. Téměř samozřejmou se stává podpora JavaScriptu ve webových prohlížečích se zabudovaným zpracováním SVG (Opera, Mozilla Firefox atd.). Programový kód (skript) je možné uložit buď do samostatného souboru (většinou s koncovkou .js) nebo do samotných SVG souborů, které je potom možné distribuovat podobnou formou, jako populární Flashové animace – jak data, tak i programový kód jsou uloženy v jednom souboru, který může být zapakován GZIPem. Vzhledem k tomu, že SVG je vytvořeno na základě syntakticky velmi přísného XML, je nutné JavaScriptový kód, který samozřejmě syntaxi XML neodpovídá, ukládat do sekce CDATA párové značky <script>. Nevýhodami tohoto řešení je složitost kódu při spolupráci JavaScriptu s SVG. Navíc při tvoření scény animace, je nutné jednotlivé její prvky pozicovat na určité souřadnice. To vede k tomu, že v různých prohlížečích dochází k rozházení vytvořené scény. Takže i přes výhodu nativní podpory JavaScriptu a SVG v některých prohlížečích, čímž tedy odpadá nutnost instalace modulů pro přehrání animace, vzniká možnost toho, že vytvořená animace nebude vypadat tak jak má. Zřejmě v budoucnu dojde k odstranění tohoto problému, ale zatím je to příliš velká hrozba s ohledem na účel animace.

10

2.3 Flash Je grafický vektorový program, momentálně ve vlastnictví společnosti Adobe (dříve Macromedia). Používá se především pro tvorbu (převážně internetových) interaktivních animací, prezentací a her. Rozšíření Flashe na internetu pomohla malá velikost výsledných souborů, protože se uchovávají ve vektorovém formátu, a proto ve většině případů vytlačily flashové bannery. Flash má také vlastní implementovaný programovací jazyk ActionScript, který slouží k rozvinutí všech možností interaktivní animace a vývoji robustních aplikací. ActionScript je objektově orientovaný programovací jazyk pro aplikace vyvíjené pomocí Flashe, případně dalších vývojářských nástrojů, využívajících stejného datového formátu. Pomocí ActionScriptu se dají vytvářet komplexní internetové aplikace nebo i animace. ActionScript vychází ze standardizované verze jazyka JavaScript, nazvané ECMAScript. Používání Flashe k vytváření webů neznamená používání ActionScriptu. Pokud ovšem bude třeba použít interaktivity např. různé akce a události po klepnutí na myš, tak už je použití ActionScriptu nutné. Aktuální verze ActionScriptu je verze 3 (podporovaná Flash Playerem 9) a 2 (podporovaná Flash Playerem od verze 6). Výhodami používání Flashe je jeden výrobce a tedy komptabilita se všemi operačními systémy (Windows, Linux atd.). Zaručuje tím, že při vytvoření animace pod operačním systémem Windows, nebude problém s jejím korektním spuštěním pod Linuxem nebo na mobilních zařízeních. Flash je pro vývoj nejrůznějších projektů také proto, že je velmi intuitivní a snadný pro pochopení. Nevýhodou je instalace modulu k přehrávání Flashe pro webové prohlížeče a i menší schopnosti při práci s textem. Flash jak tedy s popisu vyplývá je určen přímo pro vývoj animací pro webové stránky. Navíc jeho největší výhodou, jež zastíní i nedostatky, je jeho rozšířenost. Kdy 99% uživatelů webu má možnost si filmy (animace) vytvořené pomocí Flashe přehrát. I proto byl vybrán jako nejvhodnější řešení a jsou v něm vytvořeny navržené animace.

11 Flash MX 2004

3 Flash MX 2004 3.1 Představení Flash MX 2004 je 2D vývojové prostředí pro tvorbu a vývoj nejrůznějších projektů. Pracuje s vektorovou (i bitmapovou) grafikou. Pro vytváření interaktivních prvků slouží ActionScript, programovací jazyk obsažený přímo ve Flashi. Ten je velmi oblíbený a rozšířený pro svoje intuitivní ovládání, tak i pro snadné pochopení. Velkou výhodou je, že v současné době má více než 99% lidí, kteří využívají web. Možnost zobrazit si filmy vytvořené ve Flashi. To jednoznačně dokazuje popularitu programu. Nato poukazuje i fakt, že spousta vývojářů do svých programů pro vytváření animací vkládá možnost exportovat je do formátu .swf (formát Flashového filmu) například i grafické programy jako CorelDraw nebo Adobe Illustrator. Publikace animací z Flashe je možná jak exportem přímo do HTML stránek nebo do výše zmíněného souboru .swf, což zaručuje možnost přehrávání animací jak online, tak offline. Pomocí Flashe lze realizovat mnoho projektů, mezi nejčastější patří: • Hry • Kreslené filmy • Animace pro webové stránky • Prezentace • Projekty interaktivního vzdělávání

3.2 Prostředí Před seznámením se s jednotlivými prvky a možnostmi Flashe, představení uživatelského prostředí (viz. Obr. 1):

Obrázek 1: Prostředí programu Flash MX 2004

12 Flash MX 2004

Na středu obrazovky se nachází tzv. jeviště. Což prostor, do kterého umisťujeme prvky, jež chceme, aby byly v animaci. Na dolní straně se nachází panel Actions (Akce), tedy místo kde tvoříme skripty k jednotlivým snímkům nebo prvkům a dále panely Help (Nápověda) a Properties (Vlastnosti), kde upravujeme vlastnosti prvků na jevišti (barvu apod.). Na horní straně se nachází Timeline (Časová osa), ve které přidáváme a vybíráme snímky pro jejich zpracování. Na levém kraji je panel s nástroji pro vytváření textu a grafických prvků. Na pravé straně nabídka předdefinovaných komponent Flashe a například i Color mixer (Mixer barev). Obsah tohoto pravého panelu lze volitelně měnit a upravovat. Stejně tak je možné, všechny panely skrýt a mít tak zobrazené pouze jeviště.

3.3 Možnosti Flashe 3.3.1 Tvorba prvků animace Jednou z nejdůležitějších částí každé animace jsou grafické prvky, jež animace obsahuje. Jednou z možností jak je vytvářet je pomocí nástrojů na levém panelu. Lze takto vkládat text, vytvářet geometrické tvary, kreslit apod. Dále tyto prvky transformovat tj. upravovat velikost, tvar, otáčet s nimi. Nebo se dají prvky na jeviště importovat z jiného grafického programu. Popřípadě využít komponent přímo obsažených ve Flashi např. tlačítka, textová pole apod. 3.3.2 Symboly Takto vytvořené prvky lze poté převést na symboly. Ve Flashi jsou tři druhy symbolů: • Graphic (Grafika) – Je to nejčastěji jenom statický prvek animace, neboť nemá možnost přopojení skriptu. • Button (Tlačítko) – Slouží k interakci, reagují na kurzor a tlačítka myši. Každé tlačítko má čtyři polohy o Up – Udává vzhled tlačítka, pokud na něm není kurzor myši. o Over – Udává vzhled po najetí kurzorem na tlačítko. o Down – Udává vzhled po stisknutí tlačítka myší. o Hit – Oblast, kterou tlačítko reaguje na kurzor. Každá z těchto poloh má svůj vlastní snímek na speciální časové ose tlačítka. • Movie Clip (Filmový klip) – Je to nejvíce interaktivní, univerzální prvek Flashe, který nabízí řadu možností využití. Symboly movie clipů mohou zahrnovat všechny prvky hlavního filmu. Movie clipy mají své vlastní časové osy a mohou být proto přehrávané i při zastavení hlavní časové osy. Movie clipy lze použít na nezávislé animace, vlastní kurzory, prvky přesunovatelné myší, prvky aplikovatelné během přehrávání aprvky u kterých může uživatel měnit za běhu jejich vlastnosti (barvu, velikost, viditelnost atd.)

13 Flash MX 2004

3.3.3 ActionScript Umožňuje interaktivou prvků v animaci. K tomu jsou nutné tři základní prvky: událost, která vyvolá provedení skriptu, akce v rámci skriptu, jež říkají, co se má provést, a konečně cíle, které ty akce ovládají. Pro lepší představu jeden příklad: Událost: Začne pršet. Akce: Zapnou se stěrače u auta. Cíl: Již zmíněné stěrače auta. 3.3.3.1 Události

Prvním prvkem každého skriptu je událost, která vyvolá jeho provádění. Může se jednat o následující události: • Událost myši • Událost klávesnice • Událost snímku • Událost klipu 3.3.3.1.1 Události myši

Nastávají tehdy, interaguje-li uživatel s tlačítkem nebo s instancí movie clipu pomocí kurzoru myši. Jedná se o: • Press – Stisk tlačítka. • Release – Stisk a uvolnění tlačítka. • Release Outside - Uvolnění tlačítka až po odjetí s kurzorem myši jinam. • Roll Over - Najetí kurzorem na tlačítko. • Roll Out - Odjetí kurzorem mimo tlačítko. • Drag Over – Přidržení tlačítka myši, přesun kurzoru na tlačítko, poté mimo něj a potom opět na něj (tlačítko myši je pořád stisknuté). • Drag Out – Umístění kurzoru na tlačítko, stisk tlačítka a přesun kurzoru mimo tlačítko. 3.3.3.1.2 Události klávesnice

Flash umožňuje přiřazovat události klávesnice, které nastávají tehdy, stiskne-li uživatel klávesu se zvoleným písmenem. Nutno upozornit že Flash rozlišuje malá a velká písmena (událost přiřazená k A, se neprovede po stisku a). Události klávesnice je možné připojit k tlačítkům nebo movie clipům.

14 Flash MX 2004 3.3.3.1.3 Události klipů

Jak název napovídá, jsou připojovány k movie clipům. Tyto události se vyvolávají prostřednictvím specifické interakce s příslušným klipem. Jsou to tedy události: • load – Při prvním výskytu movie clipu. • enterFrame – Při každém přechodu časové osy movie clipu na nový snímek. • unload – Časová osa dojde na první snímek, ve kterém již movie clip není. • mouseDown – Stisk levého tlačítka myši, kdekoliv v rámci okna filmu, kde se nachází příslušný movie clip. • mouseUp – Uvolnění levého tlačítka myši, kdekoliv v rámci okna filmu, kde se nachází příslušný movie clip. • mouseMove – Při jakémkoliv pohybu myši. • keyDown – Při stisku jakékoliv klávesy. • keyUp – Při uvolnění jakékoliv klávesy. • data – Po obdržení externích dat movie clipem. 3.3.3.1.4 Cíle

Existují tři hlavní druhy cílů: aktuální film a jeho časová osa, jiné filmy a jejich časové osy a externí aplikace. • Aktuální film – znamená že, že stejný film obsahuje tlačítko, movie clip nebo snímek, jenž vyvolává akci, a že také tento film sám představuje cíl dané akce (stop();) • Jiné filmy – pokud má být cílem jiný film, je nutno jej ve skriptu uvést jako cíl. (můjMovieClip.stop();) • Externí cíle – znamená aplikaci, která není součástí filmu, a jež je potřebná k tomu, aby bylo možné provést zvolenou akci. 3.3.3.1.5 Akce

Poslední prvek procesu nastavování interaktivního chování. Umožňuje nastavovat filmy (nebo externí aplikace), tak aby prováděly požadované úkony. Prostřednictvím jediné události lze vyvolat více akcí a působit na více cílů. • gotoAnPlay() – Skoč na uvedený snímek a začni přehrávat. • gotoAndStop() – Skoč na uvedený snímek a zastav přehrávání. • on() – Umožňuje nastavit události myši v rámci skriptu. • play() – Přehrávání filmu. • stop() – Zastavení filmu. • stopAllSounds() – Zastavení všech audio stop. • fscommand() –Pošle data aplikaci, která je hostitelem filmu ve Flashi (např. webový prohlížeč). • getURL() – Otevře prohlížeč a uvedené URL. • loadMovie() – Načte film Flashe z uvedeného URL do jiného filmu Flashe. • loadVariables() – Načte data externích proměnných na časovou osu.

15 Flash MX 2004

•

unloadMovie() – Odstraní dříve načtený film.

3.3.4 Časová osa Je důležitou částí Flashového prostředí. Pomocí ní se řídí průběh animace tj. pořadí snímků. Na časové ose se určuje typ snímku. Snímek může být buď klíčový, tedy snímek, na kterém dochází ke změně prvků na jevišti. Nebo obyčejný, jež přebírá vlastnosti předchozího snímku a pokud jsou na něm měněny prvky animace, změní se na všech obyčejných snímcích, až po klíčové. Na ose je ještě možnost výběru vrstvy, ve které budeme pracovat.

3.4 Tvorba projektu ve Flash MX 2004 Projekty realizované ve Flashi mohou být různého druhu. Nejčastěji se jedná o prezentace, tutoriály, promítání transparencí nebo dokonce i hry. Některé projekty jsou ve značné míře interaktivní, ale s minimem animací u jiných tomu může být naopak. Každopádně bez ohledu na charakter projektu existuje jistý obecný postup, jak při jeho realizaci postupovat: • Vytvoření grafických prvků ve Flashi, popřípadě jejich import z jiného programu. • Rozmístění a uspořádání těchto prvků na jevišti (zobrazovaná plocha animace). • Úprava uspořádání a vzhledu jednotlivých snímků. Výběr symbolu, tahu nebo textu popřípadě dalších prvků na jevišti a jejich úprava pomocí panelu vlastnosti. • Určení grafických prvků, nezávislých animací a jakýchkoliv dalších prvků, které budou během realizace potřebné a jejich převedení na symboly. • Připojení akcí (prostřednictvím ActionScriptu) k tlačítkům, movie clipům nebo snímkům na časové ose s cílem zajištění jejich interakce.

16 Animace

4 Animace V rámci této práce byly vytvořeny čtyři animace pro podporu výuky výpočetní techniky. Výběr byl proveden na základě toho, jaké problémy nebo pojmy z oblasti výpočetní techniky jsou pro pochopení složité a je tedy dobré mít je ve vizuální podobě. Nebo už jsou zpracovány, ale ve špatné nebo nedostatečné podobě. Byly tedy vybrány a zhotoveny animace pipeliningu, laserové tiskárny, token ringu a požadavku na přerušení (IRQ). Při vytváření těchto animací bylo důležité brát ohled na tyto podmínky: •

•

•

•

Pochopení pojmu nebo problému – Při vytváření animace, jež zachycuje a zobrazuje nějaký problém nebo pojem z výpočetní techniky, je důležité, aby byl správně pochopen tvůrcem. Tedy aby nedošlo k tomu, že animace zobrazuje a popisuje věci, jež s daným problémem nebo pojmem nesouvisí nebo jsou chybné. Je proto důležité si podrobně do hloubky, jež chceme zobrazit, daný problém nebo pojem nastudovat. To by se poté mělo odrazit i v bodě zobrazení reality. Jednoduché ovládání - Základem toho aby animace byla vůbec použitelná pro výuku, ale i obecně, je jednoduché a tedy snadno pochopitelné ovládání pro jejího uživatele. Je totiž nanejvýš frustrující pracovat se sice pěknou animací, ovšem jejíž ovládání je buď složité nebo prakticky nepochopitelné. Přehlednost - Jednotlivé prvky by měli být jednoznačně rozeznatelné, pro snadné pochopení co animace simuluje a co jednotlivé její prvky představují. Je také vhodné, opatřit animace komentářem, který popisuje, co na obrazovce právě probíhá. Právě komentáře přispívají pro lepší pochopení daného problému, i když není animace právě přehrávána ve výuce. Dále zajištění toho, aby jednotlivé prvky nebyly příliš malé, nebo naopak příliš velké a animace nebyla přeplácaná, ať už barevným provedením nebo množstvím prvků, které obsahuje. To vše zvyšuje pouze nepřehlednost celé animace, jejíž přínos se poté stává nulovým. Zobrazení reality – Animace by měla odrážet skutečnost. Tedy simulovat to, jak konkrétní problém nebo věc funguje ve skutečnosti. Animace může být samozřejmě mírně zjednodušena, ale v rámci zachování odpovídající funkčnosti.

4.1 Animace pipelining Je to způsob, jakým jsou instrukce zpracovány procesorem počítače. Má několik fází, které se liší podle typu procesoru. Klasické zpracování instrukcí procesorem probíhá tak, že každá jedna instrukce musí projít všemi fázemi a teprve po dokončení zpracování této instrukce je připuštěna ke zpracování instrukce další. Naproti tomu pomocí pipeliningu je možné zpracovávat více instrukcí zároveň, neboť když se první instrukce dostane do druhé fáze, druhá instrukce už je vložena a zpracovávána ve fázi první. Tak jsou za sebe instrukce vkládány, dokud není zpracování všech dokončeno. Teoreticky tedy, kdyby procesor zpracovával instrukce ve čtyřech fázích pipeliningem, zvládne zpracovat čtyři instrukce za stejný čas, za který procesor bez pipeliningu zpracuje instrukci jednu.

17 Animace

4.1.1 Základní podmínky •

•

•

Jednoduché ovládání – V animaci bylo využito tlačítek se všeobecně známými symboly použití tj. tlačítka play a stop, pro přehrání a zastavení animace, a tlačítka pro posun o snímek v animaci dopředu a dozadu. A dále jedno tlačítko s popiskem, pro vlastní zapínání a vypínání pipeliningu. Přehlednost - pro zachování přehlednosti, je v animaci použito pouze čtyř fází pro zpracování instrukcí. Tedy i čtyř instrukcí, které jsou postupně zpracovány. Každá z těchto instrukcí má svoji barvu pro snadné rozlišení. I díky menšímu počtu těchto instrukcí je zachována přiměřená velikost všech prvků v animaci, pro dobrou viditelnost a čitelnost. Právě z důvodu velikosti prvků, není použito v animaci více fází, neboť by to sebou neslo větší počet instrukcí a tím celkové zmenšení prvků v animaci. Nemluvě o barevné přeplácanosti, kvůli rozlišení jednotlivých instrukcí. Což by mělo za následek znepřehlednění celé animace. Reálné zpracování – Animace ukazuje rozdíl v rychlosti zpracování instrukcí při použití pipeliningu a bez něj.

4.1.2 Vlastní realizace animace •

•

Rozlišení - Nastaveno 700 x 480 px., jež zaručuje dostatečnou plochu pro všechny prvky v animaci, při zachování jejich dostatečné velikosti. Navíc pokud budeme chtít animaci promítnout na plátno přes projektor, tak při roztažení na celou obrazovku se animace a prvky v ní celkově zvětší a nevzniká tak problém s její viditelností na velké ploše, jak se někdy stává. Rychlost přehrávání - Nakonec zvolena 1,5 snímku za vteřinu. Je to rychlost dostačující pro běžné přehrání, neboli animace není ani pomalá, že by se zbytečně vlekla, ale ani rychlá, že by uživatel nestíhal sledovat co se na obrazovce děje.

4.1.2.1 Vytvoření grafických prvků animace

Pro tvoření a rozmisťování prvků byla plocha animace rozdělena horizontálně na dvě poloviny. V horní polovině jsou do první vrstvy nepipelining na klíčový snímek časové osy umístěny prvky, které budou představovat simulaci zpracování instrukcí bez použití pipeliningu. Na levém kraji jsou tedy pod sebe umístěny čtyři zaoblené obdélníky (vytvořené pomocí nástroje pravoúhelník), představující jednotlivé instrukce. Každé instrukci (obdélníku) v menu vlastnosti je přiřazena jiná barva konkrétně: modrá, červená, zelená a žlutá (barvy i z větší vzdálenosti dobře viditelné a rozlišitelné). Fáze, kterými instrukce prochází, znázorňuje dlouhý světle šedý obdélník (barva zvolena na základě toho, že instrukce budou při procházení dobře viditelné). Následně je vytvořena na časové ose dalších sedmnáct klíčových snímků, na kterých se jednotlivé instrukce pohybují. Celkem tedy 18 snímků. První a poslední znázorňující stav instrukcí před a po zpracování. Zbylých 16 obstarává pohyb jednotlivých instrukcí během

18 Animace

zpracování (4 fáze x 4 instrukce). Jelikož nemůže být využito tzv. mezipohybu, musí být každý snímek upraven ručně (posun instrukce proveden ručně na každém snímku). Vytvoření simulace zapnutého pipeliningu, obstará vložení všech prvků z první vrstvy nepipelining do druhé vrstvy pipelining. S tím rozdílem, že teď jsou vloženy prvky jakoby zrcadlově a to na klíčové snímky devatenáct až třicet šest. Následuje úprava mezi těmito snímky. Opět po jednotlivých snímcích, kdy musíme vkládat instrukce na snímcích jednu za druhou, a ne až poté co jedna projde všemi fázemi. Zároveň při každém projití instrukce všemi fázemi je zobrazeno množství, kolikrát daná instrukce už byla zpracována. Na závěr je zkopírován z první vrstvy snímek jedna až osmnáct na snímky devatenáct až třicet šest. Čímž je docíleno zobrazení obou možností zpracování instrukcí, jak s pipeliningem, tak bez něj, od snímku devatenáct. Úplně nakonec je vložen do třetí vrstvy text popis (pomocí nástroje text). A do vrstvy ovládání tlačítka, pomocí nichž celou animaci (viz. Obr. 2) budeme ovládat. Jedná se o tlačítka, která byla vytvořena seskupením dvou prvků (šedého obdélníku a černého symbolu). A poté převedena na objekt tlačítko (button). Jedná se o tlačítka play, stop, další a předchozí snímek. A tlačítka pro zapnutí/vypnutí pipeliningu stejného tvaru a barvy.

Obrázek 2: Výsledné grafické zpracování animace

19 Animace 4.1.2.2 Actionscript v animaci

Actionscript u tlačítek: Tlačítko play Na všech snímcích kromě 18. a 36. je připojen tento skript: on (press) { _root.hrej = true; play(); } Po stisku tlačítka přiřaď proměnné hrej hodnotu true a přehrávej animaci. Na zbylých dvou snímcích je připojen skript: on (press) { gotoAndPlay(1 /19); } Po zmáčknutí se přesuň na snímek 1 nebo 19. Tedy na začátek části animace, ve které se právě nachází. Tlačítko stop on (press) { _root.hrej = false; stop(); } Po zmáčknutí tlačítka přiřaď proměnné hrej hodnotu false a zastav přehrávání. Tlačítka další/předchozí snímek on (press) { nextFrame(); } Po zmáčknutí se přesuň na další snímek v pořadí. on (press) {prevFrame(); } Po zmáčknutí se přesuň na předchozí snímek v pořadí. Tlačítko zapnout/vypnout pipelining on (press) {gotoAndPlay(1/19); } Po stisku tlačítka se přesuň na snímek 1, respektive 19 a přehrávej animaci. Přepíná mezi zobrazením animace bez pipeliningu a s ním.

20 Animace

Actionscript u snímků: if (_root.hrej == true) { } else { stop(); } Podmínka, vložená na prvním a devatenáctém snímku. Zajišťuje, že po stisku tlačítka play se animace začne přehrávat. (proměnná hrej je nastavena na true). Tato podmínka zajišťuje že po otevření animace se nezačne hned přehrávat, ale teprve po stisku tlačítka play. Příkaz vložený na 18 a 36 snímku zajišťuje zastavení přehrávání dané části animace. _root.hrej = false;

4.2 Animace laserová tiskárna Základem laserové tiskárny je otáčející se kovový válec pokrytý vrstvou selenu, který má kladně nabitý náboj. Pomocí laserových paprsků, které na válec odráží otočné zrcadlo a jejichž přesný směr ještě udává deflektor, se na válec vykreslí požadovaný obraz. Tedy v místech tisku se náboj válce vybije (náboj se díky vodivosti odvede). Válec se poté popráší kladně nabitým práškem (tonerem), jenž na vybitých místech na válec přilne. Poté se celý obraz přitiskne na záporně nabitý papír a nakonec se ještě zažehlí pro co nejlepší kvalitu tisku. 4.2.1 Základní podmínky •

•

•

Jednoduché ovládání - Proto bylo v této animaci opět využito tlačítek se všeobecně známými symboly použití tj. opět tlačítka pro přehrání a zastavení animace a pro posun o snímek v animaci dopředu a dozadu. Animace je přehrávána pomocí kroků, jež odpovídají klíčovým okamžikům v animaci. Přehlednost - Pro dobré pochopení toho jak tisk laserové tiskárny probíhá, bylo potřeba zobrazit její vnitřnosti, které se starají o tisk, ve 3D pohledu. To sebou neslo sice jisté komplikace i vzhledem k zachování autentičnosti vnitřku tiskárny, jež se tedy nese v barvách šedi (různé odstíny). I přesto, jsou veškeré vykreslené prvky dostatečně velké a dobře viditelné. Celá animace je navíc opatřena komentářem, jež celým průběhem tisku provází. Navíc jak již bylo zmíněno je celá animace přehrána v jednotlivých krocích, zachycujících důležité momenty tisku. Reálné zpracování – Animace laserové tiskárny reálně vyobrazuje průběh tisku, tj. co se děje uvnitř tiskárny, než z ní vyleze potištěný papír.

21 Animace


•

Rozlišení - Nastaveno 800 x 600 px., zaručuje dostatečnou plochu pro všechny prvky v animaci, při zachování jejich dostatečné velikosti. Navíc pokud budeme chtít animaci promítnout na plátno přes projektor, tak při roztažení na celou obrazovku se animace a prvky v ní celkově zvětší a nevzniká tak problém s její viditelností na velké ploše, jak se někdy stává. Rychlost přehrávání - Nakonec zvolena 12 snímku za vteřinu. Jež je zároveň standardní rychlostí přehrávání filmů ve Flashi. Tato rychlost dostatečně navozuje skutečnou rychlost tisku, a zároveň umožňuje zachytit veškeré dění v animaci.

4.2.2.1 Vytvoření grafických prvků animace

Největším problém, této animace, je již zmíněné 3D zobrazení vnitřností tiskárny, pro nějž není Flash uzpůsoben. Nakonec pomocí nástroje volná transformace a různých zkosení a změn poměrů bylo dosaženo toho, že prvky a celá animace působí, že se jedná o 3D. Nejdříve pomocí nástroje elipsa byla vytvořena elipsa, která byla dále ještě zkosena. Následně zkopírována a spojena čarami na vhodných místech, díky čemuž vznikla plocha, mezi elipsami, která po vyplnění nástrojem inteligentní výplň vytvořila z tohoto objektu první a hlavní válec, obstarávající tisk (barva nastavena v panelu vlastnosti tmavě šedá). Stejným způsobem byly vytvořeny další čtyři světle šedé válce, pro posun a zažehlení papíru. K hlavnímu válci byl vytvořen ve stejné barvě a stejným způsobem kvádr (s rozdílem, že místo elipsy byl na začátku požit nástroj pravoúhelník) jako podstavec pro hlavní válec. Podobně vytvořen byl ještě světle šedý kvádr s černým výstupkem představující toner. Vzhledem k tomu, že se některé museli navzájem překrývat, byly všechny vytvořeny do stejné vrstvy objekty a převedeny na objekty (s nimiž se dá pracovat při nastavování pořadí viditelnosti na scéně). Dále byly do této vrstvy vytvořeny objekty, jejichž vytvoření probíhalo stejným způsobem jako u hlavního válce. S tím rozdílen, že na zrcadlo byl použit nástroj polystar tool a byla nastaven modrá barva, laser pomocí pravoúhelníku a v šedé barvě. Nakonec deflektor pomocí elipsy v bílé barvě. Tím byly vyhotoveny všechny statické části animace. Za pomoci mřížky a pomocných linek byly všechny tyto prvky umístěny do jeviště, aby vytvořili celek. Po vytvoření a uspořádání statických prvků animace. Lze přejít na dynamické. Jedná se o laserový paprsek, který vychází z laseru (šedý kvádr) a měl by se odrážet od modrého zrcadla na plochu válce, kde by se po jeho dopadu měl objevit text, který tiskneme. Pohyb paprsků laseru je řešen pomocí mezipohybu shape. Tedy u každého paprsku je na jeden klíčový snímek nakreslen výchozí úsek parsku a na další koncový (pomocí nástroje čára) kam má paprsek dopadnout. Na 10 snímcích mezi těmito dvěma počítač dopočítá pomocí mezipohybu shape typu angular jejich přírustek. Což ve výsledku vede k plynulému pohybu jednotlivých paprsků. Ty se všechny pohybují po vodících linkách přiřazených k jednotlivým vrstvám paprsků. Celkem tedy 18 vrstev (1 vrstva samotný paprsek a k tomu jedna vrstva vodící linka). Ty jsou rozlišeny názvem podle písmena, jež se zobrazí po jejich dopadu. Další

22 Animace

paprsek začíná vždy na posledním snímku předchozího paprsku. Na němž je zároveň i zobrazeno další písmeno z textu k tisknutí. Na závěr je ještě do samostatné vrstvy nakreslena pravoúhelníkem bílá plocha představující papír a jsou přidány do další vrstvy ovládací tlačítka a komentáře. Pomocí klíčových snímků je následně celá animace (viz. Obr. 3) rozpohybována. Do animace je dále přidáno za poslední snímky představující tiskárnu detailní zobrazení pohledu na pohyb zrcadla při tisku a směrování paprsků laseru. Tato část je již vytvořena ve 2D pohledu a obsahuje jen hlavní válec pro tisk, laser a jeho paprsky, zrcadlo a deflektor. Tyto prvky byly vytvořeny stejně jako část pro 3D pohled jen bez použití nástroje volná deformace, tedy nebyly nějak deformovány a jejich vytvoření bylo o to jednodušší.

Obrázek 3: Výsledná podoba animace včetně komentáře

4.2.2.2 ActionScript v animaci

Actionscript u tlačítek: Tlačítka fungují na stejném principu jako u předchozí animace. (viz. kapitola 4.1.2.2) Actionscript u snímků: Kromě tlačítek jsou v animaci použity ještě skripty u klíčových snímků, na kterých je přehrávání zastaveno a změněn komentář.

23 Animace

4.3 Animace Token Ring Token ring je kruhové zapojení pracovních stanic do sítě. Data se přenášejí postupně z jedné pracovní stanice na obvodu kruhu do druhé. Aby jedna ze stanic mohla vysílat, musí si odchytit token (tzv. právo na vysílání), které koluje mezi stanicemi. Pokud zažádá o vysílání více stanic, právo vysílat získá ta, ke které token dorazí jako první. Poté co jsou data od vysílací stanice doručena přijímací stanici. Odešle potvrzení vysílací stanici o správném přijetí přenášených dat. Důležitou funkcí, kterou token ring zajišťuje je tzv. funkce monitoru, což je označení jedné ze zapojených stanic v okruhu jako monitorovací. Ta zajišťuje, že při ztracení tokenu ho opět vyšle do oběhu. 4.3.1 Základní podmínky •

•

•

Jednoduché ovládání – Animace je ovladatelná pomocí tlačítek play a stop, tedy spuštění přehrávání a zastavení přehrávání. Obsahuje také dvě tlačítka pro přepínání mezi režimy přenos (transmitting) a monitorování (lost token). Označování počítačů na odesílatele a příjemce se děje pomocí kliknutí přímo na obrázek počítače, takže je velmi pohodlné. Stejně tak při označování monitorovacího počítače. Přehlednost – Pro dobrou přehlednost bylo použito pouze 6 počítačů, které ovšem plně dostačují pro simulaci problému a zároveň zbytečně nezabírají místo na scéně. Zároveň veškeré zobrazované prvky mají dostatečnou velikost a jsou barevně odlišeny (tedy dobře viditelné) popřípadě i popsány. Veškeré dění v simulaci navíc popisují dynamicky se měnící komentáře. Reálné zpracování – Obvykle bývají počítače při simulaci token ringu zobrazeny do kruhu. V tomto případě, je ale zobrazení více přiblíženo realitě. Počítače jsou samozřejmě zapojeny do kruhu, ale zobrazeny vedle sebe, což více odpovídá reálnému uspořádání.


•

Rozlišení - Nastaveno 750 x 400 px., jež zaručuje dostatečnou plochu pro všechny prvky v animaci, při zachování jejich dostatečné velikosti. Navíc pokud budeme chtít animaci promítnout na plátno přes projektor, tak při roztažení na celou obrazovku se animace a prvky v ní celkově zvětší a nevzniká tak problém s její viditelností na velké ploše, jak se někdy stává. Rychlost přehrávání - Zvolena 12 snímků za vteřinu. Rychlost, při níž se nemusí dlouho čekat na provedení přenosu mezi jednotlivými počítači a zároveň je pro uživatele dostatečná na přečtení komentářů.

24 Animace 4.3.2.1 Vytvoření grafických prvků animace

Nejprve vytvoření tzv. vodící vrstvy tedy vrstvy, do které se nakreslí topologie zapojení, jinými slovy uspořádání kabelů mezi počítači, po kterých se bude token, data a potvrzení pohybovat. Pod tuto vrstvu je vloženo 7 dalších vrstev obsahujících již zmíněné prvky. Všechny tyto prvky byly vytvořeny zvlášť pomocí elipsy a textu. Ty byly sloučeny a převedeny na movie clip. Takto byl vytvořen každý prvek. Jejich pohyb po vodící lince je zajištěn, že po každých 20 snímcích je změněna poloha prvku (je posunut dále po lince). Mezi těmito snímky je nastaven mezipohyb motion, jež zajišťuje pohyb snímků mezi nastavenými polohami. Kvůli plynulosti je nakonec takto využito 180 snímků (tedy 9 poloh pro prvek). Dále už je jen přidělána vrstva pro komentáře (klasický text) a pro symboly počítačů (vytvořeny obdobně jako token a další prvky). Nakonec do poslední vrstvy jsou přidány tlačítka pro ovládání animace a přepínaní mezi režimy.

Obrázek 4: Výsledná podoba animace zachycená při přenosu dat

25 Animace 4.3.2.2 ActionScript v animaci

Hlavním principy animace jsou ve viditelnosti jednotlivých prvků (vlastnost _visible). Přenášení dat, potvrzení a obíhání tokenu je řešeno tím, že je vidinný vždy jen daný potřebný prvek. Toto přepínání viditelnosti je provedeno vždy, při naražení do patřičného počítače (funkce hitTest). Vzhledem k délce skriptů u symbolů počítačů, jež dosahuje délky 180 řádků, jsou toto pouze části skriptů. ActionScript u symbolů: Skripty u symbolů počítačů PC1 – PC6: on (press) { if ((_root.token.vysilani == 2) || (_root.token.vysilani == 3) || (_root.token.vysilani == 4) || (_root.token.vysilani == 5) || (_root.token.vysilani == 6)) { if ((_root.token.vpom == 2) || (_root.token.vpom == 3) || (_root.token.vpom == 4) || (_root.token.vpom == 5) || (_root.token.vpom == 6)) { if ((_root.token.vpom2 == 2) || (_root.token.vpom2 == 3) || (_root.token.vpom2 == 4) || (_root.token.vpom2 == 5) || (_root.token.vpom2 == 6)) { _root.token.ppom2 = 1; _root.poc1p._visible = true; _root.PC1.animace = true; } else { if ((_root.token.ppom == 2) || (_root.token.ppom == 3) || (_root.token.ppom == 4) || (_root.token.ppom == 5) || (_root.token.ppom == 6)) { _root.token.vpom2 = 1; _root.poc1o._visible = true; _root.PC1.animace = true; } else { _root.token.ppom = 1; barva = new Color(_root.poc1p); barva.setRGB(0xFF0000); _root.poc1p._visible = true; _root.PC1.animace = true; } } } else { if ((_root.token.prijem == 2) || (_root.token.prijem == 3) || (_root.token.prijem == 4) || (_root.token.prijem == 5) || (_root.token.prijem == 6)) { _root.token.vpom = 1; barva = new Color(_root.poc1o); barva.setRGB(0xFF0000); _root.poc1o._visible = true;

26 Animace

_root.PC1.animace = true; } else { _root.token.prijem = 1; barva = new Color(_root.poc1p); barva.setRGB(0x0000FF); _root.poc1p._visible = true; _root.PC1.animace = true; } } } else { _root.token.vysilani = 1; barva = new Color(_root.poc1o); barva.setRGB(0x0000FF); _root.poc1o._visible = true; _root.PC1.animace = true; } } } Tento skript zajišťuje, že po kliknutí na symbol některého z počítačů se mu přiřadí, zda bude data vysílat nebo přijímat. Ač možná působí na první pohled komplikovaně, skript porovná hodnoty v proměnných pro vysílání (vysilani, vpom, vpom2) a přijímání (prijem, ppom, ppom2). Ukázkový příklad: Pokud už máme označený počítač 1. (pro vysílání; proměnná vysilani má hodnotu 1) a 2. (pro příjem; proměnná prijem má hodnotu 2) a klikneme na 4. počítač, tento skript zjistí, že už proměnné vysilani a prijem jsou obsazené a označí tedy počítač číslo 4 jako další počítač pro vysílání (proměnná vpom dostane hodnotu 4). Kromě označení zda se jedná o vysílací nebo přijímací počítač, každý blok kódu v podmínce dále zajišťuje, že se zobrazí popisek u počítače a obarví se danou barvou.

onClipEvent (enterFrame) { if ((_root.PC1.hitTest(_root.token)) && (_root.token._visible == true)) { if (_root.token.vysilani == 1) { _root.token.par = _root.token.prijem; _root.token._visible = false; _root.dataD._visible = true; _root.dataA1._visible = true; _root.dataT._visible = true; _root.dataA2._visible = true; _root.potvrzeni._visible = false; _root.PC1.prenos = true;

27 Animace

_root.textdata._visible = true; _root.textpotvrzeni._visible = false; Toto je ukázka části skriptu, který zajišťuje vyslání dat z označeného počítače. Je zde využito funkce hitTest, která dokáže určit, zda se srazily dva vybrané movie clipy. Skript řeší situaci, že když narazí do počítače (v tomto případě číslo 1) token, jehož viditelnost musí být rovna true (je viditelný) a zároveň hodnota proměnné vysilani je rovna 1 (tedy PC1 je určen jako vysílací počítač) provedou se dané příkazy. Vysílacímu počítači se určí příjemce jeho dat, jež představují symboly, které jsou zviditelněny. Naproti tomu se token zneviditelní a zobrazí se komentář k přenášení dat. Stejný obsah má i blok kódu u proměnné vpom a vpom2. A velmi podobný skript je použit pro odeslání potvrzení, jež pracuje na stejném principu. onClipEvent (enterFrame) { if ((_root.PC2.hitTest(_root.potvrzeni)) && (_root.potvrzeni._visible == true) && ((_root.token.vysilani == 2) || (_root.token.vpom == 2) || (_root.token.vpom2 == 2)) && (_root.PC2.prenos == true)) { if (_root.token.vysilani == 2) { _root.token.prijem = 0; _root.token.vysilani = 0; if ((_root.token.vpom>0) && (_root.token.ppom>0)) { _root.token.prijem = _root.token.ppom; _root.token.vysilani = _root.token.vpom; _root.token.vpom = 0; _root.token.ppom = 0; } if ((_root.token.vpom2>0) && (_root.token.ppom2>0)) { _root.token.vpom = _root.token.vpom2; _root.token.ppom = _root.token.ppom2; _root.token.vpom2 = 0; _root.token.ppom2 = 0; } _root.gotoAndPlay(1); _root.PC1.prenos = false; _root.token._visible = true; _root.dataD._visible = false; _root.dataA1._visible = false; _root.dataT._visible = false; _root.dataA2._visible = false; _root.potvrzeni._visible = false; _root.poc1o._visible = false; _root.textdata._visible = false;

28 Animace

_root.textpotvrzeni._visible = false; _root.token.par = 0; Část skriptu ukazujícího jakým způsobem je ukončen přenos mezi dvěma počítači. Funkce hitTest opět zkontroluje, jestli do sebe narazily ty správné movie clipy a zároveň jestli jsou správné hodnoty vysílacích proměnných. Poté zneviditelní vše, kromě tokenu, jenž je vyslán ze snímku, na kterém vyjíždí z daného počítače. Hodnota proměnných určujících vysílání a příjem je nastavena na 0. Skript pokračuje pro proměnné vpom a vpom2. ActionScript u snímků: Animace obsahuje i skripty připojené ke klíčovým snímkům animace. Jedná se o skripty, jež kontrolují, jestli vše probíhá tak jak má tj. dohlíží nato, aby nebyl ve špatnou chvíli zobrazen komentář nebo symbol. Kontrolují, i jestli proměnné mají správnou hodnotu. ActionScript u tlačítek: Obě tlačítka paly i stop pracují se stejnými skripty jako v kapitole příkazy jako v předchozí kapitole 4.1.2.2, kde je vše rozebráno podrobně. Tlačítka transmitting a lost token pouze mění hodnotu na true a false.

4.4 Animace IRQ – požadavek přerušení IRQ je zkratka z anglického Interrupt ReQuest (čili požadavek na přerušení). Označuje signál, kterým požádá zařízení (např. klávesnice, časovač, sériový port atd.) procesor o přerušení probíhajícího procesu za účelem provedení důležitější akce. Přerušení se provádí následovně: Zařízení sdělí řadiči přerušení, že potřebuje provést přerušení (například při stisknutí klávesy na klávesnici je také vyslán požadavek na přerušení). Řadič přerušení poté upozorní CPU, že jsou čekající přerušení. Když se CPU dostane do stavu, kdy je ochotné přerušení přijmout, přeruší probíhající výpočet, zeptá se řadiče na nejdůležitější (s největší prioritou) nezamaskované čekající přerušení a spustí jeho obsluhu. Tím způsobem, že v paměti RAM, ve vektoru přerušení najde číslo obslužného podprogramu pro dané zařízení a ten poté vykoná. Po skončení přerušení si procesor znovu načte ze zásobníku stav, při kterém začalo přerušení a pokračuje dále. 4.4.1 Základní podmínky •

•

Jednoduché ovládání – Jednotlivé přerušení se provádí pomocí kliknutí na dané zařízení. Kromě zařízení klávesnice, která reaguje na stisk kláves. Dále je animace ovladatelná pomocí tlačítek play a stop, tedy spuštění přehrávání a zastavení přehrávání. Přehlednost – Pro zachování přehlednosti má každé zařízení, které provádí přerušení, nastavenu svoji vlastní barvu. I přes velké množství signálů (čar) je zachována dobrá

29 Animace

•

velikost jednotlivých prvků při zachování všech potřebných částí. Při průchodu animací jsou snímky opatřeny komentáři, aby bylo jasné, co se na obrazovce děje. Reálné zpracování – Animace zachycuje celý průběh přerušení, tak jak ho procesor skutečně provádí včetně možnosti maskování přerušení.


•

Rozlišení - Nastaveno 900 x 600 px., jež zaručuje dostatečnou plochu pro všechny prvky v animaci, při zachování jejich dostatečné velikosti. Navíc pokud budeme chtít animaci promítnout na plátno přes projektor, tak při roztažení na celou obrazovku se animace a prvky v ní celkově zvětší a nevzniká tak problém s její viditelností na velké ploše, jak se někdy stává. Rychlost přehrávání - Zvolena 1 snímek za vteřinu. Může se zdát příliš nízká, ale vzhledem k množství operací, které animace zpracovává je nutná. S vyšší rychlostí by se celá simulace přerušení stala zbytečnou, neboť by byla naprosto nepřehledná a komentáře nečitelné.

4.4.2.1 Vytvoření grafických prvků animace V této animaci je vytvoření grafiky velice snadné, po importu obrázku procesoru, jsou k němu jen dokresleny pomocí nástroje čára linky, jež představují signály, po nichž jde přerušení. Pomocí nástroje text je vytvořen popis jednotlivých zařízení, které jsou převedena na symboly tlačítka sloužícího k označení přerušení. Nakreslení prvků, jako řadič přerušení atd. je zajištěno pomocí nástroje pravoúhelník a přidaného textu. Pomocí nástroje text jsou také vytvořeny popisky a komentáře pro jednotlivé snímky. To všechno je nakresleno ve třech vrstvách pro popis zařízení, linek a zbylých prvků, jež tvoří kompletní grafickou část animace (viz. Obr. 5).

Obrázek 5: Výsledná grafická podoba animace

30 Animace 4.4.2.2 ActionScript v animaci ActionScript u symbolů:

Tlačítko 8. zařízení (reálný čas) on (press) { _root.radicpre.prerus = 8; barva = new Color(_root.paralel1); barva.setRGB(0x00FF00); _root.maskovattext._visible = true; _root.maskovatano._visible = true; _root.maskovatne._visible = true; } Po kliknutí na symbol označující zařízení pro přerušení, tomto případě reálného času, se zařízení obarví do příslušné a zobrazí se dotaz, jestli se má přerušení makovat nebo ne. Takovýto skript je připojen ke všem zařízením pro přerušení, pouze s obměnou v podobě jiné barvy. ActionScript u snímků: if (_root.preruseni1 == 1) { barva = new Color(_root.intr); barva.setRGB(0xFF0000); _root.intr._visible = true; _root.preruseni = true; } else { if (_root.preruseni2 == 2) { barva = new Color(_root.intr); barva.setRGB(0x0000FF); _root.intr._visible = true; _root.preruseni = true; } else { if (_root.preruseni9 == 9) { barva = new Color(_root.intr); barva.setRGB(0x00FF00); _root.intr._visible = true; _root.iointr._visible = false; _root.preruseni = true; } else {

31

Pouze část skriptu, jež je připojena na klíčových snímcích. Celkem tento skript obsluhuje všech 15 zařízení pro přerušení, jak maskovaných tak nemaskovaných. Jelikož přerušení je prováděno na základě hierarchie důležitosti každého přerušení, na každém klíčovém snímku se prochází postupně od nejdůležitější po nejméně důležité přerušení, a v případě výskytu daného přerušení je obslouženo. Tedy je proveden blok kódu za podmínkou. V tomto konkrétním kousku kódu se obarví první signál přerušení intr (nastaví se mu stejná barva jako při označování samotného zařízení). Tento signál je poté zobrazen a je nastaveno preruseni na true, což je proměnná, jež určuje, že už probíhá přerušení (v souvislosti s ostatními zařízeními). Takovýto skript se opakuje na každém snímku, pouze se mění blok kódu v podmínce (mění se signál, který je zobrazován a nebo viditelnost některých prvků). ActionScript u tlačítek: Tlačítko play a stop (viz. kapitola 4.1.2.2).

32 Diskuze a závěr

5 Diskuze a závěr Všechny zpracované animace jsou plně funkční a převádějí do podoby simulace skutečné problémy. Během jejich vytváření nenastali žádné vážnější komplikace kromě snad nemožnosti zrcadlení textu. Tato možnost by se u animace laserové tiskárny poměrně hodila Další menší komplikací, byla již zmíněná potřeba tuto animaci nakreslit tak, aby působila, že je v 3D prostředí. I s tímto problémem si Flash pomocí svých nástrojů poradil, takže v nevyhnutelném případě se dá použít i tato možnost, i když s výslednými objekty se poté nedá moc dobře pohybovat (v rámci například otáčení objektu kolem své osy apod.). Zpracování ostatních animací proběhlo již bez větších problémů. Ať už se jednalo o grafické prvky nebo zajištění interaktivity prvků pomocí ActionScriptu. Řešení interaktivity pomocí skriptů lze samozřejmě navrhnout i jiným způsobem, ale vzhledem k tomu, že výsledné řešení je přehledné a hlavně plně funkční, si myslím, že mnou navržené je dobré. Veškeré animace jsou opatřeny přehledným a uživatelsky příjemným ovládáním a u těch, u nichž to bylo vhodné a žádoucí je přidán i komentář, popisující dění na obrazovce. Práce ve Flashi tedy byla příjemná a poměrně intuitivní. Dá se s ním poměrně velice rychle sžít, i v případě, že jste začátečník. Vzhledem k tomu, že tedy vývoj animací ve Flashi proběhl bez větších problémů a byl i z pohledu tvůrce příjemný, byl jsem s jeho výběrem naprosto spokojený. Stal se tedy pro mě jasnou volbou při tvorbě podobných projektů. I přes použití starší verze (Flash MX 2004), jsem díky této práci získal nové znalosti a zkušenosti, které se budou jistě hodit i při práci na komerčních projektech.

33 Literatura

6 Literatura DEHAAN, J. Macromedia Flash MX 2004 – oficiální výukový kurz 1. vyd., Softpress, 2004. 544 s. ISBN 80-86497-64-X. Morkes, D. Interval.cz: Java Applet krok za krokem [online]. 27.9.2002 [cit. 20.4.2009] Seriál ve formě HTML dokumentu. URL: http://interval.cz/clanky/java-applet-krok-zakrokem. FRANKLIN, D. Macromedia Flash MX kompletní průvodce 1.vyd. Brno: Computer Press a.s. 2003. 846 s. ISBN 80-7226-831-7 NEZNÁMÝ AUTOR. Wikipedie: Otevřená encyklopedie [on-line]. 3. 4. 2009 [cit. 20. 4. 2009] Encyklopedie ve formátu HTML dokumentu. URL: http://cs.wikipedia.org/wiki/JavaScript. KOLOFÍK, A. Využití jazyků SVG a JavaScript pro tvorbu výukových simulací. Diplomová práce. Brno: MZLU Brno, 2005. SEDLÁČEK, V. Tvorba interaktivních Flash animací s využitím XML. Diplomová práce. Brno: MZLU Brno, 2008. SUN MICROSYSTEMS, I. Applets. [online]. 2008. URL: http://java.sun.com/applets/. ŠKULTÉTY, R. JavaScript: programujeme internetové aplikace. 2. vyd. Brno: Computer Press a.s. 2004. 224 s. ISBN 80-251-0144-4.

34

Přílohy

35 Zhotovené animace

A Zhotovené animace 4 animace na přiloženém CD: • Animace pipelining – název pipelining, formát .swf (flash film) a .html (webová stránka) • Animace laserová tiskárna – název lasertisk, formát .swf (flash film) a .html (webová stránka) • Animace token ring – název tokenring, formát .swf (flash film) a .html (webová stránka) • Animace irq – požadavek přerušení – název irq, formát .swf (flash film) a .html (webová stránka)

Ovladatelné animace pro podporu výuky problematiky výpočetní techniky

Recommend Documents