Disable additional mouse clicks while effects triggered by mouse effects are playing.

Note, the attached zip is the archived Flex 3 project, and includes the images required for this post.

1) Compile the code below.

2) Execute the program.

3) Click the  "video" button.

4) Immediately click other buttons rapidly and the buttons end up looking poorly.

5) Uncomment the following lines in the code, recompile and execute.

//private var buttonsMoved:uint = 0;

//if(buttonsMoved==0){         

//buttonsMoved = xPos.length - (xPos.getItemIndex(cb) + 1);

//}

//buttonsMoved--;
 

6) Repeat steps 1 - 4 and the buttons do not end up looking poorly, as button clicks after the initial button click are disabled until the effects have finished.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml"
width="100%"
  paddingBottom="5" paddingLeft="5" paddingRight="5" paddingTop="5"
  creationComplete="init();">
  <mx:Script>
    <![CDATA[
      import mx.events.EffectEvent;
      import mx.effects.Sequence;
      import mx.effects.Move;
      import mx.states.Transition;
      import mx.collections.ArrayCollection;
      import mx.controls.Alert;
      [Embed(source='videoBtnUpSmall.png')]
      [Bindable] private var videoBtnUpSmallSkin:Class;
      [Embed(source='videoBtnOverSmall.png')]
      [Bindable] private var videoBtnOverSmallSkin:Class;
      [Embed(source='videoBtnDownSmall.png')]
      [Bindable] private var videoBtnDownSmallSkin:Class;
      [Embed(source='videoBtnDisabledSmall.png')]
      [Bindable] private var videoBtnDisabledSmallSkin:Class;
      [Embed(source='audioBtnUpSmall.png')]
      [Bindable] private var audioBtnUpSmallSkin:Class;
      [Embed(source='audioBtnOverSmall.png')]
      [Bindable] private var audioBtnOverSmallSkin:Class;
      [Embed(source='audioBtnDownSmall.png')]
      [Bindable] private var audioBtnDownSmallSkin:Class;
      [Embed(source='audioBtnDisabledSmall.png')]
      [Bindable] private var audioBtnDisabledSmallSkin:Class;
      [Embed(source='imagesBtnUpSmall.png')]
      [Bindable] private var imagesBtnUpSmallSkin:Class;
      [Embed(source='imagesBtnOverSmall.png')]
      [Bindable] private var imagesBtnOverSmallSkin:Class;
      [Embed(source='imagesBtnDownSmall.png')]
      [Bindable] private var imagesBtnDownSmallSkin:Class;
      [Embed(source='imagesBtnDisabledSmall.png')]
      [Bindable] private var imagesBtnDisabledSmallSkin:Class;
      [Embed(source='documentsBtnUpSmall.png')]
      [Bindable] private var docsBtnUpSmallSkin:Class;
      [Embed(source='documentsBtnOverSmall.png')]
      [Bindable] private var docsBtnOverSmallSkin:Class;
      [Embed(source='documentsBtnDownSmall.png')]
      [Bindable] private var docsBtnDownSmallSkin:Class;
      [Embed(source='documentsBtnDisabledSmall.png')]
      [Bindable] private var docsBtnDisabledSmallSkin:Class;
      [Embed(source='homeBtnUpSmall.png')]
      [Bindable] private var homeBtnUpSmallSkin:Class;
      [Embed(source='homeBtnOverSmall.png')]
      [Bindable] private var homeBtnOverSmallSkin:Class;
      [Embed(source='homeBtnDownSmall.png')]
      [Bindable] private var homeBtnDownSmallSkin:Class;
      [Embed(source='homeBtnDisabledSmall.png')]
      [Bindable] private var homeBtnDisabledSmallSkin:Class;
     
      [Embed(source='videoBtnUpMedium.png')]
      [Bindable] private var videoBtnUpMediumSkin:Class;
      [Embed(source='videoBtnOverMedium.png')]
      [Bindable] private var videoBtnOverMediumSkin:Class;
      [Embed(source='videoBtnDownMedium.png')]
      [Bindable] private var videoBtnDownMediumSkin:Class;
      [Embed(source='videoBtnDisabledMedium.png')]
      [Bindable] private var videoBtnDisabledMediumSkin:Class;
      [Embed(source='audioBtnUpMedium.png')]
      [Bindable] private var audioBtnUpMediumSkin:Class;
      [Embed(source='audioBtnOverMedium.png')]
      [Bindable] private var audioBtnOverMediumSkin:Class;
      [Embed(source='audioBtnDownMedium.png')]
      [Bindable] private var audioBtnDownMediumSkin:Class;
      [Embed(source='audioBtnDisabledMedium.png')]
      [Bindable] private var audioBtnDisabledMediumSkin:Class;
      [Embed(source='imagesBtnUpMedium.png')]
      [Bindable] private var imagesBtnUpMediumSkin:Class;
      [Embed(source='imagesBtnOverMedium.png')]
      [Bindable] private var imagesBtnOverMediumSkin:Class;
      [Embed(source='imagesBtnDownMedium.png')]
      [Bindable] private var imagesBtnDownMediumSkin:Class;
      [Embed(source='imagesBtnDisabledMedium.png')]
      [Bindable] private var imagesBtnDisabledMediumSkin:Class;
      [Embed(source='documentsBtnUpMedium.png')]
      [Bindable] private var docsBtnUpMediumSkin:Class;
      [Embed(source='documentsBtnOverMedium.png')]
      [Bindable] private var docsBtnOverMediumSkin:Class;
      [Embed(source='documentsBtnDownMedium.png')]
      [Bindable] private var docsBtnDownMediumSkin:Class;
      [Embed(source='documentsBtnDisabledMedium.png')]
      [Bindable] private var docsBtnDisabledMediumSkin:Class;
      [Embed(source='homeBtnUpMedium.png')]
      [Bindable] private var homeBtnUpMediumSkin:Class;
      [Embed(source='homeBtnOverMedium.png')]
      [Bindable] private var homeBtnOverMediumSkin:Class;
      [Embed(source='homeBtnDownMedium.png')]
      [Bindable] private var homeBtnDownMediumSkin:Class;
      [Embed(source='homeBtnDisabledMedium.png')]
      [Bindable] private var homeBtnDisabledMediumSkin:Class;
     
      [Bindable] private var xCoords:ArrayCollection = new
ArrayCollection([0, 120, 240, 360, 520]);
      private var xPos:ArrayCollection;
      private var trans1:Transition = new Transition();
      private var trans2:Transition = new Transition();
      private var seq1:Sequence = new Sequence();
      private var seq2:Sequence = new Sequence();
      private var move1_1:Move = new Move();
      private var move2_1:Move = new Move();
      private var move1_2:Move = new Move();
      private var move2_2:Move = new Move();
      private var move1_3:Move = new Move();
      private var move2_3:Move = new Move();
      //private var buttonsMoved:uint = 0;
     
      private function init():void{
        xPos = new ArrayCollection([videoBtn, audioBtn, imagesBtn,
docsBtn, homeBtn]);
        trans1.fromState = trans1.toState = trans2.fromState =
trans2.toState = "*";
        move1_1.duration = move1_2.duration = move1_3.duration =
move2_1.duration = move2_2.duration = move2_3.duration = 300;
        seq1.children = [move1_1, move1_2, move1_3];
        seq2.children = [move2_1, move2_2, move2_3];
        seq2.addEventListener(EffectEvent.EFFECT_END,
incrementCounter);
      }
     
      private function xc(x:int):Number{
        if(x!=-1){
          return Number(xCoords.getItemAt(x));
        }else{
          return Number(xCoords.getItemAt(xCoords.length-1));      

        }
      }
     
      private function changeState(evt:MouseEvent):void{
        //if(buttonsMoved==0){         
          var cb:Button = Button(evt.currentTarget);
          //buttonsMoved = xPos.length - (xPos.getItemIndex(cb) +
1);
          move1_1.yTo = 50;
          move1_2.xTo = xc(-1);
          move1_3.yTo = 0;
          currentState = cb.id.replace("Btn", "");           
          seq1.play([cb]);
          for(var
a:uint=xPos.getItemIndex(cb)+1;a<xPos.length;a++){
            move2_2.xTo = xc(a-1);
            seq2.play([xPos.getItemAt(a)]);               
          }
          var tempBtn:Button =
Button(xPos.removeItemAt(xPos.getItemIndex(cb)));
          xPos.addItem(tempBtn);       
        //}
      }
     
      private function incrementCounter(evt:EffectEvent):void{
        //buttonsMoved--;
      }
    ]]>
  </mx:Script>
  <mx:states>
    <mx:State name="video">
      <mx:SetStyle target="{videoBtn}" name="upSkin"
value="{videoBtnUpMediumSkin}"/>
      <mx:SetStyle target="{videoBtn}" name="overSkin"
value="{videoBtnOverMediumSkin}"/>
      <mx:SetStyle target="{videoBtn}" name="downSkin"
value="{videoBtnDownMediumSkin}"/>
      <mx:SetStyle target="{videoBtn}" name="disabledSkin"
value="{videoBtnDisabledMediumSkin}"/>
      <mx:SetStyle target="{homeBtn}" name="upSkin"
value="{homeBtnUpSmallSkin}"/>
      <mx:SetStyle target="{homeBtn}" name="overSkin"
value="{homeBtnOverSmallSkin}"/>
      <mx:SetStyle target="{homeBtn}" name="downSkin"
value="{homeBtnDownSmallSkin}"/>
      <mx:SetStyle target="{homeBtn}" name="disabledSkin"
value="{homeBtnDisabledSmallSkin}"/>
    </mx:State>
    <mx:State name="audio">
      <mx:SetStyle target="{audioBtn}" name="upSkin"
value="{audioBtnUpMediumSkin}"/>
      <mx:SetStyle target="{audioBtn}" name="overSkin"
value="{audioBtnOverMediumSkin}"/>
      <mx:SetStyle target="{audioBtn}" name="downSkin"
value="{audioBtnDownMediumSkin}"/>
      <mx:SetStyle target="{audioBtn}" name="disabledSkin"
value="{audioBtnDisabledMediumSkin}"/>
      <mx:SetStyle target="{homeBtn}" name="upSkin"
value="{homeBtnUpSmallSkin}"/>
      <mx:SetStyle target="{homeBtn}" name="overSkin"
value="{homeBtnOverSmallSkin}"/>
      <mx:SetStyle target="{homeBtn}" name="downSkin"
value="{homeBtnDownSmallSkin}"/>
      <mx:SetStyle target="{homeBtn}" name="disabledSkin"
value="{homeBtnDisabledSmallSkin}"/>
    </mx:State>
    <mx:State name="images">
      <mx:SetStyle target="{imagesBtn}" name="upSkin"
value="{imagesBtnUpMediumSkin}"/>
      <mx:SetStyle target="{imagesBtn}" name="overSkin"
value="{imagesBtnOverMediumSkin}"/>
      <mx:SetStyle target="{imagesBtn}" name="downSkin"
value="{imagesBtnDownMediumSkin}"/>
      <mx:SetStyle target="{imagesBtn}" name="disabledSkin"
value="{imagesBtnDisabledMediumSkin}"/>
      <mx:SetStyle target="{homeBtn}" name="upSkin"
value="{homeBtnUpSmallSkin}"/>
      <mx:SetStyle target="{homeBtn}" name="overSkin"
value="{homeBtnOverSmallSkin}"/>
      <mx:SetStyle target="{homeBtn}" name="downSkin"
value="{homeBtnDownSmallSkin}"/>
      <mx:SetStyle target="{homeBtn}" name="disabledSkin"
value="{homeBtnDisabledSmallSkin}"/>
    </mx:State>
    <mx:State name="docs">
      <mx:SetStyle target="{docsBtn}" name="upSkin"
value="{docsBtnUpMediumSkin}"/>
      <mx:SetStyle target="{docsBtn}" name="overSkin"
value="{docsBtnOverMediumSkin}"/>
      <mx:SetStyle target="{docsBtn}" name="downSkin"
value="{docsBtnDownMediumSkin}"/>
      <mx:SetStyle target="{docsBtn}" name="disabledSkin"
value="{docsBtnDisabledMediumSkin}"/>
      <mx:SetStyle target="{homeBtn}" name="upSkin"
value="{homeBtnUpSmallSkin}"/>
      <mx:SetStyle target="{homeBtn}" name="overSkin"
value="{homeBtnOverSmallSkin}"/>
      <mx:SetStyle target="{homeBtn}" name="downSkin"
value="{homeBtnDownSmallSkin}"/>
      <mx:SetStyle target="{homeBtn}" name="disabledSkin"
value="{homeBtnDisabledSmallSkin}"/>
    </mx:State>
    <mx:State name="home">
      <mx:SetStyle target="{homeBtn}" name="upSkin"
value="{homeBtnUpMediumSkin}"/>
      <mx:SetStyle target="{homeBtn}" name="overSkin"
value="{homeBtnOverMediumSkin}"/>
      <mx:SetStyle target="{homeBtn}" name="downSkin"
value="{homeBtnDownMediumSkin}"/>
      <mx:SetStyle target="{homeBtn}" name="disabledSkin"
value="{homeBtnDisabledMediumSkin}"/>
    </mx:State>
  </mx:states>
  <mx:Canvas width="100%">
    <mx:Button id="videoBtn" upSkin="{videoBtnUpSmallSkin}"
overSkin="{videoBtnOverSmallSkin}"
      downSkin="{videoBtnDownSmallSkin}"
disabledSkin="{videoBtnDisabledSmallSkin}"
      focusThickness="0" x="{xc(0)}"
click="changeState(event);"/>
    <mx:Button id="audioBtn" upSkin="{audioBtnUpSmallSkin}"
overSkin="{audioBtnOverSmallSkin}"
      downSkin="{audioBtnDownSmallSkin}"
disabledSkin="{audioBtnDisabledSmallSkin}"
      focusThickness="0" x="{xc(1)}"
click="changeState(event);"/>
    <mx:Button id="imagesBtn" upSkin="{imagesBtnUpSmallSkin}"
overSkin="{imagesBtnOverSmallSkin}"
      downSkin="{imagesBtnDownSmallSkin}"
disabledSkin="{imagesBtnDisabledSmallSkin}"
      focusThickness="0" x="{xc(2)}"
click="changeState(event);"/>
    <mx:Button id="docsBtn" upSkin="{docsBtnUpSmallSkin}"
overSkin="{docsBtnOverSmallSkin}"
      downSkin="{docsBtnDownSmallSkin}"
disabledSkin="{docsBtnDisabledSmallSkin}"
      focusThickness="0" x="{xc(3)}"
click="changeState(event);"/> 
    <mx:Button id="homeBtn" upSkin="{homeBtnUpMediumSkin}"
overSkin="{homeBtnOverMediumSkin}"
      downSkin="{homeBtnDownMediumSkin}"
disabledSkin="{homeBtnDisabledMediumSkin}"
      focusThickness="0" x="{xc(4)}"
click="changeState(event);"/>
  </mx:Canvas>
</mx:Application>