Flash AS3 Tutorials Center | Interesting Flash Animation Tutorials | Valuing Flash Animation Tutorials | Flash ActionScript and Animation Home

AS3 Beginner Tutorials | AS3 Basic Lessons | AS3 Valuing Courses | AS3 Components Tutorials | AS3 and PHP Interaction Tutorials
AS3 Practical Tutorials | AS3 Animation Techniques | AS3 Transition Effects Tutorials | AS3 Download Upload Files | AS3 Particle Systems
Communication Between Flash Movies with AS3 | AS3 and JavaScript interaction | AS3 Matrix Transformation | AS3 Physics Simulation Tutorials

Flash TileList Component ActionScript 3 Tutorial

This Flash Component tutorial series show how to use TileList with Flash ActionScript 3.

Please update flash player to view this Flash ActionScript tutorial!

Flash Tutorial Content:

The Flash TileList class provides a grid of rows and columns that is typically used to format and display images in a "tiled" format. The default cell renderer for this component is the ImageCell class. An ImageCell cell renderer displays a thumbnail image and a single-line label. To render a list-based cell in a Flash TileList component, use the CellRenderer class.

To modify the padding that separates the cell border from the image, you can globally set the imagePadding style, or set it on the ImageCell class. Like other cell styles, the imagePadding style cannot be set on the Flash TileList component instance.

The finished Flash Movie of this tutorial is shown as above. Click on the above Flash Movie and play around.

Flash ActionScript Codes:

//Put all photos into an Array
var photos:Array = [ "pic1.jpg", "pic2.jpg", "pic3.jpg", "pic4.jpg" ];

//Put all photo thumbs into an array
var photoThumbs:Array = [ "pic1-thumb.jpg", "pic2-thumb.jpg", "pic3-thumb.jpg", "pic4-thumb.jpg" ];

//Put the Title of photos into an array
var thumbTitles:Array = [ "Sea View", "Liberty Statue", "Sea Shore", "Marine Club" ];

//Add the photo thumbs into the TileList (photo_tl)
var i:int;
for (i = 0; i < 4; i++) {

photo_tl.addItem ( { label:thumbTitles[i],source:"images/" + photoThumbs[i],
photoPath:"images/" + photos[i] }



//Hide the ProgressBar at the beginning
loading_pb.visible = false;

//Source of the ProgressBar
//Actually you can set at the Parameters window of ProgressBar
loading_pb.source = photo_sp;

//Listen to when the loading COMPLETE
loading_pb.addEventListener(Event.COMPLETE, loadingPhotos);


function loadingPhotos(evt:Event) {

loading_pb.visible = false;



//Listen to when the TileList is clicked
photo_tl.addEventListener(MouseEvent.CLICK, showPhoto);


function showPhoto(evt:Event) {

//Reset the ProgressBar

//Show the loading progress of the Progressbar
loading_pb.visible = true;

//Display the Photo on the ScrollPane (photo_sp)
photo_sp.source = photo_tl.selectedItem.photoPath;


Download Flash Source File:

Flash Source File tilelist.fla


This Flash ActionScript tutorial shows how to use Flash TileList component.