Swish-Designs.co.uk where imagination is the creation

Welcome, Have a Nice Friday

Preloader Animation Tutorial - SwishMax

Learn how to create a a cool looking animation for your preloaders.

First Of All

You will need the latest build of swishmax installed on your Computer for this to work.
open swishmax and set the canvas size to 100 x 100 pixels and a frame rate of 25fps.

Step.1

Use the rectangle tool to create a shape approx 4 x 8 pixels see fig.1 below.
please note the image below has been scaled up so you can see clearly.

Fig.1

Step.2

Now select the reshape tool, and right click in the middle of the top line of the rectangle shape and select quadratic now drag the blue quadratic marker up so it is inline with the shapes top middle anchor point, see fig2 below..

Fig.2

Step.3

Remove the blick ine from the shape by choosing Line and None,
now choose a solid fill colour for the shape of #999999
now using the Ellipse tool drag out a small circle approx 82 x 65 pixels and make this center to the shape you have just created, make the colour of the circle you can seed not same colour as your canvas. see fig.3 below.

Fig.3

 

Step.4

Copy the grey marker shape you have just create and paste onto the canvas using the Rotate tool found under the options tab of the tools window, should be to the left of your canvas. rotate the new marker into place at the side of existing marker, see fig.3 below.

Fig.4

 

 

Step.5

Repeat the same process described in Step.4 untill you have gone all the way around the coloured circle with the grey markers. see fig. 5 below.

Fig.5

Step.6

Now group all the markers together as a shape and name markers, copy and paste in place and name mask, now click on the circle and change the colour to white #FFFFFF and name middle. you should now have something looking like fig.6 below.

Fig.6

Step.7

Now to create the rotating effect, select the rectangle tool, when done select the reshape tool from the tools panel and create a shape looking like fig.7 below. the shape should cover the top 3 markers, the anchor point for the shape must be at the tip of the shape, if you look at fig.7 you can just see the anchor point above the bottom middle marker.

Fig.7

Step.8

Now you have the shape in place, we need to change the colour, select the shape, now give it a gradient colour fill from left to right, # 666666 set the transparency to zero then in the middle #666666 and again at the end #666666 with the transparency set to zero, see fig.8a below.

Fig8.a

 

when you finaly done this name the shape spinner, you should have something looking like fig.8b

Fig.8b

 

Step.9

Double click on the timeline at the side of the spinner shapeand drag out over 40 frames see fig.9a below.

Fig.9a

once you have done that double click on the Move(40) action and set the setting seen in fig.9b below.

Fig.9b

Once you have set the sttings press Ctrl+T this will test what you have in the flash player
you should now have something looking like fig.9c below.
Please note the image below is show in real time size it is not scaled.

 

Fig.9c

 

Step.10

Now group all your four shapes together as a sprite and name the sprite loader_animation
open the sprite up and gruop together the following shapes as a sprite, middle, spinner and mask
name the sprite as animation and select use bottom object as mask., your outline tree should look like fig.10a below.

Fig.10a

 

Thats it you are finished, press Ctrl+T to test your movie in the flash player and hopefully you should now have something looking like Fig.10b below

Fig.10b

 

Thank you for reading i hope this tutorial has helped you in some way, If you have any question please feel free to join the forum and ask.