Flash Tutorial
Document Sample
Animation using Flash
Contents
Opening Flash ................................................................................................................ 1
Flash Interface ................................................................................................................ 1
Timeline ......................................................................................................................... 3
Motion tween ................................................................................................................. 4
Shape tween ................................................................................................................... 7
Animation using symbols .............................................................................................. 9
Move ............................................................................................................................ 11
Change size .................................................................................................................. 12
Change colour .............................................................................................................. 14
Fade .............................................................................................................................. 15
Animation using timeline effects ................................................................................. 16
Opening Flash
1. Click on Flash File
(ActionScript 3.0)
Flash Interface
2. You can either leave the
stage default size or change
the size by clicking on the
button that says 550x400
pixels.
Flash techniques 1
3. You can also change the colour of the stage by clicking on the white
box next to Background.
Panels
Tools Timeline
Stage
Work Area
Property
Inspector
Flash techniques 2
Timeline
Playhead
Change the frame view
Status bar
Layer controls
For all of these layer operations click on the black circle underneath the
appropriate option and next to the correct layer. E.g. to hide the contents of
Layer 1 click on this circles
Layers
Show/Hide layer
Show Outline of
objects on layer
Unlock/Lock
Layers
Layer name
Double click on text
to change the name
Insert Layer
Delete Layer
Add Motion Guide
Insert Layer Folder
Flash techniques 3
Basic animation techniques
Motion tween
1. Hold down the left mouse button
to show the list of shapes for the
shape tool
2. Select the oval tool
3. Draw the oval tool on your canvas
4. Use the section tool
5. Double click on the shape to select
both the shape and the
stroke(border)
Stroke colour – use this
to change the colour of
the border
Fill colour (colour
the shape
6. You shape will be filled with little white dots which means it has been
selected. You will also see the Properties panel beneath the shape.
Flash techniques 4
7. Using the
pointer tool
move the oval
to the left of
the stage
8. With the oval
tool still
selected hold
down Ctrl+G
on your
keyboard to
group the
object. You
can only
perform
motion
tweens on symbols of grouped objects.
9. Your shape should now have a blue rectangle
around it, this means it has been grouped
10. Right click on a frame e.g. frame 45 and
select Insert Keyframe
Flash techniques 5
Make sure frame 45 is selected and use the pointer tool to move the oval to
the end of the stage.
Right click between frames 1 and 45 and then select Create Motion Tween
Flash techniques 6
Shape tween
1. Draw a shape on the
stage
2. Decide how long you
want the animation to
last.
3. Right click on frame 40
and then click on Insert
Keyframe
Make sure frame 40 is selected:
Use the pointer tool to select the shape
Press delete to delete the shape.
You timeline should now look like this:
White a what frame at frame 40 as it is now empty.
Flash techniques 7
Draw a new shape with a different colour at frame 40
Like this:
Right – click between frame1 and 40 and select Create Shape Tween
Flash techniques 8
Your shape tween should now be working.
Animation using symbols
If you are going to animate using this technique then you must first create all
your text and image and place them on separate layers.
You can copy and paste images from the internet and covert them into
symbols OR
You can use the shapes tools to create shapes
Use the text tool (T) to type in
your text. Change the name of
the layer by double clicking on
the words Layer 1.
You must place each
separate text entry and image
on a separate layer.
Flash techniques 9
Click on the button below to do that
Convert each image or text entry
into graphic symbols
Modify>Convert to Symbol
Select Graphic
It should appear in your library
For each piece of text or image do the following:
Insert a new layer
Use the text tool to type out the text or copy and
paste the image from Google images
Convert the text/image to a symbol
Modify>Convert to symbol
o Save it as a graphic symbol with an
appropriate name.
One you have all your symbols saved in your library you
can start the animation.
Flash techniques 10
Examples of the following:
Move
Change size
Change colour
Fade in
Change size
Move
Make sure you convert the text or image to a graphic symbol
before you begin the following steps
At the first key frame place the symbol where you want it to be at the
beginning of the animation.
Decide on how long you want to animation to last e.g. 50 frames.
Right click on the frame and click on Insert Keyframe(F6)
Flash techniques 11
Make sure the last keyframe
is highlighted
Now move the symbol to where
you want it to be at the end of
the animation.
Now place your cursor between
the two keyframes.
Right click and click on Create Motion Tween
The frames should now have an arrow going through them and should be
coloured purple.
Change size
Make sure you convert the text or image to a graphic symbol
before you begin the following steps
Decide on how long you want to animation to last e.g. 45 frames.
Right click on the frame and click on Insert Keyframe (F6)
Flash techniques 12
Use the Free Transform to resize the image.
Now go between the two key
frames, in the grey area.
Right click on click on Create
Motion Tween
Flash techniques 13
The frames should now look like the ones below
Change colour
Make sure you convert the text or image to a graphic symbol
before you begin the following steps
Decide on how long you want to animation to last e.g. 50 frames.
Right click on the frame and click on Insert Keyframe (F6)
Click back on the first frame of the animation.
Flash techniques 14
Click on the symbol
Next to the word Color
in the properties panel
click on the arrow and
selct Tint
Select the appropriate
colour. If you want the
symbol to have a solid
colour chose 100%
otherwise you can have
a mixture of the original
colour and the tint
colour.
Now go between the two key
frames, in the grey area.
Right click on click on Create
Motion Tween
Fade
Make sure you convert the text or image to a graphic symbol
before you begin the following steps
Same as above but instead of choosing Tint you choose Alpa from the Color
drop-down list and choose 0%
Flash techniques 15
If you want the symbol to fade in: Choose Alpha 0% on the first frame. Then
create motion tween.
If you want the symbol to fade out: Choose Alpha 0% on the last frame.
Then create motion tween.
Animation using timeline effects
You must first collect all your images then
Click on
Insert>Timeline
Effects>Effects and
choose form the options
You also have the
option of selecting
Insert>Timeline
Effects>Transform/Tra
nsition.
Flash techniques 16
Once you have chosen your options e.g Blur
You will be able to
preview the
animation to see
what it looks like.
Effects Duration:
the more frames you
have the longer the
effects last for. The
less frames the
shorter the effect.
When you change
the settings you
must then click on
Update Preview to
view the changes.
Click on OK when you have finished.
The timeline will show the duration of your effect and the effect will also
appear in the Library
Flash techniques 17
Shared by: Jun Wang
Jun Wang
Prof.
Dr
China Agricultural ...
About
Some of Those documents come from internet for research purpose,if you have the copyrights of one of them,tell me by mail vixychina@gmail.com.Thank you!
Related docs
Other docs by hcj
