Como fazer deslizar o botão da barra lateral no Flex

Question

Eu sou bastante novo para Flex. Eu quero fazer um botão (ícone) na extrema direita no meio da página que exibe uma barra lateral deslizante com vários botões nele quando você passa o mouse sobre ele. Eu quero quando o foco do usuário fora da barra de botões que desliza para trás novamente.

Conceitualmente eu tenho o básico do que ao trabalho. O problema que estou tendo é que quando o usuário move o mouse entre os botões na barra lateral chuta na troca de slides estaduais e barra lateral de volta. Eu tentei usar diferentes tipos de recipientes e eu tenho os mesmos resultados.

algum conselho?

Obrigado,

Tam
Aqui está o código:

<?xml version="1.0" encoding="utf-8"?>
<s:VGroup
    xmlns:fx="http://ns.adobe.com/mxml/2009"
    xmlns:s="library://ns.adobe.com/flex/spark"
    xmlns:mx="library://ns.adobe.com/flex/halo"
    xmlns:vld ="com.lal.validators.*"
    xmlns:effect="com.lal.effects.*" 
    width="150"
    horizontalAlign="right"
    gap="0">

    <fx:Script>
        <![CDATA[
            import com.lal.model.LalModelLocator;
            var _model:LalModelLocator = LalModelLocator.getInstance();

        ]]>
    </fx:Script>
    <fx:Declarations>
        <mx:ArrayCollection id="someData"> 
        </mx:ArrayCollection>
    </fx:Declarations>
    <s:states>
        <s:State name="normal" />
        <s:State name="expanded" />
    </s:states>
    <fx:Style source="/styles.css"/>
    <s:transitions>
        <s:Transition fromState="normal" toState="expanded"  >
            <s:Sequence>
                <s:Wipe direction="left" duration="250" target="{buttonsGroup}"  />
            </s:Sequence>

        </s:Transition>
        <s:Transition fromState="expanded" toState="normal"  >
            <s:Sequence>            
                <s:Wipe direction="right" duration="250" target="{buttonsGroup}"  />
            </s:Sequence>   
        </s:Transition>
    </s:transitions>
    <s:Button skinClass="com.lal.skins.CalendarButtonSkin" id="calendarIconButton" 
              includeIn="normal"
              verticalCenter="0"
              mouseOver="currentState = 'expanded'"/>

    <s:Panel includeIn="expanded" id="buttonsGroup"           
              mouseOut="currentState = 'normal' "
              width="150" height="490" >
        <s:layout>
            <s:VerticalLayout gap="0" paddingRight="0" />
        </s:layout>
        <s:Button id="mondayButton" width="120" height="70" mouseOver="currentState = 'expanded'"/>
        <s:Button id="tuesdayButton" width="120" height="70" mouseOver="currentState = 'expanded'"/>
        <s:Button id="wednesdayButton" width="120" height="70" mouseOver="currentState = 'expanded'"/>
        <s:Button id="thursdayButton" width="120" height="70" mouseOver="currentState = 'expanded'"/>
        <s:Button id="fridayButton" width="120" height="70" mouseOver="currentState = 'expanded'"/>
        <s:Button id="saturdayButton" width="120" height="70" mouseOver="currentState = 'expanded'"/>
        <s:Button id="sundayButton" width="120" height="70" mouseOver="currentState = 'expanded'"/>
    </s:Panel>

</s:VGroup>  

Answer 1

Se bem entendi, você quer criar um tipo de comportamento menu pop-up animada. Você quer mostrar o painel quando o usuário passa o cursor sobre o botão original, e escondê-lo novamente quando o usuário move o mouse para longe do menu.

Seu problema é que você é imediatamente esconder o painel sobre mouseOut. Este não é o que você quer, porque você vai frequentemente recebem o evento mouseOut quando o usuário move o cursor entre os componentes dentro do painel.

Uma abordagem melhor é ter o evento mouseOut iniciar um temporizador que irá iniciar a transição após um atraso breve, e em seguida, cancelar este temporizador se receber mais um evento mouseOver nesse meio tempo.

Seria algo parecido com isto (não testado):

mouseOver="showMenu()"
mouseOut="hideAfterDelay()"

protected var t:Timer;

protected function hideAfterDelay ():void {
    killTimer();
    t = new Timer(500, 1);
    t.addEventListener(TimerEvent.TIMER_COMPLETE, onTimerComplete);
    t.start();
}

protected function onTimerComplete ():void {
    currentState = "normal";
    killTimer();
}

protected function killTimer ():void {
    if (t) {
        t.removeEventListener(TimerEvent.TIMER_COMPLETE, onTimerComplete);
        t.stop();
        t = null;
    }
}

protected function showMenu ():void {
    killTimer();
    currentState = "expanded";
}

Você precisa dos manipuladores do mouse em ambos o botão original eo menu. Talvez seja necessário fazer alguns ajustes, mas espero que isso mostra a idéia básica.