basic tweening but why is not at all smooth?

[gabriele]

Hi guys,

 

I am doing a very basic tweening of severals elements generated randomly.

All the tweened objects are crossing a stage of 760 pixel dimension....

 

I don't know why the movement is not at all smooth and above all at the end of the tween there is a sort of break, very annoying...

 

Can someone find the problem? I am missing something? thanks

 

package

{

import flash.display.Sprite;

import flash.events.Event;

 

public class Main extends Sprite {

private var arrayBall : Array;

private var lastCall : int;

private var ball : Ball;

private var delay : int =0;

public function Main()

{

// Launch your application by right clicking within this class and select: Deubg As > FDT SWF Application

addEventListener(Event.ADDED_TO_STAGE, onstage);

// Launch your application by right clicking within this class and select: Deubg As > FDT SWF Application

}

 

private function onstage(event : Event) : void {

 

 

removeEventListener(Event.ADDED_TO_STAGE,onstage);

 

stage.frameRate = 60;

 

 

arrayBall = new Array();

lastCall = 0;

addEventListener(Event.ENTER_FRAME, buildingBall);

 

}

 

 

private function buildingBall(event : Event) : void {

 

 

lastCall ++;

 

if(lastCall > delay){

 

var array = new Array(80, 150, 240, 350);

var random:RandomValue = new RandomValue();

var randomNum:int = random.randomSelection(array);

var num:int = array.indexOf(randomNum);

 

ball = addChild(new Ball()) as Ball;

 

ball.cont = this;

 

boat.x = -40;

ball.main = this;

ball.y = randomNum;

ball.scaleX = ball.scaleY = ball.y / 350;

 

delay = random.randomNumber(40, 60);

lastCall = 0;

 

 

ball.entry = arrayBall.lenght;

arrayElements.push(ball);

}

 

 

}

 

public function removingChild(ball: Ball) : void {

arrayElements.splice(ball.entry, 1);

ball.parent.removeChild(ball);

ball = null;

}

}

 

 

 

package {

import com.greensock.TweenLite;

import com.greensock.TweenMax;

 

import flash.display.Sprite;

import flash.events.Event;

 

/**

* @author gabrielepalumbo

*/

public class Ball extends Sprite {

private var _cont : Sprite;

private var _main : Main;

public var _entry : int;

 

 

public function Ball() {

this.mouseEnabled = false;

addEventListener(Event.ADDED_TO_STAGE, init);

 

//

}

 

private function init(event : Event) : void {

removeEventListener(Event.ADDED_TO_STAGE, init);

 

var sprMain : Sprite = addChild(new Sprite()) as Sprite;

 

sprMain.graphics.clear();

 

sprMain.alpha = 1;

 

sprMain.graphics.beginFill(0x000000);

 

sprMain.graphics.drawCircle(0, 0, 10);

 

 

TweenLite.to(this, 8, {x:900, onComplete:autoEliminate, onCompleteParams:[this]});

 

 

}

 

private function autoEliminate(mc : Sprite) : void {

TweenMax.killTweensOf(this);

_main.removingChild(this);

}

 

public function get entry() : int {

return _entry;

}

 

public function set entry(entry : int) : void {

_entry = entry;

}

 

public function get main() : Main {

return _main;

}

 

public function set main(main : Main) : void {

_main = main;

}

 

public function get cont() : Sprite {

return _cont;

}

 

public function set cont(cont : Sprite) : void {

_cont = cont;

}

}

}

[Carl]

this isn't related but you have a typo here:

 

ball.entry = arrayBall.lenght;

 

i don't see anything that really jumps out in your code as being a problem.

 

The Flash Player in general isn't really the best at rendering long distance tweens if there isn't enough time or frames.

 

I think you'll see that if you increase the duration or shorten the distance it will get smoother.

 

Perhaps someone else will have some better tips.

[GreenSock]

What do you mean "at the end of the tween there is a sort of break"?

 

From a quick glance at your code, it looks like you're asking a lot of the Flash Player because you're having it create 60 new Balls every second and tween them each for 8 seconds and it must refresh a roughly 910x280 pixel area (254,800 pixels) at 60fps and the circles are all vectors which are CPU-intensive to render. You've got up to 480 tweens running at the same time, moving 480 Balls. By FAR the biggest CPU hog in most Flash projects is graphics rendering, not ActionScript execution. It ain't even close. So I highly doubt that even 1% of the strain has to do with TweenLite in your case. You can test that by not adding any of the Balls to the display list and see how much of a difference that makes. I've had well over 5,000 tweens running concurrently without the CPU even breaking a mild sweat. But graphics rendering is a whole different story.

 

If you need to improve performance, here are a few ideas:

 

1) Don't keep re-creating instances of Ball - recycle them. Once one is done tweening, reuse it.

 

2) Don't use an ENTER_FRAME handler to keep recreating stuff. Create however many balls you want at once and then tween them with various delay values and use an onComplete and onCompleteParams to have them call a function recursively that takes that ball instance and randomly tweens it at a new scale/position each time it completes. This will be much less processor-intensive.

 

3) You could try using Bitmaps for the Balls instead of vectors. Heck, you could just have a single Ball drawn with the vector and draw() it to a new BitmapData each time you want to create a new one.

 

4) Use a blitting technique (basically putting them all onto a single BitmapData) but that gets more cumbersome/complex.

 

Just a few ideas. Hope that helps.

[gabriele]

hey thank you VERY much for your detailed suggestions...

 

so this is more or less how you do animation like your physics2D example?

 

gab

[GreenSock]

hey thank you VERY much for your detailed suggestions...

 

so this is more or less how you do animation like your physics2D example?

Yep, except I didn't do blitting (BitmapData stuff) there. Didn't seem necessary. I did create a certain number of balls and then recycled them when each tween was finished.

[gabriele]

thank you very much then for the tips and the time you spent on it

[gabriele]

Hi Jack,

 

sorry if I go back to this problem.

I have still not a fluid movement of my clip so I made with a more basic test that is only a movieclip crossing all the stage and still the movement is not fluid, there are moment in which it looks slower or stuck for few instants...

 

package

{

import flash.display.Sprite;

import flash.events.Event;

 

public class Main extends Sprite {

 

public function Main()

{

 

addEventListener(Event.ADDED_TO_STAGE, onstage);

}

 

private function onstage(event : Event) : void {

 

 

removeEventListener(Event.ADDED_TO_STAGE,onstage);

 

stage.frameRate = 60;

 

buildingBoat();

 

 

}

 

 

private function buildingBoat() : void {

 

 

var boat:BoatModel = new BoatModel();

 

boat.main= this;

 

boat.y = stage.stageHeight/2;

 

addChild(boat);

boat.anim();

 

 

 

}

 

public function removingChild(boatModel : BoatModel) : void {

 

this.removeChild(boatModel);

boatModel = null;

}

 

 

}

}

 

 

package {

import flash.display.BitmapData;

import flash.display.Bitmap;

import convertion.BitmapDataConvertion;

import com.greensock.TweenLite;

import com.greensock.TweenMax;

 

import flash.display.Sprite;

import flash.events.Event;

 

/**

* @author gabrielepalumbo

*/

public class BoatModel extends Sprite {

 

private var _main : Main;

 

 

 

public function BoatModel() {

var sprMain : Sprite = new Sprite() as Sprite;

 

sprMain.graphics.clear();

 

sprMain.alpha = 1;

 

sprMain.graphics.beginFill(0x000000);

 

sprMain.graphics.drawCircle(0, 0, 30);

 

var conv:BitmapDataConvertion = new BitmapDataConvertion();

 

var spr:BitmapData = conv.convertMC(sprMain);

 

var boat:Bitmap = addChild(new Bitmap(spr)) as Bitmap;

 

boat.smoothing = true;

 

}

 

public function anim() : void {

 

 

TweenLite.to(this, 5, {x:800, onComplete:autoEliminate, onCompleteParams:[this]});

 

 

}

 

private function autoEliminate(mc : Sprite) : void {

TweenMax.killTweensOf(this);

_main.removingChild(this);

}

 

 

 

public function get main() : Main {

return _main;

}

 

public function set main(main : Main) : void {

_main = main;

}

 

 

}

}

 

 

what's going on?

it's possible the flash player is so crap is not managing a slow movement without jumping in the eyes?

 

thanks,

 

gabriele

[GreenSock]

This probably has nothing to do with TweenLite/Max - it's tough to diagnose for sure without seeing your files and being able to publish, but I wonder if you've just got your pixelSnapping in your Bitmap set so that it only lands on whole pixels which can make it *look* stuttery/jagged. And keep in mind that anything that has a filter applied and/or has cacheAsBitmap set to true will only be rendered on whole pixels too. When the movement is slow, things look jerky even though the CPU probably isn't bogging down at all, nor is the frame rate dropping. Just a guess.