Many people are confused about the relationship between Flash, Flex and Ajax. Its a bit tricky, because in many cases the three technologies are similar to each other: all three allow web developers to add dynamic elements to static webpages very easily. Flex and Flash are both delivered via the Flash Player (normally used as a plugin to browsers), Ajax applications are delivered via the browser. Ajax is written with JavaScript, XML and HTML components, Flex applications are written with ActionScript, XML and MXML components.

I think that because of these similarities, many people often assume that you'll build your site using Ajax OR Flex OR Flash. The truth is, that's just not the case. There are a number of great examples of sites that are using Flash and Ajax together. Today I'm highlighting two of them: Google Finance and Yahoo Finance.

Both sites use Flash to display graphs of stock performance - a popular use of Flash given Flash's rendering engine and performance. What I really like about Google Finance is the fact that the HTML news on the right hand side of the site interacts with the Flash graph on the left. You'll see this when you click a letter in the graph, it will highlight the news on the right hand side (or vice versa).

Google has also written a nice custom Flash component that allows you to change the date range for the graph using a slider, located just below the graph. Even cooler - expanding the graph to show more data adds on more news items (shown as letters in the stock chart), and clicking on a letter not currently shown on the webpage scrolls the HTML news to that item - very nice. Google is using Flash for the graphs, and uses the Flash JavaScript Integration Kit (click here to see it on their site). A Flex developer could use the Flex Charting Components in combination with the Flex / Ajax bridge to do something fairly similar but with much less work. (In fact, Nitobi does something similar.)

Yahoo's integration with HTML comes from the left hand "Compare To:" menu item. Clicking on an item in that list will load the stock data into the Flash chart. What I like about the Yahoo implementation is that they'll also change the location in the URL bar for you, allowing you to easily copy and paste a URL so others can see the same view as you are. That allows you to do things like link to this graph showing Adobe's stock compared to Microsoft's over the past year. Yahoo also has a similar time slider to Google - roll over the "Time Range" blue item in the bottom right hand side of the graph to enable it. Notice that the URL bar changes when you select a different time range, allowing me to easily link to the same graph showing Adobe's stock compared to Microsoft's stock since 1986.

The conclusion here should be that the choice of Flash or Flex doesn't need to be an all or nothing choice. You can integrate Flash and Flex into your existing website easily, using technologies like the Flash JavaScript Integration Kit or the Flex / Ajax Bridge. Adobe has also shown an Ajax bridge to Flex Data Services - I'll get into that early in 2007.