Using Flash to increase social networking application portability

It’s no secret that each of the major social networking containers implements its own set of rules for how developers can interact with its applications. Even OpenSocial-compliant containers usually don’t implement the full standards body. This usually gives developers additional concerns when it comes time to migrate their application to another container.

Flash is an excellent medium for building high-animation interactive components and decreasing the time that you, the developer, will have to spend adjusting your app to get it working perfectly for a new container. In this case, we used Yahoo!'s ASTRA Flash components to replace some of our graphing components. We passed a JSON string to the Flash object, used a JSON serialization library to parse the data, and then used those data structures to build out our components.

We wanted to display a graph detailing positive versus negative voting with an overall vote line running through the middle. Below is a stripped version of the code base we used to initialize our graphing utility. The pieces that have been removed are those that handled the parsing of the inputted voting structures in order to provide the graphing point data providers with dynamic results:

import*; //astra library
import*; //astra library

//create a new chart area
var chart:StackedBarChart = new StackedBarChart();
chart.setStyle("textFormat", new TextFormat("Arial", 12, 0x2c6076, true));

//create astra bar series for positive votes
var upBars:BarSeries = new BarSeries();
upBars.displayName = "Positive";
upBars.dataProvider = [5,6,3,2];
upBars.alpha = 0.7;

//create astra bar series for negative votes
var downBars:BarSeries = new BarSeries();
downBars.displayName = "Negative";
downBars.dataProvider = [-3,-2,-4,-4];
downBars.alpha = 0.7;

//create astra line series for total (positive - negative votes)
var totalLine:LineSeries = new LineSeries();
totalLine.displayName = "Total";
totalLine.dataProvider = [2,4,-1,-2];

//set chart data and styles
this.chart.dataProvider = [upBars, downBars, totalLine];
this.chart.categoryNames = choiceList; //where choiceList is an array of choices
this.chart.setStyle("verticalAxisLabelDistance", 10);
this.chart.setStyle("horizontalAxisLabelDistance", 10);
this.chart.setStyle("seriesMarkerSkins", [,,bullet]);
this.chart.setStyle("seriesColors", [0x66e366,0xff6675,0x2c6076]);

All of the tools we used for this application may be downloaded for free:

Get: ASTRA Library
Description: A library of Flash objects that may be used to build out dynamic components and applications. This was the backbone of our graph.

Get: JSON Serialization Library (corelib download)
Description: A parsing utility that will accept a JSON string and convert it to an ASON structure to allow parsing. Be careful with the data you input into this. All key value pairs must be wrapped in double quotes in order to parse correctly; single quotes or bare values will result in a parsing error.

Jonathan LeBlanc
Senior Software Engineer / Technology Evangelist
Yahoo! Developer Network