Simple Cover flow effect


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



Copy this code and paste it in your HTML
  1. package {
  2. import flash.display.Sprite;
  3. import flash.display.StageAlign;
  4. import flash.display.StageScaleMode;
  5. import flash.events.MouseEvent;
  6.  
  7. import gs.TweenLite;
  8. import gs.plugins.SetSizePlugin;
  9. import gs.plugins.TweenPlugin;
  10.  
  11. public class Main extends Sprite
  12. {
  13. private var m_body:Sprite;
  14.  
  15. public function Main()
  16. {
  17. stage.scaleMode = StageScaleMode.NO_SCALE;
  18. stage.align = StageAlign.TOP_LEFT;
  19.  
  20. TweenPlugin.activate([SetSizePlugin]);
  21.  
  22. m_body = new Sprite();
  23.  
  24. for( var i:int; i<16;i++)
  25. {
  26. m_body.addChild( new Item() ).x = i * Item.WIDTH;
  27. }
  28.  
  29. stage.addEventListener(MouseEvent.MOUSE_MOVE,mouseMoveHandler);
  30. addChild(m_body);
  31. }
  32.  
  33. private function set scroll(a_val:Number):void
  34. {
  35. var index:int = Math.round((m_body.numChildren-1)*a_val);
  36. var item:Item;
  37. var speed:Number = .15;
  38. for ( var i:int; i<m_body.numChildren;i++)
  39. {
  40. item = m_body.getChildAt(i) as Item;
  41. TweenLite.killTweensOf(item);
  42.  
  43. item.visible = true;
  44.  
  45. switch(i)
  46. {
  47. case index:
  48. TweenLite.to(item,speed,{x:i*Item.WIDTH,setSize:{width:Item.WIDTH*.8, height:Item.HEIGHT*.8}});
  49. break;
  50.  
  51. case index -1:
  52. TweenLite.to(item,speed,{x:i*Item.WIDTH+Item.WIDTH*.2*.5 + Item.WIDTH*.37*.5,setSize:{width:Item.WIDTH*.63,height:Item.HEIGHT*.63}});
  53. break;
  54.  
  55. case index -2:
  56. TweenLite.to(item,speed,{x:i*Item.WIDTH+Item.WIDTH*.2*.5 + Item.WIDTH*.37 + Item.WIDTH*.5*.5,setSize:{width:Item.WIDTH*.5, height:Item.HEIGHT*.5}});
  57. break;
  58.  
  59. case index -3:
  60. TweenLite.to(item,speed,{x:i*Item.WIDTH+Item.WIDTH*.2*.5 + Item.WIDTH*.37 + Item.WIDTH*.5 + Item.WIDTH*.61*.5 ,setSize:{width:Item.WIDTH*.39, height:Item.HEIGHT*.39}});
  61. break;
  62.  
  63. case index -4:
  64. TweenLite.to(item,speed,{x:i*Item.WIDTH+Item.WIDTH*.2*.5 + Item.WIDTH*.37 + Item.WIDTH*.5 + Item.WIDTH*.61 + Item.WIDTH*.75*.5,setSize:{width:Item.WIDTH*.25, height:Item.HEIGHT*.25}});
  65. break;
  66.  
  67.  
  68. case index +1:
  69. TweenLite.to(item,speed,{x:i*Item.WIDTH-Item.WIDTH*.2*.5 - Item.WIDTH*.37*.5,setSize:{width:Item.WIDTH*.63,height:Item.HEIGHT*.63}});
  70. break;
  71.  
  72. case index +2:
  73. TweenLite.to(item,speed,{x:i*Item.WIDTH-Item.WIDTH*.2*.5 - Item.WIDTH*.37 - Item.WIDTH*.5*.5,setSize:{width:Item.WIDTH*.5, height:Item.HEIGHT*.5}});
  74. break;
  75.  
  76. case index +3:
  77. TweenLite.to(item,speed,{x:i*Item.WIDTH-Item.WIDTH*.2*.5 - Item.WIDTH*.37 - Item.WIDTH*.5 - Item.WIDTH*.61*.5 ,setSize:{width:Item.WIDTH*.39, height:Item.HEIGHT*.39}});
  78. break;
  79.  
  80. case index +4:
  81. TweenLite.to(item,speed,{x:i*Item.WIDTH-Item.WIDTH*.2*.5 - Item.WIDTH*.37 - Item.WIDTH*.5 - Item.WIDTH*.61 - Item.WIDTH*.75*.5,setSize:{width:Item.WIDTH*.25, height:Item.HEIGHT*.25}});
  82. break;
  83.  
  84. default:
  85. item.visible = false;
  86. // TweenLite.to(item,speed,{x:i*Item.WIDTH,setSize:{width:Item.WIDTH, height:Item.HEIGHT}});
  87. //TweenLite.to(item,speed,{x:i*100,setSize:{width:50, height:50}});
  88. break;
  89. }
  90. }
  91.  
  92. TweenLite.to(m_body,speed,{x:(stage.stageWidth*.5)-Item.WIDTH*index});
  93.  
  94. }
  95.  
  96.  
  97.  
  98. private function mouseMoveHandler(e:MouseEvent):void
  99. {
  100. scroll = e.stageX/stage.stageWidth;
  101. }
  102.  
  103. }
  104. }
  105.  
  106. import as3ui.UIObject;
  107. import as3ui.events.UIEvent;
  108. import flash.events.Event;
  109. import flash.display.Sprite;
  110. internal class Item extends Sprite
  111. {
  112. public static const WIDTH:Number = 140;
  113. public static const HEIGHT:Number = 257;
  114.  
  115. private var m_color:uint;
  116. public function Item()
  117. {
  118. m_color = uint( Math.random()*0x1000000);
  119. setSize(WIDTH,HEIGHT);
  120. }
  121.  
  122. public function setSize(a_width:Number,a_height:Number):void
  123. {
  124. with(graphics)
  125. {
  126. clear();
  127. beginFill(0xFFF000,.1);
  128. drawRect(-a_width*.5,0,a_width,a_height);
  129. endFill();
  130. beginFill(m_color,.1);
  131. drawRect(-a_width*.5+1,1,a_width-2,a_height-2);
  132. endFill();
  133. }
  134. }
  135.  
  136. }

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.