logo
g Text Version
Beauty & Self
Books & Music
Career
Computers
Education
Family
Food & Wine
Health & Fitness
Hobbies & Crafts
Home & Garden
Money
News & Politics
Relationships
Religion & Spirituality
Sports
Travel & Culture
TV & Movies

dailyclick
Bored? Games!
Nutrition
Postcards
Take a Quiz
Rate My Photo

new
European Travel
Action Movies
Bible Basics
Houseplants
Romance Movies
Creativity
Family Travel


dailyclick
All times in EST

Full Schedule
g
g Flash and Animation Site

BellaOnline's Flash and Animation Editor

g

How To Load An External Text File Into Flash For Dynamic Webpages


In the last few tutorials you placed Keyframes along the Timeline to designate the individual webpages of your Flash website and then added the behaviors to the menu buttons that will carry you from page to page on your site. We are now ready to add the text to the individual webpages. 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 MacromediaR website.

http://www.macromedia.com/support/flash/downloads.html

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.

The text that follows the equal sign can be plain text or HTML. However, Flash cannot recognize all of the HTML tags. Here is the short list of tags that you can use in your external files. You must remember to use quotation marks around the attribute values. (color="#000000")

<a href="http://"> </a>
<a href="mailto:"> </a>
<img src="name_of_image.jpg"> Must be jpg format.
<b> </b>
<br>
<font> </font> (including the face, color and size attributes)
<i> </i>
<li> </li>
<p> </p>
<span> </span>
<u> </u>

Note: The anchor <a> tag is treated differently in Flash. Although the link will work as usual, it will not be underlined as it is in the web browser. In order to underline the link, you will need to use the <u> </u> tags.

<a href="..."><u>Click here</u></a>

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.

Macromedia Flash MX 2004 Workspace



Add How+To+Load+An+External+Text+File+Into+Flash+For+Dynamic+Webpages to Twitter Add How+To+Load+An+External+Text+File+Into+Flash+For+Dynamic+Webpages to Facebook Add How+To+Load+An+External+Text+File+Into+Flash+For+Dynamic+Webpages to MySpace Add How+To+Load+An+External+Text+File+Into+Flash+For+Dynamic+Webpages to Del.icio.us Digg How+To+Load+An+External+Text+File+Into+Flash+For+Dynamic+Webpages Add How+To+Load+An+External+Text+File+Into+Flash+For+Dynamic+Webpages to Yahoo My Web Add How+To+Load+An+External+Text+File+Into+Flash+For+Dynamic+Webpages to Google Bookmarks Add How+To+Load+An+External+Text+File+Into+Flash+For+Dynamic+Webpages to Stumbleupon Add How+To+Load+An+External+Text+File+Into+Flash+For+Dynamic+Webpages to Reddit



 



RSS | Related Articles | Editor's Picks Articles | Top Ten Articles | Previous Features | Site Map


For FREE email updates, subscribe to the Flash and Animation Newsletter


Past Issues


print
Printer Friendly
bookmark
Bookmark
tell friend
Tell a Friend
forum
Forum
email
Email Editor


Content copyright © 2014 by Diane Cipollo. All rights reserved.
This content was written by Diane Cipollo. If you wish to use this content in any manner, you need written permission. Contact Diane Cipollo for details.

g


g features
Animating Color of Text in Motion 5

Animating Color of Shapes in Motion 5

Motion Workspace - Checkbox, Dials and More

Archives | Site Map

forum
Forum
email
Contact

Past Issues
memberscenter


vote
Poetry
Daily
Weekly
Monthly
Less than Monthly



BellaOnline on Facebook
g


| About BellaOnline | Privacy Policy | Advertising | Become an Editor |
Website copyright © 2014 Minerva WebWorks LLC. All rights reserved.


BellaOnline Editor