|Page (1) of 3 - 01/07/06||email article||print page|
ActionScript for Designers, Part 6Finally, the "fun" begins
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:
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):
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):
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).
Related Keywords:flash, flash 8, flash 8 professional, actionscript