Desktop Interaction
Drag and Drop in AIR using Flash CS3
by Sidney de Koning
We all use desktop applications; our calculator, music player, text editor etc. When using these apps, our expectations are different when using a website.
of 250x250 pixels. Draw a square and convert it to an MovieClip and place its centerpoint top left, drag it on the stage and place it at 0,0. Now give it a instance name of 'hit'. Its time to write some code:
What you will learn… • The most important classes to use when dragging • Understanding of using dragging files in- and out or your application
What you should know… • Actionscript 3 and AIR basics • Working with Arrays and File objects.
AIR has this functionality as well, letting the user drag just about anything in and out of their application. With this article I want to show you how easy it is to use drag and drop behaviour in your AIR application and will walk you through and example all of the above. Plus a little extra! Drop it AIR uses several classes to handle the dragging an dropping of files. The three most important ones are: • NativeDragEvent – This class dispatches several events and also holds the clipboard data. It also validates and accepts the file being dragged. NativeDragEvents are dispatched from the drop target an well as the object being dragged (in or out). • NativeDragManager – This is the class that tells you if the drop target you chose is allowed, the kind of drop it would be and handling of the mouse icons. It also contains the doDrag function; which allows you to drag items in or out of you application or drag out and into other applications. • Clipboard -AIR uses the Clipboard Class to hold the data that is transferred. This class can hold different types of formatted data as defined by the ClipboardFormats Class. Data like HTML, plain text, File Lists and Bitmaps.
Level of difficulty
O n a website the logo links back to the homepage, a single click opens a page and the menu includes a button that says 'home', to name a few. Applications have a different pattern. They have menu- and toolbars, right click shows a context menu and a settings option that allows you to adjust things to fit your needs. Users expect applications to behave differently than websites and there are some design issues to be aware of. For instance; if you have an media player like Winamp, users expect that when you double click (or single click, depending on your OS settings) an mp3 file, it gets loaded, visually shows a queue of files and starts playing with the first song. However when you drag and drop files in the player, it should behave the same as the previous operation. When it comes to navigating through applications on the the operating system, I tend to drag and drop everything, everywhere I want. This is an action that is native to almost every operating system, Windows, Linux and Mac alike. You drag the url field out of your browser to the desktop and it becomes a *.url file, you drop in inside of an textfile it shows you the link. You drag an file out of your mail client and it saves it to wherever you drop it. Anybody can do it.
Lets get to it! First we set up our AIR application in Flash CS3 by creating an stage
Figure 1. Drag and drop behavior in AIR
03/2009 (5)
68
Made with FlippingBook HTML5