Difficulties with Papervision3d when embed width and height in html are 100%

Well it’s not really difficulties; more something you have to keep in mind when, in your HTML, you set the width and the height of the flash portion to 100%. In my case I did this so that my swf would take all the browser space.

So I was doing some minor papervision3d programming and everything was going fine until I embedded my swf in HTML. Since the embedded flash size (width and height) wasn’t the same as the exported flash size I had some glitches on the papervision3d side. The Viewport3D was the part that moved when I resized the browser. In order to fix this I had to assign it a new x and y at creation that was dependent on the stage width and height. This is how you do it:

1
2
3
4
viewport = new Viewport3D(stage.stageWidth, stage.stageHeight, true, true);
viewport.x = -((stage.stageWidth - 800) / 2);
viewport.y = -((stage.stageHeight - 600) / 2);
addChild(viewport);

800 being the original width of my stage and 600 the original height. So by modifying the x and y of the Viewport3D at creation when I loaded the site or reloaded it it was always at the right place. At least that is what I thought until I tested it in Internet Explorer. I guess Internet Explorer doesn’t handle resizing of the browser in the same way as Firefox or Opera, because if you loaded the site, then resized the browser and then refresh the page it would not work properly in IE, the Viewport3D would be offseted. Actually in any browser, resizing the browser would offset the viewport making alignment not fit anymore. This is more obvious when you have some parts of your site in papervision3d and some parts under it not in 3D. To fix this I had to add a listener for the RESIZE event on the stage:

1
2
3
4
5
6
7
stage.addEventListener(Event.RESIZE, stageResizer);
 
private function stageResizer(e:Event):void{
viewport.x = -((stage.stageWidth - 800) / 2);
viewport.y = -((stage.stageHeight - 600) / 2);
 
}

Every time the browser would be resized this code would align the viewport in the middle of the stage.

This was a minor problem I encountered while using papervision3d; it wasn’t really hard to solve, but I guess it will be easier for you to find the answer than for me (since it’s all here).

, ,

  1. #1 by acey - July 9th, 2008 at 18:37

    thank you very much for sharing this.
    i just had the same problem.

  2. #2 by nic c - October 18th, 2008 at 17:31

    where do i put this information in…?

  3. #3 by bob - October 26th, 2008 at 04:55

    thx for sharing, i found controlling the viewport useful.

    cheers!

  4. #4 by Maurice - June 7th, 2009 at 06:08

    Hi, this information was really really useful to me and solved my problem. Tnx! :D

  5. #5 by Internet Marketing - March 29th, 2011 at 17:48

    Thanks – the width and height has always been a big issue for me. This really clears things up.

(will not be published)
Subscribe to comments feed
  1. No trackbacks yet.