Create a simple scroller with Flash and as3

This is a basic tutorial, that will match your creativity using OOP to scroll anything in Flash. What you need to know is how to populate content with XML and how to animate with EnterFrame. If you have problems with .XML files don’t forget to check my other tutorial called working with .XML files in Adobe Flash as3.

Settings all files


Create a new ActionScript File and save it as “MainClass.as” (com.fladev.scroller.MainClass) – this will be the main class for our flash file; the package classes extends the Sprite class (since we don’t have a timeline animation). Finally create a new AS3 Flash file (590×300px) and open it, so that we have both files opened.

MainMovie

On main movie create a dynamic textfield , with instance name “preloader_txt”, then convert this symbol to movieclip and give him a name, let’s say “content”. In my example this have 487px width and 198px height; draw then a rectangle on a new layer with same width and height, convert this to movieclip and give him a name “mask_mc” – this will be the mask over the content. It’s important that these 2 movieclips to have same size and same coordonates on X and Y (51,48). What we have now is a textfield “txt”, a movieclip that contain this textfield “content” and a mask over this, as a movieclip also called “mask_mc” on a new layer. What we need to finish this is to create 2 arrows for scrolling up and down.

XML

[as3]
<?xml version="1.0" encoding="UTF-8"?>

<mainNode>
<textnode><![CDATA[<font color="#CCCCCC" size="60" face="Georgia"><i>This is a HTML Module</i></font><br/><font color="#2D2D2D" size="16" face="Georgia"><i>This page can have images and formated text all from XML. Just open example.xml, there is no need to recompile.</i></font><br><br>Nunc odio tortor, semper a, rhoncus id, congue eu, purus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas ornare sagittis lectus. Donec convallis aliquam sapien. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus quam est, fringilla non, vehicula sit amet, aliquam ac, nunc. Pellentesque a lectus eu purus bibendum ultrices.]]>
</item>
</mainNode>
[/as3]

Arrows

You don’t have to be an expert in design to build 2 simple arrows – in fact you will build just one, the other will be same but will have a different name. Draw a circle with Oval Tool (O) and an arrow in middle of this, then convert this to MovieClip with instance name “up_arrow”; clone this and give another name “down_arrow” – now we are done with main movie.

Button.as

Create a new ActionScript File with name “Button.as” (com.fladev.scroller.Button.as); in main movie, locate in library where the movieclip button is and right click on it > Properties > select Export for ActionScript. In the Class field insert the new class created (com.fladev.scroller.Button) and finally click ok; this means that we asign a class to this button and we don’t have to create another one for each button. The code for Button.as is:

[as3]
package com.fladev.scroller
{
import flash.display.Sprite;
public class Button extends Sprite
{
public function Button() {
this.buttonMode = true;
this.mouseChildren = false;
}
}
}
[/as3]

MainClass.as

Declare first some variables for scrolling speed and XML (I will not cover again how to create an XML):

[as3]
private static const xmlFile:String = "example.xml"//xml file
private var xml:XML;
private var urlLoader:URLLoader;
private var speed:Number = 5;//scrolling speed
[/as3]

Then in constructor function:

[as3]
public function MainClass() {
//loading XML file
urlLoader = new URLLoader();
urlLoader.load(new URLRequest(xmlFile));
urlLoader.addEventListener(Event.COMPLETE, showXML);
//listeners for up and down arrows
up_arrow.addEventListener(MouseEvent.MOUSE_DOWN, doAction);
down_arrow.addEventListener(MouseEvent.MOUSE_DOWN, doAction);
up_arrow.addEventListener(MouseEvent.MOUSE_UP, releaseButton);
down_arrow.addEventListener(MouseEvent.MOUSE_UP, releaseButton);
//make the textfield to be aligned at left side
content.txt.autoSize = TextFieldAutoSize.LEFT;
}
[/as3]

When buttons will be pressed the function will check to scroll or not the content, depends on his position:

[as3]
private function doAction(e:MouseEvent):void
{
switch(e.currentTarget.name) {
case "up_arrow":
if (content.y < mask_mc.y) {
content.addEventListener(Event.ENTER_FRAME, goUp);
}
break;

case "down_arrow":
if ((content.y + content.height) > (mask_mc.y + mask_mc.height)) {
content.addEventListener(Event.ENTER_FRAME, goDown);
}
break;
}
}
[/as3]

After a button will be released we remove the listeners for EnterFrame function:

[as3]
private function releaseButton(e:MouseEvent):void {
content.removeEventListener(Event.ENTER_FRAME, goUp);
content.removeEventListener(Event.ENTER_FRAME, goDown);
}
[/as3]

Finally functions for scrolling up and down:

[as3]
private function goUp(e:Event):void {
content.y += speed;

if (content.y > mask_mc.y) {
content.removeEventListener(Event.ENTER_FRAME, goUp);
trace("fin up");
}
}

private function goDown(e:Event):void {
content.y -= speed;

if (content.y + content.height+10 <= mask_mc.y + mask_mc.height) {
content.removeEventListener(Event.ENTER_FRAME, goDown);
trace("fin down");
}
}
[/as3]

You can change the scrolling speed according with “speed” variable. Basically, we scroll the content using EnterFrame by his position according to the mask position. Hope you enjoy it and learn something, sources are bellow. Good luck!


Twitter Digg Delicious Stumbleupon Technorati Facebook

14 Responses to “Create a simple scroller with Flash and as3”

  1. Hi there!

    nice, this is very useful!

    is there a way to not display the arrow buttons if the content does not need to scroll?

    thanks

  2. @rodrgo: yes, in goUp() method where I remove listeners, set that 2 buttons visible to false.

  3. Hi,

    Very nice tutorial.

    was hoping if you dont mind, should I don’t want my content to be in .xml but within the Movie clip, is it possible for you to have that tutorial?

    I’d be greatly appreciate if you could do that.

  4. Please check again now, and thank you for this comment.
    Robert

  5. Few things. Doesn’t work well in a timeline, but no worries.

    The MOUSE_UP / MOUSE_DOWN don’t work well on a touchscreen kiosk. I changed them to CLICK / MOUSE_OUT. Not the best solution, but the only one I could think of at the moment.

  6. Hi how can I get this to work inside a moveclip

  7. Copy the hole content into your MovieClip and that’s it.

  8. Hi thanks for the quick responce, I try that and
    I get a total of 28 errors
    all errors say the same thing
    they all say , Access of undefined property
    this are a few of them
    1120: Access of undefined property content.
    1120: Access of undefined property mask_mc.
    It is on my end i know that so what am I doing wrong lol.
    thank you for any help

  9. Hi i fixed the problem i had to export it but i but i now get a error saying in the output
    TypeError: Error #1009: Cannot access a property or method of a null object reference.
    at com.fladev.scroller::MainClass()
    TypeError: Error #1009: Cannot access a property or method of a null object reference.
    at com.fladev.scroller::MainClass/showXML()
    at flash.events::EventDispatcher/dispatchEventFunction()
    at flash.events::EventDispatcher/dispatchEvent()
    at flash.net::URLLoader/onComplete()

  10. You remove some MovieClips from stage and that cause these errors.

  11. Hi Robert, I just wanted to let you know i got it to work and I wanted to say thank you.
    I learn alot from this.

  12. Hi Robert,
    very helpful tut for a newbie
    i have the same problem with Scott

    i get 28 errors : Access of undefined property up_arrow,down_arrow, content,mask_mc
    even that i have exported the text and button movie clip to get the class from MainClass.as and Button.as

    i can’t point the whole file to MainClass.as because i have some more script on that file and i get confused, so that’s why i point only the text.

    Can you help me what should i do?
    Also there is a 29th error:
    : The class ‘com.MainClassScrollv’ must subclass ‘flash.text.Font’ since it is linked to a library symbol of that type.

    ‘com.MainClassScrollv’ is the name of my customized class

    Thank you in advance

  13. Hi Robert,

    Thank you for this tutorial. I am still learning the ropes in Flash. I tried to use this scroller with a couple of images for a project. Looked interesting, but a bit to simple. I now working on building something that looks like this flash scroller, the Photo Dragger at http://www.flashxml.net/photo-dragger.html
    I like the way the developers made this scroller, played around with it, customized it online etc.
    They did it with XML, but I just want to make something similar for Flash. It’s not going to be as fancy as this one, but can I share my work once it’s done, to be able to get some feedback?

  14. Hi Robert.
    How and where to add a MOUSE_WHEEL event?
    The scroller works fine but mouse wheel stop after a while.

    Thank you very much