Prepare the three images
Listing 4 prepares the three images for use by the program.
Prepare the three images.
//Embed the image files in the SWF file.
[Embed("snowscene.jpg")]var imgA:Class;[Embed("space.jpg")]
var imgB:Class;[Embed("frog.jpg")]var imgC:Class;//Load the images from the embedded image files
// into the Image objects.imageA.load(imgA);
imageB.load(imgB);imageC.load(imgC);// Set the z-axes indices such that the frog is
// in front, the snowscene is in the middle and the// space image is at the back.
addChildAt(imageB,0);//set index to 0addChildAt(imageA,1);//set index to 1
addChildAt(imageC,2);//set index to 2 Listing 4 begins by embedding the three image files in the SWF file. Then it loads the contents of the image files into the Image objects instantiated in Listing 2. Finally Listing 3 adds the Image objects as children of the Canvas object.
Set the z-axis indices
The z-axis index of each Image object is set in Figure 4 so as to place the space image at the back, the frog image at the front, and the snowscene image between the othertwo.
Register a creationComplete event handler
Listing 5 registers a creationComplete event handler on the Canvas object. This event handler will be executed after the Canvas object and all of its children are fully constructed.
Register a creationcomplete event handler.
this.addEventListener(FlexEvent.CREATION_COMPLETE,
completeHandler);} //end constructor Beginning of the creationComplete event handler
The creationComplete event handler begins in Listing 6. This handler is executed once when the Canvas object and all of its children have been constructed.
Beginning of the creationcomplete event handler.
private function completeHandler(
event:mx.events.FlexEvent):void{//Set the width and height of the canvas based on
// the dimensions of imageB.this.width = 1.3*imageB.width;
this.height = 1.3*imageB.height; Set the size of the Canvas object
Listing 6 sets the width and height of the Canvas object based on the dimensions of the Image object referred to by imageB . It was not possible to reliably execute this code in the constructor because the code mightbe executed before the contents of the image file were fully loaded into the Image object.
Register a mouseDown event handler on each Image object
A drag and drop operation is heavily dependent on the handling of different types of events. The remaining code in the creationComplete event handler registers appropriate event handlers on the images and on the Canvas object to support the drag and drop operation with the Canvas object as the drag target.
As you will see later, a drag operation is initialized when an image dispatches a mouseDown event. Listing 7 registers the same mouseDown event handler on all three Image objects.
Register a mousedown event handler on each image object.
imageA.addEventListener(MouseEvent.MOUSE_DOWN,
mouseDownHandler);imageB.addEventListener(MouseEvent.MOUSE_DOWN,
mouseDownHandler);imageC.addEventListener(MouseEvent.MOUSE_DOWN,
mouseDownHandler);