 |
|
The basic unit of currency in an actionscript-based Flash movie is the movieclip. That's because a movieclip is an object --either physically present on the stage, or saved in the library for dynamic attachment-- which is addressable with actionscript. If it is present on the stage, it has an instance name by which it may be addressed, meaning that commands may be issued to get or change its properties (position, size, transparency, etc) or to affect its behavior (make it draggable, eg). A movieclip also has its own timeline, which is independent from the main movie's timeline. Commands can be issued to control the movieclip's playhead from within any other timeline, including the main movie's timeline, as we'll look at below.
Timelines
Throughout the notes, the word 'timeline' refers to the sequence of frames
and keyframes in either a movieclip or the main movie. The main movie's timeline
can be treated in actionscript as an instance of a movieclip (to be exact,
as an instance of the MovieClip class). It is addressable either as _root
(from any timeline in the movie, regardless of how deeply nested), or as _parent
from a movieclip placed in one or more of its frames. It is often referred
to as the main timeline.
In this class, we'll be looking at three different types of movieclips, as defined by the content of their timelines
The movie shown above contains the following movieclips: a lightbulb movieclip with two keyframes: on and off, and two single-frame movieclips to control the lightbulb: one to turn it on and another to turn it off.
The stage for this movie looks like the screenshot on the left below, and the timeline of the individual movieclips within the movie is shown on the right:
You can open lightbulb1.fla from the zip file available from the link at right, or recreate the movie using techniques for importing a graphic, adding keyframes, labels and actions and converting objects to movieclips as described in previous sections of this site. Your movieclips should have a structure similar to those shown above (2 keyframes defining the on and off states of the lightbulb, and 1 keyframe in both the on and off control movieclips). With all the movieclips in place on stage, we need to add the code that will make it all work together.
Actionscript is written as a series of statements within a Flash movie, and is placed either in a frame or in an external class file. In the Flash intro class, we also put actionscript on buttons and movieclips, but that was done for the sake of easier learning and we'll now abandon that practice and put all of our code either in frame 1 of the main movie, or in a class file. This makes it much easier for us, or for others who come after us and have to maintain or modify our Flash movies, to find all of the code used in a movie. The only code which may fall outside of our main timeline/class file paradigm is the occasional stop action inserted into a movieclip to define the end of an animation sequence (as in the lightbulb movieclip, where a stop is needed in frame 1 to keep the playhead from continuing to the next keyframe).
The command to send the playhead of the lightbulb movieclip to frame labelled "on" (and stop there) is:
lightbulb_mc.gotoAndStop("on");
which defines what is to be done (gotoAndStop), who it is to be done to (lightbulb_mc), and how it is to be carried out (jump to frame labelled "on"), as I have attempted to diagram below:
That same syntax is used not only for playhead commands like gotoAndStop and gotoAndPlay but when applying any function to a movieclip (or object of another class) in a Flash movie. The generic form is:
There is an extra term in that statement that is not in the diagram above: path-to-instance. It is part of the 'who' and is required only if the instance being addressed is not in the same timeline as the code (more details on that below).
Try this:
Copy the line in blue above, open lightbulb1.fla and click frame 1 of the actions layer. Open the Actions panel (F9) and paste the line of code in there. What do you expect to happen when you run the movie? Press Control, Test Movie.
You'll see when you test the movie that the command is executed immediately. The playhead of movieclip lightbulb_mc goes to the frame labelled "on" and stops there. When a Flash movie is executed, the playhead (of the main timeline) starts at frame 1 (the only frame in our movie), renders any graphics contained in that frame (the lightbulb movieclip and the control movieclips), and then carries out any actions in that frame, in the order they are encountered. In our case, there is one action and that is what gets carried out as soon as the movie starts and the graphics have been rendered.
But this is not what we want to have happen. We want the movie to first show our lightbulb in the turned-off state and only turn on when the on button is clicked. Thus, the command to turn on the lightbulb cannot just be plunked into frame 1 -- it must instead somehow be associated with on_mc, the movieclip that is supposed to turn the light on. We'll make that association in frame 1 of the main movie, since that's where all of our code is going to go, and do it by creating a function (a block of one or more actionscript statements that function together as a group) and assigning that to the onRelease property of on_mc. The following bit of code says to the compiler "When the mouse is clicked and released on the movieclip named on_mc, find movieclip lightbulb_mc and send its playhead to the frame labelled on". (We'll talk in more detail about functions and event properties like onRelease in later pages.)
on_mc.onRelease = function() {
lightbulb_mc.gotoAndStop("on");
}
Exercise 1:
Copy the 3 lines above and paste them into frame 1 below the existing code. Make the necessary changes to the pasted code to make the off button work.
Exercise 2:
Add a 3rd keyframe to lightbulb_mc with another state (eg, a translucent red area in the shape of the bulb over the graphic, or a fuzzy glow around the bulb, or whatever other change you want to make) and a 3rd control (eg, named glow_mc) to the movie, putting the right code into frame 1 of the movie to make that control active.
Working in Flash MX 2004, to get the right code into your movie for a control, you can either cut and paste the code above and modify it as needed, type it in directly, or use the + button in the Actions panel, upper left (as shown in the picture below), doing this:
To end up with this:
then change the instancename and code within the curly brackets to whatever you need.
Working in Flash 8, to get the right code into your movie for a control, you can either cut and paste the code above and modify it as needed, or use the + button in the Actions panel, upper left (as shown in the picture below), doing this:
To end up with this:
Flash 8 nicely adds the whole function assignment whenever an event handler like onRelease is selected. It's up to you to replace "not_set_yet" with the correct instance name (on_mc) and to insert the command(s) to carry out within the function's opening and closing curly brackets, changing the default code to:
on_mc.onRelease = function() {
lightbulb_mc.gotoAndStop("on");
}
Try this:
Once you start writing actionscript, you need to be able to deal with the
errors that will certainly occur. In the code in frame 1, replace the opening
parenthesis in the line lightbulb_mc.gotoAndStop("on") with a left bracket, so it looks like lightbulb_mc.gotoAndStop["on"); Test the movie to see what happens. You should see the Output panel open, looking something like this:
Looking at the top line, especially "layer=actions, frame=1:Line 2: ']' expected" tells you that Flash is looking for a closing right bracket and none was found, and it displays the offending line so you can examine it for errors. It also generates another error which is really related to this one -- a closing bracket was found before one was expected because the previous line was not correct. Fixing the problem in line 2 and retesting will show that both problems have been taken care of. Never ignore the Output panel when it opens! Even if the movie runs, it will not function correctly until you fix the errors displayed there.
If you want to add controllable motion or other change-over-time to your movie, you can make a movieclip that consists of a number of distinct sequences instead of just a series of keyframes. A convenient structure for implementing this is as shown:
In the movie above, the first keyframe of lightbulb_mc contains the graphics to show initially and contains a stop action to make sure the movieclip gets parked there. Clicking the on button makes the "turnon" sequence begin (stopping in frame 10 because of the stop action there), and clicking the off button makes the "turnoff" sequence begin, stopping at the end. The code in frame 1 that controls the behavior of the on button is:
on_mc.onRelease = function() {
lightbulb_mc.gotoAndPlay("turnon");
}
The code for the off button is almost the same, but there is one additional problem which needs to be solved: if the user clicks the off button before ever clicking on, the lightbulb will be displayed in the on state before turning off. To avoid this, the command to play the turnoff sequence is put inside an if statement, which only sends the playhead to the turnoff frame if the lightbulb is already on.
off_mc.onRelease = function() {
if (lightbulb_mc._currentframe == 10) {
lightbulb_mc.gotoAndPlay("turnoff");
}
}
So, defining the various behaviors of a movieclip using keyframe sequences can be useful, especially in cases where the sequences end with the movieclip's elements in the same state. But care (ie, extra coding) must be applied to deal with situations where the current state of the movieclip (either in mid-sequence or at the end of a sequence) is not what it needs to be when the next sequence begins.
Exercise 3:
Open lightbulb2.fla from the link at right and add a third sequence to make the lightbulb pulse 3 times (getting a little bigger then shrinking, 3 times). Add a 3rd button labelled "pulse" and use it to control this sequence, applying the same check (the same if statement) that was used for the off button.
Exercise 4:
(BONUS) See if you can figure out, after reading the section on if statements, how to change the code controlling off_mc so that the bulb can be turned off if it is either at the end of the "turnon" sequence or at the end of the "pulse" sequence.
On the next page, we'll look at a 3rd sample, in which playhead commands are used to control continuously looping movieclips.
last update: 30 Aug 2006
Discussed on this page:
movieclip timeline, gotoAndPlay, gotoAndStop, scope, path to instance, adding code to actions panel, errors, output panel
Files:
lightbulb1.fla, lightbulb2.fla
(free download)
Other Resources:
Here is the Macromedia white paper on recommended coding practices for Flash MX 2004.
