V tomto príspevku sa zaoberáme možnosťami využitia technológie Adobe Flash na popularizáciu vedy a techniky na web stránkach Katedry mikroelektroniky (Ústav elektroniky a fotoniky), FEI STU v Bratislave. V Adobe Flash sme vytvorili jednoducho editovateľný skelet flash prehrávača, ktorý dokáže upravovať aj užívateľ bez znalostí ActionScriptu.Príspevok opisuje jednoduchú editovateľnosť a prehľadnosť vytvorenej kostry. V závere príspevku sú uvedené aj prezentačné výstupy – videá, vytvorené pomocou nami vytvoreného skeletu.

1. Úvod

Je zaujímavé, že aj v dnešnej dobe, keď sú internet a informačné technológie súčasťou nášho každodenného života, je otázka popularizácie vedy a techniky skutočne horúcou témou, ktorá zamestnáva skupiny odborníkov zo širokého spektra zamerania.

Cieľom popularizácie, ako takej, by malo byť zlepšenie vnímania vedy a techniky v povedomí celej spoločnosti. Zámerom rôznych organizácií je vzbudiť záujem mladých ľudí o štúdium vedeckých a technických disciplín, informovať verejnosť o poznatkoch vedy a techniky a o nutnosti podporovať vedu a techniku, ktoré sú základom hospodárskeho a spoločenského pokroku a pomáhajú riešiť globálne problémy a výzvy. Z rovnakého dôvodu organizuje napríklad Ministerstvo školstva v tomto roku už 8. ročník Týždňa vedy a techniky. V súlade s touto stratégiou zriadilo v roku 2007 Ministerstvo školstva SR Národné centrum pre popularizáciu vedy a techniky v spoločnosti, ako podporný nástroj v oblasti popularizácie vedy a techniky na celoslovenskej úrovni a smerom voči zahraničiu.

Napriek snahám spomínaných organizácií, podujatí či portálov, nie je dostatočná popularizácia vedy a techniky ani zďaleka zabezpečená. Keď si vezmeme možnosti dnešnej doby a spôsob života mladých generácií, je zrejmé, že stále máme veľké pole pôsobnosti, ako vedu ešte lepšie spopularizovať. Generácia mladých ľudí, trávi väčšinu svojho času na internete. Ten nám ponúka široké spektrum možností ako sa dostať „user friendly“ formou bližšie k mladým ľuďom, resp. k laickej verejnosti ako takej.

No pokiaľ sa ako bežní užívatelia pozrieme na internet, nájdeme tu veľa statických či dynamických stránok. No vo svojej podstate mnohým týmto stránkam stále chýba veľa zo schopností, ktoré sú pre nás pri desktopových aplikáciách úplnou samozrejmosťou. S využitím možností aktuálnych technológií na tvorbu web stránok ako HTML, CSS alebo JavaScript funkcionalitu a komfort obsluhy desktopových aplikácií bohužiaľ dosiahnuť nedokážeme. Aj keď s využitím JavaScriptu sa k tomu dokážeme aspoň čiastočne priblížiť.

No pokiaľ sa ako bežní užívatelia pozrieme na internet, nájdeme tu veľa statických či dynamických stránok. No vo svojej podstate mnohým týmto stránkam stále chýba veľa zo schopností, ktoré sú pre nás pri desktopových aplikáciách úplnou samozrejmosťou. S využitím možností aktuálnych technológií na tvorbu web stránok ako HTML, CSS alebo JavaScript funkcionalitu a komfort obsluhy desktopových aplikácií bohužiaľ dosiahnuť nedokážeme. Aj keď s využitím JavaScriptu sa k tomu dokážeme aspoň čiastočne priblížiť.

Jednoducho povedané na prezentáciu najnovších trendov z vedy a techniky je treba využívať najmodernejšie a najnovšie technológie, ku ktorý flash bezpochyby patrí. Vieme v ňom vytvárať interaktívne aplikácie, pomocou ktorých sa snažíme zaujať a prilákať nových záujemcov o štúdium na Ústave elektroniky a fotoniky.

2. Špecifikácia riešenia

Pri tvorbe flash video prehrávača bolo našou hlavnou prioritou naprogramovať univerzálnu funkcionalitu prehrávania tak, aby sa pri editácii alebo vytváraní nového videa nemuselo vôbec zasahovať do kódu programu, poprípade aby zásahy boli čo najmenšie. Vďaka tomu na prácu s kostrou prehrávača netreba žiadne znalosti z ActionScriptu. Užívateľ, ktorý bude vytvárať / editovať video ( ďalej len užívateľ ) si vystačí so základnou znalosťou programu Adobe Flash.

Riešenie popularizácie vedy a techniky pomocou prezentačných videí je moderným spôsobom prezentácie a ak ho skĺbime s citom pre detail (kvalitné časovanie videa) a estetickým cítením (dobre vytvorená grafika), získame vynikajúci nástroj na prezentáciu ako vedy a techniky, tak aj celého Ústavu elektroniky a fotoniky.

3. Základný vzhľad a funkcie skeletu

Graficky sa skelet (Obr. 1) skladá z 3 panelov.

• Prvý panel – hlavný panel (panel animácii) o veľkosti 725 × 325 px. Na tomto paneli je spustená hlavná animácia videa.
• Druhý panel – panel menu o veľkosti 725 × 30 px, na ktorom je umiestnené ovládanie prehrávača.
• Tretí panel – panel náhľadov o veľkosti 725 × 120 px, na ktorom sú umiestnené všetky náhľady jednotlivých častí videa v zmenšenom formáte.

Obr. 1. Základný vzhľad skeletu

3.1. Hlavný panel – Panel animácií

Po spustení prehrávania sa na paneli animácií prehráva hlavná animácia videa. Tento panel sa pri prehrávaní nedá žiadnym spôsobom ovládať ani sa doň nedá zasahovať.

3.2. Panel menu

Na paneli menu sú umiestnené tlačidlá na ovládanie flash prehrávača. Základná funkcionalita, ktorú menu poskytuje je:

• prechod na domovskú stránku,
• vypnutie / zapnutie zvuku,
• zastavenie / spustenie prehrávania,
• ukončenie prehrávania videa.

Ďalej sa na paneli menu nachádza status bar na grafické znázornenie uplynutého času a taktiež počítadlo na presné číselné vyjadrenie uplynutého a celkového času videa. Status bar je iba informačný a nedá sa pomocou neho video seekovať. Status bar je informačný hlavne z toho dôvodu aby sa návštevník stránky nemohol preklikávať medzi jednotlivými časovými úsekmi a aby sa k nemu dostali všetky potrebné informácie.

3.3. Panel náhľadov

Na paneli náhľadov sa nachádzajú jednotlivé náhľady častí videa v zmenšenom formáte. Pri prehrávaní časti videa, ku ktorej prislúcha určitý náhľad, je daný náhľad zvýraznený. Pomocou šípok sa môžeme pohybovať medzi nasledujúcimi a predchádzajúcimi náhľadmi. Jednotlivé náhľady sú vytvorené ako odkazy, ktoré sa dajú nasmerovať na externé webové zdroje.

3.4. Užívateľské rozhranie

Nie je vytvorené žiadne užívateľské rozhranie, pomocou ktorého by sa dalo s „kostrou“ pracovať externe, celá tvorba / editácia videí prebieha priamo vo vývojovom prostredí Adobe Flash. Dôvodov prečo nie je vytvorené užívateľské rozhranie, pomocou ktorého by sa dalo s videami pracovať mimo vývojového prostredia je hneď niekoľko

• ochrana celej aplikácie pred používaním mimo ústavu,
• pri vytvorení užívateľského rozhrania by prišlo k rozsiahlemu obmedzeniu možností technológie flash – ako grafických, tak aj programových,
• v prípade potreby je možné zasahovať priamo do kódu celej aplikácie.

4. Adresárová štruktúra skeletu

Dodržanie adresárovej štruktúry skeletu nie je striktne požadované, ale je vytvorená tak, aby sa v nej užívateľ jednoducho a rýchlo zorientoval. Dodržiavanie adresárovej štruktúry nie je nutné aj vďaka vlastnosti Adobe Flash, že instancie vytvorené na scéne sú naviazané na objekty v knižnici a nie na ich presné adresárové umiestnenie.

Celá aplikácia je rozdelená do logicky súvisiacich priečinkov, vďaka čomu sa zvyšuje jej prehľadnosť. Väčšina kódu je centralizovaná na jedno miesto (Intro – nastavenia Obr.10), aby sa užívateľ pri práci s videami nemusel opakovane presúvať po celej aplikácii. Samozrejme, niektoré fragmenty kódu sú umiestnené priamo na timeline objektu, ktorému patria, pretože ich presunutím by sa aplikácia stala neprehľadnou, alebo ťažšie editovateľnou.

4.1. Základná adresárová štruktúra

Základná adresárová štruktúra je zobrazená na Obr. 2. Užívateľ pri vytváraní videa pracuje hlavne s priečinkom „Video“. V ostatných priečinkoch je uložený vzhľad a logika prehrávača.

Obr. 2. Základná adresárová štruktúra

4.2. Priečinok „Backgrounds“

V priečinku „Backgrounds“ (Obr. 3) sa nachádza pozadie celého klipu, pozadie menu a pozadie panelu, na ktorom sa nachádzajú zmenšeniny. Ak chce pracovník zmeniť pozadie niektorého z týchto prvkov stačí ak upraví priamo objekt v tomto priečinku. Vytváranie nového objektu sa neodporúča, pretože pomocou týchto objektov je na scéne vytvorených niekoľko instancií, ktoré by musel pracovník ručne meniť.

Obr. 3. Priečinok „Backgrounds“

4.3. Priečinok „Menu“

V priečinku „Menu“ (Obr. 4) je uložená logika a vzhľad menu, pomocou ktorého užívateľ ovláda flash prehrávač. V priečinkoch „Tlačidlá“ a „Tooltip“ sú uložené viaceré vzhľady tlačidiel alebo pozadia nápovedy. Ak chceme zmeniť vzhľad niektorej instancie, vykonáme to v objekte „MenuLogika“, kde, ako už názov napovedá, je uložená celá logika menu. Priečinok „StatusBar“ obsahuje objekty, ktoré vytvárajú grafické znázornenie uplynutého času. Posledný objekt „Timer“ obsluhuje časovač, ktorý počíta celkový a uplynutý čas videa. Tento objekt nie je určený na priamu editáciu, čas videa „Timer“ získava automaticky z objektu „Intro“.

Obr. 4. Priečinok „Menu“

4.4. Priečinok „Preloader“

Priečinok „Preloader“ (Obr. 5) obsahuje komponentu úvodného načítania celej animácie. Preddefinované sú dva vzhľady – kruhový a priamy. Pokiaľ chce užívateľ zmeniť vzhľad preloaderu, vykoná to v objekte „Intro“ (Obr. 2). Veľmi jednoduchá je aj zmena grafického vzhľadu preloaderu – stačí editovať objekt „Napln“ (Obr. 5).

Obr. 5. Priečinok „Preloader“

4.5. Priečinok „Thumbnails“

Priečinok „Thumbnails“ (Obr. 6) obsahuje komponent na prácu s náhľadmi. V priečinku „Sipky“ je uložená grafika šípok, ktorú meníme jednoduchou editáciou týchto objektov. Priečinok „Thumbs“ obsahuje objekty náhľadov, ktoré edituje, pridáva alebo odstraňuje užívateľ podľa obsahu jednotlivých častí aktuálneho videa. Objekt „ThumnailsLogika“ obsahuje celú logiku tohto komponentu.

Obr. 6. Priečinok „Thumbnails“

4.6. Priečinok „Tlacidla“

Tento priečinok obsahuje iba tlačidlá „Play“ a „Restart“ (Obr. 7), ktoré sú použité na spustenie prípadne reštartovanie celého videa. Ich grafická editácia je opäť veľmi jednoduchá – ich priama editácia.

Obr. 7. Priečinok „Tlacidla“

4.7. Priečinok „Video“

Priečinok „Video“ (Obr. 8) je hlavný priečinok, s ktorým sa pracuje pri vytváraní nového videa. Odporúčame užívateľom, kvôli vyššej prehľadnosti, jednotlivé logické časti videa rozdeľovať do podpriečinkov, vďaka čomu sa budú užívateľovi jednoduchšie vytvárať aj náhľady. Na Obr. 8 taktiež vidíme, že členenie týchto logických častí „Video“ na „Fotky“, „MovieClipy“ a „Texty“, taktiež prispieva k zvýšeniu prehľadnosti celej aplikácie.

Obr. 8. Priečinok „Video“

5. Objekt „Intro“

Objekt „Intro“ (Obr. 2) je hlavným objektom celého skeletu prehrávača. Všetky potrebné nastavenia, ktoré musí užívateľ urobiť po vytvorení nového videa sa nachádzajú v časti „Nastavenia“ na vrstve (layer) s názvom „Script“ (Obr. 9).

Obr. 9. Umiestnenie hlavných nastavení skeletu

Úvodná a ukončovacia animácia má 47 snímok (frame), takže jednotlivé časti videa sa umiestňujú na vrstve medzi tieto základné animácie.

5.1. Editácia kódu

Ako môžeme vidieť na Obr. 10, užívateľ po vytvorení nového videa upraví iba niekoľko jednoduchých nastavení a celé video je spolu s prehrávačom pripravené na spustenie.

Obr.10. Editácia hlavných nastavení

Jednotlivé fragmenty kódu určené na editáciu

ThumbArray

Thum Array je premenná, pomocou ktorej užívateľ definuje počet náhľadov na paneli. Základný počet je nastavený na maximálne 9 náhľadov. Tento počet by mal byť plne postačujúci aj pre video dĺžky cca 5 minút. Avšak v prípade, že užívateľ bude potrebovať aj ďalšie náhľady, jednoducho ich vytvorí v priečinku „Thumbnails“ (Obr. 6) a pridá ich do objektu „ThumbnailsLogika“. Nové instancie objektov je nevyhnutné pomenovať, aby sa mohli pridať do premennej ThumbArray.

UrlArray

UrlArray je premenná, ktorá určuje na akú URL sa dostaneme po kliknutí na jednotlivé náhľady.

inFrames a outFrames

inFrames a outFrames sú premenné, ktoré definujú dĺžku začiatočnej a konečnej animácie pre prípad, ak by užívateľ tieto animácie modifikoval. Zmeny týchto animácii užívateľ môže realizovať priamo v objekte „Intro“ (Obr. 2). Začiatočná a konečná animácia môžu byť rozdielne.

TooltipArray

Pomocou premennej TooltipArray definujeme text (tooltip), ktorý sa nám zobrazí pri prechode myškou nad jednotlivými tlačidlami. Toto pole je tu hlavne pre prípad, ak by užívateľ chcel meniť poradie jednotlivých tlačidiel.

Homepage

Premenná Homepage, ako už názov napovedá, definuje domovskú stránku, na ktorú sa dostaneme po kliknutí na tlačidlo domčeka (Obr. 1) v menu.

BackgroundMusic

Premenná BackgroundMusic pri editácii hlavných nastavení objektu „Intro“ slúži na definovanie hudby do videa. Hudba musí byť umiestnená v adresári, v ktorom je umiestnený aj výsledný .swf súbor. Hudbu netreba skracovať na potrebnú dĺžku, pretože skelet ju pri prehrávaní na konci automaticky postupne stíši.

V časti „Nastavenia“ (Obr. 9) sú ďalej definované funkcie logiky aplikácie. Tieto funkcie nie sú určené na priamu editáciu.

6. Objekt „Preloader“

Objekt „Preloader je umiestnený priamo na základnej scéne celej aplikácie (Obr. 5). Základnou funkciou tohto objektu je odstránenie streamingového prehrávania videa, ktoré je pri Flash aplikáciách automatické. V našom prípade je ale streamingové prehrávanie videa nežiaduce, keďže aplikácia je určená hlavne na vytváranie prezentačných videí, pri ktorých je veľmi dôležitá dynamika, ktorá sa pri streamingovom prehrávaní (hlavne pri pomalšom pripojení do internetu) stráca.

Preloader využíva funkcie loaderInfo.bytesLoaded a loaderInfo.bytesTotal, pomocou ktorých zisťuje veľkosť celého videa a objem už načítaných dát. Pomocou týchto dvoch hodnôt potom vypočítava percentuálny podiel načítaných dát k celkovej veľkosti videa, ktorý zobrazuje pomocou preloaderu. Pod grafickým znázornením percent je aj číselné vyjadrenie načítaných dát a celkovej veľkosti videa.

V prípade, že pripojenie do internetu je dostatočne rýchle a video je načítané okamžite, preloader nie je odstránený, ale prejde cez 5% nastavený krok celým procesom načítania. Po načítaní celého videa sa video automaticky nespustí, ale zobrazí sa tlačidlo na spustenie videa.

7. Postup vytvorenia nového videa

Pri tvorbe nového videa je vhodné dodržiavať nasledovný postup, pomocou ktorého sa celý proces zjednoduší:

1. Vytvoriť video rozdelené na logické bloky – uložené v priečinku „Video“
2. Vytvoriť náhľady, ktoré súvisia s jednotlivými blokmi vytvoreného videa. Náhľady sú uložené v priečinku „Thumbnails“->”Thumbs“.
3. Jednotlivé bloky videa je potrebné uložiť do objektu „Intro“ pod masku na samostané vrstvy. Počet framov prehrávania bloku musí byť nastavený na počet framov bloku.
4. V objekte „Intro“ je potrebné medzi prechody jednotlivých častí videa umiestniť ActionScript vykreslenieThumb(1), ktorý slúži na zvýraznenie prehrávaného náhľadu. Číslo v zátvorke reprezentuje poradie časti (alebo náhľady) videa.
5. Pomocou editovateľnej časti kódu v objekte „Intro“ je potrebné nastaviť stránky, na ktoré odkazujú jednotlivé náhľady, domovskú stránku, počet thumbnailsov a názvy ich instancií, poprípade prehrávanú hudbu.

6. Vzorový výstup

Ako vzorový výstup sme vytvorili prezentačné video s dĺžkou približne 3:30 minúty a intro s dĺžkou približne 1:30 minúty.

6.1. Intro

Intro (Obr. 11) bolo tvorené s dôrazom na optimálnu dĺžku, pri ktorej dokáže človek udržať pozornosť a dynamickosť, ktorá dokáže upútať. Animácie Intra sú zosynchronizované s hudbou, aby dotvárali dynamickú atmosféru. Naším hlavným cieľom využitia tohto Intra je zaujať a prilákať nových študentov so záujmom o mikroelektroniku.

Dynamickosť dodáva intru aj hudba, ktorá bola vytvorená skupinou MadDogX a nám bola poskytnutá bez speváckeho podkladu, bezplatne a s povolením autora. Naším záujmom bolo dodržanie autorských zákonov, čo nám pri tvorbe týchto vzorových výstupov robilo veľké problémy, keďže hudba použitá na prezentácie na internete musí byť buď zakúpená, alebo musíme mať písomný súhlas autora hudby, ktorý nás oprávňuje na jej použitie na takýto účel.

Obr. 11. Vzhľad intra

Intro je rozdelené do 4 logických celkov

• História – úvaha nad možnosťou neexistencie mikroelektroniky.
• O Katedre – informovanie potenciálnych študentov o výskume a činnosti na Katedre mikroelektroniky.
• Budúcnosť – snaha ukázať záujemcom o štúdium, že mikroelektronika má budúcnosť.
• Uplatnenie – ukážka uplatnenia absolventov Katedry mikroelektroniky v reálnom svete.

6.2. Prezentačné video

Prezentačné video sme vytvorili ako prezentáciu pracovísk katedry Mikroelektroniky (Ústav elektroniky a fotoniky). Je určené skôr pre uchádzačov z odborných stredných škôl, alebo na prezentáciu katedry medzi poslucháčmi oboznámenými s problematikou. Video je dlhšie, má dĺžku 3:30 minúty, čo je jedným z dôvodov, prečo nemôže slúžiť ako intro po príchode na katedrovú stránku.

Obr. 12. Prezentačné video

Celé prezentačné video je rozdelené do 7 logických častí, ktoré postupne prezentujú celú Katedru mikroelektroniky (Ústavu elektroniky a fotoniky)

• O katedre – prezentácia základných informácií o katedre
• Nanášanie materiálu
• Fotolitografia
• Analýza povrchov
• Návrh IO
• Testovanie IO
• eLearn Central

7. Záver

Vytvorený skelet v programe Adobe Flash je, ako sme prezentovali vyššie, veľmi jednoducho editovateľný a dokáže ho obsluhovať aj užívateľ, ktorý nemá žiadne skúsenosti s ActionScriptom. Graficky sa dá skelet veľmi jednoducho upraviť podľa požiadaviek užívateľa. Na grafickú úpravu a tvorbu pekných animácií taktiež nepotrebuje skoro žiadne znalosti z programovacieho jazyka AS. Videá, ktoré boli vytvorené ako vzorové výstupy, budú použité ako súčasť web stránky Ústavu elektroniky a fotoniky.

8. Poďakovanie

Predložená práca bola vypracovaná na Ústave elektroniky a fotoniky FEI STU Bratislava v Centre Excelencie „CENAMOST“ (Agentúra pre podporu vedy a výskumu, kontrakt č. VVCE-0049-07) s podporou projektov KEGA 3/7248/09 a VEGA 1/0507/09.

9. Literatúra

1. W3schools. Introduction to Flash. www.w3schools.com. [Online]
   http://www.w3schools.com/flash/flash_intro.asp.
2. Hozík, Martin. Úvod do platformy Adobe Flash. flash.jakpsatweb.cz. [Online] 2011.
   http://flash.jakpsatweb.cz/adobe-flash/.
3. Adobe. Výhody platformy Flash. www.adobe.com. [Online] 14. 3. 2009.
   http://www.adobe.com/cz/flashplatform/benefits/.

---

Spoluautorom článku je Ľubica Stuchlíková, Ústav elektroniky a fotoniky, Fakulta Elektrotechniky a Informatiky, Slovenská Technická Univerzita, Ilkovičova 3, Bratislava 812 19
Práca bola prezentovaná na Študentskej vedeckej a odbornej činnosti (ŠVOČ 2011) v sekcii e-Learning a web technológie v elektronike a získala Diplom dekana, ISBN 978-80-227-3508-7