Neomesh Micro Limited

Intermediate - Animating using the swirl effect

Untitled Document

Creating an animation using the swirl effect:

It is very simple to create impressive animations from a lone image that will enhance the look and feel of your web page or project.

The main principle to creating a smooth and seamless swirl animation is to increment the swirl effects for each frame of your animation.

1: Chose "Animation Mult-Image" from the "New Project" Dialog.

2: Add desired image to the project that you wish to animate by clicking the button.


3: Duplicate the original image by clicking button.

4: Then apply the swirl effect to the frame that you just duplicated the easiest way is to right click the image and then go to effects then special then click on swirl you should put in quite a low value like around 10 degrees.



5: Now pretty much repeat steps 3 and 4 but duplicate the last image you did the effect for and apply the same amount swirl effect to it so you end up with the first image having no effects and the last image having the most effects. Do this until your satisfied that you have created enough frames.

If you wish for the animation to look as if it is fluctuation just copy (Crtl + c) and paste (Crtl + p) each frame from last to first so the pasted image is the last image on the list.


6: Now chose the options for your animation (Note: you have to have all the frames selected to set the properties for the entire animation.) after you have set the properties then click . Also set your file name and file type you wish to save it as by clicking probably the best type to save it as is gif because it works with all browsers.


7: Once you are ready to compile your animation click the button.

A great idea is to use the animation that you have just made to make an animated button this is done with what's called a rollover image or mouse over image, so when you hold the mouse over the image it will animate. Try holding your mouse pointer over the image to the right.

The Image above was created with two images the first one was a jpg image and the second was a gif animated image. When the mouse is not over the image it displays the first image but if the mouse moves over the image it will swap it for the second image which is the animated gif.

1st Image

2nd Image

The second image in this case was made to only loop once and has a delay of 10 mSec

Many HTML publishing software make it easy to create a rollover image but if you want to code it manually here is a link to a tutorial it also has code that you can use in your HTML page.

Back

28 August 2008