Tutorials: Create Your First Widget

Jump to:

• Gathering Your Development Tools
• Setting Up Your Development Environment in Flash
• Adding Code To Your Actionscript Layer
• Adding Widget Content To Your "Widget Layer"
• Publishing Your Widget
• Submitting Your Widget To Springwidgets.com

Gathering Your Development Tools

To start making Widgets for the SpringWidgets platform, you will need the following tools:

Flash Software

Capable of publishing a .swf file for Flash Player 7 or 8
SpringWidgets support both ActionScript 1.0 and 2.0 programming in Flash.
http://www.adobe.com/products/flash/flashpro/

SpringWidgets Platform

Available to download @ http://springwidgets.com/download/
Once the platform has been installed, you can access the Springbox launchpad (See Figure 1.1) by clicking on the springbox icon located in the windows system tray
(See Figure 1.2).

(Figure 1.1)

(Figure 1.2)

SpringWidgets SDK

The SDK can be downloaded @ http://springwidgets.com/developers/
The Software Development Kit contains the following assets:

Back to Top

Setting Up Your Environment In Flash

Once Flash is installed, launch the program and create a new .fla project:

(Figure 2.1)

After the untitled project is created, you can save and rename the .fla, named "My First Widget" for example.

(Figure 2.2)

(Figure 2.3)

Once your .fla is saved, it is time to set your .swf publish settings

(Figure 2.4)

(Figure 2.5)

Check the “Flash” checkbox ONLY. Optionally click the folder icon to change the location of where the .swf will be published. By Default, the .swf will be published to the same location as the .fla file but you can also publish directly to your “My SpringWidgets” folder!

(Figure 2.6)

Next, rename the default layer (Double-click the layer to rename), and create the layers that you will be using to develop your widget. Click on the circled new layer button below to add layers. Each layer should be named accordingly, based on the context of the layer.

(Figure 2.7)

Back to Top

Adding Your Code To Your Actionscript Layer

How do I add ActionScript and/or Widget API commands to my .fla?

Click the first frame (Figure 3.1) associated with the "Actionscript Layer":

(Figure 3.1)

Ensure that the Actions Panel is open (Figure 3.2) or press "F9" on your keyboard to enter your code.

(Figure 3.2 - Actions Panel )

Add ActionScript into the yellow area on right (See Figure 3.3)

(Figure 3.3)

The code below outlines the foundations of the SpringWidgets API and will enable the basic functionality of a Spring Widget.

You can copy and paste the following code into the Actions Panel.

// Code for Setting the Widget's Metadata:
// Set the Metadata for the Widget ***********************
var metaObj:Object = {};
	// Instantiate the generic object
metaobj.version = "1.0.0"; 
	/* Set the widget's build ex.[1.1.0],[1.2.0],etc. 
	This should match the version number set when 
	uploading or modifying your widget at  
	http://springwidgets.com */
	metaobj.description = ""; 
	/*Displayed when someone chooses "About this Widget" 
	from the Widget's right click menu.*/
metaobj.author = "Your Name Here";
	// The widget author's Name
metaobj.requiresInternetConnectivity = true;
Widget.setMetadata(metaobj); 
// *******************************************************

//Code for Setting the Widget's Sizing:
// Set Widget Size ***************************************
Widget.setMaximumSize(400,300);
Widget.setMinimumSize(160,140);
Widget.setSize(160,140);
// ***************************************************

// Code for Setting the Widget's Functionality:
// Set Widget functionality properties *******************
Widget.allowDocking = false;
	// Disable Docking Abilities
Widget.allowScaling = true;
	// Enable Widget Scaling
Widget.allowUtility = true;
	// Enable upper-right utilities
// ********************************************************

// Code for Determining the Widget's Environment:
// Widget Environment Check *************************
if(Platform.environment == "desktop")
	// Widget exists on the desktop
{Widget.trace('My widget is on the "desktop"');
	// Desktop specific functions called here
}else if(Platform.environment == "browser")
	// Exists on web
{Widget.trace('My widget is on the "web"');}
	// Web specific functions called here
// ***************************************************

//Code for Using the Widget's Resize Event:
// Widget Resize Event ************************************
Widget.onResize = function()
	// Run when widget is resized
{
Widget.trace("Resize Widget");
};
// ********************************************************

Back to Top

Adding Widget Content To Your Widget Layer

Once the basic API commands and ActionScript have been implemented, it is time to create the actual Widget. Start by clicking the "Widget Layer" and creating a "New Symbol":

(Figure 4.1)

Name your new Symbol "mcWidget", ensure that the "Movie Clip" radio button is selected, and then press ok:

(Figure 4.2)

Now, while inside the empty movie clip, you can place other code and content layers. All graphical elements and functions specific to your widget should be placed inside the "mcWidget" movieclip:

(Figure 4.3)

Three layers have been created, named, and textual and graphic content was added. Please refer to the help files for Flash to learn how to create specific flash content. Now the remaining development is left to the creativity of the widget developer.

Back to Top

Publishing Your Widget

Once you come to a stable publishing point (when you feel your code is complete and void of errors) perform (5.1) below:

(Figure 5.1)

Assuming that your Flash publish settings are configured correctly, you will now have a newly created .swf file. Any future publishing will then overwrite that previous .swf file.

Back to Top

Submitting Your Widget To SpringWidgets.com

Now that you have created your very first widget, you are ready to upload and submit your widget masterpiece to the SpringWidgets Gallery to share with others.

In our next tutorial, Upload Your First Widget, we will show you exactly how to do just that!

Go to the next tutorial now.

Back to Top

SpringWidgets and SpringWidgets Logo are Copyright© 2010 Fox Interactive Media

Privacy Policy | Terms of Service | Terms of Submission | FAQ | Contact