, opbygge et billede af skærmen ved hjælp af flex og flickr api -,,,,, andel,,,,,,,,,,,,,,, det cyber - mandag envato tuts + kurser vil blive reduceret til $3.- og' t miss.,, i denne forelæsning, vil du lære at bruge den as3flickrlib bibliotek blitz flickr billede af skærmen.,,,,,,, trin 1: as3flickrlib, er der mange biblioteker, der er til rådighed for flex udviklere, at grænsefladen med flickr.den as3flickrlib bibliotek blev skabt af adobe og biblioteket, som vi kan bruge til at skabe dette billede ses anvendelse.du bliver nødt til at downloade en kopi af as3flickrlib kode for dig selv, samt as3corelib bibliotek (as3flickrlib afhænger af as3corelib).begge kan rekvireres fra her., 2. trin: tweenmax, får du også brug for tweenmax bibliotek.tweenmax er en tweening bibliotek, som gør, at vi kan nemt skifte egenskaber for et objekt over tid.du kan få tweenmax., trin 3: nye projekt, skabe en ny flex web - projektet og tilføje tre biblioteker ovennævnte kilde i retning af ansøgningen.,, trin 4: papir klasse, ansøgningen virker ved at tage billeder læsset af flickr og lægge dem til hovedsagen objekt (dvs. formålet der er skabt af den mxml fil).når du har et billede af web - det er vendt tilbage til dig som en bitmap.mens bitmap klasse udvider displayobject klasse (hvilket er, hvad de addchild funktion kræver), flex kun vil tillade, at disse klasser, at udvide uicomponent klasse indsættes som et barn i hovedsagen objekt, og det bitmap udvider ikke uicomponent.kortfremstilleren vil ikke flag at tilføje en bitmap ansøgningen formål via addchild funktion som en fejl, men du vil få en undtagelse på løbe tid, men det ville være rart at være i stand til at tilføje bitmap genstande, som børn af ansøgningen objekt.vi er nødt til at skabe et lille stykke papir klasse, der har udvide uicomponent klasse (, så det kan tilføjes, at anvendelsen), men også er en bitmap som barn af sig selv.papir kursus hedder displayobjectuicomponent., pakke (import flash.display.displayobject; import mx.core.uicomponent; offentlige klasse displayobjectuicomponent udvider uicomponent {offentlige funktion displayobjectuicomponent (displayobject: displayobject) (super); explicitheight = displayobject.height; explicitwidth = displayobject. bredde; addchild (displayobject)}}}, løntrin 5: nye mxml fil, vi nu har brug for for at skabe mxml fil., <?xml - version = "0" kodning = "utf - 8"?> < mx: anvendelse xmlns: mx = "< en href =" http: //////////////www.adobe. kom /2006 /mxml "> http: //////////////www.adobe. kom /2006 /mxml < /a >" layout = "absolut" backgroundgradientalphas = "[1, 0 1, 0]" backgroundgradientcolors = "[# 000000,b5b5b]" creationcomplete = "oncomplete()" >...< /mx: anvendelse > det er skallen af mxml fil.de fleste af koden, er den samme som den tomme skabelon, som opstår, når du åbner en ny flex anvendelse i flex bygmester.desuden har vi bestemt baggrund farver (med, backgroundgradientalphas, og backgroundgradientcolors, attributter), og som oncomplete funktion kaldes, når anvendelsen objekt har skabt sig (med, creationcomplete, attribut). trin 6: mx: manuskript - koden, der vil gøre arbejdet for at downloade og visning den flickr billeder skal være indeholdt i en mx: manuskript navneskilt.<![cdata [...]] > tag bare giver os mulighed for at skrive kode uden at skulle bekymre sig om særlige tegn, som er større end mindre end (< og >) fortolkes som en del af xml - dokumenter. < mx: manuskript > <![cdata [...]] > < /mx: manuskript >, trin 7: import klasser, er vi nødt til at importere visse klasser til brug i vores anvendelse, import mx.collections.arraycollection; import mx.controls.alert; import kom. adobe. webapis. flickr. *; import kom. adobe. webapis. flickr. begivenheder. * gs.tweenmax, import, import - g. lempelse. *), trin 8: definere konstanter, nu skal vi definere visse konstanter, der vil kontrollere, hvordan vores ansøgning virker., menig static i denne search_string: string = "sunset" menig static i denne max_results: int = 50, menig static i denne api_key: string = "din nøgle går her" menig static i denne transition_time: antal = 1, menig static i denne display_time: antal = 3;,, search_string definerer de spørgsmål, der vil blive sendt til flickr.i virkeligheden vil vi være flickr for billeder, ligesom du vil sætte spørgsmålstegn ved google til websider.vi har sat spørgsmålstegn ved "sunset" her, men den her er noget som "killinger", "bjergområder", "biler" osv. max_results definerer, hvordan mange billeder, flickr vil vende tilbage når det er blevet undersøgt, api_key er din egen flickr api - nøgle, som du kan anmode om, transition_time definerer her. hvor hurtigt de billeder vil forsvinde ind i hinanden på få sekunder.her har vi sat overgangen til 1 sekund. display_time definerer, hvordan længe hvert billede vises før næste billede er ladt.her har vi fastsat hvert billede vises i 3 sekunder.,, trin 9: definition af variabler, er vi nødt til at fastlægge et par variabler for vores ansøgning. private var fotos: arraycollection = ugyldig; private var currentimage: int = 0, private var displayimage: bitmap = ugyldig; private var backgroundimage: bitmap = null,,, billederne variabel er en samling af billedet definitioner sendes tilbage af flickr.det er vigtigt at bemærke, at flickr - faktisk ikke sende billederne i sig selv, men kun de oplysninger, der er nødvendige for at finde adressen i det billede, som så skal downloades separat, currentimage variable opretholder et indeks på billederne samling.det er, så ved vi, hvad der billede skal fremlægges næste., displayimage og backgroundimage variabler er henvisninger til den bitmap objekter, der er oprettet ved isætning af flickr billeder.,, trin 10: politiske akter, som standard en flash - ansøgning kan kun last ressourcer fra sit eget område.for at udnytte ressourcer fra et andet område (som flickr) ejeren af dette område skal have en politisk sag, almindeligvis kaldet crossdomain.xml, som lader flash runtime ved, at det er okay at lade deres ressourcer.denne politik skal være lastet, før sagen er blevet gjort forsøg på at læsse de ressourcer, det er billeder., flickr er vært for en række servere, så vi lader politik fil disse servere.hvis du ikke udføre dette skridt, så får du en undtagelse, når de forsøger at laste billeder fra disse områder. sikkerhed. loadpolicyfile ("http: //////////////farm1. statisk. flickr. kom /crossdomain. xml -"); sikkerhed. loadpolicyfile ("http: //farm2. statisk. flickr. kom /crossdomain. xml -"); sikkerhed. loadpolicyfile ("http: //////////////farm3. statisk. flickr. kom /crossdomain. xml -"); sikkerhed. loadpolicyfile ("http: //////////////farm4. statisk. flickr. kom /crossdomain. xml -"), trin 11: oncomplete funktion, når den er færdig, flex - anvendelse af sig, oncomplete funktion vil blive kaldt (dette er, hvad vi, der er specificeret i trin 5).den oncomplete, funktion er indgangssted for anvendelsen, privat funktion oncomplete(): ugyldig (var - tjeneste: flickrservice = nye flickrservice (api_key) tjeneste. addeventlistener (flickrresultevent.photos_search, onphotossearch) tjeneste. billeder. søgning (", search_string," nogen "," ", nul, nul, nul, nul - 1", ", max_results, 1)}, den første ting, vi skal gøre, er at skabe en ny form for flickrservice klasse.den flickrservice objekt er vores forbindelsesled til flickr og vi bruger den til at fremlægge vores søgen efter vores solopgang billeder.du er nødt til at levere flickr api - nøgle (fra trin 8) til flickrservice konstruktøren., var: flickrservice = nye flickrservice (api_key), næste vi lægger en funktion til flickrresultevent.photos_search begivenhed.denne funktion vil blive kaldt, da flickr er vendt tilbage nogle oplysninger om en eftersøgning.vi lægger den onphotossearch funktion., service. addeventlistener (flickrresultevent.photos_search, onphotossearch), vi udfører den faktiske leder selv.søgefunktionen har mange parametre, der kan bruges til at indsnævre søgningen til en bestemt bruger, dato, titel og mere.vi er kun interesserede i at finde billeder med tag solnedgang, og så give enten et retligt, tom snor eller - fra 1. til disse andre parametre,.,. billeder. søgning (", search_string," nogen "," ", nul, nul, nul, nul, - 1", ", max_results, 1), trin 12: onphotosearch funktion, onphotosearch funktion kaldes når flickr er vendt tilbage nogle oplysninger om vores søgen. privat funktion onphotossearch (ref.: flickrresultevent): ugyldig (hvis (ref. succes) (var - photolist: pagedphotolist = event.data.photos; billeder = nye arraycollection (photolist.photos); loadnextimage();} andre {alarm. (se" flickr kalder mislykkedes.har du ajourføre api - nøgle? ");), er det nødvendigt først at fastslå, om indkaldelsen til flickr var vellykket.dette er gjort ved at kontrollere event.success flag.hvis det er sandt, flickr med held har vendt nogle oplysninger om de billeder, vi har sat spørgsmålstegn ved det.hvis event.success er forkert, så ring ikke.det, der sker, fordi de api - nøgle, der blev forelagt, var ukorrekt. hvis (ref. succes) {...} andre {...}, hvis opkaldet var vellykket, er vi nødt til at få adgang til indsamling af data, der var billede tilbage., var photolist: pagedphotolist = begivenhed. data. billeder, pagedphotolist så indeholder nærmere oplysninger om de billeder selv, som vi så redde på billederne samling. billeder = nye arraycollection (photolist.photos); på dette tidspunkt er det billeder samling indeholder en liste over foto detaljer, som kan bruges til at laste den faktiske foto billeder.fra nu af vil vi bare downloade billeder fra url - adresser, vi har skabt ved hjælp af information på de billeder, indsamling, uden nogen særlige krav ved hjælp af flickr api -. at begynde fotoalbum, vi er nødt til at ringe til loadnextimage funktion. loadnextimage(); hvis der var et problem, der kalder flickr - brugeren er meddelt med en indberetning vindue., alarm. (se "flickr kalder mislykkedes.har du ajourføre api - nøgle? ");, trin 13: loadnextimage funktion, nu hvor vi har oplysninger om de billeder, der vedrører vores leder, vi har brug for rent faktisk at downloade billeder, så de kan vises.dette er gjort ved loadnextimage funktion. privat funktion loadnextimage(): ugyldig (var - imageurl: string = http://static.flickr.com/+ billeder [currentimage]. server + « /» + billeder [currentimage]. id + _ + billeder [currentimage]. hemmelige + _m jpg; + + currentimage; currentimage% = photos.length; var anmodning: urlrequest = nye urlrequest (imageurl) var at lade: rampe = nye loader(); at lade. contentloaderinfo. addeventlistener (event.complete, switchimages); pålæsser. belastning (anmodning)}, kan du huske, at jeg sagde, at ringe til flickr - faktisk ikke returnere billederne?hvad det kommer tilbage, er de oplysninger, der er nødvendige for at opbygge den internetadresse, som vi kan bruge til at downloade image.ved hjælp af den server, id og hemmelige oplysninger om de billeder, kan vi skabe fuld url, som vil vise billedet. og hvert billede er en række beslutninger.vi vælger, hvis størrelse billede vi downloader af endelsen af url.den _m suffiks viser, at vi er, at downloade en mellemstor version af billedet.andre suffikser kan ses her, som giver dem mulighed for at downloade mere eller mindre detaljeret udgave af billeder, var imageurl: string = http://static.flickr.com/+ billeder [currentimage]. server + « /» + billeder [currentimage]. id + _ + billeder [currentimage]. hemmelige + _m jpg - "nu, at vi har anmodet om det image, vi forøgelse af den currentimage variable så næste gang loadnextimage kaldes vi fjerner den næste billede i eftersøgningen liste. + + currentimage; currentimage% = billeder. længde, så har vi faktisk belastning billederne.vi skaber en ny urlrequest objekt (levering af url - at vi skabte over dennes), en ny platform objekt, og lægger den switchimages funktion til de dozere event.complete begivenhed., var anmodningen: urlrequest = nye urlrequest (imageurl) var at lade: rampe = nye loader(); at lade. contentloaderinfo. addeventlistener (event.complete, switchimages), og endelig, at vi lader billede fra flickr ved at grave belastning funktion., lade. belastning (anmodning), punkt 14: switchimages funktion, switchimages funktion er, når vi har ladet et nyt billede fra flickr. privat funktion switchimages (ref.: begivenhed): ugyldig (displayimage = event.currenttarget.content; displayimage.smoothing = sandt. displayimage.width = this.width; displayimage.height= this.height; displayimage.alpha = 0. addchild (nye displayobjectuicomponent (displayimage)); tweenmax. - displayimage, transition_time (alfa - 1, lette: lineær, oncomplete: imagetweencomplete}); hvis (backgroundimage!= nul) tweenmax. - backgroundimage, transition_time (- 0, lette: lineær})}, bitmap objekt, som er vendt tilbage fra læsning er gemt i displayimage variabel. displayimage = begivenhed. currenttarget. indhold; denne nye bitmap er i brug, således at det er beredt (hjælp med at pixelization, der kan forekomme, når du omfanget af små billeder), ændret for at udfylde det vindue, og der skal være helt gennemsigtig, ved at det er alfa - 0, displayimage.smoothing = sandt. displayimage.width = this.width; displayimage.height = this.height; displayimage.alpha = 0, vi så tilføje bitmap til anvendelse gennem en ny tilfælde af displayobjectuicomponent klasse, som vi, der er beskrevet i punkt 4. addchild (nye displayobjectuicomp.onent (displayimage). på dette punkt har vi et nyt image tilføjet som et barn af ansøgningen objekt.det er ikke synlig, men fordi vi har sat alpha - 0.det, vi ønsker, er at forsvinde, det nye billede i betragtning af, at det er alfa - værdi, samtidig med at de svagere det sidste billede ved at mindske det er alfa - værdi.det er, hvor tweenmax bibliotek kommer.vi ringer til tweenmax.to funktion, og tweenmax så tager sig af modifing alfa - værdier for os. ved at fastlægge oncomplete parameter til at imagetweencomplete vi planlægger imagetweencomplete funktion kaldes, når denne tweening operation er konkurrere. vi er nødt til at undersøge, om de backgroundimage variabel er ugyldig, fordi den første billede er - der er ingen eksisterende backgroundimage, at det udviser på toppen af. tweenmax. - displayimage, transition_time (alfa - 1, lette: lineær, oncomplete: imagetweencomplete}); hvis (backgroundimage!= nul) tweenmax. - backgroundimage, transition_time (- 0, lette: lineær}), trin 15: imagetweencomplete funktion, imagetweencomplete funktion kaldes, når en ny ladt image har været gået i lyset af tweenmax. privat funktion imagetweencomplete(): ugyldig (hvis (backgroundimage!= nul). removechild (backgroundimage. forældre); backgroundimage = displayimage; displayimage = ugyldig; tweenmax. delayedcall (display_time, loadnextimage)}, når displayimage har været forsvundet i den backgroundimage fjernes fra anvendelsen og displayimage bliver backgroundimage.det, displayimage er sat til nul, hvis (backgroundimage!= nul). removechild (backgroundimage. forældre); backgroundimage = displayimage; displayimage = ugyldig; vi så bruge tweenmax at planlægge en opfordring til loadnextimage funktion.denne cyklussen begynder ved et nyt image og svinder det igen. tweenmax. delayedcall (display_time, loadnextimage), indgåelse af flickr med flash kræver et par skridt, men når du får dit hoved omkring flickr api, at finde ud af, flickr image url - adresser, indlæse billederne fra flickr (under flash sikkerhed begrænsninger i betragtning), det er så let at bruge disse billeder til at skabe et attraktivt fotoalbum. dette eksempel, kunne anvendes til at tilføje en animeret fotoalbum en hjemmeside, og ved at ændre den search_string variabel kan du vise forskellige billeder.du kan selv gå flashvars til flash applet at afgøre, hvilke billeder vises uden at recompile anvendelse.du kan også ændre service.photos.search funktion at vende tilbage kun deres egne billeder, eller dem, som du har mærket specifikt. tak for at læse.