Lesson: 18

Getting to Know Adobe Flash

Understanding Vector
Graphics
What is Flash?
Starting Flash
Flash Workspace
Selecting and Setting
Properties of a drawing
LO Lesson Objectives

At the end of this lesson, students should be

able to:
1. identify the difference between a raster &
vector image
2. identify the elements of the Adobe Flash
CS6 workspace
3. recognize the Flash tools needed for
drawing
What is the difference bet. Raster & Vector
images?
 Known as bitmap graphics
digital image made from pixels
Ex: 1x1 image with 600 dpi resolution =
Raster Graphics 600x600 pixels
Unscalable
Bitmaps files
.PSD (Photoshop Document)
.JPG (Joint
Photographic
Experts Group)
.GIF (Graphics Interchange Format)
.TIF (Tagged Image Format File)
.BMP (Bitmap)
 The pixel (a word invented from "picture
element")
Basic unit of programmable color on a
computer display or in a computer image.
 Vector: line between two points
scalable
Reduces the file of graphic files
Good for creatinglogos
Vector Graphics Flash & Illustrator
Vector Files
.EPS (Encapsulated PostScript)
.AI (Illustrator Artwork)
.CDR (Corel Draw)
.DWG (drawing)/autocad
What is the difference bet. Raster & Vector
images?
ADOBE FLASH FILE TYPES
File Type
.FLA Main supported file type for
Flash
.SWF (Small Web Format) Read as SWIFT. Movies
created with Shockwave
Flash. Ex. Cartoon or
internet application
.FLV (Flash Video) Video files for Adobe Flash.
Flashed-based video files

AS File (Action Script) Contains interactive codes to

control Flash applications
Launching Adobe Flash
OPENING A NEW FILE
ADOBE FLASHApplications
WINDOW Bar Library Panel

Menu Bar
Properties Panel

Tools Panel
Stage

Timeline
 ADOBE FLASH WINDOW
Commands for File, Edit, View.....

Menu Bar
ADOBE FLASH WINDOW
Applications Bar

Selecting Worspace
ADOBE FLASH WINDOW

Stage Objects are placed & animated

 ADOBE FLASH WINDOW

The surrounding area which includes

Work Area command menus, tools, panels
 ADOBE FLASH WINDOW

Timeline
Contains frames, layers, scenes to manage
movie
ADOBE FLASH WINDOW

Properties panel

To view properties e.g background color,

frame rate, size & info
 ADOBE FLASH WINDOW

Library panel
To store and organize symbols in Flash such
as imported files, graphics, files and video
clips
 ADOBE FLASH WINDOW

Tools panel
Contains tools to create, select, edit, and
modify objects
 1302-1009-3696-1065-6850-7951

Workspace is the arrangement of

elements in Flash
 Panel dock

1302-1009-3696-1065-6850-7951

Float detach panel

Panel dock is the collection of panels or

group of panels
 Properties Panel

Properties Panel shows information

on a selected object
 Library Panel

Library Panel contains

objects used in Flash
movies
 Color Panel
Stroke is an outline

Fill is a solid area of color

Alpha Value or transparency
0 for transparent
100 for solid

Color Panel to add colors and

gradients to objects
 Swatches Panel
Panel menu

Swatches Panel

Swatches Panel to save, share,

import colors in Flash
 Timeline

Timeline to manage objects to frames and layers

OPENING A FLASH FILE
SAVING A FLASH FILE
Lesson: 19
Working on a New Flash Document

Setting up a New Document

Changing Stage Size and Color
Importing and using Bitmap Graphics
Reducing Image Size
Compressing Bitmaps
Using Lasso Tool and Magic Wand
Converting Bitmap to Vector Graphics
Animating Bitmap Graphics
Aligning Objects
LO Lesson Objectives

At the end of this lesson, students should be

able to:
1. Set-up a new flash document
2. Use lasso tool and magic wand to select
objects
3. Animate bitmap graphics
 Stage size
Background color
Frame rate Properties Panel
Action Script
 Zoom Tool
increase/decrease the view of artwork
Zoom in: [+] or [Ctrl +]
Zoom out: [Alt key + click] or [Ctrl-]
Hand Tool
Panning is moving the view
on the stage
1. On the MENU BAR, click File, click Import and click
Import to Library
2. On the Open dialog box, select the file name and click
Open
3. Flash will now place the image in the Library panel.
4. Click and drag the icon to the stage
1. Select the picture using Selection Tool
2. On the Menu Bar, click Modify, and select
Transform
3. Adjust height and width of the picture
 Reduce file size of Flash without losing
quality when exporting

1. Double click bitmap icon on the Library and Bitmap properties window
will open
2. The window will allow you to view the bitmap information including
compression
3. The window also gives you control and editing capabilities for your
compression
4. The compression will not change the properties of the original image in
the Flash Library.
 With the use of the Break Apart command,
you can:

1. Break up an object that is part of any group and work on its pixels
2. Turn text into vector graphics
3. Ungroup groups
4. Take a symbol and bring it into the next editable format
 1. On the Menu Bar, click Modify and click Break Apart.
2. Deselect the image by clicking the Selection Tool and click on
Tool: any gray area in the window
3. Select the Lasso Tool from the Tools Panel.
4. Click one part of the image and drag your mouse on the outline
of the image that you want to select
5. Create a symbol of the selected portion by using the Convert to
symbol command from the Modify menu
6. Label the symbol you have created. The symbol is now in the
Library.
7. You can click and drag instances of the symbol to modify the
image on the state as you desire.
 1. On the Menu Bar, click Modify and click Break Apart.
2. Deselect the image by clicking the Selection Tool and click on any
Tool: gray area in the window
3. Select the Lasso Tool from the Tools panel and the Magic Wand
Tool will appear at the bottom of the Tools panel.
4. Select the Magic Wand Tool.
5. Click on the part that you want to select and move your mouse
until the outline of the object is selected.
6. Create a symbol of the selected portion by using the Convert to
Symbol command from the Modify menu
7. Label the symbol you have created. The symbol is now in the
Library.
8. You can click and drag instances of the symbol to modify the image
on the state as you desire.
1. Select the Bitmap graphic
2. On the Menu Bar, click Modify, click Bitmap and select Swap Bitmap
3. On the Menu Bar again, click Modify, click Bitmap and select Trace Bitmap
to show various properties that you can set such as
a. Color Threshold determines the amount of color within the Vector image.
The higher value has less color while the lower value has more color.
b. Minimum Area refers to the area being considered. The higher value means
less amount of color
c. Curve Fit determines how the vector curves are created. There are six
selections that will give various results from jagged edges to smooth edges
d. Corner Threshold allows you to select the corner characteristics such as
many corners, normal and few corners
Bitmap graphics can be animated using
Motion Tween by converting them to
symbol.
Key frame is a location on a timeline
which marks the beginning or end of a
transition.
1. Select the Bitmap graphic using the Selection Tool
2. Convert graphic to a symbol by going to Menu Bar, click Modify, select
Convert to Symbol.
3. On the Convert to Symbol window, type the Name, select the type as
Movie Clip and select the Registration at the center.
4. Go to Timeline for the animation.
5. Go to the last frame which is frame 50 to set the length of the animation.
6. On the Menu Bar, click Insert, click Timeline and select Frame. The frames
will turn to gray color and there will be a white rectangle indicating the end
of the animation.
7. Click Frame 30 to set the keyframe.
8. On the Menu Bar, click Insert, click Timeline and select Keyframe. There will
be a black dot indicating the location of the keyframe.
9. Select Frame 1. On the Menu Bar, click Insert and select Motion Tween. The
first frame up to the keyframe will turn to blue.
10. Click the Frame 1, select the image on the stage and set the Color Effect to
Style Alpha and set it at 26%. The color of the image will be diminished.
11. On the Menu Bar, click Control and select Play to test the animation.
12. The animation effect should be the color that is light at the start and should
be normal at the end of the animation
Apply two motion
tweens on the
bitmap graphic
fruits & vegetables
-to align, resize and space out objects on
the stage
Ways to handle objects relative to other
objects or stage:
1. Align Objects
2. Distribute Objects
3. Match size
4. Space objects
1. Place several images on the stage.
2. Make sure the selection Align to
Stage is not selected
3. Select all of the objects on the stage
using Selection Tool
4. Click Align Bottom Edge and the
objects bottom should now align
1. Place several images on the stage.
2. Make sure the selection Align to
Stage is not selected
3. Select all of the objects on the stage
using Selection Tool
4. Click Distribute Horizontal Center to
space out each element evenly
between each objects center
1. Place several images on the stage.
2. Make sure the selection Align to
Stage is not selected
3. Select all of the objects on the stage
using Selection Tool
4. Click Space Evenly Horizontallyto
space out each element evenly
between each objects center
1. Set the width and height of the stage on
the Properties panel
2. Import an image and place it on stage.
3. On the Align, check the Align to Stage
check box.
4. Click the Match size: Match Width.
-create lines by creating anchor points for
the lines
-curve lines defined by mathematical
formulas named after Pierre Bezier
-graphic, button, movie clip created in Flash
-can be used throughout the movie
-stored in the library
-graphic, button, movie clip created in Flash
-can be used throughout the movie
-stored in the library
 Graphic symbols
- for static images and for reusable objects
Button symbols
- interactive buttons that respond to any mouse
action
Movie clip
- use to create reusable elements for the stage
- Has own timeline separated from main
timeline
- Where symbols, sounds, bitmap graphics,
video, and other elements are stored
A copy of a symbol located on the stage
The Timeline
Distributing Layers
Using Frame-by-Frame Animation
Animate Using Tween
Animate a Movie Clip
The Timeline
- A sequence of events arranged from the oldest
event to the most recent
Keyframe
- A frame where a new symbol instance appears
in the Timeline
Blank Keyframe
- A placeholder for symbols you plan to add later
or just to leave the frame blank
Frame rate
- Amount of frames per second
- Default frame rate is 24.00 FPS
Playhead
- A red rectangle on top of the timeline
- Shows which frame you are currently viewing
on you stage