ActionScript for Designers, Part 4

After last episode's short detour, we're back on track. Now, all the talk about targeting way back in part 2 was the equivalent of taking the scenic route (long way around, lot more to see), but I hope that exercise gave you a sense of where instances of symbols "live" in relation to each other and how to start thinking about those relationships (an exercise which certainly wasn't a waste of time in terms of where we're going with this). Today, though, we'll explore a much easier way to target objects and (finally!) write our first official script.

Now, before we go any further, previous installments of this series are available from the following links:

Part 1: We have to tear down before we rebuild
Part 2: Who's up for a little target practice?
Part 3: Nothing like a little detour after a really, really long break

Almost there

To start things off, we need to set up a simple scene before we get to the promised land, so follow along, why don'tcha? Again, a running assumption is basic Flash knowledge, so I'll dispense with the minutely detailed step-by-step. Again, if you need a copy of Flash, feel free to grab the trial version from Macromedia's download page. Ready? Here goes:

The first thing to do is to prep your movie. Fire up Flash, spawn a new FLA file (Command+N on the Mac or Control+N on Windows), and select Flash Document from the New Document panel. Once the new FLA exists, we're going to get into a good habit and create different layers to hold different stuff (like we discussed last time). Double-click the default Layer 1 layer and rename it squares. This is where the actual visible assets in our movie will "live." Now create two more layers (either through the Insert:Timeline:Layer menu or the New Layer button at the bottom left of the Timeline) and rename Layer 2 to labels and Layer 3 to actions. These are the "management" layers where scripts, labels, comments, and other stuff you'll actually need to locate (especially as you start to write more complex scripts) reside. Your Timeline should now look something like Figure 1.

Figure 1

Now, select the empty frame 1 in the squares layer by clicking it once. Head over to the Tools panel and click the Rectangle tool (or just hit r on your keyboard). Now, drag out a simple black square (size matters not), and once that's done, hit F8 to turn it into a symbol. I like to make simple shapes into Graphics rather than Movie Clips, so click the Graphic radio button in the Convert to Symbol box, name it square_g, and then hit OK. The square should then show up in your Library. Now, drag an instance of square_g to the stage, set the Graphic type of square_g to Movie Clip in the Properties panel, and then name it right_mc (in the same panel). Next, duplicate the square (Command+D/Control+D), move it off to the left, and name the duplicated version left_mc. The fruits of our labors are illustrated to some extent in Figure 2.

Figure 2: The two square instances as shown on the stage (left) and named in the Properties panel (right).

Now that we've got this very basic setup, let's say that the whole point of the movie is make the right square clickable, and, once clicked, it will then tell the left square to rotate 45 degrees. This incredibly engaging interaction would look like Figure 3 when played:

Figure 3: We're firmly in goosebump territory here. Can't you just smell the excitement?

To make that work, we'll need to target the left square from the right one. The "normal" way to do this (read: type everything from scratch) is to select the right_mc symbol, head to the actions panel (Window:Actions), and type in the oh-so-intuitive command:

onClipEvent (mouseUp) {
  _root.left_mc._rotation = 45;
}

Then it's just a simple matter of publishing the SWF file, and you'll magically have what you saw in Figure 3. There's just one problem, though: what if you have no idea what that code I told you to type into the Actions panel means? Since this series is called ActionScript for Designers, and not ActionScript for People Who Already Know It, there had better be an easier way to write that script. Fortunately for all of us, there is.

Low-hanging fruit

So let's do this the easy way, using a couple of the helper features in the Actions panel (the Insert Target Path button and Script Assist) we learned about (or at least hinted at) last time. Now, if you did happen to type in the script earlier, do a quick Select All (Command+A/Control+A) and delete the text so we can start fresh.

Before we get into the rotation script, though, the very first script we need to write is the most basic of all scripts: a simple stop command. We're going to place one of these in frame 1 of the actions layer, otherwise our movie will continually reset to frame 1 in perpetuity (or at least until the next power failure). To write this script, and every other script we'll be writing until it's time for the training wheels to come off, we're going to switch on Flash 8's new (or at least rejuvenated after being absent in Flash 7) Script Assist mode. At the top right of the Actions panel, click the handily-labeled Script Assist button, which will create a not-exactly-helpful-looking area that will initially be filled with a whole lotta nada. The familiar icons are still present, albeit a bit lower. Now, to start building a script, pull down the "Add a new item to the script" button () and navigate to Global Functions:Timeline Control:stop. Once you do that, your script window will automatically write the code for you (fig. 4), along with showing a little about what's going on in the formerly empty Script Assist area.

Figure 4

While not a real momentous occasion, you've now "officially" written your first script. Congratulations, woo freaking hoo. Let's move on.

If you remember from last time, I briefly discussed the concept of triggers. In the parlance of Flash, most would probably call these events, but I'm going to stick with triggers because it's a clearer concept for someone trying to learn. Triggers tell Flash to do something once a certain condition is met, like when the movie reaches a certain frame (as is the case with the stop(); frame script we just wrote). But Timeline triggers aren't the only kind of triggers — clicking a button, typing a key, the first appearance of an instance, or even "listening" for something else to happen in the movie are some broad examples of trigger types. So, since what we're trying to do (have a square tell another square to turn itself all sideways-like) involves a Movie Clip, there's no obvious trigger that tells Flash to run the script. Therefore, we need to assign a trigger to the Movie Clip that we want to do stuff; specifically, an onClipEvent trigger. This trigger, reserved for Movie Clips, encompasses several event types (like when the clip is loaded or the passage of a frame), and must be assigned to a Movie Clip instance before you start writing the actual script (or else you'll get the dreaded complaining of the Output panel when you check the syntax of the script). But you don't really need to know this, because we're going to build this script by using Flash 8's handy-dandy Script Assist mode. Let's do that now.

Click once on the right_mc square instance on the Stage, head to the Actions Panel, pull down the new item button, and choose Global Functions:Movie Clip Control:onClipEvent. The assist area will cease to be empty and fill up with lots of good stuff. It not only presents you with an array of trigger types for onClipEvent, but it also fills in the correct onClipEvent syntax in the script window (fig. 5).

Figure 5

Not so daunting when it's all laid out for you like that, is it? Go ahead, click the various radio buttons and watch the script rewrite itself. Once that laugh riot is done with, go ahead and click the Mouse down button (since we want to tie the action to the clicking of the right_mc square). Now, since the idea is to have the left square rotate once the mouse is clicked, we have to tell Flash to 1) look for the left square and 2) rotate 45 degrees. Rotation is what's known as a property, which is a class of commands that affect various descriptive characteristics of objects on the screen (position, scale, transparency, etc.). Fortunately, there's a command in the new item menu that consolidates properties to a single panel. So go ahead an pull down the new item menu again, and navigate to Global Functions:Movie Clip Control:setProperty. The Script Assist area should now look like Figure 6.

Figure 6

Pull down the Property selector, and pick _rotation from the list. So far, so good. We also know the rotation needs to be 45 degrees, so skip ahead to the Value parameter and enter 45. You'll also need to check the Expression box next to it. Why? Because if you don't, Script Assist will place quotes around your number. Quotes around numbers are generally bad, because they cease being numbers and start being plain old text, which won't do much good when Flash is expecting to find a number. The Expression box rids the number of the quotes, letting it become a number again.

Now the not tiny issue of targeting. If you want to use all that scary knowledge about how targeting works you learned many moons ago in part 2, all you need to do is enter either _root.left_mc or _parent.left_mc as the Target parameter (depending on whether you want absolute or relative targeting, respectively) and you're good to go. But, as promised so very long ago, there's an easier way. Once you click inside the Target parameter area, you'll see that the Insert a target path () button becomes active in the toolbar. This is the big shortcut, and represents a point-and-click way of filling in target paths. Go ahead and click on it, select the left_mc instance from the list, and depending on whether you want to use absolute or relative targeting, your Insert Target Path window will look like Figure 7.

Figure 7

Click OK, and Script Assist will put the target where it's supposed to go. Now, I tend to use absolute targeting when using the insert target path GUI, since relative targeting introduces a not-entirely-necessary this prefix that can throw targeting off. However, if you do want to use relative targeting, sometimes it's best to just manually remove the this prefix after the fact. I'm hoping to wean you off of easy targeting anyway, because while it's convenient, it can be inaccurate. Consider yourself warned. Anyway, after everything we just went through, your script should read (if you used absolute targeting like me):

onClipEvent (mouseDown) {
  setProperty("_root.left_mc", _rotation, 45);
}

While it's a little different than the hand-typed version from earlier, it does the same thing. And, as I'm guessing, the Script Assist way was probably a little easier. So go ahead, publish your masterpiece, which should look like Figure 8 (which is a working Flash movie). Go ahead — click on the right square. It's quite a captivating piece of interactive media.

Figure 8

OK, so it ain't pretty, but it's ActionScript, and you wrote it. And, to quote a obscure and little-seen piece of cinema, you've just taken your first step into a larger world. When we next meet, I'm going to run through the categories of scripts available for you, and in future installments we'll create a running project that will guide you through ever-intensifying and complexificating (if I may butcher the Queen's English even more than I already have) layers of ActionScript. Until next time!

Filed under: Tutorial on October 20th, 2005

^ Top of Page

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