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:
Code:
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
Code:
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 !
LinkBack URL
About LinkBacks
Reply With Quote, 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:
Posting Permissions
Bookmarks