swfchan: Preloader Tutorial.swf (info)

Text

% loaded

A PreLoader Tutorial

Send Me Your Abuse

I Don't Think So!

Gimme the Action Script

Building the Bar

Beginner

Click Here

A Little Animation

Absolute Beginner

A basic preLoader
A percentage preLoader
Problems?
Abuse the Author?

Tutorial Menu

Setting up the Scene

Flash loads scenes from the top down. For
your preloader to be of any use it needs to
be the first thing you load.
Simply drag the scene so it is positioned at
the top of the list in the Scenes Panel.

Though this is is not essential it is a good practise.
It makes it a lot easier if you decide to alter other parts of your movie later.
If for example you decide to add a intro sequence of some sort. Having your preloader
in a seperate scene it's one less thing you need to move around.

Insert > Scene
Window > Scene

Create a new Scene for the PreLoader
Move the preloader scene 'ABOVE' all other scenes.

Setting up the Scene

Once you have your scene is lain out similar to the example above you are ready to
add your Action Script.

F6 (x2)
F5

Create the new Layer (Layer 2)
Insert 2 blank Keyframes in Layer 2
Insert a frame into Layer 1
Add some 'Loading' text to Layer 1

This PreLoader will consist of two Frames and two Layers.
The bottom layer (Layer 1) will be the 'loading' text
The top layer (Layer 2) will have the action script.

Inserting the Action Script

Make sure you copy all 5 lines - the } at the end must be there.

if (loadedbytes == totalbytes) {
nextScene ();
} else {
gotoAndPlay (1);
}

Open the "Actions" Panel.
Insert the script listed just below.

NOTE: For your convinence you can simply select and copy the text above and paste it into your movie.

Layer 2 - Frame 1

Layer 2 - Frame 2

loadedbytes=getBytesLoaded();
totalbytes=getBytesTotal();

Checks to see whether loadedbytes is the same as totalbytes.
Is everything is loaded yet?
If the answer is YES then the movie will execute the instruction in the first set of { } brackets and go to
the first frame of the next scene.
If the answer is NO the movie will go back to Frame 1 of the current scene.

Creates a variable called "totalbytes" then has flash give this variable a value using the
function getBytesTotal()

if (loadedbytes == totalbytes) {
nextScene ();
} else {
gotoAndPlay (1);
}

Frame 2

Action Script Explained

Creates a variable called "loadedbytes" then has flash give this variable a value using the
function getBytesLoaded()

Frame 1

loadedbytes=getBytesLoaded();
totalbytes=getBytesTotal();

I am replacing the static text with a movie, there is nothing stopping you from having both if you want.

Animating the PreLoader

In the basic PreLoader example the text is static. While the preloader is waiting for the
movie to finish loading everything stays the same.
However you may want to insert some small animation just to show that the movie
has not come to a grinding halt. Giving the impression that it is in fact doing
something.
For this I will be replacing the static 'Loading' with a slightly less static Loading...
Movie Clip.
If you need an explanation of how to do this click the 'Next' button. (finish reading this
first though) ;o)
Using a movie clip rather than inserting extra frames into the movie is good in that it
allows you to easily modify the loader animation later, without having to worry about
moving around your action script or which frames you are adding or deleting.
All that you need do is edit the Movie Clip Symbol.
Also for advanced preloaders it becomes 'almost' essential. So get into the habit now.

Window > Library

Keep it fairly simple - you don't want it so big that you need a preLoader to load your
preLoader.
Mine has the word Loading in the first Keyframe, each Keyframe after that I have added
a full stop.

Insert > New Symbol > Movie Clip

Insert a new Symbol

Edit the Symbol to create your Animation
Return to editing your PreLoader Scene
Open the Library - Drag your new Movie Clip onto Layer 1

The Actions Layer has 2 Keyframes
The Progress Layers have 1 Keyframe each

Making sure to drag it above any other scenes

Lay out your new scene like the one shown below

This preloader is an advancement to the basic preloader (with animation) in that the
animation is dynamically altered by how much of the movie is loaded.
It has a progress bar, and displays the current percentage loaded.
I will be skimming through parts of setting up the PreLoader Scene. Hopefully you will
have mastered the basic preloader first. (re)Read the basic tutorial if you get lost.

Create a new Scene for the PreLoader

The top layer of my bar is a actions frame. Unlike the other layers it is only 1 frame long.
The second layer is a bounding box which will surround the bar so it gives an indication
of how much has been loaded.
The third layer of my bar is a mask layer.
The bottom layer of my bar is the progress bar itself.

NOTE: The important part about this movie clip will be that it is 100 frames long.
Frame 1 will be displayed if 1% is loaded
Frame 2 will be displayed if 2% is loaded and so on
Anything esle about the graphics in the movie clip is pretty much up to you.

Add 3 extra Layers to the Movie Clip

Insert > New Symbol > Movie Clip

Making the Progress Bar

Insert a new Symbol - Movie Clip

<p align="left"><font face="Arial" size="14" color="#0000ff">stop();</font></p>

This will prevent the bar animating before you
want it to.

Open the "Actions" Panel.
Insert the following script.

In the Actions layer

Select the bar and convert it to a graphic symbol so you can tween it later.

The right edge of the bar should be level with
the left edge of the clear space.

Create your progress bar - Position it to the left of the clear space

In the Bar layer - Frame 1

Insert 99 frames (for a total of 100)

Insert a box that covers the center blank space of the border.

The center area of the border is actually clear
(sorry that does not show well against the
background of my tutorial)

Create a border that will surround your progress bar.

In the Mask layer

In the Outline layer

Return to editing your preLoader Scene

Right Click on the layer > Mask

Convert the layer to a mask

Move the progress bar so it fills the center of the border

Back to Frame 100

Insert > Create Motion Tween

Click on a frame between 1 and 100

Create a motion tween

Insert a KeyFrame

In the Bar layer - Frame 100

Give this dynamic text the variable name percentbytes

In 'Properties' for the text change 'Static Text' to 'Dynamic Text'

At the position you want your text type a '0'

Add another text box beside your dynamic text with a '%' symbol in it
Make sure it's Static Text and not Dynamic

Setting up the 'Progress Text Layer'

In 'Properties' for the movie clip
Give the movie Clip the instance name loader

Drag the progress bar from the library to
where you want it.

Laying out the Scene

Setting up the 'Progress Bar Layer'

if (loadedbytes == totalbytes) {
nextScene ();
} else {
gotoAndPlay (1);
}

loadedbytes=getBytesLoaded();
totalbytes=getBytesTotal();
percentbytes = int(loadedbytes/(totalbytes/100));
loader.gotoAndStop(percentbytes);

Actions Layer - Frame 2

Inserting the Action Script

Actions Layer - Frame 1

This line uses dot syntax to specify that information will be 'sent' to the movie clip
with the instance name 'loader'

loader.gotoAndStop(percentbytes);

Because we associated the dynamic text with this variable whenever this is
updated so is the text that is displayed. Giving us a working percentage count.

int( ) - gives an interger value - removes any remainder giving a whole number
The contents of the brackets is calculating the percentage loaded

Sets the variable percentbytes

percentbytes = int(loadedbytes/(totalbytes/100));

totalbytes=getBytesTotal();

Action Script Explained

loadedbytes=getBytesLoaded();

The movie clip should go to the frame currently represented by percentbytes and stop.

In our preLoader this is the Progress Bar Movie Clip

The instruction sent is gotoAndStop()

Checks to see whether loadedbytes is the same as total bytes.
Is everything is loaded yet?
If the answer is YES then the movie will execute the instruction in the first set of { } brackets and go to
the first frame of the next scene.
If the answer is NO the movie will go back to Frame 1 of the current scene.

Problems?

I know. And it never will. ;o)

Make sure the progress text is set to Dynamic.

Check that the variable name of your dynamic progress text matches the name in the
actionscript.
If you used the same name as I have, they should be percentbytes.

The percentage does not change.

Tutorial's "Abuse the Author" link does not work.

Check that the instance name of your movie clip matches the name in the actionscript.
If you used the same name as I have, they should be loader.

The bar does not move.

To test your preloader hit CTRL + ENTER. Then once Flash has started the movie hit
CTRL+ENTER again. Flash will now load the movie as if you were downloading via a
56kb modem.
You may need to import a picture or something into the second scene of your movie to
give it a bit of size.

Testing Your preLoader.

Secret Hidden Frame

Thank you, to everyone who takes the time to write decent tutorials. Without you I'd be lost. =)

This Flash Tutorial was made by mercy_killer.

You have gone to far. The tutorial ended 1 frame back.

ActionScript [AS1/AS2]

Frame 1
	loadedbytes = getBytesLoaded();
	totalbytes = getBytesTotal();
	percentbytes = int(loadedbytes / (totalbytes / 100));
	loader.gotoAndStop(percentbytes);
Frame 2
	if (loadedbytes == totalbytes) {
		gotoAndStop (3);
	} else {
		gotoAndPlay (1);
	}
Frame 3
	stop();
Frame 4
	stop();
Frame 8
	stop();
Frame 10
	stop();
Frame 18
	stop();
Frame 19
	stop();
Symbol 10 MovieClip Frame 1
	stop();
Symbol 19 Button
on (release) {
	gotoAndStop (15);
}
Symbol 22 Button
on (release) {
	gotoAndStop (12);
}
Symbol 25 Button
on (release) {
	gotoAndStop (10);
}
Symbol 28 Button
on (release) {
	gotoAndStop (18);
}
Symbol 31 Button
on (release) {
	gotoAndStop (8);
}
Symbol 32 Button
on (release) {
	gotoAndStop (6);
}
Symbol 35 Button
on (release) {
	gotoAndStop (4);
}
Symbol 42 Button
on (release) {
	nextFrame();
}
Symbol 47 Button
on (release) {
	gotoAndPlay (3);
}
Symbol 59 Button
on (release) {
	prevFrame();
}
Symbol 67 Button
on (release) {
	nextFrame();
}
Symbol 88 Button
on (release) {
	prevFrame();
}

Library Items

Symbol 1 Font	Used by:2 11 12 17 20 23 26 29 33 36 51 52 53 54 63 64 65 66 69 70 71 72 73 74 75 76 77 78 80 81 82 83 85 89 95 96 97 98 99 102 103 104 107 108 109 110 112 113 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 144 145 146 147 148 149 150 152 153 154 155 157 158 159 160 161 162 163 164 166 167 168 169 170 172 173 174 175 176 177 178 179 180 182 183 184
Symbol 2 EditableText	Uses:1	Used by:Timeline
Symbol 3 Font	Used by:4 5 37 38 39 40 43 44 45 50 55 56 57 62 68 79 84 90 91 92 93 111 113 151 156 165 171 181
Symbol 4 Text	Uses:3	Used by:Timeline
Symbol 5 Text	Uses:3	Used by:Timeline
Symbol 6 Graphic	Used by:10
Symbol 7 Graphic	Used by:10
Symbol 8 Graphic	Used by:10 Timeline
Symbol 9 Graphic	Used by:10
Symbol 10 MovieClip	Uses:6 8 7 9	Used by:Timeline
Symbol 11 Text	Uses:1	Used by:15
Symbol 12 Text	Uses:1	Used by:15
Symbol 13 Graphic	Used by:15
Symbol 14 Sound	Used by:15
Symbol 15 Button	Uses:11 12 13 14	Used by:Timeline
Symbol 16 Graphic	Used by:Timeline
Symbol 17 Text	Uses:1	Used by:19 32
Symbol 18 Graphic	Used by:19 32
Symbol 19 Button	Uses:17 18	Used by:Timeline
Symbol 20 Text	Uses:1	Used by:22
Symbol 21 Graphic	Used by:22
Symbol 22 Button	Uses:20 21	Used by:Timeline
Symbol 23 Text	Uses:1	Used by:25
Symbol 24 Graphic	Used by:25
Symbol 25 Button	Uses:23 24	Used by:Timeline
Symbol 26 Text	Uses:1	Used by:28
Symbol 27 Graphic	Used by:28
Symbol 28 Button	Uses:26 27	Used by:Timeline
Symbol 29 Text	Uses:1	Used by:31
Symbol 30 Graphic	Used by:31
Symbol 31 Button	Uses:29 30	Used by:Timeline
Symbol 32 Button	Uses:17 18	Used by:Timeline
Symbol 33 Text	Uses:1	Used by:35
Symbol 34 Graphic	Used by:35
Symbol 35 Button	Uses:33 34	Used by:Timeline
Symbol 36 Text	Uses:1	Used by:Timeline
Symbol 37 Text	Uses:3	Used by:Timeline
Symbol 38 Text	Uses:3	Used by:42 67
Symbol 39 Text	Uses:3	Used by:42 67
Symbol 40 Text	Uses:3	Used by:42 67
Symbol 41 Graphic	Used by:42 67
Symbol 42 Button	Uses:38 39 40 41	Used by:Timeline
Symbol 43 Text	Uses:3	Used by:47
Symbol 44 Text	Uses:3	Used by:47
Symbol 45 Text	Uses:3	Used by:47
Symbol 46 Graphic	Used by:47
Symbol 47 Button	Uses:43 44 45 46	Used by:Timeline
Symbol 48 Bitmap	Used by:49
Symbol 49 Graphic	Uses:48	Used by:Timeline
Symbol 50 Text	Uses:3	Used by:Timeline
Symbol 51 Text	Uses:1	Used by:Timeline
Symbol 52 Text	Uses:1	Used by:Timeline
Symbol 53 Text	Uses:1	Used by:Timeline
Symbol 54 Text	Uses:1	Used by:Timeline
Symbol 55 Text	Uses:3	Used by:59 88
Symbol 56 Text	Uses:3	Used by:59 88
Symbol 57 Text	Uses:3	Used by:59 88
Symbol 58 Graphic	Used by:59 88
Symbol 59 Button	Uses:55 56 57 58	Used by:Timeline
Symbol 60 Bitmap	Used by:61
Symbol 61 Graphic	Uses:60	Used by:Timeline
Symbol 62 Text	Uses:3	Used by:Timeline
Symbol 63 Text	Uses:1	Used by:Timeline
Symbol 64 Text	Uses:1	Used by:Timeline
Symbol 65 Text	Uses:1	Used by:Timeline
Symbol 66 Text	Uses:1	Used by:Timeline
Symbol 67 Button	Uses:38 39 40 41	Used by:Timeline
Symbol 68 Text	Uses:3	Used by:Timeline
Symbol 69 Text	Uses:1	Used by:Timeline
Symbol 70 EditableText	Uses:1	Used by:Timeline
Symbol 71 Text	Uses:1	Used by:Timeline
Symbol 72 Text	Uses:1	Used by:Timeline
Symbol 73 Text	Uses:1	Used by:Timeline
Symbol 74 EditableText	Uses:1	Used by:Timeline
Symbol 75 Text	Uses:1	Used by:Timeline
Symbol 76 Text	Uses:1	Used by:Timeline
Symbol 77 Text	Uses:1	Used by:Timeline
Symbol 78 Text	Uses:1	Used by:Timeline
Symbol 79 Text	Uses:3	Used by:Timeline
Symbol 80 Text	Uses:1	Used by:Timeline
Symbol 81 Text	Uses:1	Used by:Timeline
Symbol 82 Text	Uses:1	Used by:Timeline
Symbol 83 Text	Uses:1	Used by:Timeline
Symbol 84 Text	Uses:3	Used by:Timeline
Symbol 85 Text	Uses:1	Used by:Timeline
Symbol 86 Bitmap	Used by:87
Symbol 87 Graphic	Uses:86	Used by:Timeline
Symbol 88 Button	Uses:55 56 57 58	Used by:Timeline
Symbol 89 Text	Uses:1	Used by:Timeline
Symbol 90 Text	Uses:3	Used by:94
Symbol 91 Text	Uses:3	Used by:94
Symbol 92 Text	Uses:3	Used by:94
Symbol 93 Text	Uses:3	Used by:94
Symbol 94 MovieClip	Uses:90 91 92 93	Used by:Timeline
Symbol 95 Text	Uses:1	Used by:Timeline
Symbol 96 Text	Uses:1	Used by:Timeline
Symbol 97 Text	Uses:1	Used by:Timeline
Symbol 98 Text	Uses:1	Used by:Timeline
Symbol 99 Text	Uses:1	Used by:Timeline
Symbol 100 Bitmap	Used by:101
Symbol 101 Graphic	Uses:100	Used by:Timeline
Symbol 102 Text	Uses:1	Used by:Timeline
Symbol 103 Text	Uses:1	Used by:Timeline
Symbol 104 Text	Uses:1	Used by:Timeline
Symbol 105 Bitmap	Used by:106
Symbol 106 Graphic	Uses:105	Used by:Timeline
Symbol 107 Text	Uses:1	Used by:Timeline
Symbol 108 Text	Uses:1	Used by:Timeline
Symbol 109 Text	Uses:1	Used by:Timeline
Symbol 110 Text	Uses:1	Used by:Timeline
Symbol 111 Text	Uses:3	Used by:Timeline
Symbol 112 Text	Uses:1	Used by:Timeline
Symbol 113 EditableText	Uses:1 3	Used by:Timeline
Symbol 114 Graphic	Used by:Timeline
Symbol 115 Graphic	Used by:Timeline
Symbol 116 Text	Uses:1	Used by:Timeline
Symbol 117 Text	Uses:1	Used by:Timeline
Symbol 118 Text	Uses:1	Used by:Timeline
Symbol 119 Text	Uses:1	Used by:Timeline
Symbol 120 Text	Uses:1	Used by:Timeline
Symbol 121 Text	Uses:1	Used by:Timeline
Symbol 122 Text	Uses:1	Used by:Timeline
Symbol 123 Text	Uses:1	Used by:Timeline
Symbol 124 Text	Uses:1	Used by:Timeline
Symbol 125 Text	Uses:1	Used by:Timeline
Symbol 126 Text	Uses:1	Used by:Timeline
Symbol 127 Text	Uses:1	Used by:Timeline
Symbol 128 Text	Uses:1	Used by:Timeline
Symbol 129 Text	Uses:1	Used by:Timeline
Symbol 130 Text	Uses:1	Used by:Timeline
Symbol 131 Text	Uses:1	Used by:Timeline
Symbol 132 Text	Uses:1	Used by:Timeline
Symbol 133 Text	Uses:1	Used by:Timeline
Symbol 134 Text	Uses:1	Used by:Timeline
Symbol 135 Text	Uses:1	Used by:Timeline
Symbol 136 Text	Uses:1	Used by:Timeline
Symbol 137 Text	Uses:1	Used by:Timeline
Symbol 138 Text	Uses:1	Used by:Timeline
Symbol 139 Text	Uses:1	Used by:Timeline
Symbol 140 Text	Uses:1	Used by:Timeline
Symbol 141 Bitmap	Used by:143
Symbol 142 Bitmap	Used by:143
Symbol 143 Graphic	Uses:141 142	Used by:Timeline
Symbol 144 Text	Uses:1	Used by:Timeline
Symbol 145 Text	Uses:1	Used by:Timeline
Symbol 146 Text	Uses:1	Used by:Timeline
Symbol 147 Text	Uses:1	Used by:Timeline
Symbol 148 Text	Uses:1	Used by:Timeline
Symbol 149 Text	Uses:1	Used by:Timeline
Symbol 150 Text	Uses:1	Used by:Timeline
Symbol 151 Text	Uses:3	Used by:Timeline
Symbol 152 Text	Uses:1	Used by:Timeline
Symbol 153 EditableText	Uses:1	Used by:Timeline
Symbol 154 EditableText	Uses:1	Used by:Timeline
Symbol 155 Text	Uses:1	Used by:Timeline
Symbol 156 Text	Uses:3	Used by:Timeline
Symbol 157 Text	Uses:1	Used by:Timeline
Symbol 158 Text	Uses:1	Used by:Timeline
Symbol 159 Text	Uses:1	Used by:Timeline
Symbol 160 Text	Uses:1	Used by:Timeline
Symbol 161 Text	Uses:1	Used by:Timeline
Symbol 162 Text	Uses:1	Used by:Timeline
Symbol 163 Text	Uses:1	Used by:Timeline
Symbol 164 Text	Uses:1	Used by:Timeline
Symbol 165 Text	Uses:3	Used by:Timeline
Symbol 166 Text	Uses:1	Used by:Timeline
Symbol 167 Text	Uses:1	Used by:Timeline
Symbol 168 Text	Uses:1	Used by:Timeline
Symbol 169 Text	Uses:1	Used by:Timeline
Symbol 170 Text	Uses:1	Used by:Timeline
Symbol 171 Text	Uses:3	Used by:Timeline
Symbol 172 Text	Uses:1	Used by:Timeline
Symbol 173 Text	Uses:1	Used by:Timeline
Symbol 174 Text	Uses:1	Used by:Timeline
Symbol 175 Text	Uses:1	Used by:Timeline
Symbol 176 Text	Uses:1	Used by:Timeline
Symbol 177 Text	Uses:1	Used by:Timeline
Symbol 178 Text	Uses:1	Used by:Timeline
Symbol 179 Text	Uses:1	Used by:Timeline
Symbol 180 Text	Uses:1	Used by:Timeline
Symbol 181 Text	Uses:3	Used by:Timeline
Symbol 182 Text	Uses:1	Used by:Timeline
Symbol 183 Text	Uses:1	Used by:Timeline
Symbol 184 Text	Uses:1	Used by:Timeline

Instance Names

"loader"

Frame 1

Symbol 10 MovieClip

Special Tags

Protect (24)

Timeline Frame 1

31 bytes "..$1$.s$yc6ct83YLH15rhg/4IA/t0."

Dynamic Text Variables

percentbytes

Symbol 2 EditableText

"0"