Trouble with tweening and easing

[hornerian]

Ive been trying to teach myself AC3 for only a couple of weeks so I know this may be quite basic.

I am trying to make a group of thumbnails scroll in a scrollbar in a flash movie. I got them to scroll properly at first but when I added the tween and ease function I ran into one major problem. For some reason the thumbnails will stop mid tween at random. This puts them in random places and messes everything up. Whats the deal?

here is my work so far...


import flash.events.Event;
import fl.transitions.TweenEvent;
import fl.transitions.Tween;
import fl.transitions.easing.*;

scroll_btn1.addEventListener(MouseEvent.CLICK, modSpeed1);
scroll_btn2.addEventListener(MouseEvent.CLICK, modSpeed2);
scroll_btn1.addEventListener(MouseEvent.CLICK, stopScroll);
scroll_btn2.addEventListener(MouseEvent.CLICK, stopScroll);

function modSpeed1(speed) {
var tween_btn1:Tween = new Tween(pnt_btn1, "x", Regular.easeOut, pnt_btn1.x, pnt_btn1.x + 80.7, 20, false);
var tween_btn2:Tween = new Tween(pnt_btn2, "x", Regular.easeOut, pnt_btn2.x, pnt_btn2.x + 80.7, 20, false);
var tween_btn3:Tween = new Tween(pnt_btn3, "x", Regular.easeOut, pnt_btn3.x, pnt_btn3.x + 80.7, 20, false);
var tween_btn4:Tween = new Tween(pnt_btn4, "x", Regular.easeOut, pnt_btn4.x, pnt_btn4.x + 80.7, 20, false);
var tween_btn5:Tween = new Tween(pnt_btn5, "x", Regular.easeOut, pnt_btn5.x, pnt_btn5.x + 80.7, 20, false);
var tween_btn6:Tween = new Tween(pnt_btn6, "x", Regular.easeOut, pnt_btn6.x, pnt_btn6.x + 80.7, 20, false);
var tween_btn7:Tween = new Tween(pnt_btn7, "x", Regular.easeOut, pnt_btn7.x, pnt_btn7.x + 80.7, 20, false);
var tween_btn8:Tween = new Tween(pnt_btn8, "x", Regular.easeOut, pnt_btn8.x, pnt_btn8.x + 80.7, 20, false);
var tween_btn9:Tween = new Tween(pnt_btn9, "x", Regular.easeOut, pnt_btn9.x, pnt_btn9.x + 80.7, 20, false);
var tween_btn10:Tween = new Tween(pnt_btn10, "x", Regular.easeOut, pnt_btn10.x, pnt_btn10.x + 80.7, 20, false);
}

function modSpeed2(speed) {
var tween2_btn1:Tween = new Tween(pnt_btn1, "x", Regular.easeOut, pnt_btn1.x, pnt_btn1.x - 80.7, 20, false);
var tween2_btn2:Tween = new Tween(pnt_btn2, "x", Regular.easeOut, pnt_btn2.x, pnt_btn2.x - 80.7, 20, false);
var tween2_btn3:Tween = new Tween(pnt_btn3, "x", Regular.easeOut, pnt_btn3.x, pnt_btn3.x - 80.7, 20, false);
var tween2_btn4:Tween = new Tween(pnt_btn4, "x", Regular.easeOut, pnt_btn4.x, pnt_btn4.x - 80.7, 20, false);
var tween2_btn5:Tween = new Tween(pnt_btn5, "x", Regular.easeOut, pnt_btn5.x, pnt_btn5.x - 80.7, 20, false);
var tween2_btn6:Tween = new Tween(pnt_btn6, "x", Regular.easeOut, pnt_btn6.x, pnt_btn6.x - 80.7, 20, false);
var tween2_btn7:Tween = new Tween(pnt_btn7, "x", Regular.easeOut, pnt_btn7.x, pnt_btn7.x - 80.7, 20, false);
var tween2_btn8:Tween = new Tween(pnt_btn8, "x", Regular.easeOut, pnt_btn8.x, pnt_btn8.x - 80.7, 20, false);
var tween2_btn9:Tween = new Tween(pnt_btn9, "x", Regular.easeOut, pnt_btn9.x, pnt_btn9.x - 80.7, 20, false);
var tween2_btn10:Tween = new Tween(pnt_btn10, "x", Regular.easeOut, pnt_btn10.x, pnt_btn10.x - 80.7, 20, false);
}

function stopScroll(event:Event):void {

//this sets the scroll area of the thumbnails before they are stopped

if (pnt_btn1.x<=-480.4) {
modSpeed1(null);
}
if (pnt_btn10.x>=406.3) {
modSpeed2(null);
}
}

[watsau]

I think that your tweens get garbage collected, since they don't have any references. I've had a similar problem.

What you can do is push all your tweens in an array, like this


var myTweens = new Array();
myTweens.push(tween_btn1);
//And so on...


By doing this, you ensure that your tweens don't get overwritten and garbage collector leaves them alone.

[hornerian]

Thanks for responding to my problem. I now understand whats going on with garbage collection, but I dont really know how to apply the 'new array' to my code. I tried this but clearly its not right.


function modSpeed1(speed) {
var myTweens = new Array();
myTweens.push(tween_btn1);
myTweens.push(tween_btn2);
myTweens.push(tween_btn3);
myTweens.push(tween_btn4);
myTweens.push(tween_btn5);
myTweens.push(tween_btn6);
myTweens.push(tween_btn7);
myTweens.push(tween_btn8);
myTweens.push(tween_btn9);
myTweens.push(tween_btn10);
var tween_btn1:Tween = new Tween(pnt_btn1, "x", Regular.easeOut, pnt_btn1.x, pnt_btn1.x + 80.7, 20, false);
var tween_btn2:Tween = new Tween(pnt_btn2, "x", Regular.easeOut, pnt_btn2.x, pnt_btn2.x + 80.7, 20, false);
var tween_btn3:Tween = new Tween(pnt_btn3, "x", Regular.easeOut, pnt_btn3.x, pnt_btn3.x + 80.7, 20, false);
var tween_btn4:Tween = new Tween(pnt_btn4, "x", Regular.easeOut, pnt_btn4.x, pnt_btn4.x + 80.7, 20, false);
var tween_btn5:Tween = new Tween(pnt_btn5, "x", Regular.easeOut, pnt_btn5.x, pnt_btn5.x + 80.7, 20, false);
var tween_btn6:Tween = new Tween(pnt_btn6, "x", Regular.easeOut, pnt_btn6.x, pnt_btn6.x + 80.7, 20, false);
var tween_btn7:Tween = new Tween(pnt_btn7, "x", Regular.easeOut, pnt_btn7.x, pnt_btn7.x + 80.7, 20, false);
var tween_btn8:Tween = new Tween(pnt_btn8, "x", Regular.easeOut, pnt_btn8.x, pnt_btn8.x + 80.7, 20, false);
var tween_btn9:Tween = new Tween(pnt_btn9, "x", Regular.easeOut, pnt_btn9.x, pnt_btn9.x + 80.7, 20, false);
var tween_btn10:Tween = new Tween(pnt_btn10, "x", Regular.easeOut, pnt_btn10.x, pnt_btn10.x + 80.7, 20, false);
}

[TomMalufe]

OK here is the problem. Every variable that is declared (with var) within a function is only a local variable and as soon as the function is done running those variables are free to be garbage collected.
In order to prevent this you have to declare your variables (or array in this case) as a global var to keep it around.

Get it? it's the fact that everything is contained within the function with no anchor in the global scope.

Right now all your tweens and the array containing your tweens are getting garbage collected.