Copy TextField text to System clipboard | Actionscript (AS2 + AS3) Tutorial

Overview

Integrating the clipboard of the operating system with your flash projects is sometimes essential. It’s a very simple and boils down to one basic method… System.setClipboard(). I’ve found a couple other things help the user experience though, such as selecting the text that gets copied and giving the user some sort of feedback to let them know that the text was successfully copied. Here’s a simple way to do it. Have any suggestions to make it better?

I’ve included an as2 version as well as as3. I’ve promised myself to migrate to as3, so I’m not coding anything in 2 that I don’t do in 3 also. This was to discourage me from coding in as2 and to encourage me to code as3, but also let me learn by doing it in both to see the actual differences if I was stuck doing a project in as2. I figured this could help others see the differences between the two versions of actionscript a bit easier and make their own migration as well!

Steps

  1. copy to OS clipboard = System.setClipboard(“Text to COPY”) of System.setClipboard(textBoxToCopy.text)
  2. set selection to text that is copied
  3. give user feedback

Examples and Source

AS2

Get Adobe Flash player

textBox.textBox.text = "Click this text box to copy the text or click the COPY button below. You will see feedback to the user and this text copied to your clipboard!\n\n"+
'copyButton.onRelease = textBox.onPress = function(){\n\tSelection.setFocus("textBox");\n\tSelection.setSelection(0, textBox.text.length);\n\tSystem.setClipboard(textBox.text);\n\ttrace("copied: "+textBox.text);\n\tfeedback("Text Copied!");\n}';

copyButton.onRelease = textBox.onPress = function(){
  Selection.setFocus("textBox.textBox");
    Selection.setSelection(0, textBox.textBox.text.length);
  System.setClipboard(textBox.textBox.text);
  trace("copied: "+textBox.textBox.text);
  textFeedback("Text Copied!");
}

function textFeedback(theFeedback:String){
  feedback.text = theFeedback;
  setTimeout(function(){feedback.text="";}, 1200);
}

AS3

Get Adobe Flash player

textBox.text = "Click this text box to copy the text or click the COPY button below. You will see feedback to the user and this text copied to your clipboard!\n\n"+
'function copyText(e:MouseEvent):void{\n\ttextBox.setSelection(0, textBox.text.length)\n\tSystem.setClipboard(textBox.text);\n\ttrace("copied: "+textBox.text);\n\ttextFeedback("Text Copied!");\n}';

//set it so the textBox selection will show even when textBox has no focus
textBox.alwaysShowSelection = true;

textBox.addEventListener(MouseEvent.CLICK, copyText);
copyButton.addEventListener(MouseEvent.CLICK, copyText);

function copyText(e:MouseEvent):void{
  textBox.setSelection(0, textBox.text.length)
  System.setClipboard(textBox.text);
  trace("copied: "+textBox.text);
  textFeedback("Text Copied!");
}

function textFeedback(theFeedback:String):void {
  feedback.text = theFeedback;
  setTimeout(function(){feedback.text="";}, 1200);
}

Download

Source files: clipboard_as3.fla clipboard_as2+as3.zip

This entry was posted in tutorial and tagged , , , , , , , , , , . Bookmark the permalink. Post a comment or leave a trackback: Trackback URL.

21 Comments

  1. Mothmenace
    Posted November 17, 2008 at 12:44 pm | Permalink

    Nice tutorial – many thanks.

    You should include the “import flash.system.*” though.

  2. Posted December 3, 2008 at 2:00 pm | Permalink

    Most helpful – thanks.

    I don’t get the highlighted text effect after copying however – could it me a Mac thing?

    Thanks anyways …

  3. knuckfubuck
    Posted December 4, 2008 at 7:48 pm | Permalink

    Great tutorial. Exactly what I was looking for. Thanks.

  4. Posted December 12, 2008 at 4:33 am | Permalink

    Great work

    Thanks

  5. Posted January 29, 2009 at 5:01 am | Permalink

    Thanks, it helps!

  6. jo
    Posted February 11, 2009 at 9:10 am | Permalink

    hey, this helped me a lot!! thanx so much….rock on!

  7. fakir
    Posted March 17, 2009 at 9:18 am | Permalink

    Thank you!

  8. Joe
    Posted April 15, 2009 at 7:49 am | Permalink

    Thanks! Very well done – exactly what I was looking for. Thanks again, and have an AWESOME week.

    joeFREELANCE

  9. ddee
    Posted April 23, 2009 at 9:16 am | Permalink

    Spot on, great solution!
    Thanks

  10. Joey
    Posted August 9, 2009 at 5:03 pm | Permalink

    Awesome tutorial. And also a big thank’s to Mothmenace who added the import!

    Many thanks

  11. Posted October 29, 2009 at 9:41 am | Permalink

    is there a solution to copy a jpeg into the clipboard using as3

  12. Srikanth
    Posted November 22, 2009 at 4:18 pm | Permalink

    Thanks a lot! Great Tutorial.

    Is there a way to copy the Current URL to the System Clipboard?

  13. Jamus
    Posted February 1, 2010 at 12:14 pm | Permalink

    Awesome. Very helpful.

  14. mandia
    Posted May 9, 2010 at 1:01 pm | Permalink

    hey ;)
    Good tutorial unfortunately it’s not exactly what i am looking for.
    Does anybody know how to copy only a selected text not a whole textfield.
    I hope somebody will help me

  15. Posted August 30, 2011 at 2:06 pm | Permalink

    This is very helpful script thanks!

  16. Alex
    Posted December 28, 2011 at 10:02 pm | Permalink

    Nice tutorial Evan! I have a question though. I am currently on a project to create a ticket logger for our company. This ticket logger would use the system.clipboard as well. However, the problem that I am having is that I cannot make it to work with multiple textareas. I know that the clipboard only holds one data at a time. Thus, the same exact code will not work with multiple textareas. I was informed that I need to gather all those data as one big string but I don’t know exactly how to do it. BTW, I am using Actionscript 3.0 via Flash CS5.

    • Posted January 4, 2012 at 10:37 am | Permalink

      @Alex – it sounds like you could construct a string variable from your different textareas and then copy that to the clipboard.

  17. gojakv
    Posted January 4, 2012 at 9:45 am | Permalink

    Any idea how to use this code to copy desired node which text box reads from from xml file? For example email node:

    Location
    Name
    email address
    Contacts/img/empty.jpg

    Thanks!

    • Posted January 4, 2012 at 10:39 am | Permalink

      @gojakv – I’m not quite sure what you mean. It is possible to get xml data into a text field and then copy to clipboard if that’s what you’re after.

  18. Karl
    Posted January 24, 2012 at 10:59 am | Permalink

    I have been using for some time this nice Banner, from developer FX. They have a really nice Live control panel, that allows you to change the Flash banner on the fly. Thing I was surprised is that the control panel is also in Flash and once you finish changing the attributes you can generate an XML list of attributes with a copy/paste button. I was wondering how they got it to work, and thanks to this tutorial I now know. If you are interested in a nice application of this type of script you can check http://www.flashxml.net/banner-rotator.html

Post a Comment

Your email is never published nor shared. Required fields are marked *

*
*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

  • Recent Posts

    WordCamp Presentation Slides: From Photoshop PSD to WordPress Theme

    Here are my slides for my WordCamp Atlanta presentation, From PSD to WordPress Theme: Under the skin: PSD to WP on Prezi Tweet

    wordpress_wordcamp_atlanta_2012_feb_2_3

    Speaker at WordCamp Atlanta 2012

    I’m proud to announce that I’ve been asked to speak at WordCamp Atlanta this year! WordCamp will be held this weekend and hosted at SCAD Atlanta! My session is titled: From PSD to WordPress Theme: Under the skin. Obviously, I’ll be focusing on themes. We’ll look at what they are, what they can do, how [...]

    Adobe-like Arrow Headers | CSS-Tricks

    Zero images is something that always gets me excited, I really like these arrow button styles! I like the css used more and the hover/active states too, nice css3 transitions. via Adobe-like Arrow Headers | CSS-Tricks. Tweet

    snow

    Snow via Javascript & Canvas – Tis the Season

    After playing with the settings in my experiments I found a few settings I liked and wanted to develop further. The first was snow! An added bonus I was able to work on a project just for the holidays and used much of this code in it! I looked around the web and saw a [...]

  • Recent Shares

    Link: Responsive Images: How they Almost Worked and What We Need

    Mat discusses the options for getting responsive images along with responsive designs. We can use various means (server-side, client-side, mobile-first, html5 data attributes, cookies…), but none are fully satisfactory, especially with new browsers prefetching images before cookies can be set or html is even fully read and parsed. He states that bandwidth sniffing is… a [...]

    Screen shot 2012-01-26 at 2.46.59 PM

    Yiibu – About the site…

    Here’s a great article about the process of responsive design & mobile first design and how to practically use them both in a project. This site is a proof of concept for many of the ideas described in Rethinking the Mobile Web or (Mobile First Responsive Design). via Yiibu – About this site…. Tweet

    gridpak

    Link: Introducing Gridpak | Erskine Labs

    Here’s a great tool to make responsive grid layouts. Thanks to Erskine Labs! Introducing Gridpak | Erskine Labs. Tweet

    css-multiply

    Link: HTML5 multiply filter with canvas | Alberto Gasparin

    Here’s a great little script I found useful today as I was working on having dynamic effects applied to javascript via canvas. “The canvas element provides scripts with a resolution-dependent bitmap canvas, which can be used for rendering graphs, game graphics, or other visual images on the fly.” Thanks to the canvas APIs I was [...]

  • Recent Comments

    Karl

    Karl

    I have been using for some time this nice Banner, from developer FX. They have a really nice Live...
    Karl

    Karl

    Thank you for this wonderful link… recommend it! Fast, simple, easy… :-)
    Gabriel

    Gabriel

    Hi Valerie, I don’t know if you are still following this post, but I tried seeing if it is...
    avinash

    avinash

    Hi Evan, I am using the same code and trying it on chrome/firefox it is not working on neither...
    Matt

    Matt

    I needed to store url variables from advertising tracking servers – this method works like a...
    Evan Mullins

    Evan Mullins

    @Saket – you may want to look into swfaddress. I believe it will be more what...