swfchan: Preloading - For Dummies.swf (info)

Text

Before you read through this tutorial, I am expecting that you have watched
some other tutorials that tought you about how to use frames in Flash. I
explain that a little in here, but not that well. I focused mainly on ActionScript
and PreLoading.
Tutorial for Flash 8 but should work with other versions of Flash that
have ActionsScript 2. I think setting variables in Dynamic Text doesn't work
in Flash 5 or below, but I'm not sure.

Preloading:
For Dummies
By Anthony Rogers

This Tutorial will
show how to make
a decent preloader.
It will explain how
the ActionScript
works and the finished
preloader will be easy
to edit, so you can make
your own unique preloader
instead of using the
Newgrounds one.

Start by selecting the Rectangle Tool

Now, Make a rectangle anywhere on the Stage.

Set the Stroke Color Off and the Fill Color to
whatever you want

Now, select the rectangle by clicking on it with the
Selection Tool.

Than Convert it to a Symbol. The Default Hotkey
is F8 but you can also do it by "Modify>Convert
to Symbol. Make the symbol a Movie Clip and
call it "PreLoader".

Your MovieClip should have a Blue outline when
selected. Open it up by Double Clicking on it.

Than Select the black rectangle again and
Convert to a Symbol again, but call this "Load_Bar"

Than open up that symbol by double clicking
with the selection tool.

Now for the confusing part. On the timeline inside of the "Load_Bar" symbol, right
click on frame 100 and select "Insert Keyframe", or if you don't have right click, just
go to "Insert>Timeline>Keyframe". Than go back and select the rectangle in Frame 1
and click on the Free Transform Tool (hotkey: "Q"). Than Click the far right handle and
drag to the left until the bar is nothing more than a little sliver. Look at the Animation
Below. (continued on Next Page)

Than Right Click on the blank space on the timeline between those two Keyframes
and select Create Shape Tween. If you play through those 100 frames, the bar
should gradually get bigger. Or, instead of right-clicking, select one of the frames
betweeen and open up the properties window. (Window>Properties>Properties). Than
select the tween to Shape Tween. Name that Layer "LoadBar" and than click on the
"Insert Layer" button. Name the new Layer "actions" and select the first frame of
"actions" and hit F9 or Window>Actions to bring up the actions window. Type in
the following Script: This just tells the MovieClip to stop playing. When this
is done, your timeline inside of the Load_Bar symbol should resemble the above image.

stop();

PreLoader

Now we have our Loadbar in our Preloader. Next step is easy. Select
the Load_Bar symbol and open up the properties window and set the
Instance Name to "load_bar".

Now make a new layer in the "PreLoader" symbol and call it Actions.
Write the following ActionScript in the blank keyframe in the Actions
Panel (F9).

_root.Stop();percent = Math.floor(_root.getBytesLoaded()/_root.getBytesTotal() * 100);load_bar.gotoAndStop( percent );

This actionscript just made a variable called percent. In English, it said
"percent = the bytes of the movie that were loaded divided by the
bytes of the total file size of the movie multiplied by 100 equals the
percent of the movie loaded. The "_root." stuff meant the bytes of the entire
movie loaded, not just the bytes of the symbol the actionscript is in.
If you think about it math-wise for a second,
it makes sense. When you set the instance name for the loadbar, you made
the actionscript know what your talking about, and the script will open up that
symbol and go to and stop at the frame that is the number of percent that the
movie is loaded. It's pretty hard to explain in text, but re-read the coding a
couple of times and it will sink in, hopefully. The _root.stop(); part meant
for the main movie to stop playing.

Now right click on frame 2 of the loadbar layer and insert frame. This makes
the frame that you selected exactly the same as the previous keyframe. I'm
hoping you've seen a flash tutorial before this one that explains about frames...
Now right click on frame 2 of the actions layer and insert blank keyframe.
Open up the actions panel for this keyframe and insert this actionscript.

if(percent<100){gotoAndPlay(1)} else {gotoAndStop("loaded")}

Flash Help

Getting Started With Flash

Flash LiveDocs

What's New in Flash 8

Flash Exchange

Manage Extensions

Flash Support Center

Flash Developer Center

CRYSTAL GYSER!!!

Macromedia Online Forums

Macromedia Training

Online Regestration

Print Regestration

About Flash Professional

What that just said was that if the percent loaded is less than 100, to go back
and play the first frame of the symbol. This will make a loop so the
actionscript will keep refreshing until the movie is completely loaded when
percent = 100. The "else" statement meant that if the percent is something
that is not less than 100, to read the next actionscript. It just happened to say
to go to and stop at the frame called "loaded". We havent made this frame
yet, but that's what were going to do next.

Right click on frame 3 of the loadbar layer and make a blank Keyframe.
Highlight that keyframe and in the Properties window, set the Frame Lable
to "loaded". Now the actionscript has an idea of what were talking about and
I think most of the actionscript for the preloader is finished now!
Time for a play button. Using whatever tools you want, color a nice little
play button on the stage in frame 3 of layer Loadbar of the Preloader symbol.
Drag-Select it with the Selection tool (V) and convert to a symbol (F8).
Make this called play button and make it a button, not a movie clip.

Don't open it up yet. First right click on the new button symbol and open up
Actions. Insert the following actionscript:

on(Release){    _root.Play():}

This said for the root (main movie) to play when the
button is released. Now you can open up the playbutton
and make it however you want it.

An extra thing you can do to frame 1 of the loadbar layer is to add a blank
dynamic text box to show the percent of the movie loaded. Click on the
text tool (T) and in the properties window where it says Static Text, change
that to Dynamic text. Put a blank text box wherever you want by clicking
on the stage, than whip out the selection tool again. Click on the text box and
in the properties window, set the Var: (which means Variable) to "percent".
Remember our percent variable?

Now, exit out of the Preloader symbol and copy it into the first frame of your
movie. It will stop the movie, load it while showing the loadbar (or percent
number), and than make a play button. You can edit the preloader however
you want and make it look good.

The End.
By Anthony Rogers

ActionScript [AS1/AS2]

Frame 2
	stop();
Symbol 9 Button
on (release) {
	getURL ("http://www.newgrounds.com", "blank");
}
Symbol 14 Button
on (release) {
	_root.play();
}
Symbol 15 MovieClip Frame 1
	_root.stop();
	PercentLoaded = (_root.getBytesLoaded() / _root.getBytesTotal()) * 100;
	if (PercentLoaded != 100) {
		bar._xscale = PercentLoaded;
	} else {
		gotoAndStop ("loaded");
	}
Symbol 15 MovieClip Frame 2
	gotoAndPlay (1);
Symbol 25 Button
on (release) {
	nextFrame();
}
Symbol 35 Button
on (release) {
	prevFrame();
}

Library Items

Symbol 1 Graphic	Used by:15 38 48 Timeline
Symbol 2 Graphic	Used by:3
Symbol 3 MovieClip	Uses:2	Used by:15
Symbol 4 Graphic	Used by:15
Symbol 5 Graphic	Used by:8 9
Symbol 6 Graphic	Used by:8 9
Symbol 7 Graphic	Used by:8 9
Symbol 8 MovieClip	Uses:5 6 7	Used by:9
Symbol 9 Button	Uses:8 5 6 7	Used by:15
Symbol 10 Graphic	Used by:14
Symbol 11 Graphic	Used by:14
Symbol 12 Graphic	Used by:14
Symbol 13 Graphic	Used by:14
Symbol 14 Button	Uses:10 11 12 13	Used by:15
Symbol 15 MovieClip	Uses:1 3 4 9 14	Used by:Timeline
Symbol 16 Font	Used by:17 18 30 36 39 40 45 46 49 53 54 57 68 76 77 79 80 99 101 102 104 105 106 108
Symbol 17 Text	Uses:16	Used by:Timeline
Symbol 18 Text	Uses:16	Used by:Timeline
Symbol 19 Bitmap	Used by:20 73
Symbol 20 Graphic	Uses:19	Used by:Timeline
Symbol 21 Graphic	Used by:25
Symbol 22 Graphic	Used by:25
Symbol 23 Graphic	Used by:25
Symbol 24 Graphic	Used by:25
Symbol 25 Button	Uses:21 22 23 24	Used by:Timeline
Symbol 26 Graphic	Used by:29
Symbol 27 Graphic	Used by:28
Symbol 28 MovieClip	Uses:27	Used by:29
Symbol 29 MovieClip	Uses:26 28	Used by:38 67 Timeline
Symbol 30 Text	Uses:16	Used by:Timeline
Symbol 31 Graphic	Used by:35
Symbol 32 Graphic	Used by:35
Symbol 33 Graphic	Used by:35
Symbol 34 Graphic	Used by:35
Symbol 35 Button	Uses:31 32 33 34	Used by:Timeline
Symbol 36 Text	Uses:16	Used by:Timeline
Symbol 37 ShapeTweening	Used by:38
Symbol 38 MovieClip	Uses:29 37 1	Used by:Timeline
Symbol 39 Text	Uses:16	Used by:Timeline
Symbol 40 Text	Uses:16	Used by:Timeline
Symbol 41 Graphic	Used by:Timeline
Symbol 42 Graphic	Used by:Timeline
Symbol 43 Bitmap	Used by:44
Symbol 44 Graphic	Uses:43	Used by:Timeline
Symbol 45 Text	Uses:16	Used by:Timeline
Symbol 46 Text	Uses:16	Used by:Timeline
Symbol 47 Graphic	Used by:Timeline
Symbol 48 MovieClip	Uses:1	Used by:Timeline
Symbol 49 Text	Uses:16	Used by:Timeline
Symbol 50 Bitmap	Used by:52
Symbol 51 Bitmap	Used by:52
Symbol 52 Graphic	Uses:50 51	Used by:Timeline
Symbol 53 Text	Uses:16	Used by:Timeline
Symbol 54 Text	Uses:16	Used by:Timeline
Symbol 55 Bitmap	Used by:56
Symbol 56 Graphic	Uses:55	Used by:Timeline
Symbol 57 Text	Uses:16	Used by:Timeline
Symbol 58 Graphic	Used by:67
Symbol 59 Graphic	Used by:67
Symbol 60 Graphic	Used by:61
Symbol 61 MovieClip	Uses:60	Used by:67
Symbol 62 Graphic	Used by:63
Symbol 63 MovieClip	Uses:62	Used by:67
Symbol 64 ShapeTweening	Used by:67
Symbol 65 ShapeTweening	Used by:67
Symbol 66 Graphic	Used by:67
Symbol 67 MovieClip	Uses:58 59 61 63 29 64 65 66	Used by:Timeline
Symbol 68 Text	Uses:16	Used by:Timeline
Symbol 69 Font	Used by:70 74 78 81 84 85 86 87 88 89 90 91 92 93 94 95 96 97 103
Symbol 70 EditableText	Uses:69	Used by:Timeline
Symbol 71 Graphic	Used by:Timeline
Symbol 72 Bitmap	Used by:73
Symbol 73 Graphic	Uses:72 19	Used by:75
Symbol 74 Text	Uses:69	Used by:75
Symbol 75 MovieClip	Uses:73 74	Used by:Timeline
Symbol 76 Text	Uses:16	Used by:Timeline
Symbol 77 Text	Uses:16	Used by:Timeline
Symbol 78 EditableText	Uses:69	Used by:Timeline
Symbol 79 Text	Uses:16	Used by:Timeline
Symbol 80 Text	Uses:16	Used by:Timeline
Symbol 81 EditableText	Uses:69	Used by:Timeline
Symbol 82 Graphic	Used by:98
Symbol 83 Graphic	Used by:98
Symbol 84 Text	Uses:69	Used by:98
Symbol 85 Text	Uses:69	Used by:98
Symbol 86 Text	Uses:69	Used by:98
Symbol 87 Text	Uses:69	Used by:98
Symbol 88 Text	Uses:69	Used by:98
Symbol 89 Text	Uses:69	Used by:98
Symbol 90 Text	Uses:69	Used by:98
Symbol 91 Text	Uses:69	Used by:98
Symbol 92 Text	Uses:69	Used by:98
Symbol 93 Text	Uses:69	Used by:98
Symbol 94 Text	Uses:69	Used by:98
Symbol 95 Text	Uses:69	Used by:98
Symbol 96 Text	Uses:69	Used by:98
Symbol 97 Text	Uses:69	Used by:98
Symbol 98 Button	Uses:82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97	Used by:Timeline
Symbol 99 Text	Uses:16	Used by:Timeline
Symbol 100 Font	Used by:101 104
Symbol 101 Text	Uses:16 100	Used by:Timeline
Symbol 102 Text	Uses:16	Used by:Timeline
Symbol 103 EditableText	Uses:69	Used by:Timeline
Symbol 104 Text	Uses:16 100	Used by:Timeline
Symbol 105 Text	Uses:16	Used by:Timeline
Symbol 106 Text	Uses:16	Used by:Timeline
Symbol 107 Graphic	Used by:Timeline
Symbol 108 Text	Uses:16	Used by:Timeline

Instance Names

"bar"

Symbol 15 MovieClip Frame 1

Symbol 3 MovieClip

Special Tags

FileAttributes (69)

Timeline Frame 1

Access local files only, Metadata not present, AS1/AS2.

Labels

"loaded"

Symbol 15 MovieClip Frame 3