Multimediální vzdělávací objekt

Mendelova univerzita v Brně Provozně ekonomická fakulta

Multimediální vzdělávací objekt Bakalářská práce

Vedoucí práce: Ing. Naděžda Chalupová, Ph.D.

Brno 2012

Michal Gajdošík

Tímto bych rád poděkoval Ing. Naděždě Chalupové, Ph.D. za cenné rady, připomínky a konzultace. Dále děkuji své rodině a přítelkyni za podporu při psaní této práce i v průběhu celého studia.

Tímto prohlašuji, že jsem tuto práci vypracoval samostatně za pomocí literatury uvedené v seznamu. V Brně dne 2. ledna 2012

_________________

Abstract Gajdošík, M. Multimedia learning object. Bachelor thesis. Brno, 2012. This thesis deals with problematics of designing and implementation of multimedia interactive objects. This thesis includes analysis of actual conditions in a sphere of using multimedia objects to support educational processes. Output of this thesis is multimedia object, designed for the educational purposes of subject Algorithms, which is taught at Mendel university in Brno. As main tool for implementation of object was used Adobe Flash Professional CS5. Keywords ActionScript, Algorithms, Flash, Movie Clip, interactive, multimedia learning object, Wink

Abstrakt Gajdošík, M. Multimediální vzdělávací objekt. Bakalářská práce. Brno, 2012. Tato práce se zabývá problematikou návrhu a tvorby multimediálních interaktivních objektů. V práci je provedena analýza aktuálního stavu v oblasti používání multimediálních objektů pro podporu výuky. Výstupem práce je multimediální objekt určený pro předmět Algoritmizace, jenž se vyučuje na Mendelově univerzitě v Brně. Jako hlavní nástroj pro tvorbu objektu byl zvolen Adobe Flash Professional CS5. Klíčová slova ActionScript, Algoritmizace, Flash, Movie Clip, interaktivní, multimediální vzdělávací objekt, Wink

Úvod a cíl práce

6

Obsah 1

2

Úvod a cíl práce 1.1

Úvod .......................................................................................................... 8

1.2

Cíl práce .................................................................................................... 8

Návrh multimediálních interaktivních objektů 2.1

3

8

9

Komponenty multimediálních objektů .....................................................9

2.1.1

Animace .............................................................................................9

2.1.2

Bitmapová grafika ..............................................................................9

2.1.3

Vektorová grafika............................................................................. 10

2.1.4

Text .................................................................................................. 10

2.1.5

Video ................................................................................................ 11

2.1.6

Zvuk ................................................................................................. 11

Tvorba multimediálních interaktivních objektů

13

3.1

Adobe Authorware ................................................................................... 13

3.2

Adobe Captivate ....................................................................................... 13

3.3

Adobe Director ........................................................................................ 14

3.4

Adobe Flash ............................................................................................. 15

3.4.1

Kreslení ............................................................................................ 16

3.4.2

Text .................................................................................................. 16

3.4.3

Symboly............................................................................................ 17

3.4.4

Knihovna .......................................................................................... 19

3.4.5

Časová osa ........................................................................................ 19

3.4.6

Animace .......................................................................................... 20

3.4.7

ActionScript ..................................................................................... 21

3.4.8

Publikování ......................................................................................22

3.5

EduBase ...................................................................................................23

3.6

Microsoft PowerPoint ..............................................................................24

3.7

NeoBook .................................................................................................. 25

3.8

SMART Notebook ....................................................................................26

Úvod a cíl práce

3.9 4

7

Wink ........................................................................................................ 27

Současný stav

29

4.1

Animace jednoduchých algoritmů.......................................................... 29

4.2

Sort Animation........................................................................................ 30

4.3

Programování a algoritmizace ................................................................. 31

4.4

NetCalc .................................................................................................... 32

4.5

Rovinné řezy mnohostěnů ...................................................................... 33

4.6

Fotosyntéza ............................................................................................. 34

4.7

Abeceda pivotmana................................................................................. 35

4.8

Kontis ...................................................................................................... 36

4.9

Edu-Learning ...........................................................................................37

4.10 ZAV.......................................................................................................... 38 5

Vlastní práce

40

5.1

Návrh objektu ......................................................................................... 40

5.2

Použité nástroje ...................................................................................... 40

5.3

Metodika tvorby objektu.......................................................................... 41

5.3.1

Adobe Flash Professional CS5 ......................................................... 41

5.3.2

Wink ................................................................................................ 47

5.3.3

PSPad .............................................................................................. 49

5.3.4

PuTTy .............................................................................................. 50

5.4

Výsledný stav ........................................................................................... 51

6

Závěr

53

7

Literatura

54

A

Struktura objektu

57

B

Ukázky objektu

58

Úvod a cíl práce

8

1 Úvod a cíl práce 1.1

Úvod

Multimediální výuka se postupně stává stále častějším standardem. Mnoho vzdělávacích institucí disponuje potřebnou technikou k její interpretaci. Může se jednat o klasické projektory, které na plátno promítají komentovanou prezentaci, postup řešeného problému apod. Jako další zástupce v oblasti demonstrace výukových prvků lze zařadit interaktivní tabule, které umožňují pracovat s výukovým materiálem interaktivně přímo na tabuli. Pro tyto interaktivní tabule existuje na internetu soubor volně dostupných, již zpracovaných multimediálních objektů. V neposlední řadě zde patří počítačové stanice. Nemusí se však jednat pouze o vzdělávací instituce. Využití multimediální výuky nachází své uplatnění v komerčním sektoru v podobě školení, seminářů a kurzů. Z výše uvedených poznatků je zřejmé, že oblast multimediální výuky bude neustále rozvíjena a vylepšována. V práci bude probírána problematika návrhu a tvorby multimediálních interaktivních objektů. Dále bude analyzován současný stav již existujících objektů, určených pro vzdělávání. Poslední kapitola bude věnována praktické části této práce.

1.2 Cíl práce Cílem práce je navrhnout a realizovat multimediální interaktivní objekt pro účely konkrétní vzdělávací instituce. Objekt bude určen pro předmět Algoritmizace, který je vyučován na Mendelově univerzitě v Brně.

Návrh multimediálních interaktivních objektů

9

2 Návrh multimediálních interaktivních objektů Při prvotním návrhu multimediálního objektu je nejosvědčenější řešení, jako u mnoha jiných projektů, použití tužky a papíru. Pro základní určení rozložení objektu, obsahu, umístění interaktivních prvků apod. je to nástroj neocenitelný. Při návrhu by se měl brát ohled na to, pro jakou skupinu studujících bude objekt určen, například pro studenty ze základních, středních a vysokých škol, pro zaměstnance firmy apod. a tomu přizpůsobit uživatelské rozhraní objektu. Poté je na řadě sběr či zpracování materiálů, které budou použity. Dále je potřeba určit, které z následujících komponent budou obsažené v objektu. Po zvolení jednotlivých komponent je snadnější výběr vhodného nástroje či nástrojů pro jeho vytvoření.

2.1 Komponenty multimediálních objektů 2.1.1

Animace

Jako animaci si většina z nás představí nějaký pohyb. Stejně tak se za animaci může považovat plynulá změna barvy, průhlednosti, velikosti nebo tvaru nějakého objektu. Animace je poskládána z jednotlivých snímků, které se zobrazují jeden po druhém a vytváří tak dojem plynulého pohybu. Podobně je tomu při promítání filmu, kde se využívá neschopnosti lidského oka, rozpoznat jednotlivá okénka filmu (Fotr, 2002). Mezi nejpoužívanější formáty animace patří GIF a SWF. 2.1.2

Bitmapová grafika

Bitmapa neboli rastr se skládá z jednotlivých barevných bodů. Počet bodů udává jeho výslednou kvalitu a počet barev, které mohou tyto body nabývat, tzv. barevnou hloubku. U tiskáren se kvalita neudává celkovým počtem bodů, ale počtem bodů, které jsou schopny vytisknout na jednotku vzdálenosti - tzv. rozlišením. Jednotkou vzdálenosti je myšlen jeden palec - přibližně 2,54 cm a jednotka rozlišení se jmenuje dpi - (dot per inch - bodů na palec). Údaj, že tiskárna má rozlišení 1200 dpi, znamená to, že na jeden palec obrázku vytiskne 1200 bodů. Pokud se rastrový obrázek zvětší, zvětší se tím zároveň i body a kvalita obrázku se zhorší - bude zřejmá bodová struktura obrázku. V opačném případě, kdy obrázek zmenšíme, dojde k vypuštění některých bodů a kvalita obrázku opět klesne (Slowík, 2006). Nejznámější bitmapové formáty jsou následující: BMP, GIF, JPEG, PNG, TIFF.


2.1.3

10

Vektorová grafika

Vektorový obrázek vypadá jinak než rastrový obrázek. Vytváříme ho totiž z jednotlivých objektů (čar, obdélníků, elips, textů atd.), které můžeme libovolně tvarovat a nastavovat jejich vlastnosti. I když se zdá, že taková kresba nemá příliš velké uplatnění, opak je pravdou - vektorový program využije uživatel začátečník lépe než rastrový, protože za jeho pomoci lze lehce vytvořit efektní vizitku, leták, obal na CD apod. - zde si vystačíme s několika objekty a textem. Součástí vektorové kresby může být i rastrový obrázek (Slowík, 2006). Přidáním rastrového obrázku do vektorové kresby ale přijdeme o zásadní výhodu vektorových kreseb - při zvetšení nebo zmenšení nedochází ke ztrátě kvality, na rozdíl od rastrových kreseb. Nejznámější formáty vektorové grafiky jsou následující: PDF, CDR, SVG, SWF.

Obr. 1

Srovnání bitmapové a vektorové grafiky (Slowík, 2006).

2.1.4

Text

Text je možné zobrazit pomocí znakové sady, např. Times New Roman nebo pomocí grafiky. Text neboli písmo může být proporcionální a neproporcionální. Neproporcionální písmo má každé písmeno stejně široké, ať se jedná o jakékoli písmeno. Toto písmo používaly psací stroje nebo starší maticové tiskárny (Pecinovský, 2004). Proporcionální písmo přizpůsobuje šířku písmen každému znaku, proto je například písmeno m širší než písmeno i. Toto písmo se zcela běžně používá jak pro tisk knih a periodik, tak pro výstup dat z počítačů (Pecinovský, 2004).


Obr. 2

Srovnání proporcionálního a neproporcionálního písma (Pecinovský, 2004).

2.1.5

Video

11

Pomocí zařízení, které umožňuje záznam videa, lze např. zachytit přednášku ve škole, videotutoriál k určitému tématu apod. Mezi nejpoužívanější video formáty patří následující. AVI Audio Video Interleaved - nejběžnější formát používaný pro záznam videa. Pod příponou AVI se však skrývá několik různých formátů, které nejsou navzájem kompatibilní a k jejich přehrání je potřeba kodek - např. DivX, Xvid apod. Nekomprimovaný záznam AVI zabírá na disku velmi mnoho místa. Pět minut v nejvyšší kvalitě zaujímá asi 1 GB místa na disku (Pecinovský, 2006). MPEG Moving Picture Expert Group - formát, který je komprimovaný a jeden z nejpoužívanějších. Formát MPEG2 se používá pro ukládání dat na DVD. Pět minut záznamu má velikost asi 200 MB (Pecinovský, 2006). WMV Windows Media Video - formát, který vyvinula firma Microsoft a používá jej jako základní formát pro svůj střihový program Windows Movie Maker. Je vysoce komprimovaný, i velký objem dat zabere na disku poměrně málo místa. Pět minut záznamu zabere na disku asi 100MB (Pecinovský, 2006). 2.1.6

Zvuk

Se zvukem v jeho nejrůznějších podobách se lze setkat každodenně v běžném životě. Zvuk může být součástí multimediálních objektů, např. ve formě komentáře, hudby v pozadí, při kliknutí na tlačítko apod. V následujících řádcích budou představeny nejznámější zvukové formáty, používané ve výpočetní technice.


12

MP3 MPEG Layer 3 je komprimovaný formát, který se pravděpodobně v současnosti používá nejčastěji. Podle zvolené komprese mají tři minuty záznamu velikost asi 4 MB (Pecinovský, 2006). WAV Waveform audio file format - ukládá data bez komprese a tedy bez jakýchkoli ztrát. Tomu také odpovídá velikost záznamu. Tři minuty záznamu zaujímají asi 40 MB (Pecinovský, 2006). WMA Windows Media Audio - jedná se o vysoce komprimovaný formát, který vyvinula firma Microsoft. Lze se s ním setkat, pokud se použije program Windows Media Player pro uložení zvukových dat ze zvukových kompaktních disků (Pecinovský, 2006).


13

3 Tvorba multimediálních interaktivních objektů V následující kapitole budou popsány některé nástroje, jenž umožňují tvorbu multimediálních interaktivních objektů.

3.1 Adobe Authorware Authorware, stejně jako Flash, byla technologie původně vyvinuta jinou společnosti a poté koupena firmou Macromedia (nyní Adobe) a byla přidána do produktové nabídky. Firma Macromedia významně rozvinula funkce a možnosti Authorware. Authorware byl vytvořen především pro použití v oblasti elearningu. Lze jej použít pro přípravu, testování a monitorování znalosti studentů. Authorware lze považovat za konkurenta k programu Flash, který pochází od stejné firmy (Perkins, 2010). Tím ale možnosti nekončí, Authorware není zaměřen pouze na vzdělávací objekty, ale i např. pro tvorbu interaktivních katalogů apod. Pro neomezené používání Authorware je nutno produkt zakoupit. Lze si však stáhnout trial verzi programu Authorware, která je časově omezena.

Obr. 3

Prostředí Adobe Authorware (BrotherSoft, 2010)

3.2 Adobe Captivate Pomocí Adobe Captivate lze vytvořit jakýkoli vzdělávací objekt pomocí zachytávání dění na obrazovce. Do takto zachycených snímků lze přidat tlačítka pro


14

přechod na určitý snímek, textové okno s informacemi, textové okno, kam může uživatel psát - využitelné při tvorbě testů. Dále se můžou přidat také animace, zvukové efekty apod. Projekty v Captivate lze publikovat ve formátu SWF, EXE, DOC a PDF (Siegel, 2010). Možnosti Adobe Captivate jsou na velmi vysoké úrovni. Rozhraní je podobné jako u Adobe Flash. Práci s tímto nástrojem lze vyzkoušet pomocí trial verze programu, které Adobe poskytuje. Pro časově neomezenou verzi je však potřebné program zakoupit.

Obr. 4

Prostředí Adobe Captivate

3.3 Adobe Director Původem tzv. vlajková loď firmy Macromedia, které představovala multimediální centrum tvůrčího řešení (Perkins, 2010). Adobe Director je profesionální nástroj pro vývoj a tvorbu interaktivních multimediálních objektů, prezentací apod. Díky prostředí, které je přizpůsobitelné a použitelné je umožněno vývojářům vytvářet výkonné hry, e-learningové kurzy, simulace apod. Od verze 11.5 Director podporuje 3D grafiku, vylepšenou práci se zvukem, engine NVIDIA PhysX, který byl například použit ve známé české hře simulující mafiánské prostředí a další užitečné funkce. Do Directoru lze importovat například 3D soubory z programu Google SketchUp (Polzer, 2008; Němec, 2009). Google SketchUp je 3D modelovací program, který se využívá pro tvorbu 3D modelů a má velmi intuitivní ovládání. Ve své základní verzi je poskytován zdarma. Adobe Director je však poskytován pouze jako shareware, k dispozici je s časovým omezením, tzv. trial verze.


Obr. 5 2009)

15

Prostředí Adobe Director s importovaným 3D modelem z Google SketchUp (Němec,

3.4 Adobe Flash Adobe Flash nabízí komplexní autorizační prostředí pro tvorbu počítačových animací a interaktivních webových stránek. Flash je znám jako široce rozšířená technologie používaná především ke tvorbě vizuálně atraktivních aplikací, které mohou disponovat animacemi, grafikou, zvukem a videosekvencemi. Obsah lze vytvářet přímo ve Flashi nebo jej lze importovat z jiných produktů firmy Adobe. Flash disponuje skriptovacím jazykem ActionScript 2.0, respektive ActionScript 3.0 (ADOBE CREATIVE TEAM, 2010). Flash umožňuje pracovat s vektorovou grafikou, což umožňuje bezztrátovou kvalitu při zmenšení nebo zvětšení grafických prvků. Flash lze vyzkoušet pomocí časově omezené trial verze.


Obr. 6

16

Prostředí Adobe Flash

V následujících podkapitolách budou popsány základní funkce programu Flash. 3.4.1

Kreslení

Způsob tvorby grafických objektů ve Flashi je zaměřen na vektorovou grafiku. Pro tvorbu je zde hned několik rozdílných kreslících nástrojů. Každý takto vytvořený objekt je zpravidla tvořen obrysem, ohraničením a výplní. V případě změny tvaru objektu se provede pouze změna obrysu, výplň se generuje automaticky. Základní tvary, jako je obdélník, čtverec, kruh a ovál je možno vytvořit pomocí základních kreslících nástrojů. Kreslení složitějších tvarů se provádí spojováním, rozdělováním jednoduchých tvarů nebo přímo kreslením a editací křivek (Fotr, 2002).

Obr. 7

Nástroje pro kreslení a úpravu.

3.4.2

Text

Text může být ve Flashi reprezentován jako:  statický,


17

 dynamický,  vstupní. Statický text Statický text je klasický text, který se ve zkompilované animaci již nemění, tedy zůstává stejný. Používá se například pro psaní teoretických bloků apod. Dynamický text Dynamický text má oproti statickému textu výhodu v tom, že jej lze za běhu animace měnit, pomocí dříve napsaných akcí v jazyce ActionScript. Používá se například jako počítadlo, ve hrách jako ukazatel rychlosti apod. Vstupní text Vstupní text se používá zpravidla při takových činnostech, kdy potřebujeme od uživatele textovou odezvu, například odpověď na testovou otázku.

Obr. 8

Nástroje pro práci s textem

3.4.3

Symboly

Symboly lze vytvořit z jakéhokoli prvku programu Flash. Flash rozlišuje tři typy symbolů, a to:


18

 Movie Clip,  Button,  Graphic. Movie Clip Symboly Movie Clip neboli filmový klip jsou jedny z nejčastěji používaných, nejvýkonnějších a nejflexibilnějších symbolů. S jejich pomocí lze vytvářet rozličné animace. Na instance Movie Clipu je možno aplikovat pro vylepšení vzhledu nejrůznější filtry, nastavení barev a režimy prolnutí. Instance Movie Clipu obsahují svou vlastní časovou osu, na kterou se lze dostat po dvojkliku na určitý Movie Clip. To umožňuje vytvářet například animace v animaci, tzv. vnořené animace. Movie Clip lze ovládat pomoci ActionScriptu, tudíž mohou reagovat na akce uživatele nebo na naprogramované akce vývojáře (ADOBE CREATIVE TEAM, 2010). Button Symboly tlačítek zajišťují interaktivitu, potřebnou například pro navigaci v hlavní nabídce nebo při přechodu na další stránku. Obsahují čtyři jedinečné klíčové snímky, které popisují, co se stane při interakci s myší (ADOBE CREATIVE TEAM, 2010). Klíčové snímky jsou tu zastoupeny jako Up, Over, Down a Hit. Up představuje, jaká je základní podoba tlačítka. Over určuje, co se stane s tlačítkem, když je ukazatel myši na tlačítku. Down definuje podobu tlačítka po stisknutí tlačítka myši. Pomocí Hit se dá určit rozmezí, ve kterém je tlačítko aktivní. Například jde určit rozmezí stisknutí jen v pravém horním rohu tlačítka. Předtím je ale potřeba tlačítku nadefinovat akci pomocí ActionScript, jinak bude klikat tzv. naprázdno.

Obr. 9

Klíčové snímky tlačítka

Graphic Grafické symboly jsou nejzákladnějším typem symbolů. Můžou se sice použít pro animace, ale ve většině případů dostávají přednost Movie Clipy. Nelze na ně totiž aplikovat žádné filtry a jako největší nevýhoda - nepodporují ActionScript (ADOBE CREATIVE TEAM, 2010).


3.4.4

19

Knihovna

Knihovna je ve Flashi velmi užitečná pomůcka. V knihovně jsou obsaženy všechny symboly, které byly vytvořeny. Symboly se můžou z knihovny přetahovat přímo na pracovní plochu. V knihovně lze také vytvořit nový symbol. Stávající symboly lze přejmenovat, přetypovat (například z grafického symbolu na tlačítko) a odstranit. Knihovna podporuje i vytváření adresářových struktur pro lepší přehlednost. V knihovně se můžou vyhledávat symboly. V přehledu knihovny je vždy název symbolu, počet použití v projektu, datum a čas poslední modifikace a typ symbolu. Po kliknutí na symbol se zobrazí jeho podoba.

Obr. 10

Knihovna

3.4.5

Časová osa

Časová osa představuje ve Flashi organizátor akcí, které se vykonávají v určitém sledu. Pomocí časové osy se může určit, po jak dlouhou dobu, respektive po jaký počet snímků a kde přesně bude probíhat animace. Nejen animace, ale i grafické soubory, text, zvukové soubory. Časová osa podporuje rozdělení do vrstev, které umožňují přehlednější manipulaci. Pro každou vrstvu je určena jedna časová osa. Vrstvy podporují skrytí nebo zviditelnění, čehož lze využit při rozsáhlejších projektech. Umožňují taktéž uzamknutí nebo zpřístupnění vrstvy, což znamená, že když je vrstva uzamknutá, není možné do ní zasahovat a jakkoli ji měnit. Lze také zvolit barvu, jakou bude mít daná vrstva. Vrstvy lze pojmenovat a také slučovat do adresářů.


20

Pod časovou osou je indikátor aktuálního snímku, dále rychlost, jakou se bude animace přehrávat - ve formě počtu snímků za sekundu a nakonec uplynulý čas v sekundách.

Obr. 11

Časová osa a jednotlivé vrstvy

3.4.6

Animace

Ve Flashi lze samozřejmě vytvářet animace postaru, tedy například jeden snímek - jeden grafický prvek, který se postupně s každým snímkem mění. To by ale bylo zbytečně náročné, proto Flash umožňuje tři základní typy animací neboli přechodů. Classic Tween Classic Tween neboli běžný přechod je určen pro základní přechod mezi stejnou instancí. Například přesunutí jedné instance o určitou délku do určitého směru a otočení. Musí se jednat ale o instanci některého ze symbolů uvedených výše. Motion Tween Motion tween umožňuje animaci po předem určené dráze nebo křivce. Je to hojně používaná metoda animací ve Flashi. Jako u Classic Tween, je potřeba aby se jednalo o instanci některého ze symbolů (Prokeš, 2000).


Obr. 12

21

Ukázka Motion Tween (Grover, 2011)

Shape Tween Shape Tween neboli tvarový přechod. Pomocí Shape Tween lze vytvořit například animaci přechodu jednoho grafického objektu do druhého. Pro Shape Tween nelze použít instance symbolů, pouze čistou grafiku, tedy nepřevedené grafické prvky (Grover, 2011).

Obr. 13

Ukázka Shape Tween (Grover, 2011)

3.4.7

ActionScript

ActionScript je programovací jazyk, jenž vychází z objektově orientovaného programovacího jazyka JavaScript (Fotr, 2002). Nejpoužívanější verze ActionScriptu jsou 2.0 a 3.0. ActionScript 2.0 je lehčí na naučení, postačuje na většinu projektů. ActionScript 3.0 je již vyspělejší jazyk, je vhodnější pro projekty, kde je potřeba co nejvíce využít možnosti programovacího jazyka. Pomocí ActionScriptu lze například přiřadit akci tlačítkům, Movie Clipům, upravovat hodnotu proměnných, načítat externí soubory apod.


Obr. 14

Prostředí ActionScriptu

3.4.8

Publikování

22

Poté, co je Flash projekt hotový, je potřeba ho publikovat do finální podoby. Nejvíce rozšířený formát pro publikování je SWF. SWF může být používán na internetových stránkách, což z něj činí ideální formát pro multimediální obsah (Finkelstein & Leete, 2007). Publikovat lze i do dalších formátů, a to HTML, GIF, JPG, PNG, EXE a APP. Při publikování do EXE souboru není potřeba k přehrání nainstalovaný Flash přehrávač, ale na druhou stranu se rapidně zvýší velikost výsledného souboru. Při publikování lze nastavit kvalita obrázků, kvalita zvukové stopy a další parametry.


Obr. 15

23

Nastavení při publikování.

3.5 EduBase Program EduBase je produkt od české firmy Dosli. Je primárně zaměřen pro potřeby učitelů. Umožňuje přípravu textů, poznámek, importování a exportování výukových objektů. Hotové výukové objekty lze sdílet mezi uživateli či školami. Při sestavování výukových materiálu lze zvolit typ - test, písemka nebo učebnice. Pro sestavení lze též využít již připravených materiálů, které firma Dosli nabízí volně ke stažení. Výukové materiály lze tisknout, publikovat na internetu, jenž umožní rozšíření EduBase Web. Poté je možné zkoušení přes internet, výsledky se ukládají do centrální databáze. Výukové objekty lze použít i na interaktivní tabuli, na níž lze využít interaktivní funkce. S výše uvedenými funkcemi je použitelný nejen pro učitele, ale i pro široké spektrum oborů, kde je potřeba interaktivní výuky, přednášky nebo školení. Program je pro použití zpoplatněn, lze si však vyzkoušet jeho časově omezenou trial verzi.


Obr. 16

24

Schéma používání softwaru EduBase (PPC, 2010)

3.6 Microsoft PowerPoint Prezentační programy, mezi které patří i PowerPoint, mají mezi ostatními programy ze sady Microsoft Office stále pevné místo. PowerPoint je program, v němž se vytvářejí prezentace, tedy vlastně posloupnosti snímků s textem a s objekty (obrázky, grafy, tabulky apod.). Snímky slouží jako osnova při popisu určitého tématu, což zpravidla bývá obsah jedné přednášky, předvedení výrobku nebo služby. Prezentace se používají buď ve formě promítání na počítači, které je doprovázeno slovním výkladem řečníka, nebo se může jednat o promítání, které je v nekonečné smyčce například v obchodě. Prezentace lze vytisknout, nebo publikovat na internet, případně lze distribuovat ve formátu PDF (Bříza, 2007).


Obr. 17

25

Prostředí Microsoft PowerPoint

3.7 NeoBook Pomocí programu NeoBook mohou i nezkušení uživatelé rychle kombinovat text, obrázky, zvuky, video, animace ve Flashi, HTML obsah, internetové odkazy a další prvky pro vytvoření multimediálních objektů. Neobook je velmi snadno použitelný, lehce lze nastavit příkazová tlačítka, textová pole, zaškrtávací boxy, seznamy a mnoho dalších interaktivních prvků. Dále též vytvoření rozhraní, které umožní přechod na další stránku, zadávání odpovědí v případě testů, přehrávání multimediálních souborů apod. K dispozici je vestavěný skriptovací jazyk a mnoho různých pluginů, které dovedou rozšířit možnosti NeoBooku. Projekty v NeoBooku jsou kompilovány jako EXE nebo SCR (spořič obrazovky) soubor (NeoSoft, 2011). Aplikace je šířena jako shareware, která má zabudované časové (trial) omezení, na 30 dní.


Obr. 18

26

Prostředí NeoBook

3.8 SMART Notebook SMART Notebook je zaměřen pro potřeby interaktivní výuky ve školství. Velmi snadno v něm lze přichystat program výuky. SMART Notebook nabízí širokou nabídku zdrojových obrázků, jako jsou například grafy, schémata, mapy apod. Též podporuje interaktivní animované sekvence (AV MEDIA, 2010). SMART Notebook je určen výhradně pro promítání na interaktivní tabuli SMART Board. Ve spojení s tabulí SMART Board vzniká velmi zajímavá možnost výuky. Tuto možnost již několik škol v České republice využívá. Obsah objektů lze prohlížet i pomocí SMART Notebook Express Software, který je poskytován zdarma. Samotný SMART Notebook je šířen jako shareware, pro vyzkoušení lze stáhnout jeho časově omezenou verzi programu. Objekty ale učitel nemusí vytvářet sám, existuje například vcelku rozsáhlá databáze již existujících objektů přístupná na internetové adrese http://www.veskole.cz.


Obr. 19

Prostředí SMART Notebook (SMART Technologies, 2010)

Obr. 20

Interaktivní tabule SMART Board (SMART Technologies, 2010)

27

3.9 Wink Wink je program, který je primárně určen k vytváření tutoriálů a prezentací pro vysvětlení, jak používat software. Pomocí Winku lze pořizovat screenshoty obrazovky, přidat vysvětlující boxy, tlačítka pro přechod na určitý snímek atd. a generovat efektivní tutoriály pro uživatele. Je odhadováno, že AdobeFlash Player je nainstalován na více než 90% počítačů. To je pro Wink, který má výstupní soubor ve formátu SWF předpoklad pro využitelnost. Použitím Winku lze


28

vytvořit kvalitní návody, které bude možno prohlížet na počítačích připojených k internetu. Podobné aplikace jsou prodávány v řádech stovek až tisíců dolarů, zatímco Wink je zdarma s bezkonkurenčními vlastnostmi (Kumar, 2010). Wink také dokáže zaznamenat například zvukový komentář. Mezi jeho výstupní formáty patří EXE, HTML, PDF, PS, SWF. Wink dokáže zaznamenat dění na obrazovce pomocí následujících režimů:  kliknutí myši,  stisknutí klávesy na klávesnici,  zachytávání obrazovky, dokud je stlačeno tlačítko myši. Wink zvládá i kombinace těchto prvků. Lze též nastavit časové snímání obrazovky - například 60 snímků za minutu a oblast, která se bude zaznamenávat.

Obr. 21

Prostředí Wink

Současný stav

29

4 Současný stav V následující kapitole budou popsány některé již existující multimediální objekty.

4.1 Animace jednoduchých algoritmů Multimediální vzdělávací objekt vznikl na Vysoké škole báňské - Technická univerzita Ostrava za podpory grantu fondu rozvoje vysokých škol. Autorem je Tomáš Procházka. Objekt vizualizuje:  třídící algoritmy,  vyhledávací algoritmy,  abstraktní datové typy. Z třídících algoritmů jsou zde zastoupeny následující:  třídění přímým vkládáním, třídění přímým výběrem,  Bubble sort,  Shaker sort,  Quick sort,  Shell sort,  Radix sort. Z vyhledávacích algoritmů je znázorněno:  sekvenční vyhledávání,  binární vyhledávání,  interpolační vyhledávání,  Hoarův algoritmus. Z abstraktních datových typů lze zvolit mezi:  frontou,  zásobníkem,  seznamem. U třídících a vyhledávacích algoritmů je součástí prezentace je ovládání rychlosti animace, zastavení, spuštění a krokování animace. V pravé části objektu se nachází zdrojový kód, který v závislosti a kroku animace zvýrazňuje tu část, která se aktuálně provádí. Objekt je přehledně zpracován a je využitelný jak pro samostudium, tak při lektorem komentované ukázce například při přednášce.

Současný stav

30

Animace jednoduchých algoritmů jsou přístupné na internetové adrese http://www.inspired.sk/files/flashfilms/algoritmy/algoritmy.swf.

Obr. 22

Ukázka objektu Animace jednoduchých algoritmů

4.2 Sort Animation Následující objekt, stejně jako předešlý, je zaměřen na třídící algoritmy. Demonstruje třídění:  přímým vkládáním,  Bubble sort,  Quick sort,  Select sort. Lze nastavit rychlost animace a počet tříděných prvků. V levé části objektu se nachází okno se zdrojovým kódem algoritmu, který v závislosti na kroku animace vyznačuje jednotlivé části kódu. V hlavní části objektu se zobrazuje průběžná hodnota proměnných a aktuální tříděná hodnota.

Současný stav

31

Objekt je zpracován na dobré a pochopitelné úrovni. Využití by jistě našel při výuce programování. Objekt je přístupný na internetové adrese http://www.solidware.com/sort/.

Obr. 23

Ukázka objektu Sort Animation

4.3 Programování a algoritmizace Na internetové adrese http://www.fi.muni.cz/~xpelanek/IB111/ jsou přístupné dva multimediální objekty určené pro podporu výuky předmětu programování a algoritmizace, vytvořené Mgr. Radkem Pelánkem, Ph.D. První objekt řeší případ vlka, kozy a zelí - klasická logická úloha s převozníkem. Objekt je tvořen animacemi doplněný zvukovým komentářem. V objektu se lze přesouvat po časové ose, animace lze zastavit. Druhý objekt řeší Hanojské věže a rekurzi. Tak jako u prvního objektu jsou zde názorné animace doplněné zvukovým komentářem. Hanojské věže jsou vyřešeny několika přístupy, například i pomocí Pascalova trojúhelníka. Oba objekty jsou vytvořeny ve stejném stylu. Postupy jsou dopodrobna vysvětleny a poutavě zpracovány.

Současný stav

Obr. 24

32

Ukázka objektu Hanojské věže a rekurze

4.4 NetCalc NetCalc je zajímavá interaktivní pomůcka od Kevina M. Gilla. Byla zveřejněna roku 2010. Objekt je zaměřen na vykreslování grafů funkcí. Je možné vykreslit až 10 funkcí. Vykreslené funkce jsou barevně odlišeny a pod grafem jsou vypsány pomocí legendy, která má stejné barevné odlišení jako jí patřící graf funkce. Při pohybu myší v okolí grafu se na pozici ukazatele myši zobrazují aktuální souřadnice. Zadané funkce objekt po vykreslení automaticky zderivuje a zintegruje. Výsledky se nachází v záložce Info. V záložce Options lze nastavit rozsah hodnot souřadnice grafu X a Y a další nastavení. Objekt je velmi zdařilý. Po grafické stránce převahuje šedá, bílá a černá. Grafický design je decentní a přehledný. Pro účely demonstrace vykreslení grafů je ideální. Jeho použití je možné jak ve školním prostředí, tak například i v pracovním, kdy je potřeba jeho funkcionality. Objekt je přístupný na internetové adrese http://www.netcalc.org/.

Současný stav

Obr. 25

33

Ukázka objektu NetCalc

4.5 Rovinné řezy mnohostěnů Autory výukového multimediálního kurzu rovinné řezy mnohostěnů jsou RNDr. Marta Francová, CSC. a RNDr. Milena Vaňurová, CSc. Kurz je rozdělen na čtyři části:  základní pojmy,  doporučení,  řešené úlohy,  zásobárna úloh. Základní pojmy zahrnují základní teoretický přehled o probírané látce. V sekci doporučení jsou uvedeny návody s poznámkami pro usnadnění konstrukce řezu. Část řešené úlohy je v kurzu stěžejní. Obsahuje osm řešených úloh na určení rovinných řezů jehlanů a hranolů. Úlohy jsou prezentovány pomocí interaktivní animace. Lze krokovat jednotlivé body konstrukce tělesa. Při kliknutí na narýsovat se narýsuje do tělesa rys, podle aktuálního kroku v konstrukci. V případě nejasností je připravena nápověda v podobě komentáře k řešení, který se dá zobrazit nebo skrýt. Některé z úloh jsou řešeny více způsoby. V poslední části, zásobárna úloh, je obsaženo 22 zadání i s řešením. Řešení již není interaktivní, je ale narýsované a kroky konstrukce jsou ve finální fázi. Kurz je vhodný doplněk při výuce geometrie, interaktivní postup řešení přináší lepší pochopení látky. Kurz je přístupný na internetové adrese http://is.muni.cz/elportal/estud/pedf/js09/mnohosteny/web/i ndex.html.

Současný stav

Obr. 26

34

Ukázka kurzu rovinné řezy mnohostěnů

4.6 Fotosyntéza Multimediální objekt fotosyntéza je obsáhlý přehled látky související s fotosyntézou. Autoři objektu jsou RNDr. Milada Teplá-Roštejnská, Ph.D. a Doc., RNDr. Helena Klímová, CSc. Jednotlivé sekce obsahují názorné animace související s danou látkou. Ty jsou zpracovány na vysoké úrovni jak z hlediska grafického, tak informačního. Animace lze pozastavit a krokovat. V dolní části se zobrazují průběžné informace o aktuálním dění. Součástí objektu je evaluace znalostí. Objekt je přístupný na internetové adrese http://www.teplamilada.wz.cz/materialy/Fotosynteza_2/Photos ynthesis.swf.

Současný stav

Obr. 27

35

Ukázka objektu Fotosyntéza

4.7 Abeceda pivotmana Abeceda pivotmana je multimediální učebnice basketbalu se zaměřením na hráčskou pozici pivotmana. Obsahuje bohatou metodiku činností pivotmana doplněnou o praktické příklady ze hry, jenž jsou reprezentovány animacemi. Vedle animací jsou přístupné i autentické videa. Učebnice je přístupná nejen v českém, ale i anglickém jazyce. Jedná se o užitečný výukový nástroj, vhodný zejména pro hráče a trenéry. Přístupný je na internetové adrese http://is.muni.cz/do/rect/el/estud/fsps/js11/pivotman/web/p ages/cinnost-pivotmana.html.

Současný stav

Obr. 28

36

Ukázka jednoho z mnoha objektů internetové učebnice Abeceda pivotmana

4.8 Kontis Kontis je česká firma, která se specializuje na výrobu multimediálních vzdělávacích objektů. Vzdělávací objekty Kontis rozděluje na následující:  hotové kurzy,  kurzy na klíč. Hotové kurzy Hotové kurzy jsou určené k prodeji pro veřejnost. Z nabídky je možné zakoupit například následující kurzy:  produkty Microsoft Office,  přípravné testy IT znalostí,  výuka angličtiny,  prezentační dovednosti,  školení řidičů referentů,  školení pro pracovníky call center.

Současný stav

37

Kurzy jsou multimediální, interaktivní, některé z nich obsahují i videozáznamy. Kurzy na klíč Kurzy na klíč jsou vyráběny na míru podle požadavků jednotlivých firem. Ve většině případů se jedná se o školící objekty pro zaměstnance. Mezi firmy, které využily možnosti realizace multimediálního školícího objekt na klíč, patří následující:  Česká národní banka,  Československá obchodní banka,  ČEZ, Makro,  McDonalds,  Poštovní spořitelna,  Staropramen,  T-Mobile. Vybrané objekty lze vyzkoušet na internetové adrese http://www.kontis.cz/produkty_kurzy_hotove.asp?menu=produkt y&submenu=kurzy&pos=3 v omezeném rozsahu.

Obr. 29

Ukázka multimediálního objektu - školení zaměstnanců pro firmu ČEZ

4.9 Edu-Learning Edu-Learning je nástroj pro výuku programů Microsoft Office Word, Excel a PowerPoint.

Současný stav

38

Po zapnutí aplikace je na výběr ze tří modulů výše uvedených programů. Po zvolení například modulu Word se spustí Microsoft Office Word a s ním v dolní části aplikace Edu-Learning. Ta je propojená s Wordem a výuka probíhá na předem daném textu, který uživatel upravuje podle instrukcí aplikace. V případě splnění úkolu se přejde na další. Součástí je rozsáhlá nápověda k obsluze aplikace a přesné vysvětlení daného úkolu. Edu-Learning je zpracován na velmi vysoké úrovni. Výuka jednotlivých úkolů přímo v prostředí probíraných programů je časově efektivní, není potřeba přeskakovat při výuce na externí materiály, jako v případě klasických návodů. Aplikace má široké využití jak ve školním prostředí, tak i pro firmy, které můžou školit své zaměstnance. Pro účely samostudia je aplikace též velmi vhodná. Edu-Learning je přístupný v českém i anglickém jazyce. Na internetové adrese http://www.edu-learning.cz/stazeni-a-instalacevyukoveho-programu-edu-learning.htm lze stáhnout úkolově omezenou verzi programu, pro plnou verzi je potřeba program zakoupit.

Obr. 30

Ukázka výukového modulu aplikace Edu-Learning v prostředí Microsoft Office Word

4.10 ZAV ZAV je výukový program pro psaní všemi deseti na klávesnici. Autorem programu je Jaroslav Zaviačič, vicemistr světa z roku 1965 a 1967 v psaní na stroji. Na tvorbě se podílela i Ing. Helena Matoušková, devítinásobná mistryně světa v záznamu a zpracování textu. Aplikace se vyvíjí a vylepšuje od roku 1990, kdy byla vytvořena první verze. ZAV je koncipován jako kurz výuky psaní všemi deseti.

Současný stav

39

V horní části programu jsou instrukce, co přesně se má dělat. Ve střední části je psaný text a ve spodní části klávesnice s vyznačenými klávesami, které se mají zmáčknout. Začíná se od vysvětlení základního rozložení prstů na klávesnici až po opisování vět. Program vyznačuje probírané cvičení, aktuální postup a průměrnou známku. V programu je možné nastavit více uživatelů. Téměř 90 úvodních cvičení je poskytováno zdarma, pro další lekce je nutné program zakoupit. ZAV patří mezi špičku programů určených k výuce psaní všemi deseti. Program používá mnoho škol a pořádají se v něm soutěže. ZAV najde své využití i v jiném sektoru než školním, například při školení zaměstnanců apod. Instalační soubor programu ZAV je přístupný na internetové adrese http://www.zav.cz/download-vyuka-psani-na-klavesnici.

Obr. 31

Program ZAV

Vlastní práce

40

5 Vlastní práce V následujících podkapitolách bude popsán návrh objektu, použité nástroje použité při tvorbě objektu, metodika tvorby objektu a výsledný stav objektu.

5.1

Návrh objektu

Při návrhu objektu bylo postupováno následovně. Jako první bylo zapotřebí definovat, pro jakou oblast bude vzdělávací objekt určen. Byla vybrána oblast výuky programování v programovacím jazyce Pascal. Pascal se vyučuje na Mendelově univerzitě v Brně v předmětu Algoritmizace. Objekt bude tedy určen převážně pro posluchače předmětu Algoritmizace. Jelikož je ale programovací jazyk Pascal používán na množství škol jako výukový, své uplatnění může najít i tam. V neposlední řadě může posloužit jako pomůcka pro samouky. Dále bylo třeba navrhnout strukturu a rozložení objektu. Poté definovat prvky, které bude obsahovat. Tento návrh proběhl formou náčrtu na papír. Jakmile byla představa o objektu v realizovatelné fázi, proběhl výběr vhodných nástrojů. Role jednotlivých nástrojů bude přiblížena v podkapitole použité nástroje. Poté už mohla začít fáze tvorby objektu.

5.2 Použité nástroje Při tvorbě, která bude popsána v podkapitole metodika tvorby objektu, byly vybrány následující nástroje:  Adobe Flash Professional CS5,  Wink,  PSPad,  PuTTY. Adobe Flash Professional CS5 byl zvolen jako hlavní vývojový nástroj. Ve Flashi bylo vytvořeno kompletní prostředí objektu. Wink sloužil pro vytváření interaktivních animací pomocí zachytávání obrazovky s následným přidáním vysvětlovacích a navigačních prvků. Pomocí Winku bylo snímáno dění v programech PSPad a PuTTy. Pro snímaný zápis příkladů byl zvolen PSPad. PSPad je volně šiřitelný univerzální editor. Podporuje zvýraznění syntaxe jazyka Pascal, což bylo shledáno jako přínosné pro lepší přehlednost prezentovaných příkladů. PuTTy byl použit pro zkompilování příkladů a následný zachytávaný výstup příkladu. PuTTy je volně šiřitelný program pro vzdálený přístup na Telnet a SSH servery. Jelikož příklady byly kompilovány na studentském serveru akela.mendelu.cz, použití nástroje PuTTy bylo zřejmé. V následující podkapitole bude přiblížena detailnější metodika tvorby objektu a role jednotlivých nástrojů.

Vlastní práce

41

5.3 Metodika tvorby objektu V této podkapitole bude popsána metodika tvorby objektu za pomoci vybraných nástrojů uvedených výše. 5.3.1

Adobe Flash Professional CS5

Pro implementaci rozhraní objektu bylo použito metody několikanásobně vnořených Movie Clipů. Tyto Movie Clipy obsahují další prvky, například další Movie Clipy, tlačítka, text atd. Pomocí této metody lze vytvořit přehledné rozhraní, které lze v budoucnu použít na jiné projekty. Další výhoda je v přístupu k prvkům. Například k prvku, který je v nadřazeném Movie Clipu, lze přistupovat pomocí ActionScriptu pomocí zápisu _parent.prvek. Pro přístup na hlavní časovou osu se přistupuje pomoci _root.prvek.

Obr. 32

Vrstvy a časová osa hlavní časové osy

Objekt je rozdělen na hlavní menu a dílčí kapitoly. V nabídce hlavního menu se nachází tlačítka pro přechod na dílčí kapitoly a nápovědu k používání objektu. Ta je řešena interaktivním průvodcem, který představuje používání objektu. Dílčí kapitoly jsou řešeny pomocí vnořených Movie Clipů.

Obr. 33

Vrstvy a časová osa Movie Clipu představující dílčí kapitoly

Na levé straně nachází menu jednotlivých položek zvolené kapitoly, implementované pomocí Movie Clipu, jenž obsahuje tlačítka.

Vlastní práce

42

Obr. 34 Vrstvy a časová osa Movie Clipu left_menu představující výběr jednotlivých položek zvolené kapitoly

K nim je v horní části určeno menu představující teorii, příklad a test. Tyto položky jsou reprezentovány pomocí Movie Clipu obsahující tlačítka. Pro přehlednost se při kliknutí na jednotlivé tlačítka tlačítko zvýrazní. To umožňuje snadnější orientaci. Zvýraznění je řešeno pomocí vrstvy on_button v Movie Clipu, který obsahuje tlačítka. Tato vrstva v má v jednotlivých snímcích zvýrazňující prvek na jednotlivých tlačítkách.

Obr. 35

Vrstvy a časová osa Movie Clipu top_menu představující teorii, příklad a test

Při kliknutí se vyvolá akce, která přejde na snímek, na kterém je zvýrazněno požadované tlačítko. To je řešeno pomocí následujícího kódu: teorie.onRlease = function(){ /* Při kliknutí a následném uvolnění. */

_parent.gotoAndStop(4); /* Přechod na snímek v nadřazeném Movie Clipu, v tomto případě snímek 4, kde je umístěna teorie. */

gotoAndStop(1);} /* Přechod na snímek v aktuálním Movie Clipu - zajištění zvýraznění tlačítka. */

Ve středové části objektu, zabírajíc největší plochu, je umístěn Movie Clip představující obsah. Ten má určenou stejnou velikost. Pro teorii, příklad a test má různý obsah.

Vlastní práce

43

Teorie V teorii má podobu teoretického přehledu k položce určené v levé části menu. V některých případech je zde možnost přechodu na další snímek Movie Clipu obsah - následující strana teorie. Součástí je i přehled, na které z kolika stran teorie se uživatel nachází.

Obr. 36

Vrstvy a časová osa Movie Clipu obsah představující teorii

Příklad V příkladu je v Movie Clipu, představující obsah, vnořen další Movie Clip, do něhož se externě načítají již vytvořené interaktivní animace ve formátu SWF vytvořené v programu Wink. Ty budou popsány v následující podkapitole věnované nástroji Wink. Animace byly prvotně zobrazovány jako velmi malé, což bylo způsobeno komprimováním výstupního souboru SWF z Winku. Při nekomprimování bylo vše v pořádku, ale výstupní soubor měl velkou datovou velikost. Řešení spočívalo ve zvětšení Movie Clipu pomocí ActionScriptu, do něhož se animace načítaly. Následující kód představuje akce, které se vyvolají při kliknutí na tlačítko příklad: priklad.onRelease = function(){ parent.gotoAndStop(5); /* Přechod na snímek v nadřazeném Movie Clipu, v tomto případě snímek 4, kde je umístěna teorie. */

gotoAndStop(2); /*Přechod na snímek v aktuálním Movie Clipu - zajištění zvýraznění tlačítka. */

_parent.load_swf._xscale = _parent.load_swf._yscale = 2000; /* Zvětšení Movie Clipu load_swf, do něhož se načítají externí SWF animace o 2000%. */

_parent.load_swf.loadMovie('swf/while.swf');

Vlastní práce

44

/* Načtení externí animace do Movie CLipu load_swf pomocí funkce loadMovie. Po načtení je tento Movie Clip nahrazen požadovanou animací. */

Test V testu je v Movie Clipu, představující obsah, umístěna evaluace znalostí.

Obr. 37

Vrstvy a časová osa Movie Clipu obsah představující test

Pro počítání správných a špatných odpovědí je zde umístěn Movie Clip ok představující zobrazení počtu správných a špatných odpovědí. Dále Movie Clip ko představující zobrazení počtu špatných odpovědí.

Obr. 38

Vrstvy a časová osa Movie Clipu ok

Po kliknutí na tlačítko test se provede následující kód: test.onRelease = function(){ _parent.gotoAndStop(6); gotoAndStop(3); tellTarget(_parent.obsah.ok){ gotoAndStop(1);};

Vlastní práce

45

/* Určuje Movie Clipu ok, který je umístěn v Movie Clipu obsah a představuje počet správných odpovědí, aby se nastavil na první snímek - 0. V případě snímku druhého - 1 atd. */

tellTarget(_parent.obsah.ko){ gotoAndStop(1); }; /* Určuje Movie Clipu ko, který je umístěn v Movie Clipu obsah a představuje počet špatných odpovědí, aby se nastavil na první snímek - 0. V případě snímku druhého - 1 atd. */

tellTarget(_parent.obsah){ gotoAndStop(1); }; /* Přechod na první snímek Movie Clipu obsah. */

_parent.obsah.ok_button_1.enabled = true; _parent.obsah.ko_button_1.enabled = true; _parent.obsah.ko_button_2.enabled = true; /* Zpřístupnění volby výběru odpovědí u první otázky. */

_parent.obsah.ok_button_2.enabled = false; _parent.obsah.ko_button_1_1.enabled = false; _parent.obsah.ko_button_2_2.enabled = false; /* Znepřístupnění volby výběru odpovědí u druhé otázky, zpřístupní se, jakmile uživatel odpoví na otázku první. */

}; Podobným způsobem je řešeno i tlačítko opakovat, které slouží k opakování testu. Následující kód představuje řešení jednoho z tlačítek, reprezentující označení odpovědi v testu: ok_button_1._alpha=0;

Vlastní práce

46

/* Nastavení počáteční průhlednosti na nulovou - tlačitko nelze vidět. */

ok_button_1.onRollOver = function(){ this._alpha=100; }; /* Po přejetí myší přes možnost odpovědí se objeví označení možnosti. */

ok_button_1.onRollOut = function(){ this._alpha=0; }; /* Při přesunu myši na jiné místo se viditelnost opět sníží na nulovou. */

ok_button_1.onRelease = function(){ /* Při kliknutí a uvolnění na tlačítko určující výběr odpovědi. */

gotoAndStop(2); /* Přesun na druhý snímek Movie Clipu obsah. Otázky jsou číslovány. Aktuální otázka je zvýrazněna. Při přesunu na druhý snímek se zvýrazní dané číslo otázky. */

ok_button_1.enabled = false; ko_button_1.enabled = false; ko_button_2.enabled = false; /* Znepřístupnění možnosti odpovědí u první otázky. */

ok_button_2.enabled = true; ko_button_1_1.enabled = true; ko_button_2_2.enabled = true; /* Zpřístupnění možností odpovědí u první otázky. */

this._alpha=100;

Vlastní práce

47

/* Nastavení plné viditelnosti u aktuálního tlačítka - uživatel vidí, kterou odpověď zvolil. */

tellTarget(ok){ nextFrame(); }; /* Movie Clip ok, který představuje počet správných odpovědí, se přesune na následující snímek. */

}; Pro návrat do hlavního menu slouží tlačítko v levé horní části se symbolem domu. Pro základní představu o implementaci v programu Adobe Flash Professional CS5 je následující popis metodiky dostačující. Avšak pro představu o fungování vrstev, principu vnořených Movie Clipů apod. se implementační metodika vysvětluje lépe komentováním zdrojového souboru. 5.3.2

Wink

Pomocí Winku byly vytvořeny interaktivní animace příkladů, které jsou použity v objektu. Animace jsou komentované, podporují navigaci v příkladu a umožňují stažení zdrojového kódu příkladu ve formátu PAS. Jejich součástí je také výstup prezentovaného příkladu. Proces vývoje těchto animací byl následující. Jako první se určil rozsah a typ snímání obrazovky. Byla zvolena možnost zachytávání obrazovky v tom případě, jestli byla stisknuta klávesa. To zajišťuje jeden zachycený snímek pro jeden stisk klávesy. Průměrný počet zachycených snímků příkladů byl 504.

Vlastní práce

Obr. 39

48

Nastavení snímání ve Winku

Po skončení snímání obrazovky se zachycené snímky dále zpracovávaly. Do prvního snímku byl umístěn textový box, popisující téma příkladu a tlačítko, kterým se animace spustí. Byl zde umístěn také textový box informující o možnosti stažení zdrojového souboru příkladu a tlačítko pro stažení.

Obr. 40

Vzhled úvodních boxů

Do snímků, ve kterých bylo potřeba vysvětlit, co dělá který příkaz příkladu, byl vložen vysvětlující textový box se šipkou, směrovanou na probíraný příkaz. Do boxu byly přidány tlačítka umožňující pokračování animace nebo skok na předešlý vysvětlující box.

Vlastní práce

Obr. 41

49

Vzhled boxu sloužící pro vysvětlení příkladu

Snímek, který představuje konec příkladu, obsahuje textový box s možnostmi pokračování animace ve formě výstupu programu, skok na předcházející vysvětlující box a možnost skoku na první snímek animace - začátek.

Obr. 42

Vzhled boxu na konci příkladu

V případě potřeby byl výstup komentován stejně jako v průběhu příkladu. Na posledním snímku animace, představující konec výstupu, byl umístěn textový box s možností skoku na začátek příkladu nebo na konec příkladu.

Obr. 43

Vzhled boxu na konci výstupu

Konečná fáze představovala renderování animace do formátu SWF. Ve Winku byla také vytvořena nápověda k objektu. Nápověda představovala průvodce vzdělávacím objektem a byla vytvořena formou zachytávání obrazovky při spuštěném výukovém objektu. Zde však nebylo použito zachytávání jako v případě příkladu, ale kontinuální snímání 24 snímků za sekundu. Důvodem byla potřeba prezentovat objekt pomocí běžného používání, tedy pomocí myši. 5.3.3

PSPad

PSPad byl použit pro zápis příkladů. Při zápisu se snímala obrazovka aktuálního dění. Jak již bylo zmíněno výše, jeden stisk klávesy představoval jeden zachycený snímek. Jako typ písma bylo zvoleno neproporcionální písmo Courier New.

Vlastní práce

Obr. 44

Ukázka PSPad při snímání zápisu příkladu

5.3.4

PuTTy

50

Poslední nástroj, použitý pro tvorbu objektu, byl PuTTy. Jelikož byl příklad psaný na bílém pozadí a Movie Clip obsah, který obsahuje teorii, příklad a test se taktéž odehrává na bílém pozadí, bylo třeba zachytit výstup taktéž na bílém pozadí. To PuTTy umožňuje. V nastavení byla nastavena barva pozadí na bílou a barva písma na černou. Pro typ písma bylo zvoleno neproporcionální písmo Courier New. Po přihlášení na server akela.mendelu.cz proběhla kompilace zdrojových souborů napsaných v programu PSPad pomocí příkazu fpc nazevSouboru. Spuštění příkladu se docílilo pomocí příkazu ./nazevSouboru. Po spuštění se začal zachytávat výstup pomocí Winku.

Vlastní práce

Obr. 45

51

Ukázka PuTTy při snímání výstupu příkladu

5.4 Výsledný stav Objekt je plně funkční a připraven pro podporu výuky. Je přístupný na internetové adrese https://akela.mendelu.cz/~xgajdos3/BP/bp.html. Na internetové adrese https://akela.mendelu.cz/~xgajdos3/BP jsou přístupné veškeré materiály spojené s objektem. Mezi ně patří následující:  zdrojový soubor programu Adobe Flash Professional CS5 ve formátu FLA,  výstup z téhož zdrojového souboru ve formátu SWF, HTML a EXE,  animace vytvořené v programu Wink ve formátu SWF,  zdrojové soubory programu Wink,  příklady použité v animacích ve formátu PAS. Jmenované materiály jsou též dostupné na přiloženém CD.

Vlastní práce

Obr. 46

Ukázka objektu - kapitola strukturované datové typy

52

Závěr

53

6 Závěr V úvodní kapitole byla popsána problematika návrhu multimediálních interaktivních objektů. V této kapitole byl kladen důraz na možnosti použití jednotlivých multimediálních komponent. Následující kapitola představovala oblast tvorby multimediálních interaktivních objektů. V této části byly představeny některé z nástrojů, sloužících pro implementaci objektů. Další kapitola byla zaměřena na analýzu současného stavu. Zde byly přiblíženy již existující multimediální objekty určené pro využití v univerzitní, školní a komerční sféře. Poslední kapitola popisovala praktickou část. V této kapitole byl přiblížen návrh objektu, použité nástroje při jeho implementaci, metodika tvorby samotného objektu a ukázka výsledného stavu. Cílem této práce bylo vytvořit multimediální vzdělávací objekt pro účely konkrétní vzdělávací instituce. Pro tyto účely byla vybrána Mendelova univerzita v Brně. Objekt je zaměřen na podporu výuky předmětu Algoritmizace, který se na dané univerzitě vyučuje. Tohoto cílu bylo dosaženo vytvořením multimediálního vzdělávacího objektu. K objektu lze přistupovat online pomocí internetového prohlížeče. Může být ale použit i bez přístupu na internet, v případě uložení objektu například na pevný disk. To lze vnímat jako pozitivum pro přístupnost objektu. Mezi přínos práce lze zařadit zejména přehled nástrojů vhodných pro realizaci multimediálních objektů. Dále také analýza již existujících objektů. Jako další přínos lze zahrnout i postup při samotné tvorbě objektu. V neposlední řadě je přínosem objekt, který byl v rámci práce realizován. Ten může být s následnými úpravami použit při tvorbě dalších objektů. Osobním přínosem byla především zkušenost s tvorbou komplexnějšího projektu. Dále také prohloubení znalostí v oblasti multimediálních objektů a jejich realizací. Do budoucna by se mohl objekt nadále vyvíjet, vylepšovat a aktualizovat. Například v podobě zpracování předmětu Programovací techniky, který se taktéž vyučuje na Mendelově univerzitě a představuje předmět navazující k předmětu Algoritmizace. Další vylepšení by mohlo přestavovat přidání zvukového komentáře k interaktivním příkladům. Testové rozhraní by mohlo být upraveno s možností ukládat výsledky evaluací. Uvedené poznatky do budoucna by mohly být námětem pro navazující diplomovou práci.

Literatura

54

7 Literatura ADOBE CREATIVE TEAM. Adobe Flash CS5 Professional: oficiální výukový kurz. Vyd. 1. Brno: Computer Press, 2010, 392 s. ISBN 978-80-251-3224-1. AV MEDIA. SMART Notebook [online]. 2010 [cit. 2011-12-09]. Dostupné z: http://www.avmedia.cz/obsah-a-zdroje/smart-notebook.html BROTHERSOFT. Adobe Authorware [online]. 2009 [cit. 2011-12-03]. Dostupné z: http://www.brothersoft.com/adobe-authorware-67096.html BŘÍZA, VLADIMÍR. PowerPoint 2007: podrobný průvodce. 1. vyd. Praha: Grada, 2007, 154 s. ISBN 9788024721781. FINKELSTEIN, ELLEN A GURDY LEETE. Flash CS3 for dummies. Hoboken, NJ: Wiley Pub., Inc., 2007, 386 s. ISBN 04-701-2100-9. FOTR, JIŘÍ. Macromedia Flash MX: podrobná příručka. 1. vyd. Praha: Computer Press, 2002, 355 s. ISBN 80-722-6677-2. GROVER, CHRIS. Flash CS5.5: the missing manual. 1st ed. Sebastopol, CA: O'Reilly, 2011, 841 s. Missing manual. ISBN 14-493-9825-1. KUMAR, SATISH. Wink [online]. 2010 [cit. 2011-12-10]. NĚMEC, LUBOŠ. Adobe Director 11.5: moderní interaktivní prezentace [online]. 2009 [cit. 2011-12-07]. Dostupné z: http://www.grafika.cz/art/sw/director115.html NEOSOFT. NeoBook [online]. 2011 [cit. http://www.neosoftware.com/nbw.html

2011-12-06].

Dostupné

z:

PECINOVSKÝ, JOSEF. Microsoft Word 2003: podrobný průvodce začínajícího uživatele. 1. vyd. Praha: Grada Publishing, 2004, 227 s. ISBN 8024707918. PECINOVSKÝ, JOSEF. Upravujeme digitální video. 2., aktualiz. a dopl. vyd. Praha: Grada, 2006, 114 s. Snadno a rychle (Grada). ISBN 80-247-1937-1.

Literatura

55

PERKINS, TODD. Flash Professional CS5 bible. 1st ed. Indianapolis, Ind.: Wiley Pub., Inc., 2010, 834 s. ISBN 0470602287. POLZER, JAN . Adobe uvádí Director 11 [online]. 2008 [cit. 2011-12-06]. Dostupné z: http://www.maxiorel.cz/adobe-uvadi-director-11 PPC. EduBase [online]. 2010 http://tinyurl.com/d7ft7gy

[cit.

2011-12-05].

Dostupné

z:

PROKEŠ, KAREL. Velká kniha Macromedia FLASH: Interaktivní animace. 1. vyd. Brno: Unis, 2000, 311 s. ISBN 80-860-9751-X. RYŠKA, PAVEL. Počítačová grafika. 1. vydání. Praha: Michael - SSŠRT, s.r.o., 2007, 72 s. ISBN 978-80-254-0182-8. SIEGEL, KEVIN. Adobe Captivate 5: beyond the essentials: "skills and drills" learning. Riva, MD: IconLogic, 2010, 202 s. ISBN 9781932733396. SLOWÍK, JOSEF. Nebojte se počítače. 2., aktualiz. a přeprac. vyd. Praha: Grada Publishing a.s., 2006, 139 s. ISBN 978-802-4713-441. SMART TECHNOLOGIES. SMART Interactive Solutions [online]. 2011 [cit. 2011-12-09]. Dostupné z: http://www.smarttech.com

Přílohy

56

Přílohy

Struktura objektu

A Struktura objektu Na následujícím diagramu je znázorněna struktura objektu.

Obr. 47

Struktura objektu

57

Ukázky objektu

B Ukázky objektu

Obr. 48

Ukázka hlavní nabídky

Obr. 49

Ukázka kapitoly příkazy větvení.

58

Ukázky objektu

Obr. 50

Ukázka kapitoly příkazy cyklu

Obr. 51

Ukázka kapitoly strukturované datové typy

59

Ukázky objektu

Obr. 52

Ukázka kapitoly podprogramy

Obr. 53

Ukázka sekce interaktivní nápovědy

60

Multimediální vzdělávací objekt

Recommend Documents