Pages

Wednesday, October 17, 2012

AS3: Custom Tab-bar Controller


Flash movieclip architecture:
<movieclip name="tab_mc">
 <frameset>
  <frame name="normal">
   <textfield name="caption" framespan="4"></textfield>
   <graphics color="#333333"></graphics>
  </frame>
  <frame name="over">
   <graphics color="#666666"></graphics>
  </frame>
  <frame name="down">
   <graphics color="#999999"></graphics>
  </frame>
  <frame name="disabled">
   <graphics color="#333333" alpha="0.7"></graphics>
  </frame>  
 </frameset>
</movieclip>

<movieclip name="tabbar_mc">
 <frameset>
  <frame>
   <movieclip name="tab1" instanceof="{tab_mc}"></movieclip>
   <movieclip name="tab2" instanceof="{tab_mc}"></movieclip>
   <movieclip name="tab3" instanceof="{tab_mc}"></movieclip>
  </frame>
 </frameset>
</movieclip>

Class source-code:
package engine.ui 
{
 import flash.display.MovieClip;
 import flash.events.MouseEvent;
 import flash.text.TextField;
 /**
  * ...
  * @author Abhishek Kumar
  */
 public class CTabBar 
 {
  private var Container:MovieClip;
  
  private var proceed:Function;
  
  private var activeTab:String;
  
  public function CTabBar(mc:MovieClip) 
  {
   Container = mc;
   
   defaultState();
  }
  
  private function defaultState():void
  {
   for (var o:* in Container)
   {
    Container[o].gotoAndStop('normal');
    Container[o].buttonMode = true;
    Container[o].mouseChildren = false;
   }
   
   activeTab = Container.tab1.name;
   Container.tab1.gotoAndStop('down');
  }
  
  public function setLabels(list:Array):void
  {
   for (var i:int = 0, len:int = Container.numChildren; i < len; i++)
    TextField(Container['tab' + Number(i + 1)].caption).text = list[i];
  }
  
  public function getActiveTabIndex():int
  {
   return  Number(activeTab.substr(activeTab.length - 1));
  }
  
  public function attachListeners(callback:Function):void
  {
   proceed = callback;
   
   for (var o:* in Container)
   {
    Container[o].addEventListener(MouseEvent.MOUSE_UP, onClick_Tab);
    attachEffects(Container[o]);
   }
  }  
  
  private function onClick_Tab(me:MouseEvent):void
  {
   activeTab = MovieClip(me.currentTarget).name;
   
   for (var o:* in Container)
   {
    if(Container[o].name != activeTab)
     Container[o].gotoAndStop('normal');
   }
   
   var tabIndex:int = getActiveTabIndex();
   proceed(tabIndex);
  }
  
  private function attachEffects(mc:MovieClip):void
  {
   mc.addEventListener(MouseEvent.MOUSE_OVER, onOver_Container);
   mc.addEventListener(MouseEvent.MOUSE_OUT, onOut_Container);
   mc.addEventListener(MouseEvent.MOUSE_DOWN, onDown_Container);
  }
  
  private function detachEffects(mc:MovieClip):void
  {
   mc.removeEventListener(MouseEvent.MOUSE_OVER, onOver_Container);
   mc.removeEventListener(MouseEvent.MOUSE_OUT, onOut_Container);
   mc.removeEventListener(MouseEvent.MOUSE_DOWN, onDown_Container);
  }
  
  private function onOver_Container(me:MouseEvent):void
  {
   MovieClip(me.currentTarget).gotoAndStop('over');
  }
  
  private function onOut_Container(me:MouseEvent):void
  {
   if(activeTab == MovieClip(me.currentTarget).name)
    MovieClip(me.currentTarget).gotoAndStop('down');
   else
    MovieClip(me.currentTarget).gotoAndStop('normal');
  }
  
  private function onDown_Container(me:MouseEvent):void
  {
   MovieClip(me.currentTarget).gotoAndStop('down');
  }
  
 }

}

No comments:

Post a Comment