[flexcoders] draw an arc
I need to draw an animated arc in Flex. So I have 2 points and the arc needs to draw over a period of about 1.5 seconds or so. I can't even find a good demo for Flash, let alone Flex. Does anyone know how to go about doing this? Thanks, Mark
Re: [flexcoders] draw an arc
I've seen it done before where the arc is not technically smooth but it's a bunch of connected straight lines in very short increments (like 4 lines per degree). The math is a total pain. If you end up doing something like that, get ready to re-learn geometry and trigonometry. Flex 4 has motionpath animations but I think they are straight line only. However, you might be able to us that to your advantage to constantly change the x/y of some object to mimic a curve. Good luck On Wed, May 26, 2010 at 12:52 PM, Mark mark.pusat...@yahoo.com wrote: I need to draw an animated arc in Flex. So I have 2 points and the arc needs to draw over a period of about 1.5 seconds or so. I can't even find a good demo for Flash, let alone Flex. Does anyone know how to go about doing this? Thanks, Mark
Re: [flexcoders] draw an arc
package examples { import flash.display.Graphics; import flash.display.Sprite; import flash.events.Event; [SWF(width=320, height=320, backgroundColor=0x00, frameRate=31)] /** * Spiral example. * @author wvxvw */ public class Main extends Sprite { private var _angle:Number = 0; private var _centerX:int = 160; private var _centerY:int = 160; public function Main() { if (super.stage) init(); else super.addEventListener(Event.ADDED_TO_STAGE, this.init); } private function init(event:Event = null):void { super.removeEventListener(Event.ADDED_TO_STAGE, this.init); super.addEventListener(Event.ENTER_FRAME, this.drawSpiral); } private function drawSpiral(event:Event = null):void { var radiusA:int = 228; var radiusB:int = 200; var angle:Number = this._angle; var g:Graphics = super.graphics; var lineAlpha:Number = 1; var len:Number = Math.PI * 2; var step:Number = len * 0.125; g.clear(); g.lineStyle(10, 0xFF8000, lineAlpha); g.moveTo(this._centerX + Math.cos(angle) * radiusA, this._centerY + Math.sin(angle) * radiusA); for (var i:int = 0; i 32; i++) { angle += step; radiusA *= 0.9; radiusB *= 0.9; g.curveTo( this._centerX + Math.cos(angle) * radiusA, this._centerY + Math.sin(angle) * radiusA, this._centerX + Math.cos(angle + step * 0.5) * radiusB, this._centerY + Math.sin(angle + step * 0.5) * radiusB); } this._angle += step; } } } Have fun :)
Re: [flexcoders] draw an arc
For a more Flexy approach, check this out, http://gist.github.com/414884 Which uses, http://github.com/mamapitufo/pistacho/blob/master/src/com/mamapitufo/display/Shapes.as This one fills the wedge, but you can not do the beginFill / endFill and instead configure a lineStyle and moveTo / lineTo thing. Then you can use an AnimateProperty effect on the ratio, for example, hth, g. -- gabriel montagné láscaris comneno http://rojored.com +44 (0) 7500 709 209