Scale Tween broken while changing browser window size

[smeagol16]

Hi everyone

 

I got issue with my scale tween on image "bg1_mc" that is my backgound image , everything goes great until i change size of my swf viever/browser window.

bg1_mc don't fit my window and the animation goes crazy when i change the browser size;/.

I was wondering if i can add (null) to the tween somehow but i don't know is it the good thinking. Any idea?

 

Here's the code and the fla file.

 

import flash.display.Bitmap;
import flash.display.BitmapData;
import flash.display.MovieClip;
import flash.display.StageAlign;
import flash.display.StageScaleMode;
import flash.display.Loader;
import flash.display.Sprite;
import flash.net.URLRequest;
import flash.events.Event;
import flash.events.MouseEvent;
import gs.easing.Strong;
import gs.TweenLite;
import com.greensock.TimelineLite;
import com.greensock.*;
import com.greensock.easing.*;





if (stage)
{
  init(null);
}
else
{
  addEventListener(Event.ADDED_TO_STAGE, init);
}

function init(e:Event):void{

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


}



function onResize(e:Event):void {

  bg1_mc.width = stage.stageWidth;
  bg1_mc.height = stage.stageHeight;

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


bg1_mc.x = 0;
bg1_mc.y = 0;

bg_mc.x = 30;
bg_mc.y = 30;


bg_mc.width = stage.stageWidth - 60;
bg_mc.height = stage.stageHeight - 60;


fb_mc.x = stage.stageWidth - 50;
fb_mc.y = stage.stageHeight - 23;

}

var timeline:TimelineMax = new TimelineMax({repeat:-1, yoyo:true});

timeline.append( TweenMax.to(bg1_mc,20,{delay:0, scaleX:1.3,scaleY:1.3,ease:Linear.easeInOut}));
timeline.append( TweenMax.to(bg1_mc,20,{delay:0, scaleX:1,scaleY:1,ease:Linear.easeInOut}));

[Carl]

the behavior you describe appears to be expected.

 

if you have a TimelineMax scaling an object and then you have other code in onResize() that is changing the width and height of that object there is going to be a conflict.

 

you should probably clear() the timeline onResize and then re-populate it with the tweens that you need

[smeagol16]

Im new in as3 so i dont know it so good for now.

So i shoudnt resize my image bg1_mc at onResize() and resize it by using tweens, is that right?

How the Tween should look to resize image in the way i done in onResize()?

 

Thank you for more help.

 

function onResize(e:Event):void {

  bg1_mc.width = stage.stageWidth;
  bg1_mc.height = stage.stageHeight;

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

[Carl]

try this:

 

import flash.display.Bitmap;
import flash.display.BitmapData;
import flash.display.MovieClip;
import flash.display.StageAlign;
import flash.display.StageScaleMode;
import flash.display.Loader;
import flash.display.Sprite;
import flash.net.URLRequest;
import flash.events.Event;
import flash.events.MouseEvent;
import gs.easing.Strong;
import gs.TweenLite;
import com.greensock.TimelineLite;
import com.greensock.*;
import com.greensock.easing.*;



var timeline:TimelineMax = new TimelineMax();

if (stage)
{
  init(null);
}
else
{
  addEventListener(Event.ADDED_TO_STAGE, init);
}

function init(e:Event):void{

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


}



function onResize(e:Event):void {
trace("resize");

timeline.gotoAndStop(0);
timeline.clear();

bg1_mc.width = stage.stageWidth;
bg1_mc.height = stage.stageHeight;

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


bg1_mc.x = 0;
bg1_mc.y = 0;

bg_mc.x = 30;
bg_mc.y = 30;


bg_mc.width = stage.stageWidth - 60;
bg_mc.height = stage.stageHeight - 60;



timeline.insert(TweenMax.to(bg1_mc, 20, {delay:0, width:bg1_mc.width*1.3, height:bg1_mc.height*1.3, repeat:-1, yoyo:true}));
timeline.play();




}

 

NOTE! you are using a very out-dated version of greensock. I would recommend updating to v11.

[smeagol16]

Thx for your reply:)

With your code, Animation stops when window is resized.

[Carl]

I'm not seeing the animation stop. take a look:

[smeagol16]

My bad i wrote last } before tween , not at the last line..(shame)

Thank you again!

[Carl]

you're welcome. glad you got it to work!