How to build a Flash Actionscript 3.0 mouse scroller

Hi there , if you want to learn how to build a  flash actionscript 3.0 mouse scroller then this is the right place. Before to start you need to understand Classpaths and Packages in Flash and how to work with Caurina Tweening Class for actionscript 3.0. It’s a simple scroller, you don’t have to worry about the complexity of this tutorial, that instead of arrows will use the Mouse X position to scroll the content (use MOUSE_MOVE  listener and not ENTER_FRAME) .  An equation will be created between Mouse and content positions and then with Caurina we will move this content.

Let’s move

For beginning we need to create a main MovieClip called “scroller”,  that will store all objects (thumbs, squares or anything you need to scroll), a new MovieClip as mask for content  and finally a MovieClip for content. As actionscript, we need to create an algorithm to scroll this content with thumbs according with Mouse X  position.

Suppose our thumb’s width and height will be 75px, mask’s height  is 75px and width will be (thumbs number) * 75 – I choose (6 thumbs) * 75; Better take a look:

The content’s mask, called “contentMask” will have 75px on height  and 450px on width – for content I’ll choose to create from code this MovieClip. You can align this main MovieClip scroller in middle of Stage.

Scroller.as

After you read Classpaths and Packages and you know how to work with classes, create a folder src with a new folder inside called scroller. In this latest folder create a new ActionScript file, called let’s say Scroller.as and then in your Flash file link the MovieClip scroller with this class (CTRL+L in library, right click on scroller and in path field put this path to Scroller.as – scroller.Scroller). You can put a simple trace in this class, to be sure that there are no errors.

We are almost done, now we need to add some thumbs in content –  I will create some dynamic rectangles with random colors (also you can attach MovieClips from library)

First thing to do in Scroller.as is to create the MovieClip content and then to set contentMask as mask over this.

[as3]public var contentMask:MovieClip;
public var content:MovieClip;
[/as3]

Now let’s take a look in the constructor function:

[as3]content = new MovieClip();
addChild(content);
content.mask = contentMask;
content.buttonMode = true;[/as3]

Next step is to declare some variables that will represent the thumbs amount, width, height or color.

[as3]private var rectangle:Shape;
private var valueSize:Number = 75;
private var color:String;[/as3]

Don’t forget in constructor to initialize the ColorShortcuts function from Caurina, if you intent do use the “_color” method:

[as3]ColorShortcuts.init()[/as3]

To add thumbs, create a for statement to attach them according with variable howMany:

[as3]
private function addContent():void
{
for (var i:int = 0; i < howMany; i++) {
rectangle = new Shape();
rectangle.graphics.beginFill(Math.random() * 0xFFFFFF, 1);
rectangle.graphics.drawRect(0, 0, valueSize, valueSize);
rectangle.graphics.endFill();

rectangle.x = i * rectangle.width;
content.addChild(rectangle);
}
}
[/as3]

Now we have 10 thumbs ready with random colors, next step is to move them. To do this, we need a listener for scroller and a function that will make all things to move.
What you need to understand and the main priority is to check if the content‘s width is larger than the width of contentMask.

[as3]if (content.width > contentMask.width) { } [/as3]

If so, then the the difference between the width of content and mask will be stored into a variable called xResult. If not, means that the content‘s width is smaller then contentMask and we can’t scroll the content

[as3]xResult = content.width – contentMask.width;[/as3]

In order to be possible to move the content we need a negative number or equal to 0. So create another variable, simply called “c” that will be with a minus in front, that will store the result of xResult divided with contentMask‘s width and multiplied with the Mouse X position.

[as3]var c = – ((xResult / contentMask.width) * e.currentTarget.mouseX);[/as3]

If you trace this variable “c” you will see many negative results. This value is what we need to move the content, by using Caurina.

[as3]
private function scrollThis(e:MouseEvent):void {
if (content.width > contentMask.width) {
xResult = content.width – contentMask.width;
var c = – ((xResult / contentMask.width) * e.currentTarget.mouseX);
Tweener.addTween(content, {time:0.5, x:Math.ceil(c), transition:"easeOutSine"});
}
}
[/as3]

Save this class, recompile and see if it works. If nothing happens check my tutorial with Caurina and be sure is right installed, or just send me an email.


Twitter Digg Delicious Stumbleupon Technorati Facebook

17 Responses to “How to build a Flash Actionscript 3.0 mouse scroller”

  1. Hi. This mouse scroller is great! However, how do I have to change the AS in order to have a “photo slideshow” instead of the rectangles? Can you help me out? Thank you so much in advanced !!

    Regards
    Loan

  2. Hi, trough XML or inside of main movie you want these images? Also take a look at http://www.fladev.com/free-files/create-a-thumbs-scroller-with-as3-and-xml/

    Robert

  3. The native flash scrolling is usually problematic if the SFW object is embedded within a page via the classic tag. It’s always better to embed objects with SWF Objects since they tend to focus on the container box of a flash element 😀

  4. Hi Robert,

    this scroller is exactly what I was looking for and haven’t found anywhere else. Your scroller only scrolls when the mouse is inside the scrolling area. That’s why I like it so much. I’m looking for a gallery loading pix with XML. Please help me out. Thank you!!

    Loan

  5. Thanks Robert. I appreciate your help and all your beautiful tutorials! Nice work! 🙂

    Loan

  6. hi there robert,
    thanks for your great tutorial. you mention…

    “(you can attach movie clips from library)”

    how do i do this?
    i want to define 4 or 5 clips to populate container, not rectangles

    Craig

  7. Hi there I like your post

  8. @Craig: create 4-5 movieclips, then link these with some names and then attach them to stage. For example:

    var mc1:FirstMc = new FirstMc;
    addChild(mc1);

  9. Hi friends, I reviewed this tutorial along with the sources. Feel free to send me any comments

  10. Many thanks to user Anon, who make me an observation about this old post 😉

  11. I’d like to attach 5 movie clips(thumbnails).
    How do you do that?
    How do you make movie clips scroll??

  12. I read the cooment :

    @Craig: create 4-5 movieclips, then link these with some names and then attach them to stage. For example:

    var mc1:FirstMc = new FirstMc;
    addChild(mc1);

    I know how to make movie clips.
    I don’t understand “Attach them on stage”
    If I want 5 different thumbnails and and want them move like you did for rectangle, how do you do that??

  13. Your MovieClip needs to be linked from library with a Class, in order to attach this on stage.

    var mc1:FirstMc = new FirstMc;
    addChild(mc1);

    And your MovieClip from library will be linked with FirstMc class

  14. Thankyou, I figured out how to attach thumbs.
    and I used Array and for loop.

    Is there any other way to make class path?
    I’m making a website for my experience and I’d like to put the Scroller.as into my develop folder where I put other .as files.
    you made the path by creating a folder src with a new folder inside called scroller. and make the class scroller.Scroller so I couldn’t move the Scroller.as file into my “develop folder”.

  15. Robert
    Thank you for your tutorial.
    I am very new to scripting, but have managed so far to follow tutorials for building a xml gallery.
    I would like to add a thumbnail scroller, activated by mouse position (like the one you describe in this tutorial) and then for thumbnails to brighten with a roll over effect. I am afraid, however, I am having difficulty following your instructions for the scroller.

    Do you have a version with comments? Or could you provide the complete code?

    If anyone else has managed to do this, I would be most grateful for some advice.

    Regards.