Animation Adobe Flash

Adobe Flash

1 Flash 1
1.1 2
1.2 3
1.3 4
1.4 5
1.5 5
1.6 6
1.7 7

2 8
2.1 8
2.2 8
2,3 8
2.4 9
2.5 9
2.6 10
2.7 10
2.8 10
2.9 11
2.10 11
2.11 12
2.12 13
2.13 14
2.14 15
2.15 16
2.16 f 16
2.17 17
2.18 Panel 17
2.19 17

3 19
3.1 20
3.2 Flash 20
3.3 20
3.4 22
3.5 22

4 24
4.1 Symbol 24
4.2 Symbol 25
4.3 Symbol 25
4.4 Symbol 27
4.5 Library 28
4.6 Symbol 29
4.7 Symbol 30

5 Animation 31
5.1 Play Head 31
5.2 Layer 32
5.3 Folder 32
5.4 Folder 32
5.5 Frame 33
5.6 Key Frame 33
5.7 Frame 34
 6 36
6.1 Animation (Frame by Frame) 36
6.2 Animation 37
6.3 Animation (Motion Tween) 38
6.4 Animation (Motion Tween) 39
6.5 Motion Tween 40
6.6 Animation (Shape Tween) 40
6.7 Animation (Shape Tween) 41
6.8 Guide (Motion Guide) 42
6.9 Guide 42
6.10 Mask Animation 45
6.11 Mask 46
6.12 Animation 47
6.13
48

7 VDO Sound 51
7,1 VDO 51
7.2 VDO 51
7.3 Clip YouTube 52
7.4 VDO flash 1 53
7.5 VDO flash 2 55
7.6 56
7.7 56
7.8 Fx 58
7.9 59

8 Interactive 61
8.1 61
8.2 event 65
8.3 Animation 66
8.4 68
8.5 72
8.6 Flash 73

Flash 75
77
77
 1

1 Flash
Adobe Flash
Macromedia Adobe
Adobe Flash
Flash




Action
Script
Flash
Windows MacOs Linux
PDA
webcam, Printer

Flash
, , , ,

1.1
Flash
Menu bar

Time Line

Panel

Stage

Tool Box

Properties Inspector

Menu Bar


Stage

stage

Toolbox
Toolbox
Toolbox
Timeline
Flash Timeline
Layer
Layer Layer Layer

Frame 1 Frame 1
Frame
Properties Inspector Panel

1.2
Selection tool < v >
Subselection tool < A >
Free Tranform Tool < Q >
Gradien Tranform Tool < F >
Lasso Tool < L >
Pen Tool < P >

Add Anchor Point < = >

Delete Anchor Point < - >

Convert Anchor Point < C >

Text Tool < T >
Line Tool < N >
Rectangle Tool < R >
Oval Tool < O > Shift
Rectangle Primitive Tool < R >


Oval Primitive Tool < O > Shift


PolyStar Tool

Pencil Tool < Y >

Brush Tool < B >

Ink Bottle Tool < S >
Paint Bucket Tool < K >
Eye dropper < I >
Eraser < E >
Hand< H >
Zoom < M,Z >
Stroke color
Fill Color

1.3
2. menu bar File -> New New Document
3.
flash file ActionScript
4.
menu bar Modify -> Document

1.4

hotkey
2

1. pan Toolbox Hand tool

2. Zoom
Zoom

Alt
1.5

Flash 2
.FLA

1. Menu Bar File - > save

Save As
2.
3. Save As Type


Save

.SWF

1. Menu Bar File - > Export -> Export Movie

2.
3. Save As Type swf
Flash export

1.6

Flash Vector
Raster

Selection tool
1 1
1

Subselection tool 1

Lasso Tool

1.7

Flash

1.

2. menu bar Windows->Align Align

3.

2
2.1

Line tool +


8 Shift

45

2.2

Selection tool

2,3

1 1

Properties set

Miter

2.4

CS3

2.5

Miter Round Beval

 10

2.6

3
None
Round
Square

2.7

Pencil Tool Stoke

Line
Tool box 3

Straighten
Smooth
Ink

2.8
Bezier
Bezier

 11

2.9

Add Anchor Point

Convert Anchor Point Subselection tool
Delete Anchor Point

2.10
1. Rectangle Tool
2.

 12

3. 0

4.
Shift Alt

5. Alt

2
Rectangle Tool


Rectangle Primitive Tool

2.11
1. Oval Tool
2.
Shift Alt

 13

3.

4. inner radian

5. Close Path fill Start angle

end angle

2.12

1. PolyStar Tool 3-32

2. Options Tool Settings

3. Alt
4.

 14

Teblet

Fill Stoke

1. Brush Tool Fill Color
2.
3. Brush Mode

a. Paint Normal
b. Paint Fills
c. Paint Behind
d. Paint Selection


e. Paint Inside

2.13
Flash Vector


1. Eraser Tool

2.

 15

2. Eraser Mode

a. Eraser Normal
b. Eraser Fills
c. Eraser Lines
d. Eraser Selected Fills
e. Eraser Inside

3. Faucet

2.14
Flash 2
Stoke Fill
2

Vertor

 16

2.15




1. Paint bucket Tool
2. Tool box Fill Color

3. Flash


Toolbox Gaps
Dont Close Gaps Close Large Gaps

2.16 f
1. Stroke Ink Bottle
Tool
2. Toolbox Stoke Color
3.

 17

2.17
Swatches Flash

2.18 Panel
Panel

Panel Color

2.19
1. Type Linear Overflow

2. Color

 18

3.

4.

5. option menu Color

6. Add Swatch

 19

3
flash
Text
Tool box Texttool Properties Inspector Text Tool

Font

Render

Dynamic URL Link Target Link

Text Type
Text Block Position
Character Spacing
Font
Text Fill Color
Alignment
Edit Format Option
Change Orientation of text
Line Type Input Text
Font Rendering method
Auto Kern
URL Link
Target

 20

3.1 3

1. Static Text
2. Dynamic Text Text
3. Input Text

3.2 Flash

Adobe



adobe font
Flash CS3 Windows Vista
Windows 7

3.3

1. Text tool
2. Properties Inspector Font Arial 25

 21

3. Introduction to
computer
4. Text tool 16
1
The lessons
contain relatively little text, plenty of images and many podcasts prepared by students in
which they talk about a particular topic within each lesson. Most of the lessons are
framed around concepts from the world of computers enter

5. Link

6. 1 Properties Inspector Link

7. http:// Url
papemodel Link
http://www.papermode.in.th

Http://www.sanook.com

Http://www.google.com

Http://www.yahoo.com

Http://www.papermodel.in.th

Http://www.hotmail.com

 22

3.4

Flash Static Text Dynamic

Text Input Text

1.
2. Properties Inspector

3.5

Flash
Text
Text

1. Text tool
Font Arial Black Font 60

 23

2. Break Apart
Break Apart Ctrl + B CAI 3

3. Break Apart CAI

4.

 24

4
Flash Animation

Symbol Symbol 3

Movie clip :
Button :
Graphic :

4.1 Symbol

1. Selection tool

Symbol
2. Convert to symbol F8 Convert to Symbol

3. Name
4. Type Symbol Graphic
5. Registration
6.
Library Library Ctrl+L

 25

4.2 Symbol
Symbol Symbol
1. Symbol Library Symbol

2. Symbol Symbol
3.
Symbol
4. Symbol Symbol

4.3 Symbol
animation Flash
Symbol
4 up over down hit
1.
Rectangle Tool
2. convert Symbol
F8

 26

3. Convert to Symbol Button

ok

4. Symbol symbol Symbol ok

Timeline 4 up over down hit
a. Up
b. Over
c. Down
d. Hit

5. F6 Over

 27

6. F6 Down
7. F6 Hit
Link

4.4 Symbol
Symbol Symbol
1.
2. convert Symbol F8

3.
4. Type Movie Clip Registration
Ok
5. Symbol symbol Symbol ball
6. Time Line Frame 10 F6 Key frame
7.

 28

8. 1-10 Create Motion Tween

9. Symbol Scene Scene 1

10. Ctrl+Enter Animation

Animation
4.5 Library
Library Ctrl + L Window -> Library

Symbol
Button :
Movie Clip :
Graphic :
Floder : Symbol

 29

Library
Library

Library

Symbol
symbol

Symbol

Folderl Symbol

Symbol
Symbol Symbol

4.6 Symbol

Symbol Button Movie clip Graphic

Button

Graphic Button Movie clip

1. Library

2. Symbol Properties
3.

 30

1. symbol Type -> Symbol

4.7 Symbol
Library Library
Symbol

1. Library File -> Import -> Open External

Library

2. Flash Library
3. Library Import

 31

5 Animation
Flash
Animation
Animation Animation Flash
Time Line
Time Line Flash

Lock Layer Play Head

/ Layer Onion skin

Guide Layer

Layer
Play Head

Folder

Onion skin 1
Layer Play head Onion skin Onion skin
Outline
Key frame

5.1 Play Head

Play Head
Play Head Play Head Play Head

 32

5.2 Layer

Layer 1
Layer Insert Layer Layer
Layer F2 Layer

5.3 Folder

Flash Layer
Layer Layer
Layer

5.4 Folder

1 Folder

 33

2
Folder F2 Folder

3 Layer Folder Layer Folder

5.5 Frame
Frame 1 Frame Flash 1 Frame
Frame

Frame
Key Frame
Key Frame
Frame Action Script
KeyFrame Instance
Frame
Motion Tween ( ) Frame
Shape Tween ( ) Frame
Frame Keyframe

5.6 Key Frame

Key Frame
Frame Key Frame
Insert Keyframe F6

 34

5.7 Frame
Animation
Frame
1. Animation 1 20

2.
Insert Frame F5 1
Frame 1 Frame

3. Highlight Frame
F5 Frame

 35

Frame Animation Frame Keyframe

1. Keyframe Frame 25
25
1 Frame 40

Insert Frame F5

2. Keyframe 1 Keyframe 25
Frame 40

 36

6
Animation Flash 3
(Frame by Frame)
(Motion Tween)
(Shape Tween)

6.1 Animation (Frame by Frame)

Animation
Animation Animation
Animation

 37

6.2 Animation
1.
Layer

2. Keyframe 1
3. 1 Animation
4 12
4. 5 F6 Keyframe

5. Keyframe 1,5,9 Frame 11

Frame 12 Animation Flash
1

6. Ctrl+Enter Menu File-> Publish Preview -> Flash

 38

6.3 Animation (Motion Tween)

Frame Motion Tween Animation
Animation

6.4 Animation (Motion Tween)

1. Apple Apple
1 Frame 12 F6
Apple

 39

2. Play Head Frame 1-11 apple

12 Apple animation Frame
by Frame
3. Motion Tween Frame Create Motion
tween Frame Motion Tween

4. Apple 12
Apple F6 Frame 17 Keyframe
5. Free Transform Apple
6. F6 Frame 22 Keyframe
7. Free Transform Apple
8. Frame Create Motion tween 2

9. Frame 35 Layer F5
22 35

10. Ctrl+Enter Menu File-> Publish Preview -> Flash

 40

6.5 Motion Tween

Frame Motion
Properties

Tween 3
- None Motion Tween
- Motion
- Shape
Scale Keyframe Keyframe

Ease
- 0
- 0
- 0
Edit Ease In / Ease Out
Rotate

- None
- Auto
- CW
- CCW

6.6 Animation (Shape Tween)

Animation
Symbol Symbol

 41

6.7 Animation (Shape Tween)

1. Symbol 2
Apple Tree
2. Frame 1 Symbol Apple Stage

3. Alt+B (Break Apart) Symbol

4. Frame 36 F6 Apple Frame 36
5. Symbol Tree Stage Alt+B (Break Apart) Symbol

 42

6. Frame Create Shape Tween

7. Ctrl+Enter Menu File-> Publish Preview -> Flash

6.8 Guide (Motion Guide)

Animation
Movie Clip

6.9 Guide

PNG

1. Lock Layer Ground Tree Lock Layer Layer

2. 1 Layer Car Layer

 43

3. Layer Car Add Motion

guide Layer Guide :car
Layer Layer


4. Layer Guide :car

Pencil Tool
Pencil mode Toolbox
Smooth
5.

Tool box Smooth

6. Layer car

Menu bar File->Import->Import to Stage

car.png

 44

7. Free Transform
8. Symbol
F8 Graphic
redcar
Movie Clip

9. Symbol redcar (
)
Snap
Menubar View -> Snapping -> Snap to Objects

10. Highlight Frame 60 Layer F5 Frame

Layer 1-
60 12 Frame 1 5 60 Frame

11. Layer car F6 Frame 60 Keyframe

 45

12. Keyframe 60 Layer car

13.
14. Layer car Create Motion Tween

15.
Orient to path properties

16. Ctrl+Enter Menu File-> Publish Preview -> Flash

6.10 Mask Animation

Mask
Mask

 46

6.11 Mask

1. Layer
Light

2. Layer Light Mask Layer Background

Layer Light Background
3. unlock Layer Light

4. Layer light Symbol Graphic F8

balllight

 47

5. Animation Motion Tween

6. F5 Frame Layer Background Layer light

7. Layer light Create Motion Tween

8. Ctrl+Enter Menu File-> Publish Preview -> Flash

6.12 Animation

Animation
Instance
Properties Inspector

 48

Color Instance

1. Brightness
2. Tint
3. Alpha
4. Advanced

6.13

Layer
light Cloud

1. F8 Symbol Graphic Cloud

2. F8 Symbol Graphic Light

3. Symbol Cloud F8
cloud-animate Type Movie clip(
Symbol 2 Symbol flash )
4. Symbol light F8
light-animate Type Movie clip

 49

5. symbol cloud-animate Symbol cloud-animate

( )

6. F6 Frame 10 20 Layer 1 Keyframe

7. KeyFrame 10 Properties Inspector Color : Tint

3
R= G = B =

8. Create Motion Tween Layer 1

9. Stage Scene 1

 50

10. symbol light-animate Symbol light-animate

11. F6 Frame 5 10 Layer 1 Keyframe

12. KeyFrame 5 Properties Inspector Color : Alpha 0

13. Create Motion Tween Layer 1

14. Stage Scene 1
15. Ctrl+Enter 10
Frame 5 Frame
16.
Symbol Light-animation Cloud-animation
Selection tool
Ctrl

17.
Layer

 51

7 VDO Sound
7,1 VDO

Flash Animation VDO

VDO
Flash
FLV VDO Flash convert
FLV Clip YouTube

7.2 VDO

Flash import VDO

VDO FLV
xilisoft video converter

1. xilisoft video converter

2. Profile picture
and Animation -> FLV-Flash Video Format (*flv)
Destination

3. Add file
4.

 52

5.

6. Convert
7. Folder

7.3 Clip YouTube

YouTube Save
Youtube http://downloadyoutubevideo.org/

VDO

1. Youtube http://www.youtube.com Url

2. Clip Video

3. URL Ctrl +C

 53

4. http://downloadyoutubevideo.org Ctrl+V URL

Download

5. download video link download .FLV

Folder Vidio.flv
Clip

7.4 VDO flash 1

VDO Folder
VDO

1. Flash
vdo.fla
2. File-> Import -> Import to stage
3. VDO guide.flv
4. VDO
Next

 54

5. Video
a. Prograssive download from a web server Video Web server

b. Stream from Flash Video Straming Service Video Straming

c. Stream from Flash Communication Server Video Flash
Commuication Server
d. As Mobile Device Video bundled in SWF
e. Embed video in SWF and play in timeline Video
f. Linked QuickTime video for publishing to Quicktime MOV
6. Prograssive download from a web server
7. Skin VDO VDO

8. Color Alpha
Video
9.
Next
Finish
10. Clip Vdo Layer 1

11. Ctrl + Enter

 55

7.5 VDO flash 2

VDO Folder
VDO

1. Flash
vdo2.fla
2. File-> Import -> Import to stage
3. VDO guide.flv

4. VDO Embed video in SWF and play in timeline

Next

5.
Embed symbol Type Embedded video Clip
VDO Frame Layer Play Head

 56

7.6

Animation
animation

1.
2.
3. FX

Flash Layer 3 Layer

7.7

Animation

1. 3 Layer Layer Layer

Music Frame Layer

2. File ->Import->Import to Library

Cartoon2.mp3
3. Frame 1 Layer music

 57

4. Properties Inspector Sound

loop

a. Sound
b. Effect Left / Right Channel
Fade
c. Fade In out
d. Edit

e. Sync

i. Event Movie Keyframe
animation
ii. Start Movie Keyframe
animation
Start
Start
iii. Stop

 58

iv. Stream Synchronize Animation

Sync
v. Repeat
vi. Loop
5. Ctrl + Enter

7.8 Fx

1
Keyframe

1. File ->Import->Import to Library

jump.mp3
2. Key frame Frame 10 20 30 Layer Bunny

3. Properties Inspector Sound jump Frame 10 20

30

4. Ctrl + Enter

 59

7.9

1. Stage mama
2. Layer Talk

3. File ->Import->Import to Library

talk.wav
4. Properties Inspector
Sound talk
Stream
5. Ctrl + Enter
Stream time line F5 Layer talk ,face
eye frame 177
6. Layer Mouth
Library
m- a
e I o u Frame
Mouth
7. Frame F6

Symbol m-c
Frame Play head

 60

8. Ctrl + Enter

http://www.how2machinima.com/lipsync.jpg

 61

8 Interactive
Flash animation
Script Flash
Action Script Java Script
Flash

Interactive

8.1

1. 2 Layer menu
content

2. F5 Layer Menu 5

3. F6 Layer Content 2 Keyframe

 62

4. Symbol water Library Layer Content 2

Layer content

5. F6 Layer Content 3 Keyframe

6. Symbol tree Library Layer Content 3
7. F6 Layer Content 4 Keyframe
8. Symbol sun Library Layer Content 4
9. F6 Layer Content 5 Keyframe
10. Symbol moon Library Layer Content 5

11. Layer content Keyframe

Frame 2-5 Frame 1 Black Frame
12.
Script Animation

13. Layer Menu Frame 1 F9 Action Script

 63

14.

Toolbar
Actions Toolbox

Script Pane
Script Navigator

15. Actions Toolbox Global Functions -> Timeline Control -> Stop
code 1 stop ();
Frame 1

16. p1
17. F9 Action script Actions Toolbox Global
Functions -> Timeline Control ->goto

 64

18.
gotoAndStop Frame
number 2 Frame 2 Go to and stop
p1 Frame 2

19. P2 Action Script Frame number 3 Go to and stop

20. P3 Action Script Frame number 4 Go to and stop
21. P4 Action Script Frame number 5 Go to and stop
22. 1 Roll Over
Release

23.

 65

8.2 event

Script Event

VDO

Event
event event Event

on (press)
on(release)
on(releaseOutside)

on(keypress)
on(rollover)
on(rollout)
on(dragOver)
on(dragOut)

Goto

Goto Action Script set

Frame Number Frame

Frame Label Frame
Expression
Next Frame Frame
Previous Frame Frame

 66

8.3 Animation

Animation

Animation

1. 2 play stop animation

2. Play Action Script Actions Toolbox Global Functions -
> Timeline Control ->Play Script

3. Stop Action Script Actions Toolbox Global Functions -

> Timeline Control ->Stop Script

 67

4. Play Stop

Symbol

1.
2. 3 bunny Instance Name Movie clip

3. Play Stop
Play
4. Play 3 Symbol
Play Stop

 68

5. Stop code 4

6. Stop

8.4

1. Frame 1

2. 1 action script idname

Animation Frame

3. Dynamic text
Instance Name Dynamic text idname

 69

4. Actionscript

Text idname

5. F6 Frame 2
1

 70

6. Action script
Frame

7. Action Script +
point Frame

8. 2 Action Script Frame 2

9. Keyframe 3
5

5

 71

10. F6 Keyframe Frame 7 Frame Frame

Dynamic text
Instance name Show

11. Keyframe 7 ActionScript 100/5

- +myname+
- +point+
- +ss+ %

12.
%

 72

8.5

1. Library Action

2. symbol b1
duplicate Symbol
b2 Type Button

3. B1 B2
4. symbol b1 Down Keyframe Down

Scene 1

 73

5. symbol b2 Down Keyframe Down

Scene 1

6.

8.6 Flash

Flash

m1.swf m2.swf m3.swf m4.swf
Menu

1.

Stage 790 x
460 px Modify ->Document
ok
2. main.fla
3. menu.fla

 74

2
4. menu 4

5. 1 Action Script Global

Functions ->Browser/Network LoadMovie
6. 3 URL m1.swf m1 Level 1
m1 Layer
1
7. 4 m1 m2 m3 m4 Level

level 1

8. menu.swf menu
menu.swf


Lavel
9. main.fla Action Script 1 Global Functions -
>Browser/Network LoadMovie URL menu.swf menu

Level 2
m1 m2 m3 m4

 75

10. main

 76

Flash
Tool bar -File
A - Arrow/Cursor Ctrl+ R - Import Image/Sound/etc...
T - Text Tool Ctrl+ Shift R - Export to .swf/.spl/.gif/etc...
P - Pencil Ctrl+ l Shift O - Open as Library
I - Ink Bottle
B - Paint Brush -View
U - Paint Bucket Ctrl+ 1 - View movie at 100% size
E - Eraser Ctrl+ l 2 - Show Frame
D - Dropper Ctrl+ 3 - Show All
M - Magnifier
L Lasso Windows
Ctrl+ L - Show/Hide Library
Frame Ctrl+ M - Modify Movie Properties
F5 - Add frame Ctrl+ E - Toggle between Edit Movie& Edit Symbol Mode
Shift F5 - Delete Frame Ctrl+ Shift L - Show/Hide Timeline
F6 - Add Key Frame Ctrl+ Shift W - Show/Hide Work Area
F7 - Add Blank Key Frame
F8 - Make Symbol Modifying and editing
Ctrl+ G - Group
Timeline Ctrl+ U - Ungroup
Enter - Play Ctrl+ B - Break Apart
Command/Control 0 (zero) - Rewind Ctrl+ Shift V - Paste in Place
< - Previous Frame Ctrl+ D - Duplicate
> - Next Frame Ctrl+ A - Select All
Home - Goto First Scene Ctrl+ Shift A - Deselect All
End - Goto Last Scene Ctrl+ Shift O - Optimize Curves
Page Up - Goto Previous Scene Ctrl+ K - Align Window
Page Down - Goto Next Scene Ctrl+ Shift S - Scale and Rotate
Ctrl+ Shift Z - Remove Transform
Ctrl+ Up Arrow - Move Ahead
Ctrl+ Down Arrow - Move Behind
Ctrl+ Shift Up Arrow - Bring to Front
Ctrl+ Shift Down Arrow - Send to Back
Ctrl+ T - Modify Font
Ctrl+ Shift T - Modify Paragraph
Ctrl+ left Arrow - Narrower Letter Spacing (kerning)
Ctrl+ right Arrow - wider Letter Spacing (kerning)

 77

.. Flash CS3 . : .2551
Narin Roungsan. Animation Flash. : .2551
. 2D Animation Interactive Flash 8. , 2550.
.Flash Action Script. .2551
.Flash workshop 8: digiart.2549
.Advanced Flash Action Script. .2544

1. http://www.stks.or.th/web/index2.php?option=com_docman&task=doc_view&gid=98&It
emid=31
2. http://knowflash.doubleclickspace.com/Ch3s007-P1.html
3. http://www.nmp.ac.th/2553/2553/study/4/tech04/21/standard/f02.html
4. http://alaska.reru.ac.th/flash/home.php
5. http://www.nr.ac.th/learning/flashforweb/indexflash.html
6. http://flashjournalism.com/book/
7. http://www.howdoflash.net/
8. http://flashkit.com
9. http://www.ahref.com
10. http://www.flashcentral.com
11. http://www.virtual-fx.net