Macromedia Flash

By Boopathiraja

Macromedia Flash Macromedia's popular application Flash has redefined the way web developers
approach web design. With Flash the web developer is now able to create a user experience that is
rich in media and relatively quick loading, especially compared to traditional methods like GIF

animations.

Websites made up of music, videos, and custom, graphic intensive interfaces are all possible with
Macromedia FlashMacromedia Flash is an industry leading tool that supplies its users with
animations, presentations, and mind blowing websites, while doing this at a constant low
bandwidth.  

Introduction of Macromedia Flash

Introduction

Flash is a program by Macromedia for creating interactive, animated online content. Animated simply
means "to have movement" -- Flash content does not have to be a cartoon. It is commonly used to
mimic software interface elements such as scroll bars, drop-down menus, buttons, and navigational
systems. The term "Flash" has also come to mean the actual files created using Macromedia’s
program of the same name.

Getting to know the Flash authoring environment makes you more effective and efficient as you
create movies. You'll get to know the parts of the Flash window, which include the Toolbar, Timeline,
Stage, panels, and Property Inspector.

The Toolbar, also known as the Tools panel, contains tools that you can use to draw, paint, select,
and modify artwork. The Timeline represents the overall structure of a Flash document and controls
the content. The Timeline consists of layers, frames, and scenes that make up a Flash document.
Layers are like transparent sheets stacked on top of one another. Each layer can contain different
images that appear on the Stage. A frame displays content at a specific moment on the Stage. The
order in which frames appear in the Timeline determines the order in which they appear in the
document. As you play a document, the playhead moves through the Timeline displaying the current
frame with each layer on the Stage. If a project requires many animation sequences with hundreds of
frames, you can organize the animations into scenes to make them easier to work with and manage.
Below the Timeline is the Stage, which provides a place to compose the content for individual frames.
Panels are windows that allow you to view, organize, and change elements and related options in a
document. The Property Inspector is a specialize panel that allows you to change object specific
attributes and options.

With Macromedia Flash MX Professional 2004, you can author, preview, publish, and validate content
for Flash Lite.

Flash MX Professional 2004 uses two versions of the Flash Player for authoring: the Flash MX
Professional 2004 test movie player and the stand-alone player. Whenever you select the Control >
Test Movie or Control > Test Scene menu commands in Flash MX Professional 2004, the test movie
player is started. You can use the stand-alone player to view an existing Flash SWF movie after it has
been published. Once you have set the publish settings for Flash Lite, you can preview SWF files
using the test movie player and additional information, warning, and error messages will be displayed
to let you know if there is any violation of Flash Lite rules and syntax. This helps you determine how to
make the content Flash Lite compatible.

Flash movies

A movie clip is a symbol which (generally speaking) resides in the library, with one or more instances
of it on stage.

The content in a movie clip can be anything from a single shape in a single frame to multiple layers
containing content (often including other movie clips) changing over many frames.

Additional important things to remember about movie clips:

• Every movie clip instance has its own timeline, its own playhead, and its own functions and
variables.
• Every movie clip instance also has its own name, which may be assigned by you in the properties
panel, or will be assigned by Flash otherwise. If you want to control a movie clip instance with action
script, you need to give it an instance name.
• The main timeline of a Flash movie can also be treated as a movie clip instance (and controlled in
the same way as a movie clip instance, with some exceptions). Its name is _root. It can also be
accessed with the name _parent by a movie clip sitting in one of its frames.

_root is an absolute address; it always refers to the main timeline of the movie. _parent is a relative
address; it is a way of addressing a movie clip's containing movie clip (timeline), regardless of where
they both fall in the overall hierarchy of movie clips in the movie. A relative address is always
preferable because of its flexibility. Even if the published movie is subsequently loaded into a movie
clip in another movie (eg, for preloading purposes), all relative (_parent-based) addresses remain
valid, but _root is no longer the same.

• When a movie clip instance is encountered in the frame of a timeline (ie, when the playhead gets to
a frame holding a movie clip instance), the movie clip's playhead will begin playing immediately and
will continue to play unless told to do otherwise, or unless the playhead of the timeline it's in reaches a
frame where the movie clip doesn't exist. Ideally, a movie clip is placed in a single frame of a timeline,
or in a frame which has a stop action in it (in another layer named 'actions'). The stop action stops the
main movie, but the playhead of the movie clip continues to play.
• A movie clip always runs at the same frame rate as the main timeline.

Flash Toolbars

The menu bar at the top of the Flash application window displays menus with commands for
controlling Flash functionality. The menus include File, Edit, View, Insert, Modify, Text, Commands,
Control, Window, and Help.

The edit bar, at the top of the Timeline, contains controls and information for editing scenes and
symbols, and for changing the magnification level of the Stage.

The tools in the Tools panel let you draw, paint, select, and modify artwork, as well as change the
view of the Stage.

Additional important things to remember about movie clips:

• The tools area contains drawing, painting, and selection tools.

• The view area contains tools for zooming and panning in the application window.
• The colors area contains modifiers for stroke and fillcolors.
• The options area displays modifiers for the currently selected tool. Modifiers affect the tool's painting
or editing operations.
Symbols

A symbol is a reusable object used/created in Flash. A Symbol can be reused throughout your movie
or imported and used in other movies. There are three types of symbols: Graphics, Buttons, and
Movie clips.

A copy of a symbol used in the movie is called an Instance, which can have its own independent
properties (like color, size, function, etc.) different from the original symbol. All symbols used in a flash
movie are stored in the Library from where you can drag-and-drop new instances of the symbols into
your movie. When a symbol is edited all of its instances get updated, but changing the properties,
effects or dimensions of an instance of a symbol does not affect the original symbol or other
instances.

The three types of Symbols

Graphic symbols

are reusable static images that are used mainly to create animations. Any drawn vector/plain
text/imported bitmap (photo), or combinations of these, can be converted into a single controllable
object: as a graphic symbol. They have only one frame in their timeline.

Button symbols

are used for timeline navigation - They add interactivity to the movie and respond to mouse clicks, key
press or rollovers/rollout, and other actions. You define the graphics associated with various button
states (Up/Over/Down/Hit), and then assign actions to the instance of a button. They have 4 frames in
their timeline - one each for the up, over and down states, and one to define the hit area of the button.

Movie clip symbols

are reusable pieces of flash animation - consisting of one or more graphic/button symbols - thus they
are flash movies within your flash movie. They have their own non-restricted Timeline (any number of
layers and frames - just like the main timeline) that plays independent of the main movie's Timeline.
The best thing about using movie clips is that you can control them from actionscript - you can change
their dimensions, position, color, alpha, and other properties and can even duplicate and delete them.

Animation in Flash

While working in Flash you will find it necessary to create simple animation sequences.

In Flash, animation can be done in four basic ways:

• Motion Tween
• Shape Tween
• Frame-by-Frame Animation
• Guided Motion Tween

Creating Motion Tween

1. Draw a vector using any of the drawing tools in Flash, say a small circle and convert it into a
symbol (F8) by selecting the Graphic option and name the symbol say 'ball'.
2. Click the 20th frame in the Timeline and insert a frame (F5).
3. Now right-click the 20th frame in the Timeline and select Create Motion Tween (or Motion option
from the Tween panel of the Properties inspector) and insert a Key Frame (F6).
4. Select the 10th frame and insert a Key frame (F6) and move the ball to a different position say,
above the current position to create a motion sequence (automatically tweened by Flash).
5. Save your work and test the Movie (Ctrl + Enter). That's it you have created simple animation using
Motion Tween.

Timeline of Motion Tween

Use the Color Panel of the Properties inspector to reduce the Alpha value from 100 to 32 for the 1st
and last frames to produce Simple Alpha Tweening as shown in the Example.

Click here for animated presentation.

Creating Shape Tween

1. You can create Shape Tweened animations using Shape option from the Tween panel of the
Properties inspector. Draw a vector using any of the drawing tools in Flash, say a small circle and
remove its border.
2. Click the 10th frame in the Timeline and insert a Key Frame (F6). Now draw another shape say a
diamond using the rectangle tool without a border.
3. Now right-click on any frame in between these two Key Frames and select Shape option from the
Tween panel of the Properties inspector.
4. Save your work and test the Movie (Ctrl + Enter). That's it you have learnt how to create Shape
Tween in Flash.

Timeline of Shape Tween

Only vectors can be Shape Tweened (Not for Symbols). Note both the Tweens have different colors
along the Timeline as shown above. Make sure that the line is smooth without being broken to ensure
correct Tweening.

Timeline of Broken Tween

Click here for animated presentation.

Frame-by-Frame Animation

1. Create a vector/plain text using any of the drawing tools in Flash, say a text with 'Animation' typed
as shown in the example and break it using Break Apart (Ctrl + B) to separate the alphabets as shown
below:

Showing Text after Break Apart

2. In Frame-by-Frame animation we create the object for each frame so as to produce an animation
sequence.
3. Insert Keyframe (F6) and move the alphabets so as to produce an animation sequence.
4. Repeat the above step as far as desired to create Frame-by-Frame animation as shown in the
example.
5. Save your work and test the Movie (Ctrl + Enter). That's it you have created an animation using
Frame-by-Frame animation.

Timeline of Frame-by-Frame Animation

Creating a Guided Motion Tween

1. Create a vector/plain text using any of the drawing tools in Flash, say a text with 'Flash' typed and
break it using Break Apart (Ctrl + B) as done in the previous example and put each alphabet in
different layers and name the layers as shown in the picture below.
2. Insert a guide layer by right-clicking the topmost layer and select 'Add Guide Layer' (Insert--
>Timeline-->Motion Guide), draw any path using the pencil tool in the guide layer as shown in the
example.
3. Now create Motion tween by selecting the object in the 1st frame and snapping its registration point
to one end of the path.
4. Snap the object in the last frame to the other end of the path in the guide layer.
5. Repeat the same for all the objects (alphabets) by snapping their registration points to the path in
the guide layer.
6. Save your work and test the Movie (Ctrl + Enter). That's it you have learnt how to create motion
along a guided path.
Timeline of Guided Motion Tween

Click here for animated presentation.

Guide Layers

Motion Guides are paths drawn by you that your objects will follow. However, Motion Guides only
work with Motion Tweens. Remember that. Let's say you wanted to animate an a bird flying in a
curving path. You can do this by using a Motion Guide.
You can drag horizontal and vertical guides from the rulers onto the Stage when the rulers are
displayed. You can move guides, lock guides, hide guides, and remove guides. You can also snap
objects to guides, and change the guide color and snap tolerance (how close objects must be to snap
to a guide). Flash allows you to create nested timelines. Draggable guides appear on the Stage only
when the Timeline in which they were created is active.
You can clear all the guides in the current editing mode--document-editing mode or symbol-editing
mode. If you clear guides in document-editing mode, all the guides in the document are cleared. If you
clear guides in symbol-editing mode, all the guides in all symbols are cleared.