Home Contact RSS

Rollover elastic bounce rezise

July 26, 2007 at 1:57 pm · 1,010 views · Filed under portfolio

1 Star2 Stars3 Stars4 Stars5 Stars (1 votes, average: 5 out of 5)
Loading ... Loading ...

Flash experiment that could be used for navigation. Rollover each area and watch them all resize themself to accomodate the growing box. It’s pretty fun to play with.

(Either JavaScript is not active or you are using an old version of Adobe Flash Player. Please install the newest Flash Player.)
I’m sure there is a way to simplify the code, but this worked so there was no need.
Actionscript:

  1. import mx.transitions.easing.*;
  2. import mx.transitions.Tween;
  3. var normWidth:Number = mc_1._width;
  4. mc1x = mc_1._x;
  5. mc2x = mc_2._x;
  6. mc3x = mc_3._x;
  7. mc4x = mc_4._x;
  8. mc_1.onRollOver = function ():Void  {
  9. //Tween( obj:Object, prop:String, func:Function, begin:Number, finish:Number, duration:Number, useSeconds:Boolean )
  10. //Double in size
  11. var mc1Width:Tween = new Tween (mc_1, "_width", Elastic.easeOut, normWidth, normWidth * 2, 1, true);
  12. mc_1.gotoAndPlay("over");
  13. //Shrink by 33% and move 66% along using width
  14. var mc2Width:Tween = new Tween (mc_2, "_width", Elastic.easeOut, normWidth, normWidth * 2 / 3, 1, true);
  15. var mc2X:Tween = new Tween (mc_2, "_x", Elastic.easeOut, mc2x, (mc2x) + (normWidth * 2 / 3), 1, true);
  16. //Shrink by 33% and move 33% along using width
  17. var mc3Width:Tween = new Tween (mc_3, "_width", Elastic.easeOut, normWidth, normWidth * 2 / 3, 1, true);
  18. var mc3X:Tween = new Tween (mc_3, "_x", Elastic.easeOut, mc3x, (mc3x) + (normWidth * 1 / 3), 1, true);
  19. //Shrink by 33%, no need to move as already in position
  20. var mc4Width:Tween = new Tween (mc_4, "_width", Elastic.easeOut, normWidth, normWidth * 2 / 3, 1, true);
  21. //trace("rollOver 1");
  22. };
  23. mc_1.onRollOut = function ():Void  {
  24. //Return to normal width
  25. var mc1Move:Tween = new Tween (this, "_width", Elastic.easeOut, normWidth * 2, normWidth, 1, true);
  26. mc_1.gotoAndStop("up");
  27. //Return to normal width and use mc_1 as basis for x
  28. var mc2Width:Tween = new Tween (mc_2, "_width", Elastic.easeOut, normWidth * 2 / 3, normWidth, 1, true);
  29. var mc2X:Tween = new Tween (mc_2, "_x", Elastic.easeOut, (mc2x) + (normWidth * 2 / 3), mc2x, 1, true);
  30. //var mc2X:Tween = new Tween (mc_2, "_x", Elastic.easeOut, mc_2._x, mc_1._x + (normWidth*2), 1, true);
  31. //Return to normal width and use mc_4 as basis for x
  32. var mc3Width:Tween = new Tween (mc_3, "_width", Elastic.easeOut, normWidth * 2 / 3, normWidth, 1, true);
  33. var mc3X:Tween = new Tween (mc_3, "_x", Elastic.easeOut, (mc3x) + (normWidth * 1 / 3), mc3x, 1, true);
  34. //Return to normal width
  35. var mc4Width:Tween = new Tween (mc_4, "_width", Elastic.easeOut, normWidth * 2 / 3, normWidth, 1, true);
  36. //trace("rollOut 1");
  37. };
  38. mc_2.onRollOver = function ():Void  {
  39. //Double in size and move left 33%
  40. var mc2Width:Tween = new Tween (mc_2, "_width", Elastic.easeOut, normWidth, normWidth * 2, 1, true);
  41. var mc2X:Tween = new Tween (mc_2, "_x", Elastic.easeOut, mc2x, (mc2x) + (normWidth * 2 / 3), 1, true);
  42. mc_2.gotoAndPlay("over");
  43. //Tween( obj:Object, prop:String, func:Function, begin:Number, finish:Number, duration:Number, useSeconds:Boolean )
  44. //shrink by 33% mc1
  45. var mc1Width:Tween = new Tween (mc_1, "_width", Elastic.easeOut, normWidth, normWidth * 2 / 3, 1, true);
  46. //var mc2X:Tween = new Tween (mc_2, "_x", Elastic.easeOut, mc_2._x, (mc_2._x) + (mc_2._width*2/3), 1, true);
  47. //Shrink by 33% and move 33% along using width
  48. var mc3Width:Tween = new Tween (mc_3, "_width", Elastic.easeOut, normWidth, normWidth * 2 / 3, 1, true);
  49. var mc3X:Tween = new Tween (mc_3, "_x", Elastic.easeOut, mc3x, (mc3x) + (normWidth * 1 / 3), 1, true);
  50. //Shrink by 33%, no need to move as already in position
  51. var mc4Width:Tween = new Tween (mc_4, "_width", Elastic.easeOut, normWidth, normWidth * 2 / 3, 1, true);
  52. //trace("rollOver 2");
  53. };
  54. mc_2.onRollOut = function ():Void  {
  55. //Return to normal width and position
  56. var mc2Move:Tween = new Tween (this, "_width", Elastic.easeOut, normWidth * 2, normWidth, 1, true);
  57. var mc2X:Tween = new Tween (mc_2, "_x", Elastic.easeOut, (mc2x) + (normWidth * 2 / 3), mc2x, 1, true);
  58. mc_2.gotoAndStop("up");
  59. //Return to normal width and use mc_1 as basis for x
  60. var mc1Width:Tween = new Tween (mc_1, "_width", Elastic.easeOut, normWidth * 2 / 3, normWidth, 1, true);
  61. //var mc2X:Tween = new Tween (mc_2, "_x", Elastic.easeOut, mc_2._x, mc_1._x + (normWidth*2), 1, true);
  62. //Return to normal width and use mc_4 as basis for x
  63. var mc3Width:Tween = new Tween (mc_3, "_width", Elastic.easeOut, normWidth * 2 / 3, normWidth, 1, true);
  64. var mc3X:Tween = new Tween (mc_3, "_x", Elastic.easeOut, (mc3x) + (normWidth * 1 / 3), mc3x, 1, true);
  65. //Return to normal width
  66. var mc4Width:Tween = new Tween (mc_4, "_width", Elastic.easeOut,normWidth * 2 / 3, normWidth, 1, true);
  67. //trace("rollOut 2");
  68. };
  69. mc_3.onRollOver = function ():Void  {
  70. //Double in size and move left 33%
  71. var mc3Width:Tween = new Tween (mc_3, "_width", Elastic.easeOut, normWidth, normWidth * 2, 1, true);
  72. var mc3X:Tween = new Tween (mc_3, "_x", Elastic.easeOut, mc3x, (mc3x) + (normWidth * 1 / 3), 1, true);
  73. mc_3.gotoAndPlay("over");
  74. //Tween( obj:Object, prop:String, func:Function, begin:Number, finish:Number, duration:Number, useSeconds:Boolean )
  75. //shrink by 33% mc1
  76. var mc1Width:Tween = new Tween (mc_1, "_width", Elastic.easeOut, normWidth, normWidth * 2 / 3, 1, true);
  77. //var mc2X:Tween = new Tween (mc_2, "_x", Elastic.easeOut, mc_2._x, (mc_2._x) + (mc_2._width*2/3), 1, true);
  78. //Shrink by 33% and move 33% along using width
  79. var mc2Width:Tween = new Tween (mc_2, "_width", Elastic.easeOut, normWidth, normWidth * 2 / 3, 1, true);
  80. var mc2X:Tween = new Tween (mc_2, "_x", Elastic.easeOut, mc2x, (mc2x) + (normWidth * -2 / 3), 1, true);
  81. //Shrink by 33%, no need to move as already in position
  82. var mc4Width:Tween = new Tween (mc_4, "_width", Elastic.easeOut, normWidth, normWidth * 2 / 3, 1, true);
  83. //trace("rollOver 3");
  84. };
  85. mc_3.onRollOut = function ():Void  {
  86. //Return to normal width and position
  87. var mc3Move:Tween = new Tween (this, "_width", Elastic.easeOut, normWidth * 2, normWidth, 1, true);
  88. var mc3X:Tween = new Tween (mc_3, "_x", Elastic.easeOut, (mc3x) + (normWidth * 1 / 3), mc3x, 1, true);
  89. mc_3.gotoAndStop("up");
  90. //Return to normal width and use mc_1 as basis for x
  91. var mc1Width:Tween = new Tween (mc_1, "_width", Elastic.easeOut, normWidth * 2 / 3, normWidth, 1, true);
  92. //var mc2X:Tween = new Tween (mc_2, "_x", Elastic.easeOut, mc_2._x, mc_1._x + (normWidth*2), 1, true);
  93. //Return to normal width and use mc_4 as basis for x
  94. var mc2Width:Tween = new Tween (mc_2, "_width", Elastic.easeOut, normWidth * 2 / 3, normWidth, 1, true);
  95. var mc2X:Tween = new Tween (mc_2, "_x", Elastic.easeOut, (mc2x) + (normWidth * -2 / 3), mc2x, 1, true);
  96. //Return to normal width
  97. var mc4Width:Tween = new Tween (mc_4, "_width", Elastic.easeOut, normWidth * 2 / 3, normWidth, 1, true);
  98. //trace("rollOut 3");
  99. };
  100. mc_4.onRollOver = function ():Void  {
  101. //shrink in size and move left 33%
  102. var mc3Width:Tween = new Tween (mc_3, "_width", Elastic.easeOut, normWidth, normWidth * 2/3, 1, true);
  103. var mc3X:Tween = new Tween (mc_3, "_x", Elastic.easeOut, mc3x, (mc3x) + (normWidth * - 3 / 3), 1, true);
  104. //Tween( obj:Object, prop:String, func:Function, begin:Number, finish:Number, duration:Number, useSeconds:Boolean )
  105. //shrink by 33% mc1
  106. var mc1Width:Tween = new Tween (mc_1, "_width", Elastic.easeOut, normWidth, normWidth * 2 / 3, 1, true);
  107. //var mc2X:Tween = new Tween (mc_2, "_x", Elastic.easeOut, mc_2._x, (mc_2._x) + (mc_2._width*2/3), 1, true);
  108. //Shrink by 33% and move 33% along using width
  109. var mc2Width:Tween = new Tween (mc_2, "_width", Elastic.easeOut, normWidth, normWidth * 2 / 3, 1, true);
  110. var mc2X:Tween = new Tween (mc_2, "_x", Elastic.easeOut, mc2x, (mc2x) + (normWidth * -2 / 3), 1, true);
  111. //double in size, no need to move as already in position
  112. var mc4Width:Tween = new Tween (mc_4, "_width", Elastic.easeOut, normWidth, normWidth * 2, 1, true);
  113. mc_4.gotoAndPlay("over");
  114. //trace("rollOver 4");
  115. };
  116. mc_4.onRollOut = function ():Void  {
  117. //Return to normal width and position
  118. var mc3Move:Tween = new Tween (mc_3, "_width", Elastic.easeOut, normWidth * 2/3, normWidth, 1, true);
  119. var mc3X:Tween = new Tween (mc_3, "_x", Elastic.easeOut, (mc3x) + (normWidth * - 3 / 3), mc3x, 1, true);
  120. //Return to normal width and use mc_1 as basis for x
  121. var mc1Width:Tween = new Tween (mc_1, "_width", Elastic.easeOut, normWidth * 2 / 3, normWidth, 1, true);
  122. //var mc2X:Tween = new Tween (mc_2, "_x", Elastic.easeOut, mc_2._x, mc_1._x + (normWidth*2), 1, true);
  123. //Return to normal width and use mc_4 as basis for x
  124. var mc2Width:Tween = new Tween (mc_2, "_width", Elastic.easeOut, normWidth * 2 / 3, normWidth, 1, true);
  125. var mc2X:Tween = new Tween (mc_2, "_x", Elastic.easeOut, (mc2x) + (normWidth * -2 / 3), mc2x, 1, true);
  126. //Return to normal width
  127. var mc4Width:Tween = new Tween (mc_4, "_width", Elastic.easeOut, normWidth * 2, normWidth, 1, true);
  128. mc_4.gotoAndStop("up");
  129. //trace("rollOut 4");
  130. };

Here is the source file for those who want.

Tags: , , , , , , , ,

Related posts

flashden banner

Leave a Comment