Flash Builder 4 and Flex 4 Bible- P9

Chia sẻ: Cong Thanh | Ngày: | Loại File: PDF | Số trang:50

Thêm vào BST

Báo xấu

92
lượt xem 23
download

Download Vui lòng tải xuống để xem tài liệu đầy đủ

Flash Builder 4 and Flex 4 Bible- P9: When Macromedia first released Flash MX in 2002, the product was branded as the new way to build Rich Internet Applications (known by the acronym RIA). The term was invented at Macromedia to describe a new class of applications that would offer the benefits of being connected to the Internet, including access to various types of Web-based services, but would solve many of the nagging issues that had been inherent in browser-based applications since the mid-1990s....

Chủ đề:

Bình luận(0) Đăng nhập để gửi bình luận!

Lưu

Nội dung Text: Flash Builder 4 and Flex 4 Bible- P9

CHAPTER Controlling Animation and Working with Drag and Drop F lash Player was originally created as a platform for presenting anima- tion over the Web. Future Splash Animator, the original ancestor of IN THIS CHAPTER the Flash authoring environment and Flash Player, was a Java-based Declaring effects in MXML software product that was integrated into the browser in much the same manner as Flash Player is today. Instantiating and playing effects with ActionScript Millions of Flash developers worldwide create compelling content designed for presentation in a Web application. Animation and related visual wizardry Using tweening and masking effects is the most common goal, and the most common result, of documents devel- oped in the Flash authoring environment and distributed through Flash Using composite effects Player. Implementing drag-and-drop Animation in Flash depends largely on use of the timeline: a visual interface interfaces 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 371
Part II: Designing Flex Applications 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. 372
Chapter 12: Controlling Animation and Working with Drag and Drop 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: 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 373
Part II: Designing Flex Applications 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): New Feature As with all nonvisual objects, MXML declarations of effect objects must be wrapped in the 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 374
Chapter 12: Controlling Animation and Working with Drag and Drop 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: 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. 375
Part II: Designing Flex Applications 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 On the Web The code in Listing 12.2 is available in the Web site files as PlayEffectWithAS.mxml in the chapter12 project. n 376
Chapter 12: Controlling Animation and Working with Drag and Drop 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: 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 377
Part II: Designing Flex Applications 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 378
Chapter 12: Controlling Animation and Working with Drag and Drop 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 379
Part II: Designing Flex Applications 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
Chapter 12: Controlling Animation and Working with Drag and Drop click=”moveOn.play([myImage])”/> On the Web The code in Listing 12.4 is available in the Web site files as MoveDemo.mxml in the chapter12 project. n The Move3D effect can be used to combine vertical and horizontal movement with changes to the object’s relative z-order or can be used to shrink and grow an object. The application in Listing 12.5 uses two Move3D instances to grow and shrink an object. It has the same visual result as the Flex 3 Zoom effect. LISTING 12.5 Using the Move3D effect On the Web The code in Listing 12.5 is available in the Web site files as Move3DDemo.mxml in the chapter12 project. n Using the Rotate and Rotate3D effects The Rotate and Rotate3D effects do what they say: they rotate an object in either two or three dimensions. The Rotate effect supports angleFrom, angleTo, and angleBy properties to control the direction and amount of rotation in two dimensions. It also includes a Boolean autoCenter Transform property that, when set to true, changes the rotation axis from the object’s top-left corner to its center. 381
Part II: Designing Flex Applications The application in Listing 12.6 rotates an object once in a clockwise direction. LISTING 12.6 Using the Rotate effect On the Web The code in Listing 12.6 is available in the Web site files as RotateDemo.mxml in the chapter12 project. n The Rotate3D effect takes advantage of Flash Player 10’s 3D capabilities and enables you to program multidimensional visual effects. It supports angleXFrom, angleXTo, angleYFrom, angleYTo, angleZFrom, and angleZTo properties to control each dimension individually. As with the Rotate effect, it supports a Boolean autoCenterTransform property that, when set to true, changes the rotation axis from the object’s top-left corner to its center. The application in Listing 12.7 rotates an object 360 degrees on all three axes over the course of two seconds. LISTING 12.7 Using the Rotate3D effect
Chapter 12: Controlling Animation and Working with Drag and Drop autoCenterTransform=”true” duration=”2000”/> On the Web The code in Listing 12.7 is available in the Web site files as Rotate3DDemo.mxml in the chapter12 project. n Figure 12.3 shows the resulting visual display with the object being rotated in all three dimensions. FIGURE 12.3 An object being rotated in three dimensions Using composite effects A composite effect plays two or more effects either simultaneously or consecutively. The Flex framework has two composite effects: l The Parallel effect. This effect plays two or more effects at the same time. l The Sequence effect. This effect plays two or more effects consecutively, with each effect starting after the previous effect has finished. Both Parallel and Sequence effects can be declared in either MXML or ActionScript and can nest as many child effects, simple or composite, as you need to get the desired visual result. 383
Part II: Designing Flex Applications Using Parallel effects To create a Parallel effect in MXML, declare an tag set and assign a unique id. Then, within the tag set, nest two or more effects that you want to play simultaneously: ...effect 1... ...effect 2... ...etc........ The effects defined with the tag set don’t need unique id properties because the entire effect is played either through association with a target component trigger or by an explicit call to the Parallel class’s play() method. The application in Listing 12.8 defines Parallel effects that include Move and Rotate nested effects. The visual result is an object that appears to roll on and off the application stage. Notice that the Rotate effect in the second Parallel has its angleFrom set to 360 and angleTo set to 0. The result is a counterclockwise rotation. LISTING 12.8 Using a Parallel effect 384
Chapter 12: Controlling Animation and Working with Drag and Drop On the Web The code in Listing 12.8 is available in the Web site files as ParallelDemo.mxml in the chapter12 project. n Tip The Parallel and Sequence effects are part of the older MX effects system and can’t operate directly on a Spark primitive object such as BitmapImage. The applications in Listing 12.8 and Listing 12.9 solve this by wrapping the BitmapImage inside a Spark Group, which automatically sizes itself to contain and display the image. Because Group is derived from UIComponent, it can be animated by the MX effect. n Note The Parallel, Sequence, and Pause classes are members of the mx.effects package. As a convenience, the Flex 4 MXML compiler allows you to refer to them with either the MX or Spark namespace prefixes. In the codes samples in this chapter, I use the Spark namespace prefix, as in , but the underlying ActionScript class is the same as if I used . n Using Sequence effects The Sequence effect plays two or more nested effects consecutively. In this code, a Sequence wraps two Move effects. The first nested effect moves the target object horizontally, and the second moves it vertically: Sometimes when using a Sequence, you want to create a delay between effects. The Pause effect is designed explicitly for this purpose: You add a Pause between other nested effects with a dura- tion indicating how long the delay should be in milliseconds. This version of the Sequence plays the same set of Move effects, but it adds a one-second delay between them: 385
Part II: Designing Flex Applications A Sequence effect can nest any number of child effects, enabling you to choreograph objects on the screen in sometimes elaborate ways. The application in Listing 12.9 causes an image to “bounce” across the screen with multiple Move effects nested within a Sequence. Notice that the Sequence effect handles its effectEnd event by placing the image back in its original starting position. LISTING 12.9 An application with a Sequence effect 386
Chapter 12: Controlling Animation and Working with Drag and Drop On the Web The code in Listing 12.9 is available in the Web site files as SequenceDemo.mxml in the chapter12 project. n Using easing classes An easing class enables you to modify the behavior of an event that transforms a component on the screen. By default, an effect transforms an object with a linear timeline. For example, a Move effect changes an object’s position on the screen with constant speed and motion. An easing class enables you to redefine the object’s movement mathematically and modify its rate of change so that, for example, it appears to speed up as it moves closer to its endpoint. The Flex SDK includes a set of easing objects in the spark.effects.easing package, each of which modifies the rate of object transformation in a different way. The Sine class, for example, can be used with a Move effect to cause the object to decelerate as it reaches its destination. You use easing classes by creating an instance of the desired class and assigning it to the effect’s easer property. You can either use the pre-built easing classes in the Flex SDK or you can define and use your own custom classes. To use a pre-built easing class, declare an instance of the class in the sec- tion of the MXML document. This declares an instance of the Bounce class: Then assign the easing object to the easer property of the effect class: The application in Listing 12.10 uses the Bounce easer class to cause the BitmapImage control to bounce as it drops onto a platform (created as an FXG graphic). LISTING 12.10 Using an easing class
Part II: Designing Flex Applications LISTING 12.10 (continued) myMove.play([myImage]) } ]]> On the Web The code in Listing 12.10 is available in the Web site files as EasingDemo.mxml in the chapter12 project. n Using Drag-and-Drop Operations Drag-and-drop interfaces enable users to give instructions to an application with simple mouse gestures. Pointing to an object that a person wants to manipulate is the most human of gestures, and grabbing and moving an object to change its current state is how we interact with the physical world in nearly every waking minute. The mouse turns that intuitive action into a computer instruction that graphical applications can interpret as needed. Drag-and-drop operations can be created to visually represent various software operations: l Selecting data l Moving data from one location to another l Deleting data l Managing data relationships l Modifying structures of information 388
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 controls can 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 controls All the MX and Spark List controls in the Flex SDK have built-in support for drag-and-drop operations. These controls include: l List (both the MX and Spark versions) l ComboBox l DataGrid l TitleList l HorizontalList l Tree Each control supports a set of properties that turn on and control drag-and-drop operations: l dragEnabled. This Boolean property, when set to true, enables a user to select one or more items from a List control and drag it or them (and underlying data) to another visual control in the application. l dragMoveEnabled. This Boolean property, when set to true along with dragEnabled, causes items dragged from a List control be removed from the initiating control’s data provider. This property also enables users to reorder data in a control’s dataProvider if the control’s dropEnabled property is set to true. l dropEnabled. This Boolean property, when set to true, enables a List control to accept a drop operation. When the user completes the operation, the target object adds the operation’s underlying data to its data provider. If the initiating object’s drag- MoveEnabled property is set to true, the items that were dropped in the target object are removed from the initiating object’s data source; otherwise, the initiating object’s data provider is left in its current state. 389
Part II: Designing Flex Applications Caution Setting dragMoveEnabled to true without also setting dragEnabled to true has no effect on the appli- cation. You must set dragEnabled to true to initiate a List-based drag-and-drop operation. n The following code creates a List control and a DataGrid control. The List control can initiate a drag-and-drop operation, and the DataGrid can accept the dropped data: Because the DataGrid control’s dragMoveEnabled property isn’t set to true, any objects dragged to the DataGrid are still displayed in the List after the operation is completed. The application in Listing 12.11 uses List and DataGrid controls. Notice these features of the sample application: l As the List row is dragged, an image of the row is generated and displayed as a visual indicator that the drag-and-drop operation is active. This image is known as the drag proxy. l The drag proxy initially includes a white X in a red circle, indicating that the operation can’t be completed yet. When the cursor moves over the target control with dropEnabled set to true, the white X and red circle disappear, indicating to the user that the operation can be completed. l The DataGrid control’s dragMoveEnabled property is set to true, so the data is added to the DataGrid and removed from the initiating List when the operation is completed. LISTING 12.11 Using a List-based drag-and-drop operation 390