How to display an SWF at 100%

[Flep]

Do you have present those Flash applications that are visualized to 100% on the user"s browser"

To be able to work with those characteristics, we must modify the publish settings of the SWF, more precisely the HTML file created by Flash, so that our SWF expands or tightens in base of the user"s screen resolution...
Done this, we owe to work with Actionscript 3.0 to maintain the objects (MovieClip, text fields etc"etc") to the right position whatever is the size taken by our SWF.

Also, we can impost a listener to an event in case the screen resolution is changed and so to reposition the object as needed.

Let us see how to do it"

I create a FLA and save it as "main.fla".
I keep the default size: 550x440.
A level named "sfondo" into which I insert a MovieClip with an instance name "bg_mc" of rectangular shape, of the same size as the stage and with a registration point at the top left.

Next, I go under the publish settings and in the HTML tab, I impost the following settings:



Flash has created an HTML file named "main.html".
I open it (I personally use Dreamweaver but any text editor would do) and I impost all the margins to zero from the property panel for the page, as shown in the following pic:



Now, I create a Document Class, an AS file saved as "Main.as", implemented the following way:

package
{
	import flash.display.MovieClip;
	
	public class Main extends MovieClip
	{
		public function Main()
		{
			init();
		}
		
		private function init():void
		{
			stage.frameRate=31;
			
			bg_mc.x=0;
			bg_mc.y=0;
			bg_mc.width=stage.stageWidth;
			bg_mc.height=stage.stageHeight;
		}
	}
}

into the method init:
I impost the frame rate
stage.frameRate=31;
I tell "bg_mc" to position itself to the coordinates 0,0 and to take a width and height equal to the stage width and height. Doing so, whatever is the size of the browser windows, the SWF will be displayed at 100%
bg_mc.x=0;
bg_mc.y=0;
bg_mc.width=stage.stageWidth;
bg_mc.height=stage.stageHeight;

We obtain the following result:
TEST 1

Clearly if we had systematized some objects on stage, we will notice that if we test the SWF without the HTML files (in its original dimensions) the objects would be to the correct place, while if they had been in the example of the preceding link they would be moved.

I make an example, I add a rectangular MovieClip with a central registration point and with an instance name "clip_mc" to the centre of the stage and I get this result:

Let us look at it now at a resolution of 100%:
TEST 2

It is not centred anymore! "clip_mc" is not anymore at the centre of the stage.

At this point, we need to act, using Actionscript and in the method init(), we add:
clip_mc.x=stage.stageWidth/2;
clip_mc.y=stage.stageHeight/2;
We tell Flash that "clip_mc.x" must be placed exactly at half the stage width and that its y is placed at half the stage height.

Now, it is centred:
TEST 3

Another example. Let us use a text field (rights_txt) which must be placed at the bottom of the stage height, the following way:

If we publish it at 100% without Actionscript, we will have the following result:
TEST 4

Once again, it is not placed where it should be as the SWF is bigger.

Once again, we use Actionscript:
I import the textField Class
import flash.text.TextField;
and I impost the text field coordinates, its x needs to be to the maximum stage width less the width of the text field itself and its y to the maximum stage height less the height of the text field itself
rights_txt.x=stage.stageWidth-rights_txt.textWidth;
rights_txt.y=stage.stageHeight-rights_txt.textHeight;

doing so, even at a resolution of 100%, the text field will be positioned correctly:
TEST 5

Important!
What would happen if the user ridimensions the browser windows with our SWF displayed at 100%"
Simple. The objects would not position themselves following the flow of the page.

Do try yourself to ridimension the window:
TEST6

In this case, we add a listener to the event RESIZE which will tell us when our SWF is being ridimensioned.
I explain next how to use it:
I import the event
import flash.events.Event;
I add a call to a method immediately after the call of init()

checkResize();
I create the method checkResize

private function checkResize():void
{
I add a listener to the stage to the event RESIZE of the Event Class which will call the function resizeStage 
stage.addEventListener(Event.RESIZE, resizeStage);
}
The function resizeStage will call the method init() which will position the objects found on stage 
private function resizeStage(event:Event):void 
{
init();
}

Try now to ridimension the window:
TEST 7

Stay tuned !

[appi]

I get it , thanks! However, I cannot work on the Y position of my movieClip it stays at the top of the browser while I gave the following parameters:

naviMC.y=stage.height/2;

Shouldn't it appear on the middle?

[Onsitus]

Hi,

the right code should be:

naviMC.y=stage.stageHeight/2;

I don't know if it is a typing error on your post or if you really wrote it the way you did.

[appi]

Thanks! It works.

I guess it was a bad typing!!!

I have a few questions now:

Following this example. Do I have to create any object of my site in the init() ?

But what I would like to do it is able to split my page in class with the different content of the site in order to don't mess with the code. Have you got any example here where I could have a look at it?

I would appreciate that.

Thanks.

[theuprock]

I'm wondering if this example applies to something such as this. I was trying to figure out how to get something to align to the side of the browser, much like the menu does in this example -- Merijn Straathof - Personal portfolio -- but couldn't figure it out exactly.

[appi]

I have a new problem here!

Following this code example, I have an array with buttons which are added to a movieclip which is located in the stage in relation with its width and height.

Because of the loop when I resize the browser the function resizeStage(event:Event):void calls the method where the elements are on the stage. As a consequence, the array loops and the buttons appear repeated as much times I resize the browser.

Could anyone knows how can I stop the array to do that?

At the moment, the only solution I found is comment the method called at the resizeStage event. Obviously, i have to refresh the browser anytime the browser is resized.

Can anyone give me a hand on this?

Thanks in advance.

[theuprock]

I see what you're saying, but I can't help. Logically, I can see why the swf would want to do it, but I'm not sure of a solution.

[madeonearth]

Hello,

I have tryed this tutorial, but no matter what I do, it just wont work for me.
At first I thought I misspelled some of the code, so I made a copy paste, still my MC want stretch at a 100%. I followed step by step and I'm getting very frustrated since most of you had no problem with it as I go to the replys.

This is what I get
main
What is wrong?
These are my work files, the MC on the stage and the Main.as Class. Just the same as the tutorial
http://www.madeonearth.be/stageResizeTest.zip

Is someone willing to please have a look at it?
I really would like this to work.

Many thanks in advance!

[Onsitus]

Hi,

nothing wrong with your fla except it is missing the name of the document class (Main) in the property panel.

[madeonearth]

Thank you so much, I really appreciate your help.
With the Class name Main in my property panel it does work.
Something I will never ever forget :)