Avem nevoie de un proiect nou. discipol333@yahoo.com Ceas Digital si Analog

Astfel nu ne incurcam cu alte directoare ale proiectului… In ultima versiune de Flex 3, se creeaza un director in care punem toate resursele proiectului(clase, poze, etc…) Astfel nu ne incurcam cu alte directoare ale proiectului… discipol333@yahoo.com Ceas Digital si Analog

Toate resursele proiectului pot fi impartite in doua categorii foarte diferite. Prin urmare, le vom imparti in doua directoare: classes si data. Cand facem un nou proiect, nu putem sti in totalitate ce alte directoare si subdirectoare vom avea insa acestea sunt atotprezente :) Directorul “classes” va fi package-ul principal(a.k.a “root”) al proiectului discipol333@yahoo.com Ceas Digital si Analog

analog(varianta clasica) digital(varianta moderna) In acest proiect, vom dori ca ceasul nostru sa ne arate timpul in cele doua moduri cunoscute: analog(varianta clasica) digital(varianta moderna) Asa ca vom creeeeeea cate un director pentru fiecare unde vom “depozita” fisierele externe. discipol333@yahoo.com Ceas Digital si Analog

Din senin aparu niste fisiere pentru fiecare dintre skin-urile(formele) noastre. Pentru cel analog, avem nevoie de fundal si 3 ace. Pentru cel digital, am avea nevoie de un fundal si un mod de a afisa cifrele digitale dar vom incarca doar fundalul iar cifrele le vom genera din ActionScript folosind doar o clasa. discipol333@yahoo.com Ceas Digital si Analog

Acum ca ne-am pregatit toate resursele externe, putem incepe sa facem clasele ce dau viata aplicatiei. Multa lume va vor spune sa faceti resursele la sfarsit, pentru ca aceste se pot schimba/reface si dau peste cap toata programarea :( discipol333@yahoo.com Ceas Digital si Analog

Acesti oameni au dreptate… discipol333@yahoo.com Ceas Digital si Analog

…cam 90% din cazuri, dar… discipol333@yahoo.com Ceas Digital si Analog

90% (procentaj scos din burta) dintre aplicatiile Flash puse pe internet nu sunt profesionale. Daca programul nu se adapteaza automat dupa resursele de intrare, nu este profesionist din nici un punct de vedere. Imaginati-va un website care se poate vedea calumea doar la o rezolutie de 965*369, iar oricare alta rezolutie face probleme. Exemplu de pagina WIKIPEDIA (versiune veche): discipol333@yahoo.com Ceas Digital si Analog

Vom creeea un package numit “view” unde vom pune toate clasele si pachetele responsabile cu partea vizuala a proiectului. Daca la un proiect stim ca vom folosi pune clase, nu are rost pentru o super ierarhizare pentru ca mai mult ne complicam… "Less is more" - Robert Browning discipol333@yahoo.com Ceas Digital si Analog

Cum avem resurse externe, vom avea nevoie de o clasa sa le incarcam, nu? In acest exemplu vom da forma ceasului analog folosind un SWF compilat in Flash CS3 unde am facut un disc folosind grafica vectoriala. PRO/CONS? Ceasul digital are ca fundal un PNG ce poate fi modificat de foarte multe editoare video. PRO/CONS? discipol333@yahoo.com Ceas Digital si Analog

In prezentarea anterioara s-a prezentat un loader pentru poze. ActionScript suporta JPG, PNG, GIF, BMP (si altele mult mai putin importante). Insa ActionScript mai poate incarca si propriile fisiere exportate (cu extensia SWF). Modul in care sunt incarcate pozele si modul in care e incarcat un SWF nu difera foarte mult. Singura diferenta este ca obiectul ce reprezinta resursa incarcata trebuie convertit dupa clasa “MovieClip” var resursa : MovieClip = myLoader.content as MovieClip; var resursa : MovieClip = MovieClip( myLoader.content ); Aceste doua variante fac acelasi lucru. discipol333@yahoo.com Ceas Digital si Analog

In sfarsit programare……… In acest din programare probabil ca mai sunt 2-3 persoane in sala :D Din pacate, toti acesti pasi sunt necesari pentru o aplicatie de dificultate medie. Nu programarea in sine ii defineste nivelul, ci toata planificarea si pregatirea resurselor pre-programare. O schema rapida sau reflectarea mai lunga asupra proiectului poate face “Ce usor a fost!” si “Ce ma ofticaaaaa”. In sfarsit programare……… discipol333@yahoo.com Ceas Digital si Analog

In sfarsit programare……… Intai facem cele doua clase, chair daca nu au nimic in ele. Nu are importanta cu care incepem, adunarea intervalelor de timp pentru fiecare este comutativa :D (who knows what that means) In sfarsit programare……… discipol333@yahoo.com Ceas Digital si Analog

Ah, uite pe nenea constructor… Avem nevoie de el? In 25% din toate clasele din toate proiectele, nu avem ce pune in constructor.Daca il stergem, Flash nu va protesta. Se va intampla acelasi lucru ca si cum l-am lasa gol(ca mai sus). Noi nu avem nevoie de constructor si este recomandat sa nu *Chestie: Flex nu ii da constructorului tipul de returnare “void”, dar fiind functie, are regula de a i se defini tipul de returnare, asa ca ii dau/dati “:void” la fiecare constructor. discipol333@yahoo.com Ceas Digital si Analog

Am eliminat constructorul, si, dupa cum stiti, ne trebuie 4 elemente pentru un ceas analog: fundalul si cele 3 limbi(ace/needles). Simplu nu? discipol333@yahoo.com Ceas Digital si Analog

Adica: var blabla : Ceva = new Ceva(); Multa lume va vor spune sa folositi constructorul pentru atribuiri de valori. Adica: var blabla : Ceva = new Ceva(); Nu este nici o diferenta decat poate o nanosecunda intarziere :) discipol333@yahoo.com Ceas Digital si Analog

Vom avea nevoie de o variabila numita “loaded” unde memoram daca am incarcat resursele ceasului. Nu este nevoie de ea neaparat insa, ca eficienta, vom trata cazul in care dam de 2 ori load la resurse. discipol333@yahoo.com Ceas Digital si Analog

Acum suntem gata sa adaugam comenzile de load Acum suntem gata sa adaugam comenzile de load. Mai multe detalii despre loadere la sfarsitul prezentarii… discipol333@yahoo.com Ceas Digital si Analog

Dam load la fiecare dintre resursa Dam load la fiecare dintre resursa. Este preferabil sa primim cel putin o parte din datele de intrare de la parintele acestui obiect. Am decis ca path-ul(adresa) resurselor sa fie data de parinte atunci cand el apeleaza metoda “loadClok”. Parintele, in cazul de fata, este clasa principala. discipol333@yahoo.com Ceas Digital si Analog

Toate resursele pentru ceasul analog sunt SWF-uri Toate resursele pentru ceasul analog sunt SWF-uri. Adica le-am facut in Flash CS3 cu grafica vectoriala :D discipol333@yahoo.com Ceas Digital si Analog

Universul Obiectelor ---intermediari--- Universul Vizual discipol333@yahoo.com Ceas Digital si Analog

Folosim variabila “grafica” ca un container, si cum obiectul in care lucram este si el un container, trebuie sa legam “grafica” de ClockSkinMovieClipAnalog. discipol333@yahoo.com Ceas Digital si Analog

Cand se incarca elementele, toate vor sta in coltul din stanga sus pentru acolo este originea oricarui obiect vizual. Asa ca vom muta cele 3 limbi de ceas in mijlocul ceasului. El are marimea de 250*250 asa ca mijlocul lui va fi 125*125. discipol333@yahoo.com Ceas Digital si Analog

Mai stie careva “Regula 2 simpla”? Va dati seama usor ca toate needles au exact acelasi comportament. Asa ca am creeeeat o metoda care seteaza rotatia obiectului vizual “target” in functie de “currentValue” si “maxValue”. Mai stie careva “Regula 2 simpla”? Eram sigur ca nu… Alte moduri intuitive !? discipol333@yahoo.com Ceas Digital si Analog

Acum, aceasta metoda primeste ca parametri ora, minutul si secunda curenta. Vom misca fiecare dintre ace in fuctie de ele. Stim cu totii ca acele de minut si secunda au 60 de uniati si cel de ora are 12 unitati… De aceea aveam nevoie de variabila “maxValue”. Teoretic si practic, putem sa punem orice valoare maxima acolo pentru orice tip de ceas (o zi avand 30000 ore, o ora avand 200 minute, un minut avand 6 secunde spre exemplu discipol333@yahoo.com Ceas Digital si Analog

Cam gata…am mai avea nevoie de o metoda pentru afisarea acestui skin, si pentru ascunderea lui in caz ca vrem sa facem schimbul intre ele. Cum am fost destepti si am bagat toate elementele intr-o singur obiect, lucram doar cu acesta acum. discipol333@yahoo.com Ceas Digital si Analog

Acum cealalta >:) muahahhahaaaaa(ras malefic) discipol333@yahoo.com Ceas Digital si Analog

Putem da copy paste pentru metodele astea 2 si cele 2 variabile, partea asta e identica. discipol333@yahoo.com Ceas Digital si Analog

Vom folosi un fundal pentru ceasul digital, ca si in celalalt skin, dar acesta va fi o poza simpla(un PNG sa aibe fundalul ceasului transparent). Cifrele le vom afisa folosind clasa TextField ce este singura clasa din ActionScript ce afiseaza text. Mai sunt, insa, cateva clase folosite pentru a customiza obiectele TextField. discipol333@yahoo.com Ceas Digital si Analog

Avem nevoie de o metoda sa incarcam ceasul Avem nevoie de o metoda sa incarcam ceasul. Uimitor cat seamana cu cealalta clasa. Evident ca metoda asta va avea alt continut, dar declararea functiei seamana foarte mult :D hmmmm….. discipol333@yahoo.com Ceas Digital si Analog

La sfarsit, incarcam fundalul… Legam “grafica” de acest obiect, ca si la cealalta clasa, si legam fundalul ceasului digital precum si cifrele sale. ATENTIE! Ordinea in care adaugati elemente conteaza foarte mult. Daca am inversa ordinea aici, intai textul apoi poza ar fi puse in campul vizual si nu e bine… La sfarsit, incarcam fundalul… discipol333@yahoo.com Ceas Digital si Analog

UUUUUuuuuuuuu what is this !? Can you eat it? discipol333@yahoo.com Ceas Digital si Analog

Aproape am terminat constructia ceasurilor. discipol333@yahoo.com Ceas Digital si Analog

Apoi construim Stringul cel mare si il dam textField-ului. Din nou, metoda setTime seama cu a celeilalalallate clase. Foarte interesant :D Am mai creeeat o metoda care adauga caracterul 0 in fata unui numar daca este intre 0-9, adica este mai mic ca 10 la care concatenam numarul. Apoi construim Stringul cel mare si il dam textField-ului. discipol333@yahoo.com Ceas Digital si Analog

Sper ca pana acum si-a dat seama cineva dintre voi un bug evident… discipol333@yahoo.com Ceas Digital si Analog

Acum ca am rezolvat asta, ce ziceti sa dam drumul proiectului sa vedem cum arata? discipol333@yahoo.com Ceas Digital si Analog

Ceas analog discipol333@yahoo.com Ceas Digital si Analog

Ceas digital discipol333@yahoo.com Ceas Digital si Analog

Dar, ca se intample asta, trebuie sa controlam incarcarea ceasurilor, si mai important, cum decidem care dintre ele se afiseaza? discipol333@yahoo.com Ceas Digital si Analog

Creeeeeeam doua variabile, pentru fiecare tip Creeeeeeam doua variabile, pentru fiecare tip. Because numele claselor e atat de lung, hai numim variabile mai scurt…. Pentru ca nu avem constructor, sau daca ar fi gol, nimic nu s-a intamplat; nici o resursa nu a fost incarcata. Pentru moment, toata lumea doarme… discipol333@yahoo.com Ceas Digital si Analog

Ii atribuim una dintre constanta pentru inceputul aplicatiei. Acum facem doua constante asociate fiecarui tip de ceas, pentru a sti la orice moment, care dintre cele doua skinuri este afisat. Ii atribuim una dintre constanta pentru inceputul aplicatiei. discipol333@yahoo.com Ceas Digital si Analog

Legam skinurile de aplicatie; acum toate elemente grafice de peste tot au legatura cu aplicatia. Prin urmare, amandoua ceasuri sunt prezente. In spate este cel analog, in fata cel digital. Nu conteaza ordinea incarcarii lor. discipol333@yahoo.com Ceas Digital si Analog

De ce am apelat metoda updateClocks inca odata? Pornim un setInterval sa facem update ceasurilor la fiecare secunda = odata la fiecare 1000 milisecunde. De ce am apelat metoda updateClocks inca odata? discipol333@yahoo.com Ceas Digital si Analog

Facem update la amandoua ceasuri pentru moment Facem update la amandoua ceasuri pentru moment. Cel care este in acest moment vizibil, va arata ora corecta in modul in care a fost facut, si celalat va face acelasi lucru. Ce ziceti sa il ascundem pe unul dintre ele? discipol333@yahoo.com Ceas Digital si Analog

Nu este bine ca am facut acele doua metode inainte Nu este bine ca am facut acele doua metode inainte? Daca nu ne-am fi gandit atunci, no problem, le facem acum, dar trebuie sa ne dam seama de chesii de genul in planificare. discipol333@yahoo.com Ceas Digital si Analog

Acum, impreuna, vom face: Un buton pentru schimbarea de la un skin la altul. Optimizarea universului obiectelor Optimizarea universului vizual. discipol333@yahoo.com Ceas Digital si Analog

Acum ca stiti asta sunteti like: discipol333@yahoo.com Ceas Digital si Analog

Intrebari? Daca da…spam @ domnul profesor >:) serios, ma puteti intreba orice, oricand pe yahoo messenger sau GTalk discipol333 discipol333@yahoo.com Ceas Digital si Analog