This page describes a series of sketches I've built to demonstrate some uses for Flash you might find interesting. If you've poked around the class index page, you may have triggered one of these little movies by clicking on the "MORE" button in the splash movie. Now you can collect the whole set!
Disclaimer: Everything here was built before the advent of Flash MX, so some of the techniques, such as user-draggable masking, can now with other, simpler methods than those used in my code.
You can browse that code if you like. Source files (.fla) for each project may be found in the workshop directory within MMShare on Crow. Some projects require additional files such as Quicktime movies, which I have not included since some are quite large. Let me know if you need them.
Click on one of the thumbnails below to view the project. If you are using a slow connection please note file sizes, especially for Quicktime video.
Projects are organized into several subgroups:
- Basic Flash animations
- Montage effects in Flash
- Flash masking effects
- Flash/QuickTime hybrid movies
- ActionScript projects
I. Basic Flash animations
Project Name: Joyce
Type: Linear animations of text with additional graphic effects
Source File: joyce.fla
Object File Size (swf): 20k
The original movie, without the geometrical animations, tracers, and footprints, was intended to show the most basic Flash animation techniques. The additional graphics are movie clips, some of which get used or adapted in other projects as well.
Project Name: Murray
Type: Linear animations of text with additional graphic effects
Source File: murray.fla
Object File Size (swf): 32k
This movie is basically just text animation, except for the single bitmapped image that appears midway through.
II. Montage effects in Flash
Project Name: Lamps
Type: Montage of still images
Source Files: buildup.fla, buildup.br4 (Bryce 4)
Object File Size (swf): 395k
The source images comprise a series of rendered stills from a Bryce 4 virtual world. The camera remains stationary, while the intensity of light sources within the various figures changes sequentially. After importing the stills into Flash, I added the text animations. The very large size of the object file is caused by the bitmapped images, which I've saved in JPEG format to preserve image quality. GIFs would have been more economical, but I needed higher definition to balance the generally dark tones of the images.
Project Name: Buildup
Type: Montage of still images
Source Files: buildup.fla, buildup.br4 (Bryce 4)
Object File Size (swf): 560k
Images on the left were generated from a Bryce 4 model, with various objects set in place, turned invisible, then returned to visibility one at a time. On the right, the progressive text actually comprises ten copies of the complete text. In all but the final version of the text, some of the lines or words are filled with white so they will appear invisible. This technique gets around the tedious business of aligning independent bits of text. As in the previous example, the large file size is entailed by use of JPEG graphics. (Thanks to Sean Cohen for the Paul Rand quote.)
III. Flash masking effects
Project Name: masquerade
Type: Flash movie
Source File: masquerade.fla
Object File Size (swf): 21k
This is a simple demonstration of a masking layer in Flash. A large text symbol runs right-to-left in the mask layer over a series of animated movie clips, fragments of which show through.
Project Name: unsubtle
Type: Flash movie
Source Files: unsubtle.fla
Object File Size (swf): 136k
This is a more ambitious use of the masking layer for an "X-ray" effect. Two versions of the same scene are rendered in Bryce--one with and one without water. The waterless version is masked so that it shows only through the circular aperture, which seems to provide a window that can penetrate the water. The yellow outline that travels with the mask aperture is in a separate, unmasked layer whose animation is coordinated with the masking layer. The comparatively large size of this movie stems from the two bitmapped graphics.
Project Name: dynoMask
Type: Flash movie with multiple layers, masking, and scripted movie clips
Source File: dynoMask.fla (Flash)
Object File Size (swf): 160k
This complex scripting project demonstrates how to create a transparent mask that follows mouse movement--a relatively striking effect. Track your cursor over the daylight image to reveal views of the landscape at night, where there are people about. The version linked to this page has no link out; the version in the splash suite contains a rollover button that sends you back to the splash page when you find it.
Flash MX makes this technique much easier to implement; eventually I'll get around to building an updated version. If you're curious about the scripting involved in the present project, last year's course materials include a detailed anatomy of this project.
IV. Flash/QuickTime hybrid movies
These movies combine QuickTime and Flash content. Technically speaking they are QuickTime movies and require the QuickTime plug-in to play, but they incorporate a "layer" of content created in Flash.
Project Name: lotusFlash
Type: Flash/QuickTime hybrid
Source Files: lotusFlash.fla (Flash), lotusFlash.br4 (Bryce)
Object File Size (mov): 667k
The flying lotus-sitter was originally one of my Bryce/QuickTime experiments. The rather plastic-looking figure was built in Poser 4, then imported to the Bryce model. I set up the animation and rendered the movie there. The final blackout (zoom in on the pupil of the eye) is pretty cheesy, but it does provide a good excuse for bringing in some Flash text. I encountered some difficulty getting this movie to stream, at least on one of our Web servers; the solution seems to involve putting a play() action on one of the first keyframes.
Project Name: signposts
Type: Flash/QuickTime hybrid
Source Files: signposts.fla (Flash), signposts.br4 (Bryce)
Object File Size (mov): 950k
This second setting of the Michael Joyce tag combines a figure rendered in Poser (the hand), a scene modeled in Bryce, and text handled in Flash: the whole ensemble delivered as a QuickTime movie. The objects were animated in Bryce, the text in Flash.
Project Name: handCount
Type: Flash/QuickTime hybrid
Source Files: handCount.fla (Flash)
Object File Size (mov): 500k
Here Poser 4 comes in handy again. The object animation for this movie was done entirely in Poser, rendered over a static backdrop produced in Bryce. The resulting QuickTime movie was taken over into Flash. The pulsing circular animation is re-purposed from several other projects.
Project Name: multiMovie
Type: Flash/QuickTime hybrid using four QuickTime movies
Source Files: multiMovie.fla (Flash)
Object File Size (mov): 340k
This project was meant to explore whether it is feasible to use more than one QuickTime source in a Flash movie. It is indeed. The four movies that run on the monitor screens here were animated and rendered in Bryce. One shows a formation of flying pyramids, another a sunset over the ocean, a third shows a perilous flight through a canyon, and in the fourth, the camera follows a man plunging from the top of a very tall building. Note that the last movie consists of only 60 frames, while the others all have 120. Thus the fourth monitor remains blank until the three other movies have played halfway through.
Project Name: turismo
Type: Flash/QuickTime hybrid with button actions
Source Files: turismo.fla (Flash), turismo.mov (QuickTime)
Object File Size (mov): 2,230k
This project demonstrates the usefulness of Flash button actions imposed over a QuickTime movie. The movie records a tour of a virtual world (yet another Bryce product). Every 20 frames I have inserted a keyframe with a stop() action, plus instances of two buttons, one to move beyond the stop frame to the next motion frame, the other to jump back to the previous stopping point. Text labels roll in as we make each stop. In the final stop frame, the forward button calls a getURL() action that replaces this movie with the familiar splash.swf. Some textbooks claim that getURL() can't be used with Flash/QuickTime hybrids. This is not true.
To consider how this technique might be used in the real world, imagine an on-line real estate tour; or a quick trip through some virtual store shelves.
The large file size (2.23 megabytes) probably makes this project impractical for anything but best-case broadband delivery. Since getURL() works, however, it wouldn't be too hard to divide the movie into smaller segments that would stream more effectively.
V. ActionScript projects
Project Name: bughunt
Type: Flash movie with ActionScript effects (timer)
Source Files: bughunt.fla (Flash)
Object File Size (swf): 38k
This mindless little game demonstrates use of the getTimer() method, in this case to restrict the time available to solve a simple puzzle.
The user is confronted with a grid of squares. A nasty bug hides beneath one of them. When the user holds the mouse button down over a square, it disappears, but it reappears when the button is released. If the user clicks on the square that hides the bug, s/he wins.
A timer in the lower left corner shows elapsed time in milliseconds. If this timer reaches zero, the player loses.
Details of architecture and scripting are given in the anatomy of this project.
Project Name: talking head
Type: Flash movie with ActionScript effects (Sound)
Source File: talkingHead.fla (Flash)
Object File Size (swf): 230k
This project is primarily meant to demonstrate use of the ActionScript Sound object and various of its methods, including attachSound().
Several short sound clips, ranging from less than a second to about 7 seconds, are associated with the movie as Exported sounds. These sounds are then attached to a Sound object and played according to random selection
The project has a number of other features not strictly related to sound. The simulated lip-synching (not a very plausible illusion) is accomplished by jumping to one of sixteen frames at random. Each frame contains an image of the head forming a different sound or phoneme. The head shots were down in Poser 4, then reprocessed into GIFs using Photoshop.
The text that accompanies each soundbite moves up the screen according to an animation script. It waits at the top of the screen until the sound file has finished playing, plus an additional 1.5 seconds. Since ActionScript (unlike Lingo) has no property to indicate whether a sound has finished playing, it is necessary to enter the length of every sound bite into a variable, which controls the delay. This delay value is compared to an elapsed-time variable that refers to the getTimer() function.
Project Name: noisy room
Type: Flash movie with ActionScript effects (Sound & type animation)
Source File: noisyRoomImproved.fla (Flash)
Object File Size (swf): 81k
This project captures in aural and textual form the experience of standing in a room filled with people who are all talking at once--it's a cocktail party simulator, minus (alas) the cocktails.
Several phrases and sentence fragments appear on the screen; each one is a move clip residing in its own layer. Each clip has an enterFrame handler that does several things:
- computes the distance between the current mouse position and the center of the movie clip--this is done by good old Pythagorean triangulation;
- sets the volume of a certain Sound object to a particular level depending on how close the mouse is to the center point of the clip;
- modifies the height, width, and alpha of the text in the movie, also according to the distance between the clip and the mouse;
- stops playing the Sound object if the volume reaches zero, and restarts the Sound object if its volume setting goes above zero and it has been previously stopped.
For detailed discussion of this project, see the anatomy page.
Project Name: fallout
Type: Flash movie (game) with extensive scripted behavior
Source File: fallout7.fla (Flash)
Object File Size (swf): 89k
This is a deceptively simple arcade-style linear video game executed in Flash. You can maneuver the walking man right and left over the scrolling background to avoid falling objects and intercept prizes.
If the man is struck by a bowling ball or cinder block, you lose points according to a sliding scale, with greater deductions the higher your current score. The prizes (easter eggs) diminish in value as they fall, so it's best to intercept them as soon as possible.
This project represents pure scripting: very little in the game depends on timeline animation. The main scripts are installed on the walking man and the various falling objects, cinder blocks, bowling balls, and easter egg.
The continuous scrolling background is generated by two movie clips, each of which contains ten scene graphics. This movie clip moves from left to right across the screen. At the right edge its right edge is aligned with the left screen edge, and one of the ten scene graphics is made visible by random selection.
I'll be posting anatomies for various parts of this project over the course of the term.
Project Name: spinWalker
Type: Flash movie with scripted behavior
Source File: spinWalker.fla (Flash)
Object File Size (swf): 1.1MB
This is a simple demonstration combining frame animation with a very basic user control. The walking figure was generated in Poser 4, which contains built-in animations for several kinds of walk. I rendered 15 frames of the character walking, then rotated the model 45 degrees and rendered 15 more frames, and so on until I had eight frame sequences representing the character seen from eight vantage points forming a complete circle.
I brought the resulting frames into Flash, composed a looping Movie Clip for each of the eight views, and then installed those clips within a main movie, each with an instance name and each in its own layer.
The user controls consist of an invisible Movie Clip laid over the rectangle shared by the eight character animation clips. This clip sets a flag variable one way when there is mouseDown to the left of its center point, another way when mouseDown occurs to the right. The flag variables are read by an enterFrame handler, which resets the visibility of a particular layer of the movie depending on whether the character is to be (apparently) turned left or right.
Since the object file size is large, I have also added a preloading apparatus.
