negrito

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>; } }

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

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.

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