Creating an Animation using Frames With Fireworks MX
There are several ways you can create animations with Fireworks MX. The following method involves creating each frame one at a time, instead of all at once. You, the designer, have a lot of control about how you want your animation to look and behave. This method is best for simple animations. Be creative and have fun! (See the final product)
STEP ONE: OPEN A NEW FILE
First you have to open Fireworks and then create a new document
(File, New). The canvas for this tutorial is 300x300 pixels on a white
background, but you can select whatever size and color you want (to change
the canvas
properties go to Modify, Canvas, and Image/or Canvas size). Make sure the resolution
is set at 72.
STEP TWO: CREATE THE FIRST FRAME
Frames are what make your image move. Think of those cartoon
flipbooks you've played with. Each picture in a flipbook is a frame, and when
all the frames are put together in sequence, you see the picture move. The
first frame is your starting point, and your image moves from there. Its best
to keep a plan in your head before you make your image. Once you decide what
you want to create, then the process is a lot smoother.
For this tutorial, the word "FRAMES" is going to fill with color one letter at a time. Here is the first frame:
After you create your first frame you have to save it. Animations can get complicated so its best to stay as organized as possible. Create a new folder and name it. Make sure you number your frames when you save them, and keep saving the frames you make into the same folder. This frame is saved as "realframes1". The folder is called "realframes".
STEP THREE: CREATE THE SECOND FRAME
Next you have to make changes to your first frame, so it will
be able to move. Each change you make needs to go in a new frame. To create
the second frame go up to "file" and then "save as". This
frame is named "realframes2". After you do that, it will look like nothing
happened. But rest assured, you're working on a new surface that is identical
to the
frame before. In frame two the letter "F" is going to turn red. Here
is what frame two in this animation looks like:
STEP FOUR: CREATE THE REST OF YOUR
FRAMES!
Once you have the first and second frames, you're on your
way to making a nice animation. The next step is to create the rest of your
frames one at a time, just like you did in step two. With your second frame
still on the screen, go to "file" and "save as", and
then save it as the next frame in your sequence. This time it will be frame
three,
the next time will be
frame four...then frame five...etc Here are frames three through seven:
In frame three the "R" turns orange, and in frame four the "A" turns yellow. Now you can begin to see how the animation will turn out.
In frame five the "M" becomes green and in frame six the "E" becomes blue. Each frame brings the animation further along.
In frame seven the "S" becomes
purple. This will be the final frame.
STEP FIVE: TURN YOUR FRAMES INTO
AN ACTUAL ANIMATION:
Now that all seven frames are created and saved into our animation
folder, we're ready to make it move how we want. In Fireworks close any files
you have open so that you have an empty screen. Now, go to "FILE"
and "OPEN", and select your first frame like you're about to open
it. Make sure not to double click or hit the "open" button. You
only want to select it at this moment. Notice how it will become highlighted
when it
is selected:
Next, hold the "SHIFT" button while you select the rest of your frames one at a time. Don't worry about the order you select the frames in, because you'll have control of the order later. Right now you just have to make sure you select all the frames you need. This is what your window should look like:
Notice how the "Open as Animation" box appears once you select more than one frame. After you've selected your frames, make sure the "Open as Animation" box is checked and then hit "open". A new file will appear, that looks just like your first frame. This file is your animation. Its all of your frames stacked on top of one another, like sheets of paper.
This is your "rough draft" for your
animation. Hit the play button (the white triangle in the black box above).
and see how it moves. Think about the changes you need to make. Do you want
it to move slower? Faster? Are the frames out of order? Do you want to change
the background color? Or do you like it how it is?
STEP SIX: MAKE YOUR ANIMATION PERFECT!
Now that the "rough draft" animation is complete and
saved, its time to make the animation do exactly what you want. Find the "Frames
and History" window in Fireworks and make sure its open. It looks like
this:
You can change the order, speed, or appearance of your frames with this window. The first thing you should do is make sure your frames are in order. Here is how:
Next I'm going to change the speed. For this animation, I'm going to make the letters change color slower. To do this, I have to change frame delay. Here is how:
Changing the speed is one example of how you can modify your animation. There are many things you can do to make it do what you want. Experiment with the frame/history window and see what you can do. Remember to take your time and have fun!
STEP SEVEN: EXPORT FOR WEB
Now its time to get your animation ready for the web. Go
to "FILE" and select "EXPORT
WIZARD".
You will see this
window:
Next comes the export window. Give your animation a name and make sure its being saved in the right place. Then hit save!
STEP EIGHT: YOU'RE DONE!
Now you can preview your animation on the web.
Go go File, Preview in browser, and select the browser you wish to use.
Congratulations on making your first animation with frames using Fireworks MX!
Now go make more...