[flexcoders] draw an arc

[Mark]

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

[Jake Churchill]

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

[Oleg Sivokon]

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

[gabriel montagné]

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