ActionScript for Designers, Part 3

Sixteen months. That's how long it's been since part 2 of this series, which, for the curious, happened to be a whirlwind tour of how to target symbols in Flash. While there was a good reason for this protracted absence (I was insanely busy and not writing anything for a year), it's still been WAY too long between installments. Today, all that gets rectified (I hope), provided you can get over the not-entirely-small fact that I'm going to renege on what I promised we were going to do last time. How's that for a page turner?

A quick recap

In the first installment, I tried to convince you that learning at least some ActionScript is very much worth the time it takes to do. In the second part, as I already mentioned, I went through the ins and outs of how Flash targets symbols you place on the stage. If you'd like to review, feel free to click on the links above and we'll be all caught up.

Now, at the end of part 2, I promised the following:

Next time we're going to start doing some actual work. You'll get acquainted with the Actions panel, I'll show you a GUI you can use for targeting (when things get hairy), and we'll actually create some honest-to-goodness, working code to start us on our way to ActionScript bliss.

As much as it pains me, I have to put that off until the next installment. It's done in the interest of actually presenting a coherent series of pieces here, as I've come to the conclusion that the April 2004 version of me wasn't thinking very clearly. At least, my previous self wasn't yet aware of the existence of Flash 8 (in fairness, nor should I have been, seeing as it would be over a year until Flash 8 was even announced) and its features that definitely make the beginning scripter's life a lot easier. Therefore, a small detour from the original plan is in order to put our collective ducks in a row. Anyway, I've got things more or less figured out now, so let's continue, shall we?

Finding scripts where they live

In order to get ready to do things the easy way (which I really promise we'll start to do next time), I need to answer to a pretty fundamental question: Where do you even put scripts in the first place? Now, I'm writing all this with the assumption that you have at least a little Flash experience, and with that as the case, I'm further assuming that you've used the Timeline to create keyframe-based animation at some point in the past. That's good, because you're then already familiar with the first place scripts can go (the Timeline, of course). These Timeline-based scripts are commonly known as frame scripts, and let's do a quick exercise to illustrate this point:

1. Launch Flash. If you need a copy, download the trial version (Flash 8 was just released as of this writing) from Macromedia's site.
2. Create a new Flash document (depending on the preferences you've set, you can do so from the Start Panel that opens automatically when Flash launches or by selecting File:New from the menu).
3. Select frame 1 of Layer 1 in the Timeline by clicking once on it.
4. If it's not open already, open the Actions Panel by selecting Window:Actions from the menu.
5. Type stop(); into the Actions panel.

If all went well, you've not only written your first script (congratulations, woo hoo), but your previously blank frame in Layer 1 should look like Figure 1.

Figure 1

See that little teeny tiny "a" icon at the top of the frame? It's there to indicate the presence of a script, one which the Actions panel will automagically reveal when you click on any frame containing the aforementioned little teeny tiny "a" icon. Simple enough, right? Wrong! Again, since you're already familiar with the Timeline, you're no doubt aware that Flash can have tons of layers in the Timeline, each with (potentially) thousands of frames. And when you throw in the fact that Flash's Movie Clip paradigm means that you can have tons of clips thrown into the mix, each one with their own independent Timeline, there are literally buhjillions of places for a script to get lost. So here's helpful hint number one: in any Timeline, whether it's one at the top level of your movie or one embedded in a Movie Clip, make sure the first thing you do is create two layers at the top of your Timeline. Name one actions and the other labels (fig. 2).

Figure 2

The actions layer is where your frame scripts go, and the labels layer is exclusively for labeling frames and placing inline comments (which you do, incidentally, by selecting a keyframe in this layer and then typing a name or comment, along with the appropriate Label Type, in the Properties Panel). While we'll get more into labels and comments as we go along, getting used to commenting your scripts (whether as a comment in the Timeline or inside a script itself) is never a bad idea, and WILL save you time and sanity later as your scripts get more complex.

Getting back to script location, frame scripts are only the first place you can put scripts — you can also attach scripts directly to Movie Clips and Buttons. While these scripts can control symbols or trigger events scattered all around your movie (again, this is where last episode's targeting discussion is relevant), they behave a little differently than frame scripts in that you have to consciously assign a trigger to them. We'll deal with the concept of triggers in much more detail in subsequent chapters, but here's a quick explanation of why these scripts are different from frame scripts: when you write a frame script, the trigger is already built in (when the Timeline advances to a keyframe containing a script, the process of simply arriving at the keyframe is the trigger that tells the script to shake its groove thang). Attaching a script directly to a Movie Clip or Button doesn't have this built-in trigger — though either type can contain a Timeline (Buttons have special ones, but they are Timelines nonetheless), there's actually no Timeline directly associated with a Movie Clip or Button, and thus no discernible event telling the script to, in essence, "go." Therefore, you have to assign a trigger (simply put, an event that says, in effect, "when I click on this" or "when this loads") which will, in turn, tell Flash not only what to do, but when to do it. Still with me? Good. So now you know scripts can live in different places in your movie, and the location of the script determines (in broad terms) the type of script it is, and ultimately how you have to approach it. Finally, I'll reiterate that dedicated script and label layers are a very, very good idea from the giddy-up. Let's move on.

Ladies and Gentlemen, the Actions Panel

Now, it's time for you to direct your copy of Flash to the Actions panel. I know I teased it a bit when we went through the process of creating frame scripts, but here's where we get down to bid'ness. First, though, a quick bit of housekeeping: from now until whenever this series ends, I'll be using Flash 8, but apart from a couple of things, I don't think there's going to be a lot going on that won't go all the way back to Flash 6 (AKA Flash MX). And with that out of the way, let's peel the tab back on the tall cool one that is the Actions Panel and see what's doin'.

To open up the Actions panel in either Flash 7 (AKA Flash MX 2004) or Flash 8, pull down the Window menu and select Actions (like you did before, and, again, if it's not already open). Depending on your version of Flash, you'll see a panel like in Figure 3. For the purposes of our discussion today, I've placed the Flash 7 Actions panel atop the Flash 8 Actions panel for the sake of comparison. There isn't a lot that's fundamentally different, save for the plain-as-day "Script Assist" button plastered onto the top right of the Flash 8 panel, which we'll get to later.

Figure 3: Store this away for later: the //hello... text in each window is an example of commented code, which means that Flash will ignore it.

Since this series is called ActionScript for Designers and not ActionScript for Hard-Core Coders That Often Don't Even Use Flash to Create Flash Movies, you may have already guessed that the Actions Panel is where all of our code writing is going to be done. So here's the lay of the land (using the bottom image, which is Flash 8's panel, for reference):

The reference pane. Located on the top left of the Actions Panel, the reference pane contains a list of ActionScript commands sorted by category. While we'll eventually get into the difference between functions, operators, types, and everything else that is unlikely to make a lot of sense at the moment, suffice it to say for now that the reference pane comes in handy not only for easily adding scripts to the main panel window, but also for quickly invoking help for any selected item (fig. 4).

Figure 4: A simple right-click adds a script to the window or calls for help.

The Movie Explorer. Think of this pane, which resides right underneath the reference pane, as the little sibling to the full-blown Movie Explorer (available from the Window menu). This mini-ME (get it? Ha!) not only hierarchically shows every element in your movie (which can get long), but also the elements that make up just the selected item.

The script window. Not much to say about this, other than this is the text editor where you write scripts. Oh, and by the way, it's the big, mostly empty window that takes up most of the right side of the Actions Panel.

Pin tabs. Directly below the script window is a tab bar with a little pin icon, which allows you to "stick" scripts to the window for quick reference even as you jump around to various other places in your movie. I wish that this feature worked across multiple FLA files, but such is life.

The toolbar. This is the row of icons above the script window. There are quite a few neighbors living on this particular block, so it's best to introduce them one-by-one.

• Add a new item to the script. This is the same thing as the reference pane, just in pulldown form for when you may have collapsed the left side of the Actions Panel. This is also how you start scripts when using Script Assist, which we'll get into in the next installment.
• Find. Opens a standard find/replace dialog box to use in the script window.
• Insert a target path. This gets its very own write-up next time, so bear with me here.
• Check syntax. Press this and Flash blows through your script looking for errors in your code. If it finds any, you'll see what's wrong in the Output Panel (which you got acquainted with last time).
• Auto format. This huge timesaver parses your scripts and automatically puts in all the appropriate returns and tabs and semicolons and whatever else that makes code so funny-looking. The bottom line, though, is that auto formatting makes it easy to read through whatever code you write, since your scripts will always be formatted identically. This also checks the syntax first, so it's something of a two-for-one deal.
• Show code hint. Flash likes to try and guess what you're doing in the form of code hinting, which places a menu of likely commands in your path as you type. This button exists in case you've gotten a little ahead of yourself, have lost the menu, and need to get it back.
• Debug options. This option lets you set and remove breakpoints for use with Flash's debugger. We're not really going to go there, but you should at least know what this button is that you're never going to touch. I'm sure real programmers will have a cow after reading that, but I'll handle the heat.
• Script Assist. This is the sorely missed (by some) "Normal Mode" replacement that Macromedia put back in Flash 8 after removing it completely in Flash 7. We'll be using this to write our "real" first scripts.
• Help. Opens Flash's Help Panel. 'Nuff said there.

So there you are, boys and girls: the Actions Panel. In the sage words of Brad Hamilton: Learn it. Know it. Live it.

That's all for today, folks, but next time we'll get back on track with what I teased in part 2 lo those many moons ago. What I'm trying to say is that there we'll finally write some actual code (you know, that does stuff) and (hopefully) get some measure of the "instant" gratification that's been so long in coming. So again, I apologize for the detour, but we shall be stronger for it. See you all then.

Filed under: Tutorial on October 10th, 2005

^ Top of Page

Got Feedback? to send an email. I'll do my best to answer. Really.