Masarykova univerzita Fakulta}w¡¢£¤¥¦§¨ informatiky !"#$%&'()+,-./012345<yA| Konverze v´yukov´ych animac´ı Bakala´rskˇ a´ prace´ Jakub Pendl Brno, jaro 2013 Prohl´aˇsen´ı Prohlaˇsuji, ˇzetato bakal´aˇrsk´apr´ace je m´ym p˚uvodn´ım autorsk´ym d´ı- lem, kter´ejsem vypracoval samostatnˇe.Vˇsechny zdroje, prameny a lite- raturu, kter´ejsem pˇri vypracov´an´ıpouˇz´ıval nebo z nich ˇcerpal, v pr´aci ˇr´adnˇecituji s uveden´ım ´upln´eho odkazu na pˇr´ısluˇsn´yzdroj. Jakub Pendl Vedouc´ıpr´ace: Mgr. Eva Mr´akov´a, Ph.D. iii Podˇekov´an´ı Na tomto m´ıstˇebych r´ad podˇekoval Mgr. EvˇeMrakov´e,Ph.D. za cenn´e rady a veden´ım´ebakal´aˇrsk´epr´ace. D´ale dˇekuji rodinˇe,vˇsem bl´ızk´ym a pˇr´atel˚um, kteˇr´ımˇepˇri vytv´aˇren´ıt´eto pr´ace podpoˇrili, a bez jejich pomoci by nebylo moˇzn´epr´acidokonˇcit. iv Shrnut´ı C´ılem pr´ace bylo vyhledat volnˇedostupn´ekonverzn´ın´astroje z Flash do HTML5, popsat jejich funkˇcnost, otestovat je na vybran´ych anima- c´ıch urˇcen´ych pro v´yuky logiky a zhodnotit m´ıru ´uspˇeˇsnosti proveden´ı konverze. v Kl´ıˇcov´aslova v´yuka logiky, logika, animace, konverze, Flash, HTML5, JavaScript vi Obsah 1 Uvod´ ............................... 2 2 V´ychoz´ıanimace a poˇzadavky na transformaci . 3 3 Konverze dat .......................... 8 3.1 Pˇredstaven´ıvolnˇedostupn´ych n´astroj˚upro konverzi Flash 8 3.1.1 Adobe Wallaby . 8 3.1.2 Adobe Flash Professional Toolkit for CreateJS . 9 3.1.3 Google Swiffy . 11 3.1.4 FLASH to HTML5 Online . 12 3.1.5 Shumway ...................... 13 3.1.6 Flabaco Flash Banner Converter Beta . 14 3.1.7 Freemake Video Converter . 14 3.1.8 Sparkle Flash Keeper . 15 3.2 Testov´an´ıkonverze FLASH volnˇedostupn´ymi n´astroji . 16 3.2.1 Adobe Wallaby { test . 18 3.2.2 Adobe Flash Professional Toolkit for CreateJS { test.......................... 19 3.2.3 Google Swiffy { test . 20 3.2.4 FLASH to HTML5 Online { test . 23 3.2.5 Shumway { test . 26 3.2.6 Flabaco Flash Banner Converter Beta { test . 28 3.2.7 Konverze n´astrojem Freemake Video Converter { test.......................... 29 3.2.8 Konverze n´astrojem Sparkle Flash Keeper { test . 29 3.3 Zhodnocen´ıvybran´ych n´astroj˚u .............. 29 4 Z´avˇer ............................... 33 Literatura............................... 35 1 1 Uvod´ Souˇcasnou dobu lze urˇcitˇepovaˇzovat pro studenta za jednu z nej- n´aroˇcnˇejˇs´ıch. V dobˇeekonomick´ekrize mus´ı student vˇenovat studiu maxim´aln´ı´usil´ı, pˇr´ıpravu a peˇclivost, jedinˇetak m˚uˇzez´ıskat dostatek znalost´ıa vytvoˇrit si pˇred ostatn´ımi tolik potˇrebn´yn´askok pˇri sv´em prvn´ım vstupu na trh pr´ace. Souˇcasn´adoba ale klade tak´eznaˇcn´en´a- roky na uˇcitele, kteˇr´ıjsou zodpovˇedn´ıza vytv´aˇren´ıvhodn´eho studijn´ıho prostˇred´ı, kter´estudenta dostateˇcnˇemotivuje. Podporou jim mohou b´ytr˚uzn´en´astroje a pom˚ucky, ale zkuˇsenosti ukazuj´ı, ˇzepˇri pˇred´a- van´ı informac´ı v uˇcebn´ım procesu m´av´yjimeˇcnou a nezastupitelnou roli zejm´ena v´ypoˇcetn´ıtechnika coby modern´ıinteraktivn´ıprostˇredek. Aby informace z˚ustala informac´ı, je potˇreba uchovat jej´ız´akladn´ıatri- buty { informace mus´ıb´yt pravdiv´a,srozumiteln´a,aktu´aln´ı, relevantn´ı a etick´a. Pr´acesi klade za c´ıl ovˇeˇrit moˇznost pˇrevodu uˇcebn´ıpom˚ucky pro v´y- uku pˇredmˇetu Uvod´ do logiky a Computational Logic (k´odpˇredmˇetu IB101 a IA008) zaˇrazen´eho do bakal´aˇrsk´ych a magistersk´ych studijn´ıch program˚una Fakultˇeinformatiky Masarykovy univerzity (v tomto pˇr´ı- padˇeanimac´ıprvotnˇevytvoˇren´ych ve form´atu Flash) do jin´eho, ekono- micky v´yhodnˇejˇs´ıho form´atu (HTML5). Motivace je zde zcela zˇrejm´a{ je nutn´eomezit finanˇcn´ıv´ydaje, kter´eˇskola investuje do komerˇcn´ıho n´astroje Flash, a souˇcasnˇeje zapotˇreb´ınal´eztzp˚usob, jak zachovat ani- mace pro v´yukov´e´uˇcely. Jedna z moˇznost´ıje pˇreprogramovat vˇsechny Flash animace do jin´eho form´atu, druh´acesta ke sn´ıˇzen´ın´aklad˚uvede skrze konverzi. Dˇr´ıve neˇzvˇsak dojde k samotn´eterminaci pouˇz´ıv´an´ı Adobe Flash Professional CS6, je zapotˇreb´ıprozkoumat moˇznosti kon- verzn´ıch n´astroj˚u, otestovat jejich funkˇcnost a schopnost poskytnout kvalitn´ı v´ystupn´ı dokument. Tento materi´allze tedy ch´apat jako je- den z prostˇredk˚u, kter´emohou pomoci pˇri rozhodov´an´ı, zdali vytv´aˇret uvaˇzovan´eanimace znovu tzv. na zelen´elouce, anebo si usnadnit cestu pomoc´ıvolnˇedostupn´ych konverzn´ıch projekt˚u. 2 2 V´ychoz´ıanimace a poˇzadavky na trans- formaci V Adobe Flash byly v r´amci pˇredchoz´ıch bakal´aˇrsk´ych prac´ına FI MU [20], [21] vytvoˇreny mimo jin´ei animace, jejichˇzkonverze do jin´eho form´atu je n´apln´ıt´eto pr´ace. Jedn´ase o soubor jednoduch´ych animac´ı urˇcen´ych pro v´yuku konstrukˇcn´ıch ´uloh v logice, napˇr´ıklad pravdivost- n´ıch tabulek, pˇrevodu do norm´aln´ıch forem, rezoluˇcn´ıch d˚ukaz˚uapod. Kaˇzd´aanimace se skl´ad´az jednotliv´ych sn´ımk˚u, mezi kter´ymi se lze pohybovat pomoc´ıovl´adac´ıch prvk˚uum´ıstˇen´ych ve spodn´ıˇc´asti, kde je tak´ezobrazeno ˇc´ıslo pr´avˇeprezentovan´eho sn´ımku a celkov´ypoˇcet sn´ımk˚u. Zm´ınˇen´eanimace obsahuj´ıurˇcit´enedostatky: drobn´efaktick´e chyby, nevhodn´epopisy (m´ıch´an´ıˇceˇstiny a angliˇctiny), neviditeln´e\ " ˇc´asti textu z d˚uvodu nevhodn´eho form´atov´an´ıatd. Bylo by tedy vhodn´e tyto chyby odstranit, zvl´aˇstˇekdyˇzby tyto animace mˇely slouˇzit jako podklad pro vytvoˇren´ıstejn´esady animac´ıv angliˇctinˇe. Casemˇ se vˇsak form´at Adobe Flash uk´azal jako nepˇr´ıliˇsvhodn´y pro snadn´eopravy v´yˇseuveden´ych nedostatk˚ustejnˇejako pro lokalizaci animac´ıdo angliˇctiny. Na vinˇejsou zejm´ena nemal´elicenˇcn´ıpoplatky na poˇr´ızen´ıa ´udrˇzbu Adobe Flash Professional a ´uzk´avazba form´atu Adobe Flash na operaˇcn´ısyst´emWindows. Vzhledem k postoji firmy Adobe lze v souvislosti s n´ar˚ustem operaˇcn´ıch syst´em˚upredikovat po- zvoln´ypokles v´yznamu form´atu Adobe Flash. Vˇsechny v´yˇsejmenovan´enedostatky postupnˇevy´ustily ve snahu pˇrev´estanimace do jin´eho form´atu, kter´yby byl pro drobn´eopravy, ´upravy a lokalizaci do jin´ych jazyk˚uvhodnˇejˇs´ı. Jako c´ılov´yform´at ani- mac´ıse nab´ız´ıJavascript, volnˇedostupn´ya na platformˇenez´avisl´yjed- noduch´yinterpretovan´yjazyk, a HTML5, modern´ıa snadno editova- teln´yHTML jazyk, takt´eˇzvolnˇedostupn´ya na platformˇenez´avisl´y. Prvn´ım krokem, kter´yje n´apln´ıt´eto pr´ace, je pokus o automatickou konverzi pomoc´ıvolnˇedostupn´ych n´astroj˚u. Avˇsak, jeˇstˇeneˇzpˇristou- p´ım k jejich pˇredstaven´ı, povaˇzuji za nutn´edefinovat odborn´eterm´ıny, bez nichˇznen´ımoˇzn´ev samotn´epr´aci pokraˇcovat. 3 2. Vychoz´ ´ı animace a poˇzadavky na transformaci Animace Animace [7] poch´az´ız latinsk´eho v´yrazu animus { duˇse.Pokud by bylo zapotˇreb´ınaj´ıt v ˇceˇstinˇeekvivalent i pro sloveso animovat, na- b´ız´ıse oˇzivovat\ ˇci d´avat nˇeˇcemu duˇsi\. Novˇeji lze animaci ch´apat " " jako postup, kter´ym se vytv´aˇr´ızd´an´ıpohybu. Principi´alnˇeje animace zachycen´ısekvence jednotliv´ych sn´ımk˚uzachycuj´ıc´ıch rozf´azovan´ypo- hyb, pˇriˇcemˇzdojem animace je vytvoˇren pˇri rychl´empˇrehr´av´an´ısta- tick´ych obr´azk˚urychlost´ıpro lidsk´eoko nesledovatelnou, k ˇcemuˇzje vyuˇzita setrvaˇcnost lidsk´eho oka tj. zachov´an´ıobrazu na s´ıtnici po ur- ˇcitou dobu. Rychl´estˇr´ıd´an´ısn´ımk˚utak vytv´aˇr´ıiluzi spojit´eho pohybu. K podobn´emu v´ykladu se uchyluje i ABZ slovn´ık ciz´ıch slov [1], kter´y uv´ad´ık term´ınu animace v´yznamovˇepodobn´eterm´ıny oˇzivov´an´ı\ nebo " oˇziven´ı\ s v´ykladem vyvol´an´ıiluze pohybu postupn´ymzachycen´ım " " statick´ych obr´azk˚ujdouc´ıch za sebou\. K podobn´emu v´ykladu se pˇri- kl´an´ıi Zavrtal [21], kter´yvymezuje animaci jako pohybuj´ıc´ıse obr´azky, kter´eslouˇz´ımj. v modern´ım v´yukov´emprocesu k usnadnˇen´ıch´apan´ı dan´eproblematiky a urychlen´ıuˇcebn´ıho procesu, a zav´ad´ıterm´ıny: • jednoduch´aanimace (bˇeˇz´ıod zaˇc´atku do konce), • jednoduch´aanimace s cyklem (bˇeˇz´ıopakovanˇeod zaˇc´atku do konce ve smyˇcce), • sekvenˇcn´ıanimace (skl´ad´ase z v´ıce jednoduch´ych animac´ıbez cykl˚unebo s cyklem), • interaktivn´ıanimace (je ovlivnˇena pˇretaˇzen´ım kurzoru myˇsi, klik- nut´ım myˇsina tlaˇc´ıtko nebo klepnut´ım na ovl´adac´ıprvky ani- mace). Pro vytv´aˇren´ıinteraktivn´ıch animac´ıse ˇcasto pouˇz´ıv´aprodukt Adobe Flash (program spoleˇcnosti Adobe), jehoˇzv´yhodou byla n´ızk´av´ysledn´a velikost v´ystupn´ıho souboru s animac´ı, kter´ytak mohl b´yt velmi snadno a rychle pˇren´aˇsen, nejˇcastˇeji po Internetu, nicm´enˇeznaˇcnou nev´yhodou je komerˇcn´ıpovaha tohoto grafick´eho n´astroje. I pˇresto je form´at Flash dosud hojnˇevyuˇz´ıv´an pro vytv´aˇren´ıreklamn´ıch banner˚unebo her. Al- ternativou tomuto form´atu pro uloˇzen´ıanimace je HTML5 a Javascript, oba volnˇedostupn´ejazyky, kter´enejsou, na rozd´ıl od form´atu Flash, limitov´any platformou a nejsou zat´ıˇzeny platbou licenˇcn´ıch poplatk˚u. 4 2. Vychoz´ ´ı animace a poˇzadavky na transformaci Flash Souborov´yform´atSWF (Shockwave Flash) je Adobe Flash form´at urˇcen pro pˇrenos vektorov´egrafiky, textu a zvuk˚upo Internetu a je v´ysledn´ym zkompilovan´ym souborem zdrojov´eho souboru .fla. SWF je tedy jiˇzvygenerovan´yc´ılov´ysoubor urˇcen´ypro zobrazen´ıprohl´ıˇzeˇcem. SWF obsahuje objekty m´edia (grafiku, texty, zvuky nebo videa, kter´e dohromady tvoˇr´ıobsah dokumentu), ˇcasovou osu (slouˇz´ık definici ˇca- sov´eho okamˇziku zobrazen´ıobjektu m´edia na vymezen´eploˇse)a skript ActionScript (programov´yk´od, kter´yumoˇzˇnuje pˇresnˇeji a podrobnˇeji ˇr´ıdit chov´an´ıobjekt˚ua zajiˇst'ovat a obsluhovat reakce na v´yzvy uˇzi- vatel˚u).