Drag and Drop in AIR using Flash CS3
import flash.desktop.*; import flash.events.*; import flash.display.*; import flash.filesystem.*;
Listing 1. Setting up your application
var fileList:Array = new Array(); var fileTypes:Array = new Array(".jpg", ".png", ".gif"); var image:Bitmap; var bmd:BitmapData; // startApp(); function startApp(evt:Event = null ):void {
Why am I using a star for my imports? That way I don't have to import every single file by hand, but let Flash choose, since it only compiles the ones it needs. Next I need to create an array to hold reference of the list of files or file I drag in. The important part of this bit is the fileTypes array. When the user drops in a file we check that filetype for the filetype in our array. You can change and extend these to suit your needs. The last will be two variables called image and bmd , which in the end will be the image bitmap we drag in and its corresponding bitmapdata, see (Listing 1). We are also setting up the stage to respond to the DRAG_ENTER event and the hit clip we just created to handle the actual dropping of the file onto the hit clip on the stage. This hit MovieClip will be our drop target. This is the area we go over to activate drops and other actions. The setMovieProps method is pretty self explanatory. It sets the scaling to none, so when the image is loaded we can size up the background of the app to show the image correctly, see (Listing 2). The reason why we check to see if the event has a clipboard format is because in this case an MouseClick on the drop target and an dragEnter are basically the same. Sowe can only continue if it we are really dragging images in. We have to cast the data coming from the clipboard to an Array, using the 'as Array' this is one of the few datatypes we cannot cast in brackets because else the compiler thinks we try fill the array. The fastest way to handle the checking of appropriate file type is to use indexOf on the fileTypes array against the type of file we pass though the function. function checkExtension( pFile:String ): void { if (fileTypes.indexOf( pFile ) > -1 ) { NativeDragManager.acceptDragDrop(hit); The above code is executed when we hover over our hit area, still holding the files. Notice that when you trace something in the onDragEnter handler, it keeps tracing, because the event kees firing. When we release the mouse button and do the drop onto our hit area, the NativeDragEventevent is fired and the onDragDrop handler called. Then we load the first image of the fileList array, see (Listing 3). When the image is completed with the loading process we want to display it and } }
stage.addEventListener(NativeDragEvent.NATIVE_DRAG_ENTER, onDragEnter); // hit.doubleClickEnabled = true ; hit.buttonMode = true ; hit.addEventListener(NativeDragEvent.NATIVE_DRAG_DROP, onDragDrop); setMovieProps();
} function setMovieProps():void {
stage.scaleMode = StageScaleMode.NO_SCALE; stage.align = StageAlign.TOP_LEFT; stage.stageFocusRect = false ; stage.quality = StageQuality.BEST;
}
Listing 2. Dragging in to check file extension
function onDragEnter(evt:NativeDragEvent):void {
if ( evt.clipboard.hasFormat(ClipboardFormats.FILE_LIST_FORMAT)) { fileList = new Array();
fileList = evt.clipboard.getData(ClipboardFormats.FILE_LIST_FORMAT)
as Array;
var fileType:String = File(fileList[0]).type; checkExtension( fileType );
}
}
Listing 3. Handling the drop sequence; Loading in the dropped image
function onDragDrop( evt:NativeDragEvent ):void { loadImage( fileList[0].url.toString() ); } function loadImage( filePath:String ):void { var loader:Loader = new Loader();
var request:URLRequest = new URLRequest(filePath); loader.contentLoaderInfo.addEventListener(Event.COMPLETE,
handleFileLoadComplete, false , 0, true );
loader.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR,
ioErrorHandler, false , 0, true ); loader.load(request); addChild(loader); } function ioErrorHandler(event:IOErrorEvent):void { trace("Unable to load image: " + event.text); } function handleFileLoadComplete( evt:Event ):void {
03/2009 (5)
69
Made with FlippingBook HTML5