Reduce lag in Random Color Gradient Tweening (Programatically Generated)

Question

Hello there,

I'm making some tests with random color gradient tweenings (to use them as backgrounds). After trying different things, I've found a code here and slightly changed it into the one below, which unfortunately produces lots of lag (interfering with timers and so in the same class). I'm using the GreenSock TweenLite/TweenMax engine:

package{

//...

    public class Main extends MovieClip{

        var color1:uint = Math.floor(Math.random()*0xFFFFFF + 1);
        var color2:uint = Math.floor(Math.random()*0xFFFFFF + 1);
        var colors:Object = {left:color1, right:color2};
        var newColor1:uint = Math.floor(Math.random()*0xFFFFFF + 1);
        var newColor2:uint = Math.floor(Math.random()*0xFFFFFF + 1);
        var newColors:Object = {left:newColor1, right:newColor2};
        var mySprite:Sprite = new Sprite();

        public function Main() {
            mySprite.x = 0;
            mySprite.y = 0;
            stage.addChildAt(mySprite, 1);
            drawGradient();
            animateBackground();

            //...

        }

        //...
        function drawGradient(){
            var m:Matrix = new Matrix();
            m.createGradientBox(805, 485, 0, 0, 0);
            mySprite.graphics.beginGradientFill(GradientType.LINEAR, [colors.left, colors.right], [1, 1], [0x00, 0xFF], m, SpreadMethod.REFLECT);
            mySprite.graphics.drawRoundRect(0,0,805,485, 0);
            stage.setChildIndex(mySprite, 1);
        }
        function animateBackground(){
            TweenMax.to(colors, 3, {hexColors:{left:newColor1, right:newColor2}, onUpdate:drawGradient, onComplete:reRandomize});
        }
        function reRandomize(){
            color1 = newColor1;
            color2 = newColor2;
            newColor1 = Math.floor(Math.random()*0xFFFFFF + 1);
            newColor2 = Math.floor(Math.random()*0xFFFFFF + 1);
            animateBackground();
        }

Everything works fine, but the lag keeps increasing and increasing. To make yourself an idea, the swf, which was previously 36 kB large, rose up to 74 kB just with this color implementation.

I was wondering if there is any more efficient way to deal with this effect, or something particularly laggy in the code. Does anybody know a way? Any help would be awesome and greatly appreciated.

Thank you in advance!

NOTE: I know this is the cause of lag after several test with different things disabled, so it is very unlikely that the excessive lag is from another source.

Answer 1

You forgot clearing the old graphics from the mySprite, thus any extra commands produce layers upon layers of graphics on that sprite. Add mySprite.graphics.clear() call to drawGradient function prior to drawing another gradient, should do.

    function drawGradient(){
        var m:Matrix = new Matrix();
        m.createGradientBox(805, 485, 0, 0, 0);
        mySprite.graphics.clear(); // here
        mySprite.graphics.beginGradientFill(GradientType.LINEAR, [colors.left, colors.right], [1, 1], [0x00, 0xFF], m, SpreadMethod.REFLECT);
        mySprite.graphics.drawRoundRect(0,0,805,485, 0);
        stage.setChildIndex(mySprite, 1);
    }