This is a discussion on Componenti TileList e Label di Flash CS3 within the Articoli e tutorials forums, part of the Flash CS3 e Actionscript 3.0 category; Ciao a tutti i flashers incalliti come me.
Nell' arco di questi ultimi 3 mesi abbiamo visto come lavorano diversi ...
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:
PHP Code:
<?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
Code:
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
Code:
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
Code:
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();
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 ?
21-09-07, 10:03
Re: Componenti TileList e Label di Flash CS3
Linear Mode
