[FMX]ActionScript Animation

[jsites]

Hey,
This is the first time i've never had to do this.

I have a rectangle drawn in flash. i need it to grab a variable, and then i need it to animate the bar sliding from left to right the number of pixels that the variable is equal to.

i am doing this as a progress bar in an authorware program. i know how to pass the variables from authorware into flash, i just don't know how to make the movieclip of the bar slide across the screen and have it look like a smooth animation.

any help would be appreciated. :cool:

[jbum]

Here's some basic code to draw a rectangle from 0,0 to an arbitrary width,height:




MovieClip.prototype.drawRect = function(w,h)
{
this.moveTo(0,0);
this.beginFill(0xFF0000,100); // red rectangle, full opacity
this.lineTo(w,0);
this.lineTo(w,h);
this.lineTo(0,h);
this.lineTo(0,0);
this.endFill();
}



So basically, you want to animate that call so that 'width' goes from some arbitrarily small value (0?) to the value of your variable.




myMovie.curWidth = 0;
myMovie.curHeight = 30;
myMovie.desiredWidth = 100; // <-- value of your variable goes here

myMovie.onEnterFrame = function()
{
this.curWidth += 1; // amount to change...
if (this.curWidth >= this.desiredWidth) {
// we're done
this.onEnterFrame = undefined;
}
this.clear(); // clear previous rectangle drawing
this.drawRect(this.curWidth, this.curHeight);
}



In this example, I increase the width by 1 each frame. You probably don't want this, since it's slow, and the speed will change depending on the frame rate of your movie. The rate at which you change the width has a big effect on the character of your animation.

If you want your animation to occur over the space of 3 seconds (or 3000 milliseconds), and at the start of your animation, you captured the current
time:

desiredDuration = 3000; // 3 seconds or 3000 milliseconds
startTime = getTimer();

then the width at any time during those 3 seconds is given by:

elapsedTime = getTimer() - startTime;
curWidth = desiredWidth * elapsedTime/desiredDuration

In which elapsedTime/desiredDuration is a ratio that grows from 0 - 1 over the course of your animation. If you assign that ratio to another variable, then you can do various tweaks to ease the motion. Here's one kind of easing.

r = elapsedTime/desiredDuration
r = r*r*(3-2*r); // basic ease-in + ease-out
curWidth = desiredWidth*r;


Check out Robert Penner's actionscript book for more details on using ease functions to make your animation look nicer...

[jsites]

actually, here is what i am trying to do.

i have created a movie clip that is a specified size.
i do not need to actionscript the drawing of it, or the change it's width via actionscript.

i need it to animate it sliding on the X axis.

right now i have a button, when you click it, it should cause the movieclip (instance name NickelMovie) to slide across the screen.

on the button i have this action:

on (release) {
do {
speed = 1;
NickelMovie._x += speed;
} while (NickelMovie._x < slideValue);
}

slideValue is right now defined in a frame in Flash, but will eventually be a number passed from Authorware to Flash (which i have that part under control). right now when i click the button, the Movieclip moves directly to having an X value of the value of slideValue. it does not animate the movement, it just appears at the desired ending location.

what am i doing wrong in the above script?

[jbum]

The problem is that your loop increases your movie's _x value internally inside the function (inside the do/while loop, really fast, so you never have time see the intermediate steps).

You need to structure your code so that multiple calls to the function increase the _x value a bit at a time. onEnterFrame is good for this since it gets executed only once per frame.




// this gets called repeatedly, until we're done sliding
function slideMovie()
{
this._x += this.speed;
if (this._x >= this.slideValue)
this.onEnterFrame = defined;
}

on (release)
{
NickelMovie.slideValue = 100;
NickelMovie.speed = 1;
NickelMovie.onEnterFrame = slideMovie;
}



My comments above about using easing, and not using 1 for speed still apply, you just apply them to the movie's _x position, rather than the rectangle drawing.

- Jim