| << Chapter < Page | Chapter >> Page > |
Will explain in fragments
I will explain the code for this program in fragments. Complete listings of the MXML code and the ActionScript code are provided in Listing 16 and Listing17 near the end of the lesson.
The MXML file is shown in Listing 1 and also in Listing 16 for your convenience.
<?xml version="1.0" encoding="utf-8"?><!--DragAndDrop01--><mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"xmlns:cc="CustomClasses.*"><cc:Driver/></mx:Application> As you can see, the MXML file is very simple because the program was coded almost entirely in ActionScript.The MXML code simply instantiates an object of the Driver class. From that point forward, the behavior of the program is controlled by ActionScript code.
Beginning of the Driver class
The Driver class begins in Listing 2.
package CustomClasses{
import flash.events.MouseEvent;import mx.containers.Canvas;import mx.controls.Image;
import mx.core.DragSource;import mx.events.DragEvent;
import mx.events.FlexEvent;import mx.managers.DragManager;
//====================================================//public class Driver extends Canvas {private var imageA:Image = new Image();
private var imageB:Image = new Image();private var imageC:Image = new Image();
private var localX:Number;private var localY:Number; Extends the Canvas class
As you can see in Listing 2, the Driver class extends the Canvas class. Therefore, an object of the Driver class is a Canvas object and has all of the attributes associated with a Canvas object. Among those attributes is the following, which was taken from the documentation :
"A Canvas layout container defines a rectangular region in which you place child containers and controls. It is the onlycontainer that lets you explicitly specify the location of its children within the container by using the x and y properties of each child."
As you will see, the new location of each image is explicitly specified each time it is dragged to a new location.
Instantiate three new Image objects
The code in Listing 2 instantiates three new Image objects, which will be loaded with the contents of the three image files listed earlier . The code in Listing 2 also declares two instance variables that will be used to store the position of the mouse pointer within animage when the drag operation is initiated.
Beginning of the constructor for the Driver class
The constructor for the Driver class begins in Listing 3.
public function Driver(){//constructor
setStyle("backgroundColor",0x00FFFF);setStyle("backgroundAlpha",1.0); Make the canvas visible
Normally a Canvas object is not visible. The code in Listing 3 sets the alpha value for the Canvas object to 1.0 making it opaque and visible. Listing 3 also sets the background color of the Canvas object to cyan as shown in Figure 1.
The size of the Canvas object will be set later when the Canvas object and all of its children have been constructed.
Notification Switch
Would you like to follow the 'Object-oriented programming (oop) with actionscript' conversation and receive update notifications?
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|