Home/ Questions/Q 4021930
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-20T10:24:43+00:00

Goal : I want flash to have accurate information about the width and height

  • 0

Goal: I want flash to have accurate information about the width and height of the browser viewport in device pixels when intializing, resizing, or on browser zoom events.

Specifics: I need to embed flash into an html page that runs in chrome, safari, firefox, ie. The swf must fill the entire browser viewport. I don’t want the flash to zoom. Inside of flash I can set StageScaleMode.NOSCALE so that flash renders to Device Pixels. I also set the state’s alignment to StageAlign.TOP_LEFT. Now all I need is the number of device pixels in the browser!

Problem: when there is a browser zoom or I open the site while the browser is zoomed, I cannot easily get information on the browser’s dimensions in device pixels.

Solution: acrobat.com’s online document editor (formerly known as buzzword) handles this problem just fine (free to play with with an account). What are they doing? In webkit browsers, they are able to keep the document.width to report device pixels every time. I am not sure what they are doing in firefox and ie.

What doesn’t work:

  • Swffit does not support this.
  • Just loading the swf into the browser is not a solution, as the swf needs to be embedded.
  • This solution scales a swf to accomodate different browser zooms but does not get information on the browser window dimensions.

Solutions:

See selected answer below. Feedback welcome.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    First a solution for webkit browsers only since it relies on document.width and document.height.

    Here is the html:

    <html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/prototype/1.7.0.0/prototype.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
<script>

function ic( )
{   
var params = {
allowscriptaccess: "always",
seamlesstabbing: "false",
menu: "false"
};
var flashvars = {
bzw: document.width,
bzh: document.height
};
swfobject.embedSWF( "bZoom.swf", "b",
"100%", "100%",
"10", null, flashvars, params, {} );
Event.observe( window, 'resize', rs.bindAsEventListener(this) );
}

function rs( )
{
getFlash("b").JS2AS_resize( document.width, document.height );
}

function getFlash( id )
{
if (navigator.appName.indexOf("Microsoft") != -1)
{   return window[id];
}
else
{   return document[id];
}
}

Event.observe( window, 'load', ic.bindAsEventListener(this) );
</script>
</head>
<body style="margin:0;padding:0;">
<div id="a" style="position:absolute;top:0;left:0;width:100%;height:100%;"><div id="b"></div></div>
</body>
</html>

    Here is the as3:

    package
{
import flash.display.LoaderInfo;
import flash.display.Sprite;
import flash.display.StageAlign;
import flash.display.StageScaleMode;
import flash.external.ExternalInterface;

public class bZoom extends Sprite
{

private var _w:int;
private var _h:int;


public function bZoom( ):void
{
    var lobj:Object = LoaderInfo( this.root.loaderInfo ).parameters;
    _w = lobj["bzw"];
    _h = lobj["bzh"];
    ExternalInterface.addCallback( "JS2AS_resize", JS2AS_resize );


    stage.align = StageAlign.TOP_LEFT;
    stage.scaleMode = StageScaleMode.NO_SCALE;
    painty( );
}

public function JS2AS_resize( pw:int, ph:int ):void
{   _w = pw;
    _h = ph;
    painty( );
}

public function painty( ):void
{
    graphics.clear();
    graphics.beginFill( 0xFFFFFF );
    graphics.drawRect( 0, 0, _w, _h );
    graphics.beginFill( 0xFF0000 );
    graphics.drawRect( 0, 0, _w-5, _h-5 );
}

}
}

    And here is a solution for IE, Mozilla, and Opera:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" style="overflow-y:hidden;overflow-x:hidden;">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/prototype/1.7.0.0/prototype.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
<script>

function ic( )
{   
var params = {
allowscriptaccess: "always",
seamlesstabbing: "false",
menu: "false"
};
var dv = document.viewport;
swfobject.embedSWF( "bZoom.swf", "b",
dv.getWidth()+"px", dv.getHeight()+"px",
"10", null, flashvars, params, {} );
Event.observe( window, 'resize', rs.bindAsEventListener(this) );
}

function rs( )
{
var dv = document.viewport;
var dvw = dv.getWidth();
var dvh = dv.getHeight();
$("b").width = dvw+"px";
$("b").height = dvh+"px";
//for reasons unknown (...timing?) we ask for these again
var dvw = dv.getWidth();
var dvh = dv.getHeight();
getFlash("b").JS2AS_resize( );
}

function getFlash( id )
{
if (navigator.appName.indexOf("Microsoft") != -1)
{   return window[id];
}
else
{   return document[id];
}
}

Event.observe( window, 'load', ic.bindAsEventListener(this) );
</script>
</head>
<body style="margin:0;padding:0;background-color:#00FF00;">
<div id="a" style="position:absolute;top:0;left:0;"><div id="b"></div></div>
</body>
</html>

    and the as3:

    package
{
import flash.display.Sprite;
import flash.display.StageAlign;
import flash.display.StageScaleMode;
import flash.external.ExternalInterface;

public class bZoom extends Sprite
{


public function bZoom( ):void
{

    ExternalInterface.addCallback( "JS2AS_resize", JS2AS_resize );

    stage.align = StageAlign.TOP_LEFT;
    stage.scaleMode = StageScaleMode.NO_SCALE;
    painty( );
}


public function JS2AS_resize( ):void
{   painty( );
}

public function painty( ):void
{
    graphics.clear();
    graphics.beginFill( 0xFFFFFF );
    graphics.drawRect( 0, 0, stage.stageWidth, stage.stageHeight );
    graphics.beginFill( 0xFF0000 );
    graphics.drawRect( 0, 0, stage.stageWidth-5, stage.stageHeight-5 );
}

}
}

    Finally, I believe there is a more optimal solution for Opera using screen.width and screen.height, but I’ve not tested it.

    • 0