Foundation Flash CS4 for Designers- P20 pdf

Node typesIn the previous section, when you used the array access operator—tih@k_*behiW,Y*_]op*_d]n]_panW-Y—Flash gave you the immediate descendant of the 8_d]n]_pan: tag you specified,

In this situation, another TIHHeop method can help you out To make each title appear on its own line, append pkTIHOpnejc$% to the existing expression:

pn]_a$tih@k_*behi*<pepha*pkTIHOpnejc$%%7

Swap pepha for the naha]oa@]pa attribute, as follows:

pn]_a$tih@k_*behi*<naha]oa@]pa*pkTIHOpnejc$%%7

As shown in Figure 13-2, you’ll see release dates instead of titles in the Output panel

Figure 13-2 Any element’s attributes can be retrieved.

What about looking at a list of the cast members? Viewing individual cast members is just as easy Update the pn]_a$% function to look like this:

pn]_a$tih@k_*behiW,Y*_]op*_d]n]_panW-Y%7

This pn]_a$% function instructs Flash to look at the first 8behi: element’s 8_]op: element, and then pull out that node’s second 8_d]n]_pan: element, which happens to be KheraKuh For fun, and to see how easy E4X makes things for you, contrast the preceding intuitive reference with its ActionScript 2.0 equivalent: tih@k_*benop?deh`*benop?deh`*benop?deh`*_deh`Jk`aoW-Y Which would you rather use?

Moving back to the kinder, gentler world of ActionScript 3.0, update the pn]_a$% function as follows

to see the whole cast of the third film:

pn]_a$tih@k_*behiW.Y*_]op*_d]n]_pan%7

This time, you get elements again, complete with their tag markup, as shown in Figure 13-3 This is just like tracing tih@k_*behi earlier, where the Output panel showed 8behi: elements and their descendants

Figure 13-3 Accessing elements selects the elements

themselves, as well as their children

Node types

In the previous section, when you used the array access operator—tih@k_*behiW,Y*_]op*_d]n]_panW-Y—Flash gave you the immediate descendant of the 8_d]n]_pan: tag you specified, which was a text node (that is, just a string) Here, you’re looking at a list of element nodes and their text node descendants If you want just the text nodes, you can use another TIHHeop method, `ao_aj)

`]jpo$%, to retrieve what you’re after You’ll see an example in just a bit First, make sure you grasp the idea that when you see the expression 8_d]n]_pan:Lklaua8+_d]n]_pan:, you’re not just looking

at one node; you’re looking at two

Both the tag (8_d]n]_pan:) and its content (Lklaua, in this case) comprise the element and text nodes mentioned earlier The W3C XML recommendation actually specifies a dozen node types, but ActionScript 3.0 supports only a few of them: element, attribute, text, comment, and processing instruction (And this is actually a relief, because knowing those few lets you easily pull out a tag’s content.)

Add the `ao_aj`]jpo$% method to the end of your E4X expression to see it in action:

pn]_a$tih@k_*behiW.Y*_]op*_d]n]_pan*`ao_aj`]jpo$%%7

Like attributes, text nodes don’t have any inherent formatting To put each string on its own line, slap the pkTIHOpnejc$% method on the end:

pn]_a$tih@k_*behiW.Y*_]op*_d]n]_pan*`ao_aj`]jpo$%*pkTIHOpnejc$%%7

The result is exactly the sort of thing you might use to populate a text field, as shown in Figure 13-4

Figure 13-4 Like attributes, text nodes are nothing more than strings.

Remember that we are dealing with text in this example Although the results may look rather plain, you can format and manipulate them in a number of ways, as outlined in Chapters 6 and 12.

To see how the `ao_aj`]jpo$% method works, try it out at the end of the expression tih@k_*behi*_]op, like this:

pn]_a$tih@k_*behiW.Y*_]op*_d]n]_pan*`ao_aj`]jpo$%%7

The result might surprise you: not just immediate descendants, but all descendants are shown (see Figure 13-5) The first child, 8_d]n]_pan:Lklaua8+_d]n]_pan:, appears at the top of the list This includes the 8_d]n]_pan: element along with its own “offspring,” a text node Next on display is the

first grandchild, Lklaua (the first child’s child) After that, the second child, the second child’s child (that is, the second grandchild), and so on The list makes sense, but if you were expecting only a list

of immediate children, well, now you know better

Figure 13-5 The descendants() method reveals all descendants.

E4X filtering

All right, we’ll give you one more illustration of E4X (we’ve saved the best for last) The lklaua*tih file included with this chapter’s Atan_eoa folder files has slightly different nqjjejcPeia attributes from those shown earlier in the chapter Instead of a whole phrase, such as 2 iej, these attributes show only numbers Why? Because E4X allows you to evaluate comparisons, so you can filter content based

The parentheses tell Flash that you’re intending to filter the returned TIHHeop instance Inside the parentheses, the expression is a simple comparison, <nqjjejcPeia:2, which in plain English would

be, “If you would be so kind, please tell us which 8behi: elements’ nqjjejcPeia attributes match this criterion.” Flash searches every 8behi: element in the bunch because nothing appears between the word behi and the dot that begins the next expression

What if you want only the title of these films? Try this:

pn]_a$tih@k_*behi*$<nqjjejcPeia:2%*<pepha*pkTIHOpnejc$%%7

The trick to understanding this expression, as always, is to break it into its parts On its own, each cept is usually easy enough to understand These concepts—these subexpressions—are separated by dots A blow-by- blow account of the preceding pn]_a$% goes like this:

con-tih@k_*behi returns an TIHHeop instance composed of all the 8behi: elements in the tih@k_ instance

Of this list, the expression *$<nqjjejcPeia:2% filters only those 8behi: elements whose nqj)jejcPeia attribute is greater than the value 2

The subexpression *<pepha refines the results further by pulling only the pepha attribute Finally, *pkTIHOpnejc$% invokes the TIHHeop*pkTIHOpnejc$% method to clean up the results.See the Hk]`TIH)A0TBehpanejc*bh] file in the Chapter 13 ?kilhapa folder for a working example of the preceding E4X filtering

Double dots and more

True, we already said “one more illustration of E4X,” and that’s the preceding one If you’re in a hurry

to dispense with all this theory and jump head- first into a practical application, we tip our fedoras and invite you to make a beeline for the next section But we figure at least a handful of you are wonder-ing if it’s possible to return film titles based on who appears in the cartoon Let’s pop open a can of spinach and take a gulp

Open the Hk]`TIH)A0T>kjqoNkqj`*bh] file that accompanies this chapter, and click into frame 1 of the scripts layer Most of the ActionScript should look familiar The important part appears in lines 9 through 12, because it introduces three things: an operator called the descendant accessor (**), a new TIH method called l]najp$%, and the bkna]_d**ej statement:

r]njk`a6TIH

bkna]_d$jk`aejtih@k_**_d]n]_pan*$`ao_aj`]jpo$%99>hqpk%%w

pn]_a$jk`a*l]najp$%*l]najp$%*<pepha%7

y

The bkn a]_d**ej statement was introduced to ActionScript 3.0 thanks to the E4X specification

A similar ActionScript statement, bkn**ej, has been available for quite some time You point bkn**ej

at an object, and it loops through that object’s properties—however many properties there happen

to be But note that bkn**ej loops on the properties’ names, rather than the properties themselves

This can either be nifty or frustrating, depending on your needs In contrast, the new bkna]_d**ej statement loops on an object’s actual properties, which is great for what we need in this particular endeavor

To understand the mechanism of this E4X filtering, let’s start with a skeleton and slowly build up to the skin Here are the bones:

bkna]_d$okiaLnklanpuejokiaK^fa_p%w

++`kokiapdejc

y

The okiaK^fa_p in question is the hardest part of this equation, but based on what you’ve seen, it

shouldn’t be impenetrable This object is an TIHHeop instance determined by the expression tih@k_**_d]n]_pan*$`ao_aj`]jpo$%99>hqpk% Up to this point, you would have used the longhand ver-sion to retrieve the same list The longhand version looks like this:

tih@k_*behi*_]op*_d]n]_pan*$`ao_aj`]jpo$%99>hqpk%7

This version is still as valid as ever But the descendant accessor (the double dots) lets you skip past the intermediate nodes—behi and _]op—straight to the element you’re after Pretty slick! Stepping through the subexpressions piece by piece, then, we get the following:

tih@k_**_d]n]_pan: All 8_d]n]_pan: elements in the tih@k_ instance, no matter to which intermediate nodes they belong

*$`ao_aj`]jpo$%99>hqpk%: Of that list, a comparison of the descendants of each 8_d]n)]_pan: element against a particular string These descendants are text nodes that happen to represent character names, and the comparison looks for a match with the string >hqpk The returned TIHHeop instance is the okiaK^fa_p from our skeleton.

That gives us the following:

All this means is that the bkna]_d**ej statement is going to make laps around the node list returned

by the comparison expression On each lap, it will update the value of that jk`a variable to the latest XML node it finds in that list The jk`a variable becomes the XML object in question It’s an XML refer-

ence, which means you can work your recently acquired E4X magic on it

This is where the l]najp$% method comes into play Remember that at this point, you’re dealing with

an element node (8_d]n]_pan:) whose descendant matches the string >hqpk As an TIH instance, the 8_d]n]_pan: node has access to the TIH*l]najp$% method, which pretty much works in the same way

as the Ikrea?hel*l]najp property The parent of 8_d]n]_pan: is 8_]op:, and the parent of 8_]op: is 8behi: Given that point of view, the pepha attribute, referenced with the < symbol, makes sense:

In spite of everything you’ve just seen, there will come a day when you pull on your E4X wizard hat, roll

up your oversized E4X wizard sleeves, wave the wand and nothing happens You won’t see anything

in your TIHHeop instance It won’t be because you’ve done anything wrong, only that you’ve omitted

something: the acknowledgment of an occasionally present XML namespace In XML, namespaces are

a way to filter or label certain elements in order to control their visibility Namespaces basically give elements a secret handshake, and you can’t see the elements unless you know it

XML documents don’t require namespaces, but many use them, including iTunes playlists, RSS feeds, and even Flash In fact, let’s use a bit of XML content that was generated by the Commands ° Copy Motion as XML command The Copy Motion as XML command provides a way to encode certain kinds

of motion tweens into XML data, and its root element contains three namespaces Here’s one ple, which is available as ?kluIkpekj*tih in the Atan_eoa folder for this chapter:

pn]_a$tih@k_**Okqn_a%7

The problem is that if you test that—you can use ?kluIkpekj*bh] in the Atan_eoa folder—you’ll find that the Output panel does not display anything To get your data back, you’ll need to use the J]iaol]_a class, which is easy to do Here’s how:

1. In ?kluIkpekj*bh], click into frame 1 and open the Actions panel to view the full code and pn]_a$% function:

4. Test the movie, and your 8Okqn_a: element comes out of hiding, as shown in Figure 13-7

Figure 13-7 Using a Namespace instance can bring data back to light.

If you look carefully at the results in the Output panel, you’ll see that the 8Okqn_a: element now tains additional attributes not in the original XML document Those are the namespaces Why they show up here is one of the mysteries of life But at least you won’t be caught by surprise if you run into this sort of XML content

5. If you don’t know an tihjo attribute’s value before writing your ActionScript, you can use the TIH*j]iaol]_a$% method to grab the namespace currently in use Replace the bh*ikpekj*& parameter you entered just a moment ago with the following:

r]njo6J]iaol]_a9jasJ]iaol]_a$tih@k_*j]iaol]_a$%%7

pn]_a$tih@k_**jo66Okqn_a%7

6. Test again, and you’ll see the same Output panel content, even though ActionScript supplied the namespace information for you

Your turn: Draw shapes with XML

Typically, XML documents are used to define MP3 playlists or images for a slide show You’ll do just that sort of thing in Chapter 14 Here, to demonstrate the versatility of XML data, you will use it to draw shapes Think of it as XML- driven alphabet soup, drawn by ActionScript

1. Open the TIH@n]sejc*bh] file from the Atan_eoa folder for this chapter Its partner is the

`n]sejco*tih file located in the same folder, so open that in your favorite text editor

2. In the Flash document, click frame 1 of the scripts layer and open the Actions panel to review the following partially completed ActionScript:

Right off the bat, you have a number of variables The first is a Olnepa instance, stored in a variable named skn` Think of a sprite as a low- overhead version of a movieclip In this case, it’s just a surface

to draw on, and it has no need for a timeline of its own, which is what a Ikrea?hel instance would provide The ]``?deh`$% method adds skn` to the main timeline’s display list, which ensures that your sprite will be visible when you start filling it with shapes

After that, you have a handful of variables used for counting: happan?kqjp is an integer (ejp) number that takes is value from the E4X expression tih@k_*happan*hajcpd$%7 So what does tih@k_*happan*hajcpd$%7 refer to? Take a look at the actual XML document, and you’ll see it right away:

4. Type the following new ActionScript after the existing code:

Here you have two more variables: happan and jk`a The happan variable is declared as another Olnepa instance, and jk`a as another TIH instance These variables will repeatedly update to different values, thanks to something called a bkn loop, which immediately follows.

The bkn statement gives you a way to perform something more than once, and the setup occurs in three parts:

The e variable is set to ,

A comparison expression will keep this loop going while the value of e is less than happan)

?kqjp, which you set in step 3

e will be incremented by - (that’s what '' does) every time the bkn loop runs another lap

So, what is this loop going to do? On every lap, it updates the jk`a variable to the E4X expression tih@k_*happanWeY That may look new, but you’ve seen this The only thing different is that the array access operator (WY) is being fed the value of e, rather than a hard- coded number

Once the value of jk`a is determined, the value of happan is set to a new Olnepa instance, and its cn]lde_ property is referenced All sprites and movieclips have a cn]lde_o property, which points to an instance

of the Cn]lde_o class associated with that particular sprite or movieclip The Cn]lde_o class lets you draw things, and the last two lines configure the “pen.” First, its stroke width is set to - (very thin) and its color

to ,t,,,,,, (black) Second, its fill is set to whatever color value is specified by the _khkn attribute of the current 8happan: element referenced by the jk`a variable (^acejBehh$jk`a*<_khkn%7)

With the pen ready, you’re now prepared to draw That’s where a second bkn loop comes in

5. Type the following new ActionScript after the existing code:

lkejp?kqjp9jk`a*_kkn`o*hajcpd$%7

bkn$f9,7f8lkejp?kqjp7f''%w

happan*cn]lde_o*hejaPk$jk`a*_kkn`oWfY*<t(jk`a*_kkn`oWfY*<u%7

y

Here, the lkejp?kqjp variable declared in step 3 is finally given a value What value? Why, the number

of 8_kkn`o: elements inside the current 8happan: element (again, as referenced by the jk`a variable) This second bkn loop runs its laps inside the first one Basically, the bkn loop that uses e runs through the 8happan: elements, and the one that uses f runs through the 8_kkn`o: elements

All this inner loop does is invoke the hejaPk$% method as often as necessary, taking its x and y cues from the E4X expressions jk`a*_kkn`oWfY*<t and jk`a*_kkn`oWfY*<u, respectively From right to left, you’re asking for the t (or u) attribute of the current 8_kkn`o: element of the current 8happan: ele-ment (as referenced by jk`a) In the XML document, these coordinates describe the points necessary

to draw a rather blocky set of letters

6. To complete the function, type the following ActionScript after the existing code:

Following after the inner bkn loop, the fill is closed with the aj`Behh$% method The next line, happan*t9e&0,, updates the Olnepa*t property of the current sprite—that is, the sprite into which you’ve just drawn a letter shape—and the sprite is added to the display list of skn`, which makes it a child display object of that sprite.

Why update the t property of the “letter” sprites? Because you don’t want them stacked on top of each other On its first lap through the bkn loop, the value of e is 0 Because 0 times 40 is 0, the first letter is positioned flush left inside the container sprite, skn` On its second lap, the value of e is 1, which positions the second letter at 40 pixels in On the third lap, the third letter is positioned at two times 40 pixels in, and so on

Because each letter is added to the display list of skn`, all the letters can be moved as a single group This happens in the last two lines, in which the t and u properties of skn` are set to half the width or height of the stage, minus half the width or height of skn` itself Put simply, the skn` sprite is centered horizontally and vertically

7. Test the movie You will see the word FLASH in block letterforms, whose coordinates and fill colors were determined by an XML document, as shown in Figure 13-8

Figure 13-8 XML just provided the coordinates for some shapes.

8. Close the SWF Here comes the cool part

9. Switch over to the XML document, rearrange the 8happan: elements, and save the XML file For example, just for a laugh, you might want to delete all of the elements except for the ones that draw A and H, and then swap them like this:

10. Close the Flash authoring environment altogether

11. Find the SWF you created just a moment ago—TIH@n]sejc*osb—and double- click it to test the movie without recompiling

As shown in Figure 13-9, Flash laughs back And you just changed the content of a SWF, in a dramatic way, without changing a jot of ActionScript!

Figure 13-9 Thanks to XML, Flash has a sense of humor.

What you have learned

In this chapter, we gave you the absolute basics of XML use in Flash On the surface, it may not seem like much However, what we have presented in this chapter forms the foundation for complex Flash projects ranging from video pickers, MP3 players, and portfolio sites, to e- commerce applications In this chapter, you have discovered the following:

The relationship between an XML document and Flash CS4

How to retrieve and filter XML data using E4X syntax

How to dynamically draw shapes with XML

The most important point you need to take away from this chapter is the sheer flexibility of XML in your Flash design and development efforts You can make your movies expand or contract effortlessly

by simply adding to or subtracting from the XML document being used by the movie This is the true

meaning of dynamic.

Speaking of dynamic, you’re about to enter the “Building Stuff” chapter, much of which collaborates with XML Turn the page to start building

Up to this point in the book, you have created quite a few projects using images, text, audio, video, and other media We bet you’re feeling pretty good about what you’ve accomplished (you should!), and, like many who have reached your skill level, you are wondering, “How does all of this hang together?”

In this chapter, we will bring together the various skills and knowledge you have developed, and use them to create some rather interesting projects We are going to start slowly and show you how to build a preloader, and then move through a slide show, an MP3 player, and finish with a full- bore video player Some of these are quite complicated projects, but if you have reached this point in the book, you are ready to develop some Flash “chops” and explore what you can do with your newfound skills.Here’s what we’ll cover in this chapter:

Loading visual content from outside the SWF Preloading a movie with heavy internal content Creating a slide show using external images and XML Creating a custom MP3 player

Creating a custom video controllerThe following files are used in this chapter (located in ?d]lpan-0+Atan_eoaBehao[

?d-0+Atan_eoa+):

BUILDING STUFF

lh]uheop*tih (MP3 player version)

The source files are available online from either of the following sites:

a behind-the- scenes way, even if you don’t place them there yourself (Flash does it for you cally) This should explain to you why, when you hit certain websites, you’re slugged with an intermi-nable wait, involving fingers drumming on the mouse or your desk and audible sighs as you wait for the movie to start

automati-One useful solution is to remove your heaviest assets—large images, audio, and video files—and use ActionScript to load them at runtime This way, the rest of your content—the lighter stuff, including text and vector artwork—displays almost immediately, while the heavy stuff streams into the SWF from your server Just keep in mind that even the light stuff may need a few seconds to load But at

least your audience will be looking at something, and even the mere perception of at least something

happening works PR wonders.

Dynamic loading

The dynamic loading we’re talking about is accomplished through the use of the Hk]`an class, new

to ActionScript 3.0 and introduced in Flash CS3 (To be sure, ActionScript 2.0 and earlier also ported dynamic loading, but different approaches were required for different kinds of external files ActionScript 3.0 makes it more consistent, and therefore simpler.) You can use the Hk]`an class to load SWF files or image files (JPG, GIF, or PNG) into a SWF through the use of the hk]`$% method, and then take action when the requested files arrive