Create an Ajax Loader (or Activity indicator for those accustomed to using the Apple iPhone) for the Web is not a difficult thing: there are services that create animated GIF images of all kinds. However, the GIF format has a big drawback of not supporting transparent as it should. Transparency in GIF format current plan only involves a bit so 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 setting the transparency color to 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, then the broadcast format APNG (Animated PNG) - which support a real alpha channel for transparency, import animated GIF in contexts such as Adobe Flash is "graphically" a very bad choice. Here then is how to make an animation in Adobe Flash quite similar to those found on the Web

We build our Ajax Loader in Flash: the "petal"

First of all we create an empty MovieClip (or if you prefer you can work directly on the Stage) and draw a vertical black line, our petal, 60/70 pixels high for comfort, setting a width (stroke) of 10:

We select our line and transform it temporarily into a picture object (F8). From the Align panel, centriamola Stage. Now duplicate (CTRL + D or Cmd + D) our line, center line and duplicate ruotiamola the Transform panel of 30 degrees:

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

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

Process menu, select Break Apart (Ctrl + B or Command + B):

Then, again from the Modify menu, choose Shape> Convert Lines to Fills. In this way we obtained a figure "one".

Now we have to "pierce" the center of our image. To make this increase a little 'zoom (type 400). Create a new layer and protect the one with the work done so far:

On this level can work in peace, without harming our other image. We design, starting from the center (hold down the ALT key along with the shift key SHIFT) a red circle with no border:

In the figure above I set the transparency of the circle to highlight its position compared to our figure (which is on the level below). Note that I purposely "cut" edges where it joins the "petals" of our figure. The circle, therefore, must be the right size, which we will prove later. Done this select circle, copy it (CTRL + C or CMD + C) and also removed the last layer created, unlock the level with our figure and paste!

Now click on the white of the Stage to deselect the red circle. Now we have "melted" our two objects. Again select the red circle and delete it!

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

Then select the first petal (12 hours) and set it to black (you can choose ovvimente the gradation of colors you prefer):

Now set the second leaf (13 hours) to a dark gray:

We go for the other two petals (you choose how much alcohol apply) to obtain:

Animation

Okay, we're almost there, the latest effort required is to create rotation. This should not cover the petals but only the color. To do this we could proceed in other ways (see, for example Luso masks ...), but this seems easier. Let's move ahead a few frames, the type 5 and insert a keyframe.

From the Transform panel rotate our image by 30 degrees, the same grade used during the creation of our "petals". We repeat this operation (Insert Keyframe and rotation of 30 degrees) should still continue always constant in number of frames between the key and another, until you get:

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

Below the Flash movie with a background in movement (note that there are no distorting or graininess):

Related Post

• Wordpress: Using the shortcodes (5)
• Wordpress: remove menu administration (12)
• WordPress: customize the navigation between the posts (5)
• Wordpress: how to write a reply to comment using jQuery (18)
• Wordpress: step by step how to create their own login (21)

Was this article helpful?:

Loading ...