Exercise 5.8: Animating Button components
Modified
23 May 2011
Requirements
Prerequisite knowledge
- Exercise 1.1: Setting up Flash Builder and your project files
- Exercise 5.1: Using text controls
- Exercise 5.2: Defining selector styles
- Exercise 5.3: Using advanced CSS selectors
- Exercise 5.5: Creating and applying skins
- Exercise 5.6: Creating custom skin properties
- Exercise 5.7: Creating a vertical title bar on a Panel container
User level
Beginning
Required products
- Flash Builder 4.5 Premium (Download trial)
Exercise files
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
In this section, you will use the provided ButtonWithStatesSkin skin to apply a skin to multiple Button control states.
- 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.
- Return to Flash Builder.
- From the Package Explorer view, locate the skins package and open the ButtonWithStatesSkin.mxml file.
- Below the
Properties of the parentcomment, locate thestatesblock.Note the four
Stateinstances. Theup,over,down, anddisabledstates are required for aButtoncomponent skin.
<s:states>
<s:State name="up"/>
<s:State name="over"/>
<s:State name="down"/>
<s:State name="disabled"/>
</s:states>
- Locate the
UI Componentscomment. - Between the comment and the
Labelcontrol, add aRectprimitive block.
<!-- UI components ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
<s:Rect>
</s:Rect>
<s:Label id="labelDisplay"
- To the opening
Recttag, add theidproperty with a value ofbuttonColor.
<s:Rect id="buttonColor">
</s:Rect>
- Add the
top,bottom,leftandrightproperties all with a value of 0.
<s:Rect id="buttonColor"
top="0" bottom="0" left="0" right="0">
</s:Rect>
- Add the
topRightRadiusXproperty with a value of 3.
<s:Rect id="buttonColor"
top="0" bottom="0" left="0" right="0"
topRightRadiusX="3">
- Within the
Rectblock, create afillblock.
<s:Rect id="buttonColor"
top="0" bottom="0" left="0" right="0"
topRightRadiusX="3">
<s:fill>
</s:fill>
</s:Rect>
- Within the
fillblock, add aSolidColorinstance.
...
<s:fill>
<s:SolidColor/>
</s:fill>
...
- To the nested
SolidColorinstance, add thecolor.upproperty with a value of0x0D86B8(blue).
...
<s:fill>
<s:SolidColor color.up="0x0D86B8"/>
</s:fill>
...
- To the
SolidColorgraphic, add thecolor.overproperty with a value of0x64BC48(green).
<s:fill>
<s:SolidColor color.up="0x0D86B8"
color.over="0x64BC48"/>
</s:fill>
- To the
SolidColorgraphic, add thecolor.downproperty with a value of0x555555(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 componentscomment, locate theButtoncontrol. - To the
Buttoncontrol, add theskinClassproperty with a value ofskins.ButtonWithStatesSkinas theskinClass.
<s:Button label="SUBMIT"
fontWeight="bold"
skinClass="skins.ButtonWithStatesSkin"/>
- Save the file and run the application.
You should see the Submit
Buttoncontrol resembles the application's title skin (see Figure 3).
- Mouse over the Submit
Buttoncontrol.You should see the
Buttoncontrol turns green, as shown in Figure 4.
- Click and hold the
Buttoncontrol.You should see the dark grey
downstate of theButtoncontrol (see Figure 5).
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
statestags, create atransitionsblock.
...
</s:states>
<s:transitions>
</s:transitions>
- Within the
transitionsblock, create aTransitionblock.
<s:transitions>
<s:Transition>
</s:Transition>
</s:transitions>
- To the opening
Transitiontag, add thefromStateproperty with a value ofupand thetoStateproperty with a value ofover.
...
<s:Transition fromState="up" toState="over">
</s:Transition>
...
- Within the
Transitionblock, create aResizeeffect.
<s:Transition fromState="up" toState="over">
<s:Resize/>
</s:Transition>
- To the
Resizetag, bind thebuttonColorRectprimitive as thetargetand assign25as thewidthBy.
<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
Buttoncontrol.You should see the Button control resizes, but reverts to its original dimensions, causing the final
overstate to appear as shown in Figure 6.
- Return to the ButtonWithStatesSkin.mxml file in Flash Builder.
- To the
Rectprimitive, assign90as theoverStatewidth.
<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
Buttoncontrol.You should see the
Buttoncontrol resize and remain resized in theoverstate (see Figure 7).
- Move the mouse away from the
Buttoncontrol.You should see there is no animation to resize the button to the
upState width. - Click the
Buttoncontrol.You should see the
Buttoncontrol 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
Transitiontag add theautoReverseproperty and set the value totrue. This will reverse the button's animation when you mouse away from theButtoncontrol. The alternative is creating anotherTransitionblock with thefromStateandtoStatevalues reversed and thewidthByvalue for theResizeeffect 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
Buttoncontrol 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
Rectblock. - To the
Rectprimitive, add thewidth.downproperty with a value of90.
<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
overanddownstates (see Figure 8).
- 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.
More Like This
- Exercise 5.9: Skinning the SkinnableDataContainer container
- Exercise 5.10: Creating a production build
- Exercise 5.7: Creating a vertical title bar on a Panel container
- Exercise 1.1: Setting up your project files
- Exercise 1.6: Creating MXML custom components with ActionScript properties
- Exercise 2.1: Handling a user event
- Exercise 2.2: Using the event object
- Exercise 2.3: Using the addEventListener() method
- Exercise 2.4: Populating an ArrayCollection with retrieved data using the result event
- Exercise 4.5: Creating and using item renderers and item editors
