Statistics

Viewed 431 times
Favorited by 2 user(s)

/ Published in: ActionScript 3  This is a snippet that will animate in a circle in a clockwise fashion based on the parameters the function is passed. It can be used to create a circular or clock wipe when used as a mask.

Copy this code and paste it in your HTML
1. /*
2. Steve Ottenad - Nov 20, 2009 - AS3 Circle Drawing/ Clock Wipe Snippet
3.
4. This Snippet works by drawing and then fading a succession of small triangles to make a circle/polygon.
5. It relies on TweenMax, a free tweening engine found at http://blog.greensock.com/tweenmax/.
6.
7. Parameters:
8. centerX (Number) - The X coordinate of the center of the circle to be drawn.
9. centerY (Number) - The Y coordinate of the center of the circle to be drawn.
11. increment (Number) - The amount of degrees you want to add each time a wedge is drawn. If increment = 2, then 180 wedges will be drawn (360/2). If increment = 36, then 10 wedges will be drawn (360/10).
12. timeIncrement (Number) - The amount of milliseconds between each wedge being drawn.
13. Container (MovieClip) - The containing element.
14.
15. Sample Usage: drawCircle(centerX, centerY , radius, increment , timeIncrement, container);
16. */
17.
18.
19. function drawCircle(centerX:Number, centerY:Number, radius:Number, increment:Number, timeIncrement:Number, container:MovieClip){
20.
21. //Define Variables
23. var iniX:Number = centerX;
24. var iniY:Number = centerY;
25. var increment:Number = increment;
26. var totalDegrees:Number = 0;
29. outline.visible = true;
30.
31. //Create Timer
32. var maskTimer:Timer = new Timer(timeIncrement);
35.
36. //Start Drawing
37. container.graphics.moveTo(iniX, iniY);
38. function drawSegment(e:TimerEvent){
41. degInRad = totalDegrees * (Math.PI / 180);
42. degInRad1 = Number(totalDegrees+increment) * (Math.PI / 180);
43. //Find X,Y
48.
49. var wedge:Sprite = new Sprite();
50. wedge.alpha = 0;
51.
52. //Define Color
53. wedge.graphics.beginFill(0x000000);
54. wedge.graphics.moveTo(iniX, iniY);
55. wedge.graphics.lineTo(x1, y1);
56. wedge.graphics.lineTo(x2, y2);
57. wedge.graphics.lineTo(iniX, iniY);
58.
59. //Fade In (Time == 1 in this example
60. TweenMax.to (wedge, 1, {alpha:1});
62.
63. totalDegrees+= increment
64. ;
65. }else{ Subscribe to comments