swfchan: Flash TUT - Preloader.swf (info)

Text

Preloaders

Mak

START

This is a tutorial on how to create preloaders in Flash, with and without a loading bar.
Preloaders should make your animations run more smoothly since it will load the whole
thing before playing. If your file is small, then there's no reason for a preloader for
obvious reasons but if it's pretty big, you might want to consider making one. There are
many ways to make preloaders. These are just two of them.
This tutorial was written for Flash CS3 Professional, but it works the same with previous
versions of Flash with a few changes.
Use the buttons on the bottom right to navigate. Click > to continue, < to go back and «
to come back here.
If you want to skip to the preloader without the bar, .

click here

Create a new Flash Document. It should already be open when you open Flash. If not, go
to File > New or press Ctrl+N. If a box comes up, select Flash File (ActionScript 2.0).
Set the dimensions of the file (default: 550x400) and background color if you want.
Make sure you can see the Timeline shown below. If you don't, go to Window and make
sure Timeline is checked or press Ctrl+Alt+T.

Preloaders - Bar

In the Timeline, you will see a layer called Layer 1. Double-click on it or select Modify >
Timeline > Layer Properties... and rename the layer Bar.
Click on the Rectangle Tool or press R. The properties should appear. If not, select
Window > Properties and make sure Properties is checked or press Ctrl+F3.

Change the properties to whatever you want. In this example, it is set to hairline, Stroke
color black and Fill color red.
Draw a rectangle wherever you want your preloader to be. Make it any size you want. It
should look something like this:
If your bar does not have a stroke, you can skip this step.
If you have a stroke, double-click on it to select it. Now ONLY the outline should be
selected, as shown below.
Now select Edit > Cut or press Ctrl+X to cut it.

Create a new layer by clicking on the Insert Layer icon in the Timeline or by selecting
Insert > Timeline > Layer. A new layer should appear in the Timeline. Double-click on it
and rename it Outline.
With this layer selected, paste the stroke you just cut by selecting Edit > Paste in Place
or by pressing Ctrl+Shift+V. The outline should appear in the exact same place except
on a different layer.

Select the layer named Bar. This should select the bar on that layer. It should be the
ONLY thing selected. Do not select the stroke if you have one.
Change this to a movie clip by selecting Modify > Convert to Symbol... or by pressing
F8. A box will appear. In the Name box, give your symbol any name such as Bar. Make
sure the Type is set to Movie Clip and the Registration is at the top left corner. Click OK
when you're done.

Make sure the bar is still selected. In the Properties box, change the <Instance Name> to
BAR. Make sure you type it exactly like that.
Create a new layer by clicking on the Insert Layer icon in the Timeline or by selecting
Insert > Timeline > Layer. A new layer should appear in the Timeline. Double-click on it
and rename it Percent.

Select the Text Tool or press A. In the Properties box, change the Text Type to Dynamic
Text. Then adjust the font, size and color to whatever you want the percentage to look
like.

With the Text Tool (T) and the third layer (Percent) still selected, click and drag a
text box onto the document (wherever you want the percentage to appear). Make it long
enough to fit 4 characters since it will have to say "100%" later. Do not type anything in
the text box. It should look like the picture below. As you can see, I have the percentage
on top of the bar in my file.

In the Properties window, you will notice a box that says Var: and a white box after it.
Type in TEXT in the box as shown below. Make sure you type it exactly like that.

Now create another new layer by clicking on the Insert Layer icon . Rename this layer
to Actions. Your layers should look something like this by now. If not, drag whatever you
need to its appropriate place.
With the Actions layer selected, insert a blank keyframe by pressing F7 or by selecting
Insert > Blank Keyframe. Your timeline should now look like this:

Select the first keyframe of the Actions layer as shown below. To make sure you have
the frame selected, make sure your Actions window says Actions - Frame. If you don't
have the Actions window open, select Window > Actions or press F2.
Open the Actions window and it should look something like the image below.

Make sure you select
ActionScript 1.0 & 2.0

Now put the following into the box:
The part that says BAR._width = PERCENT*200; is the width of your bar. You can change
the number to the width of your bar. You can check by clicking on the bar (not the
stroke) and it should say so in the Properties window. This is the ONLY part you need to
change!

LOADED = Math.round(getBytesLoaded());
TOTAL = Math.round(getBytesTotal());
PERCENT = LOADED/TOTAL;
BAR._width = PERCENT*200;
TEXT = Math.round(PERCENT*100)+"%";
if (LOADED == TOTAL) {
gotoAndPlay(3);
}

Select it.

Find the width.

Select the second keyframe in the Actions layer. You
will notice the first keyframe has the letter a in it.
This indicates that an action has been placed. Again,
open the Actions window to make sure the tab says
Actions - Frame. The box should be blank. Type in
the following:
Close the Actions window and you will see that an a has appeared on the second
keyframe.
Insert a frame on each of the other layers by selecting the layer and selecting Insert >
Frame or by pressing F5. Your layers should now look something like this:

gotoAndPlay(1);

Insert a new layer and start your animation but make sure you start it on the THIRD
keyframe. The frames before the third keyframe should be blank.
That's all for preloaders with bars.
Click the > button if you want to learn how to make a preloader without the bar.

Preloaders - No Bar

Double-click on Layer 1 and rename it Percent.
Select the Text Tool (T) . The Properties should appear. If not, go to Window >
Properties or press Ctrl+F3. Set the text to Dynamic Text. Set the font to whatever you
want.

With the Text Tool (T) selected, click and drag a text box onto the file wherever you
want the percentage to appear. Make sure it's long enough to fit 4 characters. Do not
type anything in the box. It should look something like the picture below.
In the Properties window, there should be a box that says <Instance Name>. Change it
to myOutput. Type it exactly like that.

Create a new layer by clicking on the Insert Layer icon . Rename this layer Actions.
With the Actions layer selected, insert a blank keyframe by pressing F7 or selecting
Insert > Blank Keyframe. Your Timeline should now look like this:

Now put the following into the box:

percent = Math.floor(getBytesLoaded()/getBytesTotal()*100);
myOutput.text = percent + "%";

Select the second keyframe in the Actions layer. You
will notice the first keyframe has the letter a in it.
This indicates that an action has been placed. Again,
open the Actions window to make sure the tab says
Actions - Frame. The box should be blank. Type in
the following:
Close the Actions window and you will see that an a has appeared on the second
keyframe.
in the Percent layer by selecting the layer and selecting Insert > Frame or by pressing
F5. Your layers should look like this:

if (percent == 100){
gotoAndPlay(3);
}else{
gotoAndPlay(1);
}

Insert a new layer and start your animation but make sure you start it on the THIRD
keyframe. The frames before the third keyframe should be blank.

That's all for this tutorial.
If you have any questions, feel free to ask me.

ActionScript [AS1/AS2]

Frame 1
	LOADED = Math.round(getBytesLoaded());
	TOTAL = Math.round(getBytesTotal());
	PERCENT = LOADED / TOTAL;
	BAR._width = PERCENT * 200;
	TEXT = Math.round(PERCENT * 100) + "%";
	if (LOADED == TOTAL) {
		gotoAndPlay (3);
	}
Frame 2
	gotoAndPlay (1);
Frame 3
	stop();
Frame 4
	stop();
Symbol 20 Button
on (release) {
	gotoAndPlay (4);
}
Symbol 27 Button
on (release) {
	gotoAndStop (19);
}
Symbol 34 Button
on (release) {
	gotoAndStop (4);
}
Symbol 38 Button
on (release) {
	gotoAndStop (5);
}
Symbol 42 Button
on (release) {
	gotoAndStop (4);
}
Symbol 48 Button
on (release) {
	gotoAndPlay (4);
}
Symbol 49 Button
on (release) {
	gotoAndStop (6);
}
Symbol 50 Button
on (release) {
	gotoAndStop (5);
}
Symbol 56 Button
on (release) {
	gotoAndStop (7);
}
Symbol 59 Button
on (release) {
	gotoAndStop (8);
}
Symbol 60 Button
on (release) {
	gotoAndStop (6);
}
Symbol 66 Button
on (release) {
	gotoAndStop (9);
}
Symbol 67 Button
on (release) {
	gotoAndStop (7);
}
Symbol 71 Button
on (release) {
	gotoAndStop (10);
}
Symbol 72 Button
on (release) {
	gotoAndStop (8);
}
Symbol 77 Button
on (release) {
	gotoAndStop (11);
}
Symbol 78 Button
on (release) {
	gotoAndStop (9);
}
Symbol 82 Button
on (release) {
	gotoAndStop (12);
}
Symbol 83 Button
on (release) {
	gotoAndStop (10);
}
Symbol 88 Button
on (release) {
	gotoAndStop (13);
}
Symbol 89 Button
on (release) {
	gotoAndStop (11);
}
Symbol 93 Button
on (release) {
	gotoAndStop (14);
}
Symbol 94 Button
on (release) {
	gotoAndStop (12);
}
Symbol 99 Button
on (release) {
	gotoAndStop (15);
}
Symbol 100 Button
on (release) {
	gotoAndStop (13);
}
Symbol 108 Button
on (release) {
	gotoAndStop (16);
}
Symbol 109 Button
on (release) {
	gotoAndStop (14);
}
Symbol 119 Button
on (release) {
	gotoAndStop (17);
}
Symbol 120 Button
on (release) {
	gotoAndStop (15);
}
Symbol 127 Button
on (release) {
	gotoAndStop (18);
}
Symbol 128 Button
on (release) {
	gotoAndStop (16);
}
Symbol 132 Button
on (release) {
	gotoAndStop (19);
}
Symbol 133 Button
on (release) {
	gotoAndStop (17);
}
Symbol 135 Button
on (release) {
	gotoAndStop (20);
}
Symbol 136 Button
on (release) {
	gotoAndStop (18);
}
Symbol 141 Button
on (release) {
	gotoAndStop (21);
}
Symbol 142 Button
on (release) {
	gotoAndStop (19);
}
Symbol 147 Button
on (release) {
	gotoAndStop (22);
}
Symbol 148 Button
on (release) {
	gotoAndStop (20);
}
Symbol 152 Button
on (release) {
	gotoAndStop (23);
}
Symbol 153 Button
on (release) {
	gotoAndStop (21);
}
Symbol 155 Button
on (release) {
	gotoAndStop (24);
}
Symbol 156 Button
on (release) {
	gotoAndStop (22);
}
Symbol 159 Button
on (release) {
	gotoAndStop (25);
}
Symbol 160 Button
on (release) {
	gotoAndStop (23);
}
Symbol 165 Button
on (release) {
	gotoAndStop (26);
}
Symbol 166 Button
on (release) {
	gotoAndStop (24);
}
Symbol 169 Button
on (release) {
	gotoAndStop (27);
}
Symbol 170 Button
on (release) {
	gotoAndStop (25);
}

Library Items

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

Instance Names

"BAR"

Frame 1

Symbol 7 MovieClip

Special Tags

FileAttributes (69)	Timeline Frame 1	Access local files only, Metadata not present, AS1/AS2.
Protect (24)	Timeline Frame 1	31 bytes "..$1$t5$dwCT4RsdQd1jrVi2DmVjt1."

Dynamic Text Variables

TEXT	Symbol 3 EditableText	""
TEXT	Symbol 15 EditableText	""