its like a void, but with ix on the end
nav shadow left nav shadow right
nav bar left nav bar right
nav bar left   nav bar right
nav bar left
recent articles
recent forum activity
transportation
Create your own website with our premium website builder solution
The largest collection of original website templates
Leading Free and Paid Web Directory Top 10 Google Rankings
Business Web Hosting. Low Cost and reliable service. Friendly 1-888-222-1495 support.
line

Animate and Tween in Fireworks Tutorial

In this tutorial we are going to learn about animation, and using those animations to create animated gif files that can be placed on your website. To start off, we need something to practice our animations with. Lets create a ball! Use your ellipse tool to draw a circle.

animate tween 2

Change the fill mode to gradient, and the gradient mode to radial. You can use any colors you want, I changed mine to yellow / orange, making sure that the lighter of the two colors starts in the center to create a rounded effect.

animate tween 3

Next I added a dropshadow to my ball by clicking on the + menu in my properties tab, and choosing Drop Shadow.

animate tween 3

Now that we have our ball, we need to change it from its nameless vector form into a symbol. To do this, right click on your ball and choose Converter To Symbol.

animate tween 4

We may be creating an animation, but don't let that fool you! Give your symbol a name, and choose "graphic" not "animation."

animate tween 5

Now we are going to create focal points of your animation, and use firework's tweening abilities to fill in the gaps. Duplicate your ball by copying it (Ctrl+C) and pasting it (Ctrl+V). Place your copied ball to a place that you would like it to move to in your animation.

animate tween 6

Copy it a few more times, and place them in an order that will create a nice animation. For example, I want my ball to bounce. My first frame will will be at the bottom, then it will move upwards, then downwards once more, and then bounce off the screen. You can dictate the direction of your ball as you see fit.

animate tween 7

Now that we have our animation mapped out, we are going to tween these symbols. Hold shift, and click on all of your copied calls. Next choose Modify > Symbol > Tween Instances.

animate tween 8

Choose the amount of frames you want, this will decide how large your file is and how smooth the animation. The more frames the larger the file, but the smoother and more pleasing the image. Click on the "Distribute to Frames" box.

animate tween 9

You will see that your copied symbols have disapeared. If you open your frames window, you will see that frames have been added. Towards the bottom of your screen you can preivew your animation be clicking on the play icon.

Next we are going to save our animation as am animated gif, Choose File > Save As. make sure to click on the Save as type dropdown menu, and choose Animated GIF (*.gif).

animate tween 10

Save your file, and your done! Here is how mine turned out.

animate tween 11

 

website templates
nav bar right
rss valid css valid Valid XHTML 1.0 Transitional
Copyright (C) 2005-2006 Voidix.com - Sitemap | Free Wordpress Layouts | Free Wordpress Themes