Adobe Flash CS4: Create an Ajax Loader or Activity Indicator

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.

ajax-loader

So if the background is white (or a similar color) there are no problems. Instead, just replace the background, here's what happens:

ajax-loader

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:

Ajax Loader in Adobe Flash

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:

Ajax Loader in Adobe FlashAjax Loader in Adobe Flash

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

Ajax Loader in Adobe Flash

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

Ajax Loader in Adobe Flash

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

Ajax Loader in Adobe Flash

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:

Ajax Loader in Adobe Flash

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:

Ajax Loader in Adobe Flash

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!

Ajax Loader in Adobe Flash

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!

Ajax Loader in Adobe Flash

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

Ajax Loader in Adobe Flash

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

Ajax Loader in Adobe Flash

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

Ajax Loader in Adobe Flash

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

Ajax Loader in Adobe Flash

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.

Ajax Loader in Adobe Flash

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:

Ajax Loader in Adobe Flash

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

Ajax Loader in Adobe Flash

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

Loading Flash ...

The source :)

One Response to "Adobe Flash CS4: Create an Ajax Loader or Activity Indicator"

  1. November 8, 2009 The best posts of the week # 45 | EmaWebDesign:: Web Programming / Web Design / SEO :

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

Leave a comment

XHTML TAG PERMIT: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> INSERTION CODE:
 <pre></pre> // blocco generico <code></code> // blocco generico [cc_actionscript][/cc_actionscript] // Actionscript [cc_actionscript3][/cc_actionscript3] // Actionscript 3 [cc_css][/cc_css] // CSS Style Sheet [cc_html][/cc_html] // HTML [cc_js][/cc_js] // Javascript [cc_objc][/cc_objc] // Objective-C [cc_php][/cc_objc] // PHP [cc_sql][/cc_sql] // SQL 


Stop SOPA