Please support lukamaras.com website:
All my tutorials are free, while hosting costs money.
The most viewed tutorials in April:
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:
After that, add the Glow filter and set its options like this:
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.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 24, on the previous page. 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:
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.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:
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.
TIP 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:
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.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.
If you have found this tutorial useful, please consider donating to support lukamaras.com.
Got any comments or questions? Want to add something but don't know how? Discuss it in the forum!
