First time here? First time here? Newsletter Signup Newsletter
651326 Members and growing! | Flash Jobs
Search tutorials
Have you ever met such problem: you get a smooth preview of artwork in local internet, but it seems stopping and starting at intervals after it uploads to internet? We can not keep away from meeting this problem. Is there any way to solve it? Certainly, what you need is to add a preloader that lets users know nothing is wrong with the connection and the movie is loading. In this tutorial, you will get some designing ways of preloader.


Series: SWF Quicker 2.0
Estimated Time of Completion: 30 minutes
Prepared work: download Sothink SWF Quicker -- http://www.sothink.com/product/swfquicker/download.htm

1. Design a simple and static preloader.

Characters "loading" disappear when the Flash is loaded completely.

image002.jpg



Before we get down to designing this preloader, let’s analysis why SWF happened to stop and start at intervals and what the truth of creating a preloader is.

As everybody knows, we use streaming technology to play movie that means one frame is loaded, one frame is played. It takes a while to wait for the playing of the frame which is loaded too much content such as sounds and symbols. Adding preloader is to let the movie starts right after frames are totally loaded. The key point of designing a preloader is whether the total frames are loaded or not.

Suppose that you already have a movie made, how to add a simple preloader?

First, do the following to each layer: Select all the frames in the layer and right-click to choose Cut Frames. Press F7 to insert a blank keyframe in frame 1 and 2. In frame 3, right-click to choose Paste Frames. I will show you the timeline as follows: The timeline is displayed like this:

image004.jpg



Remember to do the above step to each layer. If you use ActionScript such as gotoAndPlay(2), you should adjust the frame number in the bracket after adding blank frames.

We now begin to design preloader in the two blank frames.

First, select one layer and write "loading" on the canvas. Select another layer or add an action layer if there is only one layer in you Flash. Change frame 2 to a keyframe. Whether the whole frames are loaded to memory is decided by checking from frame 2. In another word, the movie begins to play when the check result shows the movie is loaded completely, or it will back to frame 1.

image006.jpg



We use _framesloaded, which is frame number loaded in memory and _totalframes, which is the frame number of this movie to check the state of loading. That means the flash is loaded completely if two numbers are equal.

Finally is jumping command. Adding gotoAndPlay(3) between If and Else means to play completely loaded movie; adding gotoAndPlay(1) before Else means back to frame 1. The ActionScript in frame 2 is as follows:

Code:
if (_framesloaded == _totalframes) {

gotoAndPlay(3);

} else {

gotoAndPlay(1);

}


The preloader is done! Load it to your server to see the effect.

2. Design a preloader with ProgressBar.



You are about to experiment with the designing of preloader attached a ProgressBar.

ProgressBar lets users know the left time of loading Flash. This lesson has the same truth as the former one though it is a little bit complex.

First, input three blank frames at the beginning of movie.

In frame 1, write "loading…" on the canvas and draw a rectangle with a transparent fill color and black line as ProgressBar.

image008.jpg



Draw another blue rectangle with a blue fill color and no outline border as rate of progress.

image010.jpg



Convert it to movie clip. Double-click the movie clip to edit it in movie clip-editing mode.

Make the top left corner of the movie clip on the center of the movie clip-editing mode.

image011.gif



Back to main movie. Because we edit the blue rectangle in movie clip-editing node, it is off the original position in main movie now. Select the movie clip and adjust it inside of ProgressBar by direction keystrokes.

Select the movie clip and input an instance name such as "load" in properties panel. After that, set the alpha value of movie clip as 0. That is to hide the ProgressBar which in a state of 100% before it plays the first frame.

image013.jpg



In the following, we will add ActionScript in frame 2 to control the length of ProgressBar and check whether the movie is loaded or not. Obviously, the difference lies in the content of frame 2.

Select another layer or create an action layer, insert keyframe in frame 2 and frame 3.

The ActionScript in frame 2 is as follows:

Code:
load._xscale=_framesloaded/_totalframes*100;

load._alpha=100;


The instance name in line one is scale of X coordinate, which can be set as _framesloaded / _totalframes * 100.

The content in frame 3 is similar to the simple preloader. The only difference lies in the frame number in bracket.

Code:
if (_framesloaded==_totalframes) {

gotoAndPlay(4);

} else {

gotoAndPlay(1);

}


The preloader is done! Load it to your server to see the effect.

See more details about this tutorial, please click preloader.rar (8.41 KB) to download source file.

Glad to share learning experience with you! Hopefully it is useful to many of you. Any time, Good luck!

If you are interested in Sothink SWF Quicker -- a Flash Maker with a lot of features, such as create Flash Video, support ActionScript 2.0, include plenty of built-in templates & animated effects, etc., You can have a tour of this Flash software here.

To download Sothink SWF Quicker, please click here.

» Level Intermediate

Added: 2006-05-26
Rating: 7 Votes: 25
(10 being the highest)
» Author
I use Sothink SWF Quicker for TWO years. I am happy to introduce this Flash Maker and share the learning experience with you friends in Flash Kit.
» Download
Download the files used in this tutorial.
» Forums
More help? Search our boards for quick answers!

Comments

  • There are no comments yet. Be the first to comment!

  • You must have javascript enabled in order to post comments.

Leave a Comment
  • Your email address will not be published. All fields are required.
Featured Flash FLA
» Author: work2survive
» Title: Girl Walking 1kb
» Description: Walking girl, animation just takes 1kb, using high heels shoes, and fashion model attitude.
Featured Sound Loops
Image for equalize

Audio Player

» Author: BoxCat
» Title: CPU Talk
» Description: From the cyberpunk RPG, "Nameless: the Hackers" Completely Free to use! Keywords: edm hip hop rap electronic mysterious mission hacking chase exciting spy ios ambient chilling love happy sad angry suspense
Latest Font
» Author: Fábio FAFERS
» Description: I created this font for free use. Everyone can apply it in personal or business texts. Its free, but I want to be communicated in case of business use. Donations are accepted to keep the project of free fonts alive! Thank you all
Featured Sound Fx
Image for equalize

Audio Player

» Author: nathan
» Description:

A recorded sound of the Dimensional Fork Gate.