By Brice Mason
April 3, 2008
AOL's recent acquisition of the yourminis widget API (wAPI), a widget development platform, brings an important and exciting new addition to an already rich suite of developer tools from AOL. This article will serve as an introduction to the yourminis widget development platform, a framework and supporting tool set that eases the development of Adobe Flash and Flex-based widgets. Because I'll be walking you through the development of an example application using yourminis, some Flash development knowledge is assumed. However, you do not need particular expertise in Flash to follow along the life cycle of a widget developed using the yourminis platform tools.
Goowy Media, the creator of the yourminis platform, started out as an Internet communication software startup, focused on delivering fun and unique methods for people to connect. By virtue of this statement alone, it's understandable why AOL had taken such an interest in acquiring yourminis. A pioneer in the social networking and Internet communications field, AOL continues to develop creative methods for people to connect. Add to this the explosion of tools and services AOL has released to the developer audience, and it's obvious that AOL is committed to supporting users and developers alike.
Although the initial goal of the yourminis platform was to offer a service that provides a fun and intuitive communication and sharing experience, it has blossomed into the most advanced widget development platform available. At the heart of the yourminis widget development platform is the widget API (wAPI), an Actionscript library used to assist with the rapid development of engaging widgets that are ready to run on both the web and the desktop. To further support widget development, yourminis has an extension to the Adobe Flash authoring environment, making it easy not only to code a new widget, but to convert (or, widgetize) existing content, and finally, to test it before publishing to yourminis.com.
yourminis Widget Life Cycle
The beauty of the yourminis widget development process is that it can be as simple or as complicated as you want. Depending on your goals, personal or professional, the right tools are always in your hands to get the job done. Regardless of the purpose for creating your widget, the process you use will consist of three parts: build, syndicate, and analyze.
Build
The yourminis widget development platform consists of an advanced framework full of reusable components that make it easy to produce any type of widget you want. Whether you're starting fresh producing a new widget, or interested in converting existing Flash content into a yourminis widget, the yourminis platform has the right tools to get the job done.
One of the most useful tools the platform offers is an extension to the Adobe Flash integrated development environment (IDE), which installs a panel used to test and debug your widgets. The extension also installs code intellisense, which recognizes wAPI syntax and contains integrated documentation that makes it easy to learn and debug quickly.
The infrastructure that yourminis provides as I've described is great, but where the yourminis platform really shines is with the added intelligence and ease of use of its wAPI framework. The yourminis wAPI library is smart, and was written with the developer in mind. Tasks that once ate up valuable time, such as database access, caching routines, and internationalization are now easy implementations that enable you to spend more time on innovation and less time on tedious coding.
Syndicate
After you've developed your widget, you can begin the syndication process. Like all other tasks during the widget development life cycle, this can be as simple or as complicated as you want. Just by implementing the widget framework you have access to a feature called Copy Me, which gives the user the option of embedding the widget in any number of outlets, including top social networking sites, start pages, blogging platforms, and even to the desktop in the form of Windows Vista gadgets, Adobe AIR, the Yahoo! Widget Engine, and the Mac Dashboard. This is a powerful distribution technique that benefits from strategy more than anything. Because the syndication process offers powerful configuration options, like blacklisting domains you don't want your widget to pop up on, you can maintain complete control of your widget.
Analyze
After your widget has been released to the wild, you want to be able to measure its effectiveness. Depending on how much of the wAPI framework you've incorporated into your widget, you have access to an incredible amount of information about where your widget has gone and what people are doing with it. Whether you've created the widget for personal or for professional use, this is an extremely powerful idea that supports not only demonstrating the effectiveness of the widget, but also determining the right time to make adjustments. With reports that support everything from a smart summary view to drill-down details of views, clicks, and interactions, the platform can support whatever result you're after.
Developing an Example Widget
Now that you've gotten a taste of the yourminis widget development process you can create an example widget using the framework, and publish it to yourminis.com. The first thing you'll need is an account on yourminis.com; simply click the sign up link and type the username you would like to use, a valid e-mail address, and a password for your account. When this is complete, you can directly log in to your account and add to your account settings such as a thumbnail image, your interests, and a bio.
Now that you have an account, you can get started installing the wAPI, an extension to the Adobe Flash CS3 Professional IDE used to enable quick and easy testing and debugging of your widgets. Simply download and extract the archive, which consists of a single .mxp file. Execute this file to invoke the Adobe Extension Manager, which will walk you through the process of installing the extension. The extension installed in Adobe Extension Manager should look similar to Figure 1.
Figure 1. The installed wAPI extension
Basically, in two easy steps, you've completed the steps necessary to start coding and publishing a new widget to yourminis.com. The example widget you'll create next is a simplified version of the Magic Eight Ball, that fun toy from your childhood (depending on when your childhood was) that held all the answers to your burning questions. Because the focus of this article isn't on actually coding the widget, I'll give you a quick rundown of how it is created.
Infrastructure
The main components of the Magic Eight Ball widget are a static text box at the top of the widget, the eight ball itself, and a dynamic text box that will serve up the answers in the viewport of the eight ball with each shake. The eight ball itself was drawn as a series of circles, using the oval tool, and given a shadow effect using the gradient transform tool. The widget, as it stands in the Flash development environment, is shown in Figure 2.
Figure 2. The eight ball in Flash Professional CS3
Interactivity
With the infrastructure in place, you can add the necessary interactivity to the widget using some simple Actionscript. To do this, two movie clips have been created and added to the library: mcEightball and mcAnswer. The eight ball object in the movie is actually an instance of mcEightball with the name eightBall, and the answer dynamic text box is an instance of mcAnswer with the name eightBallAnswer.
First you need to write some initialization code:
var widget;
addEventListener( "widget-loaded",onWidgetLoaded );
function onWidgetLoaded(evt:Event){
widget.initWidget(300,300,0xffffff);
stop();
}
This is the minimal code necessary to hook into the wAPI framework; it consists of a variable named widget, which is automatically set within the top-level DisplayObject. This step is important because it serves as your gateway to the functionality of the wAPI. As you can see in the code, the widget variable is declared, along with an event listener, which will fire when the widget has loaded.
The other key piece of interactivity deals with making the eight ball clickable, so it can deliver a new answer to each question as it is asked. This is done using the following:
eightBall.addEventListener( MouseEvent.CLICK, onClick );
function onClick( event:MouseEvent ):void {
// define the possible answers
var answers:Array = new Array();
answers[0] = "Yes";
answers[1] = "No";
answers[2] = "Maybe";
// get a random answer
eightBallAnswer.answerText.text = answers[ Math.floor( Math.random() * answers.length ) ];
gotoAndPlay(2);
}
The eight ball is configured with a mouse click event, which fires the onClick function. This function defines an array used to hold all possible answers in the eight ball, which I've set as Yes, No, and Maybe. A random answer is pulled from the array and set as the text of the eightBallAnswer movie clip object. Finally, context is moved to the second frame where a motion tween configured on the eight ball simulates a quick shaking motion followed by the fade-in effect of the answer. To test the widget, click Window, then click Other Panels, and then click Widget Test Panel. After clicking the Launch button, you should see a page similar to Figure 3.
Figure 3. Testing the widget
With an integrated testing environment, the yourminis widget platform makes things very easy and rather predictable before you decide to publish the widget. If there is an error or something doesn't look right, you can just go right back into the code and fix it. Although this is ideal, it should be noted that if for some reason you are unable to install the wAPI extension, you can test your widget by uploading to yourminis.com, as well. With development of the example application complete, we can start the publishing process.
Publishing the Widget
To get started with the publishing process, you'll need to log back in to the yourminis site and click the dashboard link at the top right of the page. Click the add new widget... link on this page to begin the publishing process, which is outlined below.
- Enter a unique identifier for the widget, and then click Next.
- Review and accept the terms of service, and then click Next.
- Type information, such as the title, description, and category (among others). Browse to and upload the resulting .swf file, and then click Publish Widget.
A snapshot of my dashboard, which contains the Magic Eight Ball widget, is shown in Figure 4.
Figure 4. Sample widget dashboard
With the widget uploaded and available at yourminis.com, we can now move on to advanced syndication options and reporting.
Advanced Features
As I've shown throughout this article, the tools and resources in the yourminis platform are more than reason enough to get started writing widgets on this platform. However, the true value comes from the administrative side, as this can serve as an invaluable resource to you on how effective your widget is and allow you to manage your widget strategy effectively. Whether the goal is to get the widget into the hands of as many people as possible, or just to a targeted few, the syndication options and reporting available to you will serve as good indicators of success.
Managing Syndication
The first advanced feature we'll explore is syndication. From the management dashboard, simply click one of the widgets you've uploaded (I'll be using the Magic Eight Ball widget as an example), and then click Syndication. The syndication options consist of four main parts: embed, blacklist, galleries, and destinations.
Embed
This feature allows you to access the embed code for your widget. This will allow you to get your widget up on your site quickly and easily. This feature also allows you to modify some basic attributes of the widget, like size, before copying the embed code. As you update the properties of the widget, the embed code will update, allowing you to perfect its look before posting to your site.
Blacklist
The blacklist feature is used to block the propagation of your widget to domains, specific URLs, or even based on a regular expression-based pattern match. Blacklisting occurs in real time so you can be assured that your project remains only at the destinations that you allow.
Galleries
The galleries section allows you to post your widget to a number of external galleries including iGoogle, Facebook, and Live.com. This is another powerful feature; just the fact that the yourminis platform is centralized serves a great purpose as you decide where to distribute your widget.
Destinations
The final syndication option is destinations. This allows you to configure the distribution channels to which you would like to allow users to copy your widget. This includes popular social networking sites such as AIM, in addition to a number of start pages, blogging sites, and desktop widget technologies.
You can see that all four options work together to yield an easy and effective way to distribute your widget just the way you want. My widget's been out in the wild for a while, so let's check out some reports.
Reporting
To get started with reporting, click the Reporting link on your widget summary page. This takes you to a listing of reports you can run against your widget to see how it's being used. Yourminis reporting offers an incredible amount of information, from summary information, to detailed information aggregated by user, location, domain, etc. We'll be exploring the summary, views, copies, interactions, and clicks reports.
Summary Report
The summary report is an excellent way to understand the high-level impact your widget has had on the world. Graphical elements and statistics indicate how many times the widget's been viewed, the number of interactions and clicks it has received, and the domains it's been copied to. This is a great starting point for understanding the success and reach of your widget, as well as pointing you in the direction of some of the more detailed reports for further analysis. The Magic Eight Ball widget summary report is shown in Figure 5.
Figure 5. Example summary report
As you can see, over the past few days there's been a decline in the interest of the Magic Eight Ball widget. This is a great indication that I might want to think about improving the widget and/or targeting the distribution to some external galleries so its appeal increases.
Views Report
The views report serves as a finer indication of how many views my widget has received over time, as well as the manner in which it's been viewed. From the main views report page, you have the option of filtering down and reporting on view data by user, location, domain, and even by length of time, which I find particularly interesting. The views report filtered by time is shown in Figure 6.
Figure 6. Views/time report
You can see in Figure 6 that the time typically spent on the Magic Eight Ball widget is quite short. This would indicate that most users probably click it, say "that's cool," and then move on. If the goal of this widget was anything more, I'd again want to reevaluate my development and distribution strategy. I would also note that the 10 views of more than 30 minutes is of particularly concern--that's a lot of prophesying!
Copies Report
The copies report is important in that it can demonstrate the user-driven distribution of your widget. A copy is registered each time a destination is chosen using the Copy Me feature of the widget. Just like all other reports, you can filter the reporting data by properties such as user, location, and domain. Figure 7 demonstrates the copies report for the Magic Eight Ball widget by destination.
Figure 7. Copies report by destination
This report is interesting as it can reveal the types of services and even operating system platforms that appeal to folks that like your widget. This can help you with further development or targeted distribution of your widget to maximize its reach.
Interactions Report
The next report we'll look at is the interactions report. An interaction occurs when the widget is clicked or the mouse hovers over it after a widget view. The same filtering options apply, with Figure 8 demonstrating a filter by time.
Figure 8. Interactions/time report
The important distinction between this report and the views/time report is that the views report is tracking the amount of time the widget has been viewed until the next page change, and the interactions/time report tracks the time between the first interaction (click or hover) and the next page change. The Magic Eight Ball widget shows a similar trend for both reports.
Clicks Reports
Finally, the clicks report tracks the coordinates of each click on the widget. The report not only offers the usual filtering options, but also includes, in my opinion, the most forward-thinking feature of all, the heatmap. This report is shown in Figure 9.
Figure 9. Clicks/heatmap report
While many of the other reports that the yourminis platform offers deal with the marketing side of things, I find this report so smart because it introduces the concept of usability. This type of report could easily pinpoint potential usability problems, giving you the information to correct issues much faster and keep your widget functional for a broad audience.
Conclusion
Clearly, the yourminis widget platform is one of the most advanced widget frameworks today. It provides not only the tools and help resources to make development easy, but also enables a hosted solution, complete with syndication and reporting options ready to ensure the success of your Flash-based widgets.