The Fading Spinner (can Be Used For Preloaders), Beginner Options

[the_iceman]

Many of us have seen these little spinning Rings that look it has a trail and fades as it spins around (Most showing preloader information).

Here is a good 'beginner' tutorial on how to make a little spinning ring that will look like it 'fades'.

Since I can't attach .swf files Here is a link to what we will be creating today:

Spinner

We will first start with a 100x100 image. I created this little image in PSP9. You can save it to your computer for use in this tutorial


Base Image:



Start Swishmax and Lets go to the Movie Panel (Located in the Panel Area) and have it look like the image below:



Go to the Content Panel and you will right-click in an open space and select the Import Option (this is where we will load the image you saved to your computer.

Locate the Image you saved to your computer and open the BaseImage.png file.



Now we want to Add this image into the Movie. This can be done a variety of ways, but if you have your 'scene' centered in the scene panel you can right-click on the imagename in the content window and simply 'add to scene'.






Make sure you have the image totally inside the scene, you have an anchor point of CENTER (this is needed later when we rotate it) and the center anchor point should be set to 50/50.

You should now see the image in your outline panel as shown below:



We now want to rename this object. Click on the name of the object in the outline panel (if it isn't already selected) and go to the SHAPE panel on the right of your screen and enter the information as shown below:



For Creating and Moving objects sometimes it is much easier to use the GRID and to SNAP TO GRID. We will be using this method for the creation of objects and moving of them. This makes things much easier. In the Panels area select the GUIDES tab and set your Guides tab as shown below.



In the GRIDS section of the GUIDES tab ensure both the "SHOW" and "SNAP" are active. If they are your working stage area should look very similar to the image below:



Now we want to create a circle. Select the circle tool from the tools panel and create a 95x95 circle. Make the COLOR of the circle WHITE. The ANCHOR point should be set to the CENTER and the position should be set to position x=50 y=50 as shown below:



Now that we have our circle centered on the stage area we want to give it a name. This circle will be the 'mask'. To make things easier lets just name as a mask. Ensure the circle shape is selected (looking at the outline panel) and in the PANEL area on the right and select the SHAPE tab. Enter the information as shown below.



Now we want to move what will be our MASKing object underneath the Spinner object To do this, go over to your outline panel and select the MASK object if it is not already selected. Above the MASK object you will see an arrow pointing downward. If you click on that arrow it will move the mask under the Spinner object. (Note: You can drag it underneath as well):



We need to create another circle to go on top. This will give the appearance the circle is really a ring. Since we are going to use a White Background for the movie we will make the top circle to match whatever we want the movie background to be (in this case White).

To create the Circle on TOP of the other objects you can simply click on the Spinner Object before creating the Circle object. whatever object is selected it will create the next object 'above it'.

Create a 75x75 Circle which is WHITE and have a CENTER anchor point and positioned at x/y coordinates of 50/50 as shown below:



We will now rename this object so we know it is called a 'coverup' image. You can give it any name you want just so you can easily remember what it is for:



Lets now take the SPINNER object and the MASK object and group them as a sprite. This is easily accomplished by selecting both objects in the outline panel and then right-clicking and navigating through the menus presented as shown below:



Now it shows as a sprite. We want to rename this sprite (to give it at least some kind of meaningful name) so lets select the sprite name in the outline panel and then select the sprite tab in the PANELS area (on the right side of your screen). I'm going to rename this sprite to spSpinner.



We want to add an effect to the Spinner object inside of the spSpinner Sprite. Go to your outline panel and expand your spSpinner sprite by clicking on the little + to the left of the sprite name:



If you look at the top of your screen you will see your TIMELINE. Now your timeline should show your sprite name and both the Spinner and Mask Objects underneath the spSPinner Name. To insert the effect we want go to FRAME 1 of the Spinner Object and position your mouse inside of frame 1. Right Click and select CORE-EFFECTS/TRANSFORM as shown below:



We will need to make some changes to the effect so we will double-click on the effect up in the timeline:



Once you double-click it will open up a Transform Effect Window with all kinds of settings that can be set. I have hilighted the settings we will want to change.

Have your EFFECT window look like the one below and once it is, you can click on the CLOSE button:



Now all you have to do is test it. and you should see it look like it is spinning around and around and around.

Very simple way to create a spinning ring that will look like the trail fades away

For those who really don't want to actually learn from the tutorial and just want the spinner..... here you go:

 Spinner.swi ( 11.21K ) Number of downloads: 12562





Hope ya enjoy the tutorial!

*edited* Fixed Look of the post.

This post has been edited by the_iceman: Dec 20 2005, 02:06 PM

[Rob Wells]

Excellent tutorial Jeff. Well explained and illustrated.

A unique method to create the effect too. Well done!

[the_iceman]

kind of you to say 'unique' ...... which means strange.

I took a L-O-N-G approach in it. Users of SwishMax should know it is easiest to simply create a circle... apply the clip to the shape ... and either place an image on top to look like a cutout or create an actual cutout image before applying the clip to it. Then you simply rotate the shape.

I created the 'cumbersome' tutorial.... well ... not to make things harder for people but also for those beginners who aren't familiar with masking etc. Try and give a few things for 'em to think about. The spinner itself could have been done in like 3 steps ... LOL ... just wanted to make it 'longer' to show more I guess...

[*D*]

Very nice Jeff, thankyou for adding this up.

[*D*]

Jeff if you still have all the images and swi can you zip and send to me please I'll add them back in.

I dunno why some attachments made it through the move an some didn't.

[the_iceman]

cuzzzzzzzzzzz y'all don't love me no mo....

[the_iceman]

ok... think I've uploaded all that needed to be and should be all working again.

[*D*]

cuzzzzzzzzzzz y'all don't love me no mo....

ok... think I've uploaded all that needed to be and should be all working again.

We do love your tuts, just the silly system ate them yours and Reddragons.

Saving them all atm so we don't have this happen again.

[the_iceman]

The TUTs I used images as 'http images' seem fine as they were stored on my web-server.

It seems it was an issue with 'attachments' and just attaching them (some at least). If you find anymore bad links/attachments from me.. please let me know and I'll see if I can get 'em fixed.

[StormSierra]

This was so easy and fun. Thanks for the great tutorial.

Just 1 question though:
When I use PSP maksing means on top. But in swishmax it seems to mean on top and under. Just not understanding this. Can someone explain this?

Anyway, HERE is mine!

Sarah