Loading External CSS Into Your Site

May 3rd 2008
5 Comments
respond
trackback

In this tutorial I will show you how to use CSS as a sort of text-editor for your flash content. We'll load in our text from our actionscript using a String, so all we'll have on the stage is our background. Take a look at the Finished Example

Download:

Starter File

Finished File

Step 1

Ok the starter file contains a CSS file and a Fla file with a background of a book, badly made in Photoshop by myself I might add. So open up the fla file, go to the Actions layer and Press F9 to open up the Actions Panel. The first thing we are going to do is create a String that will contain the text we want to be displayed on the site.

var pageContent:String = "<H1>Tutorial 3</H1>\n\n<P>Started a big tutorial today but got really really annoyed with it, the navigation part to be exact so decided to start this load CSS tutorial instead.</P>";

Notice the html tags inside the text string? This is picked up by our CSS file allowing us to edit it.

Step 2

Next we'll create a text container to hold our content, we'll do this by creating a Sprite called txtContainer. We position the txtContainer on the stage by giving it X and Y values. Finally we use the addChild method, this adds the txtContainer to the stage

var txtContainer:Sprite = new Sprite();

txtContainer.x = 50;

txtContainer.y = 100;

addChild(txtContainer);

Code Explained

Create a new sprite called textContainer, a sprite is basically a container.
The x position of the textContainer on the stage
the y position of the textContainer on the stage
the addChild method adds the text container to the stage

Step 3

Now we'll create a TextField to go inside the txtContainer we have just created. So we create a new TextField called myTxt and then add some simple properties.

var myTxt:TextField = new TextField();
myTxt.width = 300;
myTxt.wordWrap = true;
myTxt.autoSize =TextFieldAutoSize.LEFT;
txtContainer.addChild(myTxt);

Code Explained

New text field named myTxt
Gives it a width of 300px
Sets the wordWrap value to true meaning the text is word wrapped
The text is treated as left-justified text
Adds mytxt to the txtContainer

Step 4

Now we need to load our CSS, we do this by using a URLRequest.

var cssLoader:URLLoader = new URLLoader();
var cssRequest:URLRequest = new URLRequest("loadcss.css");
cssLoader.addEventListener(Event.COMPLETE, cssLoaderComplete);
cssLoader.load(cssRequest);

Code Explained

A new URLLoader called cssLoader
A new URL Request call cssRequest, and inside this request we have the link to our CSS file.
adds an event listener to our cssLoader(line1) that listens for when the event has completed. We'll give this the name cssLoaded.
This loads the the cssRequest file

Step 5

Finally we add our event handler for cssLoaderComplete(Step 4 line 3).

function cssLoaderComplete(evt:Event):void{
var css:StyleSheet = new StyleSheet();
css.parseCSS(URLLoader(evt.target).data);
myTxt.styleSheet = css;
myTxt.htmlText = pageContent;
}

Code Explained

cssLoaded function which is an Event object, we type void because we aren't returning any values
Creates a new stylesheet object.
This css parse method fills our stylesheet object with the css we have loaded.
This basically attaches our myTxt text field to our CSS content that we have loaded in.
Make sure the text doesn't load until our stylesheet has been loaded.

Conclusion

So thats it. Pretty simple when you look at it. Obviously you can add more text fields and more html tags inside the page content String so you can format more text, but this is just a basic overview of how it works. I hope it helps.

Tip: If you aren't sure what a line of code does (my explanations aren't the best) just highlight the word inside your actionscript panel and hit F1, and it will open up the help topic and give you a much better explanation of the code.

This post is tagged Actionscript 3, AS3, Flash CS3, Loading External CSS

Jobs

Flash Essential