In this exercise, you will use skin states to skin a Button control, and then apply a state transition to the Button control to animate it (see Figure 1).

Figure 1. You will skin and animate the button in this application.

In this exercise, you will learn how to:

• Use skin states
• Use skin state transitions

Requirements

In order to complete this tutorial, you need the following software and files:

Flash Builder 4

• Download
• Learn more

Sample files:

• ex3_06_starter.zip (ZIP, 40 KB)
• ex3_06_solution.zip (ZIP, 40 KB)

Prerequisite knowledge

• Exercise 1.1: Creating and skinning an application
• Exercise 1.3: Creating and using an MXML class
• Exercise 3.1: Using text controls
• Exercise 3.2: Using text layout features
• Exercise 3.3: Defining selector styles
• Exercise 3.4: Using advanced CSS selectors
• Exercise 3.5: Creating and applying states

Using skin states

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

1. Download the ex3_06_starter.zip file if you haven't done so already and extract the ex3_06_starter.fxp file to your computer.
2. Open Flash Builder.
3. Import the ex3_06_starter.fxp file.
4. From the Package Explorer view, open the EmployeePortal.css file.

5. Locate the pseudo selectors for the Button control states and disable them by commenting them out (see Figure 2).

   

   Figure 2. Add comments to keep the Button control pseudo selectors from running.

6. Save the file and run the application.

   You should see the Button controls within the application have default states defined (see Figure 3).

   

   Figure 3. See the Button controls within the application have default skins.

7. Return to Flash Builder and open the ButtonWithStatesSkin.mxml file.

8. Notice the following things:

   • The Script tag has the labelElement skin part excluded from the colors of the graphic element Rect.

     <fx:Script> 
        <![CDATA[         
           static private const exclusions:Array = ["labelElement"];
           override public function get colorizeExclusions():Array {return exclusions;}           
     
         ]]>  
     </fx:Script>       

   • The states block defines the states for Button controls.

     <s:states> 
             
             <s:State name="up"/> 
             <s:State name="over"/> 
             <s:State name="down"/> 
             <s:State name="disabled"/> 
             
     </s:states>

   • The Rect block defines the fill colors for the states. Note the fill.up, fill.down, fill.over tags each has a different SolidColor property value.

     <s:Rect id="buttonColor" left="0" right="0" top="0" bottom="0">
           
             <s:fill.up>
                <mx:SolidColor color="0x555555"/>
             </s:fill.up>
           
             <s:fill.over>
                <mx:SolidColor color="0xD9E028"/>
             </s:fill.over>
           
             <s:fill.down>
     
                <mx:SolidColor color="0xD9E028"/>
             </s:fill.down>
             
     </s:Rect>

   • The Label control with the id property value of labelElement defines the Button control's label as a separate skin part with specific style definitions.

     <s:Label id="labelElement"  
         textAlign="center" 
         verticalAlign="middle" 
         color="0x000000"
         fontWeight="bold"
         horizontalCenter="0"
         verticalCenter="1" 
         left="10" right="10" 
         top="2" bottom="2"> 
             
     </s:Label>

9. Within the ButtonWithStatesSkin.mxml file locate the Properties of the parent comment.

10. Move the opening comment so that the states tag block is outside the commented area (see Figure 4).

    

    Figure 4. Move the states tag block from within the commented area.

11. Locate the Rect tag block.

12. Move the Rect tag block from within the comments.

    <s:Rect id="buttonColor" 
        left="0" right="0" 
        top="0" bottom="0">
         
        <s:fill.up>
            <mx:SolidColor color="0x555555"/>
        </s:fill.up>
         
        <s:fill.over> 
            <mx:SolidColor color="0xD9E028"/>
        </s:fill.over>
         
        <s:fill.down> 
            <mx:SolidColor color="0x0D86B8"/>
        </s:fill.down>
         
    </s:Rect>
     
    <!--     
        <s:Label id="labelElement"
           text="Send"  
           textAlign="center" 
           verticalAlign="middle" 
           color="0x000000"
           fontWeight="bold"
           horizontalCenter="0" verticalCenter="1" 
           left="10" right="10" 
           top="2" bottom="2">
        
        </s:Label>
    -->

13. Save the file.
14. From the Package Explorer view, open the EmployeeOfTheMonth.mxml file.
15. Locate the Button control.

16. To the Button control, assign the skinClass property value to skins.ButtonWithStatesSkin.

    <s:Button label="Send" 
        textAlign="center" 
        skinClass="skins.ButtonWithStatesSkin"/>

17. Save the file and run the application.

    The button in the Employee of the Month panel should appear as shown in Figure 5.

    

    Figure 5. Skin the Button control located within the EmployeeOfTheMonth component.

18. Return to the ButtonWithStatesSkin.mxml file in Flash Builder.

19. Locate the Label control and remove the surrounding comments.

    <!-- UI components
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
        
    <s:Rect id="buttonColor" 
        left="0" right="0" 
        top="0" bottom="0">
    ...
    </s:Rect>
     
    <s:Label id="labelElement"  
        text="Send"
        textAlign="center" 
        verticalAlign="middle" 
        color="0x000000"
        fontWeight="bold"
        horizontalCenter="0"
        verticalCenter="1" 
        left="10" right="10" 
        top="2" bottom="2">
         
    </s:Label>

20. Save the file and run the application.

The button in the Employee of the Month panel now has a label (see Figure 6).

Figure 6. Add a label to the Button control.

Using skin state transitions

In this section you will use the provided code within the ButtonWithStatesSkin.mxml file to apply a state transition to a Button control.

1. Return to the ButtonWithStatesSkin.mxml file in Flash Builder.
2. Below the states tags, remove the comments from around the transitions block.

3. Within the transitions block note the following:

   • The Transition tag with a fromState property value of up and a toState property value of over defines the transition from the up state of a Button control to the over state.

     <s:Transition fromState="up" toState="over">
              
         <s:Sequence targets="{labelElement, buttonColor}">
                
             <s:Resize widthBy="15"/>
                    
         </s:Sequence>
           
     </s:Transition>

   • The Sequence tag within the first Transition tag block has the targets property value assigned to the labelElement Label control and the buttonColor Rect class.

     <s:Transition fromState="up" toState="over">
              
         <s:Sequencetargets="{labelElement, buttonColor}">
                
             <s:Resize widthBy="15"/>
                    
         </s:Sequence>
           
     </s:Transition>

   • Within the Sequence tags, the Resize effect is used to expand the width of the Button control by 15 pixels:

     <s:Transition fromState="up" toState="over">
              
         <s:Sequence targets="{labelElement, buttonColor}">
                
             <s:Resize widthBy="15"/>
                    
         </s:Sequence>
           
     </s:Transition>

4. Save the file and run the application.
5. Mouse over the Send button.

You should see the button animate its width (see Figure 7).

Figure 7. Create a transition animation for the Button control between the up and over states.

Test your knowledge

What are skin states used for?

Skin states are used to define states for components within a skin. For example, the up, down, over states for a button component can have different properties defined using states within the skin class.

How can you animate a button control using states?

You can use the <Transition> tag with a fromState property and a toState property to animate buttons.

About the author