IT tutorials
 
Graphics
 

Adobe Flash Catalyst CS5 : Animating State Change Transitions

5/24/2013 7:45:27 PM
- How To Install Windows Server 2012 On VirtualBox
- How To Bypass Torrent Connection Blocking By Your ISP
- How To Install Actual Facebook App On Kindle Fire

Transitions between states can be animated. Catalyst includes a set of pre-built animation effects that can be used in transitions. After you add an interaction to trigger a state change, the effected states appear on the Timelines panel. You can increase or decrease the time each transition takes and choose the effect to be played.

1. Changing the timing of effects

By default, most effects trigger instantly, which generally prevents users from seeing animation. Using the Timeline panel, you can adjust this timing to create smoother effects.

NOTE

Consider what types of animation effects you want to apply to components when you set up your view states. If you want to have components animate in or out of a state, you need to be sure to merely hide that component's layer, rather than deleting the component altogether.

  1. If necessary, expand the Timeline panel by double-clicking its tab. The Timelines panel is at the bottom of the screen, as shown in Figure 1. If you are still editing a component, you will want to click the name of the application in the navigation bar.

    Figure 1. The Timeline panel in the application
  2. On the Pages/States panel, click SubscriptionState.

  3. On the Layers panel, click the eyeball icon to show the HomeState's assets, and the eyeball to hide the SubscriptionState's assets. You want each to slide in on the transition, so you need to show the HomeState's assets to move them off the artboard.

  4. Double-click the Hand tool to zoom out to see the entire application (see Figure 2).

    Figure 2. Showing the appropriate assets
  5. Click the Select tool. While pressing and holding the Shift key, drag the HomeState's component so that it is completely off the left edge of the artboard (see Figure 3)

  6. On the Library panel, click the eyeball icon to show the SubscriptionState's assets.

  7. While pressing and holding the Shift key, drag the SubscriptionState's assets off the right edge of the artboard (see Figure 4).

    Figure 3. Moving the components
    Figure 4. Moving the other assets
  8. On the right side of the Timeline panel, choose the first transition, HomeState => Subscription State. The timeline updates to show the HomeState on the left, and the SubscriptionState on the right (see Figure 5).

    Figure 5. Selecting the transition from the HomeState to the SubscriptionState
  9. Mouse over the bar representing the HomeState. A small half-circle appears at the edge of the bar.

  10. Drag this half-circle to the right to expand the time over which the component appears (see Figure 6).

    NOTE

    The timeline is measured in fractions of seconds. A slider along the bottom of the panel allows you to zoom in or out on the timeline.

  11. Repeat Step 3 for the SubscriptionState's Move action.

  12. Set it to the same amount of time as the other state.

  13. Set the Fade In action to the same timing (see Figure 7).

    Figure 6. Expanding a component's transition time
    Figure 7. Setting the timing on the second state
  14. Drag both the FadeIn and Move effects for the Subscription state so that they begin when the HomeState's transition ends (see Figure 8).

Figure 8. Changing the timing of the transition

Now that you have established the timing of the effects, users will see the Home State's assets slide off to the left, to be replaced by the Subscription State's assets sliding in from the right while also fading in.

2. Applying other effects

Catalyst automatically adds a Fade In effect to components being added to a state. If you reposition a component, a Move action will be applied. You can, however, add additional effects. In the following steps, a FadeOut effect isadded to the HomeState.

  1. On the Timeline, click HomeState.

  2. Click Add Action.

  3. Click Fade (see Figure 9).

  4. Adjust the timing of the new effect as needed (see Figure 10).

Figure 9. Selecting the Fade effect for the HomeState

Figure 10. Adjusting the timing of the added effect

The animation of the Home State now matches that of the Subscription State, as both fade while they move.

 
Others
 
- Adobe Flash Catalyst CS5 : Trigger View State Changes with Buttons
- Adobe Flash Catalyst CS5 : Components with Built-in View States
- Adobe Flash Catalyst CS5 : Create New States within a Component
- Adobe After Effects CS5 : Animating Text - Adding motion blur, Exporting to Adobe Flash Professional CS5
- Adobe After Effects CS5 : Animating Text - Animating a nontext layer along a motion path
- Adobe After Effects CS5 : Animating Text - Cleaning up the path animation
- Adobe Fireworks CS5 : Working with Vector Graphics - Drawing the shape
- Adobe Fireworks CS5 : Working with Vector Graphics - Editing paths
- Adobe Flash Professional CS5 : Working Within the Flash Environment - Docking and Undocking Panels, Grouping and Ungrouping Panels
- Adobe Flash Professional CS5 : Working Within the Flash Environment - Working with Panels
 
 
Top 10
 
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Finding containers and lists in Visio (part 2) - Wireframes,Legends
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Finding containers and lists in Visio (part 1) - Swimlanes
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Formatting and sizing lists
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Adding shapes to lists
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Sizing containers
- Microsoft Access 2010 : Control Properties and Why to Use Them (part 3) - The Other Properties of a Control
- Microsoft Access 2010 : Control Properties and Why to Use Them (part 2) - The Data Properties of a Control
- Microsoft Access 2010 : Control Properties and Why to Use Them (part 1) - The Format Properties of a Control
- Microsoft Access 2010 : Form Properties and Why Should You Use Them - Working with the Properties Window
- Microsoft Visio 2013 : Using the Organization Chart Wizard with new data
programming4us programming4us
 
Popular tags
 
Video Tutorail Microsoft Access Microsoft Excel Microsoft OneNote Microsoft PowerPoint Microsoft Project Microsoft Visio Microsoft Word Active Directory Biztalk Exchange Server Microsoft LynC Server Microsoft Dynamic Sharepoint Sql Server Windows Server 2008 Windows Server 2012 Windows 7 Windows 8 Adobe Indesign Adobe Flash Professional Dreamweaver Adobe Illustrator Adobe After Effects Adobe Photoshop Adobe Fireworks Adobe Flash Catalyst Corel Painter X CorelDRAW X5 CorelDraw 10 QuarkXPress 8 windows Phone 7 windows Phone 8 BlackBerry Android Ipad Iphone iOS
Celebrity Style, Fashion Trends, Beauty and Makeup Tips.