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:
- Select the fill color.
- Select Linear as fill type.
- Select the left-end color of the gradient.
- Enter the code for this color in the field above the gradient strip: #57CC09.
- 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:
- Hold down Shift and click near the bottom of the circle.
- Drag your mouse up until you reach the top of the circle.
- 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.
- Call the new symbol green sphere preloader.
- Select Movie clip as type of symbol.
- 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.
- 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.
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:
- Make sure that the Align/Distribute to Stage option is enabled.
- Click the Align horizontal center option.
- 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:
- The fill color should be selected, of course (see 1 below) .
- Set the type option to Radial (see 2 below) .
- Add a new color to the gradient by clicking between the existing ones (see 5 on the screenshot below).
- The color for all the three squares (4, 5 and 6 below) should be white — #FFFFFF.
- 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.
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:
- Click the Filters tab in Property inspector.
- Press the little blue plus icon and select the Blur filter from the pop-up menu.
- Set both blur properties to 8.
- 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:
- Make both Blur options equal 9.
- Make the Strength option equal 56%.
- Select High for the Quality option.
- Set the Color of the glow to white.
The sphere has even more depth now:
Nice! You will learn how to add a specular shine to the sphere in just a moment.
4. Creating the specular shine on the green preloader sphere
4.1 Lock the current layer and make a new one above it and call it specular shine.
4.2 Select the Oval tool (O) and draw a 7 by 7 pixel white circle without an outline. There is no radial or linear gradient fill this time — the circle should be colored with plain white, completely opaque. Place it in the upper part of the sphere, a little bit to the right.
4.3 Select the small white circle that you just drew and convert it to a movie clip symbol by selecting Modify > Convert to symbol. Call it specular shine and click OK.
4.4 You will add two filter effects to the specular shine movie clip now. Click the filters tab in Property inspector while the movie clip is selected. First, select the Blur filter and adjust the options for this filter like this:
- Blur X and Y: 2
- Quality: High
After that, add the Glow filter and set its options like this:
- Blur X and Y: 1
- Strength: 160%
- Quality: Low
- Color: white
And here's the final look of your specular shine:
Let me show you now how to create a nice ring around the sphere.
5. How to make a cool ring around the sphere preloader
5.1 Make a new layer, call it outer ring and drag it down below all the existing layers, like the screenshot below shows you.
5.2 Select the Oval tool (O) for the last time in this lesson and draw a 120x120 pixel circle with it. The circle should be borderless, filled with a plain flat color — use a dark green hue. For example, you may choose #266004 for the color.
Then, position the circle so that it is centered inside the green sphere preloader. Use the same techniques that you have in step 2.4. Here's how your sphere should look like now:
5.3 Select the circle that you just drew if it already isn't, and choose Modify > Convert to Symbol. Make a movie clip symbol out of it. Call it outer ring and click OK.
5.4 Click the Filters tab for this new movie clip and select the Bevel filter. Here is how the settings for the bevel effect should be adjusted:
- Blur X and Y: 10
- Strength: 260%
- Quality: Low
- Shadow: black
- Highlight: a light green hue (#7AD43D, for example)
- Angle: 45
- Distance: -6
- Leave the Knockout option unchecked
- Set the Type to inner
Ta-daa! Here's the final result — your cool sphere!
There is the final element that you are going to create now: a dynamic text field.
6. How to make a dynamic text field with a pixel font
6.1 Lock the outer ring layer and create a new layer above all the existing ones and call it text.
6.2 Select the Text tool (T). Jump over to the Property inspector and set the options for your dynamic text like this:
- Select Dynamic text from the menu situated on the upper left part of the panel.
- Select a nice pixel font.
- Usually, the proper size for a pixel font in Flash is 8 (in most of the cases, anyway).
- Select white as the color for your mathematical preloader.
- Select central alignment. This is a wise choice, because the preloader will be placed in the middle of the sphere, so any other option would make it look bad.
- Select Bitmap text as rendering type. This is done for bitmap and pixel fonts.
- The "Selectable" option should stay turned off.
- Make your dynamic text field a single-line text field.
6.3 Click and drag on the stage (somewhere above the sphere) to create a text field. Release your mouse button and the text field will appear with the blinking cursor inside it. Press Esc on your keyboard to exit the editing mode, and a light-blue border will appear around the field.
To position the text field in the middle of the sphere, press the arrow keys on your keyboard. Pressing them will move the field by 1 pixel at a time. Pressing any of the arrow keys while holding down Shift will move the field by 10 pixels at a time.
6.4 Go back to Property inspector and assign an Instance name to your dynamic text field, so that you can issue commands to it via ActionScript later: call it myText_txt.
6.5 Still here, go over to the right side of the panel and click the Embed button. Select the Numerals option and click OK.
This will make possible for everyone to see your pixel font, regardless if they have it installed on their machine or not and regardless of their operating system.
6.6 You should still be in the Property inspector. Click the Filters tab (yes, these cool effects can be applied to text fields too). Select the Glow filter and adjust its parameters like this:
- Blur X and Y: 8
- Strength: 410%
- Quality: High
- Color: #276403 (a nice dark green, which will make a perfect background for the white text inside the green sphere)
- The Knockout and Inner glow options must be left unchecked.
6.7 Lock the text layer and click on the Scene 1 link above the layers to return to the main scene.
You will add an empty movie clip and some ActionScript code to your Flash document now so that the preloader can actually work!
7. How to make an empty placeholder movie clip symbol and add the ActionScript code for the green sphere preloader
7.1 Select your green sphere preloader movie clip on stage and go over to Property inspector. Assign it the Instance name preloader_mc.
7.2 Lock the current layer on the main scene and call it preloader. Make a new layer above it and call it placeholder.
7.3 Select Insert > New Symbol. In the Create New Symbol dialog window that appears, select Movie clip as type, call it empty movie clip and click OK.
7.4 You will immediately begin working inside the timeline of the new movie clip symbol, which can be seen if you look above the timeline.
Click the Scene 1 link to return to the main scene. Since this is an empty placeholder movie clip into which the external content will be loaded, you don't want to create anything in here.
7.5 Open the Library by selecting Window > Library.
7.6 Click and drag an instance of the empty movie clip symbol out of the Library and onto the scene — in the placeholder layer.
This empty movie clip will be represented by its registration point, a small circle with a plus sign inside it. It is usually placed in the top left corner of the scene, so that the external content (a SWF, JPG, etc) is loaded with its initial position set here.
7.7 Give this empty movie clip an Instance name: call it placeholder_mc.
7.8 Lock the placeholder layer. Make a new layer above it and call it actions. Select its first frame.
7.9 Open the Actions panel by selecting Window > Actions. Insert this code inside it:
var loader:MovieClipLoader = new MovieClipLoader();
loader.addListener(this);
function onLoadInit(placeholder_mc:MovieClip) {
preloader_mc._visible = false;
}
function onLoadProgress(placeholder_mc:MovieClip, loaded:Number, total:Number) {
var percent:Number = Math.floor(loaded/total*100);
preloader_mc.myText_txt.text = percent;
}
loader.loadClip("mywebsite.swf", placeholder_mc);
NOTE: This ActionScript code is made so that it loads a SWF movie called mywebsite.swf, that should be placed inside the same folder where the preloader is.
To test it, find any SWF movie you may have lying around your hard disk, copy it inside the folder where your preloader file from this lesson is and rename it to mywebsite.swf.
Press Ctrl+Enter inside Flash to test your preloader and you should see it load the external SWF file. Press Ctrl+Enter again to see a download simulation. Your preloader should work.
Now, I won't explain what goes on with this code here, because I explained it in minute detail in my lesson on making a complete preloading menu system in Flash.
Guess what? The green sphere preloader has a file size of 1 KB only!!! Ain't Flash an amazing piece of software?
I hope that you have enjoyed learning from this lesson. If you wish, you can see more preloader lessons in my preloader tutorials section. Have fun while learning! See you in my next tutorial.
Download the zipped source FLA file for the sleek green sphere preloader.