This article is sponsored by Adobe.

---

Advertisements

This article is based on material from the book Flex 4 Fun by Chet Haase, available as a PrePrint™ from Artima Press.

Compelling animations often use a combination of effects playing together. This chapter is about the effects that are used to choreograph these sequences of effects to get much more complex and interesting results than you can get with just one effect at a time.

CompositeEffect, through its two subclasses Parallel and Sequence, exists to help developers play multiple effects in an organized fashion. Often, you want effects to play at the same time, or one after another, or in some combination of the two. For example, animating an item's insertion into a list may consist of first moving the other items out of the way and then fading the item in. Making a panel appear in a window may entail fading it in while also sliding it in from the side. Interesting menu effects may consist of first opening the menu background then fading in the items in the menu one by one. Many different possibilities exist to structure effects together, but a mechanism is needed to organize the effects to play both together and one after the other. That's why the Parallel and Sequence effects are there.

The Parallel effect plays all of its child effects simultaneously (in parallel). When play() is called on the Parallel effect, all of the child effects are started at the same time. The effects may still start at different times (if they have startDelays) or end at different times (if they have different durations), but they will at least all play() at the same time. The Parallel effect is useful when you want to structure several effects to play together, such as fading and sliding in a component, or moving several objects together, or moving and resizing an object simultaneously.

As its name implies, the Sequence effect runs its child effects in sequence, one after the other. The act of one child effect ending causes the Sequence effect to play the next child effect in the series, continuing until all child effects have played, at which point the Sequence itself ends. This effect is useful when you want to run effects in a series, or structure the effects in a dependent fashion, so that one effect starts when another ends. The technique is used for visual effects that are dependent, such as resizing an empty space to make room for an item before then fading it in, or moving components out of the way to make room for some other component.

As an example, suppose we have an application in which we want to slide a panel in from the side into a space currently occupied by other components. We still want those other controls in the window, but located elsewhere in the UI. In this case, we need to make room for the panel by moving the objects out of the way. We could move them in parallel with the panel, but it might make more sense, and make a more visually clean experience, to perform these actions separately. That is, we want to move the objects out of the way in the first part of the action to make room for the panel, then slide the panel into place.

I find this two-part approach better in cases where the objects do not have the same exact motion. If the objects being shifted to make way for the panel move the same distance and in the same direction as the panel, then moving both sets of objects in parallel works. But in the code we're about to see, the buttons move one way and the panel moves another. It is less distracting and noisy to the user to run these actions separately. This ordering of animations is perfect for a Sequence effect.

We can now see the power of using both Parallel and Sequence together as we structure some effects to run at the same time (the slide/fade of the panel) and some to run one after the other (moving the buttons out of the way first, then playing the parallel sliding effect). Here is some code from the PanelSequenceParallelSlide application:

<fx:Declarations>
    <s:Sequence id="shiftSlideSequence">
        <s:Move target="{buttonGroup}" yTo="260"/>
        <s:Parallel target="{panel}">
            <s:Move xTo="0"/>
            <s:Fade alphaFrom="0" alphaTo="1"/>
        </s:Parallel>
    </s:Sequence>
</fx:Declarations>
<s:Button label="Send in the Panel"
    click="shiftSlideSequence.play()"/>
<s:HGroup id="buttonGroup" y="40">
    <s:Button label="Some Button"/>
    <s:Button label="Some Other Button"/>
</s:HGroup>
<s:Panel id="panel" title="The Panel" 
    width="300" height="200" x="-350" y="40"/>

Note how no targets are declared on the Sequence effect itself because its child effects specify different targets so it doesn't serve any purpose to provide default targets for the parent effect.

Here's the application:

Either scripts and active content are not permitted to run or Adobe Flash Player version 10.0.0 or greater is not installed.

With composite effects, and the ability to nest them as seen in this example, we can create all kinds of complex and interesting effects and carefully control the timing of how and when certain effects run. This careful choreography of animations enables seamless transitions in your applications, as you animate changes in the UI which helps the user understand what's happening.

Resources

Chet Haase is author of Flex 4 Fun, which is available as a PrePrint™ (early access release) at: http://www.artima.com/shop/flex_4_fun

Adobe's Flash Builder 4
http://www.adobe.com/products/flashbuilder

Flex SDK 4
http://opensource.adobe.com/wiki/display/flexsdk/Flex+SDK

For more on states in Flex 4, see "Working with States in Flex 4":
http://www.artima.com/articles/flex_4_states.html

Flex.org
http://www.flex.org

Talk back!

Have an opinion? Readers have already posted 1 comment about this article. Why not add yours?

About the author

Chet Haase worked as a senior computer scientist on the Flex SDK team at Adobe Systems, Inc., during the Flex 4 release. He was responsible for Flex effects, and writing the next effects infrastructure and classes for Flex 4. Prior to his work at Adobe, he worked at Sun Microsystems for several years, and co-authored the book Filthy Rich Clients about creating rich user experiences with the Java client platform. His entire career has been in graphics software, from the application level to APIs and libraries to drivers for graphics chips. As long as it puts pixels on the screen, he's interested. He earned a B.A. in Mathematics from Carleton College and an M.S. in Computer and Information Sciences from the University of Oregon.

Chet posts regularly to his technical blog at http://graphics-geek.blogspot.com, where you can find articles, videos, demos, and plenty of source code. Chet is also interested in writing and performing comedy; you can see some his work in this completely unrelated field at http://chetchat.blogspot.com, and in his book When I am King..., which is available at Amazon.com.