Creating an Animation

To create a new animation in Fireworks, open a new movie and set the canvas settings to 500 pixels
wide by 500 pixels high. Open the Frames Inspector. The default is just 1 frame -- but we can't do a lot
animation with just one frame, we must have a least two. But before we create a second frame, let's
plan the kind of animation we'll create.

Create Animation with Fireworks

Planning any type of multimedia presentation always shortens the length of the project. On a piece of
paper sketch out the various frames you'd like to see appear in the animation (this process is called
storyboarding). Now, on the Fireworks canvas, add the first set of images that will occupy frame one.
For this sample exercise use your name, and make the font size 40 pt for the first frame.
From the Frames Properties select "Add Frames..." and add 5 more frames to the animation. This
creates 5 new frames directly after frame 1, so you'll have six frames in total. Select Frame 2 from the
Frames Inspector. You'll see that your name has disappeared, because the images created in frame 1
only occupy that frame of the movie: we haven't added them to frame 2.
Now, select frame 1 and highlight your name. Select "Copy", and "Paste" your name into frame 2. With
frame 2 selected, re-size the font point of your name to 36. Copy your name in frame 2 and paste it into
frame 3 and resize the point size to 30. Repeat these steps for the remaining frames. You should now
have six frames, each containing your name, which appears in a smaller point size in each frame.
Now that the animation has 6 frames, how can it be seen? Fireworks has a set of VCR-like controls that
allow animations to be played, stopped, rewound and forwarded frame-by-frame. These controls,
shown below, are located in the bottom right hand corner of the program.
709_pic2 (click to view image)

Select the white "Play" button. The animation can be stopped at any time by
selecting the black, square "Stop" button. Use the frame forward controls to move frame by frame
through the animation.

Distribution to Frames
Creating animation frame by frame can be tedious. A faster solution is it to use a feature in Fireworks
called Distribute to Frames. This allows objects on the canvas to be built quickly into an animation. To
Distribute to Frames, two or more objects must appear on the canvas.
Create a new file in Fireworks. On the stage draw a Star, and with the ALT key held down, select the
star with your mouse. New copies of the star will be
created each time the mouse button is released while the
ALT key is held down. Create six or seven stars in this
way.
Now, select CTRL+A to highlight all the stars that
you've created, and from the Frames Inspector select
"Distribute to Frames" from the properties, as shown
below.
709_pic3 (click to view image)
The new frames are created in the order in which the original star graphics were created. One star will
appear in each frame. Select the "Play" animation control to watch the animation play.

Shared Layers
An image can also be shared through out an animation -- this is great for backgrounds that must appear
on every frame.
Open the Layers Inspector and add a new layer. If this is the first layer that has been created, it'll be
called "layer 2". Now add a background image to the layer. Then, from the Layers Inspector, double
click on the layer named "layer 2." The layers dialog box opens, allowing the name of the layer to be
changed. What is important is the check box under the layer name labeled "Share Across Frames",
which is shown here. Selecting this checkbox will chare any objects in this layer throughout the
animation.
709_pic4 (click to view image)
Play the animation -- you'll notice that the background is
now shared throughout the animation. The only caveat
with this feature is that the layer has to be shared
throughout every frame of an animation, so groups of
frames cannot be selected to share a layer.

A. Creating Motion Tween in Flash

1. Draw a vector using any of the drawing tools in Flash, say a small circle and convert it into a
symbol (F8) by selecting the Graphic option and name the symbol say 'ball'.
2. Click the 20th frame in the Timeline and insert a frame (F5).
3. Now right-click the 20th frame in the Timeline and select Create Motion Tween (or Motion
option from the Tween panel of the Properties inspector) and insert a Key Frame (F6).
4. Select the 10th frame and insert a Key frame (F6) and move the ball to a different position say,
above the current position to create a motion sequence (automatically tweened by Flash).
5. Save your work and test the Movie (Ctrl + Enter). That's it you have created simple animation
using Motion Tween.
Fig: Timeline of Motion Tween
Note: Use the Color Panel of the Properties inspector to reduce the Alpha value from 100 to 32 for the
1st and last frames to produce Simple Alpha Tweening as shown in the Example.

B. Creating Shape Tween in Flash

1. You can create Shape Tweened animations using Shape option from the Tween panel of the
Properties inspector. Draw a vector using any of the drawing tools in Flash, say a small circle
 and remove its border.
2. Click the 10th frame in the Timeline and insert a Key Frame (F6). Now draw another shape say
a diamond using the rectangle tool without a border.
3. Now right-click on any frame in between these two Key Frames and select Shape option from
the Tween panel of the Properties inspector.
4. Save your work and test the Movie (Ctrl + Enter). That's it you have learnt how to create Shape
Tween in Flash.
Fig: Timeline of Shape Tween
Note: Only vectors can be Shape Tweened (Not for Symbols). Note both the Tweens have different
colors along the Timeline as shown above. Make sure that the line is smooth without being broken to
ensure correct Tweening.
Fig: Timeline of Broken Tween

C. Frame-by-Frame Animation

1. Create a vector/plain text using any of the drawing tools in Flash, say a text with 'Animation'
typed as shown in the example and break it using Break Apart (Ctrl + B) to separate the
alphabets as shown below:
Fig: Showing Text after Break Apart
2. In Frame-by-Frame animation we create the object for each frame so as to produce an animation
sequence.
3. Insert Keyframe (F6) and move the alphabets so as to produce an animation sequence.
4. Repeat the above step as far as desired to create Frame-by-Frame animation as shown in the
example.
5. Save your work and test the Movie (Ctrl + Enter). That's it you have created an animation using
Frame-by-Frame animation.
Fig: Timeline of Frame-by-Frame Animation

D. Creating a Guided Motion Tween in Flash

1. Create a vector/plain text using any of the drawing tools in Flash, say a text with 'Flash' typed
and break it using Break Apart (Ctrl + B) as done in the previous example and put each alphabet
in different layers and name the layers as shown in the picture below.
 2. Insert a guide layer by right-clicking the topmost layer and select 'Add Guide Layer' (Insert--
>Timeline-->Motion Guide), draw any path using the pencil tool in the guide layer as shown in
the example.
3. Now create Motion tween by selecting the object in the 1st frame and snapping its registration
point to one end of the path.
4. Snap the object in the last frame to the other end of the path in the guide layer.
5. Repeat the same for all the objects (alphabets) by snapping their registration points to the path
in the guide layer.
6. Save your work and test the Movie (Ctrl + Enter). That's it you have learnt how to create motion
along a guided path.
Fig: Timeline of Guided Motion Tween

More Articles Like This

• How to Create Graphic Symbols in Fireworks

• How to Launch Fireworks
• How to Make an Animated .Gif With Fireworks
• How to Change Symbol Properties in Fireworks
• How to Preview Animations in Fireworks

Ads by Google
www.evonyonline.com
More by This Author
• How to Organize an Email Account With Folders
• How to Delete an Email Account
• How to Straighten Teeth in Photoshop
• How to Shape Eyebrows in Photoshop
• How to Use Computer Applications
How To

How to Create Animation Symbols in

Fireworks
By eHow Computers Editor
Rate: (0 Ratings)
In just a few steps, you can use an object you have created or an image in Adobe Fireworks CS3 to
create an animated symbol. This is a straightforward way to take an object or image and make it
animated. You can then choose to use standard animation settings or take the time to create each frame
for your animated symbol.
• jQuery('.intro .thumbnail').each(function(i,e){
jQuery(e).find('img').one('error',function(){ jQuery(e).remove(); });
});
Email
• Send to Phone
• Print Article
• Add to Favorites
• Flag Article
•
Difficulty: Moderately Easy
Instructions

Things You'll Need:

• Adobe Fireworks CS3
1. Step 1
Start Adobe Fireworks CS3 and open a Fireworks document from your files that contains an
image or object you want to convert to an animation symbol.
2. Step 2
Select the image or object you want to convert to an animation symbol from the Layers palette
so that layer is highlighted.
3. Step 3
Choose the "Modify" menu, point to "Symbol" and select "Convert to Symbol." The Convert to
Symbol dialog box will open onto the Fireworks screen.
4. Step 4
Type a name for the new symbol in the "Name" text box. Select "Animation" for the "Type" of
symbol that you want to create from the object.
5. Step 5
Click the "OK" button to close the Convert to Symbol dialog box and open the Animate dialog
box.
6. Step 6
Select the animation settings you want to use in the Animate dialog box. You can choose the
number of frames, distance of move, direction of move, scale, opacity and rotation. Use the
"Edit" button to create your animation by physically moving the frames.
7. Step 7
Press the "OK" button to close the Animate dialog box. The object you selected is now an
 animated symbol.

How to Create Flick Animations with CSS

By Stu Nicholls.

Introduction
Fed up with 'Flash'? Getting annoyed with animated gifs? Well, why not try an alternative - CSS Flick
Animation.
This is a method of animation that requires some interaction with your visitors, making a visit to your
web site a more enjoyable experience for them, and maybe tempting them to come back for more.
The animations normally appear as static images on the page but they will spring into life when you
move your mouse across them. This can be used in many serious applications as well as just for fun.
With this article I will show you how to style a basic animation (and also an enhanced version which
comprises the same animation with associated text). This could be used on an educational site to
explain the various stages of the animation (such as the internal combustion engine).
FLICK ANIMATION is 100% CSS and DOES NOT use javascript

Basic Method

Step 1

The images
For this article I thought that it would be apt to use a series of still images taken by Eadweard
Muybridge, a pioneer photographer of the moving image, 1830-1904.
The initial set of images is freely available on the web and can be seen here IMAGE and is a 69kB jpg
file.
The first thing I need to do is divide this composite image into it's individual frames and ensure that
each image is the same size.
The Individual Frame Images are displayed below
Frame 1
Frame 2
Frame 3
Frame 4
Frame 5
Frame 6
Frame 7
Frame 8
Frame 9
Frame 10
Frame 11
Frame 12
You will notice that these images are saved in .jpg format as this takes up a smaller file size and with
Flick Animation we can use ANY image format or indeed a mixture of any format.
If these images were saved in as gifs and combined into an animation (without frame 12) they would
look like this:

and would have a file size of approximately 108kB. The combined file size of our twelve jpg images is
approximately 60kB.

Step 2

The !DOCTYPE
Firstly and most importantly, make sure that you have the correct (X)HTML !DOCTYPE. Without this
most browsers will be thrown into 'quirks' mode which will lead to all sorts of incompatibility
problems. W3C QA - List of valid DTDs has a list of valid DOCTYPES that can be used. Select from
XHTML1.0 or XHTML1.1 as these are more suitable for this styling. I use XHTML1.1 for all my
current web pages.

Step 3

The general idea behind Flick Animation

To come to grips with Flick Animation it is necessary to understand the principle behind it. The images
are split (vertically in this article, although horizontally will work equally as well) into equal sized
transparent 'link strips' which then expand to the full size of the image when the mouse is hovered over
them. At the same time the image is moved behind the other 'link strips' so that they are still available
when the mouse moves over them.
This might be a bit difficult to imagine, but if you take it a step at a time then it's really quite simple.

Step 4

The (X)HTML
Since this is a series of images and NOT a list as such, we can use a simple div to hold the eleven
animated images (the twelth image will be the initial stationary image). Once more we will need to
enclose the images in links so that Internet Explorer can use the :hover pseudo class.
The (X)HTML is as below.
<div id="film" title="Flick animation">
<a id="f1" href="#nogo"><img src="../images/f1.jpg" title="frame 1" alt="frame
1" /><b>FRAME 1</b></a>
<a id="f2" href="#nogo"><img src="../images/f2.jpg" title="frame 2" alt="frame
2" /><b>FRAME 2</b></a>
<a id="f3" href="#nogo"><img src="../images/f3.jpg" title="frame 3" alt="frame
3" /><b>FRAME 3</b></a>
<a id="f4" href="#nogo"><img src="../images/f4.jpg" title="frame 4" alt="frame
4" /><b>FRAME 4</b></a>
<a id="f5" href="#nogo"><img src="../images/f5.jpg" title="frame 5" alt="frame
5" /><b>FRAME 5</b></a>
<a id="f6" href="#nogo"><img src="../images/f6.jpg" title="frame 6" alt="frame
6" /><b>FRAME 6</b></a>
<a id="f7" href="#nogo"><img src="../images/f7.jpg" title="frame 7" alt="frame
7" /><b>FRAME 7</b></a>
<a id="f8" href="#nogo"><img src="../images/f8.jpg" title="frame 8" alt="frame
8" /><b>FRAME 8</b></a>
<a id="f9" href="#nogo"><img src="../images/f9.jpg" title="frame 9" alt="frame
9" /><b>FRAME 9</b></a>
<a id="f10" href="#nogo"><img src="../images/f10.jpg" title="frame 10" alt="frame
10" /><b>FRAME 10</b></a>
<a id="f11" href="#nogo"><img src="../images/f11.jpg" title="frame 11" alt="frame
11" /><b>FRAME 11</b></a>
</div>

The links enclose each frame image and the associated frame text. These images are not necessary for
Flick Animation to work but will be seen as a series of images to visitors without CSS enabled.