Najprv si vyjasnime niektore veci ohladom Flashu, medzi neznalymi ale i niektorymi znalymi je stale Flash ukotveny ako ta stara znama web platforma na vektorovu grafiku s nejakym tym scriptom co sa pouziva na webove minihry a reklamy.
TOTO UZ DAVNO NIEJE PRAVDA.
Tak a mame to zasebou, Flash ako taky uz davno evolvoval mimo webu dnes je mozne ho kompilovat do nativnych binarok jak na Windows tak Linux, Mac, Android, iPhone (ano i iPhone binarky spravite avsak ich nebudete moct sirit pomocou Apple store lebo Apple nechce Flash na iPhone zatial ci uz nativne alebo cez webplayer). Rovnako casy len vektoroveho Flashu su uz davno prec, a je mozne pracovat s bitmapovymi datami, je mozne pracovat so shadermi da GPU, je mozne vselico avsak tu uz sa dostavame mimo ramec tohto tutorialu.
Dalsim z argumentov proti Flashu hlavne vo FreeWare komunite je ze sa musi kupovat drahy FlashCS5 alebo iny komercny nastroj na tvorbu Flashu. Tak zaprve nepoznam jedineho profesionalneho programatora ktory by programoval Flash vo FlashCS5, tento nastroj uz davno sluzi len Flash designerom a na programovanie je absolutne nevhodny i ked to okrajovo podporuje. Ale co je podstatnejsie je ze su aj vynikajuce prostredia na vyvoj Flashu ktore su nielen free ale dokonca open-source. Ved nakoniec Adobe uvolnilo svoje SDK ako open-source aby prave tretie strany mohli nanho vytvarat nastroje.
Tak a prave tymto prvym tutorialom sa budeme venovat instalacii a prvym krokom k uspesnemu programovaniu v AS3. Ide o open-source prostredie postavene na Eclipse ktore je mozno mnohym z vas zname ak robite Javu ci C++, nazvane FlashDevelop (dalej uz len FD).
Najprv si nainstalujeme FD ktory najdeme na stranke [url]http://www.flashdevelop.org/[/url] vpravo mame Latest Release linku ktora nas zavedie na Forum topic prave posledneho release takze sup stiahnut.
Instalacia je bezproblemova, nemusime nic menit nainstalujte to kam chcete. Po uspesnej instalacii to mozte spustit ak neboli ziadne problemi vykukne na vas pritulna obrazovka FlashDevelopu
Ak chcete a ste zbehli v anglictine mozte presnorit Getting Started, avsak zatial sa od FD este raz vdialime. Musime si totiz stiahnut Adobe SDK k tvorbe Flashu, bez kompileru by sme daleko nezasli. Kedze posledne SDK je Flex 4 tak navstivime stranku [url]http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4[/url] tu stiahnite Adobe Flex SDK bud Latest Milestone alebo Stable Builds, Nightly Builds by som stahovat neodporucal.
Adobe Flex SDK narozdiel od Open Source Flex SDK obsahuje este navyse niektore komponenty a nastroje na ulahcenie tvorby ktore su free ale nie opensource a urcite sa nam zidu. Toto SDK mozte rozbalit na disk kam chcete ale kedze ho budeme referencovat z FlashDevelop ja by som odporucil do SDK subfoldru vramci FD.
Hop spat do FD a ideme nato, mozme vytvorit novy projekt. Bud na uvodnej stranke klickneme na >>New Project alebo hore v menu mame Project>New Project.
Kedze Flash IDE za tazke $$$ nemame, tak predvoleny projekt by nam nesedel. Zvolime teda AS3 Project. Dole vyplnime meno a lokaciu. Prvy projekt som zazval standardne HelloWorld, co sa tyka lokacie odporucil by som vytvorit si nejaky workspace adresar kde by sme mali vsetky FD projekty pokope niektore Java IDEs ci C++ IDEs robia toto automaticky, tu si vytvorme adresar manualne a nastavme ho. Dole zaskrtnime Create directory for project aby nam vzdy vytvoril adresar vramci workspace s nazvom daneho projektu. Package mozme nehat prazdy, znova kto pracoval s Javou tak vie o co ide v tomto case to nieje podstatne, mozme dat OK.
Ako vidime FD za nas vytvoril podla sablony adresarovu strukturu pre nas HelloWorld project mame tam bin, lib a src. Kazdy zbehly programator vie o co ide, v bin adresary sa nam budu vytvarat binarky a nemusie sa donho moc starat, lib adresar je prazdny tu mozme mat binarky kniznic ktore chceme vyuzivat to nas zatial nezaujma, no a nakoniec src kde su nase utulne zdrojaky. A ako vidime ked clickneme na Main.as FD za nas uz aj podla sablony iniciativne vytvoril nejaku strukturu pre triedu Main.
Tu by som sa znovu zastavil a hodil par poznamok. V tomto aj nasledujucich tutorialoch sa budem venovat programovaniu v ActionScript3 (dalej uz len AS3) toto nieje jediny jazyk na tvorbu Flashu avsak ostatne nas nezaujmaju ide bud o starsie verzie ActionScriptu alebo ine alternativy ktore niesu zastresene firmou Adobe, jedinym realnym superom je jazyk haXe ktory je vsak hobby projekt a jeho buducnost je neista kto chce moze po nom hodit okom ;) ActionScript3 je narozdiel od jeho predchodcov plne OOP jazykom je postaveny na ECMA standarde. Jeho syntax by som prirovnal najblizsie k Jave i ked napriklad deklaracia premennych je pascalovska, ale toto je len vec zvyku. Pokial niekto nieje oboznameny z principmi OOP mal by si ist o tom nieco precitat, budem totiz brat v potaz ze vam je princip OOP znamy a nebudem ho prilis rozoberat ak nebude treba.
Ale spat k nasej Main triede, FD bol iniciativny vytvoril triedu Main ktora dedi Sprite a v nej 2 metody. Kedze Flash ma vzdy vizualnu reprezentaciu tak hlavna trieda musi vzdy dedit urcity display object v nasom pripade Sprite. I ked by slo vo Flashi spravit program ktory nieje vidiet je to kontraproduktivne lebo by sme ho museli schovavat, berte to ako MFC alebo VCL, tiez sluzi na vizualizacie. FD nam zaroven naimportoval 2 triedy flash.display.Sprite a flash.events.Event, Sprite je jasny kedze ho dedime Event sa tu sice pouziva ale mi nebudme takze prec s nim, s iniciativou to FD trosku prehnal takze vymazme obsah oboh metod, dalej zmazme aj vstup pre metodu init a jej volanie vratme do konstruktoru. Mohli by sme zmazat aj metodu init ale uz od zaciatku chcem vychovavat sprave OOP citenie a preto hovorim VZDY robte inicializaciu mimo konstruktoru danej triedy. Konstruktor by mal byt vzdy prazdny az na volanie zodpovednej funkcie, niekedy je okrem toho este potrebne priradit premenne ak si nejake posielame. Ale pome uz na HelloWorld, asi najlahsim sposobom ako toho dosiahnut bez vizualizacie je dopisat do funkcie init riadok trace takze nas program vyzera takto:
{
import flash.display.Sprite;
public class Main extends Sprite
{
public function Main():void
{
init();
}
private function init():void
{
trace("HelloWorld");
}
}
}
Nativna funkcia trace sluzi na posielanie sprav do konzoly vramci debug verzie binarok. Tu je dobre upozornit ze pri testovani ci buildovani projektu sa da nastavit konfiguracia kompileru a to Debug ci Release, defaultne je nastaveny Debug hore priamo nad nasim zdrojovym kodom. Takze pome kompilovat Project>Test Movie (shortcut F5), tu ak kompilujeme nas prvy projekt nam FD vyhodi upozornenie ze nemame nastaveny compiler. O co ide je prave to ze nemame nalinkovane Adobe SDK na FD takze dame ok.
Clickneme na Flex SDK Location a nabrowsujeme nas SDK folder. A mozme kompilovat, ak sa nam vsetko ok skompilovalo vidime dole v Output okne nas vystup z fukcie trace a to HelloWorld.
Hura mame zasebou uspesne skompilovany prvy projekt v FD a sme na ceste stat sa dalsimi z uspesnych ActionScript developerov. Takze ano ide to aj po programatorsky, ide to aj s open-source nastrojmi ale hlavne ide to.
V dalsom tutoriali sa uz budeme venovat vizualizacii a hlavne si povieme o tom ako funguje display hierarchia vramci flashu a mozno prehodime slovo aj o event modeli na ktorom je Flash cely postaveny.
Komentáře
Přidat nový
Pro přispívání musíte být přihlášen
Zapsal sHTiF - 12.07.2010 20:02
Sorry za preklepy v predchadzajucom prispevku asi mam upal ;)
Zapsal sHTiF - 12.07.2010 20:00
FireJS jaj tak som ta zle pochopil, inak to je problem len v tom ze nemas nainstalovany debug verziu playeru. Takze si daj na nete vyhladat a nainstaluj. Inak dobre ze pisete budem sa vsetkym pripomienkam a navrhom venovat vzdy nazaciatku dalsieho tutorialu.
Len teraz za 2 dni zdrham na Kanarske Ostrovy takze sa k tomu tak o dva tyzdne. Planujem vsetky tutoriali nadalej robit vo forme videii kedze tam sa lepsie vysvetluje a zaroven ukazuje. Prerobim dokonca aj tuto ci 2. cast co je na fore bola cela seria. Dufam ze nema niekto velke vyhrady. Samozrejme nadalej budem davat zdrojaky ako sucast.
Zapsal Firejs - 12.07.2010 14:29
Shtif: Jasně, rozumíme, ale říkám, že mi to nevypíše do outputu žádný hello... ;)
Skončí to u done(0); a podle tvého obrázku by se mělo Hello vypsat až za tím.. což se nevypíše ;)
Zapsal sHTiF - 12.07.2010 10:26
Gamp defaultny program na spustanie swf nastav samozrejme Flash Player, inak je to ok samozrejme ze sa vam to pusti vo Flash Playeri tak to ma byt. A to ze sa pusti prazdny je tiez jasne kedze tam zatial nic nerobime, okrem teda tracu.
Zapsal Gamp - 12.07.2010 09:01
Přesně, hlásím stejný problém jako Firejs
Zapsal Firejs - 11.07.2010 17:44
Dobré, ale když to dám zkompilovat v output mi to skončí u "Done(0)" a otevře mi to prázdný Flash Player...
Zapsal Gamp - 11.07.2010 17:04
jojo, je to přehrávač videí, spouštím v něm i swf. Tahře výchozí program mám nastavit FlashDevelop?
Zapsal sHTiF - 11.07.2010 14:40
GOM Player nepoznam to je pravdepodobne nejaky video player ktory mas nalinkovany v systeme ako defaultny program na spustanie swf tak si to prestav. Ak sa mylim oprav ma.
Zapsal Gamp - 11.07.2010 13:58
Jenom mám malý problém, když dám F5, spustí se mi GOM player s tím souborem co tvořím.
Zapsal Gamp - 11.07.2010 13:57
Zatím super... seriál vypadá zajmavě



