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:

scrolling photos

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.

registration point of the movieclip

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

instance name of the movieclip

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.

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 thum_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++) {
var thumb:Thumbnail = new Thumbnail(xmlList[i].url);
arrayThumb.push(thumb);
arrayThumb[i].y = 67.5;
arrayThumb[i].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 witch the handler ca 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. If you have questions, suggestions, doubts about the tutorial don’t hesitate to comment.

Until next time have fun learning Flash.

Download the source files for here: scrolling photos tutorial.

50 comentarii:

Post a Comment

  • Billy : May 13, 2008 at 7:09 AM

    Great tutorial. Thanks

  • Mikey : May 13, 2008 at 5:15 PM

    Hey, great tutorial. Im a flash newbie, so this question might be a little funny. I tried to combine the "scrolling photos", and "photo gallery", which means that I tried to add a vertical scrollbar to the "photo gallery", but it didn't work at all. How do I make the scrollbar scroll vertically?

  • Biochimistu : May 14, 2008 at 6:15 AM

    Hi Mikey.
    You must work with the height and y property and you must scroll the container of the thumbnails (thumbsHolder).I have another tutorial in witch the scrollbar is vertical: Custom scrollbar you can inspire from there. You have all the pieces you just need to put them together.

  • Anonymous : May 21, 2008 at 7:52 AM

    I am totally new to flash and I am excitingly challenged.. but your tuts really make a difference learning experience :) thank you .

  • Alex : June 6, 2008 at 10:29 PM

    You really need to explain the actionscript, not just say to copy and paste. You should seperate it and say in english what the line/paragraph means and what it does. I am learning actionscript and a little depth would have been nice. Otherwise, good tutorial.

  • Biochimistu : June 8, 2008 at 1:58 AM

    If you look at the code you will see that I provide a little comment above the important pieces of code that tell what that code is suppose to do. Also I think that the names that I gave to the variables and functions are meaningful. I can’t explain every line of code. If you just start to learn AS I think that a good friend will be ActionScript 3.0 Language and Components Reference from Adobe.

  • nelly : June 8, 2008 at 7:57 AM

    Hey, great tutorial. I´ve seen it in flash magazine.
    I just wanted to ask a question, I have downloaded all de necesary files, included de caurina, and I tried to modify the color and shapes of the prepoader and when I save it and publish it with Crtl + Enter, it doesn´t work, I can´t see the images. I guess i did something wrong. Do I have to publish it in a special way?
    I´m quite new in as3...

    Thanking in you in advance.

  • Biochimistu : June 9, 2008 at 11:41 AM

    About what "prepoader" (I guess that you want to say preloader) do you tack? I haven’t used a preloader. No, it’s not a special way to test your .fla just Ctrl + Enter. If you placed the caurina folder in the right place you should have no problem. When you test your .fla file do you receive any error? What does it say?

  • Anonymous : June 20, 2008 at 4:46 PM

    hello great script

    where is the script to adjust the speed and the script for the placement of the handler and track?

    thanks

  • Anonymous : June 23, 2008 at 6:35 AM

    script for placement of track and handler, please?

  • Biochimistu : June 23, 2008 at 7:17 AM

    Read the tutorial and look at the source files and you will find what values I have used, it’s no script. But if you want to set the position of the track and handler with a script it can be done.

  • Anonymous : July 3, 2008 at 5:45 AM

    So like... how do i make the pictures link to something. like what if i wanted it to have a lightbox come up or a popup or whatever.

  • Biochimistu : July 4, 2008 at 10:32 PM

    You need to insert a new tag to the xml file where to place the url and after to add a click event to the thumbnails so when you click to a thumbnail to go to a url or wherever you want. Look at this Photo gallery tutorial, this will help you to make an idea.

  • Indira : July 24, 2008 at 8:23 AM

    Hi there, I managed to add an event to make the thumbs load an flv file, but I cannot make it load a text where I could put the title or some info. If I call an array I get the whole list of titles, or if I call [i] I get an undefined error. I guess because I am calling it from the onClick event, but that's where I need it... The xml is fine, I already added a node called title, but have no clue on how to link it to the gallery. I tried everything, but I can only work I think with currentevent.name? or maybe I'm wrong!!

  • Claus : July 24, 2008 at 12:41 PM

    It didn't work for me. I noticed in your source file a "Symbol 1" button in the library but I can't find any word about that in your tutorial.
    :|

  • Biochimistu : July 27, 2008 at 8:47 AM

    Hi Indira,
    I did it this way:
    -first I have added a node in my xml file called description and added inside the tags some text
    -setup a array that will hold the descriptions
    var arrayDescription:Array = new Array();
    - inside the for loop I added these lines of code:
    var picDescription:String = xmlList[i].description;
    arrayDescription.push(picDescription);
    arrayThumb[i].name = arrayDescription[i];
    arrayThumb[i].addEventListener(MouseEvent.CLICK,showDescription);

    and finally the showDescription function
    function showDescription(event:MouseEvent):void{
    trace (event.currentTarget.name);
    }

    inside this function you can add the description text to a text field to show in your movie,
    something like this:
    myTextField.text = String(event.currentTarget.name);
    I hope that this will help you.

  • Biochimistu : July 27, 2008 at 8:57 AM

    Hi Claus,
    that Symbol 1 from the Library is not too important and doesn’t affect the tutorial. I have used it so when you mouse over the thumb the hand cursor to appear.

  • Anonymous : July 29, 2008 at 8:28 AM

    Ok, thanks. I got it to work now. Which values do I have to change if I want to use bigger images like 800x600 pixel? Thanks a lot for your help!
    Claus

  • Biochimistu : August 2, 2008 at 1:08 AM

    Hi Claus,
    you can modify the pictures dimensions in the step tow of the tutorial, but after you will need to modify others dimensions too(stage dimensions, track) and some lines of code.
    Sorry for delay.

  • Anonymous : August 6, 2008 at 6:41 AM

    Yes, I've tried to adjust the image size and stage size, its the code where I don't know what to change.
    Claus

  • Biochimistu : August 9, 2008 at 8:10 AM

    Hi Claus,
    If you have modified the dimensions test the .fla and see what you receive.
    Look at those lines:
    arrayThumb[i].y = 67.5;
    arrayThumb[i].x = i*100+55;
    to adjust the position of the thumbnails.

  • Joshua : October 7, 2008 at 10:06 AM

    I'm trying to get this scrollbar working with a movieclip that loads children dynamically. Currently I have the content area masked (using scrollRect) but I can't seem to make the scrollbar interact with the content itself - it moves the entire content area, not the content behind the mask, which should remain stationary. This is a great tutorial, but can you help me clear this last hurdle?

  • Biochimistu : October 9, 2008 at 3:21 AM

    Hi Joshua,
    I don’t know how you setup your file but you should scroll the movieclip that holds the loaded content (thumbnails, movieclips).When you move the scrollbar the x (or y) position of your movieclip should change.

  • Anonymous : November 5, 2008 at 7:45 PM

    I am trying to scroll images with different widths. How do I change the code?

  • Biochimistu : November 6, 2008 at 10:42 AM

    This is not an easy task. You can try to add the widths of the pictures to the xml file; you can add the widths like an attribute of the image tag or like a new tag (similar with the url tag).Then you can use those widths in your code to align the images. This is just an idea; you have to make some good modification to the actual code to make it work with different widths.

  • Anonymous : November 19, 2008 at 11:11 AM

    Do you know how I could make the photos clickable links?

  • Biochimistu : November 21, 2008 at 11:16 AM

    You need to insert a new tag to the xml file where to place the url and after to add a click event to the thumbnails so when you click to a thumbnail to go to a url or wherever you want. Look at this Photo gallery tutorial, this will help you to make an idea.

  • Anonymous : November 25, 2008 at 12:29 AM

    where to get the tweener class

  • Biochimistu : November 25, 2008 at 9:54 AM

    I have putted a link at the beginning of the tutorial but here it is again: Tweener.

  • Anonymous : December 5, 2008 at 4:15 AM

    I cannot download the source file (.fla)

  • Biochimistu : December 5, 2008 at 5:01 AM

    I have checked the link, it works fine.
    But here it is an alternative one: scrolling photos.

  • Anonymous : December 5, 2008 at 5:41 AM

    Merci!

  • Leah : December 22, 2008 at 7:49 PM

    I get this when I test the movie:

    Error #2044: Unhandled IOErrorEvent:. text=Error #2035: URL Not Found.
    Error #2044: Unhandled IOErrorEvent:. text=Error #2035: URL Not Found.
    Error #2044: Unhandled IOErrorEvent:. text=Error #2035: URL Not Found.
    Error #2044: Unhandled IOErrorEvent:. text=Error #2035: URL Not Found.

    And don't see the images. Why?

  • Biochimistu : December 23, 2008 at 11:56 AM

    Hi Leah,
    The error say that a URL is not found, so maybe you have not provide the proper url for the xml file. You should also download and place inside the gallery folder the Tweener class.

  • Neil : January 29, 2009 at 11:10 PM

    Great tutorial,

    How do I remove the grey backgrounds behind the images?

    Thanks,

    Neil

  • Biochimistu : January 31, 2009 at 12:28 PM

    Hi Neil,
    The example is build with that bg in mind. You can get rid of the grey background; one way will be to increase the dimensions of the images from the pics folder now they are 100X100 make them 110X110, the grey bg will be hidden. You will need to reposition the loader inside the Thumbnail class.

  • Dmac : February 14, 2009 at 1:39 PM

    Biochimistu.

    This is a great tutorial.
    Question...ive repositioned the track.x by 250px from the left. But when i do this, the container jumps when i begin to drag and it does not scroll correctly at the end of the arrayThumb. Here's is my link: www.davidmcneal.com/as3/gallery_scrolling.html
    How is this done correctly?

  • Biochimistu : February 16, 2009 at 7:08 AM

    Hi Dmac,
    Move the others assets by 250 pixels too (thumb_holder, photoContainer) and change this line:
    Tweener.addTween(photoContainer,{x:(-procent*(photoContainer.width-thumb_holder.width)),time:1});
    To this:
    Tweener.addTween(photoContainer,{x:(250-procent*(photoContainer.width-thumb_holder.width)),time:1});.
    If you still have problems place the handler movieclip inside the track movieclip and change the code to reflect this move.

  • Dmac : February 18, 2009 at 12:19 PM

    Biochimistu

    Thanks for the tip. I managed to work it out.
    Im attempting to add a "text description" below the thumbnail and add a "text blurb" next to the loaded big pic.
    1. I have a movie clip called "full_mc" which loads the big pic and has a textfield named "blurbText".
    2. I have another movie clip named prevContainer which holds the thumbnails and it has a textfield in it named "thumbText".

    Ive followed the suggestions you stated from an earlier post but I keep getting these errors:

    1120: Access of undefined property arrayThumb.
    1120: Access of undefined property arrayThumb.
    1120: Access of undefined property thumbDescription.

    I know this is something simple I've overlooked. Any help would appreciated.
    Thanks

    Dmac

    CLICK HERE FOR XML: http://www.davidmcneal.com/as3/flash_xml_gallery_XML_CODE.pdf
    CLICK HERE FOR FLA: http://www.davidmcneal.com/as3/flash_xml_gallery_FLA_CODE.pdf
    CLICK HERE FOR ZIPPED FLA: http://www.davidmcneal.com/as3/flash_xml_gallery.zip

  • Anonymous : February 20, 2009 at 1:47 AM

    Thanks for posting this tutorial.

    I'm a newbie at flash and am following this tutorial but am stuck at step 11.

    Where does the xml file go? Have no idea where to click from the last step!!

    Would love some help, Thanks

    Could the problem be that I am using Flash Professional 8 and its only action script 2 not 3?

  • Biochimistu : February 22, 2009 at 9:30 AM

    You will find in step 12 where the xml file goes. Download the source file and see where each file is placed. You will need to use as3 for this tutorial.

  • Biochimistu : February 22, 2009 at 9:39 AM

    Hi Dmac,
    Your error code says that you haven’t declared arrayThumb and thumbDescription properties, so you should do it. Read careful the comment in witch I have explained how to add description to images.

  • Peggy : March 10, 2009 at 7:15 AM

    Hi, tutorial helped a lot, thx. But I've images in all different sizes that I'm trying to center on the thumbholder. I can place them using x and y, but can't get them centered. Can you help me out? Is there a way to access the size of image and maybe even resize it?

  • Biochimistu : March 14, 2009 at 6:33 AM

    You can access the size of an image; look at the Bitmap and BitmapData class in the documentation.

  • rynzco : May 5, 2009 at 12:42 AM

    Hi biochimistu.

    do you have as2 ver of this tutorial?...
    i really need this kind of script,...

    thanks ahead,...


    rynzco

  • Biochimistu : May 5, 2009 at 8:30 AM

    Hi rynzco,
    Sorry, but I don’t have the as2 version of the script. Make a in depth search on Google, you will find for sure a similar script.

  • Anonymous : October 9, 2009 at 1:05 PM

    Hi great tutorial, got mine working fine first go! Only problem i'm getting is, i'm building the whole of my site with flash and when i navigate to other pages the new gallery is still shown! How can i turn it off when i navigate away from the gallery? Thanks in advance.

  • Biochimistu : October 13, 2009 at 11:52 AM

    Hi
    When you navigate away from the gallery remove the photoContainer from the stage and set the alpha property for thumb_holder and track to 0.Don't forget to add the photoContainer to the stage and to set the alpha property for the thumb_holder and track to 1 when you want to access the gallery page.

  • Anonymous : May 6, 2010 at 9:24 AM

    Hello, I've modified the gallery a little bit but what I would really like to do is to add a preloader for every picture. I've tried different solutions but none of them worked. Do you have any idea how could I do that?

  • Biochimistu : May 7, 2010 at 7:31 AM

    Hi,
    I have modified the code (Thumbnail class) and now every image has a preloader.
    You can download it from: Scrolling photos loaded dynamically with actionscript 3.