Flexing Your Backend : Leveraging Adobe Flex and AIR to create data driven rich internet applications

Flash is a technology that should be familiar to all of us. It is the driving force behind rich interactive content on the internet. It allows us to present content in a consistent manner, efficiently across platforms. Much time and effort is spent building these experiences. With this in mind, we must consider strategies for garnering the most value out of time spent creating the client facing content. One way to ensure this is by coupling the public facing experience with a rich backend solution for managing, adding, editing, and updating content.

Focusing on the presentation is vitally important. What our customers see is how they perceive our products and services. You get only one chance to make that first impression, and we don’t want to blow it. Making sure the content the customer sees is relevant and fresh should be a top priority. At times, traditional development has on many occasions created a presentation that was extremely difficult for a non-technical user to maintain and update the content that the customer ultimately sees. What’s the solution to this problem? How do we get a data driven application that is easy to maintain without having to call an uber-geek for even minor changes to the content?

Rich Internet Applications

Over the last several years, the Flash platform has added many tools that provide viable, lasting solutions for these problems. Two technologies in particular stand out as solutions; Flex and Air. Flex is a framework that provides a set of tools for rapidly developing Rich Internet Applications. AIR is a cross-platform tool for leveraging both Flash and Flex as desktop applications. These tools allow us to develop data driven backend solutions to provide quick and easy ways to manage our client facing presentations. They are a bridge between the customer, our products, and the underlying data that connects them.

Business Intelligence

Beyond providing an easy to manage interface for updating our content, what else can an RIA backend provide us with? When you have a bridge between your customers, your products, and the data that connects them, you are presented with the opportunity to visualize this connection. Analytics, reporting and trends equate to business intelligence. Flex and AIR provide robust tools for visualizing data. Charts and graphs are just the tip of the iceberg. Realtime regional maps showing orders as they happen. Visualize trends in three-dimensional space. There is virtually no limit to the variety of ways your data can be presented to provide your team with constant real-time statics and information about your products and clients.

User Experience

The experience of your clients is vital. It is equally as important to ensure that your team has access to tools that make their jobs easier. We want people to actually use the data that is available, and remove any obstacles that might prevent this from happening. We don’t want to create a solution that will be used for the first week after the roll-out meeting, and watch usage taper off because it is too difficult to use, ugly, or simply doesn’t function. What we want, what we need, is a lasting solution that will span many campaigns and iterations of the client facing content. By creating a robust, easy to use, backend solution we are providing tools for our team to use and rely on. We want a solution that will grow as business grows and meet the needs of next year as well as it meets the needs of today.

Tying it all Together

If a complete solution is the ultimate goal, than we need to focus on the user experience from both the customer perspective as well as the needs of our team to adequately support our customers and products. Data driven rich internet applications built on Adobe Flex and AIR provide a means to achieve this goal.

Feel free to check out our Atlanta Interactive Agency, and learn more about what we do.

Joel Hooks – Woven Interactive, LLC

When your business is making money based on time then tracking time is of obvious importance. With a little Flash wizardry and the GAforFlash tracking classes you can easily accomplish this task.

In our tests the 3 important metrics to test against were:

1) Player load time
2) Amount of time it takes for the first video to play
3) Duration player was being viewed (5 and then 10 second interval )

To get the player load time and then the video playing time we first grab the current time when the swf initially loads:

When brightcove loads the player we listen for the template loaded event

Now that we have our first metric to work with we send that information to google and start working on our next metric:

Next is to track when the user sees the first video playing:

Our final metric was one that we were most interested in. This tracks the time spent actually viewing the entire video player.

The solution to this is very simple. Our solution was to use a timer based solution as follows. You can download the foomonger later classes here. Or just use a the built in Flash Timer.

This report will now show you how long your video player is live on a persons computer. If you want to track this on a per session basis you would just want to add a random variable as follows:

Hopefully this saves some of you a lot of time with implementation into your own video players.

If you or your clients need any help, feel free to contact our interactive agency. We will be happy to assist.

In an effort to find a very simple and easy to use physics engine we stumbled upon APE. Although this is not the most powerful of Flash physics engines it does seem to have a rather minimal learning curve.

There are several other physics engines in AS3 available. The one that seems to currently be the leader of the pack is Box2D. Box2D is a port from C++ so package names / method names etc do not follow Actionscript best practices (lowercase package names & uppercase method names). Not really a big deal but a little odd at times.

For this game it seemed that APE had plenty of features and power to get the desired result.

Monsters (fish), and coins were easily placed in an array

Movement is as simple as adding force to an object:

All together the creation of this game was not difficult. With some more time spent on adding sounds, animations to monsters, and general fluff you would have a sweet fun game.

If you or your clients need any help, feel free to contact our interactive agency.

Just finished posting our intro example of how to get started with the Augmented Reality FLARTookKit on papervision2.com

Take a look. Enjoy.

If you or your clients need any help getting started using the FLARToolKit feel free to contact our interactive agency.

We took on a small task today to add our latest Tweet's to the homepage of our site. We decided to go with the library twitterscript. It's a nice simple wrapper around the twitter API and allows you to quickly create your app. All this with one catch. Out of the box it only works locally due to twitters cross domain policy.

To get around this we had to make a few tweaks to the code and add a proxy file.

Twitter.as - Changed lines 55 - 98

Then adding a proxy.php file to our server:

Do this and you'll be rid of the Security Errors and able to integrate Twitter into your Flash site.

If you or your clients need any help, feel free to contact our interactive agency.

Here is the scenario:

I create a killer Flash widget and would like to track how users interact with it. If the widget is only on my site then a javascript / flash tracking solution works great. But, if I want to spread it virally and still track my results I can't rely on a javascript solution.

This is where google event tracking enters the picture: gaforflash

While you can use this to track page views button clicks etc you can also get creative and track much much more.

Our Interactive Agency decided to track Flash page load times. This would allow us to determine if the average user was waiting too long to view a page. Example code below:

This can also be done to track video start times as seen in the example by Matthew McNeely.

Before you can view the event tracking data in your Google Analytics account you will need your profile to be white-listed by Google. Get started today even if you are not yet white-listed as your account will retroactively display the results from when you first implemented the code.

If you or your clients need any help getting started feel free to contact our interactive agency.

They always say that designing and building a site for your self is hard work. We won’t argue. It’s always tougher to take a the lens and turn it towards yourself, but we did it (and in a short amount of time no less.) We’re excited to announce the launch of the new Woven Interactive website. We believe that a site should be a constantly evolving medium, which how we will be approaching the site over the next few months. Browse through the site, take a look at some of the projects we’ve been fortunate enough to work on, and drop us a line to discus your project.

If you’re from Atlanta, stop by and see the office and chat for a bit. If you’re from elsewhere, and have a big project you would like to discuss, come by as well. We’re not far from downtown, the Georgia Aquarium, and the good-ol’ Coca-cola museum.

http://www.woveninteractive.com