Time to do something useful with this space. Last time I did that seems like ages ago. This time round I'll be discussing the fundamentals of Flash MX What is Flash?
So, what's the big deal about Flash, I hear you ask? Well, Flash of course is a very fine primarily graphical tool for building websites, presentations and interactive multimedia applications. Though Flash supports programming - in Flash MX this has achieved a verily adequate level - Flash is still primarily a graphical tool, allowing you in effect to create interactive (or directed) animations. The primary difference between Flash and Macromedia Director, for those that know it, lies in the fact that Director is a raster based environment (using direct pixel manipulation as an actor) while Flash is a vector based environment. Also, Director has more support on the file level and has more plug-in support. On the other hand, Director is heavy and not well suited for the web, whereas Flash is primarily a web authoring tool.
The Flash environment may be divided into four basic aspects:
1. Vector based graphics
2. A keyframe based timeline
4. A rather limited programming environmentVector based graphics
Flash is almost entirely vector based, though it does allow you to import raster based graphics to use as plain images in your animations or as textures for specific objects in your animations. From the above statement it will be obvious that one will first need to understand what vector graphics are versus raster graphics. Vector graphics are rather easily explained as a combination of point data, arc information and area delimitation. What this means is that using a number of points on a canvas you'll be able to draw lines (or arcs) between those points. If you draw a line to enclose specific part of your canvas, you'll have created an area, which you may subsequently fill with a specific color, just as you may pick a custom line colour and line thickness.
Raster graphics on the other hand don't work with points, arcs and areas, but rather work with pixels. As a result raster graphics may be directly rendered to the screen, whereas vector based data first needs to be computed and converted to raster data (that is pixels) before it can be rendered to the screen. Another big difference is that whereas raster graphics have a fixed canvas size, vector programs (like Adobe Illustrator and Macromedia Flash, under discussion right now) mostly only specify a visible area of the canvas. In other words, vector data may also lie outside of the rendered canvas area (also refered to as document size
Flash makes extensive use of vector graphics, because it's lightweight and simple. The first factor means that storage sizes (and the associated download requirements) won't be as high as compared to raster data. The second argument for using vector graphics means that it will be easy to calculate many different vector shapes per frame, many more then would be possible with the complex transformations require for pixel (or raster) data.A keyframe based timeline
What is refered to as a timeline in animation software is most often a long sequence of equaly partitioned segments of an animation. Each of these segments would then be an image or element from that animation, in effect giving nothing more impressive than what can be achieved easily on paper: a list of images, which when flicked fast enough will provide the illusion of animation. However, working within a digital environment offers the major advantage that you won't have to create each of the individual images, but rather can specify an original and an altered version of a single image, which you may have the animation software interpolate the intermediate animation elements - or frames - for. These original and altered versions of the same images each occupy their own frame and are therefore refered to as keyframes (they play a key role in the animation).
Flash, as stated, uses a keyframed timeline, which means that to create an animation you will need to insert a keyframe every so often. On the other hand you can have Flash interpolate certain aspect of image transformations between two or more keyframes, a process refered to as tweening
. The amount of non-keyframes between two keyframes, in combination with the set framerate for the entire movie (which determines the number of frames rendered per second), will determine how long a tween will play.
To create a tween, first you'll need to create the initial keyframe (if it doesn't yet exists), after which you'd create the second keyframe. Only after creating the second keyframe should you alter the image, as otherwise the initial keyframe will be adjusted as well. When the two keyframes have been created, a Motion Tween can be created by either right-clicking on the timeline between the two keyframes (marked by small circles at the bottom of the frame marker) or by using the Insert menu and selecting Create Motion Tween. A tween may then be further controled from the properties panel.Symbols
Symbols are quite possibly the most important element in Flash. They allow you to create far more complex and interactive animations than would be possible with only a single timeline. There are three different kinds of symbols: graphics, movies and buttons, all of which may be set to be interpretted as one of the others.
Graphics are rather basic. They only require a single keyframe and don't animate. They're simply static graphical elements, like the name implies.
Movies on the other hand are more complex and offer a new timeline for each movie, in effect creating sub-animations within the main animation. They're rendered synchronous with the main animation, but need not necessarily be of the same length, starting over from the beginning when required.
Last, but not least buttons offer the easiest way of interaction between user and application. They may be used to trap move movement and clicks as well as keyboard actions (if focused). In effect buttons are movie clips as well, though they only support four frames: Up (when the mouse is outside of the button), Over (when the mouse is over the button), Down (when the mouse presses down on the button) and Hit (specifying the mouse sensitive area of the button). Though it is possible to specify keyframes for each of these states, it is not a requirement and can as easily be filled in with non-keyframes. If no frame has been specified for a specific state, Flash will assume you'll want to use previous keyframe for that state as well, in effect turning non-existant state frames into non-keyframes.A rather limited programming environment
Though the programming language in Flash has been greatly improved upon version 4, the environment is still rather limited when complex tasks lie at hand, such as accessing external data, loading external movie clips themselves containing external references and suchlike. Still, Flash supports a great environment for simple scripting, such as stopping and playing a timeline, jumping to a specific frame or testing whether a certain movie has loaded. It is also possible to animate symbols, set text fields and manipulate the keyboard and mouse using scripting, though scripting within buttons is excluded in Flash.
One of the most fundamental concepts of Actionscript is the concept of layering. As Flash can support movies within movies within movies, some sort of mechanism would be required to control these movies. The most logical solution would be to place these movie clips in a hierarchical construct, which is exactly what Flash does. Beginning at the _root
, the primary or main movie clip containing all other internal or externaly loaded movie clips, one may reach subsequent movies by refering to their instance name. An instance name
is a unique name given to a movie clip dragged on to the canvas - also refered to as the stage
(note that the instance name does not have to be the same as the symbol name, as a symbol may be used multiple times throughout a movie). For example, if you'd have a movie clip called "circle" in the main movie clip, you'd refer to this movie clip as _root.circle, whereas if you'd have a movie clip called "square" within the movie clip "circle", you'd refer to that as _root.circle.square. As is the case with all good object orientated languages, Actionscript also has a specific keyword to refer to the current movie clip (whether this be _root or _root.circle, etc.) called this
. The latter may be very useful when you're not sure about the exact location from the root your current movie clip is located in or if you don't want to write the complete path out full. Furthermore Flash also supports the concept of _parent
(or rather this._parent
) which allows you to easily refer to the movie directly above the current one: e.g. _root.circle when you're in movie _root.circle.square.
Equaly important are the concepts of clip events
and regular events. The first category may only be used connected to a symbol outside of the symbol itself and allows to script for events such as when the movie clip first loads or unloads, or when a frame is being rendered. Regular events may similarily only be used outside of the symbol when connected to a symbol and allows you to script for the more typical types of events, such as when a mouse button is pressed or the mouse moves over the area of the movie clip, as well as keyboard events. In case of clip events you'd first select the movie clip instance you want to associate your script with and then write something like:
Whereas for a regular event, you'd perform the same first few steps, but then write the events handler as such:
where "enterFrame" and "release" specify the events to catch.
Code may also be attached to specific keyframes, which may be useful in case you want to prevent a movie clip from looping (in which case you'd add a keyframe at the end of your movie clip in which you'd script your movie clip to stop). Control like this may be achieved by using calls like stop()
, where good practice dictates you should prepend these calls by a reference to a movie clip. For example to stop the current movie clip from playing one would use:
To proceed to the next frame when the movie clip is stopped one could then use something like:
this.gotoAndPlay(this._currentframe + 1);
Which would set the playback head (i.e. the current frame) to the current frame index plus one and tell Flash to start playing the movie from there on (gotoAndStop() could similarily be used, but would tell Flash not to start playing from there, but to only display the frame). Frames may also be given textual identifiers, in which case they could also be refered to by their string names instead of a simple frame number.
Other then this, what is important to remember is that symbols each act as different movie clips and that even the _root, or main movie clip is only an initial symbol. This means that almost all elements in Flash are equal, though placed along a hierarchy. They've got the same method calls and can perform the same types of functions.Good practice guide
Only symbols can be motion tweened, only shapes can be shape tweened (morphed)
To create a shape tween you should use the properties palette
Use the library palette to create new symbols
You can alter symbol instances to create motion tweens by either altering their position, scale and rotation or by adjusting their properties
Include character sets in dynamic text fields to ensure that the text is rendered correctly on the client's machine
Movie clip instances are loaded separately on each keyframe and previously set data will be lost at that keyframe
When scripting, always refer to your movie clip and text field instances using a path name (whether it be from the _root up or simply a this)
Only use _root if you're absolutely sure your movie will be the main movie, use this._parent(._parent...) otherwise
Flash doesn't realy work too well when loading external data sources, so always specify complete (i.e. absolute) path names or URLs when refering to external sources
Place your timeline based scripting in a new movie layer so it will not get confused with the other movie content and doesn't interfere with tweening (scripting can only be inserted at keyframes)
The best information on Actionscript programming is found in Flash itself: have a look at the Actionscript Dictionary of the help sectionExternal resourceswww.flashkit.comwww.deja.com