Advanced Search

Animating a bar chart

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

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. import com.greensock.*;
  2. import com.greensock.easing.*;
  3. // ---------------------------
  4. // Bar Char graph animation
  5. // ---------------------------
  6. // Enter number of bars
  7. var bars:Number=2;
  8. var animationDirection:String="vertical";// horizontal
  9. var graphLabels:Boolean=true;// Are there any labels above or on bars?
  10.  
  11. // Trigger this function to start animation
  12. setUp();
  13.  
  14. // Fade in axis
  15. axis_mc.alpha=0;
  16. TweenMax.to(axis_mc, 1, {alpha:1});
  17.  
  18. // Test to see direction and set bars ready to animate
  19. function setUp():void{
  20. 	switch (animationDirection) {
  21. 		case "vertical" :
  22. 			for (var i:Number = 1; i<=bars; i++) {
  23. 				this["bar"+i].y = this["bar"+i].y + this["bar"+i].height;
  24. 			}
  25. 			break;
  26. 		case "horizontal" :
  27. 			for (var j:Number = 1; j<=bars; j++) {
  28. 				this["bar"+j].x = this["bar"+j].x - this["bar"+j].width;
  29. 			}
  30. 			break;
  31. 	}
  32. 	if(graphLabels)	hideLabels();
  33. 	TweenMax.delayedCall(1,animateBars);
  34. }
  35.  
  36. // Test to see direction and animate bars
  37. function animateBars():void{
  38. 	switch (animationDirection) {
  39. 		case "vertical" :
  40. 			for (var i:Number = 1; i<=bars; i++) {
  41. 				TweenMax.to(this["bar"+i], 1, {y:this["bar"+i].y-this["bar"+i].height, delay:0.2*i, ease:Circ.easeOut});
  42. 			}
  43. 			break;
  44. 		case "horizontal" :
  45. 			for (var j:Number = 1; j<=bars; j++) {
  46. 				TweenMax.to(this["bar"+j], 1, {x:this["bar"+j].x+this["bar"+j].width, delay:0.2*j, ease:Circ.easeOut});
  47. 			}
  48. 			break;
  49. 	}
  50. }
  51.  
  52. function hideLabels(){
  53. 	for(var i:Number = 1; i<=bars ; i++)
  54. 	{
  55. 		this["barLabel"+i].alpha = 0;
  56. 	}
  57. 	TweenMax.delayedCall(2,animateLabels);
  58. }
  59.  
  60. function animateLabels(){
  61. 	for(var i:Number = 1; i<=bars ; i++)
  62. 	{
  63. 		TweenMax.to(this["barLabel"+i],0.5,{alpha:1, delay:0.2*i});
  64. 	}
  65. }
  66.  
  67. // ---------------------------
  68. // Bar Char graph animation
  69. // ---------------------------

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.