Drawing arcs with AS3
If you have ever tried to draw arcs with AS3 (or AS2), you probably smashed your computer on the floor after spending hours with curveTo().
That’s not what we need when we want to draw simple arcs, without any Bezier curve.
That’s why I made my own function.
It’s not that interesting since it only uses a bit of trigonometry, and obviously I did not write it for the sake of writing a function, but at the moment with this script
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | package { import flash.display.Sprite; public class arc extends Sprite { var my_canvas:Sprite = new Sprite(); var deg_to_rad=0.0174532925; public function arc() { addChild(my_canvas); my_canvas.graphics.lineStyle(20,0xff0000,1); draw_arc(my_canvas,250,200,150,14,180,1); } public function draw_arc(movieclip,center_x,center_y,radius,angle_from,angle_to,precision) { var angle_diff=angle_to-angle_from; var steps=Math.round(angle_diff*precision); var angle=angle_from; var px=center_x+radius*Math.cos(angle*deg_to_rad); var py=center_y+radius*Math.sin(angle*deg_to_rad); movieclip.graphics.moveTo(px,py); for (var i:int=1; i<=steps; i++) { angle=angle_from+angle_diff/steps*i; movieclip.graphics.lineTo(center_x+radius*Math.cos(angle*deg_to_rad),center_y+radius*Math.sin(angle*deg_to_rad)); } } } } |
you get this result:
An arc from degree 14 to degree 180. It’s easy and simple and uses trigonometry (check this old tutorial if you think it’s a brain disease)
But the final application is a power meter like the one used in Pumpkin Story, and here it is, with a bit of the previous script and a bit of Flash artillery.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 | package { import flash.display.Sprite; import flash.events.MouseEvent; import flash.events.Event; public class arc extends Sprite { var my_canvas:Sprite = new Sprite(); var deg_to_rad=0.0174532925; var charging:Boolean=false; var power:int=0; public function arc() { addChild(my_canvas); stage.addEventListener(MouseEvent.MOUSE_UP, shoot); stage.addEventListener(MouseEvent.MOUSE_DOWN,charge); addEventListener(Event.ENTER_FRAME, on_enter_frame); } public function draw_arc(movieclip,center_x,center_y,radius,angle_from,angle_to,precision) { var angle_diff=angle_to-angle_from; var steps=Math.round(angle_diff*precision); var angle=angle_from; var px=center_x+radius*Math.cos(angle*deg_to_rad); var py=center_y+radius*Math.sin(angle*deg_to_rad); movieclip.graphics.moveTo(px,py); for (var i:int=1; i<=steps; i++) { angle=angle_from+angle_diff/steps*i; movieclip.graphics.lineTo(center_x+radius*Math.cos(angle*deg_to_rad),center_y+radius*Math.sin(angle*deg_to_rad)); } } public function charge(e:MouseEvent) { charging=true; } public function shoot(e:MouseEvent) { charging=false; my_canvas.graphics.clear(); power=0; } public function on_enter_frame(e:Event) { if (charging) { power++; if (power>=120) { power-=120; } my_canvas.graphics.clear(); my_canvas.graphics.lineStyle(20,0x000000,1); draw_arc(my_canvas,250,200,150,270,270+power*3,1); } } } } |
And this is the result:
Press and hold the mouse to charge the power, release to reset.
Next time, a real-world application of this principle
They can be easily customized to meet the unique requirements of your project.
7 Responses to “Drawing arcs with AS3”
Leave a Reply
Trackbacks
-
Pumpkin Story prototype : Emanuele Feronato on
September 25th, 2009 12:22 am
[...] quick Pumpkin Story prototype is made merging and mixing these scripts: Drawing arcs with AS3 and Creation of a Flash artillery game using [...]
-
Weekly Shared Items – 29. September, 2009 | TOXIN LABS - weblog of a german design student from wuerzburg on
September 29th, 2009 6:11 am
[...] Drawing arcs with AS3 [...]
- Get up to $100,000 for your next Flash game with Mochi GAME Developer Fund
- Create a dynamic content animated footer ad for your site in just 9 jQuery lines – 17 lines version
- Sell sitelocked version of your Flash games and even .fla sources to Free Online Games
- Protect your work from ActionScript code theft with SWF Protector
- Create a dynamic content animated footer ad for your site in just 9 jQuery lines
- Understanding Box2D’s one-way platforms, aka CLOUDS
- Triqui MochiAds Arcade plugin for WordPress upgraded to 1.2
- Box2D Flash game creation tutorial – part 2
- 11 Flash isometric engines you can use in your games
- Monetize your Flash games with GamesChart
- Create a Lightbox effect only with CSS - no javascript needed
- Flash game creation tutorial - part 1
- Create a Flash Racing Game Tutorial
- Flash game creation tutorial - part 2
- Make a Flash game like Flash Element Tower Defense - Part 2
- Flash game creation tutorial - part 3
- Make a Flash game like Flash Element Tower Defense - Part 1
- Create a flash draw game like Line Rider or others - part 1
- Triqui MochiAds Arcade plugin for WordPress official page
- Create a flash artillery game - step 1
- Flash game creation tutorial – part 5.2 (4.88/5)
- Create a flash artillery game – step 1 (4.79/5)
- Create a Flash Racing Game Tutorial (4.76/5)
- Create a flash artillery game – step 2 (4.74/5)
- Create a survival horror game in Flash tutorial – part 1 (4.73/5)
- Creation of a Flash arcade site using WordPress – step 2 (4.73/5)
- Flash game creation tutorial – part 2 (4.71/5)
- Flash game creation tutorial – part 1 (4.70/5)
- Create a flash draw game like Line Rider or others – part 1 (4.69/5)
- Creation of a platform game with Flash – step 2 (4.68/5)

(6 votes, average: 4.67 out of 5)





Type declarations please.
Yes, the fact that you’ve provided the code and example simply isn’t good enough for us dammit!
Yes, type declarations! I can see that the functions doesn’t return anything, but don’t know they’re void unless explicitly stated!
I also often write libraries for myself (for satisfaction), but I already know this method from “draw advanced methods” for Flash MX at Adobe. Before a year I found this: http://theflashblog.com/?p=429 – more powerful than their own package, than single functions.
This is a really sweet one..
I’m rewriting it to use a timer for a slideshow I’m making.