Componenti TileList e Label di Flash CS3

[Flep]

Ciao a tutti i flashers incalliti come me.

Nell' arco di questi ultimi 3 mesi abbiamo visto come lavorano diversi componenti di Flash CS3, come lo Slider oppure il ColorPicker.
In questo articolo cercherò di spiegare al meglio delle mie possibilità come lavorare con i componenti TileList e Label.
L' esempioche vedremo, carica una serire di dati da un file XML esterno, carica delle immagini che visualizza nel componente TileList, permette di selezionare un' immagine e vedere quella immagine alla sua grandezza naturale, visualizza una descrizione dell' immagine tramite il componente Label.

Vediamo l' esempio pratico...

Creo un FLA che salvo con nome ' main.fla '.
Al suo interno:

trascino un componente TileList dal pannello componenti e gli assegno nome istanza ' tile_mc '

trascino un componente Label dal apannello componenti e gli assegno nome istanza ' lab_mc '

creo un campo di testo dinamico e gli assegno nome istanza ' info_txt '

Ora creo un file XML che mi serve per passare a Flash i valori delle immagini:

<?xml version="1.0" encoding="UTF-8"?>
<images>
    <item path='images/pic_0.jpg' descrizione='descrizione della mia immagine numero 1'></item>
    <item path='images/pic_1.jpg' descrizione='descrizione della mia immagine numero 2'></item>
    <item path='images/pic_2.jpg' descrizione='descrizione della mia immagine numero 3'></item>
    <item path='images/pic_3.jpg' descrizione='descrizione della mia immagine numero 4'></item>
    <item path='images/pic_4.jpg' descrizione='descrizione della mia immagine numero 5'></item>
    <item path='images/pic_5.jpg' descrizione='descrizione della mia immagine numero 6'></item>
    <item path='images/pic_6.jpg' descrizione='descrizione della mia immagine numero 7'></item>
    <item path='images/pic_7.jpg' descrizione='descrizione della mia immagine numero 8'></item>
    <item path='images/pic_8.jpg' descrizione='descrizione della mia immagine numero 9'></item>
    <item path='images/pic_9.jpg' descrizione='descrizione della mia immagine numero 10'></item>
    <item path='images/pic_10.jpg' descrizione='descrizione della mia immagine numero 11'></item>
    <item path='images/pic_11.jpg' descrizione='descrizione della mia immagine numero 12'></item>
    <item path='images/pic_12.jpg' descrizione='descrizione della mia immagine numero 13'></item>
    <item path='images/pic_13.jpg' descrizione='descrizione della mia immagine numero 14'></item>
    <item path='images/pic_14.jpg' descrizione='descrizione della mia immagine numero 15'></item>
    <item path='images/pic_15.jpg' descrizione='descrizione della mia immagine numero 16'></item>
    <item path='images/pic_16.jpg' descrizione='descrizione della mia immagine numero 17'></item>
    <item path='images/pic_17.jpg' descrizione='descrizione della mia immagine numero 18'></item>
    <item path='images/pic_18.jpg' descrizione='descrizione della mia immagine numero 19'></item>
    <item path='images/pic_19.jpg' descrizione='descrizione della mia immagine numero 20'></item>
    <item path='images/pic_20.jpg' descrizione='descrizione della mia immagine numero 21'></item>
    <item path='images/pic_21.jpg' descrizione='descrizione della mia immagine numero 22'></item>
    <item path='images/pic_22.jpg' descrizione='descrizione della mia immagine numero 23'></item>
    <item path='images/pic_23.jpg' descrizione='descrizione della mia immagine numero 24'></item>
    <item path='images/pic_24.jpg' descrizione='descrizione della mia immagine numero 25'></item>
</images>

Notiamo che il file XML contiene per ogni nodo, due attributi: ' path ' e ' descrizione '.Questi 2 attributi contengono rispettivamente il percorso dell' immagine e una descrizione dell' immagine.

Ora passo a creare le classi che mi serviranno:

Main.as ( la Document Class ) che controllerà tutto il progetto

LoadingXML, si occuperà di caricare il file XML, leggere i dati ed immagazzinarli in alcuni Array

Caricatore.as che caricherà le immagini una alla volta

Main.as

package
{
	import flash.display.MovieClip;
	import flash.text.TextField;
	import flash.text.TextFieldAutoSize;
	import fl.data.DataProvider;
	import flash.events.Event;
	
	public class Main extends MovieClip
	{
		private var xml_file:LoadingXML;
		
		private var caricatore:Caricatore;
		private var provider:DataProvider;
		
		public var infos_array:Array;
		public var thumbs_array:Array;
		public var clips_array:Array;
		
		private var view_mc:MovieClip;
		
		private var counter:int=0;
		
		public function Main()
		{
			init();
			
			loadXML();
		}
		
		private function init():void
		{
			stage.frameRate=31;
			
			infos_array=new Array();
			thumbs_array=new Array();
			clips_array=new Array();
			
			tile_mc.visible=false;
			
			view_mc=new MovieClip();
			addChild(view_mc);
			
			lab_mc.text='';
			lab_mc.autoSize=TextFieldAutoSize.LEFT;
			lab_mc.selectable=false;
		}
		
		private function loadXML():void
		{
			xml_file=new LoadingXML(this);
		}
		
		public function loadImages():void
		{
			if(counter<=infos_array.length-1)
				caricatore=new Caricatore(this,counter,infos_array[counter].path);
			else
				populateTileList();
			info_txt.text='creazione immagini in corso, attendere prego...'+'\n'+
							(counter+1).toString()+' / '+infos_array.length;
			counter++;
		}
		
		public function populateTileList():void
		{
			info_txt.visible=false;
			
			provider=new DataProvider();
			for(var i:int=0;i < infos_array.length;i++) 
			{
				provider.addItem({label:'immagine '+(i+1).toString(),
									source:thumbs_array[i],data:i}); 
            }
			
			tile_mc.allowMultipleSelection=false;
			tile_mc.columnWidth=100;
			tile_mc.rowHeight=130;
			tile_mc.dataProvider=provider;
			tile_mc.columnCount=4;
			tile_mc.rowCount=1;
			tile_mc.move((stage.stageWidth-tile_mc.width)/2,10);
			
			tile_mc.visible=true;
			tile_mc.selectedItem=provider.getItemAt(0);
			tile_mc.addEventListener(Event.CHANGE,selezione);
			
			viewImage(0);
		}
		
		private function selezione(event:Event):void
		{
			viewImage(event.target.selectedItem.data);
		}
		
		private function viewImage(n:int):void
		{
			removeChild(view_mc);
			view_mc=new MovieClip();
			view_mc.addChild(clips_array[n]);
			addChild(view_mc);
			
			view_mc.x=(stage.stageWidth-view_mc.width)/2;
			view_mc.y=tile_mc.y+tile_mc.height+10;
			
			lab_mc.text=infos_array[n].des;
			lab_mc.x=view_mc.x;
			lab_mc.y=view_mc.y+view_mc.height+20;
		}
	}
}

Proprietà
una istanza della classe LoadingXML
private var xml_file:LoadingXML;
una istanza della classe Caricatore
private var caricatore:Caricatore;
una variabile di tipo DataProvider
private var provider:DataProvider;
3 Arrays in cui inserirò i dati del file XML
public var infos_array:Array;
public var thumbs_array:Array;
public var clips_array:Array;
una variabile di tipo MovieClip che visualizzerà le immagini a grandezza naturale
private var view_mc:MovieClip;
una variabile numerica che incrementerò
private var counter:int=0;

Metodi
init();
imposto una velocità del frame rate
stage.frameRate=31;
inizializzo gli arrays
infos_array=new Array();
thumbs_array=new Array();
clips_array=new Array();
imposto il componente TileList a visibilità zero
tile_mc.visible=false;
istanzio un nuovo view_mc
view_mc=new MovieClip();
lo aggiungoallo stage
addChild(view_mc);
definisco alcune proprietà del componente Label
lab_mc.text='';
lab_mc.autoSize=TextFieldAutoSize.LEFT;
lab_mc.selectable=false;

loadXML():
istanzio la classe LoadingXML e gli passo il valore della root
xml_file=new LoadingXML(this);

loadImages();
in questo metodo istanzio la classe Caricatore ( passando 3 valori: la root, il valore della variabile counter e la path dell' immagine da caricare ) tante volte quanto è la lunghezza dell' array infos_array. A sua volta la classe Caricatore richiamerà questo metodo ogni volta che avrà finito di caricare un ' immagine. Da sottolineare il fatto che ogni volta che questo metodo viene chiamato, il valore della variabile counter viene incrementato di una unità e se il valore di counter è minore della lunghezza -1 dell' array allora viene istanziata una nuova Caricatore, altrimenti viene chiamato il metodo populateTileList.
if(counter<=infos_array.length-1)
caricatore=new Caricatore(this,counter,infos_array[counter].path);
else
populateTileList();
assegno un testo a info_txt che avvisa a che punto è il caricamento di tutte le immagini
info_txt.text='creazione immagini in corso, attendere prego...'+'\n'+(counter+1).toString()+' / '+infos_array.length;
counter++;

populateList();
dato che lo script ha finito di caricare le immagini, imposto invisibile info_txt
info_txt.visible=false;
creo una nuova istanza di DataProvider che mi servirà per popolare il componente TileList
provider=new DataProvider();
tramite un ciclo con maggior iterazione la lunghezza dell' array infos_array, aggiungo una voce al data provider tramite il metodo addItem e gli passo un oggetto che ha 32 proprietà: una chiamata label che contiene il nome dell' immagine, un' altra chiamata source che contiene la MovieClip da inserire nel TileList e un'altra che si chiama data che contiene il valore della ' i '
for(var i:int=0;i < infos_array.length;i++)
{
provider.addItem({label:'immagine '+(i+1).toString(),source:thumbs_array[i],data:i});
}
imposto aclune proprietà del componente TileList a mio piacimento
tile_mc.allowMultipleSelection=false;
tile_mc.columnWidth=100;
tile_mc.rowHeight=130;
tile_mc.dataProvider=provider;
tile_mc.columnCount=4;
tile_mc.rowCount=1;
tile_mc.move((stage.stageWidth-tile_mc.width)/2,10);
imposto a true la visibilità di tile_mc
tile_mc.visible=true;
gli dico di visualizzare la prima voce come selezionata
tile_mc.selectedItem=provider.getItemAt(0);
aggiungo un listener in ascolto di un evento CHANGE ( praticamente quando una voce delcomponente sarà cliccata/selezionata dal mouse dell' utente, verrà chiamata la funzione selezione
tile_mc.addEventListener(Event.CHANGE,selezione);
chiamo il metodo viewImage e glipasso un valore zero ( questa riga permette di visualizzare subito la prima immagine quando l' SWF parte )
viewImage(0);

selezione();
chiamo il metodo viewImage e gli passo il valore data dell' oggetto selezionato
viewImage(event.target.selectedItem.data);


viewImage();
rimuovo view_mc
removeChild(view_mc);
lo ricreo nuovo
view_mc=new MovieClip();
gli aggiungo la clip corrispettiva che è stata creata in fase di caricamento delle immagini dalla classe Caricamento
view_mc.addChild(clips_array[n]);
ri-aggiungo view_mc allo stage
addChild(view_mc);
posiziono view_mc
view_mc.x=(stage.stageWidth-view_mc.width)/2;
view_mc.y=tile_mc.y+tile_mc.height+10;
assegno un testo e posiziono il componente Label ( lab_mc )
lab_mc.text=infos_array[n].des;
lab_mc.x=view_mc.x;
lab_mc.y=view_mc.y+view_mc.height+20;

LoadingXML.as

package
{
	import flash.display.MovieClip;
	import flash.display.Loader;
	import flash.events.Event;
	import flash.net.URLLoader;
	import flash.net.URLRequest;
	import flash.xml.*;
	
	public class LoadingXML extends XMLDocument
	{
		private var _fla:MovieClip;
		
		public function LoadingXML(fla:MovieClip)
		{
			_fla=fla;
			this.loadXML();
		}
		private function loadXML():void
		{
			var loader:URLLoader=new URLLoader();
			loader.addEventListener(Event.COMPLETE,completeHandler);
			
			var request:URLRequest=new URLRequest('http://www.flepstudio.org/swf/tile_list/pictures.xml');
			try 
			{
				loader.load(request);
			} 
			catch(error:Error) 
			{
				trace('Impossibile caricare il documento.');
			}
		}
		private function completeHandler(event:Event):void
		{
			var loader:URLLoader=URLLoader(event.target);
			var result:XML=new XML(loader.data);
			var myXML:XMLDocument=new XMLDocument();
			myXML.ignoreWhite=true;
			myXML.parseXML(result.toXMLString());
			var node:XMLNode=myXML.firstChild;
			var n:int=int(node.childNodes.length);
			for(var i:int=0;i < n;i++)
			{
				var obj:Object=new Object();
				obj.path=node.childNodes[i].attributes['path'];
				obj.des=node.childNodes[i].attributes['descrizione'];
				_fla.infos_array.push(obj);
			}
			_fla.loadImages();
		}
	}
}

Le seguenti righe sono quelle che ci interessano di questa classe, con le quali recupero i valori degli attributi dei nodi del file XML, creo un nuovo Object a cui assegno ogni volta le proprietà path e des che a loro volta avranno come valore la path e la descrizione dell' immagine.
for(var i:int=0;i < n;i++)
{
var obj:Object=new Object();
obj.path=node.childNodes[i].attributes['path'];
obj.des=node.childNodes[i].attributes['descrizione'];
_fla.infos_array.push(obj);
}
chiamo il metodo loadImages della Document Class
_fla.loadImages();

Caricatore.as

package
{
	import flash.display.MovieClip;
	import flash.display.Loader;
	import flash.events.Event;
	import flash.events.IEventDispatcher;
	import flash.net.URLRequest;
	import flash.display.BitmapData;
	import flash.display.Bitmap;
	
	public class Caricatore extends MovieClip
	{
		private var _fla:MovieClip;
		private var clip:MovieClip;
		private var clip2:MovieClip;
		
		private var id:int;
		
		private var loader:Loader;
		
		private var bitmap_data:BitmapData;
		
		private var _path:String;
		
		public function Caricatore(fla:MovieClip,n:int,path:String)
		{
			_fla=fla;
			id=n;
			_path=path;
			
			init();
		}
		
		private function init():void 
		{
			var request:URLRequest=new URLRequest(_path);
			loader=new Loader();
			initListeners(loader.contentLoaderInfo);
			loader.load(request);
		}
		
		private function initListeners(dispatcher:IEventDispatcher):void 
		{
			dispatcher.addEventListener(Event.COMPLETE,completato);
		}
		
		private function completato(event:Event):void 
		{
			bitmap_data=new BitmapData(loader.width,loader.height,true,0xFFFFFFFF);
			bitmap_data.draw(loader);
			
			var thumb:Bitmap=new Bitmap(bitmap_data);
			var b:BitmapData=bitmap_data.clone();
			var thumb2:Bitmap=new Bitmap(b);
			
			clip=new MovieClip();
			clip.addChild(thumb);
			_fla.thumbs_array.push(clip);
			
			clip2=new MovieClip();
			clip2.addChild(thumb2);
			_fla.clips_array.push(clip2);
			
			removeListeners(loader.contentLoaderInfo);
			
			_fla.loadImages();
		}
		
		private function removeListeners(dispatcher:IEventDispatcher):void 
		{
			dispatcher.removeEventListener(Event.COMPLETE,completato);
		}
	}
}

Proprietà
una variabile MovieClip a cui assegno il valore della root in modo da poter richiamare il metodo della Document Class loadImage();
private var _fla:MovieClip;
una variabile MovieClip co cui creo una MovieClip che ospiterà l' immagine e che sarà inserita nel componente TileList
private var clip:MovieClip;
una variabile MovieClip co cui creo una MovieClip che ospiterà l' immagine e che servirà per visualizzare l' immagine a grandezza naturale
private var clip2:MovieClip;
una variabile numerica in cui inserisco il valore della variabile counter della Document Class ( cha appunto mi pasa ogni volta la Document Class )
private var id:int;
un Loader
private var loader:Loader;
una variabile BitmapData che servirà per ' sdoppiare ' l' immagine caricata tramite il metodo draw e poi clonandola per crearne un' altra
private var bitmap_data:BitmapData;
una variabile stringa in cui inerisco la path dell' immagine da caricare che mi passa la Document Class
private var _path:String;

Metodi
init();
faccio richiesta a Flash di usare un indirizzo web
var request:URLRequest=new URLRequest(_path);
istanzio il Loader
loader=new Loader();
chiamo il metodo initListeners
initListeners(loader.contentLoaderInfo);
carico l' immagine
loader.load(request);

initListeners();
aggiungo un listener in ascolto dell' evento COMPLETE, quindi quando l' immagine sarà completamente caricata verrà chiamato il metodo completato()
dispatcher.addEventListener(Event.COMPLETE,complet ato);

completato();
creo una nuova BitmapData
bitmap_data=new BitmapData(loader.width,loader.height,true,0xFFFFF FFF);
faccio una foto al loader
bitmap_data.draw(loader);
creo una nuova Bitmap che contiene la BitmapData
var thumb:Bitmap=new Bitmap(bitmap_data);
creo una doppia BitmapData utilizzando il metodo clone della classe BitmapData
var b:BitmapData=bitmap_data.clone();
creo una seconda Bitmap che contiene il clone della BitmapData
var thumb2:Bitmap=new Bitmap(b);
creo una nuova MovieClip ( sarà quella che inserirò poi nel componente TileList, come abbiamo visto nella Document Class )
clip=new MovieClip();
gli inserisco la prima Bitmap
clip.addChild(thumb);
aggiungo all' array thumbs_array di Main.as la clip
_fla.thumbs_array.push(clip);
creo una seconda nuova MovieClip ( che sarà quella che utilizzerò per visualizzare l' immagine a grandezza naturale quando l' utente seleziona una anteprima dal componente TileList )
clip2=new MovieClip();
gli aggiungo la second Bitmap
clip2.addChild(thumb2);
la inserisco nell' array clips_array di Main.as ( la Document Class )
_fla.clips_array.push(clip2);
rimuovo il listener del Loader
removeListeners(loader.contentLoaderInfo);
chiamo il metodo loadImage della Document Class
_fla.loadImages();

Allego i files sorgente:

[jseeker]

Salve, ho aperto un post riguardo questo componente anche in un'altra sezione, io vorrei che lo scorrimento fosse automatico e non con la barra di scorrimento. Mi spiego meglio, al caricamento delle immagini vorrei che lo scorrimento partisse direttamente e ogni volta che posiziono il mouse su un'immagine lo scorrimento si arresti. Come faccio ?

Grazie a tutti