Flash CS3 - Dynamic Scrolling Text w/external .txt file solution

When I purchased Web Professional CS3 I started working on a clients project which included a dynamic scrolling text box. Since I didn't have the time to learn Action Script 3.0 yet, I created my movie using Action Script 2.0 which I am familar with. Keep in mind I have created hundreds of these dynamic scrolling text boxes in Flash MX 2004 sucessfully in the past.

Well, to my surprise I found that my app didn't work right, so I double checked everything and created new movies several times, to no avail.

What was happening was that I could get my dynamic text box to work with no problem using an external .txt file, but when I add the UIScrollBar Component the text would dissapear and only the Scroll Bar outline was visable. So I tried different settings within my property settings at first. I found that I could get the scroll bar to work and view my external text (with HTML formatting code visable) by turning off the Render as HTML property in the properties panel of my text area. I thought this to be very strange so I did some research to find how to fix this. I found very little help for this online and became frustrated. So this tutorial is for those having the same problems and need help fixing it without loosing any hair over it.

OK, So lets get started, below is the dynamic scrolling text app we are going to make. The app we are making will not have the images or color in the background, however feel free to add images and color to yours.

Before you dive into the Flash section let's create our text file.

Open Note Pad by going Start > All programs > Accessories > Note Pad. Now type or copy the code below and save it as events.txt in the same directory where you will put your .swf file;

eventsText=<font face="Verdana" size="11" color="#f3c300"><b>6 May Tue</b> </font> 
Community Financial Awareness Seminars: 4pm to 5:30pm and 6pm to 7:30pm<br />
<font face="Verdana" size="11" color="#f3c300"><b>9 May Fri</b></font> 
“Talent Show” 8pm<br />
<font face="Verdana" size="11" color="#f3c300"><b>10 May Sat</b></font> 
Children’s Crafts “Mother’s Day Crafts” 2pm to 4pm<br />
<font face="Verdana" size="11" color="#f3c300"><b>16 May Fri</b></font> 
Karaoke 8pm<br />
<font face="Verdana" size="11" color="#f3c300"><b>17 May Sat</b></font> 
Jazz Over Coffee 6pm to 9pm<br />
<font face="Verdana" size="11" color="#f3c300"><b>24 May Sat</b></font> 
Poetry and Spoken Word 8:00pm<br />
<font face="Verdana" size="11" color="#f3c300"><b>31 May Sat</b></font> 
Karaoke 8:00 pm<br />
<br /></font>

Close Note Pad.

Now open Flash CS3

1. Create a new Action Script 2.0 Document 550px X 400px and save it as any name you like. I named mine events.fla.

2. Grab yout text tool by pressing (T) and in the properties box choose Dynamic Text from the drop down box.

3. In Layer 1 Draw a text box on the stage and make it 318 X 372 and align it to the center of your stage. Give it an Instance Name of "evText_txt" (without the quotation marks) and choose Multiline then turn off the render as HTML feature (you will see why further in the tutorial), type "eventsText" (without the quotation marks) in the Var: box. Make your font selection, size 12 and color black.

4. Open the Components Panel (Window > Components or CTRL+F7), Expand User Interface and find the UIScrollBar Component. Drag it onto the stage inside your text box and drop it on the right hand edge. The Scroll Bar will snap to the text box and automatically resize itself to your text box vertical dimension. The Scroll Bar should also get the target Instance Name from your text box. To check this click on the Scroll Bar that is on the stage and in the properties panel click parameters and in the _targetInstanceName box you should see evText_txt. If not enter it.

5. Now Select your text box and your scroll bar and press F8 to convert them into a symbol. This will open the Create a new Symbol Dialog box. Choose Movie Clip and name it events_mc and click OK.

6. Now you should see this on your stage.


Click to enlarge

To purchase and download the entire tutorial for $5.00 click the Buy Now button below.