Quantcast
Channel: Flash Explained » Preloaders
Viewing all articles
Browse latest Browse all 16

Sleek green sphere mathematical preloader

0
0

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.

The disabled Snap to Objects and Object drawing options.

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).

The stroke color is disabled.

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.

Drawing a circle in Flash.

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.

Modifying the dimensions of a circle.

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.

Making a linear gradient fill in Adobe Flash.

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.

Filling a circular shape with a linear gradient tool in Adobe Flash.

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.

Creating a Movie clip symbol with a central registration point.

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.

Adding a layer for white sphere overlay inside the movie clip symbol.

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.

Making a smaller circle for the sphere preloader.

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.

Aligning a symbol in Adobe Flash with the aid of the Align panel.

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.

Concentric circles made in Adobe Flash.

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).

Making a shiny white radial fill in Adobe Flash.

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).

Applying a radial gradient fill to a shape in Adobe Flash.

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.

Making a new layer in Adobe Flash and selecting the first frame.

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.

Hiding a layer in Adobe Flash.

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%.

Changing the radial gradient fill for the new copy of the circle.

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.

The resized circle movie clip in Adobe Flash.

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.

Applying the Blur filter to a Movie clip symbol in Adobe Flash.

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

The circle with the Blur filter applied.

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.

Setting the options for the Glow filter in Adobe Flash.

The sphere has even more depth now:

The sphere taking its shape thanks to the filters available in Adobe Flash.

Nice! You will learn how to add a specular shine to the sphere in just a moment.

Top of page

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.

Adding a layer for the specular shine of the sphere preloader.

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.

The specular shine has been added to the green sphere preloader.

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:

  1. Blur X and Y: 2
  2. Quality: High

Blur filter options for the specular shine.

After that, add the Glow filter and set its options like this:

  1. Blur X and Y: 1
  2. Strength: 160%
  3. Quality: Low
  4. Color: white

The Glow filter settings for the specular shine.

And here's the final look of your specular shine:

The specular shine on the sphere, with the Blur and Glow filter effects added.

Let me show you now how to create a nice ring around the sphere.

Top of page

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.

Adding the layer for the outer ring for sphere preloader.

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:

The sphere with a circle behind it looks like it had an outer ring added to it.

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:

  1. Blur X and Y: 10
  2. Strength: 260%
  3. Quality: Low
  4. Shadow: black
  5. Highlight: a light green hue (#7AD43D, for example)
  6. Angle: 45
  7. Distance: -6
  8. Leave the Knockout option unchecked
  9. Set the Type to inner

The Bevel filter settings in Adobe Flash.

Ta-daa! Here's the final result — your cool sphere!

The green sphere for the preloader is ready.

There is the final element that you are going to create now: a dynamic text field.

Top of page

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.

Adding a layer for the dynamic text for the preloader.

6.2 Select the Text tool (T). Jump over to the Property inspector and set the options for your dynamic text like this:

  1. Select Dynamic text from the menu situated on the upper left part of the panel.
  2. Select a nice pixel font.
  3. Usually, the proper size for a pixel font in Flash is 8 (in most of the cases, anyway).
  4. Select white as the color for your mathematical preloader.
  5. 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.
  6. Select Bitmap text as rendering type. This is done for bitmap and pixel fonts.
  7. The "Selectable" option should stay turned off.
  8. Make your dynamic text field a single-line text field.

Adjusting the options for the dynamic text field in Adobe Flash.

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.

Creating a dynamic text field in Adobe Flash.

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.

An instance name was assigned to the dynamic text field.

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.

Embedding the numerical characters in the dynamic text field.

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:

  1. Blur X and Y: 8
  2. Strength: 410%
  3. Quality: High
  4. Color: #276403 (a nice dark green, which will make a perfect background for the white text inside the green sphere)
  5. The Knockout and Inner glow options must be left unchecked.

The Glow filter settings in Flash.

6.7 Lock the text layer and click on the Scene 1 link above the layers to return to the main scene.

Returning to the main scene in Adobe Flash.

You will add an empty movie clip and some ActionScript code to your Flash document now so that the preloader can actually work!

Top of page

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.

The Instance name of a movie clip instance in Flash.

7.2 Lock the current layer on the main scene and call it preloader. Make a new layer above it and call it placeholder.

Adding a second layer on the main scene in Flash.

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.

Making a new movie clip symbol in Flash.

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.

The current working space and timeline as displayed on Adobe Flash interface.

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.

Leaving the timeline of the empty movie clip symbol.

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.

The empty movie clip positioned on the scene in Flash.

7.7 Give this empty movie clip an Instance name: call it placeholder_mc.

The Instance name of the empty movie clip symbol in Adobe Flash.

7.8 Lock the placeholder layer. Make a new layer above it and call it actions. Select its first frame.

Selecting the first keyframe of the ActionScript layer in Adobe Flash.

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.


Viewing all articles
Browse latest Browse all 16

Latest Images

Trending Articles





Latest Images