Filed under Action Script

XML 파싱과 CSS 적용, TEXTAREA를 구현한 예제
컨텐츠 제작시  작막 처리 및 TEXTAREA 구현에 유용한 예제 입니다.
AC2.0으로 제작 되어 있습니다.


Author: Neil Webb, neil AT nwebb DOT co DOT uk,
Difficulty Level: Intermediate
Requirements: Flash MX 2004
Assumed Knowledge: Having read my "Cascading Style Sheets in MX2004" tutorial
File(s) to Download:
Online Example: None

Loading External XML formatted Content

Welcome grasshopper.

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>
For those of you unfamiliar with XML, notice that our XML tags look very similar to standard HTML tags - the difference being that we can create the tag names ourselves. It is of course more appropriate to name our tags with descriptive names such as "header", "byline" and so on, but for the sake of this tutorial I've gone with kung-fu related names. As with variables, there are certain rules to naming your tags, such as not including spaces in those names. You can use mixed case and you can use underscores - at least in Internet Explorer, but I would generally advise against it. Keep your names short, simple, descriptive and all lower case and then you can't go far wrong. You should also note that all opening tags must have a corresponding closing tag.

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:

 <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>
Save the file as "kungfu.xml"
Note: the file can also be saved as kungfu.html as long as you load it into the Flash XML object as kungfu.html at the appropriate time.

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;
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:
//load css
kungFuStyle = new TextField.StyleSheet();
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();
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.

//load in XML
kungFuContent = new XML();
kungFuContent.ignoreWhite = true;
kungFuContent.onLoad = function(success)
                myText.text = kungFuContent;
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. The next line uses the XML object's load method to load in our kungfu.xml document which we created earlier, and finally use the onLoad method to check for a successful load and assign the XML object to out TextArea component.

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;
Save the stylesheet as "kungfu.css" in the same folder as your other files.

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;
Finally let's put some proper text in to our XML tags. On this page, the text between each tag may wrap over more than one line, but thanks to our condenseWhite solution this is not a problem. Open up "kungfu.xml" and change the code to this:
 <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>
Now save the file. Let's test the movie and see what we've got:

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>
Remember that we defined snake as a class. We are now using it in the correct way, as a class attribute of another tag (in this case the span tag). If we test our movie now and scroll down to the bottom this is what we'll see:

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.

2009/12/21 15:41 2009/12/21 15:41