1 / 49

Avem nevoie de un proiect nou.

Avem nevoie de un proiect nou. 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….

glenna
Download Presentation

Avem nevoie de un proiect nou.

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

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

  2. 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. 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 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. 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. 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. Mai multe detalii despre loadere la sfarsitul prezentarii… Ceas Digital si Analog

  20. 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. 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. 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 30000 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. 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. 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. 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. 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. 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. 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. 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? 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 da…spam @ domnul profesor >:)serios, ma puteti intreba orice, oricand pe yahoo messenger sau GTalkdiscipol333 Ceas Digital si Analog

More Related