Tween Max LoaderMax Resize/Event Handler As3

[eldreams]

I found the following code, however I cannot get my stage resize/event handler to work.

Basically I want the pictures to keep proportion/transition even when the browser is resized.

 

I tried removing the props from the image loader and applying directly to the resize/event handler, but

it just skew's streches the image out of proportion -and once it transitions to the new picture the proportions do not change.

Any ideas?

 

import com.greensock.*;
import com.greensock.easing.*;
import com.greensock.events.*;
import com.greensock.loading.*;
import com.greensock.loading.display.*;
import flash.display.DisplayObject;
import flash.text.TextField;
import flash.utils.Timer;

LoaderMax.activate([imageLoader]);

var addresses:Array = 
["img00.jpg",
"img01.jpg",
"img02.jpg",
"img03.jpg",
"img04.jpg"];

var images:Array = new Array();

var pic:Sprite = new Sprite();
addChild(pic);

var progressText:TextField = new TextField();
progressText.text = "0";
progressText.autoSize = TextFieldAutoSize.CENTER;
progressText.y = stage.stageHeight / 2 - progressText.height/2;
addChild(progressText);

var picTimer:Timer;
var timerRunning:Boolean;
var counter:int = 0;
var timerDelay:Number = 2000;
var tweenDuration:Number = 1;

var loader:LoaderMax = LoaderMax.parse(addresses, 
{
    name:"galleryLoader", 
    maxConnections:1,
    onComplete:allComplete,
    onChildProgress:imageProgress, 
    onChildComplete:imageLoaded},
{
    alpha:0, 
    centerRegistration:true,
    x:stage.stageWidth / 2,
    y:stage.stageHeight / 2,
    width:stage.stageWidth,
    height:stage.stageHeight,
    scaleMode:"proportionalOutside"}) as LoaderMax;

loader.prependURLs("images/", false);
loader.load();

function imageProgress(e:LoaderEvent):void
{
   var percent:int = e.target.progress * 100;
   progressText.x = stage.stageWidth / 2 - progressText.width/2;
   progressText.text = e.target.url + " " + percent + "%";
}

function imageLoaded(e:LoaderEvent):void
{
   var img:ContentDisplay = e.target.content as ContentDisplay;
   progressText.text = "0";
   images.push(img);
}

function allComplete(e:LoaderEvent):void
{
   removeChild(progressText);

   var p:ContentDisplay = images[counter] as ContentDisplay;
   pic.addChild(p);
   TweenMax.to(p, 1, {alpha:1});

   picTimer = new Timer(timerDelay);
   picTimer.addEventListener(TimerEvent.TIMER, newPic);
   picTimer.start();
   timerRunning = true;
   counter++;

   stage.addEventListener(MouseEvent.CLICK, startStop);
}

// load new bitmap from the array; increment counter
function newPic(e:TimerEvent):void
{
   var _p:ContentDisplay = pic.getChildAt(0) as ContentDisplay;
   TweenMax.to(_p, tweenDuration, {alpha:0, onComplete:pic.removeChild, onCompleteParams:[_p]});

   var p:ContentDisplay = images[counter] as ContentDisplay;
   trace(p);
   pic.addChild(p);
   TweenMax.to(p, tweenDuration, {alpha:1});

   if (counter < images.length - 1)
   {
       counter++;
   }
   else
   {
       counter = 0;
   }
}

function startStop(e:MouseEvent):void
{
   if (timerRunning)
   {
       picTimer.stop();
   }
   else
   {
       picTimer.start();
   }

   // toggle timerRunning;
   timerRunning = ! timerRunning;
   trace("timerRunning: " + timerRunning);
} 

[Carl]

it sounds like you are are calculating the proportional width/height wrong based on the new size of the stage. hard to tell as I didn't see any resize handlers in your code. What you are trying to do can be a bit tricky, fortunately GreenSock provides a set of tools to handle such things.

 

1:AutoFit Area (available with free public version of GreenSock)

 

AutoFitArea allows you to define a rectangular area and then attach() DisplayObjects so that they automatically fit into the area, repositioning and scaling/stretching in any of the following modes: STRETCH, PROPORTIONAL_INSIDE, PROPORTIONAL_OUTSIDE, NONE, WIDTH_ONLY, or HEIGHT_ONLY.

 

with AutoFit Area you will still have to set up your resize listeners and change the width/height of the AutoFit Area.

 

read more: http://www.greensock.com/autofitarea/

 

2: Liquid Area (membership benefit)

 

You can also scale or stretch DisplayObjects using the LiquidArea class which extends AutoFitArea and allows you to define a rectangular area that expands and contracts as the stage resizes, and you attach DisplayObjects so that they fill the area, scaling in any of the following modes: STRETCH, PROPORTIONAL_INSIDE, PROPORTIONAL_OUTSIDE, WIDTH_ONLY, or HEIGHT_ONLY. For example, you could have a bar snap to the bottom of the screen and stretch horizontally to fill the width of the stage. Or add a background image that proportionally scales to fill the entire stage.

 

LiquidArea will automatically resize your content when the browser resizes.

 

read more: http://www.greensock.com/liquidstage/

[eldreams]

My re-size event listener that goes after the code I supplied earlier.

 

stage.addEventListener(Event.RESIZE, sizeListener);

function sizeListener(e:Event):void {
//pic.x=stage.stageWidth / 2;
//pic.y=stage.stageHeight / 2;
pic.x = 0;
pic.y = 0;
pic.width=stage.stageWidth;
pic.height=stage.stageHeight;

}

[eldreams]

I think I figured it out using the liquid stage. Thankyou.