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:

 

Make sure JavaScript is turned on. You need to upgrade your Flash Player

 

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.

 

About Sorin Haidan

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.

 

Comments

---

---

---

---

---

Posted by ObiWan on 05/04 at 06:10 AM

Hi, great tutorial thanks. How would I get each thumbnail to hyperlink to a unique URL integrated in the XML file?

I’ve tried putting an mouse event listener on each of the thumbs as they are generated but its the same event listener on each one that runs the same function which means that every thumb is launching the same URL.

Any advice would be greatly appreciated thanks.

---

Posted by herman on 05/20 at 04:23 PM

Hey,

If I make the stage width wider than the thumbnail holder then it adds a blank space at the end of the slide and it won’t scroll back fully anymore.

Any idea why it does this and how it could be fixed?

I’v been trying to figure it out for a couple of days now, heh :) Still very new to Flash and AS.

Herman

---

Posted by rociopts on 11/18 at 02:08 AM

To change the width change the following:

var thumb = new Thumbnail(xmlList.url);
arrayThumb.x = i*100+55;

HINT: change the 100px to whatever pix size you want.

---

Posted by leidab on 12/15 at 06:10 PM

Is there a way to make each thumbnail link to a landing page url? Which file would I need to work in and what code would I need to change or add to?

---

Posted by lindsay on 02/09 at 02:16 AM

I have done this tutorial but I keep getting this back in the flash Error compiler:

1120: Access of undefined property thumb on line 25, 26 and 29.

I have created my thumb movie clip with the proper Class name. I think it has something to do with having no base class because the movie clip icon is green which means it is turning into a sprite.

Any ideas????

---

Posted by unkle73 on 04/09 at 05:04 PM

How can this be embedded into an existing Flash webpage? I have my page prepared, but need to know the best way of attaching and positioning this exactly where I want it.

Also, how can you make each image appear in a larger floating window when it is clicked on?

Finally, for some reason, the last 4 images in the thumbnails will not display, the xml syntax is correct and all the images are kept in the same folder. Any idea why this is happening?

---

Posted by Javed Ahmed on 05/12 at 12:42 PM

I’m also having the same issue as Lindsay, I get the error “1120: Access of undefined property thumb” on lines 25, 26, and 29. I must have gone wrong in Step 3, since I’m using Flash CS5, and there is a minor difference in the Library section. I don’t have the right-click MC > ‘linkage’ option, but there is already a text field where I can manually type in the linkage asset. However, I have not found a way to: “Select Export to ActionScript checkbox” in CS5. Anyone ever find a solution to this?

---

Posted by nashradus on 08/02 at 03:02 PM

There are a couple of queries on how to hyperlink from each of the image. Is there a solution for that, please…

---

Posted by Jens C Brynildsen on 08/15 at 10:46 AM

@nashradus Sure. I was kind of hoping that Sorin would do this, but here’s how you do it:

You have to add a MouseEvent listener that reacts on CLICK to each of the objects that should trigger the link:

myObject.addEventListener(  MouseEvent.MOUSE_MOVE,  gotoPage);

Then you make the function linked in the event listener:
private function gotoPage(event:MouseEvent):void
      {
        navigateToURL( new URLRequest( “http://somesite.com” ), “_blank” );
      }

That’s about it. Here’s a more thorough explanation:
http://scriptplayground.com/tutorials/as/getURL-in-Actionscript-3/

J

---

Posted by supriyaakg on 04/19 at 08:13 AM

Awesome code! How can I get it work with thumbnails alinged vertically and also the scrolling?

---

Posted by Alex629 on 04/19 at 09:02 PM

Hello - I am a novice to Flash and Action Script but found your instructions easy to follow on the scrolling photo tutorial. Worked great, however, I would like to also be able to link from each of my images. Can you please explain how to do this. Here is the link to the file I setup. Thanks for the help. http://clarkcommunicationsgroup.com/clark/scrolling_photos/gallery.html

---

Posted by bbfins on 02/03 at 12:00 PM

Hi Sorin,

As a AS3 beginner, I found the tutorial is cool and easy to follow. It works well if I position the thumb holder to the 0, 0 coordinates of the stage. If I position it to the center of the stage, the photos disappear. Is it the problem of the position of the ‘mask’? Which part of the code should I change? Please advise. Thanks!

Submit a comment

Only registered members can comment. Click here to login or here to register