1 / 30

Embedding assets in Flex

Embedding assets in Flex. Orice aplicatie cat de cat serioasa in Flex/as3 va folosi diverse resurse mutlimedia . Odata resursele furnizate de catre designeri / artisti de sunet …care ne sunt optiunile prin care le putem include in aplicatie ?. Embedding.

kaleb
Download Presentation

Embedding assets in Flex

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. Embedding assets in Flex Oriceaplicatie cat de cat serioasa in Flex/as3 vafolosi diverse resursemutlimedia. Odataresurselefurnizate de catredesigneri/artisti de sunet…care ne suntoptiunileprin care le putem include in aplicatie?

  2. Embedding • Solutiile mare si late arfidoua: • Incarcarearesurselor la runtime; • Includerearesurselor la compilare in swf (tehnicanumitasi embedding).

  3. Embedding Aplicatiile web dinamice care folosescresurseceevolueaza in timpfolosesc runtime-loadingul ca principalametoda. Despreincarcarea la runtime s-a vorbitdestulpanaacum, iarclasa Loader o cunoastefiecare(celputinceice au facutgaleriafoto :P).

  4. Embedding Uneleaplicatiiinsatrebuiesaindeplineascaconditia de a fi “self-contained”. Astainseamna“One SWF to rule them all, One SWF to find them, One SWF to bring them all and in the darkness bind(embed) them”. Exemplultipic de o astfel de aplicatiearfi…

  5. Embedding Jocurile (stiucedespreastaasteptatisa se vorbeasca de cand a inceputcercul de AS3 :D ).

  6. Embedding • De cearaveanevoiejocurilesa fie self-contained? • Simplitate; • Portabilitate; • Majoritateaportalurilorimpunchestiaasta; • Securitate.

  7. Embedding Cum se face practicembeddingul? Meta-tagul [EMBED] face toatatreabapentrunoi. Resurselesuntcomprimatesiincluse la compilare in swf.

  8. Embedding Sintaxaarfi : [Embed(source=“path")] private varresc:Class; In doualinii de cod am rezolvattoatatreaba. De fiecare data candavemnevoie de resursa cu pricina, instantiem un nouobiect de tipulresc.

  9. Embedding • Undeartrebuifacutembeddingul? • Solutia 1: facem embed la fiecareresursa in clasa in care avemnevoie de ea. • Bun, dar nu perfect: • Pierdemusorsirulresurselor la care am facut embed; • Avemsansasafacem embed la aceeasiresursa de maimulteoriceeace duce la un filesizemultmai mare.

  10. Embedding • Undeartrebuifacutembeddingul? • Solutia 2: facem o clasa care sa se ocupe special de chestiaasta, pe care o instantiemoriundeavemnevoie. • Close, but no cigar: • Fiecareinstantanouaimicrestefilesize-ulswf-ului.

  11. Embedding • Undeartrebuifacutembeddingul? • Solutia 3: folosim o clasa de tip singleton. • Acces la resursele la care am facut embed oriunde. • Sigur nu includemaceeasichestie de 2 ori. • Usurinta in utilizare.

  12. Embedding La ceputem face embed? La oriceatattimp cat ii specificammimetype-ulcorespunzator. Elegant estesaexportamtoateresursele de care avemnevoie ca sisimboluriintr-un swf in Flash, iarswf-ul cu pricinailvomfolosipe post de librarie de resurse.

  13. Embedding In spirituldomnuluiBuraga… Intrebari?

  14. Embedding Daca nu, let’s start coding.

  15. Preloading applications in Flex Ok, am invatatsafacem embed la resurse. Acum am in fata in swf de 3Mb care se incarca in 20 de secundepe o conexiunemedie. Cum facexperientautilizatoruluimaiplacuta?

  16. Preloading Ne-am jucatputin cu embedul, iaracumswf-ulmeu de 16kb s-a ingrasatpeundevape la 3Mb. Pe o conexiune de internet cat de cat decenta, swf-ulmei se incarcaundevaintre 10 si 20 de secunde, timp in care utilizatoruli ii esteafisat un ecran alb. Are rostsa-mi bat capulpentru 20 de secunde?

  17. Preloading 20 de secundesuna a un timpinfimpefoaie. In realitatelucrurilestau cu totulaltfel. Ca sa ne dam seama cat de multconteazaaceste 20 de secundepentruutilizator, vomincercasanumarampana la 20 privind la slide-urigoale.

  18. Preloading 1

  19. Preloading 2

  20. Preloading Glumesc . Dar chestiuneaeste cat se poate de serioasa. In jurul a 60% din utilizatoripleaca de pepaginadacaaplicatiei ii iamaimult de 10 secundesa se incarce.

  21. Preloading Pentru a evitaasemeneasituatiivom face un preloaderpentruaplicatie. Un preloadereste o altaaplicatiemicuta, de regula 25-50kb care se incarcaaproape instant peoriceconexiune, care contineinformeazautilizatorulasupraprocentajului din aplicatie care s-a terminat de incarcat.

  22. Preloading • Modalitatile de a crea un preloadersuntmaimulte. • Compilam in Flash un alt swf, care are 2 frame-uri. Peprimul frame preloaderul, iarpe al doileaswf-ulnostru. • Folosimunul din preloaderele din Flex (isifactreabadestul de binedarsuntgreu de customizat). • Compilam cu un flag suplimentaractivataplicatianoastra.

  23. Preloading Dar cum noisuntembaietidestepti de la Infoiasisivremsafacemtotul din cod…

  24. Preloading Folosing meta-tagul [FRAME]. Meta-tagul frame practicactiveaza o optiunespeciala a compilatorului(flaguldespre care vavorbeammaidevreme), siimicompileazaswf-ulmeu cu un timeline format din 2 frame-uri.

  25. Preloading Utilizareaesteputinmaiciudata: [Frame(factoryClass=“nume_preloader")] Efectul: la compilare, aplicatia mea vaaveadoua frame-uri, peprimul frame fiindfactoryClass-ulspecificat. Consecinta: constructorulpreloaderuluieste entry-pointulaplicatiei de aceasta data.

  26. Preloading • Structuraclaseipreloaderesteurmatoarea: • Prima linie de cod din constructor opreste timeline-ul, printr-un elegant apel de this.stop(). • Tot in constructor ascultamevenimentul ENTER_FRAME, ca sacalculam la fiecare frame cat % din aplicatie s-a incarcat. • Pentru a calculaprocentul cu pricina, calculam la fiecare frame raportuldintrebytesLoadedsibytesTotal, proprietati ale luiroot.loaderInfo.

  27. Preloading • Candraportul de maisusdevine 1, putemtrece la executiaaplicatieipropriu-zise. • Pentruasta: • Intr-o variabila de tip Class instantiemclasa main din build path printr-un apel de getDefinitionByName. • Adaugamvariabila cu pricinape stage ca si display object. • Apelammetodaprincipala din clasa.

  28. Preloading • ATENTIE! • OrdineaoperatiiloresteurmatoareaINTAIinstantiemclasaprincipala, APOI o adaugampescena ca si display object. • De preferat, constructorulclaseiprincipalesa NU continanici o linie de cod (dacatinemneaparat, initializari de variabile). • Motivul: oricealtaoperatie care se vaexecutasivaaveanevoie de acces la stage vaesua la rulare, deoareceobiectulinca nu a fostadaugat la display list. • Executiapropriuzisa a programului o declansamprintrapeluluneimetodepublice de genulstartApp() dupace am adaugatobiectulpe display list.

  29. Preloading • ATENTIE! • Dacadorimsafacem un preloaderfrumos cu background si etc…vomfolosiresursepe care le vrem embedded. Am fitentatisafolosimsingletonuldespre care v-am povestitmaidevreme. • GRESIT! Odatace am apelatmetodagetInstance() in preloaderpentru a aveaacces la resursele cu pricina, clasavafiinclusa la compilare instant, iartoateresursele embedded din clasa cu pricina se vorincarcaINAINTEA preloaderuluiceeaceva face scopulluiinutil. • Solutia: faceti embed in preloader la resursele de care avetinevoie(preferabil cat maiputinepentru a nu aveanevoie de preloader la preloader:D ).

  30. Preloading In caz ca peretele de text de pe slide-ul anterior nu v-a adormit…. Arfitimpulpentru un exemplupentru a ilustramaibinelucrurilesipeurmaputemplecalinistitisa ne petrecemweekendul.

More Related