Air, Flash Professional - Adding data to the clipboard - Lynda

One of the main goals of clipboard support is to make your data available and accessible to other applications, to do that you place the data on the clipboard. In the beginning of this chapter we looked at an Image Viewer application. Now this application is what we are going to use to add this functionality. So I am going to go ahead and open up the Image Viewer application. So I want to go to File and then open and then in the Chapter 3 folder of the exercise files I am going to go ImageViewer01 and then I am going to run the application by going to Control, Test Movie. If you remember when we click on an image you will see the larger image displayed above. To go for this video will be to take the larger image displayed above and add it to the clipboard so that other applications can access it. To do that we are first going to need to add a button to the Stage that will trigger our copy functionality. So the first thing we need to do is create a new layer. I am just going to call it Button because that's where we place our button. Then I am going to open the Components window, this can be done by going under Window and then Components and then I am going to drag out an instance of the button to the bottom right of the Stage. I can then go under the Parameters tab and change the label on this button to be copied. And we are going to give this one an instance name of copyButton. Now that we have set up our Stage we can now begin working with the ActionScript. I am going to highlight the Actions layer and I am going to go to Window and then Actions. Now the first thing we are going to need to do is we are going to need to import two specific classes. The first class that we are going to need to import is the Clipboard class. If we don't import this class we are not going to have the ability to add data to the Clipboard. To import that we simply need to say import flash.desktop.Clipboard. In addition there is also a class inside of AIR that defines what type of clipboard data formats AIR supports, that class is called ClipboardFormats. The clipboard formats that are supported by AIR are Text_Format, which holds raw text data, URL_Format that holds URL, formatted items, HTML_ Format which has html tags and text, Bitmap_Format, which contains image data, and File_List_Format, which contains data from a group of files. Now to use this inside of AIR you have to first import the ClipboardFormats class. And there are many instances where you have to tell the Clipboard either what type of data you want to set or what type of data you want to retrieve. So to import the Clipboard Formats class we need to say import flash.desktop.ClipboardFormats. Now that we have imported those we can begin to wire the Clipboard functionality into our Copy button. So I am going to go under where I can figure the TileList, I am going to create a new small little subsection. We will call it Add Event Listeners. And this is just a comment that helps keep our code organized. Now I want to say copyButton.addEventListener and then we are going to need to tell it what event we are listening for. In this case we are going to listen for MouseEvent.CLICK. And what we are going to want to do is we are going to want to call a method called onCopyClick. So now we can head down to the event handler section of our code. And we can create a function called onCopyClick; it will receive an event that will be a Mouse Event. And it is not going to return anything. Now what we are going to want to do in this method is actually add the data to the Clipboard inside of this method. But what we want to do is we also want to add a very specific kind of data, we want to add the image data. Now to add image data we are going to be using the ClipboardFormats.Bitmap_Format of the formats for the clipboard. So to do this we are going to want to have a function that basically takes the current image that's in the UIloader and returns all the bitmap data for it. So we are going to add a new subsection. And this section is just going to be called Methods because these are the methods that are going to respond to any specific event. And then we are going to want to create a method called renderBitmapData and it's not going to take any arguments but it's going to return bitmap data. The first thing we are going to need to do inside of our renderBitmapData function is we are going to create a new instance of the BitmapData class, but to do that, we are actually going to have to go back and also import the BitmapData class so let's go back up to the top of our ActionScript and directly under where we imported the ClipboardFormats we are going to import flash.display.bitmapdata. If we scroll down to where we have our renderBitmapData function the first thing we are going to do is we are going to create a variable BD which will be BitmapData and we are going to set that equal to new BitmapData. Now when you create a new BitmapData you are going to need to tell the width and the height that you want it to be. Now the great thing is our UI loader actually tells us what it's currently displaying and its width and height so we can use that as the basis for this BitmapData. So we can say imgLoader, which is our UI loader, .content. Now this is the reference to the actual image that is being displayed and we will say width and then we will say imgLoader.content.height. So now we have created our BitmapData object. And now what we are going to want to do is we are going to want to fill it with all of the data from the image that is not currently being displayed in the UI loader. Now the BitmapData class has a method called Draw that will take an object on the Stage and then draw its data out in BitmapData. So we can say bd.draw and then pass in a reference to the imgLoader.content. By doing this we now have created a new instance of the BitmapData class, we have set its specific width and height and now we have actually added the bitmap data from the current image in the UI loader into the BitmapData object. The last thing we need to do is actually return our bitmap data. Now that we have rendered our bitmap data we can go back up to where onCopyClick method and we can actually add this data to the Clipboard. So to get to the operating system Clipboard we say Clipboard.generalClipboard and this is a reference to the normal operating system Clipboard and then to actually add data to the Clipboard we are going to call the setData method. Then within this method the first thing we are going to want to tell is what type of data we are passing in. And this is where we use the ClipboardFormats class. We will say ClipboardFormats. And then we will say Bitmap_Format and this will be the image data. And then we will need to tell it what data that we wanted to pass in. So what we want to do first is we want to go back and create another instance of the BitmapData class and set it equal to renderBitmapData, the method that we just created. Then we can go to our setData call and we can pass in BD for the bitmap data. Now we can save our application and we can test it. So to test it we are going to go to Control, Test Movie and we are going to select an image. Let us select this image of Bourbon Street. Now we should be able to go and hit our Copy button and then I am going to bring up Microsoft Paint. And I should be able inside of Microsoft Paint to go Edit and then Paste and there is our image it's been brought in from our AIR application through the clipboard. By being able to add data to the clipboard you can create applications that have two way communications with other applications on the user's operating system. But AIR clipboard support does not end there. AIR also gives you access to retrieve data from the clipboard as well as using some advanced functions to control when an item is actually pasted onto the clipboard. Now that you have learned how to add data to the clipboard you can began to explore these other options that are available to you within AIR.