Nothing new here
There is nothing new in Listing 2 that you haven't learned about in previous lessons.
A creationComplete event handler
The last statement in Listing 2 registers a CREATION_COMPLETE event handler on the VBox object. The code in the handler is executed when the VBox object and all of its children have been fully created. The event handlerbegins in Listing 3.
Beginning of the creationcomplete event handler.
private function completeHandler(
event:mx.events.FlexEvent):void{//Make the Canvas objects visible.
canvasA.setStyle("backgroundColor",0x00FFFF);canvasB.setStyle("backgroundColor",0x00FFFF);
canvasC.setStyle("backgroundColor",0x00FFFF);//Set the width and height of the canvas objects// based on the dimensions of butterfly.
canvasA.width = 1.6*butterfly.width;canvasA.height = 1.6*butterfly.height;
canvasB.width = 1.6*butterfly.width;canvasB.height = 1.6*butterfly.height;
canvasC.width = 1.6*butterfly.width;canvasC.height = 1.6*butterfly.height;//Reduce the width of the textArea to less than
// its default width.textArea.width = butterfly.width;//Move the images, the button, and the text area
// below the labelbutterfly.y = labelA.height;
frog.y = labelA.height + butterfly.height;button.y = labelB.height;
textArea.y = labelC.height; Straightforward code
The code in Listing 3 is straightforward and you shouldn't have any difficulty understanding it based on what you have learned in previous lessons.
Register a mouseDown event listener on each draggable object
Listing 4 registers the same MOUSE_DOWN event listener on each draggable object. This is the beginning of the process that causes the two Image objects, the Button object, and the TextArea object to be draggable.
Register a mousedown event listener on each draggable object.
butterfly.addEventListener(MouseEvent.MOUSE_DOWN,
mouseDownHandler);frog.addEventListener(MouseEvent.MOUSE_DOWN,
mouseDownHandler);button.addEventListener(MouseEvent.MOUSE_DOWN,
mouseDownHandler);textArea.addEventListener(MouseEvent.MOUSE_DOWN,
mouseDownHandler); There is nothing new or unique about the registration code in Listing 4. You have seen code like that in almost every lesson. The material that is unique tothe drag and drop process is the code in the mouseDown event handler method that I will discuss next.
The beginning of the mouseDown event handler
I will put the explanation of the creationComplete event handler on hold while I explain the mouseDown event handler. I will return to the creationComplete event handler later.
The mouseDown event handler that is registered on the four draggable objects begins in Listing 5. This method is executed whenever any one of those objectsdispatches a mouseDown event, and that is the beginning of the drag and drop process.
The beginning of the mousedown event handler.
private function mouseDownHandler(
event:MouseEvent):void{this.localX = event.localX;
this.localY = event.localY;