| << Chapter < Page | Chapter >> Page > |
Scrollbars magically appear
If the object is dropped such that it protrudes outside the right side or the bottom of the Canvas object, scroll bars automatically appear on the Canvas object.
Allowable object types in the different Canvas objects
The following list shows the types of draggable objects that can be dropped into each of the Canvas objects:
Results of dragging objects
Figure 3 shows the results of dragging the button into the top Canvas object and dragging an image into the bottom Canvas object. You cannot drop the TextArea object into the top canvas, an image into the middle canvas, or the button into the bottom canvas.
Figure 4 shows the result of dropping the TextArea object into the middle Canvas object.
Will explain in fragments
I will explain the code for this program in fragments. Complete listings of the MXML code and theActionScript code are provided in Listing 13 and Listing 14 near the end of the lesson.
The MXML code is shown in Listing 1 and also in Listing 13 for your convenience.
<?xml version="1.0" encoding="utf-8"?><!--DragAndDrop04
--><mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"xmlns:cc="CustomClasses.*"><cc:Driver/></mx:Application> As is often the case in this series of tutorial lessons, the MXML file is very simple because the program wascoded 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.
The beginning of the Driver class
The Driver class begins in Listing 2.
Listingpackage CustomClasses{
import flash.events.MouseEvent;import flash.utils.getQualifiedClassName;import mx.containers.Canvas;
import mx.containers.VBox;import mx.controls.Button;
import mx.controls.Image;import mx.controls.Label;
import mx.controls.TextArea;import mx.core.DragSource;
import mx.core.UIComponent;import mx.events.DragEvent;
import mx.events.FlexEvent;import mx.managers.DragManager;
//====================================================//public class Driver extends VBox {
private var button:Button = new Button();private var butterfly:Image = new Image();
private var frog:Image = new Image();private var textArea:TextArea = new TextArea();
private var canvasA:Canvas = new Canvas();private var canvasB:Canvas = new Canvas();
private var canvasC:Canvas = new Canvas();private var labelA:Label = new Label();
private var labelB:Label = new Label();private var labelC:Label = new Label();
private var localX:Number;private var localY:Number;public function Driver(){//constructor
//Put a label at the top of each Canvas object.labelA.text = "Images and buttons only";
labelB.text = "Buttons and text areas only.";labelC.text = "Text areas and imges only";
canvasA.addChild(labelA);canvasB.addChild(labelB);
canvasC.addChild(labelC);//Add the Canvas objects to the VBox objectaddChild(canvasA);
addChild(canvasB);addChild(canvasC);
//Embed the image files in the SWF file.[Embed("butterfly.jpg")]
var butterflyA:Class;[Embed("frog.jpg")]var frogA:Class;//Load the images from the embedded image files
// into the Image objects.butterfly.load(butterflyA);
frog.load(frogA);//Put some text on the button and in the TextArea.button.label = "button";
textArea.text = "textArea";//Add the components to the Canvas objects.canvasA.addChild(butterfly);
canvasA.addChild(frog);canvasB.addChild(button);
canvasC.addChild(textArea);//Register an event handler that will be executed
// whcn the canvas and its children are fully// constructed.
this.addEventListener(FlexEvent.CREATION_COMPLETE,completeHandler);
} //end constructor
Notification Switch
Would you like to follow the 'Object-oriented programming (oop) with actionscript' conversation and receive update notifications?
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|