- Requirements
Prerequisite knowledge Required products Sample files
 
Flash Builder 4.7 Premium (Download trial)
User level    
Beginning    

 

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.
 
Review your task for this exercise.
Figure 1. Review your task for this exercise.
In this exercise, you will learn how to:
 

 
Instantiate a Spark effect

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.
     
You'll see the login screen when you run the application.
Figure 2. You'll see the login screen when you run the application.
  1. Click the Submit button.
    You should see the Employee Portal main page shown in Figure 3.
     
When you log in, you get the main page of the Employee Portal application.
Figure 3. When you log in, you get the main page of the Employee Portal application.
  1. Return to Flash Builder.
  2. Locate the Declarations comment.
  3. Below the comment, locate the Declarations block.
<!-- Declarations ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ --> <fx:Declarations> </fx:Declarations>
  1. Within the Declarations block, create an instance of the Spark Move effect.
<fx:Declarations> <s:Move/> </fx:Declarations>
  1. To the Move effect, add the id property with a value of shake.
<fx:Declarations> <s:Move id="shake"/> </fx:Declarations>
  1. To the Move effect, bind the target property value to the login Panel container and assign the xBy property a value of 20 pixels.
Panel container and assign the xBy property a value of 20 pixels.
<fx:Declarations> <s:Move id="shake" target="{login}" xBy="20"/> </fx:Declarations>

 
Play the Spark effect

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.
<!-- Script ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ --> <fx:Script> <![CDATA[ ]]> </fx:Script>
  1. Within the Script block, create a private function named checkLogin() that returns a void return type.
<fx:Script> <![CDATA[ private function checkLogin():void { } ]]> </fx:Script>
  1. 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.
private function checkLogin():void { if (username.text == "flex" && password.text == "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.
 
  1. Within the conditional statement, assign the currentState property a value of portalState.
private function checkLogin():void { if (username.text == "flex" && password.text == "hero") { currentState='portalState'; } }
  1. Within the checkLogin() function, below the closing brace of the conditional statement, add an else statement.
private function checkLogin():void { if (username.text == "flex" && password.text == "hero") { currentState='portalState'; } else { } }
  1. Within the else statement, call the play() method of the shake effect instance.
private function checkLogin():void { if (username.text == 'flex' && password.text == "hero") { currentState='portalState'; } else { shake.play(); } }
  1. Locate the Button control nested within the Login Panel container and remove the value in the click event.
  2. To the Button control's click event, assign the checkLogin() function as the event handler for the click event.
<s:Button label="Submit" click="checkLogin()"/>
  1. Locate the TextInput control for the password nested within in the Login Panel container.
  2. 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.
     
<s:TextInput id="password" displayAsPassword="true"/>
  1. Save the file.
  2. Run the application.
  3. 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).
     
Click Submit button to see the Panel container move.
Figure 4. Click Submit button to see the Panel container move.
  1. Click inside the Username text box and type flex.
  2. Click inside the Password text box and type hero (see Figure 5).
The username is visible, but the password is shown as asterisks.
Figure 5. The username is visible, but the password is shown as asterisks.
  1. Click the Submit button.
    You should see the application change to the Portal.
     

 
Create an animation sequence

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.
<s:Sequence> <s:Move id="shake" target="{login}" xBy="20"/> </s:Sequence>
  1. Within the Declarations block, cut the id and target properties from the Move effect and paste them into the Sequence effect.
<s:Sequence id="shake" target="{login}"> <s:Move xBy="20"/> </s:Sequence>
By placing the id and target on the Sequence composite effect, all of the effects nested within will be run at the same time.
 
  1. Within the Sequence block, copy the Move effect and paste seven copies below the first.
<s:Move xBy="20"/> <s:Move xBy="20"/> <s:Move xBy="20"/> <s:Move xBy="20"/> <s:Move xBy="20"/> <s:Move xBy="20"/> <s:Move xBy="20"/> <s:Move xBy="20"/>
  1. To every other Move effect, change the xBy property value to -20.
<s:Move xBy="20"/> <s:Move xBy="-20"/> <s:Move xBy="20"/> <s:Move xBy="-20"/> <s:Move xBy="20"/> <s:Move xBy="-20"/> <s:Move xBy="20"/> <s:Move xBy="-20"/>
  1. Save the file and run the application.
  2. 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.
 

 
Speed up an animation

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.
<s:Sequence id="shake" target="{login}" duration="20"> <s:Move xBy="20" /> <s:Move xBy="-20" /> <s:Move xBy="20" /> <s:Move xBy="-20" /> <s:Move xBy="20" /> <s:Move xBy="-20" /> <s:Move xBy="20" /> <s:Move xBy="-20" /> </s:Sequence>
  1. Save the file and run the application.
  2. Click the Submit button.
  3. 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.
     
  4. Return to Flash Builder.
  5. Locate the checkLogin() function in the Script block.
  6. 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.
else { if(!shake.isPlaying) { shake.play(); } }
  1. Save the file and run the application.
  2. 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.
 
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.