Scrolling Content in Flash with MovieClip or TextField

Posted on January 28, 2011 in Flash Category

In this tutorial we will learn how to create scrolling content in Flash using Action Script 2. We need to create 2 movie clips (Up and Down Buttons), 1 text field with your text converted into a movie clip and in the end we need the script.

Scrolling Content in Flash - Final Results

Step 1 - Adding Details

Open Adobe Flash and create a new Action Script 2.0 File (CTRL + N). In this tutorial we will use Flash CS3.


Using the Text Tool(T) create a text field and write a very long text in it and set the Width to 500, X and Y Axis to 10, Type Static Text from the Properties Panel (CTRL + F3). In the image below font used is Lucida Sans Unicode.

Scrolling Content in Text Field

While you have the Text Field selected, press F8 or Right Click on it and select Convert to Symbol, select Movie Clip and click OK.


After doing this go to Properties Panel and set the Instance Name to "text_area".


Now, using the Timeline (CTRL + ALT + T), create a new layer named "mask", select Rectangle Primitive Tool (R) and draw a big rectangle with the Width 500, Height 280, X and Y to 10 . This will be the mask for you text to show only a portion of the text. You can see the image below:


Right click on the layer named "mask" and select Mask from the list. You will see only the text included in the masked rectangle.


The see what are you doing on the stage you better Hide and Lock the "mask" layer in the timeline. (or lock all)


Once you locked all layers, create a new layer named "buttons". Select the Oval Tool (O) and draw a circle with Width and Height 40 and X Axis 500 and Y Axis 10. Now create a new text field in the middle of circle, with font Webdings and Size 24.

Up Arrow for Scrollable Content in Flash

Select with your mouse both symbols and press F8 to Create a Movie Clip and set the Instance Name "scrollup".


Now Copy this object, Paste in Place, and using SHIFT + Down Arrow move it down. Go to Modify - Transform - Flip Vertical to flip the symbol vertically. Write the Instance Name "scrolldown".


Now select the Line Tool (N) and draw a line with 500 Width and Press F8 to Convert it to Movie Clip. Set the Y Axis to 290 (the bottom limit of the masked object). Write the Instance Name "limit". (This will be the limit of the scrolling text, because we can't scroll it infinitely)

Step 2 - Code for Scrolling Content in Flash

To make the scrolling content in Flash, we need to write the code for our arrows. Also we need to add a variable to check the when the movie clip is hitting the line, to stop the content from scrolling. Now select a frame from timeline and press F9 or Right Click - Actions and type the code below:

//Tutorial by Extreme Design Studio
//More tutorials on
limit._alpha = 0; // set the limit object alpha to 0 to be invisible

scrollup.onRollOver = function() {
	scrollup.onEnterFrame = function() { // the script will run continuously
		if (text_area._y == Number(10)) {
			text_area._y += 0;
		} else {
			text_area._y += 2; //increase Y Axis with 2

scrollup.onRollOut = scrollup.onRelease = scrollup.onReleaseOutside = function() {
	scrollup.onEnterFrame = function() {
		text_area._y += 0; // when RollOut the text will stop scrolling

scrolldown.onRollOver = function() {
	scrolldown.onEnterFrame = function() { // hitTest is currently set to TRUE
		if (text_area.hitTest(limit)) { // if TEXT will intersect limit line:
			text_area._y -= 2; // position will be decreased with 2
		} else {
			text_area._y -= 0; // else will stop

scrolldown.onRollOut = scrolldown.onRelease = scrolldown.onReleaseOutside = function() {
	scrolldown.onEnterFrame = function() {
		text_area._y += 0;

Final Work

Download Files

Related Articles
  1. A.H Mahi says:

    This is very useful tutorial. this tutorial help me for create my website. Thanks again.

  2. csabi says:

    Hi! You have lot`s of great tutorials! Congratulations!

Hint: Wrap your code syntax (html, css or others) between <pre> and </pre> tags. All comments are moderated.

1 + five =

Subscribe by E-mail

HTML-TUTS is built under the mighty WordPress platform.