Adobe Flash Professional is used to create content for the Adobe Engagement Platform (such as web applications, games and movies, and content for mobile phones and other embedded devices). The Flash Player, developed and distributed by Adobe Systems is a client application available in most common web browsers. It features support for vector and raster graphics, a scripting language called ActionScript and bi-directional streaming of audio and video.
One nice thing about Flash MX 2004 is that you can load (or import) external text/HTML files into a Flash movie. This makes maintaining your site easier. All you need to do is update the external files and your Flash site will reflect the changes.
How do we do this? We will use a dynamic text block to display the external text. For those pages that contain more text than can fit on a page, we will add a scrollbar. The scrollbar component is not included in the original version of Flash MX 2004. You will need to download the updater from the Macromedia website.
After you have downloaded the updater, you are ready to work on the Contact Us webpage for your site. By necessity this is a long tutorial, so hang in there.
Step 1. Add Dynamic Text Block.
The first thing we need to do for the Contact Us webpage is to add a dynamic text block to the Stage. Click on the Keyframe for the Contact section (frame 10) on the Content layer in the Timeline. This will automatically select all the contents on the Content layer. Using the Selection Tool, click on an empty area of the Stage to deselect all contents.
Now click on the Text Tool icon and then click and drag on the Stage to draw the dynamic text block. If you will need a scrollbar, set the width of the text block to allow a space for the scrollbar at the right side of the text block. Set the following values in the Property Inspector.
Text Type: Dynamic Text
Instance Name: Contact_Text
Font: Arial
Font Size: 14
Text Fill Color: Black (#000000)
Bold Style
Align Left
Line Type: Multiline
<> Render Text as HTML
Step 2. Document Properties.
We need to make a small change to the document properties settings. Use the Selection Tool to click on an empty area of the Stage to deselect the text block. This will open the Property Inspector for the Document. Click on the Size/Document Properties button to open the Document Properties dialog box. For the Match section, click on the Contents button and then click OK.
Step 3. LoadVars ActionScript.
Now we will add the ActionScript that will import the external text file. Click on the Keyframe for the Contact webpage (frame 10) on the Actions layer in the Timeline. At this point, the only code in the Actions Panel should be the stop(); code. Starting on the next line, you will want to add the code below.
Ext_text = new LoadVars();
Ext_text.onLoad = addText;
Ext_text.load("ContactUs.txt");
function addText() {
Contact_Text.htmlText = this.ContactUs;
}
Step 4. Add a UIScrollBar.
If you will need a scrollbar for this text block, it's easy to add one. Go to the Components Panel and expand the UI Components list. Click on the icon for the UIScrollBar and drag it to the right side of the inside of the text block. When you release your mouse button, the scrollbar will automatically resize to fit the text block.
Step 5. Save the changes.
You can now save the new additions to your movie. Click File > Save.
Step 6. The other webpages.
Except for the Portfolio webpage, we will repeat the steps above for all of the other webpages. Remember to begin by clicking on the Keyframe that corresponds to each webpage and you will need to make just a few changes each time. When you have completed each webpage, save the changes your made.
We set the Instance Name in the Property Inspector to Contact_Text. This is how Flash identifies the text block for the Contact Us webpage. For the other webpages set the Instance Name to the following.
Artist_Text
Products_Text
Weblog_Text
The third line of code in the ActionScript tells Flash which text file to import. Of course, these files should be in the same folder as your Flash SWF website file. For the Contact Us page, we named the external text file ContactUs.txt. (Ext_text.load("ContactUs.txt");) In the ActionScript code for the other webpages, replace that line of code with the following.
For the Artist webpage use this code-Ext_text.load("Artist.txt");
For the Products webpage use this code-Ext_text.load("Products.txt");
For the Weblog webpage use this code-Ext_text.load("Weblog.txt");
The fifth line of code tells Flash to treat the text in the dynamic text block as HTML (Contact_Text.htmlText) and also assigns the imported text to a variable (ContactUs). For the other webpages, make these changes.
Artist_Text.htmlText = this.Artist;
Products_Text.htmlText = this.Products;
Weblog_Text.htmlText = this.Weblog;
Step 7. The external text files.
The name of the text files you will import into your Flash movie should match the names used in the ActionScript.
Name each of the external files as follows.
ContactUs.txt
Artist.txt
Products.txt
Weblog.txt
The first thing in each imported file should be the name of the variable used in the ActionScript code. For the Contact Us page, we named the variable ContactUs. You will follow the variable name with an equal sign and then the text you wish to display on the webpage. So inside the ContactUs.txt file should look like this.
ContactUs = This will be the text that will show on the webpage.
For the other webpages you would change ContactUs to the following.
Artist = This will be the text that will show on the webpage.
Products = This will be the text that will show on the webpage.
Weblog = This will be the text that will show on the webpage.
Step 8. Compress the external file.
The last step in creating the external text file will be to use an HTML source compressor program to compress the file.
Step 9. Test the webpages.
Click on Frame 1 on the Timeline Header to set the Playhead back to the beginning. Now click the Ctrl and Enter keys on your computer keyboard to open a preview of your website for testing. Click on each button in the menu and verify that the correct contents is displayed.
Step 10. Save Your Flash Movie.
You can now save the new additions to your movie. Click File > Save.
