371 CHAPTER Controlling Animation and Working with Drag and Drop IN THIS CHAPTER Declaring effects in MXML Instantiating and playing effects with ActionScript Using tweening and masking effects Using composite effects Implementing drag-and-drop interfaces F lash Player was originally created as a platform for presenting anima- tion over the Web. Future Splash Animator, the original ancestor of the Flash authoring environment and Flash Player, was a Java-based software product that was integrated into the browser in much the same manner as Flash Player is today. Millions of Flash developers worldwide create compelling content designed for presentation in a Web application. Animation and related visual wizardry is the most common goal, and the most common result, of documents devel- oped in the Flash authoring environment and distributed through Flash Player. Animation in Flash depends largely on use of the timeline: a visual interface that enables the developer to create animations frame by frame or through a process known as tweening. Flex application developers don’t have the time- line available to them. In fact, one of Macromedia’s most important motiva- tions in creating Flex was to free developers with a coding background from having to work with the timeline at all. But a Flex application is still distrib- uted and viewed through Flash Player. So when it’s time to move objects around the screen, a Flex developer needs code-based approaches to make it happen. In this chapter, I describe the use of effects to create animation in a Flex application. I also describe how to implement drag-and-drop interfaces to create an intuitive way to move data around an application. On the Web To use the sample code for this chapter, import the chapter12.fxp Flex project archive from the Web site files into your Flash Builder workspace. n 18_488959-ch12.indd 37118_488959-ch12.indd 371 3/5/10 2:27 PM3/5/10 2:27 PM Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Part II: Designing Flex Applications 372 Using Effects An effect is an ActionScript class that defines changes in a visual component’s position, visibility, scaling, and other properties over a period of time. The Flex framework includes many pre-built effect classes that can be applied to visual components and played with explicit ActionScript state- ments or upon certain built-in effect triggers. New Feature The Flex 4 SDK includes a new set of effect classes that have the advantage of working on both Flex components and on primitive vector graphics defined with the new FXG syntax supported in MXML. These effect classes are members of the spark.effects package and can be used to animate both new Spark components and the older MX components. The older effect classes, which are members of the mx.effects package, are still included with the Flex 4 SDK. n Most pre-built effect classes in the Flex framework define changes to visual properties of control. The following new Spark effects cause changes to one or more of a visual component’s properties over a period of time: l Animate. Changes any arbitrary set of properties. l AnimateColor. Changes a color property from a starting to an ending color. l AnimateFilter. Changes properties of one of the filter classes defined in the spark. filters package, including DropShadowFilter, GlowFilter, BlurFilter, and ShaderFilter. l AnimateShaderTransition. Performs an animation between two bitmaps using a pixel-shader program based on Flash Player’s Pixel Bender technology. You can provide your own shader program or use one of those provided by this effect’s subclasses, CrossFade and Wipe. l AnimateTransform. Combines multiple transform animations, such as translation, scale and rotation, into a parallel effect. l CrossFade. Performs a crossfade between two components or graphics. This class is extended from AnimateShaderTransition and is designed to be used in transitions rather than played directly. l Fade. Changes the alpha property of a component to affect transparency. l Move. Changes the component’s x and y properties to modify the object’s relative position within its container. l Move3D. Changes the component’s x, y, and z properties to modify the object’s relative position within its container and its relative depth. l Resize. Changes the component’s width and height. l Rotate. Rotates a component. You can control the angle of rotation. l Rotate3D. Rotates a component in three dimensions. You can control the angle of rotation and its 3D orientation. 18_488959-ch12.indd 37218_488959-ch12.indd 372 3/5/10 2:27 PM3/5/10 2:27 PM Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Chapter 12: Controlling Animation and Working with Drag and Drop 373 l Scale. Changes a component’s relative size around its center, using scaleX and scaleY properties. l Scale3D. Changes a component’s relative size around its center, adding 3D functionality. l Wipe. Reveals one component or graphic and hides another, performing the transforma- tion in one of four directions (right, left, up, or down). This class is extended from AnimateShaderTransition and is designed to be used in transitions rather than played directly. The following MX effects are retained from the Flex 3 SDK, and have not been rewritten in the new Spark framework. You can still use them to animate MX components but can’t apply them directly to Spark components or MXML graphics: l Iris. Uses a rectangular mask to reveal or hide an object. Unlike the Zoom effect, this does not change the component’s dimensions. l WipeLeft, WipeRight, WipeUp, and WipeDown. Uses a mask to reveal or hide an object in the indicated direction. l Zoom. Changes the scale of a component, zooming into and out of a component’s center point. Tip Some MX effects that haven’t been rewritten can be emulated with the new Spark effects. For example, you can achieve the same result as the MX Blur and Glow effects with the Spark AnimateFilter effect. n The following MX effects are nonvisual but are played with the same sort of code as the visual effect classes: l Pause. Creates a delay between multiple effects controlled in a Sequence (explained later in this chapter). l SoundEffect. Plays an MP3 file. The MP3 file can be embedded or can be loaded at runtime. Declaring and playing effect classes You play effects either in a view state transition or by calling an effect object’s play() method. Caution The older Flex 3 effects support an architecture known as a trigger, which plays an effect in reaction to a specific event. This code, for example, would cause an object to fade in and out in reaction to having its visible property set to true or false: <mx:Image source=”assets/flower1.jpg” showEffect=”{myMXEffect}” hideEffect=”{myMXEffect}”/> If you try to use this syntax with Spark effects, the results are inconsistent. Adobe recommends that Spark effects be called directly from ActionScript code or in the context of a view state transition. n 18_488959-ch12.indd 37318_488959-ch12.indd 373 3/5/10 2:27 PM3/5/10 2:27 PM Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Part II: Designing Flex Applications 374 To get started with an effect, declare an instance of the desired effect class in either MXML or ActionScript code. This instance of the Spark Fade class will cause its target object to fade from transparent to opaque over the course of 2000 milliseconds (2 seconds): <fx:Declarations> <s:Fade id=”myFade” duration=”2000” alphaFrom=”0” alphaTo=”1”/> </fx:Declarations> New Feature As with all nonvisual objects, MXML declarations of effect objects must be wrapped in the <fx:Declarations> element in Flex 4. n Because an effect’s duration is measured in milliseconds, a duration of 2000 means that the effect takes 2 seconds to play. The duration property’s default value is 500 milliseconds, so the custom Fade effect plays much more slowly than the default. To play the effect, call the effect object’s play() method and pass an array containing references to all objects that should be affected: myFade.play([myImage]) Note Each effect class in the Flex framework has an equivalent instance class. For example, the Fade class is matched by a FadeInstance class. The instance class is used internally by the framework to create new instances of the effect each time it’s played. You should never declare the effect instance classes directly though. n Listing 12.1 shows a complete application that declares two Fade objects. The Button compo- nents play the effects when clicked, causing the BitmapImage to fade in and out. LISTING 12.1 Playing simple effects <?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”> <fx:Declarations> <s:Fade id=”fadeIn” alphaFrom=”0” alphaTo=”1”/> <s:Fade id=”fadeOut” alphaFrom=”1” alphaTo=”0”/> </fx:Declarations> <s:BitmapImage id=”myImage” source=”@Embed(‘assets/flower1.jpg’)” x=”140” y=”90”/> <s:Button x=”140” y=”338” label=”Show Image” click=”fadeIn.play([myImage])”/> <s:Button x=”374” y=”338” label=”Hide Image” click=”fadeOut.play([myImage])”/> </s:Application> 18_488959-ch12.indd 37418_488959-ch12.indd 374 3/5/10 2:27 PM3/5/10 2:27 PM Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Chapter 12: Controlling Animation and Working with Drag and Drop 375 On the Web The code in Listing 12.1 is available in the Web site files as PlayingEffects.mxml in the chapter12 project. n Figure 12.1 shows the resulting application in the process of fading from visible to invisible. Tip You can still use the MX effects to animate Spark components by wrapping the Spark component in an MX container. For example, the WipeLeft, WipeRight, WipeUp, WipeDown, Iris, and certain other effects haven’t been rewritten in Spark at this point. The following code wraps a Spark Button in a MX Box con- tainer, and then applies the MX WipeRight effect to the containing Box: <fx:Declarations> <mx:WipeRight id=”wipe” /> </fx:Declarations> <mx:Box id=”box” label=”MX Box”> <s:Button id=”btn” label=”Spark Button” click=”wipe.play([box])”/> </mx:Box> n FIGURE 12.1 A Fade effect in progress Declaring effects in ActionScript You can explicitly construct and play an effect with ActionScript code with these steps: 1. Declare an instance of an effect class as a variable. 2. Set the effect variable’s target property to refer to the component you want to animate. 18_488959-ch12.indd 37518_488959-ch12.indd 375 3/5/10 2:27 PM3/5/10 2:27 PM Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Part II: Designing Flex Applications 376 3. Set other properties to modify the effect’s behavior. 4. Call the effect class’s play() method. The application in Listing 12.2 creates and plays customized Fade effects to handle the hiding and showing of a visual component. LISTING 12.2 Defining and playing an effect with ActionScript <?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/mx”> <fx:Script> <![CDATA[ import spark.effects.Fade; private function showImage():void { var myFade:Fade = new Fade(); myFade.target = myImage; myFade.alphaFrom = 0; myFade.alphaTo = 1; myFade.play(); } private function hideImage():void { var myFade:Fade = new Fade(); myFade.target = myImage; myFade.alphaFrom = 1; myFade.alphaTo = 0; myFade.play(); } ]]> </fx:Script> <s:BitmapImage id=”myImage” source=”@Embed(‘assets/flower1.jpg’)” x=”150” y=”100”/> <s:Button x=”150” y=”375” label=”Show Image” click=”showImage()”/> <s:Button x=”374” y=”375” label=”Hide Image” click=”hideImage()”/> </s:Application> On the Web The code in Listing 12.2 is available in the Web site files as PlayEffectWithAS.mxml in the chapter12 project. n 18_488959-ch12.indd 37618_488959-ch12.indd 376 3/5/10 2:27 PM3/5/10 2:27 PM Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Chapter 12: Controlling Animation and Working with Drag and Drop 377 Tip Effect classes also have a targets property that takes an array of visual components. When you call the effect class’s play() method, the framework constructs one internal instance of the effect class for each target object and then plays them all simultaneously. n Using the new Spark effects In this section I describe the most commonly used new Spark effects. Note I do not describe the older MX effects extensively in this book. For more information on these older effect classes, see the previous edition of this book, Flex 3 Bible (Wiley, 2008). n Using the Animate effect Flex 4 has a new effect class named Animate that enables you to modify any number of proper- ties, with any data types, over a period of time. New Feature The new Animate effect is designed to replace the Flex 3 AnimateProperty effect. In contrast to AnimateProperty, which only worked with numeric properties, Animate can be used with properties that use any data type. n You declare an instance of Animate with a motionPaths property consisting of an Array of MotionPath instances. Each MotionPath object animates a single property, and includes a keyframes property that in turn is an array of Keyframe instances. Each Keyframe defines a moment in time, set in milliseconds, and a new value for the named property. The following Animate object has a single MotionPath that moves an object across the screen from left to right over the course of five seconds: <s:Animate id=”myAnimation”> <s:motionPaths> <s:MotionPath property=”x”> <s:keyframes> <s:Keyframe time=”0” value=”0”/> <s:Keyframe time=”5000” value=”800”/> </s:keyframes> </s:MotionPath> </s:motionPaths> </Animate> Tip You can simplify declarations of a MotionPath object by using its subclass SimpleMotionPath. This class takes only property and value settings and can be used when you don’t need to control animation over multiple keyframes. n 18_488959-ch12.indd 37718_488959-ch12.indd 377 3/5/10 2:27 PM3/5/10 2:27 PM Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Part II: Designing Flex Applications 378 The application in Listing 12.3 causes a BitmapImage to change from so small that it’s invisible to full size, and simultaneously move to a new position when the user clicks the button. Notice that the Image object’s scaleX and scaleY properties are initially set to 0 to make it invisible. LISTING 12.3 Customizing animation with the Animate effect <?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/mx”> <fx:Declarations> <s:Animate id=”myAnimation”> <s:motionPaths> <s:MotionPath property=”x”> <s:keyframes> <s:Keyframe time=”0” value=”0”/> <s:Keyframe time=”1000” value=”{myButton.x-myImage.width-10}”/> </s:keyframes> </s:MotionPath> <s:MotionPath property=”y”> <s:keyframes> <s:Keyframe time=”0” value=”0”/> <s:Keyframe time=”1000” value=”{myButton.y-myImage.height-10}”/> </s:keyframes> </s:MotionPath> <s:MotionPath property=”scaleX”> <s:keyframes> <s:Keyframe time=”0” value=”0”/> <s:Keyframe time=”1000” value=”1”/> </s:keyframes> </s:MotionPath> <s:MotionPath property=”scaleY”> <s:keyframes> <s:Keyframe time=”0” value=”0”/> <s:Keyframe time=”1000” value=”1”/> </s:keyframes> </s:MotionPath> </s:motionPaths> </s:Animate> </fx:Declarations> <s:BitmapImage id=”myImage” source=”@Embed(‘assets/flower1.jpg’)” scaleX=”0” scaleY=”0”/> <s:Button id=”myButton” label=”Play Animation” click=”myAnimation.play([myImage])” bottom=”20” right=”20”/> </s:Application> 18_488959-ch12.indd 37818_488959-ch12.indd 378 3/5/10 2:27 PM3/5/10 2:27 PM Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Chapter 12: Controlling Animation and Working with Drag and Drop 379 On the Web The code in Listing 12.3 is available in the Web site files as AnimateDemo.mxml in the chapter12 project. n Figure 12.2 shows the resulting animation. FIGURE 12.2 An Animate effect in progress Resulting animation Using the Fade effect The Fade effect, as used in Listing 12.2, changes a component’s transparency over time. It sup- ports properties of alphaFrom and alphaTo that can be used to control the direction and level of change in the component’s visibility. The default values for these properties are 0 and 1, applied to hide or show the target component. The Fade class implements a tweening effect that modifies the component’s transparency level over a period of time. Whatever color or image is “behind” the target component shows through as its transparency level is changed. Cross-Reference The application in Listing 12.1 illustrates a good example of the Fade effect. n Using the Move and Move3D effects The Move and Move3D classes implement tweening effects that do what they say: they move the component on the screen to and from specific pixel positions over a period of time. The Move effect supports properties of xFrom, xTo, yFrom, and yTo that define the component’s position 18_488959-ch12.indd 37918_488959-ch12.indd 379 3/5/10 2:27 PM3/5/10 2:27 PM Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Part II: Designing Flex Applications 380 at the beginning and end of the effect. The Move3D class is derived from Move and shares its properties, and adds zFrom and zTo properties to affect the object’s relative z-order. For both effects, the object’s intermediate positions are then recalculated over the period of time defined by the effect’s duration property. Note The Move effect also supports properties names xBy and yBy that enable you to move an object a certain number of horizontal and vertical pixels from its current position. The Move3D effect supports a zBy property that does the same thing for z-order. n When using the Move effect to show and hide controls, you typically create two instances of the effect. The first, with coordinates placing the target object on screen, shows the object. The second, with coordinates set to negative values or values greater than the width of the application or other container, hides the object. Each defines specific starting and ending coordinates and is played with the play() method or in the context of a view state transition. Caution A Move effect’s target component should always be nested in a Group or other container with basic layout. If the target component is nested in a container with vertical or horizontal layout and the container’s dimensions change at runtime, the component’s position is recalculated based on the container’s layout rules. n The application in Listing 12.4 defines two Move effects that show and hide a target component by moving it on and off the application stage. Notice that the component’s positions at the start and end of the effect are either defined as specific coordinates or calculated based on the target compo- nent’s dimensions. LISTING 12.4 Using the Move effect <?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/mx”> <fx:Declarations> <s:Move id=”moveOn” xFrom=”{0-myImage.width}” xTo=”150” yFrom=”{0-myImage.height}” yTo=”100” duration=”2000”/> <s:Move id=”moveOff” xTo=”{0-myImage.width}” xFrom=”150” yTo=”{0-myImage.height}” yFrom=”100” duration=”2000”/> </fx:Declarations> <s:BitmapImage id=”myImage” source=”@Embed(‘assets/flower1.jpg’)” x=”150” y=”100” /> <s:Button x=”150” y=”375” label=”Show Image” 18_488959-ch12.indd 38018_488959-ch12.indd 380 3/5/10 2:27 PM3/5/10 2:27 PM Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. [...]... Chapter 12: Controlling Animation and Working with Drag and Drop As the designer and developer of a Flex application, you must select or create the drag -and- drop architecture that makes your interface the easiest to use Flex applications can implement drag -and- drop operations with two different approaches: l The MX and Spark List controls and the MX DataGrid have built-in drag -and- drop capability l All visual... property and style settings, event handlers, and in the case of containers, nested child components in its display list, and it’s represented by the main MXML in the document New Feature In Flex 3, the name of the default state was a blank String In Flex 4, the default value of the currentState property is the name of the first State object declared in the states property (an array) n Caution Flex 4 state... to Flash Builder If the application currently is displayed in Source mode, switch to Design mode 4 Locate the States view in the upper-right corner of Flash Builder Notice that the States view displays a single state labeled State1 5 As shown in Figure 13 .4, right-click anywhere in the States view and select New State 6 In the New State dialog box, set the new state’s name to oneway and click OK 40 2... participate in drag -and- drop operations through a set of classes and events specifically designed for this purpose Note Desktop applications deployed with Adobe AIR support native drag -and- drop, which enables the application user to move data, file references, and binary objects between Flex applications and other native applications with drag -and- drop gestures n Implementing drag -and- drop with List... relative to the cursor position and the image’s level of transparency The doDrag() method’s fifth and sixth arguments, xOffset and yOffset, determine the image’s horizontal and vertical relative position, and the seventh argument, imageAlpha, determines the amount of transparency This code uses the same proxy image but ensures that it’s fully opaque and positioned to the top and left of the cursor: DragManager.doDrag(event.target... place the image above and to the left of the cursor, while negative values place it below and to the right n Handling the dragEnter event A target control, located where the data will be dropped, detects a drag -and- drop operation by listening for the dragEnter event When the mouse cursor moves over the target object, this 3 94 Chapter 12: Controlling Animation and Working with Drag and Drop event generates... drag -and- drop operations to create an intuitive interface for managing data in a Flex application l MX and Spark List controls implement drag -and- drop with the dragEnabled and dropEnabled properties l 398 An effect is an ActionScript class that defines changes in a visual component’s position, visibility, scaling, and other properties over a period of time You can create highly customized drag -and- drop... implement Flash- based animation to make objects appear, disappear, move, or change size and orientation using predefined animations.) A transition is a class that enables you to easily associate effects with view state changes In this chapter, I describe how to create and use view states in Flex applications and how to use transitions and effects to animate the changes 399 IN THIS CHAPTER Understanding... files as ListDragAndDrop.mxml in the chapter12 project n Figure 12 .4 shows the drag -and- drop operation in action Implementing custom drag -and- drop operations You also can implement drag -and- drop operations manually using a set of classes and events specifically designed for the purpose The most critical tools for this job are these ActionScript classes: l DragSource This class contains data and formatting... formatting information and serves a messaging envelope containing the data you want to move l DragManager This class initiates and manages drag -and- drop operations containing whatever data you want the user to move in the application Initiating a drag -and- drop operation The DragSource and DragManager classes are members, respectively, of the mx.core and mx.managers packages and must be imported before . goal, and the most common result, of documents devel- oped in the Flash authoring environment and distributed through Flash Player. Animation in Flash. import the chapter12.fxp Flex project archive from the Web site files into your Flash Builder workspace. n 18 _48 8959-ch12.indd 37118 _48 8959-ch12.indd 371