clearspring - the widget network.

About this Example

This viral sharing menu is a full-featured reference implementation, built on top of the Share features of the In-Widget Services API. You can use it as-is to easily add sharing services to your widget. Or, you can use the code as an advanced example of using the lower-level APIs directly.

The Menu In Action

This is the default mode of the menu; it's 410px x 210px and the theme color is grey.

Loading the Menu into your Widget

To load the menu in your widget, just use a standard Flash loadMovie technique, passing configuration parameters on the URL. Generally, you will load the Clearspring Kernel into your application, then load the menu, telling it the location of the kernel via the kernelPath argument. Alternatively, you can have the menu load against a pre-registered widget and load the Kernel automatically for you, by specifying your widget's Widget Id as the WID argument.

Loading the menu in ActionScript 2

Be sure to set _lockroot to true when loading the menu; otherwise, just use a simple LoadMovie call (or one of its variants):

this.createEmptyMovieClip("menu_mc", 999);
menu_mc._lockroot = true;
var menuUrl:String = "http://bin.clearspring.com/samples/services/as2/servicemenu-1.1.swf";
menuUrl += "?WID=" + WID;
loadMovie(menuUrl, menu_mc);

Note that this example uses the WID method. You can download a simple Flash CS3 example of a widget that loads the kernel first, and also does some positioning of the menu. Download Now

Loading the menu in ActionScript 3

Support for AS3 coming soon...

Controlling the Menu's Appearance

The menu can be configured with a variety of options to fully control its appearance and functionality. You can change its color scheme, its layout, the share services it makes available, and more. Here are a few examples:

Here is a skinnier version. It's 160px x 310px and the theme color is white. This is all done with simple parameters:

?themeColor=white&menuWidth=160&menuHeight=300

In this example, labeled buttons have been replaced with icons for a smaller form factor, and the theme is black.

?themeColor=black&menuWidth=260&menuHeight=210&noText=true

The smallest possible menu, in blue.

?themeColor=blue&menuWidth=160&menuHeight=210

Menu Configuration Options

All of the available configuration options, passed as URL parameters (or FlashVars) when loading the menu, are listed here:

Name	Description
kernelPath	The name of the ActionScript variable that contains the loaded Clearspring kernel, and is tied to the widget that you want to share. If you are not first loading the kernel yourself and just want to share a pre-registered widget, you can use the WID parameter (though this is not the recommended usage).
WID	This parameter is optional, and used only if you are not first loading the kernel yourself (with the kernelPath parameter). It indicates the ID of the pre-registered widget you want to share.
menuWidth	The width of the menu
menuHeight	The height of the menu
themeColor	The color of the theme: grey, black, white, blue
noIcons	Set to true/false to control the display of button icons
noText	Set to true/false to control the display of button text
servicesInclude	Controls which services are available in the menu; see the In-Widget API for details/td>
servicesExclude	Controls which services are excluded from the menu; see the In-Widget API for details
BGTransparency	An alpha value for the transparency of the menu background