Animating a bar chart


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



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.