Creating a shaking effect in Flex 4

In Flex 4 is really easy to create a shaking effect. Let's suppose that you had a Login Panel with id "login", as in the following code:

    <s:Panel id="login"
        title="Login"
        includeIn="loginState"
        x="24" y="112"
        width="250" height="168">
       
        <s:Label x="27" y="21"
            text="Username:"/>
       
        <s:TextInput id="username"
            x="96" y="15"/>
       
        <s:Label x="29" y="51"
            text="Password:"/>
       
        <s:TextInput id="password"
            x="96" y="45"/>
       
        <s:Button x="96" y="75"
            label="Login"
            click="button1_clickHandler(event)"/>
       
    </s:Panel>

 

Then a shaking effect could be created when the user enters the wrong authentication credentials. Here is the shaking effect declaration:

        <s:Sequence id="shake"
                    target="{login}"
                    duration="30">
            <s:Move xBy="20" />           
            <s:Move xBy="-20" />           
            <s:Move xBy="20" />           
            <s:Move xBy="-20" />           
            <s:Move xBy="20" />           
            <s:Move xBy="-20" />           
            <s:Move xBy="20" />           
            <s:Move xBy="-20" />           
        </s:Sequence>

It is basically a sequence of consecutive effects which move the x axis of your panel forwards and backwards of 20 pixels, with a duration of each effect of 30 ms. The resulting effect is the Panel shaking. To play the effect, in the Login button handler function one could write:

protected function button1_clickHandler(event:MouseEvent):void
            {
                if (username.text == "flex4" && password.text == "gumbo") {
                    this.currentState = "portalState";   
                } else {
                    shake.play();
                }

}

Of course this is not production code, since authentication would beed to happen by proper means, but it gives you an idea.

Happy technology to everyone!