A Project On

ADOBE FLASH
(Computer Graphics)

Submitted to: Submitted by:

Mr. Shaligram Prajapat Bhavana Pandey
IC-2K8-15
MCA V Sem
 WHAT IS FLASH?
Flash, a popular software developed by Macromedia, is
used to create animation programs with full-screen
navigation interfaces, graphic illustrations, and vector
graphics based animation programs with full-screen
navigation interfaces, graphic illustrations, and simple
interactivity in an antialiased, resizable file format that is
small enough to stream across a normal modem
connection.
 DIFFERENCE BETWEEN BITMAP AND
VECTOR IMAGE
Vector Image
•Vector-based images generally
contain well-defined elements such
as curves and shapes of various
colors. Each element is defined
mathematically by the computer.
•Easily scalable(resize-able)
•Extensions - *.EPS, *.AI, *CDR, or
*.DWG.
•Suitable for illustrations that require
precise measurements. It is not
good for displaying photo-realistic
images because images of this type
generally do not contain well-defined
shapes and curves.
Bitmap Image
•A bitmap image is quite literally a
collection of squares that, taken together,
make up the image. The squares might be
of different colors, but they are all the same
size.
•Difficult to resize bitmap images
•Extensions - *.PSD, *.JPG, *GIF, *.TIF, or
*.BMP.
•Suitable for photo-realistic images that
require complex color variations. Not
suitable for illustrations and drawings.
 COMPONENTS OF THE FLASH
WORKSPACE
 Stage: Objects you place on the Stage will appear in your published
movie.
 Timeline and layers: The Timeline is where you control the images
and sounds in your Flash document (Figure 2). The Timeline is
divided into frames. Layers control the stacking order of objects—the
order moves from top to bottom, so objects displayed in front are in
the top layer, while objects displayed in back are in the bottom layer.
 Edit bar: The edit bar, at the top of the Stage, lets you quickly
navigate between different parts of your.
 Panels: Panels provide easy access to controls that help you work
with the content in your document.
 Toolbox: The tools in the Tools panel let you draw, paint, select, and
modify artwork, as well as change the view of the Stage
 The Pencil Tool
The Pencil tool is used in much the same way that you would use a real pencil to draw.
Simply select the tool and drag on the Stage to draw with the Pencil tool.

You can specify the color with the Stroke Color Tool.

You can apply smoothing or straightening to the

lines by setting a Pencil mode.

You can specify line style (solid, dotted etc.),

line width in pixels and color using the Stroke
panel.
 BRUSH TOOL
The Brush tool draws brush-like strokes, as if you were painting. It lets you
create special effects, including calligraphic effects. Unlike the Pencil tool,
the Brush tool draws both a fill and an outline.

Brush Modes:

NONE | NORMAL | BEHIND | SELECTION | FILLS | INSIDE

Brush Size: Also, in the Brush options, there is a drop down that lets you select the
size of the brush. Simply click the size you want.

Brush Shape: Finally, the Brush options lets you select the shape of the brush.
 THE LINE TOOL
The Line tool is used in much the same way that you would use a real
pencil to draw with a ruler. Simply select the tool and drag on the
Stage to draw a straight line between the start and end points.
Curving and Moving: You can turn a straight line into a curve or
move it from one place to another on the stage with the help
of the Arrow tool.

Precise size and positioning: You can position the line perfectly by using the
info panel.
Info Panel : Window > Panels > Info
 OVAL TOOL
The Oval tool is used to make circular objects. Simply select the tool and
drag on the Stage to draw a circle that spans between the start and end points.

Ctrl+G : Grouping Outline with Fill

When we draw an object like circle, Flash actually creates two objects: the fill and the
outline. This may cause problems if you try to move your circle to a new position,
because if you fail to select both objects, only the one selected will be moved. To avoid
this it's often a good idea to "group" the outline with the fill, thus locking them together
as if it was a single object.

1: Make sure both the fill and the outline is selected by following either of these 2
approaches
1) Select the Arrow tool in the toolbox, and while holding down the SHIFT key click on
both the fill and the outline. 2) Select the Arrow tool in the toolbox, and drag a
rectangle outside your circle)

2: Press Ctrl+G to group the selected objects.

 RECTANGLE TOOL
The Rectangle tool is used to make rectangular objects. Simply select the
tool and drag on the Stage to draw a rectangle that spans between the
start and end points.

Rounded Corners:
You can specify the rounding of the corners with the "Round Rectangle Options" at
the bottom of the toolbox.

Skewing
Before skewing a rectangle make sure it has been grouped. You can skew the rectangle in two
ways.
To skew an object by dragging:
1. Select the object with the Arrow tool.
2. Click the Rotate button in the toolbox options.
3. Drag one of the centered handles.

To skew an object using the Transform panel:

1. Select the object.
2. Choose Window > Panels> Transform.
3. Click Skew.
4. Enter angles for the horizontal and vertical values.
 ERASER TOOL

The Erase tool works similar to a classic eraser. Simply select the tool and
drag on the Stage to erase things.
Double-click Eraser Tool: Erase All

Using the Eraser Mode Option:

 Erase Normal - erases strokes and fills on the same layer.
 Erase Fills - erases only fills; strokes are not affected.
 Erase Lines - erases only strokes; fills are not affected.
 Erase Selected Fills - erases only the currently selected fills and does
not affect strokes, selected or not. (Select the fills you want to erase
before using the Eraser tool in this mode.)
 Erase Inside - erases only the fill on which you begin the eraser stroke.
If you begin erasing from an empty point, nothing will be erased.
Strokes are unaffected by the eraser in this mode.
 Using the Faucet Option:

To remove stroke segments or filled areas:

1. Select the Eraser tool and then click the Faucet modifier.

2. Click the stroke segment or filled area that you want to delete.

Using the Eraser Shape Option:

In the options listed at the bottom of the toolbox there is a drop down that
lets you specify the Eraser shape and size.
Use this option to customize the size and look of the eraser.
 INK BOTTLE TOOL
The Ink Bottle tool lets you change the stroke color, line width, and style of
lines or shape outlines.

PAINT BUCKET TOOL

The Paint Bucket tool fills enclosed areas with color.

It can both fill empty areas and change the color of already painted areas.

You can paint with solid colors, gradient fills, and bitmap fills.

You can also use the Paint Bucket tool to adjust the size, direction, and
center of gradient and bitmap fills.
 EYE DROPPER TOOL
You can use the Eye Dropper tool to copy fill and stroke
attributes from objects.

To use the Eyedropper tool:

1. Select the Eye Dropper tool and click the object whose attributes
you want to copy. (When you click a stroke, the tool automatically
changes to the Ink Bottle tool. When you click a filled area, the tool
automatically changes to the Paint Bucket tool)

2. Click the object that you want to apply the new attributes to.
 PEN TOOL
The purpose of the Pen tool is to allow you to draw precise paths as
straight lines or smooth, flowing curves.

You can create straight or curved line segments and adjust the angle
and length of straight segments and the slope of curved segments
afterwards.

There are two methods for drawing with the Pen tool:

1. Click to create points on straight line segments

2. Click and drag to create points on curved line segments.

 THE LIBRARY
 When working in Flash, you may find yourself having a
large collection of symbols such as movie clips, buttons,
and graphics. Having so many symbols can be difficult
to keep track off, but Flash provides you with a feature
that makes it easier - the Library. The Library is a
centralized location where you can view, browse, add,
delete, and organize symbols in much the same way as
you would move and edit files on your computer.
 Preferences:
You can completely customize your Flash MX experience
by changing your Preferences. To do this, click on Edit-
>Preferences to open a dialogue containing five tabs
that let you change your program settings.
 FLASH SYMBOLS
A symbol is a reusable object used/created in Flash. Flash handles
three types of symbols/objects:

 Buttons
 Movie clips
 Graphics objects

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.
  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.
Creating a Graphic Symbol:

1. First create/import the object(s) to be converted into a graphic.

Import bitmaps onto the stage using Ctrl+R.
2. Select the object(s) and then press F8 (or Modify >> Convert to
Symbol).
3. Select the Graphic Behavior and name the symbol
4. To edit it at a later point, double-click the symbol in the library
(Ctrl + L) or any of its instances on the stage to switch to its
symbol-editing mode as shown below. The name of the symbol
will appear near the scene name
5. Make the necessary changes and click 'Scene 1' to exit from
the symbol editing mode and go back to view the main movie's
time-line.
 Flash Button Symbols
 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.
CREATING A BUTTON

1. First create/import the object(s) to be converted into a button. Import

bitmaps onto the stage using Ctrl+R.
2. Select the object(s) and then press F8 (or Modify >> Convert to
Symbol).Select button behavior and give the symbol a name.
3. Draw a button the way you want it to be when no mouse event is
detected.
Notice that the active frame is labeled "Up" in the timeline.4:
4. Insert a key frame in the frame labeled "Over" in the timeline.
(To do this: Click on Layer 1 in the white cell below where it says "Over".
Then press F6.)
5. Draw a button the way you want it to be when a mouseover, mousedown
and mouseclick event is detected.
6. The last frame, labeled "Hit" is special. It is simply used to specify the
area that triggers mouse events.
  Movieclip 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 movieclips 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.

 Creating a movie clip

1. First create/import the object(s) to be converted into a movieclip. Import bitmaps onto the stage
using Ctrl+R.

2. Select the object(s) and then press F8 (or Modify >> Convert to Symbol).

3. Select the Movieclip Behavior and name the symbol.

4. Double-click the instance of object on the stage to switch to its symbol-editing mode. Now
create an animation sequence which can be either tweened or frame by frame.
FRAME BY FRAME ANIMATION
 The principle of frame-by-frame animations made with
drawings is that you draw various versions of the same
objects in different frames. These are then displayed one
after each other in rapid order (most often between 10-25
frames / second).
 A frame is a drawing that is displayed at a given time. In
the timeline, each stop in each layer of the timeline is a
frame and they are numbered
CREATING FRAME BY FRAME
ANIMATION
 Create a new movie.
 Youll have to insert a bunch of keyframes. This is most easily accomplished
by using the keyframe shortcut, F6. On a Mac, you may have to set the F6
shortcut in Edit-> Shortcuts.
 Click on Frame 1 and hit F6 a whole bunch of times
 Youll get a bunch of blank frames. Youll only get a black dot keyframe
when you put something on the screen.

 Youll get a bunch of blank frames. Youll only get a black dot keyframe
when you put something on the screen.
 
 Next youll turn on Onion Skinning. This will allow you to see previous
frames so you can keep your animation fluid
 Click the Onion Skin button

 Onion Skin markers will appear above your frames. They look kind of like
bookends.
 Drag the Onion Skin markers to cover five frames.
 Click in Frame 1 and draw something in the movie.
 On the keyboard, hit the right carrot ( > )
The playback head will move one frame.
Notice that you can still sort of see frame ones image. This is the Onion
Skins working.
 Draw a slightly different image on Frame 2
 Repeat Steps 6 and 7.
 TWEENING IN FLASH

Tweening comes from the words "in between".

With Tweening you can go from one keyframe to another
and specify changes in the animation and let the Flash
program create the frames in between.
There are two most prominent types of tweening:
 Shape Tweening

 Motion Tweening
SHAPE TWEENING
By tweening shapes, you can create an effect similar
to morphing, making one shape appear to change
into another shape over time. Flash can also tween
the location, size, and color of shapes. A shape
tween morphs one shape into another. Circles
become squares, blue letters become yellow
buttons. A shape tween can change the shape or
color of any vector object.
MOTION TWEENING
Motion tween is nothing but tweening a Symbol's
movement from one position to another.
To implement Motion Tween all that you have to do is,
provide Flash with Symbol's initial position and the end
position. After doing this, you can create motion
tweening by creating a symbol and then copying your
key from your first frame to your last frame before
selecting "Motion Tween" from the Properties bar, or
right-clicking on the timeline and selecting "Insert
Motion Tween", or by going to Insert->Create Motion
Tween.
SOME OTHER TERMS USED IN FLASH
 Alpha values: These are used to change the transparency or
opacity of a symbol. The transparency increases as the value
decreases.
 Custom gradients: Flash comes along with 6 in-built gradients,
out of which two are linear and the others, radial. Further, you can
unleash your creativity and make your own gradient. Clicking on
the color icon in the modifier tray opens up the color palette. You
can either be satisfied with the colors Flash has to offer here or click
on the top icon to open up the color window.
 Skewing and scaling: This helps you to rotate and object by a
specific angle or change its dimensions i.e. change its size.
 Frame rate: Frame rate or frame frequency, is the frequency at
which an imaging device produces unique consecutive images
called frames.
 SWF files: Animation created with Adobe Flash may contain text as
well as both vector and raster graphics; also may include interactive
actions written in ActionScript; plays in Web browsers that have the
Flash plug-in installed.

Flash was originally developed by Macromedia, which was acquired

by Adobe Systems in 2005. Therefore, Macromedia Flash is now
called Adobe Flash.

SWF stands for "Small Web Format" and is pronounced "Swiff."