Scrolling photos loaded dynamically with ActionScript 3

In this tutorial we will learn how to scroll some photos that we will load dynamically from an xml file and we will scroll the photos using a custom scrollbar.

We will use again the Tweener class to add a nice transition. You can add as much photos as you like.For this Flash tutorial we will use the Thumbnail class that we have used in the Photo Gallery tutorial but with some little modification.

This is how the final product will look:

1. Create a new file by going to File > New select Flash file (ActionScript 3.0) and click Ok. Save the file as scrolling_photos.fla.

2. Select the Rectangle tool set the stroke to none and the fill to #999999 and on the stage draw a rectangle 110 by 110.Select the rectangle hit F8 to convert it to a MovieClip. Set its name to thumb and set the registration point to center and click Ok.

3. Press Ctrl+L to open the Library. Right click on the thumb MovieClip and select Linkage. Select Export to ActionScript checkbox, set the class name to Thumbnail and click Ok. Select the thumb MovieClip from the stage and delete it.

4. Go to File > New select ActionScript file and click Ok. We will build the Thumbnail class witch is associated with the thumb MovieClip.

5. Copy and paste the next code
Code:

package {
	import flash.display.Sprite;
	import flash.display.Loader;
	import flash.net.URLRequest;
	public class Thumbnail extends Sprite {
		private var url:String;
		private var loader:Loader;
		private var urlRequest:URLRequest;

		function Thumbnail(source:String):void {
			url=source;
			drawLoader();

		}
		private function drawLoader():void {
			urlRequest=new URLRequest(url);
			loader=new Loader  ;
			loader.mouseEnabled=false;
			loader.load(urlRequest);
			loader.x=-50;
			loader.y=-50;
			addChild(loader);
		}
	}
}

Save the file as Thumbnail.as.

6. Go back to the scrolling_photos.fla. Insert two new layers (Insert>Timeline>Layer), name the layers beginning from the top: actions, scrollbar and photos _masker. In the Property Inspector click on the Size button and set the width: 550, height: 200, frame rate: 30, background color: black and click Ok.

7. Select the Rectangle tool set the stroke to none, pick a color (the color doesn’t matter because we will use this rectangle as a mask and the color won’t be visible) and on the photos_masker layer draw a rectangle. Set the measurements and the position of the rectangle as fallows: width = 550, height = 135, x = 0 and y = 0. Select the rectangle and press F8 to convert it to a MovieClip. Set its name to thumb_holder, the registration point to top left and click Ok. In the Property Inspector set its instance name to thumb_holder.

8. Lock the photos_masker layer. On the scrollbar layer draw a rectangle (width = 550, height = 20, x = 0, y = 140, stroke = none, color= #999999). Select the rectangle and press F8 to convert it to a MovieClip. Set its name to track, the registration point to top left and click Ok. In the Property Inspector set its instance name to track.

9. On the same layer draw another rectangle (width=50, height = 20, stoke = none and color = #FF9900).Convert it to a MovieClip, set its name to handler, the registration point to top left and click Ok. In the Property Inspector set its instance name to handler and position it at x=0 and y = 140.

10. Select frame 1 from the actions layer and press F9 to open the ActionScript panel.
Copy and paste the next code.
Code:

import caurina.transitions.*;
//---------loading the external xml file-------
var urlRequest:URLRequest = new URLRequest("pics.xml");
var urlLoader:URLLoader = new URLLoader();
var xml:XML;
var xmlList:XMLList;
urlLoader.load(urlRequest);
urlLoader.addEventListener(Event.COMPLETE,urlLoaded);

//--------------holds the thumbnail objects------
var arrayThumb:Array = new Array();

//---------the container of the thumbnails--------
var photoContainer:Sprite =  new Sprite();
addChild(photoContainer);

//-----------set the thumb_holder as a mask for the photoContainer
photoContainer.mask=thumb_holder;

/* ----loop through the xml file, populate the arrayThumb, position the thumbnails and add the thumbnails to bigHolder */
function urlLoaded(event:Event):void {
	xml = XML(event.target.data);
	xmlList = xml.children();
	for (var i:int=0; i<xmlList.length(); i++) {
		thumb = new Thumbnail(xmlList.url);
		arrayThumb.push(thumb);
		arrayThumb.y = 67.5;
		arrayThumb.x = i*100+55;
		photoContainer.addChild(thumb);
	}
}

var minScroll:Number = 0;
var maxScroll:Number = track.width-handler.width;
var draging:Boolean = false;

//--------------set the limits in which the handler can be dragged-----------
var bounds:Rectangle = new Rectangle(handler.x,handler.y,maxScroll,0);

//----------shows the hand cursor when mouse is over the handler-----------
handler.buttonMode = true;

handler.addEventListener(MouseEvent.MOUSE_DOWN,beginDrag);

//---------- handles the MOUSE_DOWN event--------------------
function beginDrag(event:MouseEvent):void {
	handler.startDrag(false,bounds);
	draging = true;
	handler.addEventListener(Event.ENTER_FRAME,checkingProgress);
	stage.addEventListener(MouseEvent.MOUSE_UP,endDrag);
}
//---------handles the MOUSE_UP event------------
function endDrag(event:MouseEvent):void {
	handler.stopDrag();
	draging = false;
}
/*---------checking the x position of the handler and update the x position of the photoContainer based on position of the handler---------*/
function checkingProgress(event:Event):void {
	var procent:Number = handler.x/maxScroll;
	if (draging) {
		Tweener.addTween(photoContainer,{x:(-procent*(photoContainer.width-thumb_holder.width)),time:1});
	}
}

11. The structure of the xml file looks like this:

<?xml version="1.0" encoding="utf-8"?>
<images>
 <image>
 <url>pics/img_1.png</url>
 </image>
 <image>
 <url>pics/img_2.png</url>
 </image>
</images>

Where <image></image> represents a new picture in the gallery. The url tag represents the path to the picture. Open your text editor copy and paste the code from above add the rest of <image></image> tags (as much as you like) and save the file as pics.xml.

12. Make a folder and name it scrolling_photos. Inside this folder make another folder, and name it pics(inside this folder place your photos). Inside the scrolling_photos folder place the scrolling_photos.fla, Thumbnail.as, the pics.xml file and the caurina folder. You will obtain this folder (caurina) after downloading the Tweener class. You will need this folder if you want to modify the fla file.
Test your .fla file by pressing Ctrl+Enter. Everything should work just fine.

This is all. I hope that you enjoyed the tutorial. Until next time have fun learning Flash! Download the source files for here: scrolling photos tutorial.

Note: Tweener is redistributed under the MIT license.

Tutorial by Sorin Haidan (May 10th 2008)

About the author:
I'm a Flash/ActionScript developer residing in Vaslui, Romania. If you have questions, suggestions, doubts about the tutorial don't hesitate to comment. I'm available for freelance work. You can contact me at this email: biochimistu[at] yahoo[dot]com.