Costruisci uno slideshow Flash dinamico e XML con Transizioni con script

Gli aggiornamenti dei contenuti in Flash possono essere difficili e dispendiosi in termini di tempo a causa dei numerosi passaggi necessari. Basta leggere il contenuto da un file XML significa che non è più necessario importare nuove risorse e ricompilare swf. Questo tutorial coprirà in modo dinamico il caricamento delle immagini da un file XML e quindi gestirà le incoerenze nelle dimensioni dell'immagine utilizzando la libreria di animazioni GreenSock Tween Max.

Anteprima del risultato finale

Diamo un'occhiata a uno screenshot della presentazione finale in cui lavoreremo:

sfondo

Le immagini e gli esempi di interfaccia sono forniti con Flash CS4 e Actionscript 2, ma altre versioni di Flash fin dalla versione 8 dovrebbero essere in grado di seguirle senza problemi. Questo tutorial presuppone almeno una conoscenza pratica di Actionscript dal momento che non ho intenzione di spiegare ogni riga, tuttavia anche se semplicemente copia e incolla dovresti essere in grado di farlo funzionare.

Passaggio 1: creare una cartella di progetto

Con un progetto di questo tipo è importante mantenere tutto organizzato in modo che Flash possa trovare le cose in base alle proprie esigenze. Quindi crea una cartella di progetto sul tuo computer in cui puoi inserire TUTTI i file relativi a questo progetto.

Passaggio 2: Prepara le risorse

Trova le immagini per la tua presentazione. Ho usato diverse immagini da http://www.sxc.hu (sxc_hu_410471_5588.jpg, sxc_hu_1151936_79441078.jpg, sxc_hu_1152040_85122875.jpg, sxc_hu_1154131_54136948.jpg).

Creare una cartella "assets" all'interno della cartella del progetto. Apri il tuo editor di immagini preferito e ridimensiona le foto in modo che abbiano tutte le stesse dimensioni. Ho ridimensionato le mie immagini in modo che il lato più lungo (altezza o larghezza) fosse 700 px e consentisse al software di modifica dell'immagine di mantenere la proporzione dell'immagine.

Poiché le risorse esterne non traggono vantaggio da un preloader Flash, sarebbe un ottimo momento per ottimizzare le immagini per download rapidi. Flash può caricare file png, jpeg o gif quindi assicurati che le tue immagini finali siano in uno di questi formati e salvali nella cartella delle risorse appena creata.

Passaggio 3: creare un nuovo file Flash Actionscript 2

Passaggio 4: impostazione dello stage

Ridimensiona il tuo palco per essere un po 'più grande delle immagini che hai creato nel passaggio 2. L'obiettivo è quello di assicurarsi che ciò che viene visualizzato non venga tagliato nella presentazione finale. Ho usato 800px x 800px per dare alle immagini da 700px 50px di spazio su tutti i lati. Ora è anche un ottimo momento per cambiare la frequenza dei fotogrammi a 30 fps per transizioni gradevoli e scegliere un colore di sfondo a tua scelta.

Passaggio 5: impostazione della cronologia

Rinominare "livello 1" in "sfondo". Crea un nuovo livello e chiamalo "contenuto". Crea un altro livello e chiamalo "script" ed è una buona idea bloccare questo livello. Tutto ciò che collochi sul livello di sfondo verrà visualizzato dietro la presentazione. Se guardi l'esempio, il testo è in questo livello.

Passaggio 6: creare una shell per le immagini caricate

Usa l'oggetto di disegno per creare un quadrato bianco sul palco. Seleziona il quadrato e convertilo in un simbolo (F8). Assicurati che il punto di registrazione sia nell'angolo in alto a sinistra e chiama la shell "shell". Dai al clip un nome di istanza di "shell_mc".

Passaggio 7: aggiungere lo sfondo fotografico

All'interno di "shell_mc" seleziona la casella bianca e la converti in un simbolo (F8). Di nuovo, assicurati che la registrazione sia in alto a sinistra e dai il nome alla clip "background". Dare al nuovo movieClip un nome di istanza di "background_mc". Infine, dai il nome al livello "sfondo" e bloccalo.

Passaggio 8: crea il caricamento del testo

All'interno di "shell_mc" crea un nuovo livello chiamato "testo". Usa lo strumento testo per creare un testo statico che dice "caricamento dell'immagine". Sposta il testo in x: 20 ey: 20 in modo che finisca sotto l'immagine.

Passaggio 9: aggiungere un obiettivo di caricamento dell'immagine

Crea un altro nuovo livello all'interno di "shell_mc" chiamato "images". Crea un movie movie vuoto chiamato "pics" e trascinalo dalla libreria al livello "images" appena creato. Sposta la clip in x: 10 ey: 10 e assegnagli un nome di istanza di "pics_mc".

Passaggio 10: crea una forma per mascherare l'immagine

All'interno di "shell_mc" crea un livello sopra la maschera "Immagini e chiamalo". Crea un nuovo quadrato, convertilo in un movieClip chiamato "mask" e assegnagli un nome di istanza di "mask_mc". Spostare la clip su x: 10 ey: 10.

Passaggio 11: convertire la forma in maschera

Fai clic con il tasto destro sul livello "maschera" e seleziona Maschera. Assicurati che le icone del livello "maschera" e "immagine" cambino per assomigliare all'esempio.

Passaggio 12: creare una cornice immagine

All'interno di "shell_mc" crea un livello sopra "maschera" e chiamalo "frame". Nella tavolozza degli strumenti, selezionare un colore del tratto e un colore di riempimento diverso, quindi creare un quadrato sul livello "cornice". Seleziona l'area di riempimento ed eliminala lasciando solo il bordo. Fare doppio clic sul bordo per selezionarlo e convertirlo in un Movie Clip chiamato "bordo". Dare il MovieClip e il nome di istanza di "border_mc" e posizionarlo su x: 10 ey: 10.

Passaggio 13: aggiungi un'ombra esterna

Torna alla timeline di root e seleziona "shell_mc". Vai al pannello delle proprietà e fai roteare la freccia dei filtri. Fai clic sulla piccola icona "pagina" e seleziona ombreggiatura. Questo aggiungerà un po 'di profondità.

Passaggio 14: crea file XML e aggiungi struttura

Abbiamo finito con Flash per il momento e abbiamo bisogno di creare un file XML per tenere traccia delle nostre immagini. Apri il tuo editor di testo preferito (praticamente tutto ciò che può modificare l'HTML funzionerà) e crea un nuovo file. Salva il file nella cartella del progetto come content.xml. Ora abbiamo bisogno di aggiungere una struttura al file in modo che Flash possa capire come usare le informazioni, possiamo farlo con il seguente codice:

Passaggio 15: aggiungi percorsi immagine al file XML

Ora dobbiamo aggiungere percorsi a tutte le immagini nella presentazione (questo è il modo in cui Flash "trova" le immagini). Dentro il i tag aggiungono un nuovo tag chiamato "image" e gli danno un attributo di "imgurl". Questo attributo deve essere uguale a un percorso immagine relativo al file xml. Dovrai creare un nuovo tag "immagine" per ogni immagine che intendi utilizzare nella presentazione.

Salva il file e chiudi l'editor di testo.

Passaggio 16: Scarica Tween Max

Utilizzeremo una libreria di interpolazione per aiutarci ad animare le transizioni tra le immagini, quindi apri il browser, vai a http://blog.greensock.com/tweenmaxas2/ e fai clic sul pulsante "scarica AS2" in alto. Apri il file zip scaricato, quindi copia la cartella "gs" e il suo contenuto nella cartella del progetto.

È ora di tornare al file Flash e iniziare a scrivere Actionscript. Seleziona il primo fotogramma del livello "script" e aprire il pannello Azioni (Finestra> Azioni). I seguenti passaggi richiedono tutti di modificare i contenuti della finestra Azioni, quindi da ora in poi mi riferirò semplicemente a questo come "script". Mentre seguiamo i passaggi seguenti vedrete tutto lo script creato a quel punto con le ultime aggiunte evidenziate.

Passaggio 17: includi Tween Max

La prima cosa che dobbiamo fare è includere la classe tween che abbiamo scaricato in modo che venga compilata quando viene creato swf. Aggiungi il seguente codice al tuo script:

import gs. *; import gs.easing. *;

Passaggio 18: indica a Flash di caricare il file XML

(Linee aggiuntive: 3-15)

 import gs. *; import gs.easing. *; var xmlPath = "content.xml"; var photos_xml = new XML (); photos_xml.ignoreWhite = true; photos_xml.onLoad = function (success) if (successo) // ----------- carica con successo else // ----------- problema di caricamento, verifica percorso trace ("Errore durante il caricamento di photos_xml");  photos_xml.load (xmlPath);

Questo sta creando un nuovo oggetto XML che ha come target il nostro file "content.xml". Poiché i file XML non vengono caricati istantaneamente, è importante verificare il caricamento completato. Lo facciamo con il callback onLoad che attende il caricamento del file xml e quindi esegue un'azione.

Passaggio 19: convertire i dati XML in una matrice

Per prima cosa dobbiamo creare un array chiamato "imageList". Una volta caricato il file xml, assegneremo i dati all'array in modo che sia più facile accedere in seguito.

(Linee aggiuntive: 7,10)

 import gs. *; import gs.easing. *; var xmlPath = "content.xml"; var photos_xml = new XML (); photos_xml.ignoreWhite = true; var imageList: Array = new Array (); photos_xml.onLoad = function (success) if (successo) // ----------- carica successful imageList = photos_xml.firstChild.childNodes;  else // ----------- problema di caricamento, verifica traccia percorso ("Errore nel caricare photos_xml");  photos_xml.load (xmlPath);

Passaggio 20: crea Movieclip Loader Framework

Creare un oggetto caricatore di immagini usando la classe movieClipLoader e utilizzare le richiamate per avviare i comandi quando il film inizia / finisce di caricare.

(Linee aggiuntive: 17-27)

 import gs. *; import gs.easing. *; var xmlPath = "content.xml"; var photos_xml = new XML (); photos_xml.ignoreWhite = true; var imageList: Array = new Array (); photos_xml.onLoad = function (success) if (successo) // ----------- carica successful imageList = photos_xml.firstChild.childNodes;  else // ----------- problema di caricamento, verifica traccia percorso ("Errore nel caricare photos_xml");  var imageLoader: MovieClipLoader = new MovieClipLoader (); var loadListener: Object = new Object (); imageLoader.addListener (loadListener); loadListener.onLoadInit = function (target_mc: MovieClip, httpStatus: Number): Void  loadListener.onLoadComplete = function (target_mc: MovieClip): Void  photos_xml.load (xmlPath);

Passaggio 21: creare una funzione di caricamento

Dopo che l'oggetto del caricatore esiste, abbiamo bisogno di una funzione per determinare le immagini corrette. Dobbiamo anche aggiungere una variabile per tenere traccia dell'immagine corrente. All'interno della funzione "loadImage" il "loadURL" è impostato sull'attributo XML per il percorso dell'immagine. Definisci un nuovo movieClip (targetClip) per un contenitore in cui caricare l'immagine e imposta quel contenitore in modo che abbia zero opacità con la proprietà _alpha.

L'ultimo passaggio della funzione è caricare l'immagine nel contenitore (imageLoader.loadClip). Vogliamo anche eseguire il comando "loadImage" non appena l'XML ha completato il caricamento.

(Linee aggiuntive: 11,18,31-38)

 import gs. *; import gs.easing. *; var xmlPath = "content.xml"; var photos_xml = new XML (); photos_xml.ignoreWhite = true; var imageList: Array = new Array (); photos_xml.onLoad = function (success) if (successo) // ----------- carica successful imageList = photos_xml.firstChild.childNodes; loadImage ();  else // ----------- problema di caricamento, verifica traccia percorso ("Errore nel caricare photos_xml");  var currentImage: Number = 0; var imageLoader: MovieClipLoader = new MovieClipLoader (); var loadListener: Object = new Object (); imageLoader.addListener (loadListener); loadListener.onLoadInit = function (target_mc: MovieClip, httpStatus: Number): Void  loadListener.onLoadComplete = function (target_mc: MovieClip): Void  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; // carica la nuova immagine imageLoader.loadClip (loadURL, targetClip);  photos_xml.load (xmlPath);

Passaggio 22: aggiunta di un timer tramite la funzione setInterval

Costruisci una funzione timer che chiamerà la funzione "loadImage" ogni 5000 millisecondi (5 secondi). Inizia il timer quando l'immagine ha completato caricamento, inserendo la chiamata nel callback onLoadComplete.

(Linee aggiuntive: 29,32-34)

 import gs. *; import gs.easing. *; var xmlPath = "content.xml"; var photos_xml = new XML (); photos_xml.ignoreWhite = true; var imageList: Array = new Array (); photos_xml.onLoad = function (success) if (successo) // ----------- carica successful imageList = photos_xml.firstChild.childNodes; loadImage ();  else // ----------- problema di caricamento, verifica traccia percorso ("Errore nel caricare photos_xml");  var currentImage: Number = 0; var imageLoader: MovieClipLoader = new MovieClipLoader (); var loadListener: Object = new Object (); imageLoader.addListener (loadListener); loadListener.onLoadInit = function (target_mc: MovieClip, httpStatus: Number): Void  loadListener.onLoadComplete = function (target_mc: MovieClip): Void setTimer ();  function setTimer () timer = setInterval (loadImage, 5000);  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);

Passaggio 23 - Ridimensionare la cornice dell'immagine

Abbiamo bisogno di ridimensionare "background_mc", "border_mc" e "mask_mc" per essere la dimensione dell'immagine caricata. La libreria TweenMax / TweenLite è piuttosto facile da usare. La sintassi è TweenLite.to (clip di destinazione, tempo in secondi, proprietà: valore, tipo di facilità); Vogliamo anche che l'immagine si dissolva dopo che è stata caricata, quindi imposta l'_alpha per l'interpolazione al 100% all'interno di onLoadComplete.

(Linee aggiuntive: 25-27,31)

 import gs. *; import gs.easing. *; var xmlPath = "content.xml"; var photos_xml = new XML (); photos_xml.ignoreWhite = true; var imageList: Array = new Array (); photos_xml.onLoad = function (success) if (successo) // ----------- carica successful imageList = photos_xml.firstChild.childNodes; loadImage ();  else // ----------- problema di caricamento, verifica traccia percorso ("Errore nel caricare photos_xml");  var currentImage: Number = 0; var imageLoader: MovieClipLoader = new MovieClipLoader (); var loadListener: Object = new Object (); imageLoader.addListener (loadListener); loadListener.onLoadInit = function (target_mc: MovieClip, httpStatus: Number): Void TweenLite.to (shell_mc.background_mc, 0.25, _width: target_mc._width + 20, _height: target_mc._height + 20, facilità: Quad.easeOut ); TweenLite.to (shell_mc.border_mc, 0.25, _wthth: target_mc._width, _height: target_mc._height, facilità: Quad.easeOut); TweenLite.to (shell_mc.mask_mc, 0.25, _wthth: target_mc._width, _height: target_mc._height, facilità: Quad.easeOut);  loadListener.onLoadComplete = function (target_mc: MovieClip): Void TweenLite.to (target_mc, 0.25, autoAlpha: 100, delay: 0.25); SetTimer ();  function setTimer () timer = setInterval (loadImage, 5000);  function removePrevious () if (prevImg! = undefined) removeMovieClip (prevImg);  // incrementa l'immagine corrente se (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);

Passaggio 24: centrare l'immagine

Prima trova il centro del palco dividendo l'altezza del palco per 2 e la larghezza del palco per 2. Successivamente, poiché il punto di registrazione della conchiglia è in alto a sinistra, sposta la clip a sinistra del centro del palco per metà la larghezza della shell e metà della lunghezza della shell (le variabili clipXTarg e clipYtarg calcolano i numeri per ogni nuova immagine). È importante utilizzare la funzione Math.round () in modo che il numero finale non contenga un decimale - questo costringe la posizione finale a un pixel intero.

(Linee aggiuntive: 28-30)

 import gs. *; import gs.easing. *; var xmlPath = "content.xml"; var photos_xml = new XML (); photos_xml.ignoreWhite = true; var imageList: Array = new Array (); photos_xml.onLoad = function (success) if (successo) // ----------- carica successful imageList = photos_xml.firstChild.childNodes; loadImage ();  else // ----------- problema di caricamento, verifica traccia percorso ("Errore nel caricare photos_xml");  var currentImage: Number = 0; var imageLoader: MovieClipLoader = new MovieClipLoader (); var loadListener: Object = new Object (); imageLoader.addListener (loadListener); loadListener.onLoadInit = function (target_mc: MovieClip, httpStatus: Number): Void TweenLite.to (shell_mc.background_mc, 0.25, _width: target_mc._width + 20, _height: target_mc._height + 20, facilità: Quad.easeOut ); TweenLite.to (shell_mc.border_mc, 0.25, _wthth: target_mc._width, _height: target_mc._height, facilità: Quad.easeOut); TweenLite.to (shell_mc.mask_mc, 0.25, _wthth: target_mc._width, _height: target_mc._height, facilità: 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, facilità: Quad.easeOut);  loadListener.onLoadComplete = function (target_mc: MovieClip): Void TweenLite.to (target_mc, 0.25, autoAlpha: 100, delay: 0.25); SetTimer ();  function setTimer () timer = setInterval (loadImage, 5000);  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);

Passaggio 25: identifica l'immagine precedente

Dobbiamo trovare l'immagine caricata in precedenza in modo che possa essere rimossa. Ovviamente se l'immagine corrente è un po 'in mezzo alla lista, l'immagine precedente è una in meno del numero curentImage. Tuttavia, se currentImage è uguale a zero, l'immagine precedente (supponendo che la presentazione sia passata attraverso ogni immagine) sarebbe l'ultima immagine nell'array o imageList.length - 1. Prendi il numero dell'immagine precedente e calcola il percorso di MovieClip per la shell dell'immagine precedente.

(Linee aggiuntive: 32-37)

 import gs. *; import gs.easing. *; var xmlPath = "content.xml"; var photos_xml = new XML (); photos_xml.ignoreWhite = true; var imageList: Array = new Array (); photos_xml.onLoad = function (success) if (successo) // ----------- carica successful imageList = photos_xml.firstChild.childNodes; loadImage ();  else // ----------- problema di caricamento, verifica traccia percorso ("Errore nel caricare photos_xml");  var currentImage: Number = 0; var imageLoader: MovieClipLoader = new MovieClipLoader (); var loadListener: Object = new Object (); imageLoader.addListener (loadListener); loadListener.onLoadInit = function (target_mc: MovieClip, httpStatus: Number): Void TweenLite.to (shell_mc.background_mc, 0.25, _width: target_mc._width + 20, _height: target_mc._height + 20, facilità: Quad.easeOut ); TweenLite.to (shell_mc.border_mc, 0.25, _wthth: target_mc._width, _height: target_mc._height, facilità: Quad.easeOut); TweenLite.to (shell_mc.mask_mc, 0.25, _wthth: target_mc._width, _height: target_mc._height, facilità: 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, facilità: Quad.easeOut); if (currentImage == 0) var prevImgNum = imageList.length -1;  else var prevImgNum = currentImage - 1;  var prevImg = shell_mc.pics_mc ["pic" + prevImgNum];  loadListener.onLoadComplete = function (target_mc: MovieClip): Void TweenLite.to (target_mc, 0.25, autoAlpha: 100, delay: 0.25); SetTimer ();  function setTimer () timer = setInterval (loadImage, 5000);  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);

Passaggio 26: dissolvenza in chiusura e rimozione

Quindi vogliamo dissolvere l'immagine precedente e quando arriva a zero _alpha dobbiamo rimuovere completamente la clip dallo stage. Il onComplete: removePrevious attende fino al completamento della dissolvenza e quindi chiama "removePrevious". Come misura di sicurezza è sempre una buona idea assicurarsi che la clip che stiamo cercando di rimuovere esista effettivamente. Quindi usa un'istruzione "if" per verificare che la clip non lo sia non definito (Parola di Flash per non esiste).

(Linee aggiuntive: 38,50-54)

 import gs. *; import gs.easing. *; var xmlPath = "content.xml"; var photos_xml = new XML (); photos_xml.ignoreWhite = true; var imageList: Array = new Array (); photos_xml.onLoad = function (success) if (successo) // ----------- carica successful imageList = photos_xml.firstChild.childNodes; loadImage ();  else // ----------- problema di caricamento, verifica traccia percorso ("Errore nel caricare photos_xml");  var currentImage: Number = 0; var imageLoader: MovieClipLoader = new MovieClipLoader (); var loadListener: Object = new Object (); imageLoader.addListener (loadListener); loadListener.onLoadInit = function (target_mc: MovieClip, httpStatus: Number): Void TweenLite.to (shell_mc.background_mc, 0.25, _width: target_mc._width + 20, _height: target_mc._height + 20, facilità: Quad.easeOut ); TweenLite.to (shell_mc.border_mc, 0.25, _wthth: target_mc._width, _height: target_mc._height, facilità: Quad.easeOut); TweenLite.to (shell_mc.mask_mc, 0.25, _wthth: target_mc._width, _height: target_mc._height, facilità: 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, facilità: Quad.easeOut); if (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 = function (target_mc: MovieClip): Void TweenLite.to (target_mc, 0.25, autoAlpha: 100, delay: 0.25); SetTimer ();  function setTimer () timer = setInterval (loadImage, 5000);  function removePrevious () if (prevImg! = undefined) removeMovieClip (prevImg);  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);

Passaggio 27 - Immagine successiva nella sequenza

Ora abbiamo bisogno di incrementare l'immagine corrente in modo che quando il timer si completa, Flash sappia quale immagine caricare successivamente. Proprio come la precedente immagine, se l'immagine corrente è un numero qualsiasi tranne l'ultima immagine nella lista, aggiungiamo semplicemente uno al numero correnteImmagine. Tuttavia, se l'immagine corrente è l'ultimo elemento nell'elenco, l'immagine "successiva" ricomincia l'elenco con la prima immagine nell'elenco (posizione zero nell'array).

(Linee aggiuntive: 55-59)

 import gs. *; import gs.easing. *; var xmlPath = "content.xml"; var photos_xml = new XML (); photos_xml.ignoreWhite = true; var imageList: Array = new Array (); photos_xml.onLoad = function (success) if (successo) // ----------- carica successful imageList = photos_xml.firstChild.childNodes; loadImage ();  else // ----------- problema di caricamento, verifica traccia percorso ("Errore nel caricare photos_xml");  var currentImage: Number = 0; var imageLoader: MovieClipLoader = new MovieClipLoader (); var loadListener: Object = new Object (); imageLoader.addListener (loadListener); loadListener.onLoadInit = function (target_mc: MovieClip, httpStatus: Number): Void TweenLite.to (shell_mc.background_mc, 0.25, _width: target_mc._width + 20, _height: target_mc._height + 20, facilità: Quad.easeOut ); TweenLite.to (shell_mc.border_mc, 0.25, _wthth: target_mc._width, _height: target_mc._height, facilità: Quad.easeOut); TweenLite.to (shell_mc.mask_mc, 0.25, _wthth: target_mc._width, _height: target_mc._height, facilità: 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, facilità: Quad.easeOut); if (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 = function (target_mc: MovieClip): Void TweenLite.to (target_mc, 0.25, autoAlpha: 100, delay: 0.25); SetTimer ();  function setTimer () timer = setInterval (loadImage, 5000);  function removePrevious () if (prevImg! = undefined) removeMovieClip (prevImg);  if (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);

Passaggio 28: rimuovere il timer

La maggior parte delle funzioni di Actionscript si verificano quasi istantaneamente, tuttavia il caricamento delle immagini richiede una certa quantità di tempo. Questa quantità di tempo dipende dalla velocità della connessione di rete e dalle dimensioni dell'immagine e potrebbe quindi essere lunga diversi secondi. Abbiamo bisogno di rimuovere il timer fino a quando l'immagine non ha completato il caricamento in modo che lo slide show sia un intervallo di tempo coerente dopo il caricamento dell'immagine. Una semplice riga di codice (clearInterval) rimuove l'intervallo di 5 secondi finché non viene ripristinato da setInterval nuovamente in esecuzione.

(Riga aggiuntiva: 66)

 import gs. *; import gs.easing. *; var xmlPath = "content.xml"; var photos_xml = new XML (); photos_xml.ignoreWhite = true; var imageList: Array = new Array (); photos_xml.onLoad = function (success) if (successo) // ----------- carica successful imageList = photos_xml.firstChild.childNodes; loadImage ();  else // ----------- problema di caricamento, verifica traccia percorso ("Errore nel caricare photos_xml");  var currentImage: Number = 0; var imageLoader: MovieClipLoader = new MovieClipLoader (); var loadListener: Object = new Object (); imageLoader.addListener (loadListener); loadListener.onLoadInit = function (target_mc: MovieClip, httpStatus: Number): Void TweenLite.to (shell_mc.background_mc, 0.25, _width: target_mc._width + 20, _height: target_mc._height + 20, facilità: Quad.easeOut ); TweenLite.to (shell_mc.border_mc, 0.25, _wthth: target_mc._width, _height: target_mc._height, facilità: Quad.easeOut); TweenLite.to (shell_mc.mask_mc, 0.25, _wthth: target_mc._width, _height: target_mc._height, facilità: 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, facilità: Quad.easeOut); if (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 = function (target_mc: MovieClip): Void TweenLite.to (target_mc, 0.25, autoAlpha: 100, delay: 0.25); SetTimer ();  function setTimer () timer = setInterval (loadImage, 5000);  function removePrevious () if (prevImg! = undefined) removeMovieClip (prevImg);  if (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);

Passaggio 29: interrompi la cronologia

Infine, dobbiamo fermare la timeline. La funzione predefinita di Flash è quella di riprodurre la timeline continuamente, a meno che non sia specificato diversamente. Nel caso in cui sia presente un solo fotogramma sulla timeline, Flash continuerà a tentare di eseguire lo stesso codice più e più volte, ottenendo la stessa immagine cercando di caricare ripetutamente.

(Riga aggiuntiva: 72)

 import gs. *; import gs.easing. *; var xmlPath = "content.xml"; var photos_xml = new XML (); photos_xml.ignoreWhite = true; var imageList: Array = new Array (); photos_xml.onLoad = function (success) if (successo) // ----------- carica successful imageList = photos_xml.firstChild.childNodes; loadImage ();  else // ----------- problema di caricamento, verifica traccia percorso ("Errore nel caricare photos_xml");  var currentImage: Number = 0; var imageLoader: MovieClipLoader = new MovieClipLoader (); var loadListener: Object = new Object (); imageLoader.addListener (loadListener); loadListener.onLoadInit = function (target_mc: MovieClip, httpStatus: Number): Void TweenLite.to (shell_mc.background_mc, 0.25, _width: target_mc._width + 20, _height: target_mc._height + 20, facilità: Quad.easeOut ); TweenLite.to (shell_mc.border_mc, 0.25, _wthth: target_mc._width, _height: target_mc._height, facilità: Quad.easeOut);



		
			
	   
	




Codice