firework animations

Document Sample
firework animations Powered By Docstoc
					Using Fireworks to Create Animated Gifs
Fireworks is a program that lets you create graphics and add animation through a
timeline. Itworks much like any other graphics program like Photoshop in that you can
draw and add text, but then you can use the Timeline Feature to add movement and
effects.
You can design entire Web pages in Fireworks, but it creates complicated JavaScript
and slicingthat is not as easy to understand as html. For the purposes of this exercise
we will simply beworking on an animated gif to add to your own html page.

1. In Fireworks, Select File, New.

2. Set up Properties. Select Size (make 400x200) and Canvas color. You can change
thislater in Modify, Document. Canvas color is the same as background color. You can
usethis or you can add a layer with your background. Make sure resolution is 72dpi.

3. Simple Animation. Notice in the Layer Inspector that you are in Layer 1. If Layer
Inspector is not open, find it under Window, Layers. Click on Layer 1 to rename it. Type
some text (your initials) on the screen with the text tool. You can size it and change color
with the Properties Inspector. Click on Frame in the Frame Inspector. Click on the
triangle in the corner and select Duplicate Frame (choose 1 and After current frame).
This creates a second frame just like the first.

4. In the second frame, add an effect (a yellow glow) with the Effect tool in the Properties
Inspector.

5. Test with controller (bottom of image window). You will see a flashing text effect. You
can add a looping effect in the frame controller. Save the file as logo.png The program
creates a .png file, but you can also export as animation for the Web. Choose Export
Preview. Here you can tell it that it is an animated gif, set the number of colors and any
transparency requirements. You can say OK, or Export from here. When you Export, you
can have the gif save by itself or Fireworks will also save an html file for you with the gif
in it. Do not select html. Save as logo.gif.

6. Open logo.gif in the browser and see how it works.

7. Turn off the looping effect at the bottom of the Frame Inspector and delete frame 2 to
remove the glow effect. Double click on the layer and click on Share Across Frames.
Your initials will now be in every frame of the animation.

8. Now we will work on some movement. Click on the Layer tab in the inspector and
make a new layer, name it circle. Make sure you are in Frame 1. You can change this in
the top of the Layer panel.

9. Draw a filled circle with the circle tool (under the square tool). Choose no outline and
any color Fill in the Tools Palette. Go to the Properties Inspector and change the opacity
to 50%.

10. To add an effect to this word, it must be converted to a symbol. Choose Modify,
Symbol,Convert to Symbol. An arrow will appear on it to indicate that it is now a symbol
andappears in the library.
11. Copy the Symbol (Edit, Copy)

12. Size the circle down with the Transform tool (looks like a square with an arrow in it
onthe left side of the tool palette. Use the arrow to move it to the far right of the image.

13. Choose Edit, Paste to Paste in another instance of the symbol (pre-sizing). You can
also choose the symbol from the Library. Put this instance over the initials.

14. Now select both instances (hold down the shift key.) Choose Modify, Symbol, Tween
Instances. Leave input 10 frames and choose to Distribute to Frames. Fireworks now
distributes everything in between the frames to make the circle move. Test with
controller.

15. Now we will add a fade in effect. Make a new layer in the Layer tab and name it
design. Make sure you are in Frame 1. Use the Type tool to type the word “design” and
make in a different font and color.

16. To add an effect to this word, it must be converted to a symbol. Choose Modify,
Symbol,Convert to Symbol. An arrow will appear on it to indicate that it is now a symbol
and appears in the library.
17. Before you make any changes to the symbol, choose Edit, Copy to save an instance
ofthe Symbol.

18. Go to the Properties Inspector and find the opacity command. Change it to a low
numberuntil the word is almost gone.

19. Paste the copy . To select them both, draw a square around them with the arrow
tool.

20. Now choose Modify, Symbol, Tween Instances. You can select the number of
Frames(make it 10) and choose Distribute to frames. Now the word comes in slowly
from invisible to full opacity.

21. Test with controller and Save

22. If you need to crop the final image, use the cropping tool, which is under the
selection tools on the palette.

23. Save the file and Export. Test in browser.

24. Look at the Animation tab on the Export Preview. You can change animation
effects here before the file is exported.

25. Take a look at each of your frames and see if anything needs adjustment. See if final
frame looks the way you want it to look when it is finished. Now this file can be inserted
like any image into an html file. Complicated animations can export to large files, so
make sure your animations are necessary and relevant or they will just annoy your users
while they are waiting for them to download. However, meaningful animations can make
for more interesting and engaging Web pages. We will address more complicated
animations when we cover Flash.

				
DOCUMENT INFO
Shared By:
Categories:
Stats:
views:572
posted:3/29/2009
language:English
pages:2