TileList and Label components of Flash CS3

[Flep]

In the last few months, we have seen how to use different types of  Flash CS3 components , such as the Slider or the ColorPicker .
In this tutorial, I will explain, as good as I can, how to use the TileList and Label components.

The example, we will see, loads a series of data from an external XML file, displays a series of images in the TileList component, allows to select an image and view it full size and view its description via the Label component.

Let us take a look at the example...

I create a FLA and save it as "main.fla".
Into which:
I drag a TileList component from the Components Panel and I give it an instance name "tile_mc"
I drag a Label component from the Components Panel and I give it an instance name "lab_mc"
I create a dynamic text field and I give it an instance name "info_txt"
I will now create an XML file which will pass the image"s values to Flash:

<"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>

The XML file contains for each node, two attributes: "path" (path to the image) and "descrizione" (image description).

I will next create the needed classes:
Main.as (the Document Class), our main class
LoadingXML.as, which will load the XML file, retrieve the data and store them in arrays
Caricatore.as which will load one image at the time

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;
		}
	}
}

Properties
an instance of the LoadingXML class
private var xml_file:LoadingXML;
an instance of Caricatore class
private var caricatore:Caricatore;
a DataProvider variable
private var provider:DataProvider;
3 arrays to store the XML file data
public var infos_array:Array;
public var thumbs_array:Array;
public var clips_array:Array;
a MovieClip variable to display the full size image
private var view_mc:MovieClip;
a numerical variable which I will then increase
private var counter:int=0;

Methods
init();
I impost the frame rate
stage.frameRate=31;
I initialize the arrays
infos_array=new Array();
thumbs_array=new Array();
clips_array=new Array();
I impost the TileList component to invisible
tile_mc.visible=false;
I create a new instance of "view_mc"
view_mc=new MovieClip();
I add it to the stage
addChild(view_mc);
I define some of the Label component properties
lab_mc.text='';
lab_mc.autoSize=TextFieldAutoSize.LEFT;
lab_mc.selectable=false;

loadXML():
I create an instance of the LoadingXML class, passing to it the value of the root
xml_file=new LoadingXML(this);

loadImages();
In this method, I create instances of the Caricatore class (passing to it 3 values: root, the value if the variable "counter" and the path to the image to load) as many times as the length of infos_array. The Caricatore class will call this method each time it will have finished to load an image. Each time, the method is called, the value of the variable "counter" is increased of one unit. If the value of "counter" is smaller then the arrays lenght-1, a new instance of Caricatore class is created. If not, the method "populateTileList" is called.
if(counter<=infos_array.length-1)
caricatore=new Caricatore(this,counter,infos_array[counter].path);
else
populateTileList();
I assign a text to "info_txt" which will keep the user informed on the state of loading
info_txt.text='creazione immagini in corso, attendere prego...'+'\n'+(counter+1).toString()+' / '+infos_array.length;
counter++;

populateTileList();
once the script has loaded all the image, I impost "info_txt" to invisible
info_txt.visible=false;
I create a new instance of "DataProvider" needed to populate the TileList component
provider=new DataProvider();
using a cycle with the length of "infos_array" as a maximum iteration, I add an item to the "DataProvider" via the method "addItem". I pass to it an object with 3 properties: "label" (image name), "source" (a MovieClip to insert in TileList) and "data" (the value of "i")
for(var i:int=0;i < infos_array.length;i++)
{
provider.addItem({label:'immagine '+(i+1).toString(),source:thumbs_array[i],data:i});
}
I impost some properties of the TileList component
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);
I impost "tile_mc" visibility to true
tile_mc.visible=true;
I declare to view the first item as selected
tile_mc.selectedItem=provider.getItemAt(0);
I add a listener to the event CHANGE (any time a component"s item is selected, the method will be called)
tile_mc.addEventListener(Event.CHANGE,selezione);
I call the method "viewImage" and pass to it the value zero (this line is needed to display the first image at the start of the SWF)
viewImage(0);

selezione();
I call the method "viewImage" and pass to it the value of the selected object
viewImage(event.target.selectedItem.data);

viewImage();
I remove "view_mc"
removeChild(view_mc);
I recreate a new "view_mc"
view_mc=new MovieClip();
I add to it the respective clip created during the loading phase of the image
view_mc.addChild(clips_array[n]);
I add once again "view_mc" to the stage
addChild(view_mc);
I position "view_mc"
view_mc.x=(stage.stageWidth-view_mc.width)/2;
view_mc.y=tile_mc.y+tile_mc.height+10;
I assign a text and position to the Label component "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();
		}
	}
}

The following lines are the ones of more interest in this class. I will retrieve the value of the XML file nodes, create a new Object to which I will pass the value of the properties "path" and "descrizione".
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);
}
I call the method "loadImages" of the 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);
		}
	}
}

Properties
A MovieClip variable to which I assign the value of the root so to be able to recall it from the Document Class method "loadImages"
private var _fla:MovieClip;
a MovieClip variable needed to create a MovieClip which will contain the image and then added to the TileList component
private var clip:MovieClip;
a MovieClip variable needed to create a MovieClip which will contain the image and display it full size
private var clip2:MovieClip;
a numerical variable into which I insert the value of the variable "counter" of the Document Class
private var id:int;
an instance of "Loader"
private var loader:Loader;
a BitmapData variable needed to clone the loaded image using the method Draw
private var bitmap_data:BitmapData;
a String variable into which I insert the path to the image to load
private var _path:String;

Methods
init();
I make an url request
var request:URLRequest=new URLRequest(_path);
I create an instance of Loader
loader=new Loader();
I call the method "initListeners"
initListeners(loader.contentLoaderInfo);
I load the image
loader.load(request);

initListeners();
I add a listener to the event COMPLETE. When the image will be fully loaded, the method "completato" will be called
dispatcher.addEventListener(Event.COMPLETE,complet ato);

completato();
I create a new BitmapData
bitmap_data=new BitmapData(loader.width,loader.height,true,0xFFFFF FFF);
I take a picture of "loader"
bitmap_data.draw(loader);
I create a new Bitmap which will contain the BitmapData
var thumb:Bitmap=new Bitmap(bitmap_data);
I create a double BitmapData using the method "clone" of the BitmapData class
var b:BitmapData=bitmap_data.clone();
I create a second Bitmap which contains the clone of BitmapData
var thumb2:Bitmap=new Bitmap(b);
I create a new MovieClip (next inserted in the TileList component and seen first in the Document Class)
clip=new MovieClip();
I add to it the first Bitmap
clip.addChild(thumb);
I add it to the "thumbs_array" of Main.as
_fla.thumbs_array.push(clip);
I create a second new MovieClip (used to display the full size image)
clip2=new MovieClip();
I add it to the second Bitmap
clip2.addChild(thumb2);
I add it to the "clips_array" of Main.as (the Document Class)
_fla.clips_array.push(clip2);
I remove the listener of "loader"
removeListeners(loader.contentLoaderInfo);
I call the method "loadImage" of the Document Class
_fla.loadImages();

Source files:

[slee]

Hi
I have a swf 'container' that loads different swfs (there is one for listening to audio samples, one for watching videos, and i want this file to be for viewing picture), but it wont load this one. I can get this file to work if it's by itself, so i think that the movie clip paths in the actionscript need to be tweeked to reflect that it's inside another, but dont understand how to do this. Any help would be appreciated.

Rex

[ginger1988]

Thanks for a great tutorial Flep. I was working on something with the tile list but it's for a video player. I just had a question. My XML file has a node which contains 3 attributes. Like this:



src="movies/myMovie.flv"
thumbnail="thumbnails/smallPic.jpg" />




So to send that XML data to my playlist I have the data getting called like this and everything is working fine:

   tileList.addItem({label:item.attribute("description").toXMLString(), 
        data:item.attribute("src").toXMLString(),
        source:thumbnail});

But I wanted to add another attribute callled "moreDetails" to the node so I added this to the action script:

   tileList.addItem({label:item.attribute("description").toXMLString(), 
        label:item.attribute("moreDetails").toXMLString(), 
        data:item.attribute("src").toXMLString(),
        source:thumbnail});

When I publish it with addition the "moreDetails" does not show up but the output shows no errors. Do you know what I could be missing? Thanks in advance.

[ginger1988]

The XML file above did not publish correctly and I exceeded the 5 edits but it has another attribute called "description" within the same node. Thanks

[jupeto]

hope it's ok to bump this thread.

this is the one I've been looking for my image gallery, thank you for this one... But is it possible to add more details just like the description?

[kawoza]

Thanks for this tutorial. I'm working on something similar, but the JPEG's I use are too big to view in this way, so I need to put them in a scrollpane. I only began working with Flash, so I could really use an advice how to modify this example to view the pictures inside a scrollpane. Can you help me please?