Applying
CSS to Externally Loaded Text
      by Snehal Trivedi : 20 February 2004

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


 

 




SUPPORTERS:

kirupa.com's fast and reliable hosting provided by Media Temple.