This excerpt is from Chapter 4 (Spark containers, view states, effects, and styling) of Hello! Flex 4, by Peter Armstrong. This excerpt is published with permission.

Session 18 - Effects and Animation - Hello! Flex 4

In this workshop session, you'll learn the basics of effects. While Flex applications already look very nice out of the box, another benefit they offer is that they can leverage the capabilities of the Flash Player. (When writing a marketing sentence like that, I guess it's appropriate to say "leverage"—ick.) One of these is its strong support for animation—when Macromedia coined the term rich Internet application they wanted to emphasize applications that went beyond the fairly static web apps people have grown accustomed to. Effects, when used extremely sparingly, are a good way of doing this.

This workshop session is a high-level overview whose goal is simple: I want to impress you with how easy it is to use effects, and I want to motivate you to pause at the end of this session to go read the following two excellent articles by Adobe's Chet Haase:

• Effects in Adobe Flex 4 beta—Part 1: Basic effects (www.adobe.com/devnet/flex/articles/flex4_effects_pt1_print.html)
• Effects in Adobe Flex 4 beta—Part 2: Advanced graphical effects (www.adobe.com/devnet/flex/articles/flex4_effects_pt2_print.html)

Seriously, as soon as you're done with this session, go read those articles. I'll wait.

Anyway, here's what we're going to build in this session:

Hmm, haven't we seen most of this before in the previous session?

Well, yes, we have seen the Panel contents—but we need to rotate something, after all. In this session we're including the ability to rotate and/or move this Panel together.

When you load the app and click Rotate, it looks like this:

Well, the rotation was nice, but the end location wasn't so good. You can also reload the app and click the Move button to move the poetry smoothly to the right, as shown in the following screenshot:

However, combining these effects makes the poetry get rotated around. We create a Parallel effect to do this for us in one smooth transition. These screenshots show the end result and also what it looks like in one of the frames of the transition:

Let's look at the code. Note that we got rid of the HPanel and we're using just a Panel.

session18/src/Tester.mxml

<?xml version="1.0" encoding="utf-8"?>
<s:Application
  xmlns:fx="http://ns.adobe.com/mxml/2009"
  xmlns:s="library://ns.adobe.com/flex/spark"
  xmlns:mx="library://ns.adobe.com/flex/halo"
  width="100%" height="100%">
<fx:Declarations>
  <s:Rotate3D id="rotateEffect" target="{poemPanel}"
    angleYFrom="0" angleYTo="180"/>
  <s:Move id="moveEffect" target="{poemPanel}" xBy="400"/>
    <s:Parallel id="parallelEffect" target="{poemPanel}">
      <s:Rotate3D angleYFrom="0" angleYTo="180"/>
      <s:Move xBy="400"/>
  </s:Parallel>
</fx:Declarations>
  <s:layout>
    <s:BasicLayout/>
  </s:layout>
  <s:HGroup left="10" top="10">
    <s:Button label="Rotate" click="rotateEffect.play();"/>
    <s:Button label="Move" click="moveEffect.play();"/>
    <s:Button label="Compound" click="parallelEffect.play();"/>
  </s:HGroup>
  <s:Panel id="poemPanel" title="Animated Poetry!"
    x="50" y="50" width="400" height="400">
    <s:layout>
      <s:VerticalLayout paddingTop="10" paddingLeft="10"/>
  </s:layout>
  <s:Label fontSize="50" fontSize.stateThree="70"
    text="古池&#13;カエル跳び&#13;水の音"/>
  <s:Label text="--Matsuo Basho&#13;&#13;
The ancient pond&#13;A frog leaps in&#13;The sound of the water.
&#13;--Donald Keene"/>
  </s:Panel>
</s:Application>

The effects are nonvisual children, so they go in an fx:Declarations block.

The Rotate3D effect flips the panel on the y-axis.

The Move effect moves the panel on the x-axis.

The Parallel effect runs a Rotate3D and Move effect in parallel.

The buttons trigger the effects.

That was easy! Note that in addition to running effects in parallel with the Parallel effect, you can also sequence events using a Sequence effect; see the API docs for details.

Now, remember those articles by Chet Haase that I mentioned? Go read them. Now. No, don't check your email or Twitter—just do it.

⇒ Key points

• Effects are nonvisual elements so they're added to an fx:Declarations element.
• Effects can be run in parallel using Parallel or sequenced using Sequence.
• Don't overdo it! Remember when being able to use multiple fonts in a word processor first came out, and certain people used, say, 10 of them on one page of a company newsletter? Don't be that person.

Read more from Peter Armstrong.