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:

[cc lang=”Actionscript”]
// FACEBOOK
private function shareFB(e:Event):void
{
openPage(‘http://www.facebook.com/sharer/sharer.php?t=A+cool+video&u=’+escape(“http://flepstudio.org/utilita/VideoPlayer/IronMan2.mov”),”_popup”);
}

// TWITTER
private function shareTwitter(e:Event):void
{
openPage(‘https://twitter.com/intent/tweet?source=webclient&text=A+cool+video%3A+’+escape(“http://flepstudio.org/utilita/VideoPlayer/IronMan2.mov”),”_popup”);
}

// 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(“http://www.tumblr.com/share/link?url=” + escape(videoInfo.videoLink) + “&name=” + escape(videoInfo.videoTitle) + “&description=” + escape(videoInfo.videoArtist),’_popup’);
}

// STUMBLE UPON
private function shareSU(e:Event):void
{
openPage(“http://www.stumbleupon.com/submit?url=”+escape(videoInfo.videoLink)+”&title=”+escape(videoInfo.videoTitle));
}

// GOOGLE +
private function shareGoogle(e:Event):void
{
openPage(“https://m.google.com/app/plus/x/?v=compose&content=”+escape(videoInfo.videoLink),”_popup”);
}

// LinkedIn
private function shareLinkedIn(e:Event):void
{
openPage(“http://www.linkedin.com/shareArticle?mini=true&url=CONTENT-URL&title=”+escape(videoInfo.videoArtist)+”&summary=”+escape(videoInfo.videoArtist)+”&source=”+escape(videoInfo.videoTitle),’_popup’);
}

// DIGG
private function shareDigg(e:Event):void
{
openPage(“http://digg.com/submit?phase=2&url=”+escape(videoInfo.videoLink)+”&title=”+escape(videoInfo.videoTitle)+”&bodytext=”+”+”&topic=”+escape(videoInfo.videoArtist));
}

//BEBO
private function shareBebo(e:Event):void
{
openPage(“http://www.bebo.com/c/share?Url=”+escape(videoInfo.videoLink)+”&Title=”+escape(videoInfo.videoTitle),’_popup’);
}

//ORKUT
private function shareOrkut(e:Event):void
{
openPage(“http://www.orkut.com/FavoriteVideos.aspx?u=”+escape(videoInfo.videoLink),’_popup’);
}

//REDDIT
private function shareReddit(e:Event):void
{
openPage(“http://www.reddit.com/submit?url=”+escape(videoInfo.videoLink),’_popup’);
}

// DELICIOUS
private function shareDelicious(e:Event):void
{
openPage(“http://www.delicious.com/save?v=5&jump=close&url=”+escape(videoInfo.videoLink)+”&title=”+escape(videoInfo.videoTitle));
}

// MYSPACE
private function shareMySpace(e:Event):void
{
openPage(“http://www.myspace.com/Modules/PostTo/Pages/?t=”+escape(videoInfo.videoTitle)+”&c=”+escape(videoInfo.videoArtist)+”&u=”+escape(videoInfo.videoLink)+”&l=”+escape(videoInfo.videoLink),’_popup’);
}
[/cc]

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).

[cc lang=”Actionscript”]
public static function openPage(url:String, linkWindow:String = “_blank”, popUpDimensions:Array = null):void {
if (linkWindow == “_popup” && ExternalInterface.available) {
var dimensions:Array = [800,600];
ExternalInterface.call(“window.open(‘” + 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) {
ExternalInterface.call(‘window.open(“‘ + url + ‘”,”‘ + window + ‘”)’);
} else {
//request a blank page
navigateToURL(new URLRequest(url), window);
}
}
}
[/cc]

There now you can use these and link them into buttons for your sharing pleasure.
You can view an example here: http://www.netgfx.com/trunk/social/
Enjoy!

Facebooktwittergoogle_pluspinterestlinkedin
linkedin

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();
Btn.setStyle("icon","assets/icon.png");

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

Enjoy!

Facebooktwittergoogle_pluspinterestlinkedin
linkedin

Compile FlowPlayer and add a simple button tutorial


First of you need to have the following:

ANT: http://ant.apache.org/bindownload.cgi

Flex SDK: http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+3 (download the latest 3.+ build)

Java SDK: http://developers.sun.com/downloads/ (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: http://tortoisesvn.net/downloads once you install go to the above folder and check out:

http://flowplayer-plugins.googlecode.com/svn/flash/common/trunk/

http://flowplayer-plugins.googlecode.com/svn/flash/controls/trunk/ (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 “plugin-build.properties”

# you need to adjust following to point to your Flex SDK
flex3dir=C:/SDK/flex_sdk_3.5.0.12683

# change this if you want the compiled plugin to be copied to some dir
deploy_dir=C:/SDK/TEST

# 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

flex3bindir=${flex3dir}/bin

flex3libsdir=${flex3dir}/frameworks/libs

flashplayer_bin=

framerate=31

bgcolor=0xFFFFFF

width=500

height=350

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=”../plugin-build.properties” />
<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/Controls.as” />
<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:

Controls.as

SkinClasses.as


Tooltips.as


WidgetBooleanStates.as


and we will create the buttonName.as

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!

SkinClasses.as:

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

Controls.as:

import org.flowplayer.controls.button.gBtn;

//at createChildren add:

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

//launcher

//gbutton implementation

private function goToUrl(evt:ButtonEvent):void{

navigateToURL(new URLRequest (“http://www.google.com”),”_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];

ToolTips.as

private var _gBtn:String = “google”;

public function get gBtn():String{

return label(_gBtn);}

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

_gBtn = gBtn;}

WidgetBooleanStates.as

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;

}

[Value]

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:

<script>

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

{

plugins:{

controls:

{

gBtn:true

}

}

});

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!

Facebooktwittergoogle_pluspinterestlinkedin
linkedin