In this exercise, you will use Spark effects to animate a user login panel when invalid information is submitted (see Figure 1). When users click the Login button in the form with the wrong authentication information, the Login panel will shake horizontally.

Play the Spark effect

In this section, you will handle the login functionality. If the user authenticates, then you will simply switch application views and display the main portal state. If the user fails authentication, then you will play the negative shake effect.

Within the function, use the content assist tool to generate a conditional statement that checks the usernameTextInput control for the string flex and the passwordTextInput control for the characters hero.

If the user property authenticates, you will switch the application state. Remember that you switch states using the currentState property of the component, which is in this case the main Application container.

Within the conditional statement, assign the currentState property a value of portalState.

You should see that the Login Panel container shakes more quickly now. Notice that if you continually press the Submit button, the Login Panel container moves to the right. This happens because you are executing the shake.play() function while the function is already playing.

Return to Flash Builder.

Locate the checkLogin() function in the Script block.

Modify the else statement to check if the animation is playing by adding an if statement to evaluate !shake.isPlaying. You will execute the shake.play() function only if the animation is not already running.

else
{
if(!shake.isPlaying)
{
shake.play();
}
}

Save the file and run the application.

Press the Submit button multiple times.

You should see that the Login Panel container shakes, but it does not move to the right.

In this exercise you used Spark effects to animate a user login panel when invalid information is submitted. In the next exercise will use effects to animate components as they transition between states of an application.