browser viewport size in device pixels
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 开发者_C百科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.
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.
加载中,请稍侯......
精彩评论