ActionScript for Designers, Part 6

Well, folks, here we are. If you've lasted this long, you're about to get a taste of some long-awaited satisfaction. Finally, we're going to start writing some real ActionScript by way of a sample project, one which we'll start slowly with and continue to improve upon in the coming installments. I'm going to try to focus on different aspects of ActionScript (you know, the boring stuff from part 5) as we initialize and augment the project, so hopefully by the time we're done, you'll have a good jumping-off point for your own creations.

Note—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
Part 4: Targeting (and scripting!) the easy way
Part 5: A (bitter?) pill we must swallow

What this is not

In the interest of diving right in and writing some ActionScript, let me give you a brief overview of the base project and a link to download the "shell" FLA file so you can start following along (rather than providing excruciating detail of setting the flippin' thing up to begin with). Since I'm assuming basic Flash competency, I'm not going to walk through how to set up layers and clips and all the other stuff that goes into making a Flash movie, hence the download. One thing I will say up front (and which I alluded to in an earlier piece) is that I am going to be using Flash 8, since it reintroduced the Script Assist mode that will serve as our training wheels, at least to start. First, grab the following file:

• Flash project link (7 KB, zipped Flash 8 FLA file)

Now that you've downloaded, unzipped, and launched the project file, let's take a quick tour of what the project will be and what this first file contains. Overall, the project is a simple one: a row of buttons that, when clicked, will load different text into a text area (fig. 1). Here's a brief look just so we're on the same page:

Figure 1

For those of you who have been paying attention, those are indeed the Aqua buttons from a previous tutorial of mine. Now, I chose this type of project for a couple of reasons. One, a simple Flash-based Web site certainly is something of a universal starter project. Two, we can easily build upon it, adding bling to help illustrate some of the things you can do in ActionScript. As for the file itself, we're going to start slowly today, only writing enough script to label the buttons and control a couple of the rollover states. I've set up a few layers on the main timeline that contain the base assets (fig.2):

Figure 2

If you've been with me through all the articles in this series so far, you'll notice that I put actions and labels layers up top, just out of habit. The other layers hold the various visual elements: the background, buttons, text bed, and text area. We're just going to worry about having the buttons do something today, so let's take a closer look at what I've done on the buttons layer (above and beyond what I did to make the buttons themselves—you can see what went into those by reading the aforementioned Aqua buttons tutorial). Double-click any of the instances of the button on the main timeline to edit the button movie clip (fig. 3):

Figure 3

I highlighted the layers that I added for ActionScripting purposes. The button layer is a simple invisible button the exact size and shape of the Aqua button shape (fig. 4, left), the label layer is a Dynamic Text field that I've named label_txt (fig. 4, center), and the highlight layer is an instance of the button shape, which I've named highlight_mc and set to 25% opacity (fig. 4, right).

Figure 4

Again, since you have the project source, feel free to explore the various objects in the Library and on the Stage to see how they relate. Once you're done with that exciting task, let's start making some stuff work here.

First, we're going to go into the button_mc clip and write a few scripts. For one, I want to turn off the highlight clip, because I only want that to show up when I roll over the button. That means we're going to adjust a property (in this case the visibility) of a Movie Clip. So here's what to do: From the main timeline, click on any of the three button instances to edit the button_mc object (if you're not already there), and then click once in the actions layer to select it. Now, head over to the Actions Panel (Window:Actions if it's not already open), where you'll see that I've already added a single line of script—the oft-used stop(); command. Click on the Script Assist button, press the Add New Item button (the + icon), and select Global Functions:Movie Clip Control:setProperty. The Script Assist area will be filled with three lines you have to populate: Property, Target, and Value. Let's pick the target first, which should be a somewhat familiar process, since we've already covered targeting in great detail in earlier installments. Click the Target icon, and then drill down (you need to navigate the tree attached to the instance you double-clicked on for this to work properly, which is stupid, but it is what it is) to the highlight_mc entry. Make sure that relative targeting is selected, and then click OK. Also, you'll need to check the Expression box to the right of this field. Why? The easiest way I can think of to explain expressions is this: Expressions are bits of code that reference something in "Flash's world," as opposed to things you're importing from "your world" that live in Flash. For example, a path to a target, like what we just chose, "belongs" to Flash and needs to be interpreted as an expression. If you write a variable which you want to contain the piece of text "I rock," you would need to enclose that in quotes so Flash won't attempt to execute the nonexistent I rock command (and fail miserably at it, I might add). Make sense?

Back to the task at hand, let's set the Value field. Here's where one of those Constants we talked about last time will come in. We're talking visibility, so we either want it to be true or false. Since we're turning off the visibility, we need to type false into the Value field. Again, we'll need to check that this is an expression, or else Flash will see the quotes and spew forth a big "huh?" Finally, pull down the Property menu and select _visible. Your Actions panel should now look like Figure 5:

Figure 5

Now, if you're familiar with ActionScript already, at least in passing, you'll notice that Script Assist writes code a little differently than if you were to do it by hand. Therefore, every time we use Script Assist (at least until we take off the training wheels in the very near future), I'll also offer a more direct way of writing the same script by hand (if applicable, of course). So, if you don't want to use Script Assist, simply type the following under the stop(); command:

1

this.highlight_mc._visible = false;

In this case (and in a lot of cases), I'm just taking what appeared in parentheses in the Script Assist version and am using standard "dot syntax" to join the commands together. In any event, our first mission is accomplished, and we've successfully hidden the highlight by default. Now, let's write the script that will show it when we roll over the button.

Click the transparent button (on the button layer) to select it, and then, once again, head for the Actions panel. Remember when we talked about triggers a few episodes back? Well, this is where they come into play. Buttons have various states (over, out, down, up, press, release, etc.), and we can attach scripts to any of these states through a trigger (or, as they're more commonly known, event handlers). In this case, we want the highlight we just turned off to turn on when we roll over the button, and then turn off again when we roll off of it. So, in the Actions Panel, click on the + icon and navigate to Global Functions:Movie Clip Control:on. This contains all of our triggers. Click the Roll Over box, and our trigger/handler magically appears (fig. 6):

Figure 6

So far, so good, right? Now, as an aside, keep in mind that you can select multiple events simultaneously, so you can assign the same code to (for example) a Roll Over and a Key Press event at the same time without having to write the code twice. Speaking of which, let's do a little copy/paste to avoid that very scenario. Now that our handler is written, go back to the Actions layer, select the setProperty code, copy it, select the invisible button again, and then paste the selection into the Actions layer. Change the Value to true, and you're set. Now for the whole Roll Out part of it, which is equally copypastealicious. Do a Select All (Command+A/Mac or Control+A/Win), hit Copy, click at the end of line 3 (the closing bracket), and then hit Paste. You'll see an exact copy of the rollOver code directly under the original. Just a couple changes and we'll be there. Select the second line containing the on rollOver handler (line 4), uncheck the Roll Over box, and check the Roll Out box. Then go to line 5, which contains the setProperty code, and change the true Value back to false. Your code should now look like Figure 7:

Figure 7

If you want to do this by hand, the alternate code would be:

1
2
3
4
5
6
7

on (rollOver) {
	this.highlight_mc._visible = true;
}
 
on (rollOut) {
	this.highlight_mc._visible = false;
}

Time to test the movie. Select Control:Test Movie from the main menu to run your movie, which should look like the live SWF file in Figure 8:

(Either JavaScript is not active or you are using an old version of Adobe Flash Player. Please install the newest Flash Player.)
Figure 8

Wow—look at those phenomenal button rollovers. Before my hand falls off from patting myself on the back, there's still one more task to do. The buttons are nice and all, but they're not much good without labels. But since we're using the same source object for all three buttons on the Stage, how can we get them to display different labels?

The answer to that question lies in assigning different code to each instance when it loads, meaning that we're going to be introduced to another typer of trigger: onClipEvent. Basically, in addition to the overt triggers that happen through physical actions like clicking a button, the onClipEvent trigger can be called to assign all sorts of events to the mere existence of a Movie Clip. In this case, we're going to assign the load event to the onClipEvent trigger to fill the labels in each button with a different snippet of text. And to add to the intrigue, we're going to code this by hand. Bet you weren't quite ready to go without a net just yet, but I have confidence in you. Ready?

Head back up to the main timeline, and click on the topmost button instance. Head to the Actions panel, and type in the following:

1
2
3

onClipEvent (load) {
	this.label_txt.text = "About";
}

So what did I just do? I called the onClipEvent handler, assigned a load event to it (so the code will be run when the instance of the clip loads), and then targeted the text of the label_txt Dynamic Text field, telling it to display the word "About" (the quotes are important, since I don't want Flash to attempt to execute the nonexistent About command like we talked about earlier). And just in case you're concerned that the targeting isn't correct, keep in mind that that when you assign the onClipEvent handler to a clip, Flash interprets that code as if it were sitting directly inside the host object itself. That's why I didn't have to add button1_mc (or whatever) to the target path. Pretty straightforward, right?

Now, to add the same code to the other instances, just copy the code from the Actions Panel, click on the other instances of the button, and then paste it into each instance. For button 2, I changed "About" to "Factoid," and for button 3, I made the label "Contact." Test the movie again (control:Test Movie from the main menu), and your SWF will look like Figure 9:

Figure 9

I know—simply spectacular. We've really outdone ourselves this time. Anyway, that's a good stopping point for today. We've finally seen some of this stuff in action, and we're really just getting started. Next time we'll add a button press state, as well as rig up the buttons to add some text to the main text area when you click on them. Until then, everyone!

Filed under: Tutorial on January 6th, 2006

^ Top of Page

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