Lets create a simple animation
to learn few basics of the Flash. Follow the steps given below.
1. Open the Flash program.
2. Go to File and selectNew.
File
> New
3. Set Movie
Properties.To set movie properties go to Modify and select Movie.
Modify
> Movie
Thewindow
that will appear is as shown below.
Set,
Frame Rate = 8 fps,
Dimensions: Width = 550, Height = 400
For Dimensions set Ruler Units to Pixels.
Background Color = White
And then click OK.
4. Go to Insert and select
New Symbol. Select the symbol behavior as
Graphics
and name as circle. Draw a circle on the Stage
using
the Oval tool 
in the TooBox. See the section Creating
Symbols
for
reference. The circle will take place in the first frame of
first
layer as shown below. Name the layer as Circle.
5. Click
on the icon  at the
upper left corner of the window to
go back
to Scene1 from the symbol editing window.
6. This circle symbol is
now in the library so open the library to use the
circle
for your animation.
7. Now draw a image as shown
below on the stage of Scene1.
To draw
the slanted line select the line tool 
in the toolbox and
draw
a slanted line as shown in the figure. To draw the image of the
container
select the rectagle tool 
in the tool box. To get rid of the
fill
color of the rectangle, deselect the fill by selecting the fill color
option(as
shown in the picture below)
and deselect the
icon shown by the arrow in the image shown above.
Now draw the
rectangle of the size as shown below. To give it a look of
container select
the arrow tool  .
Using the arrow tool select the
upper portion
of the rectangle and delete it so that it will look like the
container shown
in the picture.
Now this image
will be on the first frame of the first layer. Name the
layer as "Ground"
by double clicking on the layer name.
8. Now insert a new layer
. To insert a new layer go to
Insert > Layer
Name the layer as "circle".
9. While the circle layer
is selected, drag the circle from the library to the
stage.
And place the circle on the top point of the slanted line.
10. Now insert a frame at
frame no. 15 of the Ground layer. For that
select the frame no. 15 of the Ground Layer and go to
Insert > Frame
11. Insert a Keyframe
on the frame no. 2 and frame no. 11 of the circle
layer. For that select the frame no. 2 of the circle layer and go to
Insert > Keyframe
again do same for the frame no. 11.
12. Select the frame no.
11 of the circle layer and place the circle at the
bottom most point of the slanted line. Also rotate the circle using the
rotate option.
13. Select the Frame no.
2 of the circle layer and create motion tween.
For that go to
Insert > Create Motion Tween
14. Again insert a keyframe
on the frame no. 15 of the circle layer and
place the circle in the container at this frame. Also create motion
tween on the frame no. 11 of the circle layer.
15. At this point you can
go and test your scene.
16. To create some sort of
interactivity to your animation create a button
as shown in the picture below and name is as "Start". For that go to
Insert > New Symbol
Select the symbol behavior as button and than follow the steps of
create
button section of this tutorial.
17. Go back to Scene1
and insert a new layer. name the layer as
"Button". While the Button layer is selected ,drag the start button on
the stage and place it at the bottom right corner of the stage.
18. Insert a new layer again
and name is as "Sound".
19. Now go to
Window > Common Libraries > Sounds
20.Insert a blank keyframe
on the frame no. 10 of the Sound layer. For
that go to
Insert > Blank Keyframe
while this blank keyframe is selected drag the sound named "Book
Drops" on the stage from the common sound libraries.
21. Now you need to add some
actions to your animation to make it
interactive. For that first of all select the Start Button on the stage
and
open Actions window. Double click on the "On
Mouse Event" action
under the Basic Actions. Than double click on the " Go To" action
under the Basic Actions and type in 2 infront of the frame option as
shown in the picture below.
22. Now select the frame
no.1 of the circle layer and insert "Stop" action
under the Basic Actions. For inserting action youcan refer to the
Adding
Actions section of the tutorial.
23. Also add a "Stop" action
to the frame no. 15 of the circle layer.
24. You have created the
animation so you can go and test the
animation. Click Hereto
see how should the animation look like.
25. Now go and save
the animation as "Example" and publish the
animation. THis way you will get three files
1. Example.fla
2. Example.html
3. Example.swf |