The concept of an item online going "viral" is one that clients, developers and advertisers alike would love to hear about a project they are working on. In the case that something does become popular, how easy would it be for users to distribute it among their peers? The "send to friend" link is often seen in applications, but in that instance you may only get a small part of the data about the reach of your application. Who is using it? Where is it getting installed?

It's an interesting challenge to gather all this information. One that Adobe tries to address with Flash Platform Services.

In this tutorial we will create an application that displays a users twitter profile. This application will take advantage of Yahoo's YQL service. The ability for users to share it across social networks, bookmark sites and e-mail will be handled by the distribution part of Flash Platform Services.

Flash Platform Services is a broad subject. One way to describe it, would be a collection of technologies that center on enabling Flash to become a seamless part of the social web.

Some of the technology involved is though a partnership between Adobe and Gigya. When going over to the adobe's page for Flash Platform Services you can see that the services are broken down into three sections.

Distribution: The ability to move your content across devices and social networks. A quick way of thinking about this is widgets. Small applications that are embed in someone's profile page on their social network of choice. Included with the distribution technology is the ability to track your application across networks in order to chart the reach of your application.

Collaboration: Real-Time features like shared whiteboard, chat and webcam streaming. This will give your users the ability to share work together in a shared environment.

Social: In beta as of this writing. Allows developers to take advantage of social networks like Facebook, Twitter and MySpace without learning each individual API.

Over at labs.adobe.com, there is a project code named "Shibuya". Currently in private beta, adds to the monetization part of adobe's platform story. Flash developers can enable try/buy services into the applications.

No matter if your application is a simple widget or game, the distribution service is something that can be embedded into your application. The ability to add distribution services to your application comes in the form of extensions for Flash CS4, Flex 3 and Dreamweaver CS4.

Grab the components you need from distribution home page you will need an Adobe ID to download them. Once downloaded if you plan on using the distribution service with Flash or Dreamweaver, the extensions need to be installed using the Extension Manager.

If you are creating a project using Flex Builder 3, go to the Help > Software Updates > Find and Install. Once there click "New Archive Site" then select from your local drive the file you just downloaded "DistributionService-Fx.zip". Select "Flex Shareable Application Plugin" as an option, click next accept the license agreement click next, finish and install all.

After all of that agree to restart Flex Builder.

With Flex Builder restarted you will have everything you need to make this application distributable using the new service.

Create a new Flex project, by selecting File > New > Other. This will show you a folder of other types of projects you can create.

Inside the list is a folder called Flex Builder. Expand that list and you will find an option called "Flex Shareable Application". Select that then click next.

There you can give your application a name just like a regular Flex application. If you select next you can then start to add the options that make your application distributable.

The next two sections we have are "Identity" and "Details". These will give the distribution service most of the information it will need to not only enable your project to move around different social networks, but also give you the ability to track it's viral nature.

The first option is "PartnerID", this is the unique number you get when using the service. In order to obtain a partner id you need to have the Distribution Manager software installed. The Distribution Manager is a free Adobe AIR based program that will assign you a partner number.

The Distribution Manager will help you do things like generate charts and reports about the distribution of the application. These reports can be broken down into different categories like:

• Interactions
• Stickiness
• Viral grabs
• Emails sent

Download the Distribution manager from the same homepage by clicking on the Distribution manager badge. This is an AIR application that will download and install on to your machine. Once running you then need to have an Adobe ID in order to login.

When logged in you will find the "Partner ID" at the bottom right corner of the application. This needs to be added to your panel in Flex. The Partner ID is a unique number that is associated with your account. All the applications that are being tracked in the Distribution Manager need to be activated by using the Partner ID.

Once you have the Partner ID added to your application setup, you can fill out the rest of the details. The Code ID is what you will be referring to the application as its being tracked in the Distribution Manager. The "Config ID" lets you have variants of the application. By using this you can customize the application. If later you decide to update the application using FlashVars or URL parameters, you can target the particular variant of the application you want to update.

The "Title" will be the name of the application as it shows up in different social networks. "SWF URL" and "Image URL" will be the location of both the finished application and a still image that represents the application in the case that a social network shows a thumbnail of the application before someone downloads it.

The description will be a short summery of the application that will show up on various social networks that require a description of the application.

Clicking the next button brings you to the Flash variables panel. This is optional but it does allow you to set name/value pairs for variables that you want your Flex application to take advantage of. If this was an advertisement for example, you could update the information being received over time.

By not hard coding values into the application you have the flexibility that a flash based project gives you, in addition to being able to quickly distribute new content without needing the users to download the application a second time.

The template option is next. Setting the width and height of the application. These values are based on accepted sizes for banner ads. They are optional and can be changed within the Flex application it self if needed.

The last option is to add any external ActionScript or SWC files to this project. In our case we won't need any. Click finish. You should now have a Flex application ready to go. Before we get into writing our code lets set up our YQL query.

Yahoo Query language allows you to search resources online as if they were a database. By going over to developer.yahoo.com you can learn about the developer resources Yahoo! provides.

For our example we want to look at the YQL developer console. Go over to Tools and services in the main menu and choose YQL. This should bring you to the YQL homepage. From here you can click "Try the console" on the right side, you may need a Yahoo! id to log in if you don't have one.

In the console you have a main window where you type in the YQL statement, the lower windows will show you the results in either XML or JASON formats. The top right shows you what the request will look like as a REST query. Beyond that are example queries and lists of tables that can be queried.

To get a feel for how this will work scroll down the list and select "get 10 flickr "cat" photos". When selected you will see the results change and by default and XML list of results will display. The results given provide the ID of each of the images that meet that criteria.

On the bottom right there is a sections called Community Tables. These tables, not built by Yahoo! extend the features of YQL. We are going to take advantage of the Twitter community table. Click "Show Community Tables" and scroll down to twitter table. Expand the table and you will see three options. Click "twitter.users.profile" this will show a default version of the query. We will update this to suit our needs.

Change the default query to "select * from twitter.user.profile where id=" then in quotes choose a valid twitter id. By clicking test YQL will go out and find the information and return it as XML. You should now in the formatted view panel see all the information regarding that users profile. The name, location, photo and description information should now all be available.

If you look back over to the REST query section, you will find a URL encoded version of the query. In a moment we will take this version of the query and apply it to our Flex application.

When returning back to Flex builder you will see some familiar tags, other will be new. The Application tag has an extra name space called widget.

 xmlns:widget="http://flex.adobe.com/widget" 

<mx:Button id="shareButton" label="Share" click="{shareMenu.visible = true}"/> 
<widget:ShareMenu id="shareMenu" visible="false" pid="YOUR_PARTNER_ID" cid="InsideRIAShareExample" widgetTitle="Inside RIA Flex Application using FPS" advancedTracking="true" width="100%" height="100%" showEmail="true" showBookmark="false" postToDesktop="true" themeColor="#092A3F" shareMenuTheme="Ocean Blue">
      <widget:embedCode><![CDATA[<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" id="FPS_Distribution" width="${width}" height="${height}" codebase="http://fpdownload.macromedia.com/get/flashplayer/current/swflash.cab"> <param name="movie" value="http://www.technologycoach.com/insideria/FPS_Distribution.swf" /> <param name="quality" value="high" /> <param name="bgcolor" value="#869ca7" /> <param name="allowScriptAccess" value="sameDomain" /> <embed src="http://www.technologycoach.com/insideria/FPS_Distribution.swf" quality="high" bgcolor="#869ca7" width="${width}" height="${height}" name="FPS_Distribution" align="middle" play="true" loop="false" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/go/getflashplayer" FlashVars="crtr=1"> </embed> <param name="FlashVars" value="crtr=1" /> </object>]]></widget:embedCode>
<widget:widgetDescription>This is an example appication using Adobe Flex and Flash Platofrm Services</widget:widgetDescription>
</widget:ShareMenu>
<widget:EventService id="customEvents" pid="YOUR_PARTNER_ID" cid="InsideRIAShareExample"/>

Looking at the Flex Properties panel, the share menu options should be available to you. First is the id witch by default is called "shareMenu". Under that is the theme dropdown menu. These are predefined color schemes for the share menu. The selection Import Custom Theme option lets you import an XML file that contains all the color, size and link option information.

Compile the Flex project to see how the share menu works. When the browser is launched click the button component. Once clicked the share menu is loaded into the project. You can see that a number of social networks are listed as well as the ability to share this application over email or to social bookmarking sites.

Return to Flex Builder and then back to the Flex Properties panel. Now that we have seen what the default share menu looks like we can make adjustments depending on our application design.

The drop down menu labeled "Show bookmarks" allows you to enable or disable that feature in the final share menu. If you want to use this option then you need a URL that points to the application online.

Next is the ability to share this application over E-mail. If this is an option you want, select true then fill out the subject of the e-mail and the body.

The show desktop option allows users to install the application on their desktops as widgets. This could be in the form of Windows Vista sidebar widgets, Yahoo! widgets or an Adobe AIR application.

Once all of your options are selected we can quickly put together an application that can be shared.

Back in the code view of our Flex application. We can add a panel and within the panel add a few fields. Above the widget code add this block of MXML.

 
<mx:Panel width="100%" height="100%" label="Check Twitter Profile">
  <mx:VBox>
    <mx:HBox>
      <mx:TextInput id="twitterID"/>
      <mx:Button id="submitButton" label="Get Twitter Profile" click="loadProfile()"/>
      <mx:Button id="shareButton" label="Share" click="{shareMenu.visible = true}"/>
    </mx:HBox>
  </mx:VBox>
  <mx:VBox>
    <mx:Image id="twitterImage"/>
      <mx:HBox>
        <mx:Text id="userName"/>
        <mx:Text id="accountName"/>
      </mx:HBox>
      <mx:Text id="description" width="300"/>
</mx:VBox>		
</mx:Panel> 

One of the things you may have noticed is that we moved the share button from the original group of pre-generated code to this new block of code. The reason for adding this new code above the previous code is that the share menu when loaded will land over this panel. Also in this new block of code contains an Image tag to load the users image and three text tags. One for the user name, one for their twitter ID and the last as the description used in their profile.

Next we add some ActionScript to get all the parts working together. We will add a script tag to the document and initialize everything by adding a function to the application tag's creationComplete event.

 
<mx:Script>
      <![CDATA[
            import flash.net.URLLoader;
            import flash.net.URLRequest;
            import flash.xml.*;
            import flash.events.Event;

            private var _yqlURL:String;
            private var _urlRequest:URLRequest;
            private var _yqlLoader:URLLoader;
            private var _xmlObj:XML;
            private var _yNamespace:Namespace;

            private function init():void
           {
             _yqlLoader = new URLLoader();
             _yqlLoader.addEventListener(Event.COMPLETE, parseResults);
           }

Here is the addition to the application tag witch we re-sized to be 400x300 and added the creationComplete event.

 
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
	layout="absolute" width="400" height="300" 
	xmlns:widget="http://flex.adobe.com/widget"
	creationComplete="init()">

Back in the MXML the submit button had a function called loadProfile associated with it. Here is where we combine YQL with our ActionScript. Back over in the YQL console where the REST version of our query is shown, copy that query. With a quick edit, it will be come the basis for the next block of ActionScript code.

 
private function loadProfile():void
{
 _yqlURL = "http://query.yahooapis.com/v1/publicyql?q=select%20*%20from%20twitter.user.profile%20where%20id%3D'"+twitterID.text+"'&format=xml&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys";
 _urlRequest = new URLRequest(_yqlURL);				
 _yqlLoader.load(_urlRequest);
}

The one quick edit we spoke of before was to change the username in the query string to the text of the field "twitterID". this way what ever valid id typed in should return a result.

Our final block of ActionScript wil parse the results of the call to the YQL service and display the results. The results in this case come back as XML. In order to parse though all the data the Namespace class is used.

 
private function parseResults(evt:Event):void
{
     //trace(evt.target.data);
     _xmlObj = new XML(evt.target.data);
 	trace(_xmlObj.results);			
     _yNamespace = new Namespace("http://search.yahoo.com/datarss/");
     trace( _xmlObj.results.._yNamespace::item[0].@resource);
     trace(_xmlObj.results.._yNamespace::meta[0]);
 				
     twitterImage.source =_xmlObj.results._yNamespace::item._yNamespace::item[0].@resource;
     userName.text = _xmlObj.results._yNamespace::item._yNamespace::meta[0];
     acountName.text =  _xmlObj.results._yNamespace::item._yNamespace::meta[1];
     description.text = _xmlObj.results._yNamespace::item._yNamespace::meta[2];
}

In order to better understand what the code is doing we will run though the results.
When running the first trace statement the XML results they look something like this:

 
<results xmlns:yahoo="http://www.yahooapis.com/v1/base.rng">
  <y:item rel="rel:Person" resource="http://twitter.com/asciibn" xmlns:y="http://search.yahoo.com/datarss/">
    <y:meta property="foaf:name">Russ Ferguson</y:meta>

You may notice the "y" included in the results. Because of this, just using ActionScript to access these nodes does not work. To access these nodes you need to employ the namespace class. The use of namespace here is just like in Flex. Once we create a name space object we can use it to help parse though the XML results.

_yNamespace = new Namespace("http://search.yahoo.com/datarss/");
trace( _xmlObj.results.._yNamespace::item[0].@resource);
trace(_xmlObj.results.._yNamespace::meta[0]);

You can see in this trace statement the combination of the XML Object and the Namespace object, to get the results of the XML returning from the YQL service. The trace first looks at the results node, then looks for any of the "y" tags labeled item and finds the first one, then gets the attribut called resource. A similar result for the tags labeled meta

The last part of the code just links of the results to the MXML components.
With all that done now we can run the application

Compile the movie. Locally you should be able to enter a users valid twitter id and receive results.

When clicking on the share button the share panel should load and the settings should reflect the options chosen in the properties panel.

Go back over to Flex Builder and select the project. Choose properties then Flex Sharable Application. This an the option below it are the same options available to you when you first create the project.

Notice SWF URL and Preview image URL.　Take the compiled swf file and a screen shot and place then on your server. The location of those files is what you would use to fill out these fields.

Now your application is ready. When selecting any of the social networks on the list a user can embed the application on their profile page, provided they have an account.

The distribution service is just one way to take your Flash based content and move it around the social web. Take a look at some of the tutorials on adobe.com about how to intergrade this into your Flash Professional or Dreamweaver projects. Here is the Flex 3 Project with all the source code.

Read more from Russ Ferguson.