H  1  2  3  4.1  4.2  4.3  5  6  7  8  9 

Hands-On: Flash MX 2004 the Basics

Exercise 5: Using Dynamic Scrolling Text Blocks

  1. Open the file at the bottom called dynamicScrollText.fla(This page is intentionally colored gray because the buttons are white, so don’t fret.)
  2. Change the name of Layer 1 to Text.
  3. On the Stage draw a text area box approximately 250px by 200px.
  4. Change the text style to Dynamic Text and in the Instance Name box directly below type the name myText.

    Properties Inspector for Dynamic Text.
  5. Selecting Scrollable text from the selection. Change the line field to Multiple.
  6. With the Arrow selection tool, click inside of the text area box you have on the Stage, right-button click and choose Scrollable.
  7. Copy a large selection of a .TXT file to paste inside of the text area box. (Note: if your box stretched to accommodate your pasted text, you forgot to turn the text area box to scrollable, in step 4.)
  8. In the Timeline create a new layer above the text layer and call it buttons. Click in the first frame of this button layer.
  9. From the Library [F11] attached to this practice file is one Down Button, drag it to the Stage and place it at the bottom right of the text area box.
  10. Click once on the new button and open the Actions panel [F9]. Choose the following steps: Click the Plus Mark + and then select
    Global Functions > Movie Clip Control > double-click on and then choose Release

    Viewing the Actions from the Actions panel.
  11. Click to the right of the curly bracket} in the code area and then hit the [Enter] key.
  12. Choose the following steps:
    Click the Plus Mark + and then select
    Built-in Classes > Movie > TextField > Properties > scroll

    Another view of the Actions from the Actions panel.The on release action code from the Actions panel.
  13. To the right of the word scroll hit the [Space Bar] and type a Plus Sign + and then an Equals Sign = hit the [Space Bar] again and then type a 1 and a semi-colon ;
    This bit of code tells the button to stay where it is on the screen but every time you hit the down button scroll down one line of text. If you wished to scroll more than one line at a time, type a different number, such as 5, which would scroll 5 lines for each click of the button.
  14. Back on the Stage, hold down the [Shift] key and the [Alt] key together, and then drag a copy of the Down Button with it’s ActionScript already made to the top of the text area box.
  15. Click off the button anywhere on the Stage (in case both are still selected), and then click back on just the Button placed at the top. Choose Modify > Transform > Flip Vertical to turn the arrow facing upwards.
  16. While still on the new Up button, hit [F9] to open the Actions panel, notice that the ActionScript is still there, but you have to change only one thing, the Plus Sign + now needs to be a Minus Sign – so the text can scroll back up. That’s it! If you project looks like the one shown below, you did it right. The red arrow is showing because I was pressing it as I took the screen shot.

    17. Screen shot of the finished Web page scroll text.

You can download these two files to create this Hands-On Exercise:

http://profal2.com/cis127/pdf/assets/basicHTML/placeholder.txt

http://profal2.com/cis127/pdf/assets/flash/dynamicScrollText.fla

Back to Top