CANFIELD STUDIOS Flash MX/6 Example Files

NEW, BELOW:
Mouse Position Timeline Control (2006/11/21)

The links here are for browsers that have the Flash 6 plug-in, or later (FireFox/Netscape/Opera/any Mac browser) or activeX control (IE/Win) already installed and working properly. For ease of editing and to keep files as simple and small as possible, none of these samples includes browser- or plug-in/activex-control detection — so if you don’t have it, you’ll get a big fat nothing.

As time allows, I will be converting and adding MX/6-specific versions of all the examples in the Flash 5 Samples section, which, for the most part, were items created, on the fly, while visiting various newsgroups and message forums, in an attempt to answer user questions by demonstration.

Most of the samples include links to download the source FLA files in Zipped (PKZip) format. Some of them, however, contain fonts that may not be on the receiving system, in which case, they may look significantly different.

You are welcome to download the sample files to dissect them and learn from them, but please be sensible and ethical and DON’T post them on YOUR website as your own work.

These samples are provided as is. They contain precious little text, as yet, explaining anything about what’s going on, but I figure since the FLA is available, you’ll probably be able to figure it out. I make no warranty as to the servicability of these files for any particular purpose, and will not be responsible for any damages resulting from showing these to your friends. They will not make your car run faster, or get you the guy/gal of your dreams, and you’ll still have to brush your teeth, and don’t put that in your mouth; you don’t know where it’s been.

Here is a link to the most current list of web sites devoted to Macromedia Flash and Flash developers, which you may find useful in your pursuit of Flash Perfection (you are in pursuit of perfection, aren’t you?).

http://www.macromedia.com/support/flash/ts/documents/flash_websites.htm

THE EXAMPLE FILES:

Array-Based Quiz (Multiple Choice)
This example uses a movie clip to load data in the form of a delimited string, which is then split to a two-dimensional array. This quiz provides and option for sequential display of questions (in the order they appear in the data file) or random presentation. It also provides an option (via a value in the data file) that will randomize none, all, or the first N number of the multiple choice answers. This makes it possible to leave the last answer as the last answer (i.e., "All of the above"). There is an option to display the answer to a particular question immediately after the user has answered, as well. User may continue by hitting the Enter key or clicking on the continue button. The user’s response to each question is stored in the array, as well, and score is tabulated at the end.

Background Scroll
This a an example, reworked from an old Flash 3 tweening example file, of attaching and manipulating motion of a single linkage object provide the illusion of a continuous background.

Background Scroll of Image Wider than Maximum Image Size
This a an example of scripted movement of a background image, but also of how to deploy an image that is actually larger than the Flash work area and larger than the maximum allowed image size.

Button Clock
Has 12 dynamically duplicated movie clips used as buttons which cause a super-imposed clip of the same shape as each button to rotate around the clock face to the most recently pressed button.

Button — Dynamic Creation
Consists of single frame, single layer movie, with only scripting on that one frame. Buttons are generated dynamically entirely from text. Button events change not only the background button color, but the color of the text, as well, on rollOver, rollOut, and on press, disabling the current selection but returning previously selected button to enabled state and color.

Button Fade
Fades-in external movie clip on rollover of button. Fades-out clip on rollout. Makes clip disappear on click and resets previously clicked button.

Button of Glass
This example shows application of highlights and shadows using vector shapes to simulate specular reflections common to glass objects.

Button — 3-Way
This example shows a method, though certainly not the only method, of creating a button that can detect a click, a double-click, or a click-and-hold.

Button Scaling of Clip
This example has a clip that is controlled by the rollOver and rollOut states of a button. On rollOver, the clip begins shrinking to a minimum size specified in the clip’s onClipEvent(load). Once it reaches the minimum size, it stops. On rollOut, whether the clip has stopped or not, it begins returning to 100 percent size.

Button States (2 Buttons)
This example demonstrates one method of deactivating a button (physically unclickable), with a corresponding visual cue to the user.

Button States (5 Buttons)
This example is similar to the one above, but keeps track of which button of 5 buttons was last deactivated and reactivates it prior to deactivating the one being clicked.

Clip Event Scaling
This sample contains a movie clip that constantly scales between an upper and a lower scale limit, all controlled with an onClipEvent.

Currency Formatting
This sample includes a function that receives parameters for value, number of decimal places, and the character to use as a separator in the great-than-zero part of the number, for instance, commas in “1,000,000.00”. If no separator character is specified (comma is default), none will be used. If no places are specified, or places is specifed as zero, the number will be a rounded integer. This example uses input textfields for allowing the user to specify the values, but the function has also been built to accept actual numeric values, and includes error trapping. Function includes verbose commenting.

Currency Rounding
This sample shows how to always display currency values with two digits past the decimal. This can be modified to show however many decimal places you choose.

Emboss Text — with Dynamic Text (without Breaking Apart)
This example shows a “poor man’s” method of creating embossed text (best if limited to 1 pixel or less thickness), without having to break apart the text, such that the text remains editable. NOTE: This method does require the font to be embedded.

Fade Cycle with SetInterval
Movie clip fades in and out using setInterval() launched with onClipEvent(load).

Fade Picture Sequence
This example uses an onEnterFrame function on a sequence of pictures (here, just numbered rectangles) to fade in over a specific duration, display for a specific duration, and fade back out, also over a specified duration, then moving to the next picture and repeating the process, all by varying the display values in the first frame of the main timeline — NO TWEENS. All fading and display is time based, so executes at the same speed on any machine. After the last picture displays, it wraps back around to the beginning of the sequence, and starts over.

Fade-in/Fade-out Pictures
This example displays five pictures. On the first click of a button, the corresponding picture fades in. On subsequent clicks, the last picture to fade in fades out while the picture corresponding to the latest button click fades in. The values for minimum and maximum alpha, applied after the first click, are stored in an array in the controller movie clip, which performs all the fading. While a fade is in progress, button clicks have no effect, and the button last clicked is disabled. The controller re-enables the previous button on the next button click.

Fog — Animated 3D Effect
This example superimposes, over a JPG landscape, multiple layers of movieclips, each containing a "seamless" strip of two images, consisting of an all-white foreground PNG with an alpha channel mask, that mask being generated with Photoshop’s clouds renderer. Each of the multiple layers of movieclips moves at a different speed, giving the illusion of depth to the fog.

Load Images
This example file consists of a single layer, single frame FLA, and an external data source, and external JPG files. All containers for data and images are dynamically created and positioned. Contains valid checking routines both for completion of data load as well as completion of JPG file load. Also uses dynamically created textfield and textFormat object.

Load Images & Scroll/Pan Side to Side
This example file consists of a two-layer (second layer only contains rectangle to show stage size), single-frame FLA, and an external data source, and external JPG files. All containers for data and images are dynamically created and positioned. Contains valid checking routines both for completion of data load as well as completion of JPG file load. Also uses dynamically created textfield and textFormat object. In addition, this example incorporates a setInterval-based side-to-side scrolling or panning of the entire set of images, positioned in a single row.

Map Zoom
This example file shows zooming in and zooming out of §map¨ by clicking, with clicked point being relocated to center of stage. Also has floating (draggable) control mechanism for increasing and reducing the factor used for enlargment/reduction.

Mouse Alpha — Mouse Position Controlling Alpha Property
This example uses the user positionable boundaries and the mouse position to change the alpha property of a movie clip, as the cursor moves from side to side. Change boundaries either through input textfields or by dragging and dropping boundaries, themselves.

Mouse Position Timeline Control
Cursor position (_xmouse) controls the play of the timeline (forward and reverse) based on distance from center.

Naming Conventions
This is just a table of the naming conventions I use, showing the meaning of the three-letter prefix mnemonics I use for all names in Flash, as a method of making it possible to immediately discern the expected content, datatype, and/or object type of a particular element.

Nested Loop Matrix Construction
This example shows how to use a pair of nested loops to build a matrix of duplicated movie clips and position them in grid formation.

Nested Loop Diagonal Matrix Construction
This example shows how to use a pair of nested loops to build a matrix of duplicated movie clips and position them in grid formation, with the sequential numbering on a diagonal.

Outline Text — with Dynamic Text (without Breaking Apart)
This example shows a method of creating quasi-outline text (best if limited to 1 pixel or less thickness), without having to break apart the text, such that the text remains editable. NOTE: This method does require the font to be embedded.

Pause/Play Button (Toggle)
This demonstrates a couple a button toggling a boolean value in a variable inside a movie clip. The movie clip controls it’s own motion with an onClipEvent constantly monitoring the state of that Boolean variable.

Play to Label
Demonstrates how to use a button to play from the current position to a specific frame label name and stop on that frame.

Prime Number Generator
This example is a single-frame FLA that generates, as the title would indicate, prime numbers. It does so using a setInterval, rather than with code loops, so it is never subject to the Flash player’s “endless loop” error message. Also uses an onEnterFrame delay on starting to ensure variables needed (stage dimensions set by onClipEvent(load)) exist before running.

Random Duplication — And Everything Else
This example duplicates an arrow movie clip, placing it in a random location, randomly scaling it, with a delay between each duplication. In addtional, the arrow clip performs its own fading in and out, starting at zero, and then fading between two random values until a random number of iterations have been performed, at which time, it fades back to zero and removes itself.

Sequential Tween
Stage contains 9 authored movieclips contained tweens, and plays the movieclips sequentially, launching the next only when the previous one is finished..

Set Mask (Dynamic)
Loads JPG into a holder movie clip that, itself, has an onClipEvent(load) making it invisible upon instantiation. Also includes a JPG load detection routine, and upon load completion, dynamically converts manually placed movie clip to a mask (draggable) over the JPG.

Slider Directional Timeline Control
This movie shows one method of using a slider control to move forward and backward in the timeline.

Spinner
This example shows a spinner, such as used for games, as a method of choosing the number of units to move, somewhat obliquely controlled by the user according to the length of time that the button is depressed. Uses dynamically duplicated clips and textfields, as well as a couple of setInterval functions.

Stop Watch
Button toggles on or off the time tracking. Includes a setInterval(), parsing of milliseconds to time units (hours, minutes, seconds, and hundredths of seconds), as well as display formatting (padding those units with zeros if less than two digits). As saved, launches in stopped state, but by simply changing initialized value of variable blnStatus from 0 to 1, begins tracking time immediately upon launch.

String Build
Hmmm. Hard to describe. Displayed (in a dynamically-generated textfield) variable is initialized with alternating 1s and 0s (ones and zeros), length determined by a user-defined string of actual text. Textfield begins at user specified alpha and fades into view, all the while, randomly changing 0s to 1s, and vice versa, until a user-specified time is reached, at which point, characters from the string are randomly inserted in their appropriate character positions, at intervals determined by string length and time remaining before target completion time. Thereafter, only the 1s and 0s still remaining are randomly changed to the opposite. Eventually, all the 1s and 0s are replaced with the characters from the string, at which time the string is complete, though it may continue to fade-in, depending on user settings.

Temperature Converter — F to C or C to F
This example consists of a single layer, single frame of code. Textfields — static and input — and event handlers are all created dynamically. Contains application of text format objects and textfield property modifications.

Text-to-Binary Converter (and Binary-to-Text)
This example provides labeled input windows and controlling buttons, all of which are dynamically generated, for converting ascii text to a string of 8-digit binary values, or vice versa. It has built-in error-checking for invalid binary entries, as well as ensuring that each is a set of 8 ones or zeros.

Text-to-Hexadecimal Converter (and Hexadecimal-to-Text)
This example provides labeled input windows and controlling buttons, all of which are dynamically generated, for converting ascii text to a string of 2-digit hexadecimal values, or vice versa. It has built-in error-checking for invalid hexadecimal entries, as well as ensuring that each hex value, if resolving to a single character is padded with a leading zero.

Text-to-Octal Converter (and Octal-to-Text)
This example provides labeled input windows and controlling buttons, all of which are dynamically generated, for converting ascii text to a string of 3-digit octal values, or vice versa. It has built-in error-checking for invalid octal entries, as well as ensuring that each octal value, if resolving to less than three characters in length, is padded with leading zeros.

Time Delay
This example is an MX remake of a Flash 5 example file, but the remake involves some significant improvements. All code is on the main timeline, in two frames. This is an example of how to cause a delay in a given timeline. There is a clock that can be made visible to show elapsed time, based on a boolean flag (variable) set in the _root.

Time Elapsed — Simple Textfield Elapsed Time Indicator
This example accesses the Flash player’s built-in clock and simply presents elapsed time in digital form in a textfield (converting hours, minutes, seconds, and hundredths of seconds to strings of two digits).

Time Lap
This example accesses the Flash player’s built-in clock and presents elapsed time both digitally (converting hours, minutes, seconds, and hundredths of seconds to strings of two digits), as well as with a clock face with rotating hands for each increment type.

Time-Out
This example consists of a single frame with only code. The code dynamically builds a clip and a textfield for display, and incorporates a mouse move detection that only displays the aforementioned clip and textfield if the mouse has not moved for a specified amount of time.

Tween Control
This example uses dynamically duplicated movie clip buttons to control dynamically duplicated instances of a movie clip that contains motion tweens. The one on the left will loop as long as the cursor is over the button. The middle on will loop once (play twice) on each rollOver). The third plays only once on each rollOver. In all three, however, the tween will always play to its conclusion before stopping.