This is a tutorial on how to use the window component. Before starting check the flash helpfiles for information on the window component and get a bit familiar with the AS syntax and the methods. That will make this tutorial easier to understand. First have a look at the final movie.

The Script

Now let's have a look at the script. We first define the variables and import the components we need: the window component and the progressbar. Then we set the style properties for the window component.

		//import a progressbar
var my_pb:mx.controls.ProgressBar;
		// make the progressbar and waitclip invisible for now
_root.my_pb._visible = false;
var wait_mc:MovieClip;
_root.wait_mc._visible = false;
		// create a new CSSStyleDeclaration named TitleStyles and list it with the global styles list
_global.styles.TitleStyles = new mx.styles.CSSStyleDeclaration ();
		// customize styles
_global.styles.TitleStyles.color = 0xFF0000;
_global.styles.TitleStyles.fontSize = 14;
		

Next we create the function to open and load the window with content. We open the window using the PopUpManager class. The Boolean value "false" allows to open more than one window. Next we set some properties like size, position and the url.

		//
// main function to create a new window
//
function popup (b_tw_mc:MovieClip, wText:String, wContent:String, xPos:Number, yPos:Number) {
	// we create a new window. The window belongs to the movieclip class.
	var tw:MovieClip;
	tw = mx.managers.PopUpManager.createPopUp (this, mx.containers.Window, 
	false, {closeButton:true, titleStyleDeclaration:"TitleStyles"});
	// title in the component
	tw.title = wText;
	// size of the window
	tw.setSize (270, 334);
    // placing the window at a certain position in the movie.
	tw.move (xPos, yPos);
	// the url 
	tw.contentPath = wContent;
		

Now we prepare the progressbar to monitor the loading of pictures. We set the progressbar mode to "manual" and the progressbar is moved by the var frame.

	// we set the loaderbar mode to manual
	my_pb.mode = "manual";
	// here we initiate the loaderbar, when the window 
	//movieclip content has a url
	_root.onEnterFrame = function () {
	   if (tw.content._url != undefined) {
	       // we make the clips visible
	       _root.my_pb._visible = true;
	       _root.wait_mc._visible = true;
	       // we create a var to move the progressbar
	       var loadedBytes:Number = tw.content.getBytesLoaded ();
	       var totalBytes:Number = tw.content.getBytesTotal ();
	       var frame:Number = Math.ceil (loadedBytes/(totalBytes/100));
	       my_pb.setProgress (frame, 100);
	       // here we monitor the end of loading
	       if (totalBytes>53 && loadedBytes>=totalBytes) {
	           _root.my_pb._visible = false;
	           _root.wait_mc._visible = false;
	           delete _root.onEnterFrame;
	       }
	   }
	};
		

At the end of the function we create a listener object to be able to close the window. Also we enable the buttons we use to open the window.

	var b_tw_mc:MovieClip = b_tw_mc;
	// listener to delete the window.
	var handleCloseObject:Object = new Object ();
	handleCloseObject.click = function (evt:Object) {
	   // now we enable the buttons again
	   b_tw_mc.enabled = true;
	   evt.target.deletePopUp ();
	};
	tw.addEventListener ("click", handleCloseObject);
}
		

The last part of the script are the button functions. Once a button is pressed we disable the button to prevent to open a second instance of the same window. You are now able to create a slideshow with this and include fading or other fancy stuff.

		//
// button functions to open the windows and load it.
//
myButton1.onPress = function () {
	// movieclip, headline, content to load, x, y position
	popup (this, "Slide 1.....", "pic1.jpg", 10, 10);
	// we disable the button as long as the window is open
	this.enabled = false;
};
myButton2.onPress = function () {
	popup (this, "Slide 2....", "pic2.jpg", 285, 10);
	this.enabled = false;
};