Caricare immagini random da un file XML esterno in AS3

In questo tutorial vedremo come caricare un immagine random/casuale da un file XML esterno.
Potete vedere un esempio qui
Useremo URLLoader per aprire il file XML "ListaImagini.xml", dove troviamo soltanto una semplice lista dei file immagine,
e utilizzeremo un Loader per caricare un'immagine dalla lista.
Le immagini che utilizeremo (bellissime opere gentilmente concesse  dal grande pittore Tomasi Massimo), si trovano in una cartella chiamata "images",

Attenzione: il file swf e la cartella "images" DEVONO RISIEDERE NELLA STESSA DIRECTORY,  altrimenti riceveremo un errore di caricamento.

1 - Per prima cosa, con un semplice editor di testo, creiamo il file xml e lo salviamo con il nome: ListaImagini.xml
Nel file xml inseriamo la lista dei file immagine:

<?xml version="1.0" encoding="utf-8"?>
<contenitore>
<contenuto>images/image01.jpg</contenuto>
<contenuto>images/image02.jpg</contenuto>
<contenuto>images/image03.jpg</contenuto>
<contenuto>images/image04.jpg</contenuto>
<contenuto>images/image05.jpg</contenuto>
<contenuto>images/image06.jpg</contenuto>
</contenitore>

NB: le immagini si devono trovare dentro la cartella chiamata: images

2 - Apriamo Flash, File > Nuovo > ActonScript 3.0
3 - Impostiamo le modifiche dell'area del lavoro cliccando su: Finestra > Proprietà > Modifica e impostiamo la larghezza a 600px e l'altezza a 450px
4 - Apriamo il panello Azioni, andando: Finestra > Azioni e inseriamo il codice sottostante (accompagnato dai commenti):

//impostiamo la larghezza e l'altezza delle immagini
var altezza:Number = 450;
var larghezza:Number = 600;

//definiamo URLLoader per caricare il file XML e il Loader per le immagini.
//NB: URLLoader  è "eseguito" quando il costruttore viene chiamato
var xmlLoad:URLLoader = new URLLoader( new URLRequest("ListaImagini.xml") );
var imgLoad:Loader = new Loader();
//e alla fine diciamo a Flash di eseguire la funzione "caricaLista" quando URLLoader ha completato il suo caricamento del file xml,
xmlLoad.addEventListener(Event.COMPLETE, caricaLista);

/*
Nella funzione "caricaLista" otteniamo i dati dall'oggetto URLLoader
e avendo nel file xml diversi tag "contenuto" comunichiamo alla var "stImage" di caricare una random.
Dato che "imgLoad" è un oggetto Loader dobbiamo chiamare il metodo load per caricare l'immagine.
L'ultima riga rimuove il listener di evento associato all'evento "caricaLista".
*/

function caricaLista(evt:Event):void {
  var xmlData:XML = XML(xmlLoad.data);
  var numImmagini:Number = xmlData.contenuto.length();
  var stImage:String = xmlData.contenuto[Math.floor(numImmagini*Math.random())].toString();
imgLoad.contentLoaderInfo.addEventListener(Event.COMPLETE, caricaImmagini);
imgLoad.load( new URLRequest(stImage) );
xmlLoad.removeEventListener(Event.COMPLETE, caricaLista);
}

/*
La funzione "caricaImmagini" inserisce il contenuto del "imgLoad" come un oggetto Bitmap
in modo che possiamo scalarlo prima di aggiungerlo nello stage.
Si noti che usiamo scaleX e scaleY per ridimensionare l'immagine dalle variabili altezza e larghezza,
indipendentemente dalle sue proporzioni originali.
Alla fine aggancio un listener che verifica il fine caricamente è richiama una funzione.
*/

function caricaImmagini(evt:Event):void {
var thisBmp:Bitmap = Bitmap(imgLoad.content);
thisBmp.x = 0;
thisBmp.y = 0;
var thisWidth:Number = thisBmp.width;
var thisHeight:Number = thisBmp.height;

thisBmp.scaleX = larghezza/thisWidth;
thisBmp.scaleY = altezza/thisHeight;
addChild(thisBmp);

imgLoad.contentLoaderInfo.removeEventListener(Event.COMPLETE, caricaImmagini);
}

5 - Salviamo tutto e proviamo il filmato, cliccando: Controllo > Prova filmato
6 - Buon lavoro...

Articoli correlati per categorie

 Abbonati gratis a questo blog      

Torna Su