FlashVacuum Tutorials >> Bubbly Preloader

Preloading main movie with levels all together by Warrior

Bubbly Preloader

by Warrior

Create a new movie and have seven layers like the picture below. The outline layer is for the preloader bar.

Put a stop action in the ActionScript layer. Draw the preloader and give it the name, loading bar in the layer. Create a new movie clip and give it the name all solid bubbles and for the instance name “asb”

Go inside the new movie clip and create another movie clip and give it the name 'bubbles'.

Go inside the bubbles movie clip and create three layers all 30 frames.

• Action Script
• Guide Layer
• Bubble

In the ActionScript layer put this code;

// It plays a random part of the movie clip
gotoAndPlay(random(30));
//The higher the numbers the bigger the bubbles.
scale = random(31) + 70;
_xscale = scale;
_yscale = scale;

Now create a bubble and put it in the bubble layer and have a circle line and put it in the guide layer so that it will guide the bubble to turn in clockwise motion so it looks like it's circling. Like this picture;

That's the circle line that will guide the bubble to turn this way like a clock hand.

Now go back to the all solid bubbles movie clip and copy and paste the bubble you just created so it looks like the third picture in this tutorial.

Create a new movie clip and give it the name all Hallow Bubbles, which is also the name of the instance, name. Go inside the Hallow Bubbles and draw a circle so it looks like an Olympic circle like this;

Now turn that circle into a Movie Clip and give it the name “Plain Bubbles”. Now go inside the movie clip plain bubbles you just created and turn the circle into a graphic so you can add a fade effect. Now create two layers like the picture below and notice that we are editing the in the plain bubbles and it's also 30 frames long.

• Action Script
• Plain Bubbles

// Go to and Play and random frame 
gotoAndPlay(random(30));
// Scale it randomly to size 101.  
// The bigger the number the bigger the Bubbles
scale = random(101);
_xscale = scale;
_yscale = scale;

Animate the Bubbles so they go from left to right and fade out. Go back one movie clip to All Hallow Bubbles and copy and paste the plain bubbles (don't copy and paste too many) and position them like the picture above. Go back to the main movie and position the full bubbles on the left hand side of the preloader and the plain bubbles a bit to the right like the picture below;

Create your preloader bar and put it at the bottom. Create a new layer and name it “Mask”. Copy and paste the preloader bar graphic, not the movie clip, and place it in the Mask layer so that it covers the whole preloader bar. What the Mask does is it stops the bubbles from going out of the outline area, which make it look unprofessional and dodgy. Create a dynamic textbox and give it the variable name “PercentDisplay” and place it anywhere on the stage. Copy and paste this code on the preloader if you created your own style of preloader and didn't use the one with this tutorial. If you used the preloader that came with this tutorial then you don't need the code as it's already there.

onClipEvent (load) {
	Total = Math.floor(_root.getBytesTotal() / 1000);
	// The Loading messages for the preloader
	loadMessage = new Array("Angel of God", "My guardian dear", "To who God's Love",
				"Commits me here", "Ever this day", "Be at my side",
				"To light and guard", "To rule and guide", "Amen");
	currMessage = 0;
}
 
onClipEvent (enterFrame) {
	Loaded = Math.floor(_root.getBytesLoaded() / 1000);
	Percent = Math.floor(_root.getBytesLoaded() / _root.getBytesTotal() * 100);
	// Devide the length of the message by 100
	division = 100 / loadMessage.length;
	// Current message X division
	limitInf = currMessage * division;
	// Go through the messages one at a time according to the length
	limitSup = (currMessage + 1) * division;
	// Text Display
	_root.PercentDisplay = int(Loaded) + " KB Out Of" + "  |  " + (Total) + " KB" + "  |  " + (Percent) + " %  |  " + loadMessage[currMessage];
	// If the preloader is greater then current text in the message
	if (Percent > limitSup) {
		// move on to the next text in the Array
		currMessage++;
	}
	// Keep the length of the message equal to the preloader
	gotoAndPlay(Percent);
	// Set the width property of the Bar
	setProperty(_root.Preloader, _xscale, Percent);
	// Set the X position of the filled bubbles with the Bar
	_root.asb._x = _root.Preloader._width + _root.Preloader._x;
	// Set the X position of the Empty bubbles with the Bar
	_root.ahb._x = _root.Preloader._width + _root.Preloader._x;
	// If the Movie has loaded, play
	if (Percent == 100) {
		_root.play();
	}
}

Here is the working version that you can see.

FlashVacuum Flash ActionScript Tutorial CyanBlue subQuark JT

You do not have the Flash plugin installed, or your browser does not support Javascript.

This tutorial belongs to Warrior who is a member of Flash Vacuum. If you have any questions or comments regarding this tutorial, please post them in the forum at ActionScript 1.0 :: F5 & FMX section as I will not be answering any e-mails or PM's that require help.