How to apply that resize method?

Question

I noticed this full flash site and wonderring http://www.houseoforange.nl/site/#/Photographers/Philip%20Riches/editorial%20women/

How can I apply the resize method like the way they did?

Any examples might help me a lot.

I have one main.swf and page.swf which loads within main.swf. My page.swf contains thumbnail images, and it's already position in middle of stage.

When handleResizeObjectOnStage is triggered, it's start to center again on stage. But it's not the same center applied of page.swf

I want to be able to do resize like the example I have posted.

Here's what I did so far:

  // Constructor
public function Gallery()
{
 addEventListener(Event.ADDED_TO_STAGE, handleOnStage, false, 0, true);         
}


private function handleOnStage(event:Event):void
{   
 removeEventListener(Event.ADDED_TO_STAGE, handleOnStage);

 tabSWFLoader = Vector.<String>([INTRO_SWF, ...]);

 loader = new Loader();
 nextMC = new Sprite(); // uses to load next page
 currentMC = new Sprite(); 

 initObjectsOnStage(event);
 initIntro();

 stage.align = StageAlign.TOP_LEFT;
 stage.scaleMode = StageScaleMode.NO_SCALE; 

 stage.addEventListener(Event.RESIZE, handleResizeObjectsOnStage, false, 0, true);
}   

private function handleResizeObjectsOnStage(event:Event=null):void
{
 removeEventListener(Event.RESIZE, handleResizeObjectsOnStage);
 initObjectsOnStage(event);
}

private function initObjectsOnStage(event:Event):void
{
  initBackground();
  initMenu();

  var definedWidth:Number = stage.stageWidth;
  var definedHeight:Number = stage.stageHeight;

  if (event.type == Event.RESIZE) {
   var tempMC:Sprite = getCurrentMC();
   tempMC.x = (definedWidth - tempMC.width) * 0.5;

   addChild(tempMC);
  }
} 

private function initIntro():void
{
 loader.load(new URLRequest(tabSWFLoader[currentIndexSWF]));
 loader.contentLoaderInfo.addEventListener(Event.OPEN, handleDisplayIntroImage, false, 0, true);
 loader.contentLoaderInfo.addEventListener(Event.COMPLETE, handleCompletedIntroImage, false, 0, true);
} 

private function handleDisplayIntroImage(event:Event):void
{
 currentMC.alpha = 0;

 TweenLite.to(currentMC, DELAY, { alpha:1, ease:Linear.easeIn });
 addChild(currentMC);
}


private function handleCompletedIntroImage(event:Event):void
{
 // Add into currentMC
 currentMC.addChild(loader);
}

I also tried using scaleX/scaleY, got awkward result

private function initObjectsOnStage(event:Event):void

{ ... var definedWidth:Number = stage.stageWidth; var definedHeight:Number = stage.stageHeight;

if (event.type == Event.RESIZE) {
 var tempMC:Sprite = getCurrentMC();
 addChild(tempMC);

 var scaleX:Number = definedWidth/tempMC.width;
 var scaleY:Number = definedHeight/tempMC.height;

 (scaleX > scaleY) ? scaleX = scaleY : scaleY = scaleX;

 tempMC.scaleX = scaleX;
 tempMC.scaleY = scaleY;

}

}

Answer 1

Take a look at this article, it is for Flex, but you should get some info on how to resize a web application:

Improving Perceived Layout Performance in Flex

I used this in my application that resizes correctly found on: http://www.tdteam.com/ontime/

hope it helps Ladislav