1 | Module 1: Flash Environment

BAYON HOSTING

Adobe Flash
Web Development

ITEC Bayon Hosting

2 | Module 1: Flash Environment

BAYON HOSTING

Module 1: Flash Environment

What is Flash?
Web Designer Web
Developers Flash Flash Movie Web Site ,

Flash Web design tool

Web developer designer

design web pages Flash,
browser user

site

browser

Flash Player
Web browsers System Software download web site abode

Flash
movies Flash import content
Design Adobe Photoshop, Adobe Firework

Connection

animation

File Type

*.fla: Flash project file file component

file graphic, animation, actionscript

*.swf: Swift File: file publish web pages

*.html: file html embed *.swf file

browser

*.flv: file flash video encoder video file

flash video streaming file user
download Web server.

Practise 1 Viewing all File Type

3 | Module 1: Flash Environment

BAYON HOSTING

The Flash Work Environment

Flash Key tools Stage, Work Area,
Timeline Tools Toolbox Panels
Objects
Flash Tools Features

Panels

Tool Box

Stage
Work Area

Stage : Workspace
content

movie Play movie,

Objects
Stage

The work area Stage

animation objects Stage.

The Toolbox. Toolbox tools

Flash artword. tool drawing, painting, selecting, edit Toolbox

4
o

Tool selecting, drawing, painting

4 | Module 1: Flash Environment

View Stage

Colors tools

outline fill

Options tool select

BAYON HOSTING

The Timeline. content movie

o

layer element


object

frames movie
movie

Panel s float screen docked work area Timeline

Create Save panel

Workspace Layout
Adobe Flash CS3
Window Workspace
o

Default

Icon and Text Default

5 | Module 1: Flash Environment

o

BAYON HOSTING

Icon Only Default

Property Inspector
The Property Inspector. Property Inspector document
object
movie

object select attributes movie

select object attribute object

symbol, shape, bitmap, video, group, frame Text

design develop document object

menu panels.

Practice II
Show Info
Show the Info panel object screen movie
Window Info

Using Document Properties

Document ModifyDocument Property Ctrl + J

Match:

Printer stage

Contents stage content

Default Default

6 | Module 1: Flash Environment

Using Grid View

ViewGridShow Grid

Save Flash Project

Save As File Flash

BAYON HOSTING

7 | Module 2: Drawing and Painting

BAYON HOSTING

Module 2: Drawing and Painting

Flash tool drawing painting, object
movie outline fill properties, color
swatches, gradients line styles

Objectives
draw paint Flash

vector raster graphics

file flash vector graphics

object Flash drawing painting tools

tools graphic objects,
pencil, pen, line, brush, oval, rectangle, eraser tools.

color swatch, gradient, line style

Flash color , preset colors, gradients, line style

Vector vs. Raster Graphics

Flash graphics vector raster
Flash vector graphics import raster graphic
Flash

Vector Graphics
Vector graphics

raster graphic. download visitor site

resolution

print resolution

printer support

object

Raster Graphics
Raster graphics bitmaps, () pixels
Pixel raster graphic shade gray

8 | Module 2: Drawing and Painting

BAYON HOSTING

pixel

raster graphics pixel

raster image
grid

resolution

resolution

Import raster graphics Flash

import raster image flash

50pixels screen

raster graphic 50pixel pixel
vector graphic

vector graphic
pixel

graphic image

Practice 1:
Vector Raster Images

Basic Drawing and Painting

Pencil Tool ( Y )
free-form shape, Pencil modifier mode

9 | Module 2: Drawing and Painting

BAYON HOSTING

straighten: Modifier
, ,

smooth: Modifier
ink:

Shift

Pen Tool ( P )
The Pen tool vector
format Line curves anchor point
tangent handle pen tool
anchor [Shift] key
0

45
anchor point

mouse button
tagent handle anchor
point tagent handle

Pen tool Flash CS3 mode

Add Anchor Point: point

Delete Anchor Point: Anchor point

Convert Anchor Point: anchor point, corner point

selection tool subselection tool

Shape Tools and their Properties

Line, Oval, Rectangle tools line, ovals, circles, rectangles, squares
Tools outline properties outlines shape

10 | Module 2: Drawing and Painting

BAYON HOSTING

outline ( dashed, dotted, hair line,) line

Stroke and Fill Properties

shape tool drawing painting

fill

stroke stroke fill object

Toolbox

select

fill stroke double-click fill

select shift key object select

deselect shift key object deselect

Web-safe Colors

default

pallete Flash Web-safe colors machine

Video card 256 color

The Brush Tool ( B )

Brush tool free hand shapes pencil tool solid fill
shape brush shape effect
Brush tool modifier 5

11 | Module 2: Drawing and Painting

BAYON HOSTING

object stroke brush

: fill stroke brush

: object object
: select arrow tool
: stroke object

Eraser Tool(E)
brush tool Eraser shape, size modifier
Eraser tool fill shape Flash movie
:

object stroke Eraser

: fill stroke eraser

: stroke stroke eraser
: fill select arrow tool
: stroke object
Lock Fill

: fill object gradient fill

Eraser option

Faucet fill

Eraser mode

The Paint Bucket Tool (K)

Fill Color object color Toolbox Property Inspector
object the Paint Bucket tool fill
Paint Bucket tool solid, gradient(band color blending )
bitmap fill object Gradients

12 | Module 2: Drawing and Painting

BAYON HOSTING

linear bands gradient fill Fill Transfomr Tool rotate

, skew , , gradient
Brush Eraser tool modifiers
Object, Paint Bucket tool Gap Size modifier The Paint Bucket tool
object

enclosed

outline
The Gap Size modifier outline

Fill Transform Tool ( F )

Fill Transform Tool edit gradient fill
gradient, resize, rotate gradient linear radial

The Ink Bottle ( S )

The Ink Bottle tool

stroke line shape

tool line shape
Select Ink Bottle tool attribute line Property Inspector drawing
tool

Eyedropper Tools ( I )
The Eyedropper tool fill stroke
object object

tool mouse fill

fill bucket tool stroke Ink Bottle

Creating Custom Colors, Gradients, and Line Styles

Flash , gradients lines style Flash movies
, gradient, line style movie

13 | Module 2: Drawing and Painting

BAYON HOSTING

The Color Mixer Panel (Shift +9)

solid color Color Mixer panel,

RGB, HSB(Hue,Saturation,Blur),hexadecimal Alpha mode
transparency Color select object stage
Mixer panel color mixer object

Creating a Custom Color Swatch (Ctrl +9)

Color Swatch Color Mixer

Movie

Color Swatch

Add Swatch

14 | Module 2: Drawing and Painting

BAYON HOSTING

Custom Gradients
Flash pallete gradients
gradient Color
Mixer panel Gradient control linear radial

Creating a Custom Gradient Swatch

gradients pointer gradient bar
gradient gradient

pointer select Mixer double click Select color

pallet eye dropper select

pointer mouse gradient controller

pointer

15 | Module 3: Graphic in Flash

BAYON HOSTING

Module 3: Graphic in Flash

Flash tool drawing painting, object
movie outline fill properties, color
swatches, gradients line styles

Objectives
draw paint Flash

vector raster graphics

file flash vector graphics

object Flash drawing painting tools

tools graphic objects,
pencil, pen, line, brush, oval, rectangle, eraser tools.

color swatch, gradient, line style

Flash color , preset colors, gradients, line style

Vector vs. Raster Graphics

Flash graphics vector raster
Flash vector graphics import raster graphic
Flash

Vector Graphics
Vector graphics

raster graphic. download visitor site

resolution

print resolution

printer support

object

Raster Graphics
Raster graphics bitmaps, () pixels
Pixel raster graphic shade gray

16 | Module 3: Graphic in Flash

BAYON HOSTING

pixel

raster graphics pixel

raster image
grid

resolution

resolution

Import raster graphics Flash

import raster image flash

50pixels screen

raster graphic 50pixel pixel
vector graphic

vector graphic
pixel

graphic image

Practice 1:
Vector Raster Images

Type of graphic objects in Flash CS3

Shapes: vector drawing Flash drawing tools files Import

Flash Illustrator CS3 Fireworks CS3

Drawing objects: Flash drawing Tools panel.

Primitives: graphic Rectangle Primitive Oval Primitive tools

Tools Panel

Bitmaps Photoshop CS3 Fireworks CS3.

The Tools panel

The Tools panel drawing tools
effects, blends, Color panel

Property Inspector,

17 | Module 3: Graphic in Flash

tools tools

BAYON HOSTING

Selecting Section: tools select objects, select

objects objects, objects,

select object

Drawing: tool draw images, graphics text element

draw shapes lines

Modification: tool stroke fills,

object

Color selection options: tool zoom in zoom object image,

select color fill color stroke color Option

tool select

Selection and Subselection tools

Selection

stage

Selection tool mouse V key tool shape

across cursor move object

18 | Module 3: Graphic in Flash

BAYON HOSTING

ctrl + z

object draw object 2 stroke fill Illustrator,

Photoshop Fireworks user vector

Select shape

1. double-click item
2. selection box object

selection box object

unit group group Modify

Group

click

The Selection tool select drag object

shape object

object group reshape object

Select object ModifyUngroup

mouse stroke

reshape

stroke

stroke drag stroke

anchor( ) anchor mouse

shape

Select Reshape

select

select

shape double-click selection shape

reshape

Other Tools
Smooth Button shape Smooth

19 | Module 3: Graphic in Flash

BAYON HOSTING

Straghten Button shape

Subselection (A)
Subselection Tool key A
handle move handle points handle

point handle shape

Point

handle

The Free Tansform tool (Q)

Free Transform tool Scale, skew, rotate objects stage

1.

Select object stage select the Free Transform tool toolbox key
Object select handle 8 dot

2.

cursur

rotate icon

3.

skew object mouse

border split arrow

4.

scale object pointer

handle

white dot
object Rotate transform

Alt key
5. white dot

20 | Module 3: Graphic in Flash

BAYON HOSTING

Free Transform tool

Scale : mouse handle

8
reside

Rotate: mouse handle

rotate

Skew: mouse
border object

white dot object

The Gradient Transform tool

1. stage gradient background
2. Gradient Tranform F key
3. object stage

Center Point : feature 2

o

white dot gradient

move gradient

Resize handle:

Radius handle: gradient

Rotate handle: gradient

Object Drawing mode

Object Drawing object merge object
layer

21 | Module 3: Graphic in Flash

BAYON HOSTING

Object Drawing
1. shape shape

shape

shape
2. shape drawing object option

select drawing object visual clue select object drawing mode

drawing reshape selection subselection tool

Color Panel

22 | Module 3: Graphic in Flash

BAYON HOSTING

Fill Style: drop-down list fill Solid, gradient,

Gradient Range: Crayon

Gradient Preview: gradient

Alpha: opacity fill stroke color

Swap Colors: stroke fill color

No Fill: shape fill

Black and White: stroke , fill

Crayons:

gradient crayon gradient

range crayon

23 | Module 4: Manipulating Object

BAYON HOSTING

Module 4: Manipulating Object

Selection and Subselection tools
Selection

stage

Selection tool mouse V key tool shape

across cursor move object

ctrl + z

object draw object 2 stroke fill Illustrator,

Photoshop Fireworks user vector

Select shape

1. double-click item
2. selection box object

selection box object

unit group group Modify

Group

click

The Selection tool select drag object

shape object

object group reshape object

Select object ModifyUngroup

mouse stroke

reshape

stroke

stroke drag stroke

anchor( ) anchor mouse

shape

24 | Module 4: Manipulating Object

BAYON HOSTING

Select Reshape

select

select

shape double-click selection shape

reshape

Other Tools
Smooth Button shape Smooth
Straghten Button shape

Subselection (A)
Subselection Tool key A
handle move handle points handle

point handle shape

Point

handle

The Free Tansform tool (Q)

Free Transform tool Scale, skew, rotate objects stage

6.

Select object stage select the Free Transform tool toolbox key
Object select handle 8 dot

7.

cursor

8.

skew object mouse

border split arrow

rotate icon

25 | Module 4: Manipulating Object

9.

BAYON HOSTING

scale object pointer

handle

white dot
object Rotate transform

Alt key
10. white dot

Free Transform tool

Scale : mouse handle

8
reside

Rotate: mouse handle

rotate

Skew: mouse
border object

white dot object

The Gradient Transform tool

4. stage gradient background
5. Gradient Tranform F key
6. object stage

Center Point : feature 2

o

white dot gradient

move gradient

Resize handle:

Radius handle: gradient

Rotate handle: gradient

26 | Module 4: Manipulating Object

BAYON HOSTING

Object Drawing mode

Object Drawing object merge object
layer

Object Drawing
3. shape shape

shape

shape
4. shape drawing object option

select drawing object visual clue select object drawing mode

drawing reshape selection subselection tool

27 | Module 4: Manipulating Object

BAYON HOSTING

Color Panel
Fill Style: drop-down list fill Solid, gradient,

Gradient Range: Crayon

Gradient Preview: gradient

Alpha: opacity fill stroke color

Swap Colors: stroke fill color

No Fill: shape fill

Black and White: stroke , fill

Crayons:

gradient crayon gradient range

crayon

28 | Module 5: Working with Text

BAYON HOSTING

Module 5: Working with Text

text Flash movie Text blocks text fields
movie Text

animation graphic element movie

Text Blocks
Variable fixed width text blocks text Flash document.

Variable width text blocks

Fixed width text block wrap

text text block format, edit, move

text blocks Property Inspector,
paragraph Text tool select Attribute

Font, color, size

Bold and italics

Alignment and text direction

Character adjustment

Margins, using the Format button

Text border

Setting a hyperlink

Text Fields
text text fields text block text
fileds

request user username password

29 | Module 5: Working with Text

BAYON HOSTING

ActionScript,( text action)

Common Gateway Interface (CGI) program, site

text block variable width block double-click handle

text block

Converting Text into Shapes

text shape breaking

Arrow tool shape

fill stroke color

text shape character paragraph character

break apart shapes
break apart

Select text block

Modify Break Apart

text shape break apart Modify Break

Apart (Ctrl + B)

shape select tool reshape fill solid

gradient stroke color

30 | Module 6: Multiple Layers in a Movie

BAYON HOSTING

Module 6: Multiple Layers in a Movie

Objects layer

stack multiple layer shapes object

effect object interaction

Create and Managing Multiple Layers

Layer Timeline. Timeline layers
layer, hide layers, lock layers, organize layer folders item
layer Layer Command

Creating and Deleting Layers

layer

Add Motion Guide

Folder

layer select

cut object layer Layer ctrl + X , Ctrl + Shift + V

Distribute to Layers
object select layer

Select object layers

Modify Distribute to Layers

object layer group

Layer Organization
layers objects
layer

layer object

31 | Module 6: Multiple Layers in a Movie

movie layers folder

layer

BAYON HOSTING

Locking and Unlocking Layers

lock layer

overlapping

objects multiple layer layer lock unlock

visible hidden layer

Hidden Layers and Outlines

objects layer movie multi-layered

hide layers layer

layer overlapping layer
Tool complex drawing objects outlines
multi-layer movie, outline color
layer

Mask Layers
Layers movies effect movies
mask layer layer mask layer
layer masked layer masking effects Layer
link

Aligning Objects
align object Flash movie Flash tools
Align Panel options objects stage
align objects horizontal vertical

Align panel distribute objects

Align Panel

32 | Module 6: Multiple Layers in a Movie

BAYON HOSTING

Align Panel

Align: object stage

o

To stage select align object

To stage select align stage

Distribute objects select object stage

Match Size resize object object

Stage size

Space : space object object

33 | Module 7: Creating Animation

BAYON HOSTING

Module 7: Creating Animation

Flash basic type animation frame-by frame, shape tweening,
Motion tweening

Frame-by-Frame Animation
Traditional animation images

Frame-by-frame animation Flash frames

frame frame
Flash animation frame
animation keyframes
frame-by-frame animation, frame keyframe

frame Timeline, keyframes circle

Shape-Tweened Animation
Flash effect object objects

animation process tweening Tweening animation

state Stage Timeline, state
Flash tweening animation color, size, location
transparency object Shape Tweening, effect

transforming image
keyframe Flash shape tween
Shape tweening shape Flash
shape tween symbols, groups, bitmap images
Shape

Frame
shape

34 | Module 7: Creating Animation

BAYON HOSTING

Timeline blank keyframe frame 25 select frame 25

F7

shape shape

Enter preview movie Ctrl+Enter

preview flash player

Motion-Tweened
motion tweening, motion effect object Flash movies,