Gallery XML con paginazione delle Thumb in ActionScript 3.0
di Marcello Ruta
Premessa
Livello: Dummies / Intermedio
Tool utilizzato: Flash CS3
Requisiti: conoscenze di ActionScript 3.0
Assets: gallery.xml, gallery.fla
In questo tutorial vedremo come realizzare una photogallery con la paginazione delle thumbnail, il tutto sfruttando ActionScript 3.0 e XML. Concludiamo questa breve premessa dicendo che questa gallery può essere oggetto di numerosi miglioramenti, come l'aggiunta di un preloader, come l'aggiunta di un close button per chiudere l'immagine di dettaglio, e altre migliorie estetiche, etc..
Ma adesso apriamo Flash CS 3 e mettiamoci all'opera.
1 Step. Organizzazione del filmato flash
In questa fase ci preoccuperemo di creare alcuni elementi e di organizzare il nostro filmato flash. Aperto Flash CS3 aggiungiamo un altro livello, alla fine avremo due livelli, uno per le azioni e uno dove posizioneremo alcuni elementi. Il livello delle azioni nella fattispecie sarà nominato as, qui collocheremo le nostre azioni mentre l'altro livello lo rinominiamo assegnandogli il nome Item, qui collocheremo alcuni elementi.
Adesso selezioniamo il livello Item, e creiamo sullo stage un rettangolo che poi trasformiamo in una movieclip assegnandogli il nome btn_button, questa clip costituirà il nostro pulsante, sempre sul livello Item aggiungiamo un campo di testo dinamico e assegniamogli tf come nome di istanza quindi con il testo ancora selezionato lo trasformiamo in movieclip assegnandogli il nome mc_textBox, quindi dalla libreria trasciniamo un'altra istanza della clip btn_button, a questo punto partendo da sinistra verso destra assegniamo alle tre movieclip i seguenti nomi di istanza: prevBtn, textBox_mc, nextBtn sotto i due pulsanti mettiamo due etichette di testo statico, uno chiamato Previous e l'altro Next. Concluso questo step tuffiamoci nella scrittura del codice, let's go!!!!
2 Step. Dichiarazione delle variabili
Il primo passo consisterà nella dichiarazione di alcune variabili, nell'import della classe Caurina e nell'impostazione del frameRate del filmato che può essere fatto da codice oppure dal pannello Proprietà.
Ecco il codice necessario:
stage.frameRate = 30; // impostiamo il frame rate dell'swf finale // import caurina.transitions.*; // import delle Carina transitions // var urlXml:String = "xml/gallery.xml"; // memorizziamo il percorso del file xml var setFolder:String = "images/"; // memorizziamo la cartella dove sono allocate le immagini var urlRequest:URLRequest; var xmlList:XML; var listNode:XML; // blocco di variabili di tipo MovieClip var mcThumb:MovieClip; // clip dove carichiamo le thumbnail, e che si duplica in base al numero di thumb dell'xml var container:MovieClip; // wrapper genarale delle thumbnail // var horizGap:int = 130; // distanza tra le clip var amtClip:int; // numero delle clip da creare var rowAmt:int = 3; // numero di clip per ogni riga var limit:int = 6; // numero di clip da visualizzare su ogni pagina var i:int; // indice contatore numerico var page:int = 1; // impostiamo su uno il valore iniziale della pagina var totalPages:int; // variabile per momorizzare il numero totale di pagine // var lgImageArr:Array = new Array(); // Array dove memorizziamo le immagini di dettaglio grande // blocco di variabili booleane per impostare la vibilit? dei pulsanti var noVisibleBut:Boolean = false; var visibleBut:Boolean = true;
concluso questo passaggio adesso scriviamo la funzione che ci richiama l'xml esterno.
3 Step. Definizione della funzione loadXML()
Con questa funzione invochiamo il caricamento dell'xml:
function loadXML():void {
urlRequest = new URLRequest(urlXml); // creiamo un oggetto urlRequest
var loader:URLLoader = new URLLoader(); // creiamo un oggetto URLLoader
loader.addEventListener(Event.COMPLETE, xmlLoaded);
loader.load(urlRequest); // carichiamo il contenuto dell'oggetto URLRequest
}
loadXML();
4 Step. Definizione della funzione xmlLoaded()
Con questa funzione facciamo il parsing dell'xml:
function xmlLoaded(e:Event):void {
// definiamo un oggeto "URLLoader" locale a questa funzione,che funge da target per la lettura dei nodi xml
var targetLdr:URLLoader = URLLoader(e.target);
xmlList = new XML(targetLdr.data); // sulla variabile xmlList memorizziamo tutti i nodi dell'xml
//trace(xmlList);
amtClip = xmlList..images.smImage.length(); // sulla varibile amtClip memorizziamo il numero di nodi delle miniature
totalPages = Math.ceil(amtClip/limit); // otteniamo il numero totale di pagine
// ci ricaviamo con un ciclo for each i nodi dove sono memorizzate le immagini di dettaglio
for each (listNode in xmlList..images) {
var lgImage:String = listNode.lgImage;
//trace(listNode)
lgImageArr.push(lgImage); // aggiungiamo gli elementi memorizzati in "lgImage" all'Array "lgImageArr"
}
}
A questo punto i nodi xml che ci interessano risultano parsati, adesso focalizzeremo la nostra attenzione nella creazione della griglia dove poi andremo a caricare le immagini.
5 Step. Definizione della funzione createGrid()
Con questa funzione creiamo la griglia delle thubmnail paginate, a tale funzione passeremo un parametro (img:Array) che ci permetterà di relazionarci con alcuni dati della funzione creata in precedenza (xmlLoaded), quindi alla funzione creata nello step 4 aggiungeremo il metodo createGrid(lgImageArr) con il parametro lgImageArr, in questa variabile abbiamo memorizzato le immagini di dettaglio e ci fungerà da ponte con il parametro img della funzione createGrid. Quindi ci posizioniamo dopo la chiusura del ciclo for each {} ed aggiungiamo createGrid(lgImageArr). Infine dopo aver aggiunto la funzione createGrid aggiungiamo anche updateString cosi abbiamo concluso questo step, ma adesso entriamo nel dettaglio del codice:
Alla fine la funzione xmlLoaded sarà cosi:
function xmlLoaded(e:Event):void {
var targetLdr:URLLoader = URLLoader(e.target);
xmlList = new XML(targetLdr.data);
//trace(xmlList);
amtClip = xmlList..images.smImage.length();
totalPages = Math.ceil(amtClip/limit);
for each (listNode in xmlList..images) {
var lgImage:String = listNode.lgImage;
//trace(listNode)
lgImageArr.push(lgImage);
}
createGrid(lgImageArr); // creiamo la griglia delle thumb, alla funzione createGrid passiamo il parametro lgImageArr dove sono memorizzate le immagini di dettaglio
updateString();
}
Adesso scriviamo il code necessario per la funzione createGrid(), ecco il codice:
function createGrid(img:Array):void {
// controlliamo se il container e pieno, se cosi fosse lo rimuoviamo all'avanzamento di pagina
if (container) {
removeChild(container);
}
// creiamo in runtime una istanza di movieclip
container = new MovieClip();
container.x = 20;
container.y = 50;
addChild(container);
var indexY:int = 0;
var curY:int = 0;
for (i = (page-1)*limit; i<page*limit; i++) {
if (i < amtClip) {
indexY++;
if (indexY > rowAmt) {
curY++;
indexY = 0;
}
// creiamo in runtime una istanza di movieclip
mcThumb = new MovieClip();
mcThumb.graphics.beginFill(0x999999);
mcThumb.graphics.drawRect(0, 0, 120, 120);
mcThumb.x = 10 + (i % rowAmt) * horizGap;
//trace((i%rowAmt)*horizGap)
mcThumb.y = 10 + (curY * horizGap);
//trace(Math.floor(i/rowAmt)*horizGap)
container.addChild(mcThumb); // aggiungiamo la clip mcThumb al clip container
var loader_ldr:Loader = new Loader(); // ci creiamo un oggetto loader
loader_ldr.load(new URLRequest(setFolder + xmlList..images.smImage[i])); // carichiamo le immagini thumb
loader_ldr.x = 5; // spostiamo di 5 pixel sull'asse delle "x" l'istanza dell'oggetto loader
loader_ldr.y = 5; // spostiamo di 5 pixel sull'asse delle "y" l'istanza dell'oggetto loader
mcThumb.addChild(loader_ldr);
mcThumb.buttonMode = true; // facciamo assumere al movieclip mcThumb la manina attraverso la propriet? buttonmode
mcThumb.curImg = img[i]; // attribuiamo a mcThumb una variabile dinamica curImg dove meorizziamo l'array img, dove a sua volta sono memorizzate le immagini di dettaglio
}
}
}
Adesso aggiungiamo una funzione updateString al fine di visualizzare il conteggio delle pagine.
function updateString():void {
textBox_mc.tf.text = 'Pagine '+page+' di '+totalPages;
}
Quindi aggiungiamo le funzionalità per muoverci tra le pagine, quindi creeremo le funzioni nextPageHandler e prevPageHandler, ecco il codice:
function prevPageHandler(e:MouseEvent):void {
if (page > 1) {
page --;
createGrid(lgImageArr);
updateString();
}
}function nextPageHandler(e:MouseEvent):void {
if (page < totalPages) {
page ++;
createGrid(lgImageArr);
updateString();
}
}
nextBtn.addEventListener(MouseEvent.CLICK, nextPageHandler)
prevBtn.addEventListener(MouseEvent.CLICK, prevPageHandler);
nextBtn.buttonMode = true;
prevBtn.buttonMode = true;
6 Step. Definizione della funzione contentLoaded().
Siamo quasi arrivati alla fine del nostro esercizio, in questo passo ci occuperemo del caricamento dell'immagine di dettaglio, per fare ciò aggiungeremo una funzione loadContent(), all'interno della funzione createGrid(), che sarà attivata al click sulla mcThumb che funge da pulsante e che abbiamo assegnato un evento MouseEvent. Concludiamo il nostro lavoro creandoci la funzione contentLoaded(), che ci permetterà di gestire il caricamento dell'immagine di dettaglio, la nostra sarà una funzione che presenta anche un parametro che funge da broadcaster (ascoltatore) per il passaggio dei valori memorizzati nella variabile lgImageArr di tipo Array.
Per prima cosa vediamo come cambierà la funzione createGrid, dopo questa aggiunta:
function createGrid(img:Array):void {
if (container) {
removeChild(container);
}
container = new MovieClip();
container.x = 20;
container.y = 50;
addChild(container);
var indexY:int = 0;
var curY:int = 0;
for (i = (page-1)*limit; i<page*limit; i++) {
if (i < amtClip) {
indexY++;
if (indexY > rowAmt) {
curY++;
indexY = 0;
}
mcThumb = new MovieClip();
mcThumb.graphics.beginFill(0x999999);
mcThumb.graphics.drawRect(0, 0, 120, 120);
mcThumb.x = 10 + (i % rowAmt) * horizGap;
//trace((i%rowAmt)*horizGap)
mcThumb.y = 10 + (curY * horizGap);
//trace(Math.floor(i/rowAmt)*horizGap)
container.addChild(mcThumb);
var loader_ldr:Loader = new Loader();
loader_ldr.load(new URLRequest(setFolder + xmlList..images.smImage[i]));
loader_ldr.x = 5;
loader_ldr.y = 5;
mcThumb.addChild(loader_ldr);
mcThumb.buttonMode = true;
mcThumb.curImg = img[i];
mcThumb.addEventListener(MouseEvent.CLICK, loadContent); // assegniamo un listener di eventi all'istanza mcThumb
// creiamo una funzione che funga da wrapper della funzione contentLoaded function loadContent(e:MouseEvent):void { //trace(e.currentTarget.curImg); contentLoaded(e.currentTarget.curImg);
}
}
}
}
Quindi procediamo con la scrittura della funzione contentLoaded(), ecco il codice:
function contentLoaded(bigImg:String):void {
var mcContainer:MovieClip = new MovieClip(); // ci creiamo una clip che funga da container e da cornice per l'immagine di dettaglio
mcContainer.graphics.beginFill(0x999999);
mcContainer.graphics.drawRoundRect(0, 0, 420, 330, 10, 10); // disegniamo una movieclip con gli angoli smussati
mcContainer.x = 600; // posizione iniziale della movieclip
mcContainer.y = (stage.stageHeight - mcContainer.height) / 2 - 20 ; // centriamo la clip con un gap di 20 pixel
addChild(mcContainer);
var load_ldr:Loader = new Loader(); // ci creiamo un istanza di oggetto loader
load_ldr.x = 10; // spostiamo di 10 pixel sull'asse delle "x" l'istanza dell'oggetto loader
load_ldr.y = 10; // spostiamo di 10 pixel sull'asse delle "y" l'istanza dell'oggetto loader
load_ldr.load(new URLRequest(setFolder + bigImg)); // carichiamo l'immagine di dettaglio
mcContainer.addChild(load_ldr); // nidifichiamo l'oggetto loader alla clip padre mcContainer
mcContainer.buttonMode = true;
// eseguiamo una transizione attraverso con l'utilizzo delle Caurina transitions
Tweener.addTween(mcContainer, {x:(stage.stageWidth - mcContainer.width) /2, time:1, transition:"easeInElastic"});
Tweener.addTween(container, {x:-600, time:1, transition:"easeInElastic"});
noVisibleButton(noVisibleBut); // eseguiamo la funzione che ci setta la non visibilità dei pulsanti next e previous
mcContainer.addEventListener(MouseEvent.CLICK, initPositionContent); // assegniamo un listener di eventi all mcContainer
// con questa funzione ripristiniamo la posizione iniziale del container che contiene le thumb
function initPositionContent(e:MouseEvent):void {
Tweener.addTween(container, {x:20, time:1, transition:"easeInElastic"});
Tweener.addTween(mcContainer, {x:600, time:1, transition:"easeInElastic"});
visibleButton(visibleBut); // impostiamo la visibilità dei pulsanti su true, rendendoli visibili
}
}
Terminiamo il nostro esercizio con l'aggiunta di due funzioni che ci permetteranno di cambiare la visibilità delle due istanze di clip che fungono da button e della clip del campo di testo dinamico. Le due funzioni sono parametrizzate con un valore Booleano. Ecco il codice:
function noVisibleButton(disable:Boolean):void {
nextBtn.visible = disable;
prevBtn.visible = disable;
textBox_mc.visible = disable;
}
function visibleButton(enable:Boolean):void {
nextBtn.visible = enable;
prevBtn.visible = enable;
textBox_mc.visible = enable;
}
Abbiamo concluso il nostro tutorial, adesso non vi resta che provare...
Al prossimo Tutorial!!
File Allegato: Gallery XML con paginazione