Tutorials Books Videos Forums

Change the theme! Search!
Rambo ftw!

Customize Theme


Color

Background


Done

Applying CSS to Externally Loaded Text

by kirupa   | filed under Flash and ActionScript

So, You want to apply CSS Styles to the text that you load from an external file? Well its not difficult at all, just consider, I was able to do it!!

First, please follow Kirupa's great tutorial on Using CSS Styles in Flash MX 2004 and when you finish, come back, this tutorial will start at the end of that tutorial. 

Lets begin..

  1. We are going to modify the Actionscript; delete the following line:
     

    var quick = <br><p class='one'>The quick Kirupa

     

  2. Replace the text
     

    output.text = quick;

    with..
     

    myLoadVar = new LoadVars ();
    myLoadVar.load("kirupa.txt")
    myLoadVar.onLoad = function (success){
    if (success == true) {
    output.variable = "kirupa"
    output.htmlText=myLoadVar.kirupa;
    }
    }
  1. Save the current Flash file with any name you want, in any directory you want.

  1. Create a new text file copy and paste the text in the box below; then save it as kirupa.txt and be sure to save it in the same folder as the Flash file you save above.
     

    kirupa=<p class='one'>The quick Kirupa jumps over the lazy dog.</p><br><p class='two'>The quick Kirupa jumps over the lazy dog.</p><br><p class='three'>The quick Kirupa jumps over the lazy dog.</p><br><p class='four'>The quick Kirupa jumps over the lazy dog.</p>
     
     
  1. Go to File | Publish Preview | HTML and you should see your animation in your browser. It should look just like the animation in Kirupa's tutorial.


Code Explanation
The following section will give you some brief information about the code and why portions of it were modified the way they were.


Delete var quick = "<br><p class='one'>The quick Kirup...";

We removed that line because our text will come from the kirupa.txt file that we created.


Delete output.text = quick;

We removed/replaced this line beacuse our output will not be the variable quick rather our loaded text file.


myLoadVar = new LoadVars ();
myLoadVar.load("kirupa.txt")

Create a new "LoadVars" object and load the text from our kirupa.txt file.


myLoadVar.onLoad = function (success){
if (success == true) {
output.variable = "kirupa"


Test to make certain that our file loaded. If success then we assign the dynamic text with the instance name of "output" the variable "kirupa". It is simply good practice to do so. Also you can define the variable name in the properties panel, look for "var".


output.htmlText=myLoadVar.kirupa;

Here we assign the text loaded from our text file to the "output" instance of our dynamic text box.


I hope this was helpful. If you have any questions, please go over to the Forums and I am sure they can help you out.

Snehal Trivedi


 

 

Just a final word before we wrap up. What you've seen here is freshly baked content without added preservatives, artificial intelligence, ads, and algorithm-driven doodads. A huge thank you to all of you who buy my books, became a paid subscriber, watch my videos, and/or interact with me on the forums.

Your support keeps this site going! 😇

Kirupa's signature!

The KIRUPA Newsletter

Thought provoking content that lives at the intersection of design 🎨, development 🤖, and business 💰 - delivered weekly to over a bazillion subscribers!

SUBSCRIBE NOW

Creating engaging and entertaining content for designers and developers since 1998.

Follow:

:: Copyright KIRUPA 2026 //--