Exercise 4.10: Applying transitions to view states

In this exercise you will use effects to animate components as they transition between states of an application.

In the Employee Portal example, Panel containers in the login and portal states will move and fade in and out as you switch states. You will also use composite effects to control which elements move in parallel or sequentially. Lastly, you will learn how to explicitly control the appearance and disappearance of components during the transition that exist in one state but not the other.

In this exercise, you will learn how to:

• Instantiate transitions
• Transition multiple controls
• Nest composite effects
• Add and remove components during the transition
• Use the Resize effect
• Create a logout transition

In this section you will animate the Employee of the Month Panel container as it transitions between two applications states.

1. Download the ex4_10_starter.zip file if you haven't already and extract the ex4_10_starter.fxp file to your computer.
2. Open Flash Builder.
3. Import the ex4_10_starter.fxp file.
4. Open the ex4_10_starter.mxml file.
5. Locate the states block.

Remember that the Employee Portal application has two distinct states that you defined in earlier exercises. Next, you will define the animation that occurs on the Employee of the Month Panel container when the application transitions from the login to the portal state.

6. Below the closing states tag, create the transitions property of the application.
7. Within the transitions block, create a Transition tag block.

8. To the opening Transition tag, add the fromState property with a value of loginState and the toState property with a value of portalState.

This is a one-way transition. You will create an animation for the reverse transition later in this exercise.

9. Between the Transition tags, create a Parallel effect tag block.

In the following steps you will apply both a Fade and a Move effect to the Employee of the Month Panel container. The effects will happen at the same time, which is why you are using a Parallel composite effect instead of a Sequence effect.

10. To the Parallel effect, assign the target property value to the employeeOfTheMonth Panel container.

11. Within the Parallel effect tags, add a Fade effect instance.

12. Below the Fade effect, add a Move effect.

13. Save the file.
14. Run the application and log in with the username, flex, and the password,hero.

You should see the login Panel container disappear, the employeeOfTheMonth Panel container fade into view while moving into position, and the other Panel containers in the portalState just appear (see Figure 2).

In this section you will animate multiple containers so that they move into place from the locations shown in Figure 3.

1. Return to Flash Builder.
2. To the Parallel effect, convert the target property to the targets property.

You want all the Panel instances to animate at the same time.

3. Assign the targets property value to the four Panel instances that appear in the portalState. Remember to add the array syntax square brackets inside the curly braces of the binding.

4. To the nested Move effect, assign the target property value to the employeeOfTheMonth Panel container.

You want all of the Panel instances to fade in except for the employeeOfTheMonth panel, which already appears in both states. By simply leaving the Fade effect without any properties, the application will automatically determine the alpha property of each target component and extrapolate from there how to make it fade from one state to the other.

Each Panel instance will move in a different way. Since the employeeOfTheMonth instance already has a starting point in the loginState of the application, you simply left the Move effect without properties. Again, the application will automatically determine how to animate the x and y properties of the employeeOfTheMonth instance to make it move to the proper location in the portalState from its initial position in the loginState.

The other three Panel container instances that are referenced in the targets property of the Parallel effect do not exist in the loginState and they currently just appear in their final position in the portalState. In the next steps, you will define a starting position for each of the instances using either the xFrom or yFrom properties of the Move effect.

Figure 3 above gives a practical illustration of where the Panel instances will start from when the animation begins.

5. Below the Move effect for the employeeOfTheMonth instance, add another Move effect instance.
6. To the second Move effect, assign the target property value to the search Panel container and the xFrom property value to -166.

7. Below the second Move effect, add a third Move effect and assign the target property value to the cafeteriaSpecial Panel container and the yFrom property value to -329.

8. Below the third Move effect, add a fourth Move effect and assign the target property value to the monthlyEvents Panel container and the xFrom property to 833.

9. Save the file and run the application.
10. Enter flex for the username and hero for the password, and then click the Submit button.

You should see the login panel disappear and the panels within the portal state move into place from their off-screen locations as shown in Figure 4.

In this section you will use a Sequence effect to define the order in which the panels will animate as they transition between the login and portal states. In the last section you had all the panels in the portal state fade and move into place in parallel. But before that happens, you need the login Panel instance to fade and move out of view.

1. Return to Flash Builder.
2. Surround the Parallel effect with a Sequence effect tag block.

3. Between the opening Sequence tag and the Parallel effect, create another Parallel effect instance.

4. Within the new Parallel effect tags, add a Fade effect and assign the target property value to the login Panel container.

You could have put the target property on the Parallel effect instead of on the nested Fade effect. However, we will next add more effects inside of this composite effect that target another component.

5. Under the Fade effect, add a Move effect and assign the target property value to the login Panel container and add the xTo property with a value of -266.

6. Below the Move effect, add another Move effect and assign the target property value to the employeeOfTheMonth Panel container.

7. From the second Parallel effect block, remove the employeeOfTheMonth Panel container from the targets property value and the corresponding Move effect.

The changes you just made will fade and move the login panel out while the employeeOfTheMonth panel moves into its new location in the portalState. Only after that happens, will the second set of effects run, which animate the rest of the portalState panels into place.

8. Save the file and run the application.
9. Enter flex for the username and hero for the password, and then click the Submit button.

You should see the animation is not correct. The Panel containers within the portalState state are visible in their final locations before the animations occur.

You have seen that the application can usually determine how to animate an effect on a component based on the beginning and ending properties that it is modifying. However, as an animation becomes more complex, the Flex framework needs more direction for how to animate elements that exist in only one state of the transition.

In this section, you will use the AddAction and RemoveAction effects to explicitly define when a component is added or removed during the transition between the two states.

1. Return to Flash Builder.
2. Within the Sequence tag, between the Parallel effects, add the RemoveAction tag with a target property bound to the login instance.

You have just told the application to first animate the login and employeeOfTheMonth instances and then remove the login instance, which does not exist in the portal state.

3. Within the second set of Parallel tags, add the AddAction tag as the first effect.

You have now told the application to explicitly add the panel instances to the transition at this point before you fade and move them.

4. Save the file and run the application.
5. Enter flex for the username and hero for the password, then click the Submit button.

You should see the Panel containers except for the Employee of the Month panel animate properly upon switching to the portalState state, as shown in Figure 5.

In this section you will use the Resize effect to change the size of the employeeOfTheMonth Panel container between states.

1. Return to Flash Builder.
2. Locate the first Parallel effect tag.
3. To the second nested Move effect, add the xFrom property with a value of 298 and the xTo property value of 24. These properties values represent the x position of the employeeOfTheMonth component in each application state.

4. Between the Fade and the Move effects, add a Resize effect and assign the target property value to employeeOfTheMonth, the widthFrom property value to 390 and the widthTo property value to 250.

5. Save the file and run the application.
6. Enter flex for the username and hero for the password, then click the Submit button.

You should see the Employee of the Month panel animate before the other Panel containers within the portal state (see Figure 6).

Now you will add the autoReverse property to the transition so that your application animates when you transition from the portalState back to the loginState.

7. Return to the ex4_10_starter.mxml file.
8. To the opening Transition tag, add the autoReverse property with a value of true.
9. Save the file and run the application.
10. Enter flex for the username and hero for the password, then click the Submit button.
11. Click the Logout button.

    Notice that the transition reverses, however, it does not animate correctly. In the next section you will add a second transition from the portalState to the loginState.

12. Return to Flash Builder.
13. From the opening Transition tag, remove the autoReverse property.
14. Save the file.

In this section you will create a second transition to animate the components when the user logs out of the application. When this happens, you will animate from the portal state back to the login state.

1. Return to Flash Builder.
2. Within the transitions tags, below the existing Transition block, add another Transition tag block.

3. To the new Transition instance, add the fromState property with a value of portalState and the toState property with a value of loginState.

When the user logs out of the Employee Portal application, you will fade out the search, cafeteriaSpecial, and monthlyEvents panels while the employeeOfTheMonth instance resizes and moves to its proper position in the login state. The next composite effect that you want to animate when that is done is for the Login panel to fade and move in from the left of the screen.

4. Within the Transition effect, nest a Sequence effect.

5. Within the Sequence tags, add a Parallel effect to animate out the panels in the portalState.

6. Within the Parallel effect add a Fade effect and assign the targets property value to the three Panel containers that exist only in the portalState state.

7. Below the Fade effect, add a Resize effect and assign the target property value to the employeeOfTheMonth Panel container, the widthFrom property value to 250 and the widthTo property value to 390.

8. Below the Resize effect, add the Move effect and assign the target property value to the employeeOfTheMonth Panel container, the xFrom property value to 24 and the xTo property value to 434.

9. Below the Parallel composite effect, but still inside the Sequence effect, create a second set of Parallel tags that target the login instance.

10. Within the new Parallel effect, add a Fade effect.

In the previous steps, you have defined the animations that should occur in sequence. First, all the panels in the portal state will fade, except the Employee of the Month panel, which will move to its new location. Then the Login panel will fade and move into place in the login state.

Lastly you need to define when the panels that do not exist in both states need to be added or removed during the transition.

11. Between the two Parallel tag blocks, add the RemoveAction tag and assign the targets property value to the Panel containers that exist only in the portalState state.

12. Still between the Parallel tag blocks, but below the RemoveAction effect, add an AddAction tag and assign the target property value to the login Panel container.

13. Save the file and run the application.
14. Enter flex for the username and hero for the password, and then click the Submit button.
15. Click the Logout button.

You should see that the Employee of the Month panel moves and resizes while the other panels fade away, and then the Login panel fades into view and moves into place as shown in Figure 7.

In this exercise you used effects to animate components as they transition between states of an application.