Tutorial: Page (1) of 2 - 10/20/05 Email this story to a friend. email article Print this page (Article printing at MyDmn.com).print page facebook

ActionScript for Designers, Part 4

Targeting (and scripting!) the easy way By Kevin Schmitt

Ed. 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

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.

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.


Page: 1 2 Next Page


Related Keywords:actionscript, flash, flash 8, flash 8 professional, studio 8

HOT THREADS on DMN Forums
Content-type: text/html  Rss  Add to Google Reader or
Homepage    Add to My AOL  Add to Excite MIX  Subscribe in
NewsGator Online 
Real-Time - what users are saying - Right Now!

Our Privacy Policy --- @ Copyright, 2015 Digital Media Online, All Rights Reserved