Create an Ajax Loader (or Activity indicator for those who are already accustomed to using the Apple iPhone) for the Web is not a difficult thing: there are services that generate animated gif images of all types. However, the GIF format has the big drawback of not supporting transparent as it should. Transparency in GIF current plan involves only one bit with the consequence that if we do not have a background color uniform, the edges of the image are noticeably grainy and fragmented.
The animation shown below was made by setting the transparent color as white.
![]()
So if the background is white (or a similar color) there are no problems. Instead, just replace the background, here's what happens:
Waiting, therefore, the spread of the format APNG (Animated PNG) - that will support a true alpha channel for transparency, import animated GIF in contexts such as Adobe Flash is "graphically" a very bad choice. Here's how to make an animation in Adobe Flash is very similar to those found on the Web
We build our Ajax Loader in Flash: the "petal"
First we create an empty MovieClip (or if you prefer you can work directly on the Stage) and draw a black vertical line, our Petal, 60/70 pixels high for convenience, by setting a thickness (trait) of 10:

We select our line and turn it into a temporary image object (F8). From the Align panel, centriamola Stage. Now duplicate (CTRL + D or Cmd + D) our line, center line doubled and ruotiamola Transform panel by 30 degrees:


We repeat this operation (duplicates, center, rotates 30 degrees) to obtain:

We select the entire image, ie the sum of the objects:

From the Modify menu select Split (CTRL or CMD + B + B):

Then, again from the Modify menu, select Shape> Convert Lines to Fills. In this way we obtained a figure of "only".
Now we have to "pierce" the center of our image. To do this a little increased 'zoom (type 400). Create a new layer and protect the one with the work done so far:

On this new level could work in peace, without damaging our other image. Draw from center (hold down the ALT key together with the shift key SHIFT) a red circle without border:

In the picture above I set the transparency of the circle to highlight its position relative to our figure (which is located on the lower level). Note that I purposely "cut" edges where they meet the "petals" of our figure. The circle, therefore, must be the right size, which will turn out handy later. Without this select circle, copy it (CTRL + C or Command-C) and also eliminated the last created layer, unlock the layer with our figure, and paste!

Now click on the white stage in order to clear the red circle. Now we have "time" our two objects. Select the red circle and delete it again!

Excellent! Now select all of our object and a light gray color with cambiamogli:

Then select the first petal (at 12) and impostiamolo to black (you can choose ovvimente gradation of colors you want):

Enter now the second petal (at 13) to a dark gray:

We proceed to the other two petals (you choose how much to apply grade) to obtain:

The animation
Perfect, we're almost there, the latest effort required is to create rotation. This should not affect the color of the petals only. To do this we could proceed in other ways (see, for example with the use of masks ...), but this seems easier. Let's move forward a few frames, the type 5 and insert a Keyframe.

From the Transform panel we rotate our image by 30 degrees, the same levels used during the creation of our "petals". We repeat this operation (insert keyframe and rotate 30 degrees) always keeping constant the number of frames between a key and another, until you get:

Finished! Our Ajax Loader in Flash is finished! Here under the GIF version exported from Flash.

Below the Flash movie with a moving background (note that there are no distorting or grainy):
The source










[...] 06) Adobe Flash CS4: Create an Ajax Loader or Activity Indicator [...]