by Serge Jespers
Since the release of Flash Player in 1996, I have been continually amazed by what people create with Flash technology. Sites like Gabocorp and Eye4u changed my life by inspiring me to start playing with Flash. As a result, I created one of the first sites based on Flash technology in Belgium, my home country. After launching the site, Hoogland.com (for Belgians most eccentric radio host Peter Hoogland), I landed a job as a web designer and developer. Now I am an Adobe platform evangelist and I travel the world searching for and talking about rich internet applications.
Over the years, the Flash platform has evolved and matured, and designers and developers have become more and more creative with the technology. In this article, we examine four innovative RIAs and explore how they were created.
As a freelancer, I worked on a couple projects for Sony VAIO Europe. In all honesty, Sony VAIO is a dream client not only because the product is so cool, but also because Sony is remarkably open to using new technology. All things online for VAIO in Europe are made in Belgium by Nascom, a young, dynamic web agency that specializes in RIAs.
To commemorate VAIO's 10th anniversary, Nascom created a unique virtual museum where every year in VAIO history is represented in a dedicated 3D space. The center room holds a quiz with questions about the surrounding rooms. To create a fluid user experience without having to ask the user to install anything new, the agency chose to build this site on Flash and the Papervision 3D engine. The initial concept was immediately approved, and in two and a half months, a dedicated team of seven designers and developers built the impressive front end as well as a 3D CMS with Adobe Flex that enables them to easily and quickly change content in the 3D rooms. The team also called on Ralph Hauwert, one of Papervision's key players, to help them code the 3D engine. This impressive piece of work really pushes the boundaries of both Papervision and Adobe Flash Player.
Figure 1. Sony Vaio
TokBox is a new free service that enables you to communicate via video in a smooth and inviting environment. This idea is far from new, but the simplicity TokBox offers is simply amazing. You don't have to install anything new. The video runs in Flash Player, so just send your TokBox link to friends and family, and you are ready to send and receive video messages. In addition to the browser version, TokBox is also available as a standalone Adobe AIR application and a Facebook plug-in, which makes it even easier to use.
By using Flash Media Server and Flex, the development team was able to release the first version of TokBox in just a few weeks. Even though TokBox is still under heavy development, it works without a glitch, and the company adds new features nearly every week. A recent addition is an API that enables developers to easily integrate video into their applications.
"Flex Builder and the rest of the Adobe toolkit provide great user experiences. The technologies are so fluid, which makes them easy to develop on," says Brian Philips, vice president of product management for TokBox. "We get so much great feedback on how easy TokBox is to use. Adobe tools have really made it easy to build such an intuitive application."
Before deciding on Flex, the TokBox team also looked at some other web technologies but had some problems getting the application to run consistently across browsers and platforms. With Flex, TokBox developers can write the application once, and it runs everywhere, which dramatically shortens their testing time and thus increases their productivity. As an added bonus, they were able to use the same codebase to build the desktop version of TokBox with Adobe AIR, saving them significant time.
Figure 2. TokBox
When I visited Gugga in Bulgaria a few months ago, I couldn't believe my eyes when I saw the first drafts of this site. At the initial briefing, Gugga received a video animation from Bacardi Global Brands that was built with post-production tools such as Adobe After Effects. The client envisioned the animations as transitions for the site. But after experimenting with Papervision to mimic the cinematic transitions from the video animation, the development team was able to replicate the original video example — in Flex, believe it or not.
"Flex is the most popular component-oriented framework for rapid application development in the Adobe Flash ecosystem," says Svetoslav Sotirov, managing partner at Gugga. "This makes Adobe Flex the perfect choice for building quick prototypes of certain user experiences and then gradually modifying them into a final high-quality product."
Doing these types of marketing-oriented sites on an architectural framework like Flex was nothing new to Gugga. The previous version of Bombay Sapphire was built on its own ActionScript based framework called Gugga Flash Framework (GFF), which proved that the agency could successfully deliver these types of projects. Gugga's 20-person team wanted to move to Flex because it had everything Gugga built into its own framework: the stability, architectural approach, components, and features the team needed. For all you nonbelievers, Gugga will be speaking at Adobe MAX in Milan, Italy, and will demonstrate how the agency built this project.
Figure 3. Bombay Sapphire
"Parleys is the next-generation RIA eLearning platform," according to creator Stephan Jansen. This project grew out of the Belgian Java User Group, and it holds more than 200 hours of Java presentations available at the click of a mouse both online and offline. Since Jansen comes from a Java background, he naturally looked at other RIA technologies, but he soon found that Flex was the best way to go. The front end of Parleys was built by one guy — Benjamin Dobler, the creator of the RichFLV AIR application — in just a couple of months.
All the presentations available on Parleys contain two parts: a video of the speaker and the presentation slides. This enables you to fully control what you want to see. You can view the speaker or the slides, or you can watch them side-by-side. You can even customize the transitions between the slides.
I often watch these types of presentations when I'm on the train or an airplane. Luckily, the Parleys guys thought of that and released an Adobe AIR version of the Parleys site. The AIR version has all the same features that the browser version has (and uses the same codebase), but it gives you the ability to download the presentations you are interested in so you can watch them offline. The browser version can also communicate with the desktop version to enable you to easily download the presentations from your browser. And the company is also currently working on a tool that will allow other user groups and companies to easily use the Parleys application for their own presentations. Check out Dobler's session at Adobe MAX in Milan, Italy, for a peak at how Parleys is built.
Figure 4. Parleys
There are so many more innovative and exciting projects out there as well — some we know about, and others are in the works. If you are working on an inventive application for the browser or the desktop using Adobe technology, tell me about it by e-mailing email@example.com or leaving me a message at TokBox at tokbox.com/sjespers.
Serge Jespers is an Adobe Platform Evangelist who travels all over Europe, the Middle East and Africa, spreading the word about Adobe AIR, Flash, and Flex.