Adobe Flash CS4: Create an Ajax Loader or Activity Indicator

Wednesday, November 4, 2009

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.

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, 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:

Ajax Loader in Adobe Flash

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:

Ajax Loader in Adobe FlashAjax Loader in Adobe Flash

We repeat this operation (duplicates, centers, 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

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

Ajax Loader in Adobe Flash

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:

Ajax Loader in Adobe Flash

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:

Ajax Loader in Adobe Flash

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!

Ajax Loader in Adobe Flash

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!

Ajax Loader in Adobe Flash

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

Ajax Loader in Adobe Flash

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

Ajax Loader in Adobe Flash

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

Ajax Loader in Adobe Flash

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

Ajax Loader in Adobe Flash

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.

Ajax Loader in Adobe Flash

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:

Ajax Loader in Adobe Flash

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

Ajax Loader in Adobe Flash

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

Loading Flash Player ...

The source :)

Related Post

Was this article helpful?: Per nientePocoAbbastanzaMoltoMoltissimo
Loading ... Loading ...

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

  1. getAvatar 1.0
    08 nov, 2009 The best post of the week # 45 | EmaWebDesign:: Web Programming / Web Design / SEO:

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

Leave a comment

TAG XHTML PERMISSIONS: <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 [as][/as]           // Actionscript [css][/css]         // CSS Style Sheet [html][/html]       // HTML [js][/js]           // Javascript [objc][/objc]       // Objective-C [php][/php]         // PHP [sql][/sql]         // SQL