Course notes
syllabus | schedule | topics | projects | class notes | resources | students | ARTC courses
 Lectures:
Lecture A: The Flash Interface Lecture 4: User Input
Lecture B: Animation Lecture 5: Extras & Game Design
Lecture 1: Drawing with Code and ActionScripting Lecture 6: Linking up the Nucleus
Lecture 2: Graphics Application Development Lecture 7: Brainstorming Game Types
Lecture 3: Working with Movieclips Lecture 8: Topics for Discussion
  Lecture 9: Preloaders
Lecture 9: Preloaders
 


1. Make a rectangle with a thin outline and a colored fill
rect
2. Select the fill (not the outline stroke)

3. Ctrl - click or Right mouse and select Distribute to Layers

4. Convert the fill to a movieClip

5. Change the registration point of the movieClip to the upper left corner and name it loader_MC

loader

6. Name the Instance Name of this movieClip to loader_MC

instanceName

7. Select Text tool and make it a Dynamic Text fieldthen draw a text field the same size as the loader bar

textfield

8. With the text field selected, click to Right Align the text

rightalign

9. Name the Instance Name loaded_TXT

10. Select the text field and click on Character Embedding and select uppercase, lowercase, numerals, and puctuation.

embed

11. Create a new layer for your contents and click Frame 2 and add a new Keyframe and put a big image or two to make the flash file slow to load.

12. Add a new layer called Actions and put it at the top

13. Add a new script to frame one of the Actions layer - open the Action windowto type it

14. Also add this code:

stop();
var i:Number=0;
//the ProgressEvent.PROGRESS will return true while the file is still loading 
//thus making this listener call the stillLoading function over and over
this.loaderInfo.addEventListener(ProgressEvent.PROGRESS, stillLoading);
//Event.COMPLETE tells the system that the file is now in memory
this.loaderInfo.addEventListener(Event.COMPLETE, allDone);

function stillLoading(e:ProgressEvent):void {
		//we put the number of bytes loaded into memory in the loaded variable
		var loaded:Number=e.target.bytesLoaded;
		//put the total number of bytes it has to load into the total variable
		var total:Number=e.target.bytesTotal;
		//divide the number of bytes that are already loaded by the total that need to be loaded 
		var thePercent:Number=loaded/total;
		//the size of the rectangle will change based on the percent loaded
		this.loader_MC.scaleX=thePercent;
		//it will print out the the percentage loaded each time
		this.loaded_TXT.text = "Loading... "+(Math.round(thePercent*100))+"%";
}

function allDone(e:Event):void {
		//go to the next frame when the file is loaded in memory
		nextFrame();
}


15. Test the Movie

16. In the View menu (while the movie is running) set your Download Settings

17. View menu - Simulate Download

18. View - Bandwidth Profiler to look at your memory usage

Get Sample Loader file


Links to other sites that have examples of other ways to make a loader:

NEWMOVIECLIP Preloder in Flash

ActionScript.org Preloading...

Video tutorial: Actionscript 3.0 preloader

Code for a LOT of creative preloaders - Preloader Round Up

Opening windows - pop-up windows are used when you want to display something to users but don't want them to leave the page that they are currently viewing.

EX:

<A HREF="#" onClick="window.open('trivia.html', 'triviaWnd', 'width=370,height=240,status=1'); return false;">click here</A>

A HREF equals a # because the destination URL will be a parameter within the javascript code. If you place a URL in the A HREF the current browser window will change along with the pop-up window.

onClick is the event handler. When the user clicks, it opens a window with the specifications (parameters), i.e., size of window, URL to display in window, scrollbars, etc.

window.open is a function that controls the event (opening a new browser window) and contains the event specifications, including what html doc to load in the window (trivia.html), window name (triviaWnd), size of window (370x240), and its status bar (1 or yes).

• The first parameter, 'trivia.html' is the URL of the file to load in the new window. Note that it doesn't have to be an HTML file. It could also be an image file or anything the browser can display.

• The second parameter, 'triviaWnd' is the name of the new window - the name can be anything that isn't a Javascript keyword, but must start with a letter, $, or underscore _ . Windows need to be named (just like frames), so when they are called by the script, the browser knows which window your code is trying to communicate with. This is necessary to close the window later.

- If you want information to load in the same window, you use the same window name in your links.
- If you want multiple windows then you need to use unique names for each window created.

• The third parameter determines the dimensions and appearance of the window. We have specified a window of size 370x240 with a visible status bar. Note that it is in single quotes and the quotes end after the last parameter.

•The appearance of the window can be controlled by changing the value of the third parameter. The commonly used options are:

height - Height of the new window in pixels (eg: height=100)
width - Width of the new window in pixels (eg: width=200)
top - Number of pixels from top of screen (eg: top=100)
left - Number of pixels from left of screen (eg: left=200)
directories - Specifies whether to display the browser directory buttons like "What's Cool" etc. (eg: directories=yes)
hotkeys - Enables or disables various hotkeys (eg: hotkeys=no)
location - Specifies whether the "Location" box is to be displayed (eg: location=yes)
menubar - Specifies whether the new window should have a menu bar (eg: menubar=yes)
resizable - Specifies whether the user is allowed to resize the new window (eg: resizable=no)
scrollbars - Specifies whether the new window can have scroll bars if necessary (eg: scrollbars=yes)
toolbar - Specifies whether the new window has a toolbar (eg: toolbar=yes)

NOTE: Instead of yes/no values, you may also give 1/0. i.e., you may write toolbar=1 instead of toolbar=yes.

Samples of opening windows with different functions:

1) Basic window. No menu, no toolbar, no status bar, not even scrollbars:

EX: <A HREF="#" onClick="window.open('myHTML.html', 'newWnd', 'width=500,height=400'); return false;">Try</A>

TEST IT

2) Window with menubar, location box, scrollbars, but not resizable:

EX: <A HREF="#" onClick="window.open('myHTML.html', 'newWnd', 'width=500,height=400,menubar=yes,location=yes,scrollbars=yes,resizable=no'); return false;">Try</A>

TEST IT

NOTE: scrollbars won't show up if they aren't necessary.

3) Window with toolbar, statusbar and scrollbars. You can resize this window if you want which wasn't possible with above sample windows:

EX: <A HREF="#" onClick="window.open('myHTML.html', 'newWnd', 'width=500,height=400,toolbar=1,status=1,scrollbars=yes,resizable=1'); return false;">Try</A>

TEST IT