Getting to Know Adobe
Flash
THIS LESSON CONTAINS:
• Understanding Vector Graphics
• What is Flash"?
• Starting Flash in Windows 8
• Flash Workspace
• Selecting and Setting Properties
of a Drawing
LEARNING OBJECTIVES
At the end of this lesson, students should
be able to:
1. Identify the difference between a raster
and vector image;
2. Identify the elements of the Adobe
Flash CS6 workspace; and
3.Recognize the Flash tools needed for
drawing.
Understanding Vector Graphics
To create our first animation project, you
must first need to understand the two
basic ypes of graphics, Graphic images
that have been processed by a computer
can be divided to two distinct categories.
Such images are either raster or vector
graphics.
RASTER GRAPHICS
RASTER GRAPHICS
Roster graphics use a set of bits that
represent a graphic image. Each
bitmap-based image is mapped into a
grid. The size of the grid is based on
the image's resolution.
RASTER GRAPHICS
For example, a bitmap-based image of 1 inch
x 1 inch with a 600 dpi resolution would be
defined by a 600 x 600 pixels. Hence, a
bitmap-based image is like a mosaic of pixels
with sch pixel holding a specific color value.
File names for bitmap-based images consist of
extensions such as *.PSD, JPG, GIF, TIF, or
".BMP
VECTOR GRAPHICS
VECTOR GRAPHICS
Vector graphics are computer images that
are stored in memory as lines rather than
series of bits, allowing them to be rotated
or proportionally scaled. These images are
suitable for illustrations that require precise
measurements, which allow them to be
easily aled due to its mathematical nature.
VECTOR GRAPHICS
Vector images can easily be rendered to
different sizes or be transformed in other
an without worrying about the image
resolution and pixels. File names for
vector-based ages consist of extensions
such as EPS, AI, .CDR, or ".DWG.
WHAT IS FLASH?
Flash" documents are composed
mostly of vector images. Drawn
objects in Flash produce vector
graphics that can be exported to a
vector file.
FLASH
FLASH
Adobe Flash is a vector animation software
designed to create animations that can be
played on web pages. It is a multimedia
platform used to add animation, video, and
interactivity to web pages. Frequently, it is
used for advertisements, games, and Flash"
animations for broadcast.
FLASH
Flash gives the viewers a more responsive rich-client-like
experience. It has the ability to manipulate vector and
raster to provide animation text, drawings, and still images.
Many websites have a variety of contents that were
created using Adobe Flash technology. To determine
whether it is a content created using Flash authoring tool,
all you have to do is right click on the object, and on the
menu, there should be an "About Adobe Flash Player" at
the bottom.
ADOBE FLASH FILES TYPE
The main supported file type of Flash
FLA used to create artwork and animations. It
is similar to the relation of ".doc for
Microsoft Word and xls for Microsoft
Excel.
It is read as swift. The file associated
SWF with movies created using Flash
technology, an output of the raw. This
could be a cartoon or an Internet
application.
The video files for Adobe Flash Player.
FLV These are the actual movie files that are
Flash-based.
Also known as the ActionScript file. The
AS File file that contains inter- active codes used
to control Flash" applications.
STARTING FLASH
To start Flash CS6 in Microsoft Windows 8, just
locate Flash CS6 from the Start screen.
If you open Flash for the first time, it will display
a welcome screen. There, you will find links to
templates and even tutorials. Otherwise, it will
just take you to the application itself.
FLASH WORKSPACE
FLASH WORKSPACE
Stage - the white rectangular area of the Adobe
Flash. Objects are drawn and placed on Stage
for animating.
Timeline Panel - where you control the images
and sounds in your Flash" document. Objects for
animation are contained into Layers on the
timeline panel.
FLASH WORKSPACE
Panels - provide easy access controls to help you work with your
content in Flash. They are displayed as tabs that you can easily
click.
Tools Panel-displays all the tools that allow you to draw, paint,
select, and modify artwork, as well as change the view of the Stage.
Properties Panel-provides easy access to most common settings or
attributes of your current selected object. It can display information
about your current document, text. symbol, shape, bitmap, video,
group, frame, or tool.
FLASH WORKSPACE
Flash's default interface may not be for
everyone. You might want your toolbar
to be located at a certain location or a
panel to automatically open. That is why
Flash" allows you to customize
workspaces depending on your needs.
Switching Between Workspaces
1. Start Flash CS6 and choose File > New
(ActionScript 3.0).
2 After an empty Flash document opens, click the
Essential button near the sear textbox on the
upper right of the Flash workspace.
3. Select a preset workspace in the workspace
switcher. Try selecting each of the presets and
see how they differ.
Switching Between Workspaces
In case the five views do not satisfy your
needs, you can actually customize the
workspace depending on what you want. You
can do this by selecting the New Workspace
from the workspace preset list. When you are
already familiar with the panels, you can
create your own workspace.
Switching Between Workspaces
Creating a Custom Workspace
1. Open Flash and create a new
ActionScript 3.0 file.
2. Let us add a new panel. Click Window >
Other Panels > History. This will be added
to the History panel but shown floating
over the Stage.
Creating a Custom Workspace
Creating a Custom Workspace
3. Click and drag the top of the History
panel beside the Library panel.
Creating a Custom Workspace
4. When the panel container shows a blue
outline, release your drag.
Creating a Custom Workspace
5.Click the workspace presets button (Essential as the
default view) then choose New Workspace.
6.Name your new workspace as MyPreset then click OK.
7. Your new workspace is now displayed above the
preset workspaces.
Note: To delete a preset, click Manage Workspaces from
the presets list then select the preset to delete. After
selecting, click on delete.
DRAWING TOOLS
Getting to Know the Drawing Tools
1. Selection tool-selects and drags a selected
object to move it.
2. Subselection tool - selects and moves points
of the selected object
3. Gradient Transform tool - transforms a
gradient or bitmap fill by adjusting the size,
direction, or center of the fill.
4. Free Transform tool-resizes or rotates objects.
Getting to Know the Drawing Tools
5. 3D Rotation tool-rotates movie clip
instances in 3D
6.3D Translation tool - moves a movie
clip instance in 3D space.
7.Lasso tool-allows you to drag to a
selected area.
Getting to Know the Drawing Tools
8. Pen tool-creates straight or curved lines. You can
also create Bezier curves.
9.Add Anchor Point tool-adds new anchor points to an
existing path
10.Delete Anchor Point tool-deletes anchor points from
a path
11.Convert Anchor Point tool-converts the points on a
path between corners to smooth
points
Getting to Know the Drawing Tools
Getting to Know the Drawing Tools
12.Text tool - creates or edits text and text fields
13.Line tool-draws straight lines
14.Rectangle tool - creates rectangles or squares composed of fills
and just strokes
15.Oval tool-creates circles and ovals
16.Rectangle Primitive tool and Oval Primitive tool - individual
objects that can be edited in the Properties panel
17.PolyStar tool - creates either polygon or star shapes and you
can set how many points both will shapes have
18.Pencil tool - creates lines in any of three modes: straighten,
smooth, or ink
Getting to Know the Drawing Tools
19. Brush tool-creates shapes with fills only
20.Spray Brush tool-acts like a particle sprayer,
letting you "brush" a pattern of shapes onto the
Stage at one time. By default, the Spray Brush
emits a spray of dot particles using the currently
selected fill color. However, you can use the
Spray Brush tool to apply a movie dip or graphic
symbol as a patterns.
Getting to Know the Drawing Tools
21. Deco Drawing tool - apply an effect to a selected object.
Choose effects from the Properties panel
22.Bone tool-inverse kinematics (IK) is a method of
animating an object or set of objects in to each other using
an articulated structure of bones
relation
23.Bind tool-an inverse kinematics tool that allows you to
click a control point or a bone with this Bind tool and display
the connections between the bones and control points. You
can then change the connections in a variety of ways.
Getting to Know the Drawing Tools
24.Paint Bucket tool - adds fill inside a
shape or change the fill color Ink Bottle
tool-changes the color or width of a line, or
add a stroke to a shape
25. Eyedropper tool-samples a color from
swatches or anywhere on the screen
26. Eraser tool-erases parts of an image.
Drawing Shapes
A merge drawing blends shapes when
they overlap on the Stage. Shapes drawn
on top of other shapes will merge, which
means if you select one of the shapes and
move it, the underneath shape is cut away.
When selected, it display dots on the
shape.
Merge Drawing
Drawing Shapes
An object drawing treats your shapes as
grouped objects that can overlap without
affecting each other. When selected, it has
a rectangle surrounding it.
Object Drawing
Selecting and Setting Properties of a
Drawing
• In working with shapes, it is important to learn how to select and modify
the drawing. Shapes can be modified to fit your needs. In the Properties
panel, you can set the color, style, and size of the line or shape. The
Properties Panel provides easy access to the most commonly used
attributes of the current selection, either on the Stage or in the timeline.
• The options in the Properties panel are slightly different for each
drawing tool. For example, the rectangle tool includes Corner Radius
properties for creating rounded corners.
• The Oval tool includes Start Angle, End Angle, and Inner Radius
properties.
• By exploring these properties, you will know what and when a shape
property is needed.
Selecting and Setting Properties of a
Drawing
Cap settings control:
• None - ends the path of the stroke
• Round - adds a round cap that extends
beyond the path end by half stroke width
• Square - adds a square cap that extends
beyond the path end by half the stroke
width
Selecting and Setting Properties of a
Drawing
Joins settings:
• Miter -forms a sharp angle at the junction of
two paths. To avoid beveling a mitered corner,
enter a Miter value greater than zero
• Round-creates a smooth, rounded connection
between two paths
• Bevel-creates a beveled edge where two
paths meet
View Tools
While you work in Flash", you may need the view
tools on the toolbar that allows you to quickly move
on the Stage.
• Hand tool-drags the Stage to view another part
of your document
• Zoom tool-zooms in or out to view more or less
of the Stage
• Tip: To zoom out, hold down the Alt key then click
Pen Tools Practice
Bézier curves.
• Bezier (pronounced as bez-ee-ay) are
curved lines defined by mathematical
formulas. It was named after Pierre
Bézier. Bezier curves employ at least
three points to define a curve.
Pen Tool Practice
• The end points of the curve are called
anchor points.
• The small squares that define the curve
are called handles, also called as
nodes. These nodes can be dragged
smaller or bigger. Attached to each
handle are control points that you can
move to modify the shape of the curve
Pen Tool Practice
Learning Activity
Activity 18.1. Drawing Shapes
Merge and Object Drawing
1. Open Flash" using ActionScript 3.0 file.
2. We will draw a rectangle on the Stage
by clicking on the Oval from the too If you
are using Flash CC, you will see the
rectangle tool. Click the rectangle instead.
To display the other shapes, do not
release your pointer until the othe shapes
are displayed.
Merge and Object Drawing
Merge and Object Drawing
3. Draw a merge drawing of a yellow
rectangle on the left side of the Stage. To
choose a color, click the fill color from the
Properties panel.
Merge and Object Drawing
Merge and Object Drawing
4. Beside the merge
drawing, draw an
object drawing of a
green rectangle.
Merge and Object Drawing
5. Now to see the
difference between
the two, click on the
yellow box and drag
up. Do the same with
the green rectangle.
Merge and Object Drawing
6. Next, draw a red
circle merge drawing
circle inside the
yellow rectangle.
Then draw an object
drawing circle in the
green rectangle.
Merge and Object Drawing
7. Drag the circle
down on both the
merge and object
drawing.
8. Save this Flash file
as Merge vs Object
Drawing.fla
Key Terms
• Raster Graphics-a set of bits that represent a
graphic image
• Vector Graphics computer images that are
stored in memory as lines rather series of bits,
allowing it to be rotated or proportionally scaled
• Merge Drawing-blends shapes when they
overlap on the Stage
• Object Drawing-treats your shapes as grouped
objects that can overlap affecting each other
without
Questions for Discussion
1. What is the main difference of a merge
and object drawing?
2. Describe your experience in working
with the Pen tool.
3. What are nodes and how important is it
in a drawn object?
Summary
• Adobe Flash" consists of different panels and
bars. These parts can be customized
according to your needs. You can change
where the buttons, menus, and toolbars
would be placed. There are several preset
workspaces available that you can choose
from. You can also create your own
workspace and name it accordingly.
Summary
• In this lesson, you were able to
differentiate a merge drawing to an
object drawing. You can draw different
shapes from the Rectangle tool and
modify them by using the Subselection
tool to drag the nodes. The Pen tool is
also useful to trace objects on the
Stage. Adding text is easy by using the
