Exercise 5.8: Animating Button components

In this exercise you will learn how to use a skin to animate Button states (see Figure 1).

In this exercise, you will learn how to:

• Use skin states
• Animate skin transitions

In this section, you will use the provided ButtonWithStatesSkin skin to apply a skin to multiple Button control states.

1. Download the ex5_08_starter.zip file provided in the Exercise files section and extract the ex5_08_starter.fxp to your computer.
2. Open Flash Builder.
3. Import the ex5_08_starter.fxp file.
4. From the Package Explorer view, open the ex5_08_starter.mxml file.
5. Run the application.

   You should see the application shown in Figure 2.

6. Return to Flash Builder.
7. From the Package Explorer view, locate the skins package and open the ButtonWithStatesSkin.mxml file.
8. Below the Properties of the parent comment, locate the states block.

   Note the four State instances. The up, over, down, and disabled states are required for a Button component skin.

9. Locate the UI Components comment.
10. Between the comment and the Label control, add a Rect primitive block.

11. To the opening Rect tag, add the id property with a value of buttonColor.

12. Add the top, bottom, left and right properties all with a value of 0.

13. Add the topRightRadiusX property with a value of 3.

14. Within the Rect block, create a fill block.

15. Within the fill block, add a SolidColor instance.

16. To the nested SolidColor instance, add the color.up property with a value of 0x0D86B8(blue).

17. To the SolidColor graphic, add the color.over property with a value of 0x64BC48 (green).

18. To the SolidColor graphic, add the color.down property with a value of 0x555555 (dark grey).

19. Save the file.
20. From the Package Explorer view, components package, open the EmployeeDirectory.mxml file.
21. Below the UI components comment, locate the Button control.
22. To the Button control, add the skinClass property with a value of skins.ButtonWithStatesSkin as the skinClass.

23. Save the file and run the application.

    You should see the Submit Button control resembles the application's title skin (see Figure 3).

24. Mouse over the Submit Button control.

    You should see the Button control turns green, as shown in Figure 4.

25. Click and hold the Button control.

    You should see the dark grey down state of the Button control (see Figure 5).

In this section, you will create an animation that plays between Button control states.

1. Return to the ButtonWithStatesSkin.mxml file in Flash Builder.
2. Below the states tags, create a transitions block.

3. Within the transitions block, create a Transition block.

4. To the opening Transition tag, add the fromState property with a value of up  and the toState property with a value of over.

5. Within the Transition block, create a Resize effect.

6. To the Resize tag, bind the buttonColor Rect primitive as the target and assign 25 as the widthBy.

7. Save the file and run the application.
8. Mouse over the Submit Button control.

   You should see the Button control resizes, but reverts to its original dimensions, causing the final over state to appear as shown in Figure 6.

9. Return to the ButtonWithStatesSkin.mxml file in Flash Builder.
10. To the Rect primitive, assign 90 as the over State width.

11. Save the file and run the application.
12. Mouse over the Submit Button control.

    You should see the Button control resize and remain resized in the over state (see Figure 7).

13. Move the mouse away from the Button control.

    You should see there is no animation to resize the button to the up State width.

14. Click the Button control.

    You should see the Button control does return to the original width, but animates to a larger size first.

15. Return to the ButtonWithStatesSkin.mxml file in Flash Builder.
16. To the opening Transition tag add the autoReverse property and set the value to true. This will reverse the button's animation when you mouse away from the Button control. The alternative is creating another Transition block with the fromState and toState values reversed and the widthBy value for the Resize effect set to a negative number.
    

17. Save the file and run the application.
18. Mouse over and then mouse away from the Submit button.

    You should see that the Button control resizes appropriately when you mouse away. However, notice that the down state of the button is not the same size as the over state.

19. Return to Flash Builder.

20. Locate the Rect block.
21. To the Rect primitive, add width.down property with a value of 90.

22. Save the file and run the application.
23. Mouse over the Submit button to trigger the transition.
24. Click the Submit button.

    You should see that the width of the Button control is the same for the over and down states (see Figure 8).

25. Mouse away from the Submit button.

You should see the Submit button return to its original size.

In this exercise you learned how to use a skin to animate Button states.