I'm trying to make full flash site dynamically resize in any browser size.
If the browser gets smaller than the site MC should constrain to fit in the browser. (EX: 1440x900) What I have right now works like 98% of the time, but when I switch to a bigger screen size, it screws up and makes the site tiny from left to right (menu, logo, etc.) (Ex:1680x1050)
Does anyone know how to fix that issue??
positionScenesOnStage();
stage.align = StageAlign.TOP_LEFT;
stage.scaleMode = StageScaleMode.NO_SCALE;
stage.addEventListener(Event.RESIZE, handleObjectsOnStage);
private function handleObjectsOnStage(event:Event):void
{
positionScenesOnStage();
}
private function positionScenesOnStage():void
{
backgroundMC = new bgMC();
backgroundMC.x = 0;
backgroundMC.y = 0;
backgroundMC.width = stage.stageWidth;
backgroundMC.height = stage.stageHeight;
addChild(backgroundMC);
logo_mc = new LogoMC();
logo_mc.x = stage.stageWidth - 1420;
logo_mc.y = stage.stageHeight - 700;
addChild(logo_mc);
menuContainer = new MenuContainerMC();
menuContainer.x = stage.stageWidth - 400;
menuContainer.y = stage.stageHeight - 680;
addChild(menuContainer);
}
for the browser flash invocation code you need to add the params:
<param name="scale" value="noscale" />
<param name="salign" value="lt" />
plus the corresponding settings in the embed tag and if you use javascript to invoke the flash add to that as well.
Related
I am trying to create a game with fullscreen.
When I add an object to the stage in full screen mode, I would like it to stay at the same coordinates (for example 1000 pixels) relative to the monitor when I exit fullscreen mode.
How can I make the object move to the same location when leaving fullscreen mode?
To get your started:
Something along these lines is what you'll need to do:
stage.align = StageAlign.TOP_LEFT; //you'll need to running a top-left no-scale swf for this to work
stage.scaleMode = StageScaleMode.NO_SCALE;
var itemPoint:Point = new Point(150,150); //the point on the monitor the object should reside
//call this anytime the item needs to be redrawn (eg when the window changes size or position)
function updatePos(e:Event = null){
//We need to also account for the chrome of the window
var windowMargin:Number = (stage.nativeWindow.bounds.width - stage.stageWidth) * .5; //this is the margin or padding that between the window and the content of the window
var windowBarHeight:Number = stage.nativeWindow.bounds.height - stage.stageHeight - windowMargin; //we have to assume equal margin on the left/right/bottom of the window
item.x = itemPoint.x - stage.nativeWindow.x - windowMargin;
item.y = itemPoint.y - stage.nativeWindow.y - windowBarHeight;
}
stage.nativeWindow.addEventListener(NativeWindowBoundsEvent.MOVE, updatePos); //we need to listen for changes in the window position
stage.nativeWindow.addEventListener(NativeWindowBoundsEvent.RESIZE, updatePos); //and changes in the window size
//a click listener to test with
stage.addEventListener(MouseEvent.CLICK, function(e:Event):void {
if(stage.displayState == StageDisplayState.FULL_SCREEN_INTERACTIVE){
stage.displayState = StageDisplayState.NORMAL;
}else{
stage.displayState = StageDisplayState.FULL_SCREEN_INTERACTIVE;
}
});
updatePos();
I am trying to add a child at the bottom of the screen.
I am using stage.stageHeight, but it doesn't seem to be able to get the height of the device properly.
It is leaving a very wide gap between the child (s6) and the bottom of the screen.
Code:
addEventListener(Event.ADDED_TO_STAGE, onadded);
function onadded (event:Event):void{
addChild(s6);
s6.y = stage.stageHeight - s6.height;
s6.width = width - 20;
s6.x = stage.x+10;
}
Edit:
addEventListener(Event.ADDED_TO_STAGE, onadded);
function onadded (event:Event):void{
addChild(s7);
s7.width = stage.stageWidth;
stage.align = StageAlign.TOP_LEFT;
addChild(s6);
trace(stage.fullScreenWidth);
trace(stage.fullScreenHeight);
s6.y = stage.fullScreenHeight - s6.height;
s6.width = width - 20;
s6.x = stage.x+10;
s6.account.addEventListener(MouseEvent.CLICK, fl_ClickToGoTomyaccount);
s6.automatch.addEventListener(MouseEvent.CLICK, fl_ClickToGoToAAA);
s6.search.addEventListener(MouseEvent.CLICK, fl_ClickToGoTosearchpage);
s7.myaccount.addEventListener(MouseEvent.CLICK, fl_ClickToGoTomyaccount);
s7.autmatch.addEventListener(MouseEvent.CLICK, fl_ClickToGoToAAA);
s7.sssearch.addEventListener(MouseEvent.CLICK, fl_ClickToGoTosearchpage);
}
you can use the screen resolution property and use them in your code.
I have done one example like this and it varies on different screen resolutions.
var screenWidth:int = Capabilities.screenResolutionX;
var screenHeight:int = Capabilities.screenResolutionY;
this.width= screenWidth - (screenWidth / 2);
this.height=screenHeight - 200;
Hope it will work for you
I think you should use fullScreenHeight instead of stageHeight: http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/display/Stage.html#fullScreenHeight
This is very true especially when working with mobile devices. stageHeight and stageWidth are not very reliable then.
You may also want to wait for RESIZE event which will occur shot after your app initialized, and then you can again use stageHeight instead.
I am trying to find AS3 code for a MovieClip on my stage.
My stage resizes proportionally on different screens (different size monitors), but the MC gets too big for smaller screen laptops and some parts of it get cut off. Would appreciate for any help
You could restrict any scaling, and handle the sizing yourself:
stage.scaleMode = StageScaleMode.NO_SCALE;
stage.align = StageAlign.TOP_LEFT;
Have a look at the docs for the scale mode and align properties available.
Put this before anything else. This code find's the scale size from your original layout to the re-sized. (NOTE: It's best if you use this when Event.RESIZE is happening)
stage.scaleMode = StageScaleMode.NO_SCALE;
stage.align = StageAlign.TOP_LEFT;
var guiSize:Rectangle = new Rectangle(0, 0, 1024, 600); //original stage size, substitute this with your orginal size
var deviceSize:Rectangle = new Rectangle(0, 0,
Math.max(stage.fullScreenWidth, stage.fullScreenHeight),
Math.min(stage.fullScreenWidth, stage.fullScreenHeight));
var appScale:Number = 1;
if ((deviceSize.width/deviceSize.height) > (guiSize.width/guiSize.height)) {
appScale = deviceSize.height / guiSize.height;
}
else {
appScale = deviceSize.width / guiSize.width;
}
Than, use appScale to scale every MovieClip/Sprite you have, e.g. _mc.scaleX = _mc.scaleY = appScale.
Using this way, every time the stage get re-sized, the right and down border are moved. That means if you want your footer to be always 50px from bottom, you should use something like :
_footer.y = stage.stageHeight - (50 * appCale);
After using the answer I found here
as3 video full screen mode
which was :
stage.displayState = StageDisplayState.FULL_SCREEN;
videoPlayer.x = 0;
videoPlayer.y = 0;
videoPlayer.width = stage.fullScreenWidth;
videoPlayer.height = stage.fullScreenHeight;
My video is full screen size, but anchored in the same point as it was on the stage, putting my video off to the side.
Is there an algorhythm I can use to calculate how many negative pixels I should move my video so it's displaying edge to edge?
Add these lines and your code might work. By default, the stage scales up to fill the screen (VIEW_ALL) and is centered.
stage.align = StageAlign.TOP_LEFT;
stage.scaleMode = StageScaleMode.NO_SCALE;
Calculate the width of your video and the stage and use the half of it:
when anchor of videoPlayer is topleft:
videoPlayer.x = (stage.fullScreenWidth - videoPlayer.width) / 2;
videoPlayer.y = (stage.fullScreenHeight- videoPlayer.height ) / 2;
when anchor of videoPlayer is centered:
videoPlayer.x = stage.fullScreenWidth / 2;
videoPlayer.y = stage.fullScreenHeight / 2;
Edit: after reading your question again, you can try to relocate your video after resizing:
import flash.display.StageAlign;
stage.align = StageAlign.TOP_LEFT;
stage.addEventListener(Event.RESIZE, myResizeHandler);
private function myResizeHandler(event:Event) {
videoPlayer.x = 0;
videoPlayer.y = 0;
}
I want to set width and height of the stage during resize of that swf..
I do it in resize event handling..but doesn't work..any other way to achieve this?
stage.addEventListener (Event.RESIZE, resizeListener);
function resizeListener (e:Event):void {
stage.stageWidth=500;
stage.stageHeight=300;
}
Thanks
by the sounds of it you just need
stage.align = "";
stage.scaleMode = StageScaleMode.NO_SCALE;
this will keep the content the same size no matter how much you stretch the window
Updated:
you need is to compare the ratios of the width and height scales of the content and the target. To make the loaded image fit within the area, scaling so that everything is inside you can do something like this:
var scale:Number = Math.min( _holder.width / _loader.content.width,
_holder.height / _loader.content.height );
_loader.content.scaleX = _loader.content.scaleY = scale;
This will make sure that you can see everything. If you change Math.min to Math.max, you will get a different result if the dimensions don't match.
public function loaderComplete(event:Event):void
{
var content:MovieClip = MovieClip(event.currentTarget.content );
//the dimensions of the external SWF
var _width:int = content.width;
var _height:int = content.height;
// you have several options here , assuming you have a container Sprite
// you can directly set to the dimensions of your container, if any
if( container.width < _width )
_width = container.width // and do the same for height
// or you could scale your content to fit , here's a simple version
// but you can check the height too or keep checking both value
// until it fits
if( container.width < _width )
{
var scale:Number = container.width / _width;
content.scaleX = content.scaleY = scale;
}
}
This answer gives better understanding of previous code given by swati singh.See this link
How to resize an external SWF to fit into a container?
Thanks to all