Move is the right solution for this effect

Since memory is a concern on mobile devices, it's better to  create / destroy 
the menu "on demand" when it's shown/hidden.
This is simply done with states and the effects can be wrapped in state 
transitions.

The code below is a simple example, entirely in mxml   

(view.ContentView is a simple s:View with some content)

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009";
               xmlns:s="library://ns.adobe.com/flex/spark"
        currentState="normal"
        >
    <s:states>
        <s:State name="normal" />
        <s:State name="withMenu"/>
    </s:states>

    <s:List id="menu"  width="150" height="100%" includeIn="withMenu">
        <s:ArrayList>
            <fx:String>Home</fx:String>
            <fx:String>About</fx:String>
        </s:ArrayList>
    </s:List>

    <s:ViewNavigator id="mainNavigator" firstView="views.ContentView"  
height="100%" right="0" left.normal="0" left.withMenu="150">
        <s:navigationContent>
            <s:Button id="menuButton" label="Menu" 
click="menuButton_clickHandler(event)"/>
        </s:navigationContent>
    </s:ViewNavigator>

    <s:transitions>
        <s:Transition fromState="normal" toState="withMenu" autoReverse="true"  
>
            <s:Parallel>
                <s:Move xFrom="0" xTo="150" target="{mainNavigator}" 
duration="400"/>
                <s:Fade target="{menu}" duration="400"/>
            </s:Parallel>
         </s:Transition>
    </s:transitions>

    <fx:Script><![CDATA[
        private function menuButton_clickHandler(event: MouseEvent): void {
            // toggle between states
            currentState = currentState == "normal" ? "withMenu" : "normal";
        }
        ]]></fx:Script>

</s:Application> 


-----Message d'origine-----
De : Massimo Perani [mailto:[email protected]] 
Envoyé : mercredi 8 janvier 2014 17:47
À : [email protected]
Objet : Re: Mobile Facebook-like slide menu

Hi,
I don't think if this is the best solution, but you can use spark.effects.Move 
to move horizontally a UIComponent from left to right when click the Menu 
button, so the list below (or other UIComponent) becomes visible...

By
Massimo.


2014/1/8 Cadu de Castro Alves <[email protected]>

> You´re right, Maurice. I'd like the same effect that happens in the 
> link I've attached before.
>
> Att,
>
> Cadu de Castro Alves
> Geekpreneur & Web Developer
>
> Mobile: +55 21 9 9574-0115
> Twitter: @castroalves
> Facebook: cadudecastroalves
>
>
> On Wed, Jan 8, 2014 at 2:15 PM, Maurice Amsellem < 
> [email protected]> wrote:
>
> > I think castroalves is talking about the slider menu show/hide with
> effect
> > .
> >
> > Maurice
> >
> >
> > -----Message d'origine-----
> > De : Lee Burrows [mailto:[email protected]]
> > Envoyé : mercredi 8 janvier 2014 17:06 À : [email protected] 
> > Objet : Re: Mobile Facebook-like slide menu
> >
> > Example looks very similar to
> > http://flex.apache.org/asdoc/spark/components/TabbedViewNavigator.ht
> > ml
> >
> > On 08/01/2014 14:35, castroalves wrote:
> > > Hi people!
> > >
> > > Do you know to implement an slider menu like this using Views:
> > > http://www.aldomatic.com/jqm/fb-menu-style/
> > >
> > > Best wishes!
> > >
> > > Cadu de Castro Alves
> > >
> > >
> > >
> > > --
> > > View this message in context:
> > > http://apache-flex-users.2333346.n4.nabble.com/Mobile-Facebook-lik
> > > e-sl ide-menu-tp4393.html Sent from the Apache Flex Users mailing 
> > > list archive at Nabble.com.
> > >
> >
> >
> > --
> > Lee Burrows
> > ActionScripter
> >
> >
>



--
Massimo Perani

Reply via email to