Basic
Text Text
ScrollerOne of the
most popular tutorial requests that has reached my email box
and few message board posts is regarding text scroll. In
response, the tutorial for creating a scrolling text file is
written below.
The example below will show
you how your text scroll box should look like. Click on the
up and down arrows or press the up and down keys on your
keyboard.
Creating Scrolling Text
Before we start, please
download the partial source below. Don't worry, the partial
source will not have the key elements to make it
work...you'll do that with the information found below.
Click here to
download the source.
First, open the file
scroll_partial.fla you just downloaded in Flash. You
will see the basic structure for a text scroll animation.
You will need to define
the text area in which all the information will be
contained in. Click on the first frame of the layer marked
"text". Once you have clicked on that frame, make sure the
Text panel is displayed. Click on the tab marked "Text
Options" From the first drop-down menu, select the command
for "Dynamic Text".
Once you have selected
"Dynamic Text", go to the second drop down menu. Select
the command for "Multiline". The final step is to name the
variable. Enter the variable
scrollableText. Make
sure the box for "Word wrap" is checked. Your Text
(Options) panel should look like the following image.
Text field
should now be completed. Before we continue on to the next
steps, you may need to adjust the fonts. Click on the tab
marked "Character" and modify the font, font size, and
font color. Even though there is no text in the text box,
the changes will remain. Make sure you have the text box
selected before changing font properties.
Now that the
text field has been completed, we will begin to add the
ActionScript code to the two buttons. You will need to copy
the code that I list and paste it into Flash.
Select the up arrow with your mouse pointer. Right
click on it and choose the command for "Actions". Make
sure you are in Expert Mode. Click on the small arrow
pointed right (on the top right of the Object Actions
window) and select the command for Expert Mode. You may
also press Ctrl + E. Copy and paste the following code
into Flash.
on (press, release, keyPress "<Up>") {
currentScroll = scrollableText.scroll;
if (Number(currentScroll)>1) {
scrollableText.scroll = currentScroll-1;
}
}
Now, you will need to add some code to the down arrow.
Right click on the down arrow and choose the command for
Actions. Make sure you are in Expert mode from the Actions
window. Copy and paste the following code.
on (press, release, keyPress "<Down>") {
currentScroll = scrollableText.scroll;
if (Number(currentScroll)<Number(scrollableText.maxscroll)) {
scrollableText.scroll = Number(currentScroll)+1;
}
}
We have completed the second
major portion of adding the code to the down and up arrows.
Now comes the task of creating a Variable and assigning the
text to it.
Select the first frame in the layer marked "action".
Choose the command for Actions once you right click on
that frame. From the Actions window, you will need to be
in Normal Editing mode instead of Expert. Make sure you
are in Normal mode by either pressing the small right
arrow or pressing the keys Ctrl + N.
Click on the button for Action and choose the command
"set variable". Your Actions window will now have two
boxes in which you can type information in. For the
variable, we will use the name we gave the text box:
scrollableText
For the box marked "Value", you type in the text that
will scroll. You may want to type in a lot of words to
make sure your scroll box works well. For example I wrote
a random sentence into the value field. Your Actions
window might look like the following image.
You are done with creating
the text scroll animation. Close all the action windows,
save the file, and preview it. The animation will scroll
perfectly. If it does not, make sure that you named the
variable
scrollableText
for both the text field and the variable name. For the final
source code, please
Click Here
For another
version of this FLA file, visit Colin Moock's site. He has
one of the best Flash programming sites on the web, and you
can check out his version of the text scroller that I
referred to by clicking on the following link:
Basic Text
Scroller by Colin Moock
Got a question or just want to chat? Comment below or drop by our forums (they are actually the same thing!) where a bunch of the friendliest people you'll ever run into will be happy to help you out!
When Kirupa isn’t busy writing about himself in 3rd person, he is practicing social distancing…even on his Twitter, Facebook, and LinkedIn profiles.
Hit Subscribe to get cool tips, tricks, selfies, and more personally hand-delivered to your inbox.
This is a companion discussion topic for the original entry at https://www.kirupa.com/developer/flash5/scrolltext.htm
