Download the ex5_08_starter.zip file provided in the Exercise files section and extract the ex5_08_starter.fxp to your computer.
Open Flash Builder.
Import the ex5_08_starter.fxp file.
From the Package Explorer view, open the ex5_08_starter.mxml file.
Run the application.
You should see the application shown in Figure 2.

Figure 2. Run the application.

Return to Flash Builder.
From the Package Explorer view, locate the skins package and open the ButtonWithStatesSkin.mxml file.
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.

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

    

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

        <!-- UI components ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ --> 
<s:Rect>

</s:Rect>
    
<s:Label id="labelDisplay"

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

        <s:Rect id="buttonColor">
 
</s:Rect>

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

        <s:Rect id="buttonColor" 
    top="0" bottom="0" left="0" right="0">        
</s:Rect>
    

Add the topRightRadiusX property with a value of 3.

        <s:Rect id="buttonColor" 
    top="0" bottom="0" left="0" right="0"
    topRightRadiusX="3">
    

Within the Rect block, create a fill block.

        <s:Rect id="buttonColor" 
    top="0" bottom="0" left="0" right="0" 
    topRightRadiusX="3">
    <s:fill>
    </s:fill>        
</s:Rect>
    

Within the fill block, add a SolidColor instance.

        ...
   <s:fill>
      <s:SolidColor/>
   </s:fill>
...
    

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

        ...
<s:fill>
   <s:SolidColor color.up="0x0D86B8"/>
</s:fill>
...      
    

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

        <s:fill>
   <s:SolidColor color.up="0x0D86B8"
      color.over="0x64BC48"/>
</s:fill>
    

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

        ...
<s:fill>
   <s:SolidColor color.up="0x0D86B8" color.over="0x64BC48" 
      color.down="0x555555"/>
</s:fill>
...
    

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

        <s:Button label="SUBMIT" 
fontWeight="bold"     
skinClass="skins.ButtonWithStatesSkin"/>
    

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

Figure 3. Note that the Submit Button control is skinned and resembles the title skin.

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

Figure 4. Mouse over the Button control to display the green over state.

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

Figure 5. Click and hold the Button control to see the dark grey down State.

Animate skin transitions

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

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

        ...
</s:states>
    
<s:transitions>

</s:transitions>

Within the transitions block, create a Transition block.

        <s:transitions>
        
    <s:Transition>

    </s:Transition>
        
</s:transitions>

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

        ...
   <s:Transition fromState="up" toState="over">
          
   </s:Transition>
...
    

Within the Transition block, create a Resize effect.

        <s:Transition fromState="up" toState="over"> 
   <s:Resize/>

</s:Transition>
    

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

        <s:Transition fromState="up" toState="over">           

    <s:Resize target="{buttonColor}" widthBy="25"/>           

</s:Transition>

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

Figure 6. Mouse over the Send button to see the animation play, but not affect the final size of the Button control.

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

        <s:Rect id="buttonColor" 
    top="0" bottom="0" left="0" right="0"
    topRightRadiusX="3" 
    width.over="90">
...
</s:Rect>
    

Save the file and run the application.
Mouse over the Submit Button control.
You should see the Button control resize and remain resized in the over state (see Figure 7).

Figure 7. Mouse over the Send Button control to see it resize.

Move the mouse away from the Button control.
You should see there is no animation to resize the button to the up State width.
Click the Button control.
You should see the Button control does return to the original width, but animates to a larger size first.
Return to the ButtonWithStatesSkin.mxml file in Flash Builder.
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.

        <s:transitions>        
    <s:Transition fromState="up" toState="over" autoReverse="true">           

        <s:Resize target="{buttonColor}" widthBy="25"/>           

    </s:Transition>        
          
</s:transitions>

Save the file and run the application.
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.
Return to Flash Builder.

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

        <s:Rect id="buttonColor" 
    top="0" bottom="0" left="0" right="0"
    topRightRadiusX="3"
    width.over="90" width.down="90">
...
</s:Rect>
    

Save the file and run the application.
Mouse over the Submit button to trigger the transition.
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).

Figure 8. The down state of the Button control.

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.

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License. Permissions beyond the scope of this license, pertaining to the examples of code included within this work are available at Adobe.

Exercise 5.8: Animating Button components

by Trilemetry

Content

Modified

Page tools

Requirements

Prerequisite knowledge

User level

Required products

Exercise files

Use skin states

Animate skin transitions

More Like This

Products

Download

Support & Learning

Buy

Company