"Sleeper" Project (Flash MX); 2003. Click to run.
"Turismo" Project (Flash 5/QuickTime); 2001. Click to run.
Concept
The two demonstration projects linked above show what's possible when you combine video content with Flash. With Flash MX this has become both easier and more technically efficient.
In both cases I've dropped into a Flash movie a short QuickTime animation generated in a 3D modeling/rendering program called Bryce. I could just as easily have used video shot with a camera or some other image sequence. Flash MX now supports formats other than QuickTime, including Windows Media (.asf or .wmv), Digital Video (.dvi or .dv), and MPEG (.mpeg or .mpg).
In Flash I've constructed layers containing control buttons and animated graphics. In this particular demo, the animations are separate movies (swf's) loaded into Level 1, the level immediately above the main level. I use the loadMovie() method to do this. Each movie runs its own 30-second timeline while the main movie remains paused. Voila, multiple, compound video timelines!
Export format
In versions of Flash before MX, any movie that included video (QuickTime, since that was the only supported format) had to be exported as QuickTime, not as Flash. This was because the Flash player lacked a video encoder/decoder (or "codec"). Flash MX includes the powerful Sorenson codec, so you can now import video to Flash and export as an swf. That's what I've done in the "Sleeper" demo (the first of the two shown above). The remainder of this page explains how that demo is constructed.
Architecture
The main object movie for "Sleeper" (sleeperDemo03.1.fla) contains four layers (from the top):
- Buttons
- General Scripts
- Frame Actions
- Movie
The bottom layer, "Movie," holds the QuickTime content. I took the default option for frame assignment during the import procedure, meaning that each frame of my QuickTime source became a frame in the Flash movie. The Flash movie also assumes the frame rate of the source, which in this case is 12 frames per second.
The fourth and topmost layer of the main movie holds a series of keyframes, each keyframe containing two buttons. The right-arrow button is scripted as follows:
on(release){
_root.advance();
}
The left-arrow button is scripted like this:
on(release){
_root.reverse();
}
The two functions invoked in these buttons are defined in the first frame of the second layer, "General Scripts." They look like this:
function advance(){
gotoAndPlay(_root._currentFrame+1);
}
function reverse(){
unloadMovie(1);
gotoAndPlay(_root._currentFrame-12);
}
The advance() function is simple: it uses the _currentFrame variable, which is automatically generated, as a point of reference and jumps ahead one frame. We'll see what that accomplishes in just a bit.
The reverse() function does something similar, jumping twelve frames backward from each given point. As you can probably guess, the movie is structured with stop points every twelve frames, so this jump takes us back to the previous stop on the tour.
The reverse() function also contains the method unloadMovie(1), which removes an swf loaded into Level 1. You'll see what this is all about as you read on.
Now for that all-important third layer, "Frame Actions." This layer contains seven pairs of keyframes. In each pair, the first keyframe contains a stop() action. The seven stop points represent those moments at which camera movement ceases and a character dissolves in.
This effect offers one of the most powerful reasons for using video in Flash: by controlling the Flash timeline, interactive devices such as buttons can also control the video playback. Note that these controls can also be used to jump across the sequence of the video, raising possibilities for nonlinear presentation.
In addition to the stop() action, the first of each paired keyframe also contains a loadMovie() command. These commands load one of seven movies, each containing a simple alpha dissolve that lays the image of a character over the current view. These movies are loaded into Level 1, immediately above the main movie. Because their backgrounds are blank, the lower layer shows through. Note that the timeline of the dissolve is independent of the main movie timeline, which is halted by the stop() statement.
The second of each keyframe pair contains the statement:
unloadMovie(1);
This command removes the movie currently loaded into Level 1 (i.e., the current character) so as not to spoil the illusion of moving to another place and causing another character to appear.
Applications
So what is this technique good for? If you're not in the market for pseudo-surrealist interactive video, consider how you might integrate character animation with real video to do guided tours, product presentations, or process analyses.
Source files
The source files for the current "Sleeper" project can be found in MMShare/sleeper03/ on Crow; the source files for "Turismo" are in MMShare/workshop/turismo/. You'll find the QuickTime video sources as well as the Flash sources. "Sleeper" also requires seven additional swf's, included in its directory on Crow.
An earlier version of the "Sleeper" demo, produced in 2002 when we were still using Flash 5, can be found in MMShare/sleeper02. As noted above, this movie must be exported as QuickTime (.mov), which makes the frame coding a bit less elegant. If you're not concerned about Flash 5 compatibility, don't bother with this older example. Otherwise see last year's writeup.
