Exercise 4.9: Animating components with effects

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.

In this exercise, you will learn how to:

• Instantiate a Spark effect
• Play the Spark effect
• Create an animation sequence
• Speed up an animation

In this section you will start the Panel container's shaking effect by defining that the panel should move 20 pixels to the right.

1. Download the ex4_09_starter.zip file if you haven't done so already, and extract the ex4_09_starter.fxp file to your computer.
2. Open Flash Builder.
3. Import the ex4_09_starter.fxp file.
4. Open the ex4_09_starter.mxml file.
5. Review the code in the ex4_09_starter.mxml file.
6. Run the application.

   You should see the Employee Portal login screen shown in Figure 2.

7. Click the Submit button.

   You should see the Employee Portal main page shown in Figure 3.

8. Return to Flash Builder.
9. Locate the Declarations comment.
10. Below the comment, locate the Declarations block.

11. Within the Declarations block, create an instance of the Spark Move effect.

12. To the Move effect, add the id property with a value of shake.

13. To the Move effect, bind the target property value to the login Panel container and assign the xBy property a value of 20 pixels.

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.

1. Locate the Script comment.
2. Below the comment create a Script block.

3. Within the Script block, create a private function named checkLogin() that returns a void return type.

4. Within the function, use the content assist tool to generate a conditional statement that checks the username TextInput control for the string flex and the password TextInput 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.

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

6. Within the checkLogin() function, below the closing brace of the conditional statement, add an else statement.

7. Within the else statement, call the play() method of the shake effect instance.

8. Locate the Button control nested within the Login Panel container.
9. To the Button control, assign the checkLogin() function as the event handler for the click event.

10. Locate the TextInput control for the password nested within in the Login Panel container.

11. Add the displayAsPassword property and set the value to true.

    By adding this property, you will specify whether the text field is a password text field. If set to true, the input characters are hidden with asterisks.

12. Save the file.
13. Run the application.
14. Click the Submit button.

    You should see that the Login Panel container moves 20 pixels to the right towards the other Panel container (see Figure 4).

15. Click inside the Username text box and type flex.
16. Click inside the Password text box and type hero (see Figure 5).

17. Click the Submit button.

    You should see the application change to the Portal.

In this section you will use the Sequence effect to create a shaking motion when an invalid entry is submitted to the login Panel container.

1. Return to Flash Builder.
2. Within the Declarations comment, surround the Move effect with a composite Sequence effect.

3. Within the Declarations block, cut the id and target properties from the Move effect and paste them into the Sequence effect.

By placing the id and target on the Sequence composite effect, all of the effects nested within will be run at the same time.

4. Within the Sequence block, copy the Move effect and paste seven copies below the first.

5. To every other Move effect, change the xBy property value to -20.

6. Save the file and run the application.
7. Click the Submit button.

You should see the Login Panel container move back and forth in a shaking motion, but notice that the panel shakes rather slowly.

In this section you will use the duration property of the effect to speed up the rate at which the Login panel shakes. Doing this will give the animation a more emphatic gesture.

1. Return to Flash Builder.
2. Add the duration property with a value of 20 milliseconds to the Sequence effect instance.

3. Save the file and run the application.
4. Click the Submit button.

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.

5. Return to Flash Builder.
6. Locate the checkLogin() function in the Script block.
7. 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.

8. Save the file and run the application.
9. 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.