Full Screen Flash (AS 2.0)

In my years of Flash development I have always struggled with its capabilites in publishing output - mainly its scale and dimension properties and how to achieve proportional dimensions in different sized browser windows. If my site was to be completely developed in Flash, how could I display it properly to all users. In a nutshell, I wanted mainly to find a way of creating a “layout” for my published swf - for example, centering my content within a browser window no matter what size (height, width or both). But this can be done with css you say - well, yes and no. If you do a web search you will find there are a few ways to create a style sheet that can center your published swf, or any content for that matter, horizontally and vertically. But, if your Flash file has a background that you want to span your entire window, like a gradient say, this would not be possible as you would be limited to your css file’s placement dictation and would most likely result in showing the HTML background as a border.

With that being said, I decided to look into creating a class that could define different objects within my swf and their layout and scale proportionate to browser window dimensions. Now, recently I have just begun to develop external Flash class files, mainly out of a desire for code re-usability. In your Flash window choose File->New->Actionscript File.

Copy and Paste the following code:

class LayoutManager {
	// Declare some variables to work with
	private var mc:MovieClip;
	private var leftMargin:Number;
	private var topMargin:Number;
	private var alignType:String;
	// Our Constructor and the arguments passed to it from our swf file
	function LayoutManager(target:MovieClip, aType:String, lmargin:Number, tmargin:Number) {
		// Set scale mode to no scale
		Stage.scaleMode = "noScale";
		// Align the stage to the top left
		Stage.align = "TL";
		// Optional - disabe right-click flash menu
		Stage.showMenu = false;
		// Add a listener to detect in this case when the stage/window resizes
		Stage.addListener(this);
		mc = target;
		leftMargin = lmargin;
		topMargin = tmargin;
		alignType = aType;
		onResize();
	}
 
	// Make our clip resize to browser size
	private function onResize():Void {
		var l = alignType.length;
		while (--l>-1) {
			var _alignType = alignType.charAt(l);
 
			switch (_alignType) {
					// Case 'c' (upper or lowercase) - center horizontally
				case 'C' :
				case 'c' :
					if (mc._width>Stage.width-leftMargin) {
						mc._x = leftMargin;
					} else {
						mc._x = Stage.width/2-mc._width/2;
					}
					break;
					// Case 'm' (upper or lowercase) - center vertically
				case 'M' :
				case 'm' :
					if (mc._height>Stage.height-topMargin) {
						mc._y = topMargin;
					} else {
 
						mc._y = Stage.height/2-mc._height/2;
					}
					break;
					// Case 'l' (upper or lowercase) - align left
				case 'L' :
				case 'l' :
					mc._x = 0+leftMargin;
					break;
					// Case 't' (upper or lowercase) - align top
				case 'T' :
				case 't' :
					mc._y = 0+topMargin;
					break;
					// Case 'b' (upper or lowercase) - align bottom
				case 'B' :
				case 'b' :
					mc._y = Stage.height-mc._height-leftMargin;
					break;
					// Case 'r' (upper or lowercase) - align right
				case 'R' :
				case 'r' :
					mc._x = Stage.width-mc._width-topMargin;
					break;
					// Case 'f' (upper or lowercase) - fullscreen scale accordingly
				case 'F' :
				case 'f' :
					mc._width = Stage.width-leftMargin;
					mc._height = Stage.height-topMargin;
					break;
 
			}
		}
	}
 
}

Create a folder - whatever you want to name it - for this example I’ve created a folder on my desktop called “flash-layout”. Save the file into your newly created folder and name it “LayoutManager.as”.

Next, create a new Flash movie by choosing File->New->Flash File (ActionScript 2.0). Select the Rectangle Tool and draw a rectangle on the stage - let’s give it a width of 200 pixels and a height of 200 pixels. Now select that rectangle and choose Modify->Convert To Symbol. Give it an instance name of “square_mc”, Type:Movie clip, and set the Registration point to be the top left. Click OK.

Image 1

With the “square_mc” clip still selected, in the properties inspector, give the movie clip an instance name of “square_mc”. Also, center align your “square_mc” by choosing Modify->Align->Horizontal Center and then do the same for Vertical Center. Next, create a new layer and call it “actions”. You can lock up the default “Layer 1″ layer that our movie clip resides in. With the “actions” layer selected, select “Actions-Frame” from the property inspector. This will open up the ActionScript panel.

Copy and Paste the following code:

// Reference our external movie clip classes for 
// controlling fullscreen and fixed positioning
 
var centerMiddle:LayoutManager = new LayoutManager(square_mc, "cm",0, 0);

Here we are creating a variable, called centerMiddle, calling our LayoutManager class, and declaring a “new” instance of LayoutManager. We are also passing along the necessary arguments for the new LayoutManager and assigning them to our “target” movie clip, “square_mc”, and giving it the parameters “cm” - center and middle (horizontal/vertical). The last two parameters are left and top margins, which here we have set to zero.

Save your movie in the flash-layout folder that we previously created and name it “flash-layout.fla”. It is important that you save to the same folder where your ActionScript class resides. There are other methods regarding classes and class paths, but for this tutorial we’ll stick to this method. After saving, test your movie - Ctrl-Enter for Windows users or Cmd-Enter for Mac users. You should be able to resize your window to any size and your movie clip will always remain centered vertically and horizontally.

Lastly, my Flash movies’ document size for this particular tutorial is 550×400 pixels. Create a new layer and drag it below the other layers in your layer window - making it the bottom layer in the layer list. With the Rectangle Tool selected, create a rectangle in this layer an give it a width of 550 and height of 400. Give it a gradient fill of your liking - whatever you choose. With this rectangle selected convert to symbol->movie clip->top left registration like we did earlier but this time name it “bg_mc”. Center align it through the same means of what we did earlier and give it an instance name “bg_mc”. Lock this layer and enter our actions panel within our actions layer where our code we pasted earlier resides.

Copy and Paste this after our exisitng code:

var fullScreen:LayoutManager = new LayoutManager(bg_mc, "f", 0, 0);

Here we used the same means of using our LayoutManager class, only difference is this time our “target” movie clip is “bg_mc”, we are passing a parameter “f” - full screen (100% window size) - and the margins remain at 0.

Save and test your movie again. This time our centered “square_mc” clip still remains centered and at its fixed size, however our gradient clip “bg_mc” is full screen.

Download Source

About this entry

You’re currently reading “Full Screen Flash (AS 2.0),” an entry on Hot Atomics

Published:
04.04.08 / 2pm
Category:
Flash/Actionscript