Create Social Sharing Buttons in AS3

Hey all, recently I had to create a series of sharing buttons for a client so I went all over the internets in search for those sharing urls, then I had to fight against the popUp blockers and externalInterface problems, but I managed to pull it off and I present you with some very usefull functions, if one of those urls here changes drop me a line and I’ll try to find a replacement.

So here we go I’ll present the functions and then a single function that manages the display:

        // FACEBOOK
        private function shareFB(e:Event):void
        // TWITTER
        private function shareTwitter(e:Event):void
        // MAIL
        private function shareMail(e:Event):void
            var request:URLRequest = new URLRequest("mailto:"+address+"?subject="+videoInfo.videoTitle+"&body="+"\n\n Video Link: "+videoInfo.videoLink);            
            navigateToURL(request, "_self");
        // TUMBLR
        private function shareTumblr(e:Event):void
            openPage("" + escape(videoInfo.videoLink) + "&name=" + escape(videoInfo.videoTitle) + "&description=" + escape(videoInfo.videoArtist),'_popup');
        // STUMBLE UPON
        private function shareSU(e:Event):void
        // GOOGLE +
        private function shareGoogle(e:Event):void
        // LinkedIn
        private function shareLinkedIn(e:Event):void
        // DIGG
        private function shareDigg(e:Event):void
        private function shareBebo(e:Event):void
        private function shareOrkut(e:Event):void
        private function shareReddit(e:Event):void
        // DELICIOUS
        private function shareDelicious(e:Event):void
        // MYSPACE
        private function shareMySpace(e:Event):void

These are most of the social networks that I could think of, but it is almost the same for everything else I suppose.
And the following is the master function that handles the popup. (This is based on a function used by flowplayer and their sharing plugin, but it is generic stuff).

public static function openPage(url:String, linkWindow:String = "_blank", popUpDimensions:Array = null):void {
            if (linkWindow == "_popup" && ExternalInterface.available) {
                var dimensions:Array = [800,600];
      "'" + url + "','PopUpWindow','width=" + dimensions[0] + ",height=" + dimensions[1] + ",toolbar=yes,scrollbars=yes')");
            } else {
                // Use JS to bypass popup blockers if ExternalInterface is available
                var window:String = linkWindow == "_popup" ? "_blank" : linkWindow;
                if (ExternalInterface.available) {
          '"' + url + '","' + window + '")');
                } else {
                    //request a blank page
                    navigateToURL(new URLRequest(url), window);

There now you can use these and link them into buttons for your sharing pleasure.
You can view an example here:

Flex 4.5 add Icon to Buttons with AS3

This has changed since the pre-release and I thought I should mention it, because Icons on buttons are awesome.
So if you have set your button with mxml the property icon is right there, however if you want to dynamically create a button with an Icon with AS3 script you will have to declare it like this:

var Btn = new Button();

As you see Icon property is now a style rather than a property.


Compile FlowPlayer and add a simple button tutorial

First of you need to have the following:


Flex SDK: (download the latest 3.+ build)

Java SDK: (or google “java SDK”)

now you need to place all of them in a folder and extract

Next step is to add those as environmental variables, at PATH(if it doesn’t exist create it) add all the paths to the SDK bin folders separated by ;

to verify each installation go to command prompt and type:

ant -version

mxmlc -version

javac -version

if you see results to all 3 you’re good to go.

COMPILING CONTROLS SOURCE CODE (without any changes for now)

You need the flowplayer.devkit, and the controls plugin, as well as the flowplayer source code witch contains an example to test your builds.

All of these are provided by the flowplayer website, it might take a while searching for them but its worth it.

once you download all, extract them, and place the plugins.controls folder inside the flowplayer.devkit/flowplayer.devkit folder

next you’ll need to checkout some code from the svn, I use toirtoise svn: once you install go to the above folder and check out: (if you don’t have flowplayer.controls yet).

Now on to the configuration (we’re getting there soon…)

go to the devkit folder which contains “”

# you need to adjust following to point to your Flex SDK

# change this if you want the compiled plugin to be copied to some dir

# change following to point to .exe files when running on Windows

mxmlc_bin= ${flex3bindir}/mxmlc.exe

compc_bin= ${flex3bindir}/compc.exe

asdoc_bin= {flex3bindir}/asdoc.exe

# following can usually be left as they are








next we go to the flowplayer.controls folder and edit the “build.xml” and change the following code block:

<!– location of the skin swd, anc swc –>
<property name=”library-path” value=”src/flash/air” />

<property name=”extra-sources” value=”../common/src/actionscript” />

<property file=”../” />
<import file=”../plugin-build.xml”/>
<property name=”flowplayer_lib” value=”../flowplayer.swc” />

<property name=”plugin-binary” value=”${basename}.swf” />
<property name=”plugin-binary-versioned” value=”${basename}-${version}.swf” />
<property name=”plugin-main-class” value=”org/flowplayer/controls/” />
<property name=”compiler-define” value=”CONFIG::skin,’true’ -define=CONFIG::hasSlowMotion,’false'” />

on a side note if you want to compile the tube skin, it usually is missing the dragger component, so you’ll need to recompile the tube.fla adding the dragger icon.

go to command prompt and navigate to the flowplayer.controls folder, and type “ant” you should see some text and finaly “BUILD SUCCESSFUL” if not go up and try to identify the error, usually it tells you which line to look and which file.

Adding a button to the flowPlayer with ActionScript:

First of you’ll need to create the graphic for the button: go to Flash Professional and open one of the sample .fla in the flowplayer.controls/src/flash

add a new symbol and draw you graphic or simply add a picture (make sure the dimensions match the other graphics) name it and save it as a movieClip of the class fp.buttonName in the Skin Classes tree

now create the same graphic and save it as symbol with the name buttoNameIcon in the Symbols tree.

now export your build as a movie .swf and replace the old .swf

Now… some coding much occur…but fear not!

the files we are going to edit are:

and we will create the

first we create the class for our button, for showcase reasons I used a button named “gBtn” which when clicked opens a browser in the google home page (my idea of a Hello World)

package org.flowplayer.controls.button {

import flash.display.DisplayObjectContainer;

import org.flowplayer.controls.config.Config;

import org.flowplayer.controls.button.AbstractButton;

import org.flowplayer.view.AnimationEngine;


* @author api


public class gBtn extends AbstractButton {

public function gBtn(config:Config, animationEngine:AnimationEngine) {

super(config, animationEngine);


override public function get name():String {

return “google”;


override protected function createFace():DisplayObjectContainer {

return SkinClasses.getgBtn();


override protected function get tooltipLabel():String {

return config.tooltips.gBtn;




now lets change some source code!

private var gbtn:fp.gBtn; //buttonName for you if you havent named your button “gBtn” too…

public static function getgBtn():DisplayObjectContainer{

return getDisplayObject(“fp.gBtn”) as DisplayObjectContainer;} //at the end of the file

import org.flowplayer.controls.button.gBtn;

//at createChildren add:

_gBtn = addChildWidget(createWidget(_gBtn,”google”,gBtn,_config,animationEngine),ButtonEvent.CLICK,goToUrl);


//gbutton implementation

private function goToUrl(evt:ButtonEvent):void{

navigateToURL(new URLRequest (“”),”_blank”);


//at lastOnRight function add:

if (_gBtn) return _gBtn; //first, yes we are adding it at the right place of the controlBar

//finally at arrageRightEdgeControls(leftEdge:Number) edit:

rightControls = [_gBtn,_fullScreenButton, _volumeSlider, _muteVolumeButton, _timeView];

private var _gBtn:String = “google”;

public function get gBtn():String{

return label(_gBtn);}

public function set gBtn(gBtn:String):void{

_gBtn = gBtn;}

private var _properties:Array = [“play”, “stop”, “mute”, “volume”, “time”, “scrubber”, “playlist”, “slowBackward”, “fastBackward”, “slowForward”, “fastForward” , “fullscreen”,”google”];

public function set google(google:Boolean):void {

_values[“google”] = google;



public function get google():Boolean {

return value(“google”,true);


now you’re good to go! Recompile the code as you did before and place the producted .swf flowplayer.controls-3.2.1-dev.swf (name it:flowplayer.controls-3.2.1.swf) and replace the existing on the example.

you might also want to enable all controls to see your new button, or simple enable it:


flowplayer(“player”, “../flowplayer-3.2.2.swf”,









I hope this will clear some things about the flowplayer which is an awesome player idd.

(if you notice any typos or general mistakes please let me know)

have fun!