Sleek green sphere mathematical preloader — part 1

In this easy, detailed Flash 8 pro lesson I will show you how to make a sleek green sphere preloader for your website. In this lesson, you will learn:

• How to create a sphere with a realistic depth effect,
• How to use the great filters in Flash 8 pro to achieve a realistic sphere,
• How to use transparency combined with radial gradient fills in Flash,
• How to create a beveled ring around your preloader,
• How to create a dynamic text field with pixel fonts and extra effects added to it,
• How to load an external SWF and more.

Below is an example of how your preloader will look like at the end of this lesson. This is a simulation of course, no real preloading is happening in the example.

1. Creating the green sphere background

1.1. Open a new Flash document and save it immediately so you don't have to do it later.

1.2. Select the Oval tool (O). In the Options area of the Tools panel, turn off the Object drawing (1) and Snap to objects (2) options, like the image below shows.

1.3. Still having the Oval tool selected, go to the Colors area of the Tools panel and block the outline color: Do this by first selecting the outline color (1), then clicking the No color icon (2). Select any color for the fill (3).

1.4. Hold down Shift on your keyboard, click anywhere on the stage and start dragging your mouse to draw a circle (the Shift key allows you to do this, otherwise you woudl have drawn an ellipse). Draw a circle of any size.

1.5. Select the circle by clicking on it with the Selection tool (V).

1.6. Go over to Property inspector and change the dimensions of the circle: set both the width and height to 100 pixels.

1.7. Deselect the circle by clicking on any empty part of the stage with the Selection tool (V).

1.8. Select the Paint Bucket tool (K). Jump to the Color Mixer panel. Make a nice linear gradient fill like this:

1. Select the fill color.
2. Select Linear as fill type.
3. Select the left-end color of the gradient.
4. Enter the code for this color in the field above the gradient strip: #57CC09.
5. Select the right-end color and enter its code in the field above it: #266004.

1.9. Use the Paint bucket tool to fill up the circle vertically, top to bottom, like this:

1. Hold down Shift and click near the bottom of the circle.
2. Drag your mouse up until you reach the top of the circle.
3. Release your mouse button.

1.10. Select the circle again and then select Modify > Convert to Symbol to create a symbol out of this simple shape.

1. Call the new symbol green sphere preloader.
2. Select Movie clip as type of symbol.
3. Make absolutely sure that you have selected the middle-center registration point for your symbol (see arrow on the image below). This will make your life much, much easier once you will add new elements (shine, overlay, etc) to this symbol and when you'll have to align them with this base circle that you have just created.
4. Click OK.

Every graphical element of your sphere preloader will be stored inside this Movie clip symbol. Proceed onto the next section to see how to add a white overlay to it.

Top of page

2. How to make a sharp, semi-transparent white overlay

2.1. Double-click on your new movie clip symbol on the stage with the Selection tool (V) to enter inside it.

2.2. Call the layer (the only one for now) where the circle is background circle. Lock this layer. Make a new one above it and call it white sharp overlay.

2.3. Select the Oval tool (O) again and draw a 88 by 88 pixel circle inside the white sharp overlay layer, filled with any color whatsoever.

2.4. Select the circle by clicking on it with the Selection tool (V). Go over to the Align panel (select Window > Align if it isn't open already). Do this to align the circle with the existing green-gradient background circle:

1. Make sure that the Align/Distribute to Stage option is enabled.
2. Click the Align horizontal center option.
3. Click the Align vertical center option.

There! The smaller circle is now aligned with the bigger one. When positioned like this, these circles are called concentric circles because their center is at the same point.

2.5. Deselect the new circle and select the Paint Bucket tool (K). Go back to Color Mixer panel. Make a radial fill, like this:

1. The fill color should be selected, of course (see 1 below) .
2. Set the type option to Radial (see 2 below) .
3. Add a new color to the gradient by clicking between the existing ones (see 5 on the screenshot below).
4. The color for all the three squares (4, 5 and 6 below) should be white — #FFFFFF.
5. The alpha (the degree of transparency) should be 60% for the first color (see 4 below) and 20% for the other two colors (see 5 and 6 below).

2.6. Now that you have made the radial graident, fill up the circle you made a few moments ago by clicking on its center with the Paint bucket tool (K).

It looks smooth, like it should. But there is another overlay which you should make so that the sphere looks more realistic — the blurred one. Continue onto the next step to see how.

Top of page

3. How to make a blurred, shiny overlay for the sphere preloader

3.1. Select the white radial-filled circle that you have just created. Copy it by pressing Ctrl+C.

3.2. Lock the current (white sharp overlay) layer and make a new layer above it and call it white blurred overlay. Select the first frame of the new layer by clicking on it.

3.3. Press Ctrl+V to paste the circle that you copied before here.

3.4. Hide the white sharp overlay layer to better be able to see what you are doing.

3.5. With the newly pasted circle selected, change the alpha properties of its radial gradient in the Color Mixer panel. The left-edge square should have its alpha set to 80%, the middle one to 40% and the one on the right to 20%.

3.6. Select Modify > Convert to Symbol and create a movie clip out of this circle. Call it white blur and click OK. The registration point will stay on central position from before.

3.7. Select the Free Transform tool (Q) and resize the circle so that its dimensions become around 66 by 45 pixels. Play around with it a little bit until you get it right. Hint: to have the tool resize your circle on one side only, hold down the Alt key on your keyboard while doing this.

3.8. Your white blur movie clip should still be selected. Apply a blur filter to it like this:

1. Click the Filters tab in Property inspector.
2. Press the little blue plus icon and select the Blur filter from the pop-up menu.
3. Set both blur properties to 8.
4. Set the Quality to High.

Here's how your circle should look like now — it begins to resemble a sphere:

3.9. Click the plus icon to open the filters menu again. This time, choose the Glow filter. Set it up like this:

1. Make both Blur options equal 9.
2. Make the Strength option equal 56%.
3. Select High for the Quality option.
4. Set the Color of the glow to white.

The sphere has even more depth now:

Nice! Hop on to the next page to see how to add a specular shine to the sphere and more.