clearspring - the widget network.

Platform Services Developers About Us Sign In Create Account

Platform

You are here: Docs → Technical Documentation → Developing Widgets → Clearspring Code Libraries → MySpace Link Solution
 

Link Out Solution

Sites like MySpace that disable JavaScript access prevent linking out.  In response to this, Clearspring has created a workaround to pop up dialog boxes and allow users to easily copy links. Here's a screenshot:

 

The workaround is encompassed within a Flash package for either ActionScript 2 (AS2) or ActionScript 3 (AS3). Click the link below to get started:

Setting Your Development Environment(Flash Pro/Flash CS3) for AS2:

Before we proceed, you need to setup your development environment in Flash Pro or the new Flash CS3. When importing external *.as files, the classpaths must be setup correctly in the corresponding fla file or in the development environment to use any available public methods provided by libraries.

First let's setup the folder structure for our project. Create folders and subfolders are shown below.

MyProjects (root)

  • clearspring.studio
    • lib
      • Bubble
    • src
      • com
        • clearspring
          • utils
            • bubble
  • myapp
    • assets
    • deploy
    • lib
      • App
    • src

The folder structure above will be the foundation for all the code libraries that we provide however as a third party developer you can stick to your own conventions.

Breakdown of Folder Structure

clearspring.studio
The folder "clearspring.studio" contains all Clearspring centric libraries in forms of class files or actual fla which contain the objects you need to copy. Everything we publicly release will be in this general folder.

clearspring.studio > lib
This folder "clearspring.studio > lib" will contain all fla libraries

clearspring.studio > lib > Bubble
All Bubble source files (*.FLA) will be in this directory. If you download the full zip package of the Bubble template, you will find the *.FLA file called "BubbleExample.fla" which is as named will be the usage example. Also there will be the *.FLA file called "Bubble.fla" which contains the actual object you need to copy in the main timeline.

clearspring.studio > src
This folder "clearspring.studio > src" will contain all the class libraries.

clearspring.studio > src > com > clearspring > utils > bubble:
The folder "com > clearspring > utils > bubble" contains the external ActionScript file called "Bubble.as". This external file's purpose is to delegate the url passed to getURL to a method called processURL which effectively passes the link to a "bubble" in front of the button or movieclip where you can copy the link and paste to your favorite browser.

myapp > assets:
All assets from images, sounds, etc.. used in your flash file would be stored here.

myapp > deploy:
In the flash libraries we provide for you, the flash files will be publishing to this directory to separate the source files from your compiled files (*.SWF).  If you download the full zip package for the Bubble template, a *.SWF should have been compiled for you already in this directory called "bubbleExample.swf".

myapp > lib > App:
Your main file (*.fla) will be contained in the folder "App". This can conform to any naming convention you wish. Here will refer to our FLA file as "App.FLA" to also reflect it's originating folder.

myapp > src:
Any myapp localized external *.as files.

Adding a Classpath

As mentioned before, we prefer to add classpaths in source flash files (*.FLA) settings so that users do not need to change or add to their native Flash Pro or CS3 environment settings, and add ease to the portability of our source files.

Let's learn on how to add a classpath to an *.FLA file (Referring to App.fla in "myapp > lib > App")
1. Open an existing *.FLA or create a new one (AS2).
2. Go to "File > publish settings" . This will pop up the "Publish Settings" dialog box.
3. Near the top you will see "Formats | Flash | HTML" tabs. Now select "Flash".
4. Next to "ActionScript version: ActionScript 2.0" will be a button to select called "Settings". Press this button to reveal the "ActionScript 2.0 Settings" dialog box.
5. You can manually add a classpath by selecting "+".
6. In the prompt type: "../../../clearspring.studio/src/"
7. Add another classpath by selecting "+" again
8. In the prompt type: "../../src" -> your App centric classpath.
9. Save as "App.fla" in myapp > lib > App

Usage Instructions:

1. Open folder "clearspring.studio > lib > Bubble"
2. Open the file called "Bubble.fla"
3. In the main timeline you will see the layer called "Bubble" and on the stage you will see the movieclip instance called "bubble_mc".
4. Copy this movieclip called "bubble_mc"
5. Now open your App.fla in "myapp > lib >App >App.fla"
6. Create a high level layer (on top of all layers) and name it "Bubble"
7. Paste (you should see the movieclip "bubble_mc" on stage)
8. Now add the classpath from above if you have not already.
9. Now create another layer called "Actions" on top of the layer called "Bubble"
10. Copy the example code from below and paste it into your actions panel.
11. Save

Example code:

//Import the class
import com.clearspring.utils.bubble.*

// Local usage of bubble
// if false, bubble will not activate while testing
// if true, bubble will activate
var debug = false;

// Constant - Black List 
var BLACK_LIST:String = "http://widgetstudio.clearspring.com/xml/blackList.xml";

// BUBBLE CODE
if (debug) {
   var thisDomain:String = "profile.myspace.com";
} else {
   var thisDomain:String = _level0.cs.context.DOMAIN;
}

var ms:Bubble = new Bubble(bubble_mc, debug, thisDomain, BLACK_LIST);

// Mouse Listener
var mouseListener:Object = new Object();
Mouse.addListener(mouseListener);
mouseListener.onMouseDown = ms.closeMSbubble;

// Bubble Invocation
my_btn.onPress = function(){
   ms.processURL("http://www.clearspring.com");
}

Bubble API(s):

Current Available Methods:

  • (CONSTRUCTOR) public function Bubble(mc:MovieClip, debug:Boolean, domain:String, blackList:String)

    Parameter: mc
    Type: MovieClip
    Value: Movieclip instance name of the bubble object (physical movieclip) on the canvas

    Parameter: debug
    Type: Boolean
    Value: Boolean value. Triggers local usage of bubble without being placed in a security restricted site

    Parameter: domain
    Type: String
    Value: Domain the widget is currently residing ie. myspace, facebook, etc..
  • public function closeMSbubble()

    Function closes visible bubble if a mouse is click event occurs outside the bubble area. Register a mouse down event with this function to close bubbles properly

  • public function processURL(urlstr:String, xOff:Number, yOff:Number)

    Function that handles pop ups and display the bubble within the widget if js access disabled. If js enabled, link will open up in a new window (Content will not display correctly otherwise if widget is inside an iframe, e.g., start pages). User can specify optional offsets relative to the mouse click coordinates to position the bubble.

    Parameter: urlstr
    Type: String
    Value: URL

    Parameter: xOff
    Type: Number
    Value: x coord offset for myspace popup

    Parameter:yOff
    Type: Number
    Value: y coord offset for myspace popup

  • public function setArrow(xArr:Number)

    Parameter: xArr
    Type: Number
    Value: x coord offset for arrow point in pop up bubble.

Check it out

Complete Bubble Template Package:

Link out package for AS3:

The AS3 package includes a link out class that will handle link tracking and display of pop-up bubble for sites that have disabled outbound links from Flash Files ( allownetworking=never || allownetworking=internal ).  The ZIP file contains the package and all API documentation.

Next Steps

Check out our Best Practices to learn about recommended sizes and other widget secrets...
 

Overview
Docs
Forum