Tag Archives: navigation

Procedural Pattern - Navigation

Actionscript:
  1. var currentBtn:MovieClip;
  2.  
  3. var nav:Sprite = new Sprite();
  4. nav.x = nav.y = 20;
  5. addChild(nav);
  6.  
  7. createBtns();
  8.  
  9. nav.addEventListener(MouseEvent.CLICK, onClickBtn);
  10.  
  11. function createBtns():void{
  12.     for (var i:int = 0; i<10; i++){
  13.         var btn:MovieClip = new MovieClip();
  14.         with(btn.graphics) beginFill(0x666666), drawRect(-10,-10,20,20);
  15.         btn.x = i * (btn.width + 10);
  16.         btn.buttonMode = true;
  17.         btn.num = i;
  18.         btn.alpha = .5;
  19.         nav.addChild(btn);
  20.     }
  21. }
  22.  
  23. function onClickBtn(evt:MouseEvent):void {
  24.     //
  25.     // this is the important part
  26.     //
  27.     if (currentBtn){
  28.         currentBtn.scaleX = currentBtn.scaleY = 1;
  29.         currentBtn.alpha = .5;
  30.     }
  31.     currentBtn = MovieClip(evt.target);
  32.     currentBtn.scaleX = currentBtn.scaleY = 1.3;
  33.     currentBtn.alpha = 1;
  34.     trace("current button:", currentBtn.num);
  35.     //
  36. }

This code will create 10 boxes that represent buttons on a navigation. When you click a box it indicates that it is selected by scaling up and changing alpha. Simple enough...

The term Procedural Pattern is just a spin on the idea of Design Patterns. I've come up with lots of small patterns to solve simple recurring problems over the years. Most of these relate to things like drawing programs, ecards and games.

Posted in UI | Also tagged , | Leave a comment