Copy to Clipboard with ZeroClipboard, Flash 10 and jQuery

So I knew it would happen at some point. Some handy flash developer would figure out how to get around the security limitation in Flash 10 that requires the System.setClipboard() method (ActionScript) to only be called by an action that originates from a user interaction. Last week I ran across an article on Ajaxian that linked to ZeroClipboard developed by Joseph Huckaby that worked as promised.

From the ZeroClipboard web site:

This library is fully compatible with Flash Player 10, which requires that the clipboard copy operation be initiated by a user click event inside the Flash movie. This is achieved by automatically floating the invisible movie on top of a DOM element of your choice. Standard mouse events are even propagated out to your DOM element, so you can still have rollover and mouse down effects.

With today’s post I will show you a contrived example to get you started. I eventually hope to add this to the contextMenu.js jQuery plugin that I use, but for now this should be pretty straight forward. I do want to note that in the demo and download I am loading the latest version of the jQuery library (1.3.1) from Google’s CDN for the first time in any of my posts. For more information on how to do this see the instructions from Google. I am also shortcutting the ready event which is a tip I found from a great post Improve your jQuery – 25 excellent tips.

Screenshots of End Product:

jQuery Used to Attach a ZeroClipboard Instance to Each Copy Icon:

Please let me know in the comments what you think and what you might do different. Be sure to checkout the demo and download.