To continue the theme of using seamless Flash/Flex/AJAX applications, here's a really simple example how you can use Flash and AJAX together seamlessly within your applications. Yes, i said Flash, not Flex. In this example I created an ultra-lightweight ActionScript-only charting project that can be used within AJAX applications.

One complaint that people have with Flash/Flex applications is that the file size is too large. There are a few things you can do to minimize that. In Flex 3, you can use cached framework Runtime Shared Libraries (RSL) to help reduce the file size of Flex applications. Another solution is that you can just use ActionScript-only projects (non-flex), which are significantly smaller than Flex projects.

One thing to keep in mind with ActionScript-only projects: You have to build everything you need yourself. One of the major benefits of the Flex framework is that it has a large number of pre-existing controls to help in your development tasks. It is a huge productivity boost. ActionScript projects do not have the Flex libraries, so they are much smaller, but also have no access to the controls supplied within the Framework.

I wanted to quickly show how you can create a small-footprint dynamic Flash based chart within an AJAX application. In this example, I created a basic charting component that communicates with the HTML container through ExternalInterface and JavaScript. Here, we are only using Flash for its graphical capabilities.

When I say "small footprint", I really mean it. The compiled swf file in this example is only 1813 Bytes. Thats 1.78 KB, or .00173 MB. This also happens to be smaller than your typical jpg image used for a chart.

You can see the output here: This is actually four instances of the chart object.

You can click on the "generate data" button to push new data into the chart controls.

Now, on to what makes this work... When creating the ActionScript project, the application extends the basic "Sprite" class, which has everything you need for creating visual components.

One of the first things you will need to do is register the callbacks so that your JavaScript can communicate with your Flex applications.

private function registerJSCallbacks() : void
{
 	ExternalInterface.addCallback( "setData", setData );
 	ExternalInterface.addCallback( "setStyle", setStyle );
}

This exposes two methods on the Flash application: "setData" and "setStyle". "setStyle" is used to define how the chart will be dispalyed. "setData" will be used to pass data into the charting components. Here's "setData" in ActionScript: You can see that it sets up all the style values for rendering the chart. Once the styles are set, it then calls the "drawChart" function, which actually renders the chart.

private function setStyle( style : Object ) : void
{
 	trace( "setStyle", style );
 	this.styles = style ? style : {};
 	
 	if ( !styles.style )
 		styles.style = DEFAULT_STYLE;
 		
 	if ( !styles.bgcolor )
 		styles.bgcolor = DEFAULT_BG_COLOR;
 	
 	if ( !styles.fgcolor )
 		styles.fgcolor = DEFAULT_FG_COLOR; 
 		
 	if ( !styles.thickness )
 		styles.thickness = DEFAULT_THICKNESS; 
 	
 	if ( !styles.min )
 		styles.min = DEFAULT_MIN; 
 		
 	if ( !styles.max )
 		styles.max = DEFAULT_MAX; 
 		
 	if ( !styles.tips )
 		styles.tips = DEFAULT_TIPS; 
 
 	drawChart();
}

In javascript, this is invoked by the following: You can see that it creates a style object, and passes the style object to the exposed "setStyle" method on the swf.

var swf = document.getElementById( 'AJAXCharts1' );
var style = {style:"line", bgcolor:0xFFFFFF, fgcolor: 0x000000}
swf.setStyle( style );

The other publicly exposed function on the ActionScript project is "setData". This function is actually quite simple; It sets the internal private variable "data" and invokes the "drawChart" function.

private function setData( data : * ) : void
{
 	this.data = data as Array;
 	drawChart();
}

In JavaScript, this is invoked by the following code: You can see that it creates a data array, and passes the the array to the exposed "setData" method on the swf, which invokes the ActionScript function above.

function generateData()
{
 	var data = [];
 	
 	for ( var x=0; x < 15; x++ )
 	{
  		data.push( Math.random() * 100 );	
  	}
 	
 	var swf = document.getElementById( 'AJAXCharts1' );
 	swf.setData( data );
}

I'm not going to dig to far into the "drawChart" function now, but I'll just say that it handles all of the actual rendering of the charts. My primary focus for this post was the JavaScript/ActionScript communication. "drawChart" programmatically uses moveTo, lineTo, drawRect, and drawCircle to render the chart visualizations. You can dig into the source here:

This example shows how to use this technique to build your own lightweight custom charts. I put this together in a few hours. If you are looking for an existing, and more feature rich flash-based charting framework for AJAX applications, try looking at Yahoo!'s YUI charts (which still has a small footprint of 121 KB).