Now that we have got everything all set up, we need to load that CSS file into Flash so that it can make use of the styles. This is probably the first place where we are doing any kind of external loading. So let's see what it is going to take to set that up. I am going to go down to the bottom of my ActionScript, so we got a little space to work, add a couple of lines there and we are going to have a few other classes involved besides just the CSS class. Specifically, we need a loader class to do the loading for us and we need a URLRequest class in order to specify what file we are trying to load.
So I am going to set those ones up first. I will use my 'var' keyword, I am going to name my object, CSSLoader and it is going to be a URLLoader type of object. Now that object specifically is set up to load anything I want to from my server, including our CSS file. We are going to create this object the same way we have everything else, I am going to set it equal to the 'new' keyword and we are going to call the URLLoader constructor.
Now we need a URLRequest object. This object is going to tell us where the file is and any URL needs to be formatted in this way. So we will start again with our 'var' keyword, we will name our object, cssRequest and we will type it as a URLRequest object. We will need the 'new' keyword and our constructor and for this constructor, we actually provide it with the URL we are looking for. I will put this in quotes and it is called "oceanRowStyle.css". That was the CSS file we were just looking at.
Now it is in the same folder as our FLA file, so I don't have to specify any path but if it was in another folder on our server, we'd have to specify the exact path over to that file. Let me close that line off with a semicolon and now we can start up some work. What I am going to do is take our cssLoader and we are going to call the load method in order to actually go out and get this file.
Now one thing you need to make sure you do whenever you are working with external files is wait until the loading is finished before you try to start using it. We don't want to try working with a half of a style file. So let's set both of those up next. The first thing I will do is go ahead and set up an addEventListener for our cssLoader. We will set up cssLoader and we call the addEventListener method and this time, we are going to be looking for loader type events. So we are not working with mouse clicks or mouse ups or mouse downs; we are looking for an event called COMPLETE.
This event is broadcast when the loading is finished and as we just said, we want to make sure that this is finished before we start working with it. Now just like other addEventListeners, we need to path this COMPLETE event off to some handler function. So I am going to create the name of the function right here, I am going to call it CSS loaded. Now, we still have to make that cssLoaded function. The last thing I want to do is actually start the load process since we want that CSS as soon as possible.
So once again, I am going to call my cssLoader object and we are going to call the load method. The thing we are going to load is our cssRequest. So there are quite a few pieces here but I hope you can see how it all works together. Our request stores the file we are looking for, are loader does the loading and when it finishes loading, we are going to be passing it off to the cssLoaded function. Let's go ahead and build that next. I'll go down a couple of lines, we will start with our 'function' keyword and this is going to be called cssLoaded, we have already named it and it is going to be an event handler. So I'll use my evt variable and we will class that as an Event object. I am going to type my function as void since we are not going to be returning any values and we will need an open and close brace just like normal. Inside here, we can actually deal with that CSS file, since by the time we make it to this function; it has been loaded into Flash.
Now, we finally get to work with the CSS so let's start off by making our CSS object itself. I'll use my 'var' keyword and I will give it a name, I am just going to call it CSS. This is a StyleSheet object and we are just going to use the 'new' keyword and call the constructor and we will have it to created as made. Now, just like other elements we have worked with, in creating this object, we have created an empty style sheet and we need to fill it up with, of course, the styles that we just loaded.
This is actually easy to do because our StyleSheet class has functions built into it to read the text and convert it into usable styles. Namely, we are going to use the CSS parse method. I will take my CSS object we just made, we will call parseCSS and parse basically means read and interpret. Now, we just need to specify where that data is going to be. We will convert that data from an event object by calling the URLLoader conversion function and specifying our data through the event that it was pass to the CSSLoaded function that would be evt.target. Once we have this data reformatted, we simply access it by using dot syntax and accessing the data property.
I will close up the parseCSS method call and I need a semicolon at the end of the line. So we have created our new style sheet, we have loaded the date from the load operation into that style sheet and now what is really left is to apply the style sheet. I am going to take the tContent text field and each text field has its own style sheet property. So we are going to access that and set it equal to the CSS styleSheet that we have just created. That was a lot.
Now the very last thing I am going to do is make sure that we don't display the content on the screen until we have loaded the style sheet, interpreted the styles and applied them to our text field. So let me just go up here a little bit and figure out two things. We have got one line in here that is applying our tFormatPage TextFormat object and I'd basically like to replace that. We are not going to be using that TextFormat object anymore so I am going to comment that line out. We are going to be using our CSS file instead and I don't really want to assign the page content until after everything is dropped in.
So let me copy this line here and I will just comment it out so that we can keep it there for reference. I will go down below and add that to my cssLoaded function right after we have assigned the style sheet. Now we have made a lot of changes, let's see if it all worked. I am going to test my movie and there we can see our style sheet has been applied properly. I have got the h1 style, the h2 style, our paragraph style and you can even see our highlight style has been applied as well. Now it looks like I'll probably want to go back and make a few adjustments to the sizes of the fonts but I will leave it up to you to fiddle with it and get it looking exactly how you would like it for your project. Now let's just close this test window up and take a look at what we have done.
We have looked at three distinct ways to style our text fields. We started off with HTML text which allows us to apply standard HTML tags to our text and have them rendered properly in Flash. We have looked at TextFormat objects which allow us to set up a Flash style right inside of our ActionScript and apply it to whatever field we want and lastly, we have seen how to take an external CSS file, loaded into Flash and apply to a text field. You can use any one of these or a combination of them all inside your files, just so you can get the styles that you are looking for.
Transcription by:
Scribe4you Transcription Services