With that out of the way we'll create our flash movie.
Open a new movie (.fla) and drag an instance of the TextArea component from the components panel on to the main stage, resize it to about 200*300 pixels
and give it an instance name of "myText". By default the wordwrap property should be set to true, whilst the html and multiline properies should be set
to false. We'll use code to ensure that all Boolean values are set to be true. We are also going to set condenseWhite to be true. This is explained
in detail on the following page. Paste this code in to frame1 of your main timeline:
myText.html = true;
myText.wordWrap = true;
myText.multiline = true;
myText.label.condenseWhite=true;
Before we load in our xml file we want to load our style sheet and associate it with the TextArea. As in the last tutorial, we're going to create an
instance of the StyleSheet class, load our stylesheet using the 'load' method and then associate it with our text field - in this case the TextArea
component. Add this code to frame1 next:
kungFuStyle = new TextField.StyleSheet();
kungFuStyle.load("kungfu.css");
myText.styleSheet = kungFuStyle;
An important thing to note is that StyleSheet is a class whilst styleSheet (first 's' is lowercase) is a property, so don't get them confused!
We haven't created our stylesheet yet, and I want to demonstrate a few things before we do, so for the time being we're going to comment out the code
we just wrote, and make it inoperable. To comment out a block of code we can surround it with /* and */ so for the time being this is what we'll do. Our stylesheet
code should now look like this:
/*kungFuStyle = new TextField.StyleSheet();
kungFuStyle.load("kungfu.css");
myText.styleSheet = kungFuStyle;*/
We will uncomment the code in a short while when we create our stylesheet.
We've already created our XML though, and so the next step is to load it into the TextArea component which is what we'll do next. The code we require is
below. Add it to frame one and then we'll take a quick look at what it does.
kungFuContent = new XML();
kungFuContent.ignoreWhite = true;
kungFuContent.onLoad = function(success)
{
if(success)
{
myText.text = kungFuContent;
}
}
kungFuContent.load("kungfu.xml");
It's very similar to our stylesheet code. First we create an instance of the XML object, which we've called "kungFuContent". Then we alter one of its
properties called ignoreWhite and set it to true - I'll explain a little more about it in a moment. Next we declare the onLoad method, and set it up to
check for a successful load and assign the XML object to out TextArea component. Finally we use the XML object's load method to load in our kungfu.xml
document which we created earlier.
Update Note: the StyleSheet class also has an onLoad method, and its use is identical to the XML onLoad. I have not used it in this tutorial,
but, especially with large stylesheets, to ensure your stylesheet has fully loaded before you add text you should utilise it. You would then only apply the text to the
textfield/TextArea after the onLoad has run. For example:
kungFuStyle = new TextField.StyleSheet();
kungFuStyle.onLoad(success)
{
if(success)
{
myText.styleSheet = kungFuStyle;
loadTxt();// some func to load and apply text
}
}
|
