INTERAKTÍVNA MULTIMEDIÁLNA APLIKÁCIA GRAFICKÉ A MULTIMEDIÁLNE SYSTÉMY SEMESTRÁLNE ZADANIE 2

Transkript

1 SLOVENSKÁ TECHNICKÁ UNIVERZITA V BRATISLAVE MATERIÁLOVOTECHNOLOGICKÁ FAKULTA INTERAKTÍVNA MULTIMEDIÁLNA APLIKÁCIA GRAFICKÉ A MULTIMEDIÁLNE SYSTÉMY SEMESTRÁLNE ZADANIE 2 Študijná skupina: 1. Pracovná skupina: 12. Študijný program: AIA Ročník: 1. Stupeň štúdia: II. Forma štúdia: DKM Trnava 2010/11 Bc. Jana Bekéniová Bc. Marek Kukumberg

2 Obsah 1 Úvod zadanie Riešenie Scéna A Scéna B Scéna C Prílohy... 8 Obrázky Obrázok 1 Scéna A... 4 Obrázok 2 Scéna A geometrický útvar s pridelenou trajektóriou, zmenami farieb a tvaru... 5 Obrázok 3 ActionScript pre zobrazenie aktuálneho dátumu a času... 5 Obrázok 4 Scéna B... 6 Obrázok 5 Scéna C

3 1 Úvod zadanie Pomocou autorského nástroja Adobe Flash (Pro CS 5) vytvorte interaktívnu multimediálnu aplikáciu pre zabudovanie do HTML stránky, pozostávajúcu z týchto scén a s týmito povinnými komponentmi: 1. Scéna A Animovaný text s menom vedúceho PS, zobrazený vo farbe a pohybujúci sa cyklicky po kruhovej trajektórii. Tlačidlo pre pozastavenie animovaného textu a jeho reštart. Minimálne jeden vyplnený geometrický tvar meniaci svoju polohu po zvolenej trajektórii a zároveň tvar (morphing). Zobrazenie aktuálneho počítačového dátumu. Audio sekvenciu s možnosťou vypnutia/zapnutia prehrávania. Tlačidlo Prepnúť pre prechod na scénu B alebo C. Tlačidlo Koniec pre ukončenie aplikácie. 2. Scéna B Animovaný text s menom druhého a prípadne ďalších členov PS, zobrazený vo farbe a pohybujúci sa cyklicky po eliptickej trajektórii. Tlačidlo pre zmenu trajektórie pohybu a návrat na pôvodnú. Minimálne jednu vyplnenú kružnicu (kruh) pohybujúcu sa cyklicky po kruhovej dráhe a meniacu priemer. Tlačidlo Prepnúť pre prechod na scénu A alebo C. Tlačidlo Koniec pre ukončenie aplikácie. 3. Scéna C Obsahom scény je voliteľná animácia, doplnená o audio a video sekvenciu. Po zobrazení HTML stránky v prehliadači sa má najprv zobraziť Flash aplikácia (intro) a po kliknutí na tlačidlo Koniec samotný obsah HTML stránky pozostávajúci z formátovaného textu titulnej strany e-referátu. 3

4 2 Riešenie 2.1 Scéna A Obrázok 1 Scéna A Scéna A má podľa zadania obsahovať animovaný text s menom vedúceho PS, zobrazený vo farbe a pohybujúci sa cyklicky po kruhovej trajektórii. 1. Pomocou textového nástroja sme napísali meno vedúceho PS, priradili sme mu farbu a následne sme ho skonvertovali na MovieClip 2. Funkcia Add Classic Motion nám umožnila vytvoriť pomocnú vrstvu, na ktorej sme vytvorili kruhovú trajektóriu, po ktorej sa meno bude pohybovať. 3. Zvolíme si frame 1 na časovej osi a meno pripneme k trajektórii, kde sme si zvolili jej začiatok, v ďalších kľúčových oknách urobíme to isté. 4. Pomocou funkcie Create Classic Tween dokončíme animáciu pohybu mena po zvolenej trajektórii. 5. Podobným spôsobom postupujeme pri animácii geometrického prvku presúvajúceho sa po zvolenej trajektórii 4

5 Obrázok 2 Scéna A geometrický útvar s pridelenou trajektóriou, zmenami farieb a tvaru Scéna A ďalej obsahuje: tlačidlá pre zastavenie a spustenie animácie ukončenie aplikácie zastavenie a spustenie hudby aktuálny dátum s časom prepínanie na scénu B Pre zobrazenie aktuálneho dátumu a času sme použili následný ActionScript: Obrázok 3 ActionScript pre zobrazenie aktuálneho dátumu a času 5

6 V ActionScripte je napríklad aj ošetrené zobrazovanie minút v prípade, že číslo nie je dvojmiestne. 2.2 Scéna B Scéna B obsahuje okrem pohybujúceho geometrického útvaru po trajektórii v tvare kruhu aj meno druhého člena pracovnej skupiny pohybujúce sa po dvoch trajektóriách v tvare oválu. Presun na druhú trajektóriu je umožnený pomocou tlačidla. a presun na pôvodnú trajektóriu pomocou tlačidla. Obrázok 4 Scéna B Scéna ďalej obsahuje: tlačidlá scéna A a scéna C, tlačidlo koniec. 2.3 Scéna C Scéna C je realizovaná importom hotovej animácie vo formáte *.flv, ktorá sa spúšťa automaticky po prepnutí sa na scénu C. Ďalej je v scéne umiestnená vrstva s importovanou hudbou, ktorá hrá počas celej animácie. Zastaviť hudbu je možné v scéne A, kde je na to vytvorené tlačidlo. Taktiež aj scéna C obsahuje tlačidlo, ktoré ukončí animáciu a prepne stránku na titulnú stranu dokumentácie, pomocou odkazu v ActionScripte a je obsiahnutá v súbore zadanie_bekeniova_kukumberg.html 6

7 Obrázok 5 Scéna C 7

8 3 Prílohy gmsu2_01_12.html gmsu2_01_12.swf gmsu2_01_12.fla zadanie_bekeniova_kukumberg.html Webová stránka s vytvorenou aplikáciou Vyexportovaná animácia Súbor interaktívnej multimediálnej aplikácie vytvorený v Adobe Flash Úvodná stránka dokumentácie zobrazujúca sa po ukončení animácie 8