1. Avem nevoie de un proiect nou.
Ceas Digital si Analog

2. 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…
Ceas Digital si Analog

3. 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
Ceas Digital si Analog

4. 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.
Ceas Digital si Analog

5. 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.
Ceas Digital si Analog

6. 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 :(
Ceas Digital si Analog

7. Acesti oameni au dreptate…
Ceas Digital si Analog

8. …cam 90% din cazuri, dar…
Ceas Digital si Analog

9. 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):
Ceas Digital si Analog

10. 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
Ceas Digital si Analog

11. 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?
Ceas Digital si Analog

12. 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.
Ceas Digital si Analog

13. 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………
Ceas Digital si Analog

14. 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………
Ceas Digital si Analog

15. 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.
Ceas Digital si Analog

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

17. 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 :)
Ceas Digital si Analog

18. 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.
Ceas Digital si Analog

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

20. 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.
Ceas Digital si Analog

21. 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
Ceas Digital si Analog

22. Universul Obiectelor ---intermediari--- Universul Vizual
Ceas Digital si Analog

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

24. 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.
Ceas Digital si Analog

25. 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 !?
Ceas Digital si Analog

26. 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 ore, o ora avand 200 minute, un minut avand 6 secunde spre exemplu
Ceas Digital si Analog

27. 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.
Ceas Digital si Analog

28. Acum cealalta >:) muahahhahaaaaa(ras malefic)
Ceas Digital si Analog

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

30. 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.
Ceas Digital si Analog

31. 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…..
Ceas Digital si Analog

32. 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…
Ceas Digital si Analog

33. UUUUUuuuuuuuu what is this !?
Can you eat it?
Ceas Digital si Analog

34. Aproape am terminat constructia ceasurilor.
Ceas Digital si Analog

35. 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.
Ceas Digital si Analog

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

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

38. Ceas analog
Ceas Digital si Analog

39. Ceas digital
Ceas Digital si Analog

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

41. 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…
Ceas Digital si Analog

42. 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.
Ceas Digital si Analog

43. 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.
Ceas Digital si Analog

44. 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?
Ceas Digital si Analog

45. 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?
Ceas Digital si Analog

46. 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.
Ceas Digital si Analog

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

48. Acum ca stiti asta sunteti like:
Ceas Digital si Analog

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