content resizing according to View3D resizing

Software: Away3D 4.x

klinek3, Newbie
Posted: 18 December 2013 05:53 PM   Total Posts: 8

Hello.

I uses JavaScript to resize embedded swf according to browser window dimensions.
This method doesn’t trigger AS3 RESIZE EVENT, since Stage or DisplayObjects dimensions remains unchanged during resizing (the swf is scalling - not elements of flash Stage).

I’ve noticed that in Away3D 4, the view3D is resizing as any other DisplayObject on Stage, but the content of the View3D doesn’t resize at all.

For example:

var view:View3D;
view = new View3D();

view.x = 0;
view.y = 0;
view.width = MyDisplayObject.width;
view.height = MyDisplayObject.height;

MyDisplayObject.addChild(view);


During scalling browser window down, the content of View3D will be cropped, not resized - regardless of View3D resizing.

Do you know any method for resizing Away3d content?

Regards


   

Avatar
Mu Duck, Newbie
Posted: 18 December 2013 11:10 PM   Total Posts: 20   [ # 1 ]

If you use Perspective Lens (default) the vertical resize scales the content and horizontal resize - extends your view. Try another type of lens called something like PerspectiveLensOffCenter (don’t remember exactly). Probably it gives the effect that you want.

In project I am creating - I actually override perspective lens class to change one method in it, which control projection matrix for even more flexibility. Probably you need that as well.

 

   

klinek3, Newbie
Posted: 21 December 2013 05:39 PM   Total Posts: 8   [ # 2 ]

Changing lenses to OrthographicOffCenterLens seems not to have any effect in my situation.

Please take a look at the attached JPGs.
- Green rectangles represent Display Objects on Stage (not Away3D)
- Red circle represents Away3D mesh
- Blue lines represent boundaries of the View3D

First image shows window browser before scaling down and the other image shows browser window after scaling down. As you can see everything is scaled down except Away3D mesh.


I used OrthographicOffCenterLens as follow:

var minX:Number = -500;
var maxX:Number = 500;
var minY:Number = -500;
var maxY:Number = 500;

var Mylens:OrthographicOffCenterLens = new OrthographicOffCenterLens(minX, maxX, minY, maxY);
cam.lens = Mylens;


Also tried inside ENTER.FRAME EVENT:

Mylenss =  new OrthographicOffCenterLens(minX, maxX, minY, maxY);
cam.lens = Mylens;


It could work if minX, minY,.... would change during resizing, but my problem is that none of flash elements change their dimensions.

 

   

Avatar
Mu Duck, Newbie
Posted: 21 December 2013 06:31 PM   Total Posts: 20   [ # 3 ]

Oh I get it. You need to set also listener for resize event:

stage.scaleMode = StageScaleMode.NO_SCALE;
stage.align = StageAlign.TOP_LEFT;
stage.addEventListener(Event.RESIZE, _onResize);

private function _onResize(event:Event = null):void
{
yourview3D.width = stage.stageWidth;
yourview3D.height = stage.stageHeight;
}

 

   

klinek3, Newbie
Posted: 07 January 2014 05:18 PM   Total Posts: 8   [ # 4 ]

Unfortunately as I mentioned in the first post, AS3 RESIZE EVENT is not triggered in my situation. Besides I cannot use NO SCALE since it conflicts with my JavaScript part of code.

But I’ve found another solution. I uses JavaScript in order to detect real browser width and send that data into flash (via AS3 EXTERNAL INTERFACE) every time browser is resized:


JavaScript part:


var browser_width;

window.onresize = send_browser_width; // detect browser resizing

 


function send_browser_width(){

browser_width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; // check browser width

document.getElementById(“SWF_object”).browser_resized_call(browser_width.toString());  // send browser width into flash

// the above line of code may vary according to browser version and swf embedding method - it must be checked which browser is used before sending data into flash. So it may be also:


document.embeds[“SWF_object”].browser_resized_call(browser_width.toString()); 
// or
document.embeds.SWF_object.browser_resized_call(browser_width.toString()); 
// or
window[“SWF_object”].browser_resized_call(browser_width.toString()); 
// or
window.SWF_object.browser_resized_call(browser_width.toString()); 
// or
window.document[“SWF_object”].browser_resized_call(browser_width.toString()); 
// or
window.document.SWF_object.browser_resized_call(browser_width.toString()); 
// or
document.SWF_object.browser_resized_call(browser_width.toString()); 

}

 


NOTE:
(swf embedding parameter: allowScriptAcces must be set to ‘always’)

 

 

 

AS3 part:


var view:View3D = new View3D();

var view_proportions:Number = 1200/600; // custom proportions (width/height) of the view3D - can be 6/2,  600/200 and so on…
     

 

ExternalInterface.addCallback(“browser_resized_call”, browser_resized);

// this function is called by JavaScript every time browser is resized
function browser_resized(browser_width:String):void {


view.width = Number(browser_width);
view.height = Number(browser_width) / view_proportions;
}

 

NOTE:
Additionally, view3D resizing must be triggered (for the first time) after finishing to prepare scene3D (just before adding view3D to DisplayList):

ExternalInterface.call(“send_browser_width”); // call JavaScript function (function that normally is triggered by browser resizing)
 

 

 


Since EXTERNAL INTERFACE works fine in most new browsers, I think I will stick with this solution.

 

As you can see on the attached JPGs, this time everything works fine.

Thanks for your posts and advice “Mu Duck”.
Regards

 

 

 

   
   

X

Away3D Forum

Member Login

Username

Password

Remember_me



X