xmlhtmlcss1.zip

Loading External XML formatted Content

This tutorial is ideally used in addition to my "CSS in Flash" tutorial and covers topics such as loading external XML-formatted text into Flash and using external CSS to display that text within the TextArea component. These are questions I've been seeing on the forums of late, and so I hope it will answer some of your questions.

First off, we're going to create some XML formatted data to bring in to our movie. Open up your favourite text editor and paste the follow text in to it:

<drunken>This is some drunken text</drunken>
<monkey>This is some monkey text</monkey>
<snake>This is some snake text</snake>
<dragon>This is some dragon text</dragon>

Our file above will work, but it's standard practice to enclose all our same-level tags (nodes) in a single root node, and so that's what we'll do. Amend the above code to look like this:

<kungfu>
 <drunken>This is some drunken text</drunken>
 <monkey>This is some monkey text</monkey>
 <snake>This is some snake text</snake>
 <dragon>This is some dragon text</dragon>
</kungfu>

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:

//init TextArea component
myText.html = true;
myText.wordWrap = true;
myText.multiline = true;
myText.label.condenseWhite=true;

//load css
kungFuStyle = new TextField.StyleSheet();
kungFuStyle.load("kungfu.css");
myText.styleSheet = kungFuStyle;

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'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.

//load in XML
kungFuContent = new XML();
kungFuContent.ignoreWhite = true;
kungFuContent.load("kungfu.xml");
kungFuContent.onLoad = function(success)
{
        if(success)
        {
                myText.text = kungFuContent;
        }
}

Save your fla in the same location as kungfu.xml and test your movie.
If all has gone well you should see something like this:

Now is a good time to talk about ignoreWhite and also the condenseWhite property which I alluded to earlier.

ignoreWhite excludes all white-space (linebreaks, carriage-returns, non-breaking spaces) from our XML when it is brought in to Flash (ie parsed). However, it is only the white-space inbetween the nodes, and nodes that contain nothing but white-space that are ignored. Any white-space withina text node, including leading or trailing whitespace, is preserved. You can see this for yourself by opening up the kungfu.xml file, and inserting a carriage-return (ie press the enter/return key) directly after an opening tag such as <snake>. Now save your ammended XML file and test the fla. When you test it you can see that the whitespace is included.

There is however a solution to this potential formatting problem. You can use condenseWhite to get rid of that unwanted whitespace within the node. For a TextField use: TextField_Instance.condenseWhite=true; and for a TextArea use: TextArea_Instance.label.condenseWhite=true;.
Many thanks to Christopher Watts and Rob Verhoef for the info and solution here =)

Okay, so our example isn't very useful at the moment. Our text is all bunched up. Now is a good time to create our CSS file and apply it to the TextArea.

I covered CSS to a reasonable level in my last tutorial, but there was one thing I omitted, and that was defining new tags. Last time when we created our styles we used predefined tags with 'classes'. We preceded our class names with a period, such as ".alert" and then we use them in conjunction with predefined tags such as span like this: <span class='alert'>some text</span>

To create a new tag we simply leave out the period. In the following CSS we will use a mixture of newly defined tags with names that correspond to our XML nodes, and throw in a few classes just to spice things up a little, so open up your favourite text editor and paste this style sheet into it.

drunken {
  color: #FF0000;
  font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
  font-size: 18px;
  font-weight: bold;
  display: inline;
}
monkey {
  color: #0000FF;
  font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
  font-size: 10px;
  font-weight: normal;
  display: inline;
}
.snake {
  color: #00FF00;
  font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
  font-size: 12px;
  font-weight: bold;
  display: inline;
}

Our stylesheet code is still commented out, so remove the comments from the beginning and end of the code block in the first frame of the fla and test the movie. With any luck it should look something like this:

Okay, it's looking a little better now but not perfect because the text is still bunched up. What's going on? It's due to this line in our css: display: inline;. Without it Flash defaults to "display: block", so I just wanted to show you the difference and make you aware of what it does. You may also have noticed that the "snake" text wasn't green. This is because our stylesheet defines snake as a class (.snake). Let's remedy one of these things right now. Rather than letting Flash default to "block", we will explicitly set the display properties for "drunken" and "monkey" to read display: block;. Also, let's add another new css definition for "dragon". Paste this code into kungfu.css and save the file:

dragon {
  color: #000000;
  font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
  font-size: 10px;
  font-weight: normal;
  display: inline;
}

<kungfu>
 <drunken>Although the drunken style moves often 
 appear harmless, they can be deadly against 
 even the most skilled opponents.</drunken>
 <monkey>Monkey style is deceptive and versatile. 
 It is generally meant for smaller size persons.</monkey>
 <snake>Snake style does not deal in humaneness, 
 it only deals with delivering 
 quick, maiming or killing strikes.</snake>
 <dragon>Dragon Style is a highly aggressive kung fu style, 
 relentlessly pressing against the opponent with 
 an unremitting chain of attack.</dragon>
</kungfu>

That's better. Just a one more tweak and then we're done (I was planning to cover adding images to text fields in this tutorial but I think that will have to wait for another day). Our final tweak is to the xml document, so open it up and change the "snake" tags to this:

<span class='snake'>Snake style does not deal in humaneness, 
it only deals with delivering quick, maiming or killing strikes.</span>

Our text about the snake style is now green, as specified by the snake class.
However, you should also note that the following text about "dragon" style is on the same line.
Your first thought will probably be that we need to change display: inline; to display: block;, but actually that doesn't appear to be the problem in this case; and nor does it appear to be connected with the order in which our newly defined tags and snake-class appear in our kungfu.css file

Whilst you may expect display: inline; to force a break, <span> is not designed to be a 'breaking' tag like the <div> or <p> tags and the result is that your content will not begin on a new line. You can swap the span tag for a paragraph tag if you do want to 'force' the new line, or alternatively don't use a class in situations like this, but instead use a newly created tag (ie as demonstrated with other tags in this tutorial such as "drunken" and "monkey")

Well, that's all for this tutorial. I'd like to thank Tom Schreck for his suggestions regarding the tag-break problem. I hope this tute has answered some of the questions I'm hearing on the forums.