Flash ActionScripting for Designers: Controlling Independent Timelines
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
All projects include a main Timeline, but one of the most powerful aspects of Flash is its capability, through movie clips, to run and control many Timelines at the same time.
In addition, you can also use the loadMovie() action to load external SWF files into a specified level, each with its own Timeline. The loadMovie() action loads individual SWF files on demand, eliminating the need to work with a single larger Flash file. Thus, through the use of movie clips and loaded SWF files, a single Flash movie can have many separate Timelines, each of which can act independently from the others.
Understanding Multiple Timelines
These Timelines can also work together; one Timeline controlling some or all of the others. To accomplish this coordination, you need to establish communication between the various movie clip Timelines. In Flash, this communication is achieved through the use of "target paths," which are hierarchical addresses or instructions that Flash uses to locate movie clip instance names, variables, and objects inside your movie.
Understanding and correctly applying target paths is a critical ActionScript skill. You need them to control the various Timelines in a project.
Once your movie clips instances are named in the Property inspector, you can use the Insert a Target Path button in the Property inspector to find and control them. In this way, you can think of target paths as addresses. However, it is not a permanent address. If a movie clip instance appears in your movie for 50 frames, it is considered present and targetable only during those 50 frames.
Let’s dive into this important concept with some examples. Open clock.fla and preview this file (Control > Test Movie) (see Figure 1).
)
Figure 1 Preview of the clock.fla file
The movie consists of a clock with rotating second, minute, and hour hands. Each hand can be stopped or started by using the appropriate button set. To accomplish this animation, the Flash file uses four independent Timelines. When all the hands are moving, all four Timelines are playing at the same time.
The key to this clock animation is to understand how to path, or communicate, to each of these Timelines to send them simple instructions for starting and stopping playback.
Let me review the structure of this clock animation so I can describe how this pathing in Flash works. The clock face (clock_inst movie clip) is located in the main Timeline. The clock numbers, hour hand, and minute hand are nested, or located within, the clock_inst movie clip. In addition, nested within the Minute hand movie clip is the second hand movie clip (see Figure 2). Thus, as shown in the figure, this file contains three levels of movie clips.
)
Figure 2 The hierarchy of movie clips displayed in the Insert Target Path dialog box
The interactivity built into this file works by locating, or targeting, the path to each movie clip Timeline so instructions can be delivered to stop or play each clip. This involves writing the name of the main Timeline (this or root) followed by a dot and the instance names of each movie clip.
Located on the main Timeline is the clock_inst instance of the clock outline. Here is the way you write a path to the clock face from the main Timeline (the term root refers to the main or Scene 1 Timeline):
root.clock_inst
Here is how you would use this path to instruct the clock_inst movie clip to stop playing:
root.clock_inst.stop();
This next line of script paths to the seconds movie clip, which is located inside the Minute hand movie clip, which in turn is located inside the clock_inst clip on the main Timeline (root).
root.clock_inst.Minute.seconds.stop();
The previous examples are referred to as absolute paths since the entire path to the Timeline is included. However, you can also locate each Timeline using "relative paths."
A relative path depends on the relationship between the controlling Timeline and the target Timeline. In a relative path, you use the keyword this to refer to the current Timeline and the alias _parent to indicate the parent Timeline of the current Timeline. You can use the _parent alias repeatedly to go up one level in the movie clip hierarchy within the same level of Flash Player. For example, _parent._parent controls a movie clip up two levels in the hierarchy. The topmost Timeline at any level in Flash Player is the only Timeline with a _parent value that is undefined.
The script in Figure 3a uses a relative path to path to the hour hand movie clip and instructs it to stop. The script in Figure 3b also uses a relative path to instruct the Timeline of the seconds hand instance to stop.
)
Figure 3 Two relative paths: 3a paths to the hour hand movie clip; 3b to the seconds hand movie clip
An action in the Timeline of the instance seconds, located one level below minutes, could use the following target path to target the instance minutes:
_parent
To target the clock_inst clip from the seconds movie clip, which is two levels up, you could use the following relative path:
this._parent._parent
The this in the path refers to the seconds clip since this is where the script is located. You would add another period after the second _parent and provide instructions on what you want the clock_inst Timeline to do, such as stop, jump to another frame, or play.
The important thing to take away regarding relative paths is that you do not need to include the entire path; only the path relative to the starting location.
For example, since the Hour and Minute movie clips are both located on the same Timeline in this file, the path from one to the other can be shortened to just this:
this.hour
Or this:
this.minutes
Open the Actions panel (Windows > Actions) and select each button to see how each script paths to the relevant Timeline to stop or start its playback. Study how I have set up some simple paths to create a very interactive project using only simple scripts.