Share
Innholdsoppdateringer i Flash kan være vanskelig og tidkrevende på grunn av de mange trinnene som er involvert. Bare å lese innhold fra en XML-fil betyr at det ikke lenger er nødvendig å importere nye eiendeler og kompilere swf-filen. Denne opplæringen vil dekke dynamisk lasting av bilder fra en XML-fil og deretter håndtere inkonsekvenser i bildedimensjonene ved hjelp av GreenSock Tween Max animasjonsbiblioteket.
La oss ta en titt på et skjermbilde av den endelige lysbildeserien vi skal arbeide for:
Grensesnittbilder og eksempler er gitt ved hjelp av Flash CS4 og Actionscript 2, men andre versjoner av Flash så langt tilbake som versjon 8 burde kunne følge med uten problemer. Denne opplæringen antar minst et arbeidskunnskap om Actionscript siden jeg ikke skal forklare hver linje, men selv om du bare kopierer og limer, burde du kunne få dette til å fungere.
Med et prosjekt av denne typen er det viktig å holde alt organisert slik at Flash kan finne ting etter behov. Så opprett en prosjektmappe på datamaskinen din der du kan plassere alle filene relatert til dette prosjektet.
Finn bilder for lysbildeserien din. Jeg brukte flere bilder fra http://www.sxc.hu (sxc_hu_410471_5588.jpg, sxc_hu_1151936_79441078.jpg, sxc_hu_1152040_85122875.jpg, sxc_hu_1154131_54136948.jpg).
Opprett en "eiendeler" -mappe inne i prosjektmappen din. Åpne din favorittbildeditor og endre størrelsen på bildene dine, slik at de er alle like store. Jeg har forstørret bildene mine slik at den lengste siden (høyde eller bredde) er 700px og tillater bildedigeringsprogramvaren for å opprettholde bildeforholdet.
Siden eksterne aktiver ikke drar nytte av en Flash-preloader, vil dette være en utmerket tid for å optimalisere bildene dine for rask nedlasting. Flash kan laste png-, jpeg- eller gif-filer, så sørg for at de endelige bildene dine er i ett av disse formatene og lagre dem i aktivitetsmappen du nettopp har opprettet.
Endre størrelsen på scenen din for å være litt større enn bildene du opprettet i trinn 2. Målet er å sørge for at bilder som vises, ikke blir avskåret i den endelige presentasjonen. Jeg brukte 800px x 800px for å gi 700px bildene 50px plass på alle sider. Nå er det også en flott tid å endre rammen til 30fps for fine, jevne overganger og velg en bakgrunnsfarge etter eget valg.
Gi nytt navn til "lag 1" til "bakgrunn". Lag et nytt lag og kaller det "innhold". Lag ett lag og kaller det "script", og det er en god ide å låse dette laget. Alt du plasserer på bakgrunnslaget vises bak lysbildeserien. Hvis du ser på eksemplet, er teksten i dette laget.
Bruk tegneobjektet til å lage et hvitt firkant på scenen. Velg torget og konverter det til et symbol (F8). Pass på at registreringspunktet er øverst til venstre og ring klippet "skall". Gi klippet et forekomstnavn på "shell_mc".
Inne i "shell_mc" velg den hvite boksen og konverter den til et symbol (F8). Igjen, sørg for at registreringen er øverst til venstre og navnet på klippet "bakgrunn". Gi den nye filmenClip et forekomstnavn på "background_mc". Til slutt navn laget "bakgrunn" og lås det.
Inne i "shell_mc" opprett et nytt lag kalt "tekst". Bruk tekstverktøyet til å lage statisk tekst som sier "laster bilde". Flytt teksten til x: 20 og y: 20 slik at den ender opp under bildet.
Lag et nytt lag i "shell_mc" kalt "bilder". Lag en tom filmClip kalt "pics", og dra den fra biblioteket til det nyopprettede "bilder" -laget. Flytt klippet til x: 10 og y: 10 og gi det et forekomstnavn på "pics_mc".
Inne i "shell_mc" lag et lag over "bilder og navnet" masken ". Lag et nytt firkant, konverter det til en filmClip kalt "mask" og gi den et forekomstnavn på "mask_mc". Flytt klippet til x: 10 og y: 10.
Høyreklikk på "masken" laget og velg Mask. Pass på at ikonene "mask" og "bilde" lagres for å se ut som eksemplet.
Inne i "shell_mc" lag et lag over "mask" og navnet "frame". I verktøylinjen, velg en strekkfarge og en annen fyllfarge, og opprett en firkant på rammen "Ramme". Velg fyllingsområdet og slett det, og bare etterlate grensen. Dobbeltklikk på grensen for å velge den og konverter den til en filmClip kalt "border". Gi filmklippet og forekomstnavnet "border_mc" og plasser det på x: 10 og y: 10.
Gå tilbake til rottidslinjen og velg "shell_mc". Gå til egenskapspanelet og skru ned filtrene pilen. Klikk på det lille "siden" -ikonet og velg drop shadow. Dette vil legge til litt dybde.
Vi er ferdige med Flash for øyeblikket og trenger å lage en XML-fil for å holde oversikt over bildene våre. Åpne din favoritt tekstredigerer (stort sett alt som kan redigere HTML, vil fungere) og opprette en ny fil. Lagre filen i prosjektmappen din som content.xml. Nå må vi legge til en struktur i filen, slik at Flash kan forstå hvordan du bruker informasjonen, vi kan gjøre det med følgende kode:
Nå må vi legge til baner til alle bildene i lysbildeserien (dette er hvordan Flash skal "finne" bildene). Inne i
Lagre filen og lukk tekstredigeringsprogrammet.
Vi skal bruke et tweening-bibliotek for å hjelpe oss med å animere overgangene mellom bilder, så åpne nettleseren din, gå til http://blog.greensock.com/tweenmaxas2/ og klikk på "Last ned AS2" -knappen øverst. Åpne zip-filen du lastet ned, og kopier deretter "gs" -mappen og innholdet til prosjektmappen din.
Det er på tide å gå tilbake til Flash-filen din og begynne å skrive noen Actionscript. Velg første ramme av "skript" laget og åpne handlingspanelet (vindu> handlinger). Følgende trinn krever at du redigerer innholdet i Handlinger-vinduet, så fra nå av skal jeg bare referere til dette som "script". Når vi går gjennom trinnene under, ser du alt skriptet opprettet til det punktet med de nyeste tilleggene uthevet.
Det første vi må gjøre er å inkludere tween-klassen vi lastet ned, slik at den kompilerer når swf er opprettet. Legg til følgende kode i skriptet ditt:
importere gs. *; importer gs.easing. *;
(Tilleggslinjer: 3-15)
Accentsconagua
importere gs. *; importer gs.easing. *; var xmlPath = "content.xml"; var photos_xml = ny XML (); photos_xml.ignoreWhite = true; photos_xml.onLoad = funksjon (suksess) hvis (suksess) // ----------- last vellykket annet // ----------- problem lasting, sjekk bane spor ("Feil ved lasting av photos_xml"); photos_xml.load (xmlPath); Dette skaper et nytt XML-objekt som retter seg mot vår "content.xml" -fil. Siden XML-filer ikke lastes øyeblikkelig, er det viktig å se etter en fullført last. Vi gjør dette med onLoad tilbakeringing som venter på xml-filen som skal lastes og deretter utfører en handling.
Først må vi opprette en serie kalt "imageList". Når xml-filen er lastet, skal vi tildele dataene til arrayet slik at det er lettere å få tilgang til senere.
(Tilleggslinjer: 7,10)
importere gs. *; importer gs.easing. *; var xmlPath = "content.xml"; var photos_xml = ny XML (); photos_xml.ignoreWhite = true; var imageList: Array = new Array (); photos_xml.onLoad = funksjon (suksess) hvis (suksess) // ----------- last vellykket imageList = photos_xml.firstChild.childNodes; annet // ----------- problem lasting, sjekk banespor ("Feil ved lasting av photos_xml"); photos_xml.load (xmlPath); Opprett et bildelastarobjekt ved hjelp av classClipLoader-klassen og bruk anropsbacks til å starte kommandoer når filmen starter / fullfører.
(Tilleggslinjer: 17-27)
importere gs. *; importer gs.easing. *; var xmlPath = "content.xml"; var photos_xml = ny XML (); photos_xml.ignoreWhite = true; var imageList: Array = new Array (); photos_xml.onLoad = funksjon (suksess) hvis (suksess) // ----------- last vellykket imageList = photos_xml.firstChild.childNodes; annet // ----------- problem lasting, sjekk banespor ("Feil ved lasting av photos_xml"); var imageLoader: MovieClipLoader = ny MovieClipLoader (); var loadListener: Objekt = nytt objekt (); imageLoader.addListener (loadListener); loadListener.onLoadInit = funksjon (target_mc: MovieClip, httpStatus: Number): Gyldig loadListener.onLoadComplete = funksjon (target_mc: MovieClip): Gyldig photos_xml.load (xmlPath); Etter at loader-objektet eksisterer, trenger vi en funksjon for å bestemme de riktige bildene. Vi må også legge til en variabel for å holde oversikt over det nåværende bildet. Inne i "loadImage" -funksjonen er "loadURL" satt til XML-attributtet for bildebanen. Definer en ny filmClip (targetClip) for en beholder for å laste inn bildet og sett den beholderen for å ha null uklarhet med egenskapen _alpha.
Det siste trinnet i funksjonen er å laste bildet inn i beholderen (imageLoader.loadClip). Vi vil også kjøre kommandoen "loadImage" så snart XML har fullført lastingen.
(Tilleggslinjer: 11,18,31-38)
importere gs. *; importer gs.easing. *; var xmlPath = "content.xml"; var photos_xml = ny XML (); photos_xml.ignoreWhite = true; var imageList: Array = new Array (); photos_xml.onLoad = funksjon (suksess) hvis (suksess) // ----------- last vellykket imageList = photos_xml.firstChild.childNodes; loadImage (); annet // ----------- problem lasting, sjekk banespor ("Feil ved lasting av photos_xml"); var currentImage: Nummer = 0; var imageLader: MovieClipLoader = ny MovieClipLoader (); var loadListener: Objekt = nytt objekt (); imageLoader.addListener (loadListener); loadListener.onLoadInit = funksjon (target_mc: MovieClip, httpStatus: Number): Gyldig loadListener.onLoadComplete = funksjon (target_mc: MovieClip): Gyldig funksjon loadImage () var loadURL = imageList [currentImage] .attributes.imgurl; var targetClip = shell_mc.pics_mc.createEmptyMovieClip ("pic" + currentImage, shell_mc.pics_mc.getNextHighestDepth ()); targetClip._alpha = 0; // last det nye bildet imageLoader.loadClip (loadURL, targetClip); photos_xml.load (xmlPath); Bygg en timerfunksjon som kaller "loadImage" -funksjonen hver 5000 milisekunder (5 sekunder). Start timeren når bildet har fullført lasting ved å plassere anropet i onLoadComplete tilbakeringing.
(Ytterligere linjer: 29,32-34)
importere gs. *; importer gs.easing. *; var xmlPath = "content.xml"; var photos_xml = ny XML (); photos_xml.ignoreWhite = true; var imageList: Array = new Array (); photos_xml.onLoad = funksjon (suksess) hvis (suksess) // ----------- last vellykket imageList = photos_xml.firstChild.childNodes; loadImage (); annet // ----------- problem lasting, sjekk banespor ("Feil ved lasting av photos_xml"); var currentImage: Nummer = 0; var imageLader: MovieClipLoader = ny MovieClipLoader (); var loadListener: Objekt = nytt objekt (); imageLoader.addListener (loadListener); loadListener.onLoadInit = funksjon (target_mc: MovieClip, httpStatus: Nummer): bortfaller loadListener.onLoadComplete = funksjon (target_mc: MovieClip): bortfaller setTimer (); funksjon setTimer () timer = setInterval (loadImage, 5000); funksjon loadImage () var loadURL = imageList [currentImage] .attributes.imgurl; var targetClip = shell_mc.pics_mc.createEmptyMovieClip ("pic" + currentImage, shell_mc.pics_mc.getNextHighestDepth ()); targetClip._alpha = 0; imageLoader.loadClip (loadURL, targetClip); photos_xml.load (xmlPath); Vi må endre størrelsen på "background_mc", "border_mc" og "mask_mc" for å være størrelsen på det lastede bildet. TweenMax / TweenLite-biblioteket er ganske enkelt å bruke. Syntaxen er TweenLite.to (målklipp, tid i sekunder, egenskaper: verdi, enkel type); Vi vil også at bildet skal falme inn etter at det er lastet, så sett _alpha to tween til 100% inne i onLoadComplete.
(Tilleggslinjer: 25-27,31)
importere gs. *; importer gs.easing. *; var xmlPath = "content.xml"; var photos_xml = ny XML (); photos_xml.ignoreWhite = true; var imageList: Array = new Array (); photos_xml.onLoad = funksjon (suksess) hvis (suksess) // ----------- last vellykket imageList = photos_xml.firstChild.childNodes; loadImage (); annet // ----------- problem lasting, sjekk banespor ("Feil ved lasting av photos_xml"); var currentImage: Nummer = 0; var imageLader: MovieClipLoader = ny MovieClipLoader (); var loadListener: Objekt = nytt objekt (); imageLoader.addListener (loadListener); loadListener.onLoadInit = funksjon (target_mc: MovieClip, httpStatus: Nummer): bortfaller TweenLite.to (shell_mc.background_mc, 0,25, _width: target_mc._width + 20, _height: target_mc._height + 20, letthet: Quad.easeOut ); TweenLite.to (shell_mc.border_mc, 0,25, _width: target_mc._width, _height: target_mc._height, lette: Quad.easeOut); TweenLite.to (shell_mc.mask_mc, 0,25, _width: target_mc._width, _height: target_mc._height, letthet: Quad.easeOut); loadListener.onLoadComplete = funksjon (target_mc: MovieClip): Slett TweenLite.to (target_mc, 0.25, autoAlpha: 100, delay: 0.25); setTimer (); funksjon setTimer () timer = setInterval (loadImage, 5000); fjern funksjonen () if prevImg! = undefined) removeMovieClip (prevImg); // øke det nåværende bildet hvis (currentImage < imageList.length -1) currentImage = currentImage + 1; else currentImage = 0; function loadImage() var loadURL = imageList[currentImage].attributes.imgurl; var targetClip = shell_mc.pics_mc.createEmptyMovieClip("pic"+currentImage,shell_mc.pics_mc.getNextHighestDepth()); targetClip._alpha = 0; imageLoader.loadClip(loadURL,targetClip); photos_xml.load(xmlPath); Først finner du midtpunktet av scenen ved å dele scenens høyde med 2 og scenens bredde med 2. Deretter, siden registreringsstedet til skallet er øverst til venstre, flytter du klippet til venstre for midten av scenen med halvparten skallets bredde og opp til halvparten av skallets høyde (variabler clipXTarg og clipYtarg beregne tallene for hvert nytt bilde). Det er viktig å bruke Math.round () -funksjonen slik at det endelige tallet ikke inneholder et desimal - dette tvinger den endelige posisjonen til en full piksel.
(Tilleggslinjer: 28-30)
importere gs. *; importer gs.easing. *; var xmlPath = "content.xml"; var photos_xml = ny XML (); photos_xml.ignoreWhite = true; var imageList: Array = new Array (); photos_xml.onLoad = funksjon (suksess) hvis (suksess) // ----------- last vellykket imageList = photos_xml.firstChild.childNodes; loadImage (); annet // ----------- problem lasting, sjekk banespor ("Feil ved lasting av photos_xml"); var currentImage: Nummer = 0; var imageLader: MovieClipLoader = ny MovieClipLoader (); var loadListener: Objekt = nytt objekt (); imageLoader.addListener (loadListener); loadListener.onLoadInit = funksjon (target_mc: MovieClip, httpStatus: Nummer): bortfaller TweenLite.to (shell_mc.background_mc, 0,25, _width: target_mc._width + 20, _height: target_mc._height + 20, letthet: Quad.easeOut ); TweenLite.to (shell_mc.border_mc, 0,25, _width: target_mc._width, _height: target_mc._height, letthet: Quad.easeOut); TweenLite.to (shell_mc.mask_mc, 0,25, _width: target_mc._width, _height: target_mc._height, letthet: Quad.easeOut); var clipXTarg = Math.round ((Stage.width / 2) - ((target_mc._width + 20) / 2)); var clipYTarg = Math.round ((Stage.height / 2) - ((target_mc._height + 20) / 2)); TweenLite.to (shell_mc, 0.25, _x: clipXTarg, _y: clipYTarg, lette: Quad.easeOut); loadListener.onLoadComplete = funksjon (target_mc: MovieClip): Slett TweenLite.to (target_mc, 0.25, autoAlpha: 100, delay: 0.25); setTimer (); funksjon setTimer () timer = setInterval (loadImage, 5000); funksjon loadImage () var loadURL = imageList [currentImage] .attributes.imgurl; var targetClip = shell_mc.pics_mc.createEmptyMovieClip ("pic" + currentImage, shell_mc.pics_mc.getNextHighestDepth ()); targetClip._alpha = 0; imageLoader.loadClip (loadURL, targetClip); photos_xml.load (xmlPath); Vi må finne det tidligere lastede bildet slik at det kan fjernes. Tydeligvis hvis det nåværende bildet er noe der i midten av listen er det forrige bildet en mindre enn det curentImage nummeret. Hvis imidlertid currentImage er lik null, vil det forrige bildet (forutsatt at lysbildeserien har gått gjennom hvert bilde) være det siste bildet i arrayet eller imageList.length - 1. Ta forrige bildenummer og finn ut filmenClip-banen til det forrige bildeskallet.
(Tilleggslinjer: 32-37)
importere gs. *; importer gs.easing. *; var xmlPath = "content.xml"; var photos_xml = ny XML (); photos_xml.ignoreWhite = true; var imageList: Array = new Array (); photos_xml.onLoad = funksjon (suksess) hvis (suksess) // ----------- last vellykket imageList = photos_xml.firstChild.childNodes; loadImage (); annet // ----------- problem lasting, sjekk banespor ("Feil ved lasting av photos_xml"); var currentImage: Nummer = 0; var imageLader: MovieClipLoader = ny MovieClipLoader (); var loadListener: Objekt = nytt objekt (); imageLoader.addListener (loadListener); loadListener.onLoadInit = funksjon (target_mc: MovieClip, httpStatus: Nummer): bortfaller TweenLite.to (shell_mc.background_mc, 0,25, _width: target_mc._width + 20, _height: target_mc._height + 20, letthet: Quad.easeOut ); TweenLite.to (shell_mc.border_mc, 0,25, _width: target_mc._width, _height: target_mc._height, letthet: Quad.easeOut); TweenLite.to (shell_mc.mask_mc, 0,25, _width: target_mc._width, _height: target_mc._height, letthet: Quad.easeOut); var clipXTarg = Math.round ((Stage.width / 2) - ((target_mc._width + 20) / 2)); var clipYTarg = Math.round ((Stage.height / 2) - ((target_mc._height + 20) / 2)); TweenLite.to (shell_mc, 0.25, _x: clipXTarg, _y: clipYTarg, lette: Quad.easeOut); hvis (currentImage == 0) var prevImgNum = imageList.length -1; else var prevImgNum = currentImage - 1; var prevImg = shell_mc.pics_mc ["pic" + prevImgNum]; loadListener.onLoadComplete = funksjon (target_mc: MovieClip): Slett TweenLite.to (target_mc, 0.25, autoAlpha: 100, delay: 0.25); setTimer (); funksjon setTimer () timer = setInterval (loadImage, 5000); funksjon loadImage () var loadURL = imageList [currentImage] .attributes.imgurl; var targetClip = shell_mc.pics_mc.createEmptyMovieClip ("pic" + currentImage, shell_mc.pics_mc.getNextHighestDepth ()); targetClip._alpha = 0; imageLoader.loadClip (loadURL, targetClip); photos_xml.load (xmlPath); Neste vi vil fade ut det forrige bildet og da når det kommer til null _alpha må vi fjerne klippet fra scenen helt. OnComplete: removeForrige venter til fade har fullført og deretter kaller en "fjerneForrige". Som et sikkerhetsmål er det alltid en god ide å sørge for at klippet vi prøver å fjerne, faktisk eksisterer. Bruk derfor en "if" -attest for å kontrollere at klippet ikke er udefinert (Flash-ord for eksisterer ikke).
(Tilleggslinjer: 38,50-54)
importere gs. *; importer gs.easing. *; var xmlPath = "content.xml"; var photos_xml = ny XML (); photos_xml.ignoreWhite = true; var imageList: Array = new Array (); photos_xml.onLoad = funksjon (suksess) hvis (suksess) // ----------- last vellykket imageList = photos_xml.firstChild.childNodes; loadImage (); annet // ----------- problem lasting, sjekk banespor ("Feil ved lasting av photos_xml"); var currentImage: Nummer = 0; var imageLader: MovieClipLoader = ny MovieClipLoader (); var loadListener: Objekt = nytt objekt (); imageLoader.addListener (loadListener); loadListener.onLoadInit = funksjon (target_mc: MovieClip, httpStatus: Nummer): bortfaller TweenLite.to (shell_mc.background_mc, 0,25, _width: target_mc._width + 20, _height: target_mc._height + 20, letthet: Quad.easeOut ); TweenLite.to (shell_mc.border_mc, 0,25, _width: target_mc._width, _height: target_mc._height, letthet: Quad.easeOut); TweenLite.to (shell_mc.mask_mc, 0,25, _width: target_mc._width, _height: target_mc._height, letthet: Quad.easeOut); var clipXTarg = Math.round ((Stage.width / 2) - ((target_mc._width + 20) / 2)); var clipYTarg = Math.round ((Stage.height / 2) - ((target_mc._height + 20) / 2)); TweenLite.to (shell_mc, 0.25, _x: clipXTarg, _y: clipYTarg, lette: Quad.easeOut); hvis (currentImage == 0) var prevImgNum = imageList.length -1; else var prevImgNum = currentImage - 1; var prevImg = shell_mc.pics_mc ["pic" + prevImgNum]; TweenLite.to (prevImg, 0.25, autoAlpha: 0, onComplete: removePrevious); loadListener.onLoadComplete = funksjon (target_mc: MovieClip): Slett TweenLite.to (target_mc, 0.25, autoAlpha: 100, delay: 0.25); setTimer (); funksjon setTimer () timer = setInterval (loadImage, 5000); fjern funksjonen () if prevImg! = undefined) removeMovieClip (prevImg); funksjon loadImage () var loadURL = imageList [currentImage] .attributes.imgurl; var targetClip = shell_mc.pics_mc.createEmptyMovieClip ("pic" + currentImage, shell_mc.pics_mc.getNextHighestDepth ()); targetClip._alpha = 0; imageLoader.loadClip (loadURL, targetClip); photos_xml.load (xmlPath); Nå må vi øke currentImage slik at når timeren fullfører, vet Flash hvilket bilde som skal lastes neste. Akkurat som forrige bilde, hvis det nåværende bildet er et hvilket som helst nummer bortsett fra det siste bildet i listen, legger vi ganske enkelt til et aktuelt bilde. Men hvis det nåværende bildet er det siste elementet i listen, vil det "neste" bildet starte listen over med det første bildet i listen (posisjon null i arrayet).
(Tilleggslinjer: 55-59)
importere gs. *; importer gs.easing. *; var xmlPath = "content.xml"; var photos_xml = ny XML (); photos_xml.ignoreWhite = true; var imageList: Array = new Array (); photos_xml.onLoad = funksjon (suksess) hvis (suksess) // ----------- last vellykket imageList = photos_xml.firstChild.childNodes; loadImage (); annet // ----------- problem lasting, sjekk banespor ("Feil ved lasting av photos_xml"); var currentImage: Nummer = 0; var imageLader: MovieClipLoader = ny MovieClipLoader (); var loadListener: Objekt = nytt objekt (); imageLoader.addListener (loadListener); loadListener.onLoadInit = funksjon (target_mc: MovieClip, httpStatus: Nummer): bortfaller TweenLite.to (shell_mc.background_mc, 0,25, _width: target_mc._width + 20, _height: target_mc._height + 20, letthet: Quad.easeOut ); TweenLite.to (shell_mc.border_mc, 0,25, _width: target_mc._width, _height: target_mc._height, letthet: Quad.easeOut); TweenLite.to (shell_mc.mask_mc, 0,25, _width: target_mc._width, _height: target_mc._height, letthet: Quad.easeOut); var clipXTarg = Math.round ((Stage.width / 2) - ((target_mc._width + 20) / 2)); var clipYTarg = Math.round ((Stage.height / 2) - ((target_mc._height + 20) / 2)); TweenLite.to (shell_mc, 0.25, _x: clipXTarg, _y: clipYTarg, lette: Quad.easeOut); hvis (currentImage == 0) var prevImgNum = imageList.length -1; else var prevImgNum = currentImage - 1; var prevImg = shell_mc.pics_mc ["pic" + prevImgNum]; TweenLite.to (prevImg, 0.25, autoAlpha: 0, onComplete: removePrevious); loadListener.onLoadComplete = funksjon (target_mc: MovieClip): Slett TweenLite.to (target_mc, 0.25, autoAlpha: 100, delay: 0.25); setTimer (); funksjon setTimer () timer = setInterval (loadImage, 5000); fjern funksjonen () if prevImg! = undefined) removeMovieClip (prevImg); hvis (currentImage < imageList.length -1) currentImage = currentImage + 1; else currentImage = 0; function loadImage() var loadURL = imageList[currentImage].attributes.imgurl; var targetClip = shell_mc.pics_mc.createEmptyMovieClip("pic"+currentImage,shell_mc.pics_mc.getNextHighestDepth()); targetClip._alpha = 0; imageLoader.loadClip(loadURL,targetClip); photos_xml.load(xmlPath); De fleste Actionscript-funksjoner oppstår nesten umiddelbart, men lasting av bilder krever litt tid. Denne tiden er avhengig av nettverkstilkoblingshastigheten og bildestørrelsen og kan derfor være flere sekunder lang. Vi må fjerne timeren til bildet er ferdig lastet, slik at lysbildefremvisningen er en konstant lengde etter at bildet er lastet inn. En enkel linje med kode (clearInterval) fjerner 5 sekunders intervall til det tilbakestilles av setInterval kjører igjen.
(Tilleggslinje: 66)
importere gs. *; importer gs.easing. *; var xmlPath = "content.xml"; var photos_xml = ny XML (); photos_xml.ignoreWhite = true; var imageList: Array = new Array (); photos_xml.onLoad = funksjon (suksess) hvis (suksess) // ----------- last vellykket imageList = photos_xml.firstChild.childNodes; loadImage (); annet // ----------- problem lasting, sjekk banespor ("Feil ved lasting av photos_xml"); var currentImage: Nummer = 0; var imageLader: MovieClipLoader = ny MovieClipLoader (); var loadListener: Objekt = nytt objekt (); imageLoader.addListener (loadListener); loadListener.onLoadInit = funksjon (target_mc: MovieClip, httpStatus: Nummer): bortfaller TweenLite.to (shell_mc.background_mc, 0,25, _width: target_mc._width + 20, _height: target_mc._height + 20, letthet: Quad.easeOut ); TweenLite.to (shell_mc.border_mc, 0,25, _width: target_mc._width, _height: target_mc._height, letthet: Quad.easeOut); TweenLite.to (shell_mc.mask_mc, 0,25, _width: target_mc._width, _height: target_mc._height, letthet: Quad.easeOut); var clipXTarg = Math.round ((Stage.width / 2) - ((target_mc._width + 20) / 2)); var clipYTarg = Math.round ((Stage.height / 2) - ((target_mc._height + 20) / 2)); TweenLite.to (shell_mc, 0.25, _x: clipXTarg, _y: clipYTarg, lette: Quad.easeOut); hvis (currentImage == 0) var prevImgNum = imageList.length -1; else var prevImgNum = currentImage - 1; var prevImg = shell_mc.pics_mc ["pic" + prevImgNum]; TweenLite.to (prevImg, 0.25, autoAlpha: 0, onComplete: removePrevious); loadListener.onLoadComplete = funksjon (target_mc: MovieClip): Slett TweenLite.to (target_mc, 0.25, autoAlpha: 100, delay: 0.25); setTimer (); funksjon setTimer () timer = setInterval (loadImage, 5000); fjern funksjonen () if prevImg! = undefined) removeMovieClip (prevImg); hvis (currentImage < imageList.length -1) currentImage = currentImage + 1; else currentImage = 0; function loadImage() var loadURL = imageList[currentImage].attributes.imgurl; var targetClip = shell_mc.pics_mc.createEmptyMovieClip("pic"+currentImage,shell_mc.pics_mc.getNextHighestDepth()); targetClip._alpha = 0; clearInterval(timer); imageLoader.loadClip(loadURL,targetClip); photos_xml.load(xmlPath); Til slutt må vi stoppe tidslinjen. Flash-funksjonen er å spille av tidslinjen kontinuerlig, med mindre det er sagt noe annet. I tilfelle der det kun er en ramme på tidslinjen, fortsetter Flash å forsøke å kjøre den samme koden igjen og igjen, noe som resulterer i at det samme bildet prøver å gjentatte ganger lastes.
(Tilleggslinje: 72)
importere gs. *; importer gs.easing. *; var xmlPath = "content.xml"; var photos_xml = ny XML (); photos_xml.ignoreWhite = true; var imageList: Array = new Array (); photos_xml.onLoad = funksjon (suksess) hvis (suksess) // ----------- last vellykket imageList = photos_xml.firstChild.childNodes; loadImage (); annet // ----------- problem lasting, sjekk banespor ("Feil ved lasting av photos_xml"); var currentImage: Nummer = 0; var imageLader: MovieClipLoader = ny MovieClipLoader (); var loadListener: Objekt = nytt objekt (); imageLoader.addListener (loadListener); loadListener.onLoadInit = funksjon (target_mc: MovieClip, httpStatus: Nummer): bortfaller TweenLite.to (shell_mc.background_mc, 0,25, _width: target_mc._width + 20, _height: target_mc._height + 20, letthet: Quad.easeOut ); TweenLite.to (shell_mc.border_mc, 0,25, _width: target_mc._width, _height: target_mc._height, letthet: Quad.easeOut); TweenLite.to (shell_mc.mask_mc, 0,25, _width: target_mc._width, _height: target_mc._height, letthet: Quad.easeOut); var clipXTarg = Math.round ((Stage.width / 2) - ((target_mc._width + 20) / 2)); var clipYTarg = Math.round ((Stage.height / 2) - ((target_mc._height + 20) / 2)); TweenLite.to (shell_mc, 0.25, _x: clipXTarg, _y: clipYTarg, lette: Quad.easeOut); hvis (currentImage == 0) var prevImgNum = imageList.length -1; else var prevImgNum = currentImage - 1; var prevImg = shell_mc.pics_mc ["pic" + prevImgNum]; TweenLite.to (prevImg, 0.25, autoAlpha: 0, onComplete: removePrevious); loadListener.onLoadComplete = funksjon (target_mc: MovieClip): Slett TweenLite.to (target_mc, 0.25, autoAlpha: 100, delay: 0.25); setTimer (); funksjon setTimer () timer = setInterval (loadImage, 5000); fjern funksjonen () if prevImg! = undefined) removeMovieClip (prevImg); hvis (currentImage < imageList.length -1) currentImage = currentImage + 1; else currentImage = 0; function loadImage() var loadURL = imageList[currentImage].attributes.imgurl; var targetClip = shell_mc.pics_mc.createEmptyMovieClip("pic"+currentImage,shell_mc.pics_mc.getNextHighestDepth()); targetClip._alpha = 0; clearInterval(timer); imageLoader.loadClip(loadURL,targetClip); photos_xml.load(xmlPath); stop(); Test filmen (Command + Enter for Mac, Ctrl + Enter for Windows). Du bør se en fungerende lysbildefremvisning som endres og senterer basert på størrelsen på bildene. Jeg håper du likte å følge denne tut!
