UNIVERZITA KONŠTANTÍNA FILOZOFA V NTIRE

FAKULTA PRÍRODNÝCH VIED

TVORBA INTERAKTÍVNYCH ANIMÁCIÍ POMOCOU

GRAFICKÉHO PROGRAMU ADOBE FLASH

2010 Jaroslav BENJIK

UNIVERZITA KONŠTANTÍNA FILOZOFA V NITRE

FAKULTA PRÍRODNÝCH VIED

TVORBA INTERAKTÍVNYCH ANIMÁCIÍ POMOCOU

GRAFICKÉHO PROGRAMU ADOBE FLASH

BAKALÁRSKA PRÁCA

Študijný program: 9.2.9 Aplikovaná informatika

Školiace pracovisko: Katedra informatiky

Školiteľ bakalárskej práce: PaedDr. Martin Magdin

Nitra 2010 Jaroslav BENJIK

Zadanie záverečnej práce

Poďakovanie

Chcel by som vysloviť špeciálne poďakovanie predovšetkým môjmu školiteľovi

PaedDr. Martinovi Magdinovi za usmernenie a podnetné rady pri konzultáciách,

a v neposlednom rade mojej rodine, ktorá ma podrţala počas tvorby tejto bakalárskej

práce.

Jaroslav Benjik

Abstrakt

BENJIK, Jaroslav: Tvorba interaktívnych animácií pomocou grafického programu

Adobe Flash. [Bakalárska práca]. Univerzita Konštantína Filozofa v Nitre. Fakulta

prírodných vied. Katedra informatiky. Školiteľ: PaedDr. Martin Magdin. Stupeň

odbornej kvalifikácie: Bakalár odboru Aplikovaná informatika. Nitra : FPV, 2010. 49 s.

Vyuţitie mediálnych elementov v súčasnosti predstavuje jeden zo základných pilierov

pouţívania IKT pre rôzne oblasti nášho ţivota. V prípade interaktívnych animácií

hovoríme o kombinácií viacerých mediálnych elementov s moţnosťou riadiť priebeh

a meniť tak celkový výstup animácie. Cieľom práce je vysvetliť metodiku tvorby

interaktívnych animácií pomocou programu grafického programu Adobe Flash.

Teoretická časť práce tak prináša krátky prehľad histórie ohľadom tvorby počítačovej

animácie a moţnosťami vyuţitia interaktivity, ako jednej zo základných vlastností

multimédií v súčasnosti. Najväčšiu časť práce (praktickú časť) predstavuje postupný

opis postupu tvorby ôsmych interaktívnych animácií, ktorých zameranie a pouţitie je

úzko špecifikované pre predmet Architektúra počítačov I.

Kľúčové slová: Animácia. Interaktivita. Adobe Flash.

Abstract

BENJIK, Jaroslav: Creating interactive animation using Adobe Flash graphic. [Bachelor

Thesis]. Constantine the Philosopher University in Nitra. Faculty of Natural Sciences.

Supervisor: PaedDr. Martin Magdin. Degree of qualification: Bachelor of Applied

informatics. Nitra : FNS, 2010. 49 p.

The use of media elements in present time represents one of the cornerstones of the use

of ICT to various areas of our lives. In the case of interactive animations we are talking

about the combination of multiple media elements with the possibility to manage

process and change total output animation. The aim of this thesis is to explain the

methodology of creating interactive animated graphics using Adobe Flash. The

theoretical part of work gives a brief overview of the history about creation computer

animation and the possibilities of using interactivity, as one of the fundamental

characteristics of multimedia today. The largest part of the work (the practical part) is a

progressive description of the process of making eight interactive animations, which

focus and use is strictly specific to the subject of Computer architecture I.

Keywords: Animation. Interaction. Adobe Flash.

Obsah

Obsah ............................................................................................................................... 6

Zoznam skratiek a značiek ............................................................................................. 7

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

1 Úvod do problematiky tvorby interaktívnych animácií ........................................ 9

1.1 Definícia pojmu animácia .................................................................................... 13

1.2 Čo je interaktivita, a ako súvisí s animáciami ..................................................... 14

2 Základné hardvérové a softvérové požiadavky na tvorbu interaktívnych

animácií .................................................................................................................... 17

3 Metodika vytvárania interaktívnych animácií ..................................................... 19

3.1 Elektromagnetická indukcia ................................................................................ 22

3.2 RS preklápací obvod ............................................................................................ 25

3.3 Kondenzátor v obvode jednosmerného prúdu ..................................................... 27

3.4 Jednoduchý frekvenčný filter .............................................................................. 30

3.5 Volt ampérová charakteristika PN priechodu ...................................................... 31

3.6 Bipolárny tranzistor v zapojení so spoločným emitorom .................................... 33

3.7 JK preklápací obvod ............................................................................................ 35

3.8 Karnaughove Mapy ............................................................................................. 37

Záver .............................................................................................................................. 40

Zoznam použitej literatúry .......................................................................................... 41

Prílohy ............................................................................................................................ 42

Príloha č.1: Obrázky prostredia programu Adobe Flash .............................................. 42

Príloha č.2: Ukáţky z tvorby interaktívnych animácií .................................................. 45

Príloha č.3: CD médium - zdrojové súbory animácií, bakalárska práca

v elektronickej podobe ............................................................................................. 49

7

Zoznam skratiek a značiek

GIF Graphics Interchange Format

IKT Informačné a komunikačné technológie

V/V Vstup/Výstup

3D 3 Dimension

2D 2 Dimension

MPEG Moving Pictures Expert Group

FLV Flash Video Format

FPS Frames Per Second

SWF Shockwave Flash, Small Web Format

AVI Audio Video Interleave

CD Compact Disc

DVD Digital Versatile/Video Disc

EXE Executable File

OS Operating System

MS Microsoft Office

CW Clockwise

CCW Counter clock wise

8

Úvod

Človek sa uţ od pradávna snaţil zobraziť na obrázku nejaký prírodný jav alebo

fyzický pohyb ţivej, či neţivej prírody. Dôkazmi tohto tvrdenia sú paleolitické jaskynné

maľby, kde môţeme pozorovať „beţiace“ zvieratá. Problematika znázorňovania pohybu

nie je teda ľudstvu neznáma, skôr ide o pochopenie podstaty, resp. spôsobu, ako ho

správne vystihnúť.

Samozrejme, ţe dnes sú uţ moţnosti oveľa väčšie ako kedysi, keď človek

nepoznal technológie súčasných médií. Pohyb dokáţeme zachytiť s dobre známym

prístrojom kamerou, ale aj vytvoriť na základe mediálneho elementu, ktorý nazývame

animácia. Prvé prístroje (fenakistoskop, praxinoskop, kinetoskop), ktoré boli určené na

vytváranie jednoduchých animácií (na princípe sekvencii snímok) začali vznikať

niekedy v 19. storočí. V druhej polovici 20.storočia, po zdokonalení grafického

rozhrania operačných systémov a po príchode multitaskingu, vstupuje pojem animácia

do sveta počítačov, pričom najčastejšie pouţívaným typom animácií sa

v prvopočiatkoch stali GIF animácie vhodné pre reklamné bannery na internete alebo

ako doplnok k prezentáciám. Ich výhodám a nevýhodám sa budeme v krátkosti venovať

aj v práci, keďţe predstavujú statickú líniu deja. V súčasnosti však majú oveľa väčšie

vyuţitie v rôznych oblastiach ţivota interaktívne animácie, ktoré majú dynamickú

dejovú niť. Jedným z viacerých programov, ktoré môţeme pouţiť na ich vytváranie, je

program Adobe Flash, ktorým sa v práci budeme zaoberať a zároveň popisovať

metodiku vytvárania jednotlivých interaktívnych animácií v jeho prostredí (Chen et al.,

1996).

Takto vytvorené animácie dnes stretáme takmer pri kaţdom pouţití niektorého

z médií. Najrozšírenejšie sú na internete, a predstavujú jeden so základných súčasných

elementov zábavy a vzdelávania.

Implementácia interaktívnych animácií závisí od oblasti ich vyuţitia a teda aj

problematika ich tvorby predstavuje značne rozsiahlu oblasť, ktorá sa časom stále

rozvíja. Aj z tohto dôvodu nie je moţné v rozsahu tejto práce ich úplne opísať a

analyzovať. Zámerom je však predstaviť prácu poskytujúcu námety na tvorbu

interaktívnych animácií, ako aj príklady ich pouţitia v spolupráci s informačno–

komunikačnými technológiami (IKT).

9

1 Úvod do problematiky tvorby interaktívnych animácií

V súčasnej tvorbe animácii, s ktorými sa stretáme pri sledovaní televízie

(napríklad animované filmy), predstavuje hlavný problém dosiahnutie čo

najpriateľskejšie prístupu k pozorovateľovi. Pri interaktívnych animáciách sa

pozorovateľ zároveň stáva pouţívateľom, alebo presnejšie povedané samotným

aktérom.

Problémy, s ktorými sa stretáme počas tvorby interaktívnych animácií, závisia

od toho, čo animujeme. Podkladom tvorby je reálny, či nereálny (vymyslený) svet

a všetky objekty, ktoré sa v ňom nachádzajú. Z dôvodu, ţe tieto animácie neobsahujú

statickú dejovú niť, základným problémom je komplexnosť. Inými slovami to moţno

opísať, ako priraďovanie určitých vlastností virtuálnym objektom. Tie im prislúchajú aj

v reálnom svete, alebo sú jednoducho autorom (tvorcom) vymyslené, ako napr.

umiestnenie týchto objektov do priestoru, v ktorom sa môţu navzájom ovplyvňovať.

Taktieţ je dôleţitá integrácia V/V jednotiek počítača do animácie. Vstupné jednotky sú

linkou medzi animáciou a pouţívateľom, pomocou ktorých má moţnosť výberu

z ponúknutých moţností a priamo vstupnou jednotkou tak ovplyvňuje objekty

v animácii (zadávaním parametrov, stláčaním tlačidiel animácie a pod). Z tohto

hľadiska je nesmierne dôleţité správne sa rozhodnúť, ktorá vstupná jednotka je

najvhodnejšia na prístup do animácie. Dnes je technológia uţ natoľko rozvinutá, ţe

máme v dispozícii široký výber typov vstupných jednotiek, ktoré sú vyuţité najmä pri

video hrách. Na trhu s informačnými technológiami je aj taktieţ pomerne dosť

výstupných jednotiek, ktoré vylepšujú záţitok a zvyšujú pochopiteľnosť prijímaných

údajov.

Tvorba interaktívnych animácií predstavuje zloţitý proces, pri ktorom je nutné

dodrţiavať určité pravidlá (podrobne popísať algoritmus, optimalizovať riešenie...).

V prípade, ak niektorý vzťah objektov k animácii chybne zadefinujeme, alebo spôsob

ktorým problém riešime je nevhodný, môţe dôjsť k zbytočnej strate na výkonnosti

počítača.

Zlaté pravidlo pri vytváraní animácie je poznať a porozumieť materiálu. Ako

príklad si môţeme predstaviť oceľovú stoličku a jej kópiu vytvorenú z plastu,

s rovnakými dimenziami. Pre rozličné materiály je potrebné navrhnúť rozličný dizajn,

aby sa dosiahol ten istý účel. V interakcii medzi človekom a počítačom materiály

10

zahrňujú nielen počítač, hardvér, grafické rozhranie, programovacie jazyky a nástroje

pre tvorbu interaktívnej animácie (softvér), ale aj ľudí čo ich pouţívajú – je to fakt ktorý

sa často ignoruje. Teda nepotrebujeme poznať iba vlastnosti materiálov, ale

potrebujeme tieţ pochopiť aj vlastnosti cieľových pouţívateľov – čo môţu, a čo nemôţu

robiť. Skúmanie ľudského rozpoznávania a psychológie v interakcii človeka a počítača,

je dôleţitou časťou snahy o pochopenie vlastností materiálov, a predstavuje základ pre

úspešný interaktívny dizajn (Rauterberg et al., 2003).

Nemenej dôleţité je mať dostatočné mnoţstvo skúsenosti v tej oblasti, pre ktorú

tvoríme animáciu, pretoţe zanimovať určitý jav z kvantovej fyziky môţe iba osoba,

ktorá tú oblasť dobre pozná a teoreticky ju dokáţe detailne popísať. Kvalita animácie

stúpa, ak pristupujeme k jej tvorbe tímovo (z radov odborníkov). Tím môţe obsahovať

odborníkov z rôznych oblastí, ktoré sú dôleţité pre tvorbu animácie. Ak tvoríme

interaktívnu animáciu, ktorá má slúţiť ako vzdelávací zdroj pre deti, je dobré mať

v tíme detského pedagóga (ale aj psychológa), zvukára a grafika čo kreslí pre deti.

V tomto prípade grafické rozhranie (farby, štruktúra objektov a pod.) animácie spolu

s implementovanými zvukovými efektmi, budú pre pouţívateľa predstavovať efektné

spojenie získaných záţitkov s potrebnými vedomosťami.

Pri výbere typu grafiky si môţeme zvoliť 3D alebo 2D. Z hľadiska realizácie

virtuálnej reality je najvhodnejšia 3D grafika z toho dôvodu, ţe „verne“ pripodobňuje

reálny svet. Základom tvorby sú trojdimenzionálne objekty, s ktorými máme moţnosť

manipulácie. Jednotlivé scény sa vytvárajú na základe renderovania, čím získavame

potrebné obrázky pre animáciu. Trojdimenzionálne animácie sú omnoho náročnejšie na

počítač (ako z hľadiska softvéru, tak aj hardvéru) a teda aj ich tvorba je oveľa zloţitejšia

a vyţaduje si viac času ako beţné dvojdimenzionálne animácie. Na druhej strane pri

jednoduchej dvojdimenzionálnej grafike dochádza k zuţovaniu moţnosti

aktivovania pozornosti pouţívateľa.

Neexistujú ţiadne oficiálne štandardy, ktoré opisujú ako interaktívne animácie

treba tvoriť. Všetko čo animácia bude obsahovať, a v akej forme, záleţí od kreativity

tvorcu, alebo od poţiadaviek klienta. K evaluácii tak často dochádza ešte počas samej

tvorby interaktívnych animácií.

Ak tvoríme animáciu, ktorá sa vyuţije na edukačné účely, niektoré ikonické

elementy nie sú implementované (napr. zvuk), pretoţe môţu na pouţívateľa vplývať

značne rušivo. V niektorých iných prípadoch je však pouţitie mediálneho elementu

11

v podobe zvuku viac ako uţitočné. Často sa pridáva krátky zvuk tlačidlu na znak toho,

ţe bolo pouţívateľom potvrdené. Môţeme taktieţ pridať zvuk aj priamo do deja (napr.

ak máme vytvorenú animáciu stroja, tak pridáme zvuk na znak, ţe je zapnutý). Ak je

animácia určená pre deti ktoré ešte neovládajú čítanie, tak môţeme za pomoci hovorcu

nahrať textovú časť a podať ju v zvukovej forme. Toto je takisto uţitočné pre mnohé iné

animácie.

Veľkosť rozlíšenia základnej plochy taktieţ závisí od rôznych faktorov.

Napríklad ak sa animácia nachádza na webovej stránke, je dobré brať do ohľadu

dimenzie stránky, a podľa toho aj realizovať návrh (dizajn) animácie. Ak sa k animácii

pristupuje cez internet, uţitočné je vytvoriť načítavanie najprv celej animácie, a aţ

potom ju zobraziť (tzv. preloading). Pri interaktívnych animáciách máme moţnosť, aby

sa rozhranie animácie prispôsobovalo rozlíšeniu, ktoré je nastavené monitore. Je zloţité

sa jednoznačne vyjadriť, ktoré z rozlíšení je najvhodnejšie. Jedným zo štandardných

typov predstavuje 800x600. Veľkosť rozlíšenia však najčastejšie volíme podľa potreby,

tak aby na ploche nezostalo veľa prázdneho miesta, alebo aby sme mali dosť priestoru

pre samotnú animáciu.

Pre text, ako jeden z najdôleţitejších a najstarších mediálnych elementov,

existujú záväzné štandardy, ktoré je moţné pouţiť v akej forme. Bezpätkový typ písma

(sans), prináša lepšeniu čitateľnosť textu, čo môţeme najlepšie vyuţiť pri dlhších

textoch, vysvetlivkách, upozorneniach a pod. Veľkosť písma a farbu volíme nielen

podľa formy, ale najmä obsahu (o čom text vlastne je). Upozornenie zvýrazňujeme

napr. červenou farbou a veľkosťou o 1-2 body väčšou ako zvyšný text v animácii, pri

ktorom je nutné dodrţať štandardné nastavenia textu – font, rez písma, zarovnanie,

textové efekty, atď.

Do interaktívnej animácie môţeme importovať aj video záznam, ktorý taktieţ

má pridelenú svoju dejovú niť nezávislú od ostatných, okrem situácie, kedy si zvolíme,

aby bola spoločná aj pre iný objekt. Existujú dva spôsoby ako môţeme importovať

video do animácie.

1) priame importovanie - môţeme robiť zmeny priamo pri vytváraní animácie.

Musíme však počítať s tým ţe súbor animácie bude väčší o veľkosť súboru

videa. Toto nie je výhodné najmä keď sa k animácii pristupuje cez internet.

Najskôr sa musí načítať celá animácia, ktorej prislúcha aj video, a aţ potom je

12

moţné s ňou pracovať. Je to zdĺhavý proces predovšetkým ak je videozáznam

príliš dlhý a neskomprimovaný (veľká výsledná kapacita súboru).

2) importovanie pomocou kódu - v animácii sa nachádza špeciálny kód, ktorým sa

video importuje, ak pouţívateľ zadá určitú poţiadavku. Tento spôsob je

efektívnejší pre animácie umiestnené na webových stránkach, pretoţe

načítavanie animácie nezávisí od načítavania videa, a ani video nevplýva na

veľkosť výsledného súboru animácie. Ale pritom ho musíme nastavovať, meniť

parametre a upravovať kódom, čo si vyţaduje určité znalosti. Taktieţ musíme

poznať adresu videa, z ktorej sa načíta (ak je animácia na internete, tak aj video

musí byť na niektorom serveri, z ktorého ho môţeme importovať do animácie).

Ak prístup k animácii je cez internet, a ak importujeme do nej video, tak by sme

mali pouvaţovať o formáte (kompresii) toho videa z dôvodu výslednej kapacity súboru

videa, a teda aj jeho rýchlejšieho načítania v rámci webovej stránky. Najpouţívanejšie

formáty na takéto účely sú MPEG4 a FLV.

Jedným z najčastejšie vykonaných chybných krokov pri tvorbe videa a hudby

v animáciách na internete je ten, ţe sú k dispozícii (a môţeme ich prehrávať) aţ vtedy,

keď sa celé načítajú. To nie je úplne pravda, pretoţe daný problém môţeme elegantne

vyriešiť pomocou buffera a nemusíme čakať, pokým sa načíta celý súbor, ale ho

môţeme prehrávať do toho bodu pokiaľ, sa v určitom momente načítal. Ak sa náhodou

prehrávanie animácie spolu so zvukom alebo videom dostane do tohto bodu, znamená

to, ţe rýchlosť internetového pripojenia je nedostatočná. Prehrávanie však môţe

pokračovať ďalej po načítaní ďalšej časti aţ do konca, pokým sa nenačíta celý súbor.

Pri animácii objektu predstavujúceho točiace sa koleso alebo jednoduchý pohyb

chodiaceho človeka, animujeme iba jedno otočenie kolesa alebo v prípade človeka iba

jeden krok (jedným smerom), pričom vyuţijeme moţnosť, ţe budeme dané snímky

opakovať. To znamená, ţe nepotrebujeme animovať kaţdé otočenie alebo krok,

môţeme iba nastaviť podmienku v akej perióde sa bude ten istý dej opakovať. Toto nám

ušetrí čas, a v konečnom dôsledku aj veľkosť výsledného súboru. Z tohto moţno

usudzovať, ţe interaktívne animácie predstavujú určitú výhodu oproti tvorbe

neinteraktívnych animácií, keďţe kaţdý objekt môţe v animácii prebiehať nezávisle od

iných objektov. Inými slovami povedané to znamená, ţe kaţdý objekt v animácii môţe

mať svoju vlastnú dejovú niť. Takto je moţné zanimovať chodiaceho (rôznym smerom)

človeka alebo točiace sa koleso, zastavovať, opätovne spúšťať a meniť akékoľvek, či uţ

13

vstupné alebo priamo v časovej línii definované parametre, jednému alebo druhému

objektu bez toho, aby to malo nejaký vplyv na iný objekt, ktorým nemanipulujeme.

Ak je v danej animácii interaktivita príliš komplexná a jej pouţívanie tak môţe

byť pre pouţívateľa príliš komplikované, musíme vytvoriť tzv. systém pomoci

a jednoduchých návodov na pouţitie. Najčastejší spôsob spustenia pomocníka na

počítači v akejkoľvek aplikácii je tlačidlom F1 na klávesnici, alebo ho môţeme spustiť

pomocou vytvoreného tlačidla s otáznikom.

„Väčšina interaktívnych animácií, ktoré v podstate predstavujú pouţívateľské

rozhrania, ponúka napredovanie cez viaceré informácie. Pre správny spôsob definovania

ovládania (komunikácie prostredníctvom interaktívneho elementu - objektu) musíme

dodrţať nasledovné odporúčania a pravidlá:

ponúknuť moţnosť výberu činností a moţnosť jednoduchého ukončenia

činností,

ak to vývojové prostredie interaktívnych animácií dovolí, základné ovládanie

ponúknuť na začiatku aj na konci (zrýchli to manipuláciu),

pracovať so zrozumiteľnými výrazmi a symbolmi,

ak sa pouţijú grafické symboly na ovládacie tlačidlá, je vhodné pouţiť aj

alternatívny text,

nepouţívať odkazy typu Naspäť, Predošlý, Ďalší; tlačidlo Naspäť je často úplne

zbytočné, navyše, aj tak často nie je jasné, kde „naspäť“ vlastne je,

nepouţívať nadbytočné funkcie,

informovať o dlho trvajúcich činnostiach (ak nastane tzv. „crash“) interaktívnej

animácie,

zobrazovať zrozumiteľné hlásenia a upozornenia,

nepouţívať zbytočné efekty...“ (Magdin, 2010)

1.1 Definícia pojmu animácia

Slovo animovať ako aj súvisiace slová, animácia, animovaný a animátor

pochádzajú z latinského slova „animate“, čo v preklade znamená „oţiviť“. V rámci

kontextu animovaného filmu, môţeme túto definíciu chápať ako umelo vytvorené ilúzie

pohybu neţivých čiar a tvarov. Táto definícia má ale nepostačujúci opis, najmä pre

animácie ktoré sa tvoria dnešnými technológiami. V dôsledku toho, aby sme získali

14

presnejšiu definíciu, je vhodné pouvaţovať o názore Normana McClarena, ktorý

povedal: „Animácia nie sú obrázky, ktoré sa pohybujú, ale skôr grafika nakreslených

pohybov. To, čo sa deje medzi každými dvomi snímkami, je dôležitejšie ako to, čo sa

deje na nich“. Norman McClaren chcel naznačiť, ţe pravá esencia animácie spočíva vo

vytváraní pohybu, manipulácii objektu, prispôsobovaniu modelu, úprave tvaru atď.

skôr, neţ v samotnom akte, v ktorom vytvárame obrázok (Wells, 1998).

Dynamické animácie sa v skutočnosti nehýbu, ale sa skladajú z radu obrázkov

projektovaných v ustálenom časovom intervale a vytvárajú tak ilúziu pohybu.

Jednotlivé obrázky sa v animácii nazývajú snímkami. Animácia je teda sada snímok,

kde kaţdá snímka je zobrazená za určitú časovú jednotku. Ak je nakreslená, predstavuje

určitý moment, a pri prehrávaní v stálej rýchlosti dáva dojem pohybu (Beckerman,

2003).

Pri tomto je vyuţitá nedokonalosť ľudského oka, ktoré nedokáţe rozlíšiť rýchlo

sa premietajúcu sériu snímok a vníma ich teda ako spojitý pohyb. Aby ľudské oko

premietanie snímok vnímalo ako plynulý pohyb tak je zavedený štandard 25 fps

(frames per second / snímok za sekundu). Animovať objekt znamená meniť jeho

parametre, takţe môţeme animovať nie len zmenu pozície ale aj farbu, tvar, textúru atď.

Poznáme dva základné spôsoby, akými môţeme vytvoriť počítačovú animáciu.

Prvou a relatívne ťaţšou moţnosťou, je vytvorenie jednotlivých snímok. Kaţdá snímka

je potom hlavná, alebo kľúčová, a môţeme v nej vykonávať akékoľvek úpravy. Druhým

spôsobom je pouţitie Tweeningu – dotvorenie snímok za nás. Stačí, ak si zvolíme prvú

a poslednú snímku našej animácie a zvyšné snímky program dopočíta za nás. Tento

spôsob je efektívny najmä pri tvorbe plynulých scén, kde sa vyţaduje veľký počet

snímok a ich postupné kreslenie by bolo časovo náročné. Oba spôsoby vytvorenia

animácie je moţné medzi sebou kedykoľvek kombinovať (Magdin et al., 2009).

Existuje mnoţstvo formátov súborov, do ktorých sú animácie vyexportované.

Niektoré z nich sú napr. SWF, FLV, GIF, AVI atď. Taktieţ je aj veľký počet

programov, ktoré slúţia na tvorbu animácií (Flash, 3D studio max, After effects atď).

1.2 Čo je interaktivita, a ako súvisí s animáciami

Zmysel slova interaktivita je človeku známy uţ veľmi dávno. Aj napriek tomu,

ţe väčšina ľudí ju nevie definovať, stretávajú sa s ňou kaţdodenne. Interaktivita je dnes

15

prítomná takmer vo všetkých elektronických systémoch: mobilné telefóny, klimatizačné

zariadenia, palinové pece. V skratke môţeme povedať, ţe všade tam, kde je potrebné

nastavovať niečo podľa našej ţiadosti, a pritom veľmi jednoducho, za pomoci softvéru,

ktorý je interaktívny. Taktieţ samotné operačné systémy v počítačoch sú tieţ

interaktívne, ibaţe beţný pouţívateľ to berie ako samozrejmosť. Tak čo je potom

interaktivita?

Interaktivita inými slovami znamená súčinnosť alebo spoluprácu, človeka

a systému, kde človek zadáva parametre (inštrukcie), ktorými ovplyvňuje priebeh akcií

a činnosť celého systému.

Zabezpečením interaktivity v animáciách umoţníme pouţívateľovi aktívne

vstupovať do priebehu animácie a vytvoríme tak spätnú väzbu medzi systémom

a pouţívateľom. To znamená, ţe animácia sama o sebe nebude lineárna (nebude vţdy

zobrazovať ten istý výsledok), ale bude čakať na inštrukcie, ktoré v tomto prípade

zadáva pouţívateľ a zobrazí výsledok v súlade so zadanými vstupnými parametrami

vloţenými cez vstupné jednotky systému.

Zabezpečenie interaktivity je značne problematické. Interaktívnu aplikáciu je

potrebné zostaviť veľmi prehľadne a logicky, aby pouţívateľ mohol sám pristupovať

k údajom, ktoré sú pre neho potrebné. Veľký dôraz sa kladie najmä na správne

umiestnenie ovládacích prvkov v aplikácii. V praxi funkcia jedného alebo druhého

prvku často splýva do jednej a tej istej veci, ktorou je nadefinovanie akcie alebo odkazu.

Akciu vyvoláme kliknutím na grafický objekt, niektorým tlačidlom na klávesnici,

zvukovým znakom (podmienkou je mať zapojený mikrofón alebo pod.) alebo

ktoroukoľvek vstupnou akciou, ktorá je definovaná v animácii ako spôsob manipulácie

(Guniš et al., 2010).

Najčastejším prvokom pre zaistenie interaktivity v animáciách je tlačidlo, ktoré

môţe mat rozličné tvary, farbu, zvuk a ďalšie vlastnosti, ale čo je najdôleţitejšie, môţe

mať rôzne funkcie. Pouţitie jednotlivých funkcií tlačidla určujeme v závislosti od toho,

v akom stave je animácia, presnejšie objekty v danej animácii. To znamená, ţe funkcia

jedného objektu, nie je vţdy rovnaká, ale vplyv ostatných objektov v animácii často

rozhoduje, čo má nastať po zadaní inštrukcií zo strany pouţívateľa. Takto medzi sebou

môţu pôsobiť jednotlivé objekty animácie, okrem samotného tlačidla. Príkladom toho je

„screensaver“ akvárium. Ryby, ako objekty animácie, môţu pôsobiť medzi sebou, tak

ţe sa naháňajú, pričom v tomto procese pouţívateľ nevykonal ţiadnu akciu, ale

16

v momente keď pouţívateľ „nasype“ do akvária krmivo (zmení parametre), tak sa

všetky začnú kŕmiť. Takto pouţívateľ vykonal vplyv na objekty ryby, ktoré zo svojich

stavov v momente nasypania krmiva prešli do stavu kŕmenia. Preto môţeme povedať,

ţe v interaktívnych animáciách, okrem medzi pouţívateľom a animáciou (objektmi v

nej), existuje aj interaktivita medzi samotnými objektmi animácie.

Interaktivitu v animáciách môţeme zabezpečiť pomocou rôznych interaktívnych

prvkov. Aké prvky pouţijeme, predovšetkým závisí od moţností programu, v ktorom

tvoríme animáciu. V prípade Adobe Flash, tak tieto objekty môţeme vytvárať podľa

potreby aj sami, alebo máme moţnosť pouţiť uţ preddefinované, ktoré sa nachádzajú

v paneli Components. Sú to tlačidlá, Combobox, Listbox, Scroll a mnoţstvo iných, ktoré

prinášajú moţnosti implementovania a skvalitnenia interaktivity v animáciách.

Interaktivitu môţeme označiť ako jednu zo základných vlastností multimédií,

pričom je veľmi dôleţitým krokom k ich dokonalosti. Ovplyvňuje chovanie a výsledný

výstup animácie. Je potrebné, aby bola podmienená aj existenciou určitej spätnej väzby

a moţnosťou posielania poţiadaviek a inštrukcií zo strany pouţívateľa. Predstavuje tak

priame a aktívne vstupovanie do animácie, výsledkom čoho je tvorivosť pouţívateľa.

Nemala by spočívať len vo výbere odpovede z ponúknutých moţností, alebo v

schopnosti spustiť alebo zastaviť animáciu. Interaktivitu môţeme hodnotiť na základe

troch hľadísk:

1. frekvencie (ako často môţe pouţívateľ reagovať),

2. možnosti výberu (koľko moţností má pouţívateľ k dispozícii),

3. významnosti (do akej miery ovplyvní rozhodnutie pouţívateľa skutočne

to, čo sa stane) (Magdin et al., 2009).

17

2 Základné hardvérové a softvérové požiadavky na tvorbu

interaktívnych animácií

Základné technické prostriedky samotného počítača pozostávajú z jeho

periférnych zariadení. To znamená, ţe pri tvorbe jednotlivých mediálnych elementov

okrem počítača, potrebujeme aj monitor, klávesnicu, myš, skener, a zariadenie pre

napaľovanie CD alebo DVD diskov. Tieto zariadenia v spolupráci so špeciálnymi

programami nám ponúkajú nástroje, pomocou ktorých dokáţeme vytvoriť rôzne

multimediálne prvky, medzi ktoré patria aj interaktívne animácie (Beckerman, 2003).

Ako prebieha vývoj výpočtovej techniky, tak sa menia aj poţiadavky na hardvér

a softvér potrebný k pouţívaniu multimédií. To čo platilo pre multimediálne systémy

(multimediálny počítač + príslušenstvo v podobe V/V zariadení) nazačiatku ich zrodu,

uţ dnes nie je aktuálne. Napriek tomu je moţné stanoviť základné poţiadavky na

hardvérové komponenty, ktoré by mali byť súčasťou multimediálneho systému:

mikroprocesor, ktorý by pomocou príslušných algoritmov umoţňoval rýchle

spracovanie poţadovanej informácie,

operačná pamäť, s dostatočnou kapacitou. Dnes je moţné na osobnom počítači

mať implementovanú pamäť s maximálnou kapacitou väčšou ako 4GB, ale to

platí iba pre 64 bitové operačné systémy.

pevný disk, umoţňujúci uloţenie niekoľkohodinového videozáznamu pri

vysokom rozlíšení bez kompresie,

grafická karta s 3D podporou, pamäťou a grafickým procesorom, ktorý by na

základe algoritmov vykonával väčšinu zloţitých výpočtov určených pre

zobrazovanie grafickej informácie v podobe animácií, videa, či prvkov virtuálnej

reality,

zvuková karta podporujúca vyuţitie priestorového zvuku (Magdin et al., 2009).

Keďţe sme sa dnes ocitli v dobe, kedy podobne ako hardvér, aj softvér neustále

prebieha postupným vývojom a vylepšovaním, máme k dispozícii mnoţstvo programov,

v ktorých dokáţeme vytvárať kvalitné animácie. Niektoré sú určené pre tvorbu animácií

iba so statickou dejovou niťou (líniou), ale niektoré ponúkajú aj moţnosť dodávať

interaktivitu do animácií.

18

Aby programy na počítači správne pracovali, je samozrejmé, ţe musíme mať

nainštalovaný riadiaci softvér pre hardvér. Niektoré programy vyţadujú aj doplnky

(plugin), bez ktorých nie sú schopné fungovať. Ale sú aj také doplnky, ktoré nie sú

záväzné, ale uľahčujú spôsob práce. Nie len samotný tvorca animácie potrebuje

špeciálne programy, ktoré sú nevyhnutné pre jeho prácu, ale aj pouţívateľ animácie

potrebuje určité aplikácie, bez ktorých nedokáţe systém spustiť animáciu. Napríklad

v prípade, ak je animácia vytvorená v Adobe Flash, aby ju pouţívateľ mohol spustiť,

potrebuje mať nainštalovaný Adobe Flash Player. Tento program nie je potrebný

v prípade, ak tvorca exportoval animáciu do formáte EXE. Vtedy sa Player integruje

automaticky do súboru vytvorenej animácie. Tento krok je veľmi uţitočný a najmä

efektný, ak tvoríme animácie, ktoré budú na samospustiteľnom CD alebo DVD. Toto

však nie je moţné pri animáciách, ktoré sú umiestnené na webových stránkach, pretoţe

formát EXE prehliadač nedokáţe otvoriť iba stiahnuť. V tom prípade je nevyhnutné

mať na počítači, na ktorom je daná stránka otvorená, nainštalovaný Adobe Flash

Player.1

Medzi nevyhnutné programy na tvorbu animácií patria programy pre tvorbu

a prepracovanie zvuku, videa a obrázku, a samozrejme programy pre vytvorenie

samotnej animácie. Najpouţívanejšie a najznámejšie programy pre tvorbu

interaktívnych animácií dnes sú Adobe Flash, Silverlight, a programy na tvorbu Java

apletov (NetBeans).

1 V operačných systémoch MS Windows je štandardne implementovaný spolu s prehliadačom Internet

Explorer

19

3 Metodika vytvárania interaktívnych animácií

Interaktívna animácia je zaloţená na moţnosti prepojenia jej základných

elementov: text, obraz, video a zvuk. Preto je dôleţité si vybrať z mnoţstva programov

ten, ktorý spĺňa našu predstavu o vytvorení kvalitnej interaktívnej animácie.

V súčasnosti štandardom, najvhodnejším a najpouţívanejším je Adobe Flash, ktorý

umoţňuje pracovať so všetkými mediálnymi elementmi.

Adobe Flash sa vyznačuje svojou jednoduchosťou implementovania

interaktívnych prvkov do animácie s minimálnymi znalosťami programovania. Jeho

dizajn je uniformný, a preto sa jeho menu podobá tomu, ktoré poznáme z programov

pracujúcich pod OS Windows. Pracujeme v ňom s vrstvami, podobne ako je to aj pri

programe CorelDRAW (vrstvy sú však umiestnené na časovej osi). Taktieţ máme

k dispozícii moţnosť vytvárať nové scény, ktoré majú od seba nezávislé časové osi.

Adobe Flash umoţňuje kreslenie vektorovej grafiky, ale aj moţnosť implementovania

a úpravu rastrových obrázkov. Pri implementácii videa a zvuku, tvorca môţe vyuţiť

základné nástroje na ich prepracovanie, alebo ich jednoducho doprogramovať.

Uţ spomenutá časová os (príloha 1, obr.1) sa skladá z prvkov, ktoré nazývame

snímky (frames). Je určená na časové ovládanie a vytváranie časového priebehu

animácie. Delíme ich na dva typy: snímka (frame, F5) a kľúčová snímka (keyframe,

F6). Snímky sú umiestnené nezávisle na určitých vrstvách časovej osi, pričom medzi

nimi môţeme kombinovať funkcie Tweening a Shape.

Základom práce v prostredí Adobe Flash je práca so symbolmi, pričom

rozlišujeme päť typov symbolov: MovieClip, Graphic, Button, Bitmap, Video a Sound.

Symboly typu Bitmap, Video a Sound nedokáţeme vytvoriť, pretoţe predstavujú

symboly importovaných súborov obrázkov a zvuku.

a) Graphic - najväčšie vyuţitie má pri statickej grafike, ale dajú sa v ňom vytvárať

aj animácie.

b) MovieClip - je primárne určený na tvorbu animácií a programovanie v

symboloch. Od hlavnej scény sa chová absolútne autonómne. Je to vlastne scéna

v scéne, v ktorej fungujú všetky príkazy typu ActionScript. Výhodou tohto

symbolu oproti symbolu Graphic je moţnosť inštancie – mena, pomocou

ktorého budeme MovieClip ovládať. Môţeme tak ovplyvňovať ľubovoľné

20

vlastnosti (napr. veľkosť, viditeľnosť alebo polohu), po splnení určitých

podmienok definovaných v ActionScripte.

c) Button - symbol, ktorý sa chová ako tlačidlo. Pri editácii symbolu sa otvorí

špeciálne upravená časová os, na ktorej sa nachádzajú tzv. udalosti. Tlačidlá sú

špecifická skupina, ktorá môţe dodať celkový vzhľad multimediálnej aplikácii,

ale môţe aj naopak, pokaziť jej celkový dojem. Rozdeľujeme ich do troch

základných kategórii:

1. statické – nevykonávajú ţiadny pohyb ale môţu meniť napr. farbu

2. dynamické – pri interakcii nastane pohyb alebo animácia tlačidla

3. tlačidlá statické alebo dynamické v spojení so zvukom

Všetky spomenuté symboly sa po vytvorení ukladajú do kniţnice (príloha 1,

obr.2), z ktorej môţeme vytvárať sekcie. Takto môţeme jeden symbol pouţiť viac krát

v animácii jednoduchým vloţením na plochu priamo z kniţnice. Kaţdá zmena symbolu

na scéne urobí zmenu toho istého symbolu aj v kniţnici aj na ploche (v prípade ţe tento

symbol máme viac krát vloţený na scénu).

Pri práci s jednotlivými symbolmi máme dispozícii Panel nástrojov (Tools),

ktorý je určený na kreslenie a editovanie objektov (príloha 1, obr.3). Zahrňuje

štandardné nástroje, s ktorými sa môţeme stretnúť pri kreslení v MS Paint

alebo podobných kresliacich programoch. Štandardne sa nachádza na ľavej strane

obrazovky.

Animácia môţe byť vytvorená dvoma základnými spôsobmi:

a) snímka za snímkou,

b) prvá (kľúčová) a posledná snímka, pričom ostatné dopočíta za nás

program

V prvom prípade, by sme museli obrázok meniť na kaţdej snímke, čo je zdĺhavé

a nepraktické. Preto sa častejšie vyuţíva druhá moţnosť. Tento spôsob tvorby animácie

sa nazýva MotionTween. Pri animovaní pomocou MotionTween máme tú výhodu, ţe

môţeme vyuţiť niekoľko dodatočných funkcií, ktoré fungujú len pri tomto type

animovania:

Ease - v prípade, ak potrebujeme pohyb objektu postupne spomaľovať alebo

zrýchľovať. Nachádza sa na paneli Properties a rozsah hodnôt ktoré je moţné

zadať je od -100 (postupné zrýchľovanie) aţ do 100 (postupné spomaľovanie).

21

Rotate - otáčanie objektu počas pohybu. Moţnosti pre smer otáčania sú CW

(vpravo) a CCW (vľavo).

MotionGuide – predstavuje pohyb po čiare (smernici), ktorú pouţijeme ak

chceme, aby sa objekt pohyboval presne po nejakej (napr. nakreslenej) trase.

Popri vyuţití týchto funkcií je moţné nastavovať a meniť aj ostatné parametre, ako sú

farba, veľkosť, efekt priesvitnosti (alpha) atď.

Adobe Flash sa vyznačuje tieţ svojím špecifickým programovacím jazykom

ActionScript. To čo je preňho príznačné, je jednoduchosť skriptovania, keďţe na

samotné vytvorenie animácie potrebujeme len pár riadkov kódu. V súčasnosti sa

pouţívajú dve verzie: ActionScript 2.0 a novšia ActionScript 3.0. Novšia verzia prináša

viac moţností a animácie tvorené pomocou nej sú kapacitne, ale aj softvérovo menej

náročné. Nevýhodou pre tých čo ovládajú verziu 2.0 je, ţe ActionScript 3.0 prináša

úplne iný tvar kódu (syntax). Kód môţeme písať pre jednotlivé objekty alebo snímky.

Dokáţeme ním meniť tvar, pozíciu, farbu, priesvitnosť a mnohé iné vlastnosti objektov.

Môţeme taktieţ ovládať časovú os, ako aj nastavovať intervaly odohrávania funkcie

a mnohé iné. Problematika ActionScriptu je značne obsiahla téma, ktorej sa venujú

mnohí odborníci z tejto oblasti. Preto si spomenieme iba niekoľko základných príkazov:

Go To – prechod na snímku určenú číslom,

Play – prehrávanie animácie,

Stop – zastavenie prehrávania animácie,

Stop All Sound – zastavenie prehrávania všetkých zvukov,

GetURL – vkladanie dokumentov do aplikácie, najčastejším príkladom je vloţenie web

stránky,

FSCommand – príkaz, ktorým je moţné nastaviť chovanie aplikácie v okne

spustiteľného EXE súboru,

Load Movie – nahrávanie externých SWF súborov bez nutnosti volať nový HTML

dokument,

UnLoad Movie – vymazanie nahratého externého SWF súboru,

Tell Target – priradenie akcie objektu, alebo animácii v scéne na základe inštancie,

If Frame Is Loaded – testuje stav snímky, ak je uţ nahratá, vykoná poţadovanú akciu,

On Mouse Event – priradenie udalostí a následný výkon akcie pri tlačidlách (Magdin et

al., 2009).

22

V nasledujúcich podkapitolách je uvedená krátka analýza postupu tvorby

interaktívnych animácií v programe Adobe Flash CS3 pomocou skriptovacieho jazyka

ActionScript 2.0. Zamerali sme sa hlavne na rozličné metódy tvorby interaktívnych

animácií, aby sme poukázali na to, ţe je mnoţstvo spôsobov, ako tvoriť a zabezpečovať

poţadovanú interaktivitu.

3.1 Elektromagnetická indukcia

Elektromagnetická indukcia je jav, pri ktorom vzniká napätie vo vodiči zmenou

magnetického poľa. Magnetické pole vzniká pohybom náboja. Aby sme tento jav

dokázali zanimovať, je potrebné zanalyzovať princíp práce mechanizmu, a tým sa

dopracovať k problematike vytvárania animácie.

Princíp v reálnom svete je nasledovný:

Indukované napätie vzniká v cievke vtedy, ak sa s časom mení magnetický

indukčný tok Φ v dutine cievky. Pri zasúvaní magnetu do cievky sa magnetický

indukčný tok zväčšuje o ΔΦ počas intervalu Δt, v ktorom sa magnet pohybuje.

Hovoríme, ţe v cievke sa indukuje napätie a voltmeter ukazuje výchylku. Ak je magnet

v pokoji voči dutine cievky, zmena magnetického indukčného toku je rovná nule a

voltmeter neukazuje ţiadnu výchylku. Ak magnet z cievky vysúvame, magnetický

indukčný tok v jej dutine sa zmenší o ΔΦ počas intervalu Δt, v ktorom sa magnet

pohybuje. Hovoríme, ţe v cievke sa indukuje napätie a voltmeter ukazuje výchylku,

tento krát s opačným smerom, ako pri vsúvaní magnetu do dutiny cievky. Indukované

napätie závisí od rýchlosti, ktorou sa mení magnetický indukčný tok. To znamená, ţe ak

je pohyb magnetu v dutine cievky pomalší, tak výsledné indukované napätie je menšie.

Podobne to platí aj v situácii, kedy je pohyb magnetu rýchlejší a teda aj výsledné

indukované napätie je väčšie (princíp dynama na bicykli).

Pri tvorbe šablóny grafického rozhrania interaktívnej animácie sme sa snaţili

o čo najvernejšie zobrazenie magnetu a cievky so závitmi, preto sme pracovali vo

vrstvách. Cievka je znázornená na dvoch vrstvách, pričom na prvej je nakreslená predná

strana a na vrstve pod ňou, sa nachádza zadná strana cievky. Medzi ne je umiestnená

vrstva s magnetom, kvôli tomu, aby pri vsúvaní naozaj nastal dojem, ako by sa magnet

nachádzal v dutine cievky. Voltmeter sme vystrihli a orezali z existujúcej fotky

v grafickom programe Adobe Photoshop CS4. Po importovaní obrázku voltmetra do

23

našej animácie, sme ho pripojili vodičmi na indukčnú cievku. Pomocou funkcie

MovieClip sme vytvorili pre voltmeter ukazovateľ hodnoty napätia. (príloha 2, obr.1)

Z predošlého opisu môţeme pozorovať, ako to funguje v reálnom svete. Preto

sme predpokladali, ţe pouţívateľ v animácii bude hýbať magnetom, presnejšie bude

magnet vsúvať do cievky a aj z nej postupne vysúvať. Z toho dôvodu sme prešli na

nastavovanie vlastností magnetu. Najprv sme nákres magnetu skonvertovali na

movieClip a nastavili sme mu inštanciu2 pod menom „magnet“. Ľavú hranu magnetu vo

vnútri tohto movieClip-u, sme zarovnali na stred, aby pozícia x, vzhľadom na jeho

koreňovú úroveň, predstavovala ľavú hranu. To je potrebné pri kontrole, či sa magnet

nachádza alebo nenachádza v cievke. Pre pohyb magnetu sme vyuţili funkciu StartDrag

, ktorá má niekoľko parametrov. Keďţe nie je nutné magnetom hýbať po vertikálnej osi,

zadali sme fixnú hodnotu y magnetu, ktorá je totoţná s hodnotou y pre stred cievky.

Pohyb po horizontálnej osi sme tieţ ohraničili, ale na toľko, aby bolo moţné magnet

vsunúť, ako aj celý vysunúť z cievky von, ale nie aj vysunúť z celkovej plochy

animácie. Kód (funkcia) pre pohyb magnetom, ktorý sa odohrá po stlačení ľavého

tlačidla myši na magnet, je nasledovný:

magnet.onPress = function(){

startDrag(this, false, 100, this._y, 440, this._y);

movementID = setInterval(movement, 50);

zacStavID = setInterval(zacStav, 20);

}

Môţeme si všimnúť, ţe v tejto funkcii sme nastavili aj dva intervaly. Interval pod

menom „movementID“ je interval pre funkciu „movement“, ktorá sa skladá

z niekoľkých podmienok. Prvá podmienka je na previerku, či sa magnet nachádza

v cievke, a to takým spôsobom, ţe sa overí hodnota súradnice x daného magnetu. Ak je

hodnota menšia ako 365, tak je podmienka splnená, lebo na pozícii x = 365 začína

dutina cievky. Ak podmienka nie je splnená, tak ukazovateľ voltmetru je na nule.

function movement(){

if (magnet._x < 365) {

//funkcia pre nastavovanie ukazovateľa na voltmetri

}else{ rucka = 0; cycle = false;}

}

2 Meno objektu pomocou ktorého pristupujeme k istému objektu v ActionScript-e

24

Funkciu pre výpočet hodnoty o koľko sa má rúčka na voltmetri otočiť, sme zostrojili

novou podmienkou. Dôleţitou premennou vo funkcii je premenná „cycle“ typu boolean.

Ak táto premenná je vyhodnotená ako false, tak sa do premennej XM priradí aktuálna

hodnota x súradnice magnetu, a „cycle“ sa nastaví na true. Ak je táto premenná

vyhodnotená ako true, tak sa vypočíta hodnota o koľko sa má ukazovateľ na voltmetri

otočiť, hodnota sa priradí premennej „rucka“ a „cycle“ sa nastaví na false. Keďţe sa

celá funkcia „movement“ opakuje v intervale „movementID“, ktorý je nastavený na 50

milisekúnd, premennou „cycle“ sme zabezpečili vlastne to, ţe v jednej desatine sekundy

sa prvých 50 milisekúnd odohrá kód keď „cycle“ nie je pravda, a v druhej polovici

desatiny sekundy sa odohrá kód keď je vyhodnotený ako pravda.

if(!cycle){

XM = magnet._x;

cycle = true;

}else{

x1 = magnet._x-XM;

//podmienka, ktorá zabezpečuje, aby hodnota x1 neprekročila

rucka = x1; //dovolené hodnoty

cycle = false;

}

Aby sme zabezpečili, ţe nedôjde k situácii keď hodnota x1 (hodnota, o koľko sa má

ukazovateľ voltmetra otočiť) nebude väčšia alebo menšia ako to, čo voltmeter

zobrazuje, pridali sme ešte dve nasledujúce podmienky. Ak aktuálna hodnota x1

prekračuje dovolené hranice, tak sa nastaví na maximum alebo minimum v závislosti,

v ktorom smere sa otáča.

if(x1 < -54) x1 = -54;

if(x1 > 54) x1 = 54;

Interval pod menom „zacStavID“ je interval pre funkciu zacStav. Táto funkcia je

predstavuje postupné zmenšovanie alebo zväčšovanie hodnoty premennej „rucka“ za

určitú hodnotu v jednotke času, v prípade ţe hodnota premennej „rucka“ sa nerovná

nule. Tým sa zabezpečí návrat ukazovateľa voltmetru do nulovej pozície. Interval pre

túto funkciu je nastavený na dvadsať milisekúnd.

25

function zacStav(){

if(rucka != 0){

if(rucka < 0) rucka += 1; else rucka -= 1; }

}

Na movieClip „rucka“ sme pridali kód, ktorý je určený na otočenie ukazovateľa okolo

samého seba a na základe hodnoty premennej rucka z predošlej funkcie „movement“.

onClipEvent (enterFrame) {

this._rotation = 0.5*(_parent.rucka this._rotation)+this._rotation;

}

Na koniec, pri uvoľnení ľavého tlačidla myši, sme vymazali obsah oboch

intervalov, nastavili sme premennú rucka na nulu a pridali funkciu pre magnet

„stopDrag“, ktorou sme zastavili pohyb magnetu za myšou.

3.2 RS preklápací obvod

Preklápací obvod typu RS je sekvenčný logický obvod, ktorý môţe nadobúdať

dva stavy, a to 0 a 1. S je set, ktorým nastavíme hodnotu výstupu Q preklápacieho

obvodu na 1 alebo 0. R predstavuje reset, pričom hodnotou 1 túto funkciu aktivujeme,

a hodnotou 0 túto funkciu de facto deaktivujeme. Ak raz nastavíme hodnotu výstupu na

1 a budeme naďalej privádzať set, výstup sa nám nezmení vţdy bude mať hodnotu 1.

Výstup môţeme zmeniť privedením R reset na vstup, vtedy sa nám hodnota výstupu Q

zmení na 0. Ak budeme naďalej na vstup privádzať R hodnota sa nám nezmení, bude

vţdy 0. Výstup môţeme zmeniť privedením S na vstup preklápacieho obvodu. Pri stave,

keď máme na vstupy S a R privedenú hodnotu 1, nevieme dopredu určiť či výstup sa

preklopí na log. 0 alebo na log. 1. Tento stav nazývame neurčitým alebo tieţ hazard.

Preklápacie obvody sú realizované z logických členov NOR a NAND (Redaj, 2007).

Aby sme dokázali vytvoriť interaktívnu animáciu, v ktorej je nasimulovaný

takýto jav, je potrebné vytvoriť aj zodpovedajúce grafické rozhranie, ktoré zároveň

predstavuje aj grafickú šablónu animácie. Z hľadiska potreby voliť hodnotu pre vstupy

R a S, bolo nutné realizovať túto poţiadavku pomocou tzv. výberových boxov

(ComboBox) osobitne pre kaţdý vstup. Ako bolo spomenuté vyššie, pre sekvenčný

obvod RS existujú dve zapojenia (pomocou logických členov NOR a NAND). Z tohto

dôvodu bolo nutné ako ďalší vstupný parameter vloţiť aj tretí výberový box. Zapojenie

NAND pozostáva zo štyroch logických operátorov (2xNOT a 2xNAND), kým

26

zapojenie NOR iba z dvoch (2xNOR). Z pohľadu pouţívateľa plocha animácie

predstavuje okrem výberových boxov aj tabuľku hodnôt, ktorá má však iba

informatívny charakter. Na zabezpečenie charakteru ovládania časovej osi boli pouţité

tlačidlá, pomocou ktorých dokáţe pouţívateľ simuláciu prechodu signálu obvodom

pozastaviť a opätovne ju spustiť z tej istej pozície. (príloha 2, obr.2)

Pri kreslení obvodu sme pre kaţdý vodič signálu vytvorili MovieClip a pridali

mu špecifickú inštanciu. Kaţdý takto vytvorený MovieClip v sebe obsahuje dve snímky,

kde na jednej je vodič červený (čo predstavuje hodnotu 1) a na druhej je vodič modrý

(čo predstavuje hodnotu 0). Takto je moţné na kaţdú snímku nastaviť potrebný vodič

(MovieClip), v závislosti od toho, aký signál ním bude prechádzať. Pri riešení

problému, akým spôsobom bude signál postupovať sme sa rozhodli vyuţiť efekt

masky3. Vytvorili sme preto nový MovieClip, v ktorom sme funkciou MotionTween

zanimovali objekty v takom rozmiestnení, aby pri postupnej zmene šírky či výške,

postupne pokrývali oblasť vodičov obvodu od začiatku toku signálu aţ po koniec. Takto

je síce moţné riešiť tok signálu konkrétnym vodičom, čo však neurčuje akým spôsobom

nastaviť jednotlivé vodiče na hodnotu (snímku), ktorá im zodpovedá (teda či bude vodič

červený alebo modrý). Tento problém bolo nutné teda dodatočne riešiť kódom.

Dôleţitým faktorom je hodnota vo výberových boxoch pre S a R, a určenie typu

zapojenia, z čoho je moţné odvodiť hodnotu vstupných signálov ako aj signálov.

Nasledujúci kód popisuje akým spôsobom dochádza k vyhodnocovaniu pre typ

zapojenia NAND.

if (_root.typ_zapojenia.value == "NAND") {

if (_root.hodnota_s.value == "0") {

s0 = 0; s1 = 1;} else {s0 = 1; s1 = 0;}

if (_root.hodnota_r.value == "0") {

r0 = 0; r1 = 1;} else {r0 = 1; r1 = 0;

}

Na základe vstupných signálov a signálov, ktoré vychádzajú z logických operátorov,

dokáţeme jednotlivé hodnoty odvodiť podľa toho, aké sú signály na vstupe logických

operátorov. Napríklad, ak na vstupe log. člena NAND sú hodnoty 1 a 0, tak signálu na

výstupe bude pridelená hodnota 1. Takto sme odvodili všetky signály v obvode okrem

vstupných a priradili sme ich k premenným. Na koniec sme podľa hodnôt premenných

nastavili všetky MovieClipy (signáli) na zodpovedajúce snímky.

3 maska je vrstva, ktorá určuje viditeľnosť vrstvy s ňou viazanou. To znamená, ţe vidno iba tú oblasť,

ktorou na vrstve maska prekrýva iný objekt.

27

if ((s0 == 0) && (r0 == 0)) s2 = s2;

if ((s0 == 0) && (r0 == 1)) s2 = 0;

if ((s0 == 1) && (r0 == 0)) s2 = 1;

if ((s2 == 1) && (r1 == 1)){r3 = 0;} else {r3 = 1;}

r2 = r3;

if ((s1 == 1) && (r2 == 1)){s3 = 0;} else {s3 = 1;}

for (i=0;i<4;i++) {

_root.signali["signal"+i+"s"].gotoAndStop(this["s"+i]+1);

_root.signali["signal"+i+"r"].gotoAndStop(this["r"+i]+1);

}

Keďţe pri RS preklápacom obvode máme aj neţiaduci stav, museli sme pridať

podmienku, ktorá nám zabezpečí, aby nebolo moţné v tomto prípade spustiť simuláciu.

Neţiaduci stav je v prípade ţe R=1 a S=1. Pre tento prípad sme si vytvorili nový

MovieClip, ktorý upozorňuje a oboznamuje pouţívateľa, aby zvolil inú kombináciu:

if((_root.hodnota_s.value == "1")&&(_root.hodnota_r.value ==

"1")){ koren.mc_upozornenie.gotoAndPlay(2);}

Podobný postup priraďovania hodnôt sme pouţili aj pri type zapojenia pomocou

hradiel NOR, avšak s malými úpravami. Keďţe sú obvody v podstate podobné, vyuţili

sme tie isté referenčné MovieClipy. Z nákresu obvodu po zvolení typu NOR sme

odstránili log. člen NOT a vodiče vstupných signálov, pričom sme log. člen NAND

zmenili na NOR.

Pri zmene parametrov ktoréhokoľvek z troch výberových boxov bola na záver

pridaná funkcia vynulovania simulácie, aby sa v momente zmeny hodnoty počas

priebehu simulácie prestali zobrazovať jednotlivé signály, a mohla tak prebehnúť

funkcia úpravy hodnôt signálov podľa nového nastavenia.

3.3 Kondenzátor v obvode jednosmerného prúdu

Pri realizácii animácie je potrebné zabezpečiť zobrazovanie napätia

v kondenzátore a správanie sa diódy v takomto zapojenom obvode. Vytvorili sme preto

tri grafy, ktoré umoţňujú zobraziť priebeh napätia na zdroji, priebeh prúdu obvodom

a priebeh napätia na kondenzátore. Keďţe vyuţitie animácie je určené predovšetkým na

pochopenie funkcie mechanizmu, pri riešení problému sme neriešili presnosť

výsledkov, preto sú iba pribliţne presné.

Grafické rozhranie takejto animácie predstavuje nakreslený jednosmerný obvod.

Kondenzátor, dióda a prepínač sú prvky, ktoré zobrazujú zmeny počas simulácie

28

priebehu prúdu obvodom. Dióda je vytvorená ako MovieClip, v ktorom sme vyuţili

funkciu MotionTween pre postupné rozsvecovanie a zhasínanie. Podobne je

zrealizovaný aj kondenzátor, pomocou ktorého sme znázornili postupné zvyšovanie

a zniţovanie napätia. Prepínač v podstate predstavuje iba prostriedok, ktorým celú

simuláciu spúšťame. Po kliknutí naň sa nastaví na zapnutý, a odpojí sa aţ po skončení

simulácie. (príloha 2, obr.3)

Nakreslením a zostrojením obvodu síce vytvoríme potrebné grafické rozhranie,

avšak pre moţnosť implementovania interaktivity, je potrebné zabezpečiť také

prepojenie objektov, pomocou ktorých meníme nielen priebeh, ale najmä celkový

výstup animácie. Preto sme vytvorili objekty pre zadávanie parametrov, presnejšie na

výber z ponúknutých moţností. Aj z tohto dôvodu sa prikláňame k názoru, ţe vytvorená

animácia je skôr simuláciou, ktorá poskytuje, resp. obsahuje prvky interaktivity. Pre

kapacitu kondenzátora sme uviedli tri moţnosti, pre odpor rezistora tieţ tri moţnosti

a pre napätie zdroja štyri moţnosti výberu, čo predstavuje tridsaťšesť kombinácií

navzájom rôznych parametrov. Ako objekt, pomocou ktorého môţeme vyberať z

ponúknutých moţnosti, sme si zvolili jeden z komponentov panela Components -

ComboBox.

Keďţe tridsaťšesť kombinácií parametrov v praxi znamená aj taký istý počet

vykreslenia grafov (aby sme nekreslili pre kaţdú kombináciu osobitný graf), vytvorili

sme ich nezávisle od seba, a skonvertovali do osobitných MovieClipov so zadanou

inštanciou. Vykresľovanie grafov sa uskutočňuje pomocou masky, pričom na vrstve,

kde je umiestnená maska, sa nachádza objekt, ktorý pomocou funkcie MotionTween

mení svoju pozíciu tak, aby postupne prekrýval čiaru grafu umiestnenej na snímke

maskovanej vrstvy. Takýmto spôsobom vytvoríme dojem, akoby sa čiara vykresľovala,

aj keď je vopred nakreslená. V podstate ju však maska iba postupne odkrýva.

Vzhľadom k takémuto riešeniu je nutné vytvoriť snímky, na ktorých sa postupne budú

vykresľovať čiary grafu pre zodpovedajúce parametre. Po zmene parametrov funkciou

zmenahodnot nastavíme MovieClipy grafov kaţdý na snímku s čiarou, zodpovedajúcou

jednotlivým parametrom.

function zmenahodnot() {

hodkap = kapacita.value;

hododp = odpor.value;

hodnap = napetie.value;

if (hodkap == '1e - 10' && hododp == 1500 && hodnap == 15) {

ppo.gotoAndStop(1); pnk.gotoAndStop(1);

29

dioda.gotoAndStop(1); napetiekond.gotoAndStop(1);

}

if (hodkap == '1e - 10' && hododp == 500 && hodnap == 15) {

ppo.gotoAndStop(2); pnk.gotoAndStop(2);

dioda.gotoAndStop(2); napetiekond.gotoAndStop(2);

}

...}

V uvedenom kóde taktieţ nastavujeme aj diódu a napätie kondenzátora na

zodpovedajúcu snímku, aby sa dióda správne rozsvietila a kondenzátor zobrazil správny

priebeh napätia. Ako aj pri grafoch, aj tu je potrebné určiť kombináciu parametrov,

presnejšie pre určité grafy, vytvoriť niekoľko snímok, na ktorých priebeh rozsvecovania

a zobrazovania prebehne iným spôsobom.

Keďţe pre zobrazenie grafu priebehu napätia na zdroji je potrebný iba jeden

z parametrov, pre voľbu napätia zdroja sme pridali kód, ktorý nastavuje čiaru

zobrazujúcu periódu zapnutého zdroja na určitú pozíciu. Pri tomto grafe je čiara vţdy

vo vodorovnej polohe, takţe je nutné pridať kód, ktorý podľa hodnoty v ComboBoxe

nastaví čiaru na určitú pozíciu y-ovej súradnice. Čiaru sme skonvertovali na MovieClip

a pridali mu inštanciu valuemarker s podmienkou pre hodnotu napätia 0, čo pre všetky

grafy znamená, ţe ak budú mať čiaru na hodnote nula, dióda sa nebude rozsvecovať a

ani kondenzátor nič nezobrazí, lebo v obvode nie je napätie.

on (change) {

_parent.pnz.valuetxt.text = this.value;

switch (this.value) {

case 15 : _parent.pnz.valuemarker._y = 30.8;

_parent.pnz.valuetxt._y = 30.8; break;

case 10 : _parent.pnz.valuemarker._y = 40.8;

_parent.pnz.valuetxt._y = 40.8; break;

...}

Pre kaţdú kombináciu sme nakreslili kaţdý z dvoch zvyšných grafov. Vzhľadom

k tomu, ţe v niektorých prípadoch (kombináciách parametrov) grafy boli rovnaké,

nebolo potrebné ich kresliť úplne pre kaţdú kombináciu, ale sme vyuţili uţ existujúci

graf. Na MovieClip prepínač sme pridali kód, ktorým po kliknutí naň spustíme

simuláciu. Kódom spustíme funkciu zmenahodnot, odštartujeme masky, aby sa čiary na

grafoch začali postupne zobrazovať, odštartujeme taktieţ aj rozsvecovanie diódy

a zobrazovanie napätia v kondenzátore. Po zmene parametrov počas simulácie sa všetko

zastaví, vynuluje a čaká na opätovný štart.

30

3.4 Jednoduchý frekvenčný filter

Hornopriepustný frekvenčný filter je elektrický obvod, ktorý prepúšťa signál

vyšších frekvencií bez zmeny a niţšie frekvencie utlmuje, fázovo predbieha. Ide o tzv.

derivačný obvod.

Dolnopriepustný frekvenčný filter je elektrický obvod, ktorý prepúšťa signál

niţších frekvencií bez zmeny a vyššie frekvencie utlmuje, fázovo oneskoruje. Ide o tzv.

integračný obvod.

Na základe získaných poznatkov ako o integračnom, tak aj derivačnom obvode

sme zanimovali priebeh grafov (zaznamenávanie napätia v čase t na grafoch), čiţe

vykresľovanie zodpovedajúcej krivky na grafe v závislosti od zvoleného typu filtra.

Vzhľadom k tomu sme nakreslili a zostrojili štyri grafy, ku ktorým sme pridali aj jeden

ComboBox pre výber typu filtra a dve tlačidlá - jedno pre spustenie simulácie a druhé

pre reset. Nakreslili sme aj oba elektrické obvody filtrov, ktoré pozostávajú zo

zapojenia jedného kondenzátora a jedného rezistora. (príloha 2, obr.4)

Vzhľadom k tomu, ţe účel animácie je len informatívneho charakteru, nebolo

potrebné pracovať s presnými hodnotami, ale iba pribliţne napodobniť reálny dej.

Podobne ako pri realizácii simulácie kondenzátora v obvode jednosmerného prúdu, aj tu

sme vyuţili masku na vykresľovanie kriviek grafu. Aby sme nevytvárali osobitné

masky pre všetky štyri grafy a zbytočne tak nekomplikovali návrh a realizáciu danej

simulácie, všetko sme zhrnuli do jedného MovieClipu a pouţili tak iba jednu masku.

Na spodnú vrstvu sme nakreslili všetky štyri grafy, na vrstvu nad ňou krivky

grafov na správne pozície, a na vrchnú vrstvu objekt pre masku. Túto vrstvu sme

nastavili ako masku, čím sa vrstva s krivkami stala maskovanou vrstvou. Objektu na

vrstve maska sme pomocou funkcie MotionTween nastavili postupný pohyb

v smere z ľavej strany na pravú z pozície, kde neprekrýva krivky grafov, aţ na pozíciu,

kde úplne prekrýva všetky krivky. Takto sme dosiahli dojem, akoby sa krivky

vykresľovali. Tlačidlu, ktoré odštartuje MovieClip maska sme pridali nasledovnú

funkciu:

spustit.onRelease = function() {

diagrams.diamask.gotoAndPlay(2); }

Keďţe sú dva typy filtrov, podobný postup vykresľovania sme museli zopakovať

aj pre druhý typ. Do MovieClipu, ktorý obsahuje všetky štyri grafy, vrstvu s krivkami

grafov a vrstvu objektu pre masku, sme iba na nasledovnú snímku skopírovali ten istý

obsah a pozmenili ho v súlade so zodpovedajúcim typom filtra. Takto sme potom mali

31

na jednej snímke grafy pre jeden typ filtra, a na druhej pre druhý typ filtra. Masku sme

pouţili tú istú, iba sme zmenili štruktúru grafov a nakreslili iné krivky. Taktieţ obrázok

elektrického obvodu filtra sme museli nakresliť pre kaţdý typ osobitne. Urobili sme to

tým istým spôsobom ako pri grafoch, to znamená, ţe v jednom MovieClipe sme na

prvej snímke nakreslili obvod pre jeden typ, a na druhej obvod pre druhý typ.

Pre ComboBox sme napísali kód, ktorým po zmene poloţky v ňom prebehne

funkcia pre resetovanie simulácie a funkcia valuechange pre nastavenie MovieClipov

s grafmi a nákresmi obvodov na zodpovedajúce snímky. Snímky v MovieClipoch sú

pomenované rovnako ako poloţky v ComboBoxe, takţe sme z ComboBoxu meno

poloţky vloţili do premennej typu String, a určité MovieClipy nastavili na snímky

s týmto pomenovaním.

function valuechange() {

filtertyp = filterbox.value;

obvod.gotoAndPlay(filtertyp);diagrams.gotoAndPlay(filtertyp);

if (filterbox.value == "Derivátor") {

info_txt.gotoAndStop(1);}else{info_txt.gotoAndStop(2);}

}

3.5 Volt ampérová charakteristika PN priechodu

Oblasť vo vnútri polovodiča, v ktorej sa mení elektrická vodivosť jedného typu

na druhý nazývame P-N priechodom. Typom P nazývame taký polovodičový materiál,

v ktorom výrazne prevaţujú kladné nosiče náboja (diery). Polovodič typu N je taký, kde

výrazne prevaţujú záporné nosiče náboja (elektróny). Tieţ hovoríme o majoritných

nosičoch náboja v polovodiči. Keď k P-N prechodu pripojíme zdroj elektrického napätia

tak, ţe kladný pól zdroja je na oblasti P a záporný na oblasti N, hovoríme o zapojení v

priepustnom smere. V opačnom prípade hovoríme o zapojení v smere závernom

(nepriepustnom). Súvisí to s experimentálnou skutočnosťou, ţe v priepustnom smere je

odpor takto usporiadaného polovodiča malý, kým v závernom smere je o niekoľko

rádov väčší, takţe pri danom napätí na P-N prechode v priepustnom smere tečie prúd

väčší neţ v smere závernom. Táto vlastnosť P-N prechodu sa vyuţíva v polovodičových

diódach (Vajda et al., 2001).

Grafické rozhranie predstavuje nakreslený elektrický obvod, graf, dve tlačidlá

a legenda značiek. (príloha 2, obr.5). Obvod sme zostrojili v zapojení s batériami, teda

zdrojom jednosmerného napätia. Aby sme mohli kontrolovať a voliť priepustný alebo

záverný smer, zaviedli sme moţnosť otáčania batérií, čím v podstate meníme polaritu

32

napájania obvodu, do ktorého sme okrem toho zapojili aj ampérmeter, voltmeter

a znázornili oblasť priestorového náboja (oblasť, v ktorej sa mení elektrická vodivosť).

Ampérmeter ako aj voltmeter majú ukazovatele, ktoré nám počas simulácie udávajú

merané hodnoty. P oblasť priestorového náboja (sfarbená do červena) obsahuje dve

kladné častice (diery), N oblasť (zafarbená na modro) dve záporné častice (elektróny).

Rozhranie týchto oblastí je znázornené zelenou farbou a následne skonvertované na

MovieClip, aby sme mohli meniť jeho veľkosť pomocou kódu počas simulácie.

Keďţe sú moţné dva stavy, do kódu ktorým otáčame batérie sme zaviedli

premennú smer typu boolean, ktorej meníme hodnotu v závislosti od toho, či je smer

priepustný (true) alebo záverný (false). Po kliknutí myšou na batérie, ich môţeme

otáčať, v smere pohybu myši. Po uvoľnení tlačidla myši prebehne funkcia ktorá nastaví

premennú smer na zodpovednú pravdivostnú hodnotu:

battery.onRelease = battery.onReleaseOutside = function(){

...

if (((battery._rotation > 90) || (battery._rotation < -90)) &&

baterry._rotation != 180){... // kód na vrátenie do polohy

smerinfo.gotoAndPlay("zaverny");

smer = false;

}

if (((battery._rotation <= 90) && (battery._rotation >= -90)) &&

baterry._rotation != 0){... // kód na vratenie do polohy

smerinfo.gotoAndPlay("priepustny");

smer = true;

}

...

}

Pre oba moţné stavy sme osobitne zanimovali dej voltmetra, ampérmetra,

oblasti priestorového náboja a grafu. Vykresľovanie kriviek grafu sme riešili podobne

ako v predošlých prípadoch, vytvorením vrstvy pre masku a vrstvy pre krivku, kde

maska je objekt ktorý postupne pomocou funkcie MotionTween prekrýva krivku a dáva

tak dojem, akoby sa vykresľovala. Pre oba typy zapojenia sú osobitné pre postupné

vykresľovanie krivky. Ako sa bude vykresľovať, záleţí iba od toho, akú hodnotu má

premenná smer. Takisto aj voltmeter, ampérmeter a oblasť priestorového náboja majú

pre určitý stav iný dej, a ktorý z nich sa odohrá, závisí iba od premennej smer.

33

Ukazovatele voltmetra a ampérmetra sme zanimovali tak, ţe sa postupne otáčajú

a ukazujú na určitú hodnotu.

Pri priepustnom smere, keď voltmeter dosiahne hodnotu napätia 0.7 V, odpor

vodiča v oblasti priestorového náboja, ktorý sme zafarbili zelenou farbou postupne

zmizne a elektróny z oblasti N sa presunú do oblasti P a diery z oblasti P sa presunú do

oblasti N. Taktieţ ukazovateľ ampérmetra sa začne postupne vychyľovať, čo znamená,

ţe v oblasti PN prechodu tečie prúd. Všetky deje v rámci simulácie sa odštartujú a

odohrávajú súčasne. Stlačením tlačidla Spustiť sa preverí pravdivostná hodnota

premennej smer, a podľa nej prebehne zodpovedajúca funkcia, v ktorej sa všetky

MovieClipy súčasne odštartujú. Funkcia playpriepustny pre priepustný smer

a playzaverny pre zaverný smer:

function playpriepustny () {

volt.gotoAndPlay('priepustny');amper.gotoAndPlay('priepustny');

priepustnygraf.gotoAndStop(1);

priepustnygraf.priepustnymaska.gotoAndPlay(2);

opn.opn1.gotoAndPlay('priepustny');

opn.opn2.gotoAndPlay('priepustny');

castice.elektron1.gotoAndPlay(2);castice.elektron2.gotoAndPlay(2

);

castice.diera1.gotoAndPlay(2);castice.diera2.gotoAndPlay(2);

}

3.6 Bipolárny tranzistor v zapojení so spoločným emitorom

V tranzistore sa pouţívajú obidva druhy voľných nosičov náboja elektróny i

diery, preto hovoríme o bipolárnom tranzistore. Názov tranzistor pochádza z anglických

slov TRANSfer resISTOR, ako názorný pohľad na podstatu tranzistora, transformáciu

funkcie rezistora zo vstupu na výstup. Tranzistory dnes pracujú spoľahlivo v mnohých

elektronických aplikáciách ako diskrétne prvky, alebo aj ako súčasť integrovaných

obvodov. Bipolárny tranzistor je v podstate vhodne technologicky upravená

monokryštalická doštička. Dvomi metalurgickými rozhraniami je táto doštička

rozdelená na tri vrstvy, pričom ich usporiadanie umoţňuje vytvárať dve modifikácie

tranzistorov:

• PNP tranzistory

• NPN tranzistory

34

Kaţdá z vrstiev tranzistora je opatrená kovovým kontaktom. Kontakty sú

vyvedené von cez puzdro súčiastky. Jednotlivé vrstvy tranzistorovej štruktúry majú

svoje mená, emitor (označujeme E), báza (B), kolektor (C).

Pri tvorbe animácii sme sa zaoberali tranzistorovou štruktúrou NPN, ktorá je v

stave aktívneho reţimu. Vonkajšími zdrojmi napätia orientujeme emitorový priechod

priepustne a kolektorový priechod nepriepustne. Pretoţe odpor emitora je oveľa menší,

ako odpor bázy, bude báza zaplavená veľkým počtom elektrónov z emitora. Báza má

takúto moţnosť injekcie značne obmedzenú. Injektované nosiče v báze len čiastočne

rekombinujú a podieľajú sa na prúde bázy. Pravdepodobnosť rekombinácie je zníţená

ešte aj tým, ţe báza je veľmi úzka. Takto prevaţná väčšina elektrónov prejde od

emitorového priechodu cez bázu aţ ku kolektorovému priechodu. Vplyvom napätia

kolektorového priechodu sú menšinové nosiče – elektróny, priťahované vrstvou

kolektora. Kolektorový prúd IC je zmenšený o bázový (rekombinačný) prúd IB (Čuntala,

1999).

Grafické rozhranie predstavuje tranzistor v zapojení so spoločným emitorom, ku

ktorému je pripojený voltmeter a potenciometer. (príloha 2, obr.6)

Tranzistor sme skonvertovali na MovieClip, vo vnútri ktorého sme zanimovali

pohyb častíc podobne, ako je to opísané v predchádzajúcej kapitole. V princípe môţeme

povedať, ţe sme animovali ilustráciu, ako sa častice pohybujú v tranzistore typu NPN

v aktívnom reţime.

Kľúčový interaktívny prvok animácie predstavuje potenciometer, ktorému sme

pomocou kódu vloţili vlastnosť otáčania myšou. Premenná myDegrees predstavuje

stupne otáčania potenciometra. Kód sme pridali na MovieClip potenciometer. Ak

klikneme myšou na potenciometer, podmienka ktorá túto skutočnosť testuje - pressing,

je splnená a odštartuje sa nielen otáčanie potenciometra ale i voltmetra. Ak ho

uvoľníme, tak podmienka nie nebude splnená:

onClipEvent (enterFrame) {

if (_parent.pressing == true) {

myRadians = Math.atan2((_parent._ymouse-this._y),

(_parent._xmouse-this._x));

myDegrees = Math.round(myRadians*180/Math.PI);

...// kód na ohraničenie otáčania, aby sa nebola možnosť otočiť

potenciometer o 360 stupňov ...

35

setProperty(_parent.potenciometer.potenciometerp.ruckapo,

_rotation, myDegrees+90);

setProperty(_parent.voltmeter.ruckavo, _rotation,

(myDegrees+90)/2.35);

}

}

Úlohou potenciometra je zvyšovať napätie v obvode s tranzistorom. Keď úbytok

napätia medzi bázou a emitorom dosiahne hodnotu 0.7 V, tak sa báza tranzistora otvorí

a tranzistorom začne pretekať prúd. V našom prípade sme samozrejme nepracovali

s hodnotou napätia, ale sme kontrolovali o koľko stupňov je otočený potenciometer,

a podľa toho sme odvodili vzorec pre otáčanie ukazovateľa voltmetra. Na určitej

hodnote otočenia, presnejšie keď je na voltmetri zobrazená hodnota 0.7 V, sa animácia

v MovieClipe s tranzistorom odštartuje. V opačnom prípade, keď pouţívateľ otočí

potenciometer na hodnotu menšiu, ako je poţadovaná pre vykonanie funkcie

tranzistora, sa animácia tranzistora zastaví (prejde na snímku 9 a odtiaľ sa vráti na

snímku 1).

function animationStart () {

if ((potenciometer.myDegrees<91) and (potenciometer.myDegrees>(-

36))) {

koren.fademyAnimation.gotoAndPlay(2);}

if ((potenciometer.myDegrees>91) or (potenciometer.myDegrees<(-36)))

{

koren.fademyAnimation.gotoAndPlay(9);}

}

3.7 JK preklápací obvod

V podkapitole 3.2 sme sa zaoberali animovaním RS preklápacieho obvodu. JK

preklápací obvod je realizovaný z dvoch RS obvodov, takţe v podstate sme mohli

zopakovať ten istý postup, čo však nebol náš prípad, keďţe sme chceli poukázali na to,

ţe cieľ môţeme dosiahnuť aj inými metódami a postupmi.

Preklápací obvod JK je synchrónny bistabilný preklápací obvod. Má vstupy J a

K. Vstup J (= S) nastavuje log.1, K (= R) nastavuje log.0. Rozšírením je interpretácia

vstupnej kombinácie R = S = 1, ktorá je pri obvode RS zakázaná. Obvod JK pri tejto

kombinácii vstupov zneguje (preklopí, invertuje) uloţenú hodnotu. Vstupy sú aktívne v

36

logickej 1. Keď je aktívny vstup J, výstup je nastavený do log 1. Ak je aktívny vstup K,

výstup sa nuluje. Ak sú obidva vstupy aktívne, na výstupe sa objaví opačný stav, ako

bol predchádzajúci. Ak nie je aktívny ani jeden vstup, na výstupe sa objaví

predchádzajúci stav.

Základom pre vytvorenie grafického rozhrania bol JK obvod a tabuľka hodnôt

pre obvod. Pridaním tri ComboBoxov sme umoţnili priame zadávanie vstupných

hodnôt ako aj hodnoty predchádzajúceho stavu výstupu. Na ovládanie časovej osi sme

pridali tlačidlá pre štart, pauzu, zrýchlenie dopredu a dozadu. (príloha 2, obr.7)

Problém priebehu signálu sme aj tentoraz riešili maskou. Pri obvode RS sme

kódom určovali, či vodičom prejde signál v tvare 0 alebo 1. Pri JK obvode sme sa

rozhodli, ţe pre kaţdú kombináciu vstupov a predchádzajúceho stavu, si nakreslíme

celý obvod uţ so zafarbenými signálmi, a kaţdý obrázok vloţíme na osobitnú snímku

v MovieClipe, ktorý je na maskovanej vrstve. Potom po zmene hodnoty jedného z troch

ComboBoxov sa spustí funkcia checkIt pre nastavenie snímky v príslušnom

MovieClipe, na ktorej sa nachádza zodpovedajúci obrázok. Táto funkcia okrem iného

nastavuje aj označenie výstupnej hodnoty v tabuľky. Premenné jj, kk a qq sú určené pre

hodnoty vstupov a predchádzajúceho výstupu, pričom sa nastavujú po zmene hodnoty

niektorého z ComboBoxov. Funkcia checkIt je zaloţená na podmienkach. Jedna

podmienka je pre jednu kombináciu, ktorých je dohromady osem. Pri kaţdej kombinácii

je splnená vţdy, len jedna podmienka, ktorá nastaví potrebné elementy na správny stav

zadanej kombinácie:

function checkIt(){

if ((jj==1)and(kk==1)and(qq==1)and(signal._currentframe!=1)) {

signal.gotoAndStop(1); tabulka.gotoAndStop(1);

signal.maska.gotoAndStop(1); pausepom = false;

}

if ((jj==0)and(kk==1)and(qq==0)and(signal._currentframe!=2)) {

signal.gotoAndStop(2); tabulka.gotoAndStop(2);

signal.maska.gotoAndStop(1); pausepom = false;

}

...// funkcia pokračuje podobne pre všetkých osem kombinácií

}

Po nastavení obrázku, tlačidlom Spustiť odštartujeme MovieClip maska,

postupne prekrývajúci signály obvodu funkciou MotionTween. Daný MovieClip sa

37

nachádza na vrstve, ktorá maskuje MovieClip s ôsmimi obrázkami, takţe dáva dojem,

akoby zafarbené signály postupovali. Po stlačení Tlačidla Pauza sa MovieClip maska

zastaví na aktuálnej pozícii. Tlačidlá na posúvanie priebehu časovej osi vpred a vzad,

pracujú v intervaloch. Ak klikneme myšou na tlačidlo Dopredu a podrţíme ho stlačené,

tak sa nastaví interval pre funkciu ff. Interval je tridsať milisekúnd, čo znamená ţe

kaţdých 0.03 sekundy sa odohrá funkcia, ktorá nastaví MovieClip masku z aktuálnej

snímky na osem snímok dopredu. Po uvoľnení tlačidla sa interval vymaţe, a posúvanie

zastaví. Takýmto spôsobom zrýchľujeme simuláciu. Ak chceme zrýchlene posúvať

dozadu tak namiesto osem snímok dopredu nastavíme osem snímok dozadu.

function ff () {

koren.signal.maska.gotoAndStop(koren.signal.maska._currentframe +

8);

ffbtn.onPress = function () {ff_ID = setInterval(ff,30);}

ffbtn.onRelease = function () {clearInterval(ff_ID);}

3.8 Karnaughove Mapy

Karnaughova mapa predstavuje grafický zápis pravdivostnej tabuľky,

kde kaţdému riadku zodpovedá určité políčko. Mapa má preto celkom 2N políčok,

kde N je počet vstupných premenných. O kaţdom políčku mapy môţeme povedať, či

patrí priamej premennej alebo jej negácii. Karnaughova mapa je metóda, ktorá sa

pouţíva na minimalizáciu logickej funkcie a jej analýzu. Pri zjednodušovaní sa riadime

formálnymi pravidlami a nemusíme tak poznať príslušný matematický aparát. Dve

susedné políčka sa líšia len v hodnote jednej premennej. Zápis pomocou tabuľky je pre

nás pri riešení syntézy logických obvodov nesmierne dôleţitý, pretoţe priamo z tabuľky

vieme vypísať úplnú disjunktnú normálnu formu (UDNF), ktorú následne môţeme

pomocou algebraických metód minimalizovať, a získať tak minimálnu disjunktívnu

normálnu formu (MDNF), čím zníţime počet logických členov v obvodovej realizácii.

Táto metóda je však prehľadná len pre funkciu najviac štyroch premenných, pre funkcie

vyššieho počtu premenných je jej pouţitie uţ problematické. Mapa je v podstate

tabuľkový zápis funkcie, pri ktorej jednotlivé body funkcie zoskupujeme do vopred

dohodnutých konfigurácií.

38

V našom prípade sme sa rozhodli zanimovať mapu o rozmere 2x2. Cieľom celej

animácie bolo dosiahnuť, aby pri vykresľovaní konkrétnej mapy, sa zobrazovala aj

UDNF a MDNF pre určitú funkciu, čiţe pre zvolenú kombináciu riadkov v tabuľke.

Ako grafické rozhranie animácie sme pouţili štyri CheckBoxy (zaškrtávacie

políčka), pomocou ktorých dokáţeme voliť zodpovedajúce riadky, to znamená, ţe pre

kaţdý riadok jeden CheckBox. Riadky sú zobrazené v prehľadnej tabuľke, ktorú sme

skonvertovali na MovieClip, rovnako ako aj druhú tabuľku - Karnaughovu mapu. Pre

MDNF a UDNF sme vytvorili dve osobitné dynamické textové polia, do ktorých sa

kódom vypisujú funkcie. (príloha 2, obr.8)

Po vyznačení niektorého z CheckBoxov prebehne funkcia, ktorá v MovieClipe

s tabuľkou zafarbí zodpovedajúci riadok na tmavší, čo slúţi ako znázornenie

označeného riadka v tabuľke. Taktieţ na mape sa hodnota v zodpovedajúcom políčku

k vyznačenému riadku zmení na 1. V opačnom prípade, ak CheckBox nebude aktívny,

všetko sa vráti späť do pôvodného stavu, ale len pre určitý riadok v tabuľke. Pri

manipulácii s CheckBoxmi vţdy prebehnú dve funkcie, ktoré sme si vytvorili na výpis

UDNF a MDNF.

Pre výpis UDNF je to funkcia pod menom upravaudnf(). Táto funkcia pomocou

cyklu preverí kaţdý so štyroch CheckBoxov (či je, alebo nie je vyznačený). Ak je

vyznačený, tak do textového poľa pre UDNF vloţí zápis riadka. To znamená, ţe vypíše

iba riadky, ktoré zodpovedajú vyznačeným CheckBoxom. Pri kaţdom novom spustení

funkcie sa obsah textového poľa UDNF vymaţe a vytvorí sa nový:

function upravaudnf() {

udnf.udnftxt.text = '';

for (i=1;i<5;i++) {

if (_root['chb'+i].selected) {

switch (i) {

case 1: udnf.udnftxt.text += 'X1\' X2\''; break;

case 2: udnf.udnftxt.text += 'X1\' X2'; break;

case 3: udnf.udnftxt.text += 'X1 X2\''; break;

case 4: udnf.udnftxt.text += 'X1 X2'; break;

}

}

}

}

Výpis MDNF však predstavuje komplikovanejší prípad, keďţe pre kaţdú

kombináciu je potrebný iný výpis. Vytvorili sme preto funkciu pod menom

39

upravamdnf(). Táto funkcia má za úlohu výpis minimálnej funkcie do MDNF textového

poľa a označenie zodpovedajúcich polí na mape červeným rámčekom. Aby sme vedeli,

čo máme vypísať a vyznačiť, bolo potrebné navrhnúť metódu identifikácie kombinácií

vyznačených ComboBoxov. Pri mape 2x2 máme šestnásť moţných kombinácií.

Vytvorili sme preto premennú typu String, do ktorej pomocou cyklu zapisujeme

jednotlivé kombinácie v tvare napríklad „1010“. Prvý a tretí znak tejto kombinácie je

hodnota 1, čo vlastne znamená, ţe prvý a tretí riadok sú vyznačené. Ak vieme priradiť

obsah premennej typu String zodpovedajúcej kombinácii, tak vieme aj vybrať správny

výpis do textového poľa a snímku, na ktorej je nakreslené správne orámovanie políčok

na mape. Týmto sme zmenšili počet potrebných podmienok v kóde, a namiesto if

pracujeme s funkciou switch.

function upravamdnf() {

mdnfstring = '';

for (i=1;i<5;i++) {

if (koren['chb'+i].selected) {

mdnfstring += '1';} else {mdnfstring += '0';}

}

switch (mdnfstring) {

case'0000': tabulka2.gotoAndStop(1);

mdnf.mdnftxt.text = ''; break;

...

case'1010': tabulka2.gotoAndStop(9);

mdnf.mdnftxt.text = 'X2\''; break;

case'1001': tabulka2.gotoAndStop(15);

mdnf.mdnftxt.text = 'X1\' X2\' + X1 X2'; break;

...

case '1111': tabulka2.gotoAndStop(14);

mdnf.mdnftxt.text = 'X1 X1\''; break;

}

}

40

Záver

Vzhľadom k rýchlemu nástupu, moţnostiam implementácie a pouţívaniu IKT

v rámci nášho kaţdodenného ţivota sme sa touto prácou snaţili poukázať, ţe vyuţitie

interaktívnych animácií je viac ako uţitočné, a môţe sa uplatňovať v mnohých

oblastiach (nielen vo vzdelávaní). V práci sme sa zaoberali analýzou tvorby

interaktívnych animácií, pričom sme popísali dôleţité pojmy a vlastnosti, s ktorými sa

pri ich tvorbe môţeme stretnúť. Vzhľadom na charakter práce, je rozdelená do

teoretickej časti, v ktorej sme sa zaoberali pojmom interaktivita, ako jednou zo

základných vlastností multimédií, ale taktieţ aj jedným z mediálnych elementov –

animáciami, zo všeobecného hľadiska. Praktická časť práce zahŕňa metódy tvorby

animácií v programe Adobe Flash, pričom tieto animácie môţu poslúţiť ako pomôcka

alebo dodatok k vyučovacím materiálom na školách. Práca bola koncipovaná nie

z pedagogického ale technického hľadiska, t.j. zaujímal nás spôsob, akým je moţné

vhodne navrhnúť a zrealizovať tvorbu špecifických interaktívnych animácií. Vzhľadom

k tomu, sme kaţdú z ôsmich animácií detailne popísali a vysvetlili, čím sme poukázali

na rôzne metódy a techniky riešenia problémov pri tvorbe takéhoto typu animácií.

Keďţe sa tento typ animácií vo svete informačných technológií vyuţíva čoraz

intenzívnejšie, predpokladáme, ţe v budúcnosti môţeme očakávať napredovanie v tejto

oblasti. Program Adobe Flash sa vyznačuje jednoduchosťou spôsobu tvorby animácií

a môţeme povedať, ţe dnes predstavuje jeden z najvhodnejších programov určených na

takýto účel. V práci sme zároveň poukázali, ţe nie sú potrebné veľké znalosti z oblasti

programovania, pre tvorbu jednoduchých a pritom kvalitných animácií.

Veľkou výzvou pri tvorení tejto práce bola skutočnosť, ţe neexistuje veľa

odborných publikácií z tejto oblasti, vzhľadom k tomu, ţe interaktívne animácie sa

v podstate začali rozvíjať aţ koncom 20-teho storočia, pričom sa rozvíjajú tak rýchlo, ţe

je značne zloţité zdokumentovať techniku a spôsob ich tvorby. Vo väčšine prípadov

teda moţno nájsť skôr práce, ktoré sa síce zaoberajú technikami tvorby počítačovej

animácie, avšak bez interaktivity.

Keďţe v súčasnosti existuje len veľmi malé mnoţstvo publikácií, ktoré sa

zaoberajú podobnou problematikou, predpokladáme, ţe práca bude slúţiť ako podklad

pre budúce spracovanie príbuznej témy, alebo ako základ na spracovanie diplomovej

práce.

41

Zoznam použitej literatúry

BECKERMAN, H. 2003. Animation: the whole story. New York, USA : Allworth

Press, 2003. 336 s. ISBN 978-1-58115-301-5

ČUNTALA, J. – HRIANKA, M. – KEJZLAR, M. 1999. Elektronika. Ţilina: EDIS ŢU,

1999. 121 s. ISBN 80-7100-683-1

CHEN, P. et al. 1996. Designing web animation. 1.vyd. Indianapolis, USA : New

Riders Publishing, 1996. 310 s. ISBN 978-1-56205-647-6

GUNIŠ, J. et al. 2010. Ďalšie vzdelávanie učiteľov základných škôl a stredných škôl v

predmete informatika: Multimédia. Bratislava : Štátny pedagogický ústav, 2010. ISBN

978-80-8118-XXX-X (zatiaľ v recenznom konaní)

MAGDIN, M. et al. 2009. Projektovanie multimediálnych aplikácií. 1.vyd. Nitra :

Fakulta prírodných vied UKF, 2009. ISBN 978-80-8094-626-5

MAGDIN, M. 2010. Kritéria pre evaluáciu e-learningových výučbových kurzov

z hľadiska zaradenia multimédií: Písomná práca ku skúške. Ostrava : Ostravská

univerzita v Ostrave, 2010. 32 s.

RAUTERBERG, M. – MENOZZI, M. – WESSON, J. 2003. Human-Computer

Interaction. Holandsko, Amsterdam : ISO Press, 2003. 1126 s. ISBN 978-1-58603-363-

7

REDAJ, M. – TOTH, P. 2007. Sekvenčné logické obvody [online]. Košice: SPŠ

Elektrotechnická Košice. 2007.[cit. 2010-03-19]. Dostupné na internete:

http://www.spseke.sk/sb/elektronika/cislicova_technika_slo.pdf

VAJDA, D. et al. 2001. Návody k laboratórnym cvičeniam z fyziky. 1. vyd. Ţilina: EDIS

ŢU, 2001. 196 s. ISBN 80-7100-819-2

WELLS P. 1998. Understanding animation. 1.vyd. New York, USA : Routledge, 1998.

280 s. ISBN 0-415-11596-5

42

Prílohy

Príloha č.1: Obrázky prostredia programu Adobe Flash

Obr.1: Časová os

Obr.2: Panel kniţnica

43

Obr.3: Panel nástrojov

Obr.4: Panel pre vkladanie príkazov jazyka ActionScript

44

Obr.5: Paleta farieb

Obr.6: Vlastnosti objektu MovieClip, Panel vlastnosti

45

Príloha č.2: Ukážky z tvorby interaktívnych animácií

Obr.1: Elektromagnetická indukcia

Obr.2: SR preklápací obvod

46

Obr.3: Kondenzátor v obvode jednosmerného prúdu

Obr.4: Jednoduchý frekvenčný filter

47

Obr.5: Voltampérová charakteristika PN prechodu

Obr.6: Bipolárny tranzistor v zapojení so spoločným emitorom

48

Obr.7: JK preklápací obvod

Obr.8: Karnaughove mapy

49

Príloha č.3: CD médium - zdrojové súbory animácií, bakalárska práca

v elektronickej podobe