AS3 Simple Grid Layout


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

Simple grid layout technique in actionscript 3. Check out the demo and more details at http://adamcoulombe.info/lab/as3/gridlayout.html


Copy this code and paste it in your HTML
  1. // Demo for this example at http://adamcoulombe.info/lab/as3/gridlayout.html
  2.  
  3. //Download these classes at http://www.greensock.com/tweenlite/
  4. import com.greensock.TweenLite;
  5. import com.greensock.easing.*;
  6.  
  7.  
  8.  
  9.  
  10. var gridItems = new Array();
  11. var grid = new Sprite();
  12. grid.x = 65;
  13. grid.y = 50;
  14. addChild(grid);
  15.  
  16. for (var i:int = 0; i < 20; i++) {
  17. gridItems[i] = new MyBox();
  18. gridItems[i].x = (i % 5) * (gridItems[i].width );
  19. gridItems[i].y = int(i / 5) * (gridItems[i].height);
  20. gridItems[i].addEventListener(MouseEvent.MOUSE_OVER,gridItemOver);
  21. gridItems[i].addEventListener(MouseEvent.MOUSE_OUT,gridItemOut);
  22. grid.addChild(gridItems[i]);
  23. }
  24. function gridItemOver(e){
  25. grid.addChild(e.currentTarget);
  26. TweenLite.to(e.currentTarget,0.5,{scaleX:1.2, scaleY:1.2,ease:Elastic.easeOut});
  27. }
  28. function gridItemOut(e){
  29. TweenLite.to(e.currentTarget,0.5,{scaleX:1, scaleY:1,ease:Elastic.easeOut});
  30. }

URL: http://adamcoulombe.info/lab/as3/gridlayout.html

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.