I wrote the following tutorial for a forum of my last free host, which doesn't exist anymore. Luckily i managed to salvage it using Google's cache.
Im not sure if many people will use it, but for anyone using flash online its a must to know how to make a preloader.
----------
Ill start with the very first thing you usually make when creating a flash file to be put on the internet, a preloader.
Im assuming you have basic knowledge of Flash 8 and AS2, because thats what i will be using. However any version of flash that supports AS2 will do just fine.
1. Setting up
If you haven't already, create a new flash document (make sure its an AS2 one if your using Flash CS3 or CS4).
The next step is to make a shape of your choice (usually a long rectangle) that will become visible as the file loads. In my example ill be using the following shape:
I recommend you use an outline aswell so people can see how far it has actually loaded (I have used a dark grey which is hard to see around the dark blue bar).
Convert your shape you wish to appear as the file loads (not the outline, the center fill) to a symbol (select it and press F8), using the following settings:
TIP: If you have the registration point on any of the left points, the bar will load from left to right. if you have it and of the middle points, it will load from the center out to the edges. If you use any of the right ones, it will load from right to left.
I will be using from left to right in my example.
Give the created movie clip an instance name of "load_bar" (without the quotes).
Secondly you need to create a dynamic text box to show the user how much has loaded in words (eg 72%). You can position it anywhere you like. mine will be positioned above the center of the load bar.
Give the dynamic text box an instance name of "load_text" (without the quotes).
2. The Code
I have put the code in an image deliberately so you cant copy and paste it, which means you will have to type it out again and learn how it works. If thats to much work for you, then you should seriously consider giving flash up, because the point is for you to learn how it works, not me do the work for you.
Copy down this code one line at a time into the first frames action script panel. Read the descriptions below as you copy it down to learn how it works.
Line 2: Stops the movie with flash's stop function so it doesn't keep playing and skip our preloader.
Line 4: Defines the onEnterFrame function, which flash automatically calls at the start of each new frame.
Line 6/7: Defines 2 variables (loadedBytes/totalBytes) using 2 inbuilt flash functions. fairly self explanitory.
Line 9: Calculates what percent has been loaded.
Line 11: Defines the bars _xscale value. _xscale defines what width it has as a percentage of its normal width. 0 = no width, 100 = full width, 50 = 50% width etc.
Line 13: Defines the text box 'text' value. the 'text' value of a text box is what text is displayed inside it. Percent is first rounded so we don't end up with something like '??.035183%'.
Line 15: Checks to see if all the data has been loaded
Line 17/19: If it has it will first delete the code currently executing so it doesn't execute again (and continually play the movie when you dont want it to), and then tells the movie to play.
Its a good idea to copy down the code comments (lines starting with '//') in case you need to change something later, so you don't forget how it works.
Semicolons ( ; ) are not required at the end of each line, but it is good coding practice to use them. Some scripting languages such as PHP, which is otherwise similar, DO require them. Its a good idea to get into the habit.
The strict data typing (eg var loadedBytes:Number =) is also not required, but is a really good habit to get into. If you do use strict data types, it will speed up code execution times and generate more accurate error messages if you have a coding mistake. If you don't use it start using it!
3. Running it
Your code should be ready to run! Make sure you add some large images or somethign in the frames after the preloader to make give it somethign to load, and press Ctrl+Enter to launch (save the .fla file first).
It will initially just skip the preloader instantly. You need to upload the .swf file it generated to the internet and view it there to see it in action, because currently it is loading it from your hard drive which is almost instant.
Important Information[/size]
If your going to be dynamically attaching movieclips or anything with actionscript, then this is concerning you.
When you setup the linkage for your symbol, DO NOT select "export in first frame". If you do it will load that symbol before your first frame, and your preloader will not start working until that symbol is loaded.
A work around for this is to create a second frame in your movie, and place all the symbols you need to export for actionscript there. that way they will be initiated after the preloader, and will still work in your code, but your preloader will start showing progress at 1%.
5. More advanced codes
Below are some examples i have made of more advanced codes. I will only be explaining them in the description, its upto you to learn how they work fully.
Display Bytes loaded/total
Display download speed
You can off course combine the previous 2 examples, and even expand on them more with your own ideas. (eg making a bar that goes from top of page to bottom using _yscale).
5. Conclusion
I hope my tutorial was useful to everyone getting started with flash. Im certainly looking forward to writing the next one.
Im not sure if many people will use it, but for anyone using flash online its a must to know how to make a preloader.
----------
Ill start with the very first thing you usually make when creating a flash file to be put on the internet, a preloader.
Im assuming you have basic knowledge of Flash 8 and AS2, because thats what i will be using. However any version of flash that supports AS2 will do just fine.
1. Setting up
If you haven't already, create a new flash document (make sure its an AS2 one if your using Flash CS3 or CS4).
The next step is to make a shape of your choice (usually a long rectangle) that will become visible as the file loads. In my example ill be using the following shape:
I recommend you use an outline aswell so people can see how far it has actually loaded (I have used a dark grey which is hard to see around the dark blue bar).
Convert your shape you wish to appear as the file loads (not the outline, the center fill) to a symbol (select it and press F8), using the following settings:
TIP: If you have the registration point on any of the left points, the bar will load from left to right. if you have it and of the middle points, it will load from the center out to the edges. If you use any of the right ones, it will load from right to left.
I will be using from left to right in my example.
Give the created movie clip an instance name of "load_bar" (without the quotes).
Secondly you need to create a dynamic text box to show the user how much has loaded in words (eg 72%). You can position it anywhere you like. mine will be positioned above the center of the load bar.
Give the dynamic text box an instance name of "load_text" (without the quotes).
2. The Code
I have put the code in an image deliberately so you cant copy and paste it, which means you will have to type it out again and learn how it works. If thats to much work for you, then you should seriously consider giving flash up, because the point is for you to learn how it works, not me do the work for you.
Copy down this code one line at a time into the first frames action script panel. Read the descriptions below as you copy it down to learn how it works.
Line 2: Stops the movie with flash's stop function so it doesn't keep playing and skip our preloader.
Line 4: Defines the onEnterFrame function, which flash automatically calls at the start of each new frame.
Line 6/7: Defines 2 variables (loadedBytes/totalBytes) using 2 inbuilt flash functions. fairly self explanitory.
Line 9: Calculates what percent has been loaded.
Line 11: Defines the bars _xscale value. _xscale defines what width it has as a percentage of its normal width. 0 = no width, 100 = full width, 50 = 50% width etc.
Line 13: Defines the text box 'text' value. the 'text' value of a text box is what text is displayed inside it. Percent is first rounded so we don't end up with something like '??.035183%'.
Line 15: Checks to see if all the data has been loaded
Line 17/19: If it has it will first delete the code currently executing so it doesn't execute again (and continually play the movie when you dont want it to), and then tells the movie to play.
Its a good idea to copy down the code comments (lines starting with '//') in case you need to change something later, so you don't forget how it works.
Semicolons ( ; ) are not required at the end of each line, but it is good coding practice to use them. Some scripting languages such as PHP, which is otherwise similar, DO require them. Its a good idea to get into the habit.
The strict data typing (eg var loadedBytes:Number =) is also not required, but is a really good habit to get into. If you do use strict data types, it will speed up code execution times and generate more accurate error messages if you have a coding mistake. If you don't use it start using it!
3. Running it
Your code should be ready to run! Make sure you add some large images or somethign in the frames after the preloader to make give it somethign to load, and press Ctrl+Enter to launch (save the .fla file first).
It will initially just skip the preloader instantly. You need to upload the .swf file it generated to the internet and view it there to see it in action, because currently it is loading it from your hard drive which is almost instant.
Important Information[/size]
If your going to be dynamically attaching movieclips or anything with actionscript, then this is concerning you.
When you setup the linkage for your symbol, DO NOT select "export in first frame". If you do it will load that symbol before your first frame, and your preloader will not start working until that symbol is loaded.
A work around for this is to create a second frame in your movie, and place all the symbols you need to export for actionscript there. that way they will be initiated after the preloader, and will still work in your code, but your preloader will start showing progress at 1%.
5. More advanced codes
Below are some examples i have made of more advanced codes. I will only be explaining them in the description, its upto you to learn how they work fully.
Display Bytes loaded/total
Display download speed
You can off course combine the previous 2 examples, and even expand on them more with your own ideas. (eg making a bar that goes from top of page to bottom using _yscale).
5. Conclusion
I hope my tutorial was useful to everyone getting started with flash. Im certainly looking forward to writing the next one.
