Create a Thumbs Scroller with AS3 and XML

Because many people was more and more interested in this subject, I decide to improve this tutorial with some new features. You know already how to work with XML files and you know how to set right the classpath of a flash file, you know how to work with Caurina, so we will not have difficulties in how to create a Thumbs Scroller using AS3 and XML.


Preview the final result


Roll your mouse over these thumbs, scroll them to right or left and click them.


Settings all files

Create a new ActionScript File and save it as “MainClass.as” (fladev.scroller.MainClass.as) – this will be the main class;

[as3]package fladev.scroller

{
import flash.display.Sprite;

public class MainClass extends Sprite
{
public function MainClass() {
}
}
}[/as3]

Becouse we have 2 buttons that will scoll the thumbs container, create a new new class and save it “ArrowButton.as” (fladev.scroller.ArrowButton.as) – so this will be the class for scroll buttons.

[as3]package fladev.scroller
{
import flash.display.MovieClip;

public class BtnScroller extends MovieClip
{
public function BtnScroller() {
}
}
}[/as3]

Finnaly create a new AS3 Flash file(590x300px) and let’s take a look closer.


Scroll Buttons

In main stage create a simple circle with a “play” icon in middle, convert this to MovieClip. Inside of this you can play around with a basic animation as I do, that will represent the animation for rollOver and rollOut. After you finish, duplicate this button so we can have two of them, also call them “rightArrow” and “leftArrow”. In library (CTRL+L) locate where you create this new symbol, right click on it, select Properties > Export for ActionScript and type the name of their classfladev.scroller.ArrowButton. Make sure your “Type” is set to Movie Clip.


ArrowButton

If we test the movie now it will nothing’s happens, because we just finish to setup .as and Flash files. Here in this class we will add some mouse listeners for rollOver and rollOut.

[as3]package fladev.scroller
{
import flash.display.MovieClip;
import flash.events.MouseEvent;
/**
* …
* @author …Bataglia – www.fladev.com | bataglia85@yahoo.com
*/
public class ArrowButton extends MovieClip
{

public function ArrowButton()
{
this.buttonMode = true;
this.mouseChildren = false;
//mouse listeners
this.addEventListener(MouseEvent.ROLL_OVER, over);
this.addEventListener(MouseEvent.ROLL_OUT, out);
}

private function over(e:MouseEvent):void
{
this.gotoAndPlay("over");
}

private function out(e:MouseEvent):void
{
this.gotoAndPlay("out");
}

}

}[/as3]

When you test the movie roll over the buttons to see the effect created. Play with this and add some new effects.


XML

To load thumbs from outside trough an XML file we need to create a folder with some images – create a new folder “images” and put there 10 images with same size – 55px width and height. Called them from 1.jpg to 10.jpg. Also, paths for different URLs will be added here too.

Create a simple XML file “xml.xml” with different nodes:

[xml]
<?xml version="1.0" encoding="utf-8" ?>
< data >
< thumb path="images/1.jpg" link="www.google.com" />
< thumb path="images/2.jpg" link="www.google.com" />
< thumb path="images/3.jpg" link="www.google.com" />
< thumb path="images/4.jpg" link="www.google.com" />
< thumb path="images/5.jpg" link="www.google.com" />
——————————
</data>
[/xml]


Thumbs

To create a thumb, draw a rectangle with 55px width and height, convert this to MovieClip and link this with a new class, called “Thumb.as” (fladev.scroller.Thumb). There is no need to put any thumbs on stage since these will be added dynamically, so delete this from stage after you have linked.


Thumbs.as

Since a thumb is a button too, we will create a new class file “Thumbs.as” that will store what thumb will be loaded and where should navigate when will be released.

[as3]
package fladev.scroller
{
import flash.display.Loader;
import flash.display.Sprite;
import flash.events.MouseEvent;
import flash.net.navigateToURL;
import flash.net.URLRequest;
/**
* …
* @author …Bataglia – www.fladev.com | bataglia85@yahoo.com
*/
public class Thumb extends Sprite
{
private var url:String;

public function Thumb(url:String, thumb:String)
{
this.url = url;
this.buttonMode = true;
this.mouseChildren = false;

var loader:Loader = new Loader();
loader.load(new URLRequest(thumb));
addChild(loader);
this.addEventListener(MouseEvent.CLICK, click);
}

private function click(e:MouseEvent):void
{
navigateToURL(new URLRequest(url), "_blank");
}

}

}
[/as3]

We load a picture trough a loader, and we open a web page using an URLRequest.


MainClass.as

Here in this main class we will load the content from XML file in order to display the thumbs. After all thumbs are loaded we must scroll them – remember when we create the arrow buttons.

[as3]
public function MainClass() {
loadXML();

leftArrow.addEventListener(MouseEvent.CLICK , scrollLeft);
rightArrow.addEventListener(MouseEvent.CLICK, scrollRight);
stage.addEventListener(MouseEvent.MOUSE_WHEEL, onMouseWheel);
}

private function loadXML():void
{
//loading xml content
var urlLoader:URLLoader = new URLLoader();
urlLoader.load(new URLRequest("xml.xml"));
urlLoader.addEventListener(Event.COMPLETE, xmlLoaded);
}

[/as3]

If you test the movie should display all the content from XML file; if not it will throw an error, to check your path.


Adding thumbs

Once the content is loaded then we must add thumbs. Create a new symbol on stage, called “container”:

[as3]
private function xmlLoaded(e:Event):void
{
xml = new XML(e.target.data);

//adding thumbs
var xPos:Number = 0;
for each(var node:XML in xml.thumb) {
thumb = new Thumb(node.@link, node.@path);
thumb.x = xPos;
xPos += thumb.width +5;
container.addChild(thumb);
}
}
[/as3]


Scroller

Now that all thumbs are loaded and you can click them, just finally need to scroll them. To to this, create a new MovieClip symbol with width 300px and height 64px over these thumbs and give him an instance name called “thumbMask” – don’t forget to make this layer mask over the container’s layer. If these 2 arrows will be clicked then the thumb’s container will move.

Let’s sc/roll

We have everything done, just need to add listeners on that arrow buttons and mouseWheel on stage, in order to scroll the MovieClip “container” that holds the thumbs.

[as3]
leftArrow.addEventListener(MouseEvent.CLICK , scrollLeft);
rightArrow.addEventListener(MouseEvent.CLICK, scrollRight);
stage.addEventListener(MouseEvent.MOUSE_WHEEL, onMouseWheel);
[/as3]

[as3]
private function onMouseWheel(e:MouseEvent):void
{
var n:int = e.delta;
if (n <= 0) {
scrollLeft(null);
} else {
scrollRight(null);
}
}

private function scrollLeft(e:MouseEvent):void
{
if(!Tweener.isTweening(container)) {
var tx:Number = Math.min(container.x + 60, thumbMask.x);
Tweener.addTween(container, { x:Math.floor(tx), time:0.5, transition:"easeOutSine" } );
}
}

private function scrollRight(e:MouseEvent):void
{
if(!Tweener.isTweening(container)) {
var tx:Number = Math.max(container.x – 60, thumbMask.x-thumbMask.width);
Tweener.addTween(container, { x:Math.floor(tx), time:0.5, transition:"easeOutSine" } );
}
}
[/as3]

OK, now you can test it!


The epilogue

One thing that I should explain in the end – if you read how to set right the classpath of a flash file then you must remember that each of these symbols must be declared as a public variable:

[as3]
private var xml:XML;
private var thumb:Thumb;
private var loader:Loader;
public var container:MovieClip;
public var leftArrow:ArrowButton;
public var rightArrow:ArrowButton;
public var thumbMask:MovieClip;

[/as3]

Thank you for your time, I shall thank you for your comments.


Twitter Digg Delicious Stumbleupon Technorati Facebook

16 Responses to “Create a Thumbs Scroller with AS3 and XML”

  1. thank you very much for this tutorial..it’s very useful!

    How do i add codes so that when i click on the thumbnails it then navigates to a url?

    thank you…

  2. yea i would like to be able to click on the thumbnails too..how is that possible?

  3. in loadXML method add this listener:
    thumb.addEventListener(MouseEvent.CLICK, doSomething);

    then create a new method “doSomething”:

    private function doSomething(e:MouseEvent):void
    {
    trace(“your link”);
    }

  4. thanks for the reply..

    that is what I had..but all the thumbnails point to the same action. I mean i wanted to have each thumb to go to a different url.

    tried to do:

    thumb[0].addEventListener(MouseEvent.CLICK, doSomething);
    thumb[1].addEventListener(MouseEvent.CLICK, doSomething1);
    so on…

    but wouldn’t let me.

    any ideas how to achieve this?

  5. thumb.addEventListener(MouseEvent.CLICK, doSomething);

    then create a new method “doSomething”:

    private function doSomething(e:MouseEvent):void
    {
    trace(“your link”);
    }
    ————————

    yes this make all the thumbs to go to one target..

  6. anyone knows how to make each thumb go to different urls?

  7. Hello everybody, I rewrite this tutorial. As a surprise for you, just change the link paths from .XML and voila 🙂 (don’t hesitate to send me any questions). Cheers!

  8. hi robert,

    I cannot open the index.fla. Thanks for the tutorial this is what i was looking for…

    🙂

  9. You can download again the files, I’ve saved them in CS4. Also you owe me a like on facebook 😉

  10. It’s really useful…

  11. hi robert,

    thanks for saving in cs4. i’ve already liked fladev on fb.

    for some reason, after putting the caurina folder in the thumbscroller folder, and then run…errors pop up.

    It can’t find the property Tweener..I looked into the caurina folder and found the Tweener.as is in the right place. And then I put the caurina folder on another project and it works fine..

    i’m so confused…would you please help..

    thank you so much!!!

  12. Nice tutorial. Is it possible to download the source files ? The download button seems to be not working.

  13. Hi, next week I will finish this website and all sources will be available.

    Thanks!

  14. hi Robert,

    thanks for your response and congratulations for your job !