Scrolling Content in Flash with MovieClip or TextField

Posted on January 28, 2011 by Dan Doicaru 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.

step1

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.

step1bb

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

step1bbb

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:

step1c

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

step1d

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

step1dd

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

step1ee

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

step1eee

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 html-tuts.com
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

Rate & Share
1 Star2 Stars3 Stars4 Stars5 Stars (6 votes, average: 4.83 out of 5)
Related Articles
Comments
  1. Gravatar Icon A.H Mahi says:

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

  2. Gravatar Icon 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.


8 + = 13

Search
Subscribe by E-mail

HTML-TUTS is created and maintained by Dan Doicaru.
This website is a rebrand to Extreme Design Studio (extremestudio.ro), built under WordPress platform.