[Drawing with TweenMax [SOLVED]]

Here's something I whipped together. You could certainly modularize it more, put it into classes, etc., but hopefully it gives you the general idea. You could just copy/paste this into a blank FLA and publish it to see (make sure you've got the latest v11 "gs" directory with the FLA though):

 

i've made a class out of your example. maybe you could create a plugin out of it if you have some spare time? i think it could be a nice feature.

 

create an instance:

 

var points:Array = new Array(new Point(0, 0), new Point(-150, -150), new Point(-150, 50), new Point(20, 20));    
            
var style:GraphicsStroke = new GraphicsStroke(10, false, LineScaleMode.NORMAL,CapsStyle.NONE, JointStyle.MITER);            
style.fill = new GraphicsSolidFill(0x000000, 1);
            
var stroke:ProgressiveStroke = new ProgressiveStroke(points, 6, style, Quint.easeInOut);
stroke.play();
            
addChild(stroke);
 

 

and the class:

 

////////////////////////////////////////////////////////////////////////////////
// Copyright 2010.  
// All rights reserved. 
////////////////////////////////////////////////////////////////////////////////

package ch.insofern.graphics
{
    
    import __AS3__.vec.Vector;
    
    import com.greensock.TimelineLite;
    import com.greensock.TweenLite;
    import com.greensock.easing.Linear;
    
    import flash.display.Graphics;
    import flash.display.GraphicsSolidFill;
    import flash.display.GraphicsStroke;
    import flash.display.IGraphicsData;
    import flash.display.Shape;
    import flash.events.Event;
    import flash.geom.Point;
    
    [Event(name="complete", type="flash.events.Event")]
    
    /**
     * Class description.
     * @author negro
     */
    public class ProgressiveStroke extends Shape
    {
        /**
         * Creates an animated line.
         * @param points
         * @param duration
         * @param style
         * @param ease
         */
        public function ProgressiveStroke(points:Array, duration:Number = 3, style:GraphicsStroke = null, ease:Function = null)
        {
            // set a default ease
            if (ease == null)
            {
                ease = Linear.easeOut;
            }
            
            // set a default style
            if (style == null)
            {
                style = new GraphicsStroke(1);
                style.fill = new GraphicsSolidFill(0x000000);
            }
            
            // add the style to the graphics data
            _style = new Vector.<IGraphicsData>();
            _style.push(style);
            
            // create a timeline that contains a tween for every line
            var timeline:TimelineLite = new TimelineLite({paused: true});
            var point:Point;
            var pointPrevious:Point = points[0];
            var passedPoints:Array = [];
            var distance:Number;
            var pen:Object;
            
            for (var i:int = 1; i < points.length; i++)
            {
                point = points[i];
                pointPrevious = points[i - 1];
                passedPoints.push(pointPrevious);
                pen = {x: pointPrevious.x, y: pointPrevious.y, passedPoints: passedPoints.slice()};
                distance = Point.distance(point, pointPrevious);
                timeline.append(new TweenLite(pen, distance, {x: point.x, y: point.y, ease: Linear.easeNone, onUpdate: update, onUpdateParams: [pen]}));
            }
            
            // tween the timeline progress, this actually creates the animation
            _stroke = new TweenLite(timeline, duration, {currentProgress: 1, ease: ease, paused: true, onComplete: complete});
        }
        
        /**
         * Play the drawing.
         */
        public function pause():void
        {
            _stroke.pause();
        }
        
        /**
         * Pause the drawing.
         */
        public function play():void
        {
            _stroke.play();
        }
        
        /**
         * Dispatch complete event when the stroke 
         * drawing is complete.
         */
        private function complete():void
        {
            dispatchEvent(new Event(Event.COMPLETE));
        }
        
        /**
         * Update the drawing od the stroke.
         * @param pen
         */
        private function update(pen:Object):void
        {
            // clear the old lines and redraw everything
            var graph:Graphics = graphics;
            graph.clear();
            graph.drawGraphicsData(_style);
            
            // draw the lines for all points that were already passed
            var passedPoints:Array = pen.passedPoints;
            graph.moveTo(passedPoints[0].x, passedPoints[0].y);
            
            var l:uint = passedPoints.length;
            
            for (var i:int = 1; i < l; i++)
            {
                graph.lineTo(passedPoints[i].x, passedPoints[i].y);
            }
            
            // draw the line for the current point
            graph.lineTo(pen.x, pen.y);
        }

        //--------------------------------------
        // Properties 
        //--------------------------------------
        
        private var _stroke:TweenLite;
        
        private var _style:Vector.<IGraphicsData>;
    }
}
 

[draw animated bezier]

check out the following link if you want to create the effect shown in the video of my first post.

 

viewtopic.php?f=1&t=287&hilit=target+onUpdate

[draw animated bezier]

thanks for the reply. i thought that there wouldn't be an easy way to do this but thanks for sharing your thoughts on it. if i found a nice solution i will post the code back here.

[draw animated bezier]

hello jack

 

i've got a question that sure pops up quite often but i couldn't find any post in the forum.

 

well, it's about animated beziers. let's suppose i create a simple tween with a bezier like that:

 

TweenMax.to(mc, 3, {bezier:[{x:100, y:200}, {x:0, y:400}], ease:Expo.easeOut});

 

now this will tween my movie clip along the bezier. that's quite nice but i would like to draw the bezier the movieclip has tweened through. and this while it is tweening. of course i could make an onUpdate and draw tiny lineTo chunks at every enterFrame but the line can become edgy if i tween fast and with a low number of frames.

 

is there any possibility draw the bezier (curve) while it is tweening?

 

basically it's this behaviour but with curves: http://www.edwardporter.com/flash/Comp1.mov