Using CSS in AS3
By Blue_Chi | Flash CS4 | ActionScript 3.0 | Beginner | Page 1, 2In this section we are going to write the ActionScript that will load our CSS file and use it to format some text loaded externally as well. This will be done in the following steps:
- Loading the CSS file.
- Loading the text file.
- Creating the text field and applying the style sheet.
Loading the CSS File
Loading our CSS file will require using the URLLoader Class. This class is responsible for loading any textual data such as text data, CSS or even XML.
In order to start using this class we need to create an instance of it and store it in a variable. You can do that this way:
Now in order to load our CSS file we simply use the .load() method of this class and pass the URL to it as an instance of the URLRequest() class:
css_loader.load(new URLRequest("myStyle.css"));
This should load our CSS file, but in order to properly use the loaded data we need to use an event listener to take care of this data once it's loaded. We are going to register our instance of the URLLoader with the Event.COMPLETE to parse our CSS file once it's loaded. We are also going to create an event listener function which will carry the task we assign to it once the data is loaded.
css_loader.load(new URLRequest("myStyle.css"));
css_loader.addEventListener(Event.COMPLETE, onCSSComplete);
function onCSSComplete(e:Event):void {
}
Once our CSS is loaded we need to store it as a proper parsed instance of the StyleSheet Class. The first step for doing this requires creating an instance of the StyleSheet Class. This has to be done at the beginning of our code outside any event listener function in order for the variable to remain as a permenant variable. Create this instance at the top of your code:
var my_css:StyleSheet = new StyleSheet();
css_loader.load(new URLRequest("myStyle.css"));
css_loader.addEventListener(Event.COMPLETE, onCSSComplete);
function onCSSComplete(e:Event):void {
}
We now can simply parse our CSS data and store it in this object through our event listener function:
var my_css:StyleSheet = new StyleSheet();
css_loader.load(new URLRequest("myStyle.css"));
css_loader.addEventListener(Event.COMPLETE, onCSSComplete);
function onCSSComplete(e:Event):void {
my_css.parseCSS(e.target.data);
}
This should load our CSS file. You can try to test your movie to check that no errors appear at this stage. You will not be able to see anything on the screen though as no visual objects are added yet.
Loading the Text File
Loading our external text file will involve a process very similar to that for loading the CSS file. We will have to create an instance of the URLLoader Class, then use its .load() method to load the actual text file. Lets do that quickly:
var txt_loader:URLLoader = new URLLoader();
var my_css:StyleSheet = new StyleSheet();
css_loader.load(new URLRequest("myStyle.css"));
css_loader.addEventListener(Event.COMPLETE, onCSSComplete);
function onCSSComplete(e:Event):void {
my_css.parseCSS(e.target.data);
txt_loader.load(new URLRequest("myText.txt"));
}
Notice that we called our .load() method from within the onCSSComplete() event listener function. This was done so that the text file starts loading only once the CSS finishes loading. We will learn more about why this is necessary later.
Again, we will not be able to do anything with our loaded text data without using an event listener. The task of this event listener would be to retrieve the text data and deal with it. In order to do this we need to register for the Event.COMPLETE event and create an event listener function to go with it:
var txt_loader:URLLoader = new URLLoader();
var my_css:StyleSheet = new StyleSheet();
css_loader.load(new URLRequest("myStyle.css"));
css_loader.addEventListener(Event.COMPLETE, onCSSComplete);
function onCSSComplete(e:Event):void {
my_css.parseCSS(e.target.data);
txt_loader.load(new URLRequest("myText.txt"));
}
txt_loader.addEventListener(Event.COMPLETE, onTxtComplete);
function onTxtComplete(e:Event):void {
}
Before we start dealing with the textual data, it would be good to have our text field, which will be used to display the text at the end, ready now. To do this we have to create an instance of it at the beginning of our code like we did with the other classes:
var txt_loader:URLLoader = new URLLoader();
var my_css:StyleSheet = new StyleSheet();
var my_txt:TextField = new TextField();
css_loader.load(new URLRequest("myStyle.css"));
css_loader.addEventListener(Event.COMPLETE, onCSSComplete);
function onCSSComplete(e:Event):void {
my_css.parseCSS(e.target.data);
txt_loader.load(new URLRequest("myText.txt"));
}
txt_loader.addEventListener(Event.COMPLETE, onTxtComplete);
function onTxtComplete(e:Event):void {
}
In order for our StyleSheet to work with our text field we must apply it to the text field before we put any text in it. This means the the first thing we have to do now is use the styleSheet property of the text field to link it to our CSS data. This should be done from within the .onTxtComplete event listener:
var txt_loader:URLLoader = new URLLoader();
var my_css:StyleSheet = new StyleSheet();
var my_txt:TextField = new TextField();
css_loader.load(new URLRequest("myStyle.css"));
css_loader.addEventListener(Event.COMPLETE, onCSSComplete);
function onCSSComplete(e:Event):void {
my_css.parseCSS(e.target.data);
txt_loader.load(new URLRequest("myText.txt"));
}
txt_loader.addEventListener(Event.COMPLETE, onTxtComplete);
function onTxtComplete(e:Event):void {
my_txt.styleSheet=my_css;
}
Our text field is now ready to receive our text data and will format it for us in accordance with the style we attached. To attach the text you can simply use the .htmlText property:
var txt_loader:URLLoader = new URLLoader();
var my_css:StyleSheet = new StyleSheet();
var my_txt:TextField = new TextField();
css_loader.load(new URLRequest("myStyle.css"));
css_loader.addEventListener(Event.COMPLETE, onCSSComplete);
function onCSSComplete(e:Event):void {
my_css.parseCSS(e.target.data);
txt_loader.load(new URLRequest("myText.txt"));
}
txt_loader.addEventListener(Event.COMPLETE, onTxtComplete);
function onTxtComplete(e:Event):void {
my_txt.styleSheet=my_css;
my_txt.htmlText=e.target.data;
}
Now in order to display your text field on the screen you simply have to add it to the Display List using the .addChild() method:
var txt_loader:URLLoader = new URLLoader();
var my_css:StyleSheet = new StyleSheet();
var my_txt:TextField = new TextField();
css_loader.load(new URLRequest("myStyle.css"));
css_loader.addEventListener(Event.COMPLETE, onCSSComplete);
function onCSSComplete(e:Event):void {
my_css.parseCSS(e.target.data);
txt_loader.load(new URLRequest("myText.txt"));
}
txt_loader.addEventListener(Event.COMPLETE, onTxtComplete);
function onTxtComplete(e:Event):void {
my_txt.styleSheet=my_css;
my_txt.htmlText=e.target.data;
addChild(my_txt);
}
That should enable the basic functionality of this project. You can test your movie (Ctrl+Enter) to see your text formatted on the stage. However, the text field might look a bit funny though because we did not configure the text field.
To do this simply configure the following properties of your text field to have it look better:
var txt_loader:URLLoader = new URLLoader();
var my_css:StyleSheet = new StyleSheet();
var my_txt:TextField = new TextField();
css_loader.load(new URLRequest("myStyle.css"));
css_loader.addEventListener(Event.COMPLETE, onCSSComplete);
function onCSSComplete(e:Event):void {
my_css.parseCSS(e.target.data);
txt_loader.load(new URLRequest("myText.txt"));
}
txt_loader.addEventListener(Event.COMPLETE, onTxtComplete);
function onTxtComplete(e:Event):void {
my_txt.styleSheet=my_css;
my_txt.htmlText=e.target.data;
addChild(my_txt);
my_txt.width=300;
my_txt.autoSize=TextFieldAutoSize.LEFT;
my_txt.wordWrap=true;
}
That should do it. Test your movie now to see it in action!
This concludes our tutorial, I hope that you learnt something new from it. If you have any questions or comments feel free to post them at the Republic of Code Forum.
- End of Tutorial.