What can you do with Flash
4?
Get the kids and let's teach them what
sounds like an old Sunday School song called "Climb up, Chillun,
Climb!" while you learn how to create cool animated movies with
Flash 4.
This movie took about 4 hours to create
with all the images ready before I started.
This is going to be somewhat of a
lengthy tutorial to cover most of the components of making a fairly large
Flash movie. I've chosen a children's theme for this tutorial. Below is what the movie looks like at frame 1. You can use
the button below it to see the movie. It will open in a separate custom
window. If you'd rather see it in a full browser window, use the link
below the button and then use your back button to get back here. I am one of those unlucky people
who does not have cable, DSL, or affordable ISDN service to my area so I
always have to be careful (and it's a good thing) that I create movies
that will stream properly on slower connections. For 26,400bps
connections this movie should take about 15 seconds to load the first
frame of all layers and within 25 seconds you should be seeing the
movie. If you have a faster connection than 26,400bps, then of course,
you probably will have almost instant access to the movie or at least
much less of a wait.
Use
this link to load the movie in this browser window (use your back button
to get back here)
There are many elements and techniques
involved in this movie including the following:
- Setting up a preload type condition
- Creating a motion tween with a guide
layer
- Creating movie clips
- Creating animation from your static
image
- Adding Streaming sound to your movie
- Layering
- Timing
These are the main topics I will cover
for this tutorial.
The
first step is to decide how large physically your movie will be. If you
have an image for your background like I do, then it's easy to set up
the movie to the size of the image. To set up the movie you would go to
the Modify menu > Movie and then enter your movie size, the background
color and the fps (frames per second). I have found for slow connections
that setting the fps to 8 makes it easy to time a movie to correctly
download without stops and starts in the middle.
Once you have done that, you can import
your background image if you are going to use one. I imported the above
image, made sure it was postioned at 0.0, 0.0 and then broke it apart
using the Break Apart command from the Modify menu. We break the image
apart so that we can use it to paint with, but more on that a little
later. The image is now broken apart on Layer 1. The image will look all
mucked up like below.
Before we move on use
the eyedropper tool and just click anywhere on the image then change
back to the arrow tool. This can save
time and trouble later on if you decide you want to hide something
behind a part of your image. Once you do this you can use the paint
brush to paint parts of your background image on another layer. Instead
of having to use the selection tool, you can just use the paint brush
and paint the area you want. (I'll cover some neat things you can do
with painting with your image in the next tutorial.)
If you click anywhere in the work area
the image will be deselected and will look like it should.
The next step is to decide which areas
of your image you want to animate. I chose several including the trees
in the middle of the image, the top of the tower and the turret, along
with a few blades of grass and a small piece of the grass on the left
side of the image because I knew already that I wanted to hide something
behind it.
Using the selection tool after
deselecting layer one, I carefully outlined the areas that I wanted. You
don't have to perfect with your selections but you do need to be fairly
accurate. After the first selection you need to hold down the shift key to keep
your first selection while you make new ones. I then went to the Edit
menu and copied all my selections to the clipboard. For the safety of
not deleting any of my background image I then click on my work area to deselect
all that I had just selected.
From the Insert menu, I chose New
Symbol and set it's properties to a Movie Clip. The new work area opens
automatically for you to start creating your movie clip. I then selected
key frame one on layer one and used the Edit menu to paste what I had
previously copied to my new movie clip. Create a new key frame in frame
2. Then select key frame 1. Click on your work area to deselect anything
that is selected and then using the arrow tool select one item in the
work area. At this point you can rotate, enlarge, and/or move the
selected item. For the trees, I left them alone in the first key frame
and rotated them a little in the second key frame. For the blades of
grass, some I enlarged just a little, some I rotated just a little, some
in the first key frame and some in the second key frame. Alter each piece the way you want and then
return to your main movie scene.
Create a new layer, and then from the
Window menu, click on library, and place your new movie clip on the work
area making sure that your clip matches the background image. You should
not be able to tell that there is anything on the background image.
The next step is to add some music.
Import a wav file. The file will now show up in your movie library.
Right click on the wav file name in the library and set it's properties.
For streaming media for slower connections I always set this to 8bps.
(You will also need to set this to 8bps in the Movie settings tab from
the Modify menu. The default is 16bps. Create a new layer, and, drag the
wav file from the library to anywhere on your canvas. The sound file is
now on the new layer you just created. It should be in frame 1. Right
click on frame one of the layer your sound file is on. Click on the
Sound tab. Here is where you will set the properties for streaming,
whether you want a fade in or out, starts and stops etc. Generally I use
the fade in and out, not always both and sometimes neither. For this
movie, I used neither. If you see a straight line before the sound
starts at the beginning of your sound file, it's best to use the slider
and move the start point to where the sound starts. This saves file size
in your movie. Likewise with the end of your movie.
At the bottom of the sound tab are some
buttons. The one on the far right will change the view to frames instead
of time. Click on that button. Look at the end of the sound file and see
how many frames are in your sound. Once you have all your settings made
click ok to return to your movie. On your sound layer, go to the frame
number that represents the length of your sound file. For instance, if
in the Sound properties tab it showed the sound file to run for 400
frames, go to frame 400 and right click on it. From the pop up choose
Insert Frame. You should now see the representation of your sound file
on the sound layer.
Now, go to the File menu and click on
Publish Settings. Choose Flash and HTML and accept the defaults. Go to
the HTML tab and turn off looping (uncheck the box). Make any other
settings you would like and click ok. From the File menu again, choose
Publish Preview. This builds your HTML document for you and opens it in
your default browser. I like doing this to preview live what is
happening in my movie. If you are using a lot of text in your movie you
will want to turn off HTML from the publish settings one you publish it
once. Open the html document and remove all the text between the <!--
and --> so your html document doesn't turn out huge.
You've now seen how your movie is
coming along. Minimize your browser window and let's move on. We've
already covered almost everything.
Next is to make my bubbles. I created a
new movie clip and the first thing I added a Motion Guide layer from the
Insert menu. I then used the pencil tool to draw my motion guides lines.
I then selected Layer 1 and the first
key frame and created a plain old circle with the circle tool using a
gradient for the fill. With the circle selected I used the Insert menu
to Convert the circle to a graphic symbol. I then right clicked on the
symbol on my work area and set it's Alpha properties to 54%
transparency. With the circle symbol selected I used the Edit menu to
copy it to the clipboard. I create six layers and put one circle on each
layer and sized them all differently.
I then selected the first
key frame in
Layer One and placed the circle on that layer at the beginning of one of
my motion guide lines. I decided that 25 frames was a good amount for my
animation and created a key frame in frame 25 of layer one. I then moved
my circle (with layer 25 selected) to the end of my motion guide line.
Select frame 1 again on Layer 1 and right click on it. Click on
Properties and then the Motion tab. Check all the boxes on the Motion
tab and click ok. Do this with each circle on each layer, then arrange
the start frames of each layer differently so the bubbles will move at
different times.
I then went back to my main movie and
placed the new bubble movie clip on a new layer and where I wanted it to
start in my timeline.
The elephants were a static image that
comes packaged with Flash and I just created a movie clip with them to
make them appear to move.
The sun, the bird, and the cup were
movie clips included with Flash. I put each on it's own layer where I
wanted them in my timeline.
Now, I wanted to put the lyrics to the
music in my movie. I used the Flash text tool and playing through the
key frames I added the text where it belonged in the time line. All the
text for the song is on one layer. You can see part of the layer, Layer
25. Layer 6 is the layer my sound is on.
Time to preview. Since I don't have
HTML selected in my publish settings now, I need to click on the Publish
option in the File menu instead of the Publish Preview. (I could use
Publish Preview and select Flash, however I want to view this in my
browser). When the publish is complete I use Windows
Explorer to find and open my html file. If things look good and I think
it looks finished, I will then upload it to the web for stream testing.
If I see that at my 26,400bps
connection it takes too long for the initial load, or that it has starts
and stops in it...I make a note of that while I'm watching it online. I
then go back to Flash and arrange where things start in my timeline,
moving them back farther and staggering them so that not everything is
trying to load at the same time. If I feel the initial download was too
slow, I move everything on all layers (by selecting all the layers and
then moving them) to frame 3. In this movie I left the background, song
title and sun in the first frame. On any layer I right click in the
second frame and choose Properties and then select the actions tab. For
the action I want frame 2 to return us to frame 1. I repeat the process
for frame 1 except that I set the action to:
"If frames loaded" = 60
Go To and Play (3)
What this does is tell the Flash player
to continue to play frame 1 and two until frame 60 is loaded into the
player, to go to frame 3 and play the movie. What this does is give you
room to add some kind of a message that your movie is loading to let
viewers know that something is definitely happening.
I then go to the last frame in my movie
on any layer and using the Properties>Actions tab set the action to
Stop, so that when it's over, it's over.
I continue to upload and test until I
feel I have a reasonable stream for my movie and then it's done.
Creating movies with Flash is a lot fun. If you can set it up right,
file size becomes a small issue except of course for bandwidth use. The
movie you have seen here is 202K and could probably be compressed to
make it even smaller. Considering that I used an almost 25mb wav file in
this movie, I think it's amazing the size the file ended up.
Things to remember when
creating Flash movies:
-
Create all your
movie components on separate layers
-
If you have a lot
of animations, try using movie clips for some of them to make your
movie run smoother
-
If your movie is
running jerkily on the internet or loading slowly, move things
around in the timeline until it works properly and in the case of a
very slow initial load, create an opening screen to let your viewers
know what is happening or even create a smaller movie to run while
the main movie is loading.
-
Test and preview
often so you don't have a lot of work at the end of your project.
-
Decide in the
beginning the physical dimensions of your movie. Changing after
you've started working can cause you a lot of time and trouble
re-working everything to fit in the movie correctly.
-
Use layers to your
advantage to place things behind other things to give your movie a
little more depth. (For example the bird starts out on a layer above
the animated background, but then is put on another layer for the
trip back across the movie and that layer is below the animated
background)
Above all, have a
terrific time creating Flash movies!
|
