Build en AS3 Bilde Slider Widget for sosiale nettverkssider
Del
Del
Del
Del
Dette Cyber mandag Envato Tuts + kurs vil bli redusert til bare $ 3. Ikke gå glipp av.
I dag skal vi bygge et bilde Slider widget som kan plasseres på nettsamfunn som Orkut eller MySpace. Dette widget vil være basert på Googles Åpne Social API og inneholder et Flash-program, som vil vise alle bildene fra dine offentlige fotoalbum i en lysbildefremvisning.
"Plug-in klasser" vil håndtere overganger for lysbildeserien og denne opplæringen vil omfatte skrive to av disse "plug-ins".
Trinn 1: Ting vi trenger
For å bygge og teste widget vi trenger et par ting. Jeg har listet dem nedenfor:
Flash CS4
Javascript /PHP /XML editor (Eclipse /Aptana)
Noen hosting plass (med PHP støtte)
En konto på et sosialt nettverk som støtter Opensocial (minst versjon 0.8, for denne opplæringen jeg skal bruke Orkut).
Developer status på at nettsamfunn.
For XML /Javascript /PHP del av denne opplæringen jeg skal bruke Aptana, siden det er min redaktør av valg, men en redaktør vil gjøre selvfølgelig. Jeg har valgt Orkut fordi, vel, er Orkut Google og Opensocial er ... Google. Vi trenger en nyere versjon av Opensocial API for denne opplæringen (Orkut støtter versjon 0.9)
Trinn 2:. Forberedelser
Før vi kommer i gang, vi må sørge for at alt er konfigurert og satt opp akkurat slik vi vil ha det. For å teste denne widgeten vi trenger utvikleren status på Orkut. Gå til http://sandbox.orkut.com/SandboxSignup.aspx og fylle ut skjemaet. Du får en e-post som bekrefter din nye status. Å være en utvikler gir deg muligheten til å legge til widgets til din profil, som ennå ikke er godkjent av Orkut. Av sikkerhetsmessige årsaker disse widgetene er kun tilgjengelig for deg. Senere skal jeg vise deg i detalj hvordan du legger til en widget Orkut.
Neste, siden vi trenger en offentlig tilgjengelig fotoalbum, legge til noen bilder til et nytt album, og gjøre det offentlig. Anmeldelser
Trinn 3: gadget.xml
Vi kommer til å bygge denne widgeten fra bunnen og opp, så det første vi skal gjøre er å skrive widgeten XML-fil. Hvis dette er ditt første møte med Opensocial, vil jeg råde deg til å gå til http://www.opensocial.org/og lese opp om det. Kort sagt, er Opensocial et rammeverk utviklet av Google som kan implementeres av sosiale nettverk som gjør det enklere for utviklere å lage programmer for dem.
En widget består vanligvis av en XML-fil og noen ekstra midler. Denne XML-filen og tilleggsmidlene må plasseres et sted på en server, det er derfor vi trenger webhotell. XML-filen for denne widgeten vil bestå av to deler; XML-spesifikasjoner og Javascript-kode, som vil hente bildene fra dine album på profilen din og sende dem videre til Flash-applikasjonen
Trinn 4:. gadget.xml Setup
Utformingen av XML-filen er ikke rocket science. Den inneholder 2 noder, ModulePrefs og innhold, som er viktig for oss. I dette trinnet vil jeg diskutere den første, ModulePrefs.
Denne noden definerer variabler som er nødvendige for å beskrive elementet. Jeg tror ikke jeg trenger å forklare noe om de første som jeg håper, men hvis du er forvirret, kan du gå til Opensocial hjemmeside for mer informasjon.
Den siste derimot, er av større betydning. Med denne noden oppgir vi at vi trenger minst versjon 0.8 av Opensocial API ellers vil det ikke fungere. For dette programmet er det egentlig det eneste kravet vi trenger, men det er mange flere kan du definere her. Igjen, hvis du ønsker å vite mer, er OpenSocial.org stedet å være
. ≪? Xml version = "1.0" encoding = "UTF-8" >? ≪ Module > < ModulePrefs title = "FlashTuts Widgets" author = "GERB Sterrenburg" author_email = "[email protected]" description = "FlashTuts Widget" height = "300" width = "400" skalering = "false" scrolling = "false" screenshot = "http://85.17.135.135/~gerbster/projects/FlashTutsWidget/screenshot.png" thumbnail = "http://85.17.135.135/~gerbster/projects/FlashTutsWidget/thumbnail.png" > < Krev funksjonen = "Opensocial-0.8" /> < /ModulePrefs > < Innholdstype = "html" > <! [CDATA [< script type = "text /javascript" > //Henter alt av betrakterens album som er offentlig tilgjengelig (dvs. //"deles med alle" var masterAlbumArray = new Array (); funksjons fetchAlbums () {var req = opensocial.newDataRequest (); Var idspec = opensocial.newIdSpec ( {"brukerid": "EIER", "groupId": "SELF"}); req.add (req.newFetchAlbumsRequest (idspec), 'ownerAlbums'); req.send (fetchAlbumsHandler);}; //tilbakeringingsfunksjonen, henrettet når Orkut ferdig henter betrakterens //offentlige album fungere fetchAlbumsHandler (hhv) {var ownerAlbumsResp = resp.get ('ownerAlbums'); (! ownerAlbumsResp.hadError ()) hvis {var ownerAlbums = ownerAlbumsResp.getData (); //hver Albumet er et objekt inne de viktigste objekt 'viewerAlbums' //vi kommer til å lage ett stort album som vi skal feed til //blitsen søknaden ownerAlbums.each (funksjon (album) {addAlbumToMasterAlbum (album.getId () );});}}; //Henter alle bilder fra albumet med den passerte ID-funksjonen addAlbumToMasterAlbum (ALBUMID) {var req = opensocial.newDataRequest (); Var idspec = opensocial.newIdSpec ({"brukerid": "EIER", "groupId": "SELF"}); req.add (req.newFetchMediaItemsRequest (idspec, ALBUMID), 'albumPhotos'); req.send (addAlbumToMasterAlbumHandler); }; //Tilbakering funksjon, henrettet når Orkut ferdig henting av //bedt medieelementer funksjon addAlbumToMasterAlbumHandler (resp) {var albumPhotosResp = resp.get ('albumPhotos'); hvis {var albumPhotos = albumPhotosResp.getData () (albumPhotosResp.hadError ()!); albumPhotos.each (funksjon (bildet) {masterAlbumArray.push (photo.getField ('url'));}); //Nå at alle foto er i //den masterAlbum, starte Flash App launchFlashApp (); }}; //Vise flash app funksjon launchFlashApp () {var content = "< embed src =" http://85.17.135.135/~gerbster/projects/FlashTutsWidget/widget.swf "width =" 400 "height =" 300 " quality = "high" bgcolor = "000000" pluginspage = "http://www.macromedia.com/go/getflashplayer" allowScriptAccess = "always" FlashVars = "" type = "application /x-shockwave-flash" > '; document.getElementById ("flashTutsWidgetDiv") innerhtml = innhold.; }; fungere retrieveMasterAlbum () {return masterAlbumArray; }; //Execute fetchAlbums funksjon når gadget laster gadgets.util.registerOnLoadHandler (fetchAlbums); < /script > < div id = "flashTutsWidgetDiv" style = "width: 380, høyde: 400" > < img src = "http://85.17.135.135/~gerbster/projects/FlashTutsWidget/loader.gif" /> Laster ... < /div > ]] > < /Content > < /Module >
Trinn 5: gadget.xml Java
Nå skal vi få til de virkelig interessante delen av XML-filen, innholdet node. Som nevnt ovenfor, er Opensocial en API skrevet i Javascript for å gi utviklere tilgang til alle typer data i et sosialt nettverk nettsted.
For denne widgeten vi kommer til å bruke noe av funksjonaliteten om fotoalbum og medieelementer. Jeg skal gi deg koden først og dem vi vil gå gjennom det steg for steg.
//Henter alt av betrakterens album som er offentlig tilgjengelig (dvs. //"deles med alle" var masterAlbumArray = new Array ( ), funksjons fetchAlbums () {var req = opensocial.newDataRequest (); Var idspec = opensocial.newIdSpec ({"brukerid": "EIER", "groupId": "SELF"}); req.add (req.newFetchAlbumsRequest ( idspec), 'ownerAlbums'); req.send (fetchAlbumsHandler);}; //tilbakeringingsfunksjonen, henrettet når Orkut ferdig henter betrakterens //offentlig albumsfunction fetchAlbumsHandler (resp) {var ownerAlbumsResp = resp.get ('ownerAlbums'); hvis {var ownerAlbums = ownerAlbumsResp.getData () (ownerAlbumsResp.hadError ()!); //hvert album er et objekt inne i hovedobjektet 'viewerAlbums' //vi kommer til å lage ett stort album som vi skal fôr til //blitsen søknaden ownerAlbums.each (funksjon (album) {addAlbumToMasterAlbum (album.getId ());});}}; //Henter alle bildene fra albumet med bestått IDfunction addAlbumToMasterAlbum (ALBUMID) {var req = opensocial.newDataRequest (); Var idspec = opensocial.newIdSpec ({"brukerid": "EIER", "groupId": "SELF"}); req.add (req.newFetchMediaItemsRequest (idspec, ALBUMID), 'albumPhotos'); req.send (addAlbumToMasterAlbumHandler);}; //tilbakeringing funksjon, henrettet når Orkut ferdig henting av //bedt media itemsfunction addAlbumToMasterAlbumHandler (resp) {var albumPhotosResp = resp.get ('albumPhotos'); hvis {var albumPhotos = albumPhotosResp.getData () (albumPhotosResp.hadError ()!); albumPhotos.each (funksjon (bildet) {masterAlbumArray.push (photo.getField ('url'));}); //Nå at alle foto er i //den masterAlbum, starte Flash App launchFlashApp (); }}; //Viser blitsen appfunction launchFlashApp () {var content = "< embed src =" http://85.17.135.135/~gerbster/projects/FlashTutsWidget/widget.swf "width =" 400 "height =" 300 "quality =" high "bgcolor =" 000000 "pluginspage =" http://www.macromedia.com/go/getflashplayer "allowScriptAccess =" always "FlashVars =" "type =" application /x-shockwave-flash "> '; document.getElementById ("flashTutsWidgetDiv") innerhtml = innhold.; }; funksjon retrieveMasterAlbum () {return masterAlbumArray;}; //Execute fetchAlbums funksjon når gadget loadsgadgets.util.registerOnLoadHandler (fetchAlbums);
Den generelle ideen bak denne delen av koden er ikke veldig komplisert. Vi vil definere en matrise, som vi fyller med URL-er av alle bildene i offentlig tilgjengelige album. Hvis dette er gjort, vil vi vise Flash-programmet, som vil deretter hente matrisen vi nettopp har gjort
Trinn 6:. Hente Album
For å hente alle fotoalbum fra profil, trenger vi to funksjoner. . En som vil utføre samtalen og en som vil håndtere resultatet når det kommer tilbake fra call of
Caller:
funksjons fetchAlbums () {var req = opensocial.newDataRequest (); Var idspec = opensocial.newIdSpec ({"brukerid": "EIER", "groupId": "SELF"}); req.add (req.newFetchAlbumsRequest (idspec), 'ownerAlbums'); req.send (fetchAlbumsHandler);};
Handler:
//Tilbakering funksjon, henrettet når Orkut ferdig henter betrakterens //offentlig albumsfunction fetchAlbumsHandler (resp) {var ownerAlbumsResp = resp.get ('ownerAlbums'); hvis {var ownerAlbums = ownerAlbumsResp.getData () (ownerAlbumsResp.hadError ()!); //Hvert album er et objekt inne de viktigste objekt 'viewerAlbums' //vi kommer til å lage ett stort album som vi skal feed til //blitsen søknaden ownerAlbums.each (funksjon (album) {addAlbumToMasterAlbum (album. getId ());}); }};
Jeg ønsker ikke å gå til i for mye dybde her om Opensocial, siden det ikke er hovedmotivet for denne opplæringen. Men for å gi deg noen hint om hva som skjer her, vil jeg forklare det i generelle vendinger.
I Opensocial miljøet vil du ha 2 roller, nemlig "eier" og "viewer". Unødvendig å si, er eieren den faktiske eieren av profilen, så betrakteren, vel det er den personen som besøker. Hvis du kommer til å be om noen data, må du spesifisere hvilke data du vil; betrakterens eller eierens.
Neste, hvis du utfører en forespørsel, må du angi et behandlingsprogram. Dette handler vil bli utført når data kommer tilbake fra serveren. Så her ber vi om alle albumene som tilhører eierens profil og når data kommer tilbake fra serveren, vil vi hente alle bildene fra dem
Trinn 7:. Hente de Bilder fra
Dette trinnet er svært lik den forrige. For hvert album vi kommer tilbake, vil vi kalle en funksjon for å hente elementene i den. Deretter vil disse elementene bli lagt til vår rekke, som vil bli hentet av flash program senere.
//Henter alle bildene fra albumet med bestått IDfunction addAlbumToMasterAlbum (ALBUMID) {var req = opensocial.newDataRequest (); Var idspec = opensocial.newIdSpec ({"brukerid": "EIER", "groupId": "SELF"}); req.add (req.newFetchMediaItemsRequest (idspec, ALBUMID), 'albumPhotos'); req.send (addAlbumToMasterAlbumHandler);};
Handler:
//Tilbakering funksjon, henrettet når Orkut ferdig henting av //bedt media itemsfunction addAlbumToMasterAlbumHandler (resp) {var albumPhotosResp = resp.get ('albumPhotos'); hvis {var albumPhotos = albumPhotosResp.getData () (albumPhotosResp.hadError ()!); albumPhotos.each (funksjon (bildet) {masterAlbumArray.push (photo.getField ('url'));}); //Nå at alle foto er i //den masterAlbum, starte Flash App launchFlashApp (); }};
Merk: vi bare får nettadressen fra fotoobjektet, men det er mer. For en fullstendig liste over alle de egenskapene du kan hente, som kommentarer og statistikk, gå til opensocial.org.
Trinn 8: Plassering av Flash App på skjermen
Den siste linjen av den som håndterer funksjonen beskrevet ovenfor samtaler for funksjonen "launchFlashApp"
launchFlashApp ();
Dette. gjør akkurat det navnet tilsier, det plasserer blitsen søknad inne i div tag definert på bunnen av innholdet node. Når det er lastet, vil blitsen søknaden kaller funksjonen "retrieveMasterAlbum"
//vise flash appfunction launchFlashApp () {var content = "<. Embed src =" http://85.17.135.135/~gerbster/projects /FlashTutsWidget/widget.swf "width =" 400 "height =" 300 "quality =" high "bgcolor =" 000000 "pluginspage =" http://www.macromedia.com/go/getflashplayer "allowScriptAccess =" alltid "FlashVars = "" type = "application /x-shockwave-flash" > '; document.getElementById ("flashTutsWidgetDiv") innerhtml = innhold.; };
Den siste linjen i dette script delen vil kalle fetchAlbums funksjonen når widget er fullastet
//Execute fetchAlbums funksjon når gadget loadsgadgets.util.registerOnLoadHandler (fetchAlbums);
Trinn 9:. Proxy Php
Nå som XML-filen er klar, må vi gjøre en ting før vi kan starte med blitsen del av opplæringen. Sikkerhetsrestriksjoner av flash player hindre den fra å få tilgang til bitmap data i et bilde lastet fra et annet domene. Siden vi trenger at bitmap data for effekten kommer vi til å legge senere, trenger vi en løsning på dette problemet. Løsningen kommer i form av et lite stykke PHP. Dette skriptet vil fungere som en proxy mellom sosiale medier området og vår flash applikasjon.
Det er veldig enkelt, bare passere en URL til dette skriptet, og det vil hente og vise innholdet i denne nettadressen. På denne måten vil blitsen søknaden tror at bildet kommer fra vår egen server, og vi trenger ikke å bekymre seg om sikkerheten begrensning
. ≪? Php $ post_data = $ HTTP_RAW_POST_DATA; $ header [] = "Content-type: text /xml"; $ header [] = "Content-Length:" .strlen ($ post_data); preg_match ("/url = (*) /.", $ _ SERVER ['REQUEST_URI'], $ params); $ lm = curl_init ($ params [1]); curl_setopt ($ lm, CURLOPT_RETURNTRANSFER, 1); curl_setopt ($ lm, CURLOPT_TIMEOUT, 10); curl_setopt ($ lm, CURLOPT_HTTPHEADER, $ header); if (strlen ($ post_data) > 0) {curl_setopt ($ lm, CURLOPT_POSTFIELDS, $ post_data); } $ Svar = curl_exec ($ ch); if (curl_errno ($ ch)) {print curl_error ($ ch); } Else {curl_close ($ ch); header ("Content-type: text /xml; Content-Length:" .strlen ($ respons)); print $ respons; } >?
Siden denne opplæringen ikke om PHP Jeg har tatt meg den frihet å bruke et eksisterende skript. Det er skrevet av Abdul Qabiz og den gjør akkurat det vi ønsker, så du trenger ikke å finne opp hjulet. Mer informasjon om dette skriptet kan bli funnet her ..
.. og mer informasjon om sikkerhets begrensningen kan bli funnet her
Trinn 10:. Flash - Innledning
Som nevnt ovenfor, vil blitsen søknaden vise alle bildene i et slideshow og "plug-in klasser" vil utføre overgangene. Det første vi må gjøre er å sette opp en ny Flash prosjekt og tildele sin base klasse. Jeg ønsker ikke å gå inn i detaljene for mye, fordi jeg antar at dette ikke er den første flash applikasjon du har bygget
Trinn 11:. Flash - Base Class
Hvis du lastet ned kildefilene for dette prosjektet, vil du legge merke til at i rotkatalogen (den som inneholder FLA fil), er det en mappe som heter "widget" og inni den mappen er det en fil som heter "Widget.as". Dette kommer til å være vår base klasse.
Nedenfor ser du hele koden til baseklassen. Igjen, jeg vil ikke diskutere alle detaljer i det, men i de neste trinnene vil jeg fremheve de viktigste aspektene
pakke widget {import flash.display *..; import flash.events. *; importere flash.geom. *; import flash.net.URLRequest; importere flash.system. *; import gs.TweenMax; import widget.transitions. *; import widget.OpenSocialPhotoLoader; public class Widget strekker MovieClip {private Var MyProxy: String = "http://85.17.135.135/~gerbster/projects/FlashTutsWidget/proxy.php?url="; //private Var MyProxy: String = ""; private Var myOSPL: OpenSocialPhotoLoader; private Var photoArray: Array; private Var myPhotoLoader: Loader; offentlig Var myPhotoHolder: MovieClip; private Var fadeInOutTransition: FadeInOut; private Var cubes3DTransition: Cubes3D; private Var transitionsArray: Array = new Array (); private Var currentPhotoIndex: Antall = 0; private Var transitionIndex: Number = NaN; private Var photoTime: Number = 5; offentlig funksjon Widget (): void {Security.allowDomain ("orkut.com"); myPhotoHolder = new MovieClip (); myPhotoHolder.name = "photoHolder"; addChild (myPhotoHolder); initPhotoArray (); initTransitions (); if (photoArray.length > 0) {loadPhoto (currentPhotoIndex); }} Privat funksjon initPhotoArray () {myOSPL = new OpenSocialPhotoLoader (); addChild (myOSPL); myOSPL.loadAlbum (); photoArray = myOSPL.masterAlbum; } Private funksjon initTransitions () {fadeInOutTransition = new FadeInOut (); cubes3DTransition = new Cubes3D (); transitionsArray.push (fadeInOutTransition); transitionsArray.push (cubes3DTransition); } Private funksjon loadPhoto (indeks: Number): void {if (indeks > = photoArray.length) {index = 0; } If (indeks == -1) {index = photoArray.length; } MyPhotoLoader = new Loader (); Var photoUrl: String = photoArray [index]; Var photoUrlReq: URLRequest = new URLRequest (MyProxy + photoUrl); myPhotoLoader.load (photoUrlReq); //Hvis fotografiet er lagt, ring showNextPhoto som vil gjøre overgangen myPhotoLoader.contentLoaderInfo.addEventListener (Event.COMPLETE, showNextPhoto); //Tilvekst currentPhotoIndex og kaller denne funksjonen igjen i 5 sekunder currentPhotoIndex = ++ indeks; TweenMax.delayedCall (photoTime, loadPhoto, [currentPhotoIndex]); } Private funksjon showNextPhoto (e: Hendelses) {//vi ønsker vår bildets pent skalert og sentrert Var scaleValue: Number = calculateScaleValue (e.target.loader.contentLoaderInfo.width, e.target.loader.contentLoaderInfo.height); Var translateX: Number = (stage.stageWidth - (e.target.loader.contentLoaderInfo.width * scaleValue)) /2; Var translateY: Number = (stage.stageHeight - (e.target.loader.contentLoaderInfo.height * scaleValue)) /2; //... Så vi bruker en matrise Var resizeMatrix: Matrix = new Matrix (); resizeMatrix.scale (scaleValue, scaleValue); resizeMatrix.translate (translateX, translateY); Var newPhotoBitmapData: BitmapData = nye BitmapData (stage.stageWidth, stage.stageHeight, falsk, 0x000000); newPhotoBitmapData.draw (e.target.loader, resizeMatrix, null, null, null, true); //Hvis det er et bilde på scenen gjør en overgang hvis (myPhotoHolder.numChildren > 0) {var oldPhotoBitmapData: BitmapData = new BitmapData (stage.stageWidth, stage.stageHeight, falsk, 0x000000); oldPhotoBitmapData.draw (myPhotoHolder.getChildAt (0), null, null, null, null, true); //Fjerne den gamle overgangsobjekt if (myPhotoHolder.getChildAt (0) er Itransition) {transitionsArray [transitionIndex] .destroyTransition (); } //Fjerne den gamle overgangsobjekt myPhotoHolder.removeChild (myPhotoHolder.getChildAt (0)); //Plukke en tilfeldig overgang transitionIndex = Math.round (Math.random () * (transitionsArray.length - 1)); myPhotoHolder.addChild (transitionsArray [transitionIndex]); transitionsArray [transitionIndex] .doTransition (oldPhotoBitmapData, newPhotoBitmapData); } Else {var newPhoto: Bitmap = new Bitmap (newPhotoBitmapData); myPhotoHolder.addChildAt (newPhoto, 0); }} Privat funksjon calculateScaleValue (oldWidth: Antall, oldHeight: Number): Antall {var photoRatio: Number = oldHeight /oldWidth; Var screenRatio: Number = stage.stageHeight /stage.stageWidth; if (photoRatio < screenRatio) {return stage.stageWidth /oldWidth; } Else {return stage.stageHeight /oldHeight; }}}}
Trinn 12: Flash - Importen
Før vi kan få noe til å kjøre, må vi importere noen klasser. De første fem er innfødt flash klasser, og er ikke veldig spennende. Neste vi trenger å importere TweenMax. TweenMax er et vanlig tween klasse, men vi kommer til å bruke det her fordi er har en delayedTask funksjon. Vi vil diskutere dette i mer detalj senere. Til slutt må vi importere overgangs klasser og OpenSocialPhotoLoader klassen
importere flash.display. *;. Import flash.events. *; Import flash.geom. *; Import flash.net.URLRequest; import flash.system *. ., import gs.TweenMax, import widget.transitions *; import widget.OpenSocialPhotoLoader;
Trinn 13: Flash - Constructor
Som du sikkert vet, vil konstruktøren bli tilkalt når du starter programmet, så her vil vi gjøre alle initializations. Først vil vi fortelle dette programmet som Orkut.com er et trygt domene. Vi må gjøre dette, ellers vil vi ikke være i stand til å ringe Javascript-funksjonen for å få bildet array. Neste vil vi legge til en tom MovieClip til scenen, som vil fungere som en beholder for bildets vi er i ferd med å vise. For det tredje vil vi kaller to init funksjoner. Disse funksjonene initial overgangene og hente foto matrisen fra javascript. De siste 3 linjer med kode vil undersøke om det noen bilder i rekken og i så fall vise den første
offentlig funksjon Widget (). Void {Security.allowDomain ("orkut.com"); myPhotoHolder = new MovieClip (); myPhotoHolder.name = "photoHolder"; addChild (myPhotoHolder); initPhotoArray (); initTransitions (); if (photoArray.length > 0) {loadPhoto (currentPhotoIndex); }}
Trinn 14: Flash - InitPhotoArray
initPhotoArray funksjonen vil gjøre en ny forekomst av OpenSocialPhotoLoader klassen, legge til scenen, deretter ringe loadAlbum funksjon i den klassen, og til slutt tildele masterAlum variable inne at klassen til våre lokale photoArray variabel (som vi erklært på toppen av klassen). I neste trinn vil vi diskutere OpenSocialPhotoLoader klassen nærmere
privat funksjon initPhotoArray () {myOSPL = new OpenSocialPhotoLoader (.); addChild (myOSPL); myOSPL.loadAlbum (); photoArray = myOSPL.masterAlbum;}
Trinn 15: Flash - OpenSocialPhotoLoader
For å få det åpenbare spørsmålet ut av veien, hvorfor bruke en egen klasse for å laste bildene? Vel, hvis du ønsker å bruke dette programmet i et annet miljø, trenger du ikke å fullstendig omskrive base klassen, bare bygge en ny Loader klasse og gjennomføre det. Hail OOP!
Denne klassen er veldig enkel skjønt. Den inneholder en loadAlbum funksjon, som vil bruke det eksterne grensesnittet klasse fra AS3 biblioteket for å ringe retrieveMasterAlbum funksjon fra javascript. Denne funksjonen returnerer et objekt som inneholder all nettadresser. Til slutt vil alle elementene i det objektet legges til en lokal Array
pakke widget {import flash.external.ExternalInterface.; import flash.display.MovieClip; public class OpenSocialPhotoLoader strekker MovieClip {private Var rawMasterAlbum: Object; offentlig Var masterAlbum: Array = new Array (); offentlig funksjon OpenSocialPhotoLoader () {} offentlig funksjon loadAlbum (): void {if (ExternalInterface.available) {try {rawMasterAlbum = ExternalInterface.call ("retrieveMasterAlbum"); for hver (var verdi: * i rawMasterAlbum) {masterAlbum.push (value.toString ()); }} Catch (feil: Security) {} catch (error: Feil) {}} else {}}}}
Siden kalle en funksjon fra javascript er utsatt for alle typer feil, vil vi bruke en prøve fangst konstruksjon her.
Trinn 16: Flash - initTransitions
La oss komme tilbake til basen vår klasse. Etter initialisering bildet array, kommer vi til å initialisere de ulike overgangene vi skal bygge senere. I toppen av denne klassen har vi erklært to overganger og en overgang array. Det vi gjør her er veldig enkelt; gjøre en forekomst av overgangen klassen og skyv den inn i matrisen
private funksjons initTransitions () {fadeInOutTransition = new FadeInOut (.); cubes3DTransition = new Cubes3D (); transitionsArray.push (fadeInOutTransition); transitionsArray.push (cubes3DTransition);}
Hvorfor vi gjør dette, jeg skal fortelle deg senere
Trinn 17:. Flash - loadPhoto
De siste 3 linjer med konstruktøren var ansvarlig for "kick start" programmet. Hvis det er noen bilder i rekken, er loadPhoto kalles med currentPhotoIndex som sitt argument. Den variable currentPhotoIndex er deklarert på toppen av klassen og det holder indeksnummeret til det aktuelle bildet på skjermen. Det er erklært med standardverdien 0. La oss undersøke funksjonen og deretter diskutere det.
privat funksjon loadPhoto (indeks: Number): void {if (indeks > = photoArray.length) {index = 0; } If (indeks == -1) {index = photoArray.length; } MyPhotoLoader = new Loader (); Var photoUrl: String = photoArray [index]; Var photoUrlReq: URLRequest = new URLRequest (MyProxy + photoUrl); myPhotoLoader.load (photoUrlReq); //Hvis fotografiet er lagt, ring showNextPhoto som vil gjøre overgangen myPhotoLoader.contentLoaderInfo.addEventListener (Event.COMPLETE, showNextPhoto); //Tilvekst currentPhotoIndex og kaller denne funksjonen igjen i 5 sekunder currentPhotoIndex = ++ indeks; TweenMax.delayedCall (photoTime, loadPhoto, [currentPhotoIndex]);}
De to første hvis Som et siste skritt vi vil øke currentPhotoIndex og bruke TweenMax delayedCall funksjon for å re -Ring denne funksjonen i 5 sekunder. Mer informasjon om delayedCall funksjonen finner du på hjemmesiden til TweenMax: http://blog.greensock.com/tweenmaxas3/ Denne funksjonen er viktigste funksjonen av dem alle. Kort sagt, vil det endre størrelse og plassere lastet bildet riktig, lever det ned til overganger klasser, så til slutt sørge for at det er synlig på skjermen. Denne funksjonen kalles når et bilde er fullastet. Jeg vil bryte denne funksjonen ned i 4 deler Red.anm. Det første vi skal gjøre er å skalere bildet og plassere den på riktig måte. Uansett hva dimensjonene på bildet er, det blir sentrert og plassert på en svart bakgrunn. For å gjøre dette bruker vi en matrise. Selv om det kan virke skremmende i starten, ved hjelp av en matrise er svært effektiv og ikke så vanskelig. Mer informasjon om matriser kan bli funnet i AS3 API på adobe.com. Vi bruker en liten funksjon som heter calculateScaleValue å bestemme skaleringsfaktor vi trenger for å endre størrelse på bildet Neste vi vil finne ut om det er noen bilder på skjermen enda. Vi må gjøre dette fordi det første bildet trenger å bli vist direkte uten en overgang (det er ingenting å overgang fra) Men hvis det er et bilde allerede, må vi først fjerne den gamle overgangsobjekt, deretter plukke en ny en fra overganger matrisen ved hjelp av tilfeldighetsfunksjon, legg dette til skjermen og til slutt rekkefølge overgangen til klassen "doTransition". Som argumenter vi mater den gamle, nåværende bitmap data og de nye bitmap data. Merke seg her at vi bruker Itransition grensesnitt for å sjekke om barnet på scenen er en overgang klasse eller ikke. Mer informasjon om dette grensesnittet vil komme i noen få trinn Hvis ikke, vi bare sette bildet på skjermen Som nevnt tidligere, det. overgangseffekter blir håndtert av plug-ins. Plug-ins er klasser som implementerer et grensesnitt som heter Itransition og vil håndtere den visuelle overgangen fra den gamle bilder til den nye. Jeg har gjort to av disse klassene, en enkel fade in /fade out overgang og sammensatt, som viser 3d roterende kuber. I de neste trinnene skal vi diskutere dette grensesnittet og de 2 overganger Hvis dette er ditt første møte med et grensesnitt, vil jeg råde deg for å søke på nettet og lese opp om det. Kort sagt, er et grensesnitt en OOP konsept og det definerer noen spesifikasjoner for de ulike plug-in klasser. Vi skal bruke det her for å sørge for at våre overgangs klassene omfatter visse funksjoner. Koden for dette grensesnittet er svært enkel: Både våre overgangs klasser vil implementere dette grensesnittet, slik at begge må ha en doTransition og en destroyTransition funksjon eller annet vi får kompilatorfeil. I tillegg vil vi bruke dette grensesnittet for å sjekke om et objekt inne i bildet container på scenen er en overgang klasse Den første av. våre to overgangs klasser er en fade i fade out effekt. import org.papervision3d.objects.DisplayObject3D; Hvorfor?
uttalelser vil sjekke om currentPhotoIndex er utenfor banen, og hvis så, riktig det. Neste skritt vil være faktisk legger i bildet. Vi bruker vår proxy script her for å omgå flash sikkerhet begrensning. Den MyProxy strengen er også erklært på toppen av klassen. Vi vil legge til en eventListener til denne lasteren, som vil utføre showNextPhoto funksjon i tilfelle at bildet er fullastet.
Trinn 18:. Flash - ShowNextPhoto
Som tidvis skjer, gjorde noe innenfor dette showNextPhoto funksjonen ikke ønsker å spille pent med vår syntax highlighter. Som det ikke vil vise på siden, har jeg gjort funksjonen tilgjengelig for nedlasting. Beklager for eventuelle ulemper, Ian.
if (myPhotoHolder.numChildren > 0).
if (myPhotoHolder.numChildren > 0) {var oldPhotoBitmapData. BitmapData = new BitmapData (stage.stageWidth, stage.stageHeight, falsk, 0x000000); oldPhotoBitmapData.draw (myPhotoHolder.getChildAt (0), null, null, null, null, true); //Fjerne den gamle overgangsobjekt if (myPhotoHolder.getChildAt (0) er Itransition) {transitionsArray [transitionIndex] .destroyTransition (); } //Fjerne den gamle overgangsobjekt myPhotoHolder.removeChild (myPhotoHolder.getChildAt (0)); //Plukke en tilfeldig overgang transitionIndex = Math.round (Math.random () * (transitionsArray.length - 1)); myPhotoHolder.addChild (transitionsArray [transitionIndex]); transitionsArray [transitionIndex] .doTransition (oldPhotoBitmapData, newPhotoBitmapData);}
annet {var newPhoto. Bitmap = new Bitmap (newPhotoBitmapData); myPhotoHolder.addChildAt (newPhoto, 0);}
Trinn 19: Flash - The Transition Plugins
Trinn 20:. Flash - Grensesnittet
pakke widget.transitions {import flash.display. *; felles grensesnitt Itransition {funksjon doTransition (oldPhotoBitmapData: BitmapData, newPhotoBitmapData: BitmapData): void; funksjon destroyTransition (): void}}
Trinn 21: Flash - The FadeInOut klasse