Drawing and animating a circle with Tweener


/ Published in: ActionScript 3
Save to your folder(s)

Sometimes you need to make animated circle - for example for preloader. This is havily based on Colibri flash player from http://chrometaphore.com/


Copy this code and paste it in your HTML
  1. //First we need to import some classes:
  2.  
  3. import flash.display.*;
  4. import flash.events.*;
  5. import caurina.transitions.Tweener;
  6. import flash.utils.Timer;
  7.  
  8. //and declare some varibles:
  9.  
  10. public var graphic:Sprite;
  11. public var total:Number = 120;
  12. public var track:Sprite;
  13. private var __radius:Number = 25;
  14. private var t:Timer;
  15. private var count:int = 0;
  16. private var targetAlpha:Number = 1;
  17.  
  18. //In the constructor function we add:
  19.  
  20. graphic = new Sprite();
  21. addChild( graphic );
  22. track = new Sprite();
  23. track.graphics.lineStyle( 4, 0xFFFFFF, 0.25 );
  24. track.graphics.drawCircle( 0, 0, __radius );
  25. graphic.addChild(track);
  26.  
  27. for ( var i:int = 0; i < total; i++ )
  28. {
  29. createCircle( i );
  30. }
  31.  
  32.  
  33. //And than:
  34.  
  35. public function loop():void
  36. {
  37. t = new Timer( 1 );
  38. t.addEventListener( TimerEvent.TIMER, onTimer );
  39. t.start();
  40. }
  41.  
  42. private function onTimer( e:TimerEvent ):void
  43. {
  44.  
  45. if ( t.currentCount >= total)
  46. {
  47. if ( targetAlpha == 1 )
  48. {
  49. targetAlpha = 0;
  50. }
  51. else
  52. {
  53. targetAlpha = 1;
  54. }
  55. t.stop();
  56. t.reset();
  57. t.start();
  58. }
  59.  
  60. Tweener.addTween( graphic.getChildByName( "s_" + (t.currentCount - 1) ), { alpha:targetAlpha, time: 1.75, transition:"easeOut" } );
  61. }
  62.  
  63.  
  64. private function createCircle( ID:int ):void
  65. {
  66. var singleSliceDegr:Number = 360 / total;
  67. var itemDegr:Number = ID * singleSliceDegr;
  68. var s:Sprite = new Sprite();
  69. s.name = "s_" + ID;
  70. s.graphics.beginFill(0xFFFFFF,1);
  71. s.graphics.drawCircle( 0, 0, 2 );
  72. s.cacheAsBitmap = true;
  73. s.x = __radius * ( Math.cos( ( itemDegr ) * Math.PI / 180 ) );
  74. s.y = __radius * ( Math.sin( ( itemDegr ) * Math.PI / 180 ) );
  75. s.alpha = 0;
  76. graphic.addChild(s);
  77. }
  78. }

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.