Desktop Interaction
scale up the application so the entire image is visible. After adding some margins for the native operating system bars, we are done with this dragging in part. So take a deep breath and relax for a little while. (And don't forget to close the function!), see (Listing 4) So just to recap; we created a drop target, added listeners, created the functionality so we can drop in images in our application depending on our preferences and we sized up the nativeWindow to fit our image. There are a couple of cool things we can do now; take a snapshot of our complete application so we can drop this image in text documents and drag out the same image and save it to the local system. Dragging Out We now got everything in place to add a little bit of extra spice to our application. Wouldn't it be cool if we could drag an image out and exchange it with any other application that is running? If you look back at the startApp
function you see that we add all these listeners to our hit clip. Now after the last one, add another. hit.addEventListener( MouseEvent.MOUSE_ DOWN, onImageDragOut ); This will make sure that when ever we click the hit clip, the mouse down event is fired, and we can respond in the appropriate way. Lets think about the steps we need to do to make this happen before we write any code; click the image, draw an new bitmapdata object, create a new clipboard object and set its data to whatever image we dragged in. And as a final step we need to allow the drag, see (Listing 5). The last thing we are going to do is save the image on the users desktop. This functionality is not native in Flash but Adobe has released their core package on Googles code repository so everybody can use it. You can find it here http://code.google.com/p/
as3coreli b. Just extract the files from the zip, place in the root of your machine and add the class path to Flash. After doing so import the JPGEncoder.
import com.adobe.images.*;
Again we need to create and eventListener on the hit clip. This time we listen for the doubleClick event.
hit.addEventListener(MouseEvent.DO UBLE_CLICK,
onDoubleClick);
So whenever you doubleclick on your app, it saves the image to the desktop. And we also create a another function to take some bitmapdata and with the classes found in the filesystem package we write every byte on the desktop, see (Listing 6). Now test it, sit back and enjoy your creation! Fun stuff to play with and figure out: • Make this application in such a way that it handles multiple files, create two buttons so you can skip through them. Like a slideshow. • Animate the window to change its width and height by using a package like TweenMax or Tweener. • Show a preview image of what we are dragging out, as a extra / substitute to the mouse cursor. All source files can be downloaded at http://www.funky- monkey.nl/blog/publications/
Listing 4. Sizing the appication window to dimensions of image
var loader:Loader = Loader(evt.target.loader); var img:Bitmap = Bitmap(loader.content); stage.nativeWindow.width = img.width + 5; stage.nativeWindow.height = img.height + 32;
hit.width = img.width; hit.height = img.height; addChild(hit);
Listing 5. Setting up dragOut Event and creating bitmapData for later use
function onImageDragOut( event:MouseEvent ):void { var clipboard:Clipboard = new Clipboard(); var bm:BitmapData = takeScreenShot( );
clipboard.setData( ClipboardFormats.BITMAP_FORMAT, bm ); NativeDragManager.doDrag( hit, clipboard, bm );
} function takeScreenShot( ):BitmapData {
bmd = new BitmapData(stage.stageWidth, stage.stageHeight, true , 0x000000); bmd.draw(stage); return bmd;
SIDNEY DE KONING Sidney de Koning (27) is a full time multimedialist. When he was 8 he got hooked on BASIC on his grandfather's Amiga 500. 19 years later he still gets excited developing applications and websites. His passion is to play with new technologies like Adobe's AIR and to teach Actionscript to students. When he's not working or teaching he likes to keep sane by meditating, reading, writing and running. He also maintains a weblog about AIR and Flash development at http://www.funkymonkey.nl/ blog/. While writing about Flash is his passion, his dream is to someday speak at a Flash event like FITC or FOTB..
}
Listing 6. Writing file and saving it to the desktop
function onDoubleClick(evt:Event):void {
var bytes:ByteArray = new JPGEncoder( 80 ).encode( takeScreenShot() ); var file:File = File.desktopDirectory.resolvePath( "screenShot.jpg" ); var fileStream:FileStream = new FileStream(); fileStream.open( file, FileMode.WRITE ); fileStream.writeBytes( bytes );
}
03/2009 (5)
70
Made with FlippingBook HTML5