Tài liệu Flash Builder 4 and Flex 4 Bible- P9 ppt

Using EffectsAn 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 framewo

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

Flash 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 oped in the Flash authoring environment and distributed through Flash Player

devel-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 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

motiva-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

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

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 tion in one of four directions (right, left, up, or down) This class is extended from

transforma-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

Declaring and playing effect classes

You play effects either in a view state transition or by calling an effect object’s play() method

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):

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 nents play the effects when clicked, causing the BitmapImage to fade in and out

<s:Fade id=”fadeIn” alphaFrom=”0” alphaTo=”1”/>

<s:Fade id=”fadeOut” alphaFrom=”1” alphaTo=”0”/>

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.

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

var myFade:Fade = new Fade();

</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

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 ties, with any data types, over a period of time

proper-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”/>

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

<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”/>

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 ports properties of alphaFrom and alphaTo that can be used to control the direction and level

sup-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

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

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

<s:Move3D id=”bigger” zBy=”-10000”/>

<s:Move3D id=”smaller” zBy=”10000”/>

</fx:Declarations>

<s:BitmapImage id=”myImage” source=”@Embed(‘assets/flower1.jpg’)”/>

<s:Button x=”150” y=”375” label=”Show Image”

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 BooleanautoCenterTransform 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.6 rotates an object once in a clockwise direction.

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 BooleanautoCenterTransform 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

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

Using Parallel effects

To create a Parallel effect in MXML, declare an <mx:Parallel> tag set and assign a unique

id Then, within the tag set, nest two or more effects that you want to play simultaneously:

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

<s:Button x=”374” y=”375” label=”Hide Image”

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 <s:Parallel/>, but the underlying ActionScript class is the same as if I used <mx:Parallel/> 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:

<s:Sequence id=”moveOn” target=”{myImage}”>

<s:Move xFrom=”{0-myImage.width}” xTo=”150”

yFrom=”0” yTo=”0”/>

<s:Move yTo=”100”/>

</s:Sequence>

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 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:

dura-<s:Sequence id=”moveOn” target=”{myImage}”>

<s:Move xFrom=”{0-myImage.width}” xTo=”150”

yFrom=”0” yTo=”0”/>

<s:Pause duration=”1000”/>

<s:Move yTo=”100”/>

</s:Sequence>

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

private var stageHeight:Number;

private function bounce():void {

myImage.x = 0;

myImage.y = 0;

} ]]>

</fx:Script>

<fx:Declarations>

<s:Sequence id=”bouncingBall” target=”{myImage}”

effectEnd=”replaceBall()”>

<s:Move xTo=”{stageWidth/5}” yTo=”{stageHeight-myImage.height}”/>

<s:Move xTo=”{stageWidth/5*2}” yTo=”{stageHeight-myImage.height*4}”/>

<s:Move xTo=”{stageWidth/5*3}” yTo=”{stageHeight-myImage.height}”/>

<s:Move xTo=”{stageWidth/5*4}” yTo=”{stageHeight-myImage.height*3}”/>

<s:Move xTo=”{stageWidth}” yTo=”{stageHeight-myImage.height}”/>

</s:Sequence>

</fx:Declarations>

<s:BitmapImage id=”myImage” source=”@Embed(‘assets/ball.png’)”/>

<s:Button label=”Bounce Ball” click=”bounce()” right=”10” bottom=”10”/>

</s:Application>

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 <fx:Declarations> tion of the MXML document This declares an instance of the Bounce 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 (continued)

myMove.play([myImage]) }

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:

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)

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

Setting dragMoveEnabled to true without also setting dragEnabled to true has no effect on the cation You must set dragEnabled to true to initiate a List-based drag-and-drop operation n

appli-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:

<s:List dataProvider=”{myData}” dragEnabled=”true”/>

<s:ArrayCollection id=”acBooks” source=”{bookModel.book}”/>

<fx:Model id=”bookModel” source=”model/books.xml”/>

<fx:Style source=”assets/styles.css”/>

<views:Header width=”{content.width}”/>

<s:HGroup id=”content”>

<s:Panel id=”catalogPanel” title=”Catalog”>

<s:List dataProvider=”{acBooks}” labelField=”title”

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 cifically designed for the purpose The most critical tools for this job are these ActionScript classes:

spe-l DragSource This class contains data and 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 use:

import mx.core.DragSource;

import mx.managers.DragManager;

FIGURE 12.4

When a user drags an object into a List control that has dropEnabled set to true, the placement of the data in the target control’s data provider is indicated by a horizontal line that appears near the mouse cursor’s location

Note

Custom drag-and-drop operations can be initiated upon any mouse event; they are typically initiated upon a

mouseDown event (which indicates that the user has pressed the mouse button but hasn’t yet released it) n

To initiate a custom drag-and-drop operation, follow these steps:

1 Create an instance of the DragSource class with its no-arguments constructor method.

2 Populate the DragSource class with data by calling its addData() method.

3 Call the static method DragManager.doDrag() to start the drag-and-drop operation.

In the following code, a mouseDown event on a DataGroup control is handled with a call to a custom method that will initiate the drag-and-drop operation:

When you initiate a drag-and-drop operation with a List control with dragEnabled set to true, the name

of the format is always items n

In the following method, the expression event.target.data returns a reference to the ing object’s underlying data

initiat-Note

The code in the initiateDrag() function is wrapped in a conditional block that checks to be sure the

mouseDown event was handled for the DataGroup control’s item renderer, rather than for any of the visual objects inside the group n

The bookItem format is an arbitrary string that identifies the type of data being moved The

doDrag() method receives three required arguments: a reference to the visual component that initiated the operation, the DragSource object containing the data, and a reference to the

MouseEvent object that was passed into the current method:

private function initiateDrag(event:MouseEvent):void{

if (event.target is ItemRenderer) {

var source:DragSource = new DragSource();

var itemData:Object = event.target.data;

source.addData(itemData,”bookItem”);

DragManager.doDrag(event.target as UIComponent, source, event, bookProxy, 20, 20, 1);

}}Tip

You can call the DragSource class’s addData() method multiple times to pass data in as many formats as you need This is analogous to a clipboard operation, where data might be shared between applications in mul- tiple formats through a copy-and-paste operation, but only formats that are common to the source and the tar- get applications are used at any given time n

Creating a proxy image

A proxy image is displayed during a drag-and-drop operation as a visual indicator of the type or content of the data being moved When you initiate drag-and-drop with List controls, the drag proxy image is created dynamically from the current screen display For custom drag-and-drop operations, you’re responsible for providing the drag proxy image

Note

If you don’t provide a drag proxy image for a custom drag operation, a blank, partially transparent rectangle is created by the framework of the same shape and dimension as the object that initiates the operation While this can work okay, the visual result is bland and uninformative n

Drag proxy images should be embedded in the application for the best possible performance

Follow these two steps for this part of the process:

1 Embed a graphic using the [Embed] metadata tag, and assign it a Class variable

ProgrammaticSkin, SpriteAsset, SystemManager, TextFieldAsset, and UIComponent n

The following code embeds an image and wraps it in a BitMapAsset object that’s suitable for use

as a proxy image:

[Embed(source=”assets/book.png”)]

private var bookImage:Class;

private var bookProxy:BitmapAsset = BitmapAsset(new bookImage());

You cast the instance of the proxy image class as BitMapAsset to fulfill the requirement that the proxy image object implements IFlexDisplayObject interface

To use the proxy image in a drag-and-drop operation, pass the proxy object as the fourth argument

in the call to DragManager.doDrag():

DragManager.doDrag(event.target as UIComponent, source, event, bookProxy);

You also can control the position of the drag proxy image 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 ment, 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:

argu-DragManager.doDrag(event.target as UIComponent, source, event, bookProxy, 20, 20, 1);

Note

Positive offset values for the proxy image 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

event generates a DragEvent object The DragEvent class has a dragSource property that references the DragSource object that contains the operation’s underlying data.

The first step in handling the dragEnter event is to determine whether the operation contains data

in a format you can deal with in the current context You do this by calling the DragSource class’s

hasFormat() method and passing in a format string you can handle If the selected format exists in the drag source, you then accept the operation by calling DragManager.acceptDragDrop()

and passing in a reference to the object that accepts the operation

This code detects a particular drag format and accepts the operation:

private function dragEnterHandler(event:DragEvent):void{

if (event.dragSource.hasFormat(“bookItem”)) {

DragManager.acceptDragDrop(event.target as UIComponent);

}}

When you call acceptDragDrop(), the red icon with the white X on the proxy image pears, indicating to the user that the data is ready to be dropped

disap-Handling the dragDrop event

When the user drops the data over an object that has already accepted the operation (as described

in the preceding section), the object dispatches a dragDrop event This event also generates a

DragEvent object In addition to the dragSource property described previously, this object also has a dragInitiator property that references the object that initiated the operation

The DragSource class has a method named dataForFormat() To retrieve data that should be acted upon, call the method and pass in the format of the data you want:

var dragData:Object = event.dragSource.dataForFormat(“bookItem”);

After you have a reference to the dropped data, you can manipulate it in a database, move it to other data buckets in the application, or simply remove it The following code handles the drag-and-drop operation by first getting references to data through the initiating object’s underlying data object and then removing the underlying data from the DataGroup control’s data provider:

private function dragDropHandler(event:DragEvent):void{

var dragData:Object = event.dragSource.dataForFormat(“bookItem”);

var itemIndex:int = acBooks.getItemIndex(dragData);

var bookTitle:String = dragData.title;