Flash and Ajax together 1

Apr 10, 2006 by heidi in Blog, Technical Tags: ,

Many people talk about Flash and Ajax like they’re competitors, both being rich internet applications (RIAs). After doing some research on them, I beg the difference though. Of course, you shouldn’t use them just to use them, but either have their own strengths.

First, though, let’s start with the beginning …


More...

Flash

Flash applications

Flash applications, to me, are .swf files. These RIAs can be made with Macromedia Flash or tools like Swish and Laszlo. The programming language of Flash is actionscript.

Examples

Examples can be found at the showcase of the Macromedia website: http://www.macromedia.com

Ajax

Ajax applications

Ajax, which stands for Asynchronous Javascript and XML, is also a kind of RIA. These applications not only make a website more attractive, but also reduce the waiting for it to a minimum by it’s dynamic communication with the server.

Technologies

Ajax on itself isn’t a technology, but uses several different technologies:

  • XHTML and CSS for the standard presentation
  • Document Object Model (DOM) for dynamical reproduction and interaction
  • XML and/or XSLT for exchanging of data and/or manipulation of it
  • XMLHttpRequest for asynchronical data exchange
  • Javascript to link them all together

Model

Most user interfaces of the classical web application model send an http request to the server. This server will then process the request, when done it’ll send an html page back to the user. While the server is doing all of this, the user of course has nothing else to do but wait.
Like you can already guess, this is not very ideal.

The Ajax web application model, however, provides an Ajax engine between the user interface and the server. This engine is responsible for both the user interface and the communication with the server. It will make sure that the interaction between the user and the application happens asynchronical, independent of the communication with the server. Because of this, the user will never have to wait again for the server to respond.

Examples

  • LinkedFeed: http://www.linkedfeed.com
    Dragging and dropping of objects made possible. You can also change the layout and titles of the different subjects to your own liking.
  • PHP Free Chat: http://www.phpfreechat.net/overview.en.html
    The chat and nickname zone are kept up to date without flickering. Another advantage of Ajax here is that there is less bandwith used since only new messages are sent to the server.
  • Google Suggests: http://www.google.com/webhp?complete=1&hl=en
    Instantly after typing in letters, possibilities of words are suggested. These words change automatically without any form of waiting as soon as the letters typed in change.
  • Google Maps: http://maps.google.com/
    The possibility to look at maps and move them to your own liking without having to wait for the page to refresh.

In which cases is Flash better?

Media Handling

Flash is much better with sound and graphics than regular HTML. This is one of the major reasons why the top 40 websites of these days contain Flash.

Compatibility

There is only one Flash player, the Macromedia Flash player. Because of this you’ll save a lot of time, since your application will look the same in all the different browsers.

Vector graphics

With Flash, it’s easy to build, use and animate vector graphics. Of course, vector graphics are also available for most browsers, think about SVG (standard for Mozilla 1.5 and available as plug-in for other browsers) and the Canvas element (Safari and Mozilla 1.5). But, the possibilities are far from universal and you practically always need a plug-in.

Machine access

A Flash application can easily access webcams and other peripherals. This is something regular web applications can’t do.

In which cases is Ajax better?

Searchability

In general, web pages are found a lot easier by search engines than Flash pages. These search engines still play a very important role in the number of visitors that find their way to your website. Some search engines today can already index swf files, but in general they still remain less visible.

Openness

There is an open source community, but there is no such thing as an open source Flash player. This can be a personal reason why you would avoid using Flash. The same goes for companies who wouldn’t want to be dependent of another company or even a potential rival.

Accessibility

Ajax applications automatically follow the font and color settings of their environment, while Flash applications use those specified by their designer. This could cause problems for disabled users. Also tools like screen readers and acceleration keys aren’t always available in Flash applications.

Security

Flash applications are sometimes distrusted because:

  • it’s very often used for visual attractive ads
  • it’s used to fool pop-up blockers
  • it can be used to create cookies the user can’t easily delete

Because of these things some people install Flash blockers or look at Flash websites with prejudices.

Ease of development

People who write complex Ajax or Flash applications mostly use advanced tools for this. In general, the tools needed for Ajax applications are both easier to use and cheaper than those needed for Flash applications.

Flash and Ajax brought together: Photographer’s Showcase

Intention

By building an application finding out for myself if there really is use in combing the two of them.

Description

A list of photographers appears on the left. Of each of these photographers you can see an example of their work, shown in Flash. Of each photograph you can obtain more information by clicking on it. At the bottom of the page there you can read a general description of the photographer.

Example: (I no longer have this as a working version online, but you can still download the source code at the bottom of this article.)

Photographer's Showcase

Technologies

  • xHTML (Strict): reproduction of the data
  • CSS: lay-out
  • XML: the actual data of the pages
  • Ajax (javascript): the list of photographers and the description of the chosen photographer
  • Flash: reproduction of the photographs
  • Ajax-Flash communication: the interaction between the photographs and the photographer

xHTML (Strict)

This technology is used to show the content of the site.
The data itself isn’t directly put on these pages, but tags are provided to tell javascript where to put this data.
The javascript and css files used for this project are loaded here.

CSS

This technology is used to determine the lay-out of the site.

XML

This technology is used contain the actual data shown in the site. This data will be loaded in the xHTML page by javascript.

Ajax (javascript)

This technology is used to list the photographers and the information about each photographer.
The xHTML page uses javascript to adjust the data. This javascript uses the XMLHttpRequest to acquire the data asynchronically.

Flash

This technology is used to visualize the photographs of a chosen photographer.

advantages of Flash/actionscript:

  • Zoom function:
    with actionscript is fairly easy to create a zoom function for the photographs.
  • Shared Object:
    in this application it’s possible to change the colors. To make sure that a user will see the colors he/she chose last time at their next visit, you can use a shared object.
    With xHTML there is the possibility to work with cookies, but these are very easily deleted.

Ajax-Flash

I have found 2 ways to combine the both of them:

  1. Aflax
  2. Flash/Javascript Integration Kit of Macromedia

1. Aflax

  • Description
    The gid of Aflax is that all the Flash development is done with Javascript. There is no use of actionscript here at all. The Aflax library can call flash functionality with javascript.
    You can download Aflax at http://www.aflax.org
  • Advantages
    • Only one programming language to combine both.
    • You don’t have to recompile the Flash file after each change anymore.
  • Disadvantages
    • To develop the Flash side of your application, you use the API of Aflax. This API isn’t as extensive as the functions, methods and attributes available in Flash itself with actionscript.
    • Aflax can only be used with Flash 8. Because of this it won’t run in Opera or Linux. Opera does not yet support the Flash 8 External Interface and there isn’t a Flash 8 Player available for Linux yet.

2. Flash/Javascript Integration Kit of Macromedia

  • Description
    The Flash/Javascript Integration Kit of Macromedia makes it possible to seamlessly communicate between Flash (actionscript) and Javascript through functions.
    There already is a way to communicate with javascript in Flash. The most important difference between that and this kit is that with this kit it’s not just possible to send strings, but also objects, arrays, numbers, booleans, dates, null and undefined values.
    You can download this kit at     http://weblogs.macromedia.com/flashjavascript/
  • Advantages
    • You can use all the advantages of actionscript and very easily transfer data from Flash to javascript.
    • It’s tested with several different browsers: Windows IE 6.0, Windows Firefox 1.0, Windows Opera 8.0, Macintosh Opera 8.0, Macintosh Firefox 1.0, Safari 1.2.4 and 2.0 en Linux Firefox 1.0.4.
  • Disadvantages
    • This kit can be used for Flash Players 6,0,65,0 through 7. Meaning it’s not yet available for Flash 8. This is because Flash 8 uses External Interface.
      This kit, though, is still an ongoing project, so there is a possibility that in future version of it, Flash 8 will be supported.

Conclusion:

  • Since Flash 8 is relatively new and not yet every user has updated to the Flash 8 player, I personally didn’t choose for a technology that can only be seen with this player. Even if you suggest people should download this version of the player, it still isn’t even available for Opera and Linux users.
  • I do believe that if you’re very good with javascript and not actionscript, Aflax would still be worth considering. But, since I prefer actionscript over javascript any day, I don’t see the point in learning a new API.

In my own application, Photographer’s Showcase, I decided to use the Flash/Javascript Integration Kit of Macromedia, because of these reasons.

Conclusion

Like I said in the beginning, when you use research these technologies and you use either for what they’re best at, I do believe that letting them work together will work in your own advantage. Moreover, it’s not even very difficult to let them work together.

Examples of Flash and Ajax working together

Download the Photographer’s Showcase here