Advanced Search

Create a fading circular mask

/ Published in: ActionScript 3
Save to your folder(s)
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.

Expand | Embed | Plain Text

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.
  10. radius         (Number) - The desired radius of the circle.
  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
  22. var radius:Number = radius;
  23. var iniX:Number = centerX;
  24. var iniY:Number = centerY;
  25. var increment:Number = increment;
  26. var totalDegrees:Number = 0;
  27. var degInRad:Number;
  28. var degInRad1:Number;
  29. outline.visible = true;
  30.  
  31. //Create Timer
  32. var maskTimer:Timer = new Timer(timeIncrement);
  33. maskTimer.addEventListener(TimerEvent.TIMER, drawSegment);
  34. maskTimer.start();
  35.  
  36. //Start Drawing
  37. container.graphics.moveTo(iniX, iniY);
  38. 	function drawSegment(e:TimerEvent){
  39. 		if(totalDegrees < 362 && keepLoading){
  40. 			//Convert to Radians
  41. 			degInRad = totalDegrees * (Math.PI / 180);
  42. 			degInRad1 = Number(totalDegrees+increment) * (Math.PI / 180);
  43. 			//Find X,Y
  44. 			var x1:Number = radius * Math.cos( degInRad ) + iniX;
  45. 			var y1:Number = radius * Math.sin( degInRad ) + iniY;
  46. 			var x2:Number = radius * Math.cos( degInRad1 ) + iniX;
  47. 			var y2:Number = radius * Math.sin( degInRad1 ) + iniY;
  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});
  61. 			container.addChild(wedge);
  62.  
  63. 			totalDegrees+= increment
  64. 			;
  65. 		}else{
  66. 			maskTimer.stop();
  67. 		}
  68. 	}
  69. }

URL: http://www.steveottenad.com

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.