AIR in everyday Life

This article is about my journey on how I was introduced to Adobe AIR. It also contains my personal experiences and case studies from recent projects I have worked on.

As someone who previously spent most my time creating Flash websites, I loved creative driven content, something that wasn’t always available directly from a browser at the time.  Augmented reality (AR), games, video and computer vision are the things that really excited me, especially when I found out about the news obout Overwatch.

A few years ago, as browsers started catching up with JavaScript libraries and frameworks such as JQuery and AngularJS; Flash website work started to dry up a bit.  I was faced with a bit of a fork in the road; I could learn JavaScript / HTML and give up on the high interactive stuff which I love doing or start looking at different technologies and leave the web scene for a period of time.  At the time I was fortune enough to be working with some incredibly talented people at Boffswana in Melbourne, where I dabbled with the concept of Retail Activations and Installations.

After my time after Boffswana I started to work with TKM9 as Flash Developer.  As times went on they got more and more comfortable with my ability of using Adobe AIR technologies on things like kiosks and retail installations.  They didn’t just use Air / Flash for their projects however, they used things like Unity and OpenFrameWorks; there was always a time and place for all technologies within the agency.  I did find myself justifying the use of AIR on a few projects, due to the cost effectiveness and the level of stability I could build things.  As the platform matured, I learned a lot more about physical interaction and the projects I was able to work on got more and more complex.

 

Schweppes Interactive Table

Schweppes Interactive Table

 

There were limitations however, as with every technology, there was a time and place where you simply couldn’t use AIR because of its raw speed when it comes to crunching numbers no matter how optimised you made it.  Whilst working at TKM9 I was fortunate to work on a project for Schweppes; it was an interactive table where the user could place a piece of fruit and a Schweppes soft drink on the table, using a camera we could detect the location, type of fruit and soft drink. After the user placed one of each item on the table, the table would recommend a cocktail recipe.  The entire visual front end was made using Adobe AIR and the Starling framework.  All the number crunching and computer vision was done in a separation application that was made in OpenFrameworks which ran in the background. All raw data was sent to me using OSC and then I would display it out fruit choice and cocktail recipe.  It worked out to be a really good workflow, I was able to work with the designers and creatives and using AIR it was really easy to change around assets and visuals.

 

Schweppes Interactive Table

Peroni Cube

 

Whilst still at TKM9, I worked on another project for Peroni. This gave me exposure to be able to use 3D frameworks such as Away3D. The Peroni project was a large cube that was wrapped in LCD screens, a user would stand in front of the cube, and the screens would change depending on what you were wearing and your gender. Using GPU acceleration, I was able to make full screen a interactives spanning the whole cube wall without worrying too much about frame rate.

Throughout this time I was able to use more tools and libraries to assist with completing complex projects, I incorporated features such as sound, full HD video proximity sensors, thermal printers, touch screens, touch foils.

 

Spokes - Save your skin

Spokes – Save your skin

The last project I worked at TKM9 was a ‘dress yourself’ video wall for Spokes. It was an iPad application that controlled the 3×1 video wall. This project required me to be the sole developer. I was given an ANE (Adobe Native Extension ) made for me in-house that would give locations of someone’s face from a camera feed.  Using the ANE I was able to get a reasonable framerate out of the project as the ANE ran in a separate thread and didn’t slow down the rest of the application.  I also made an iPad application to control the installation using the Starling Framework, there was a few ‘gotchas’ with working with a tablet device rather than a PC, but the whole process was pretty streamline and I was pretty happy with the performance I was able to get with mostly code I had already written.

I’m pretty excited about what possibilities are coming up with AIR, with the new tools such as the recent Profile tool, ANE, and threading. It opens up great new possibilities into things that previously wasn’t possible.

Behind Schweppes Experiential: Cocktail Revolution

TKM9 is an inline digital agency based in Melbourne where I work. TKM9 were engaged by Schweppes Australia to produce an interactive experiential installation to promote how easy mixing cocktails are.

Our campaign would begin when without explanation overnight we dropped a massive crate in the middle of one of Melbourne’s busiest train stations.  All passers-by could see was a peep hole on one of the sides revealing a hologram of a cocktail glass.  When the speculation was almost too much, after three days we opened the crate to reveal an interactive bar.  Complete with an interactive table on which anyone can place a single fruit and a Schweppes mixer, the table would then recognise the two ingredients and suggest a cocktail.

The Closed Crate

The Crate While it was closed

My role as technical lead on the project was to ensure the project was technically feasible within budget and time.  The result needed to be simple, beautiful and intuitive.

The Front of the installation

I had investigated a few different approaches and technologies but with the recent advances of GPU, accelerated Flash was now an appealing option.  I come from a Flash developer background so I was able to use my existing knowledge to create a desktop application using Adobe AIR. We used C++ and optics to track different fruit and bottles where it would send raw data through to my AIR Application to interpret.

In the past, I’ve always struggled trying to use Flash for full HD resolution installations because of speed, however using the Starling Framework and Flash Player 11 I was able to quickly use my existing knowledge of Flash and get it accelerate onto the GPU.  I created a particle system that would sprout out underneath the fruit , I was able to pump the particle count really high without worrying about frame rate, something that I couldn’t do before this latest release of Flash.  Additionally, I was able to load all the images into memory and never dropped 60 frames per second and ran like a workhorse for the entire campain.

Charles for Flash Devs

Charles here to serve you

One of my main bread and butter rolls of my job is to send  and retrieve data from Flash to a data service that’s normally PHP.  I was introduced to a great program called “Charles” which labels itself as a “Web debugging proxy”.  In this article, I will outline some of the ways Charles has made my life much easier as a Flash Developer.  Charles comes in OSX, Windows 32/64, and ‘nix flavours and is free to try.

Debugging AMF

There are many ways to connect Flash up to a database. One of my personal preferred method is to connect to a mySQL database through AMFPHP, both MySQL and PHP are free to use and thus quiet popular combination.

AMF stands for Action Message Format and has been around for quiet a while , and it’s an efficient way to retrieve data from data source, there’s not as much overhead when comparing to formats such as XML, the downside is it is a non readable format meaning you can’t go to a URL and read it like you can with XML.

It sounds all great, but if you happen to have a problem  somewhere in the process of retrieving or sending data, Flash will throw a very generic ( and unhelpful) error like this.

Error #2044: Unhandled NetStatusEvent:. level=error, code=NetConnection.Call.BadVersion

Which doesn’t really help you at all.

Using Charles, you’re able to snoop out the data being sent and retrieved from your computer to the server, Charles is able to display the error in more detail.  In the example below, there was a ‘=’ missing out of my script, using Charles I’m able to get more valuable information such as a line number of where my script went wrong.

Click to Enlarge

Test Server Scripts

Charles allows you to test your scripts without having to fire them off within flash, this is a great way to isolate just the sever stuff outside of flash and resend PHP with edited parameters.  This also allows me to make sure nothing malicious can be done to my stuff using external calls.

Test your local files online

This is probably my favorite feature! It’s called “Map to local”.  When working on projects I generally have a few web services that the SWF relies on to function, and to properly test the file, it needs to be tested on the server with in a browser so it can communication to external services. Like below.

 

This becomes very problematic when more then one developer is working on the same project as some one developers changes might break / undo someone elses changes. You can’t have both developers compiling and uploading files onto the server, and a code merge can bring in new conflicts and eat up time.

This is where Map to Local comes into effect, you can tell Charles to map file on the server to a file onto your computer.  In turn, when you test within your browser, the browser thinks its retrieving a SWF from the server, but in fact, Charles is redirecting that call to a file onto your local computer.  It’s hard to explain so look below!

Other useful stuff

  • Force your browser to not cache anything
  • Simulate slower connection for testing on lower speeds
  • Finding out all requests that your browser is getting from the net

Conclusion

I hoped you found the article useful. If you have any questions, comment below or swing me something on twitter.

Updated my Portfolio

I updated my Portfolio finally! I need to add a few extra small projects however

CodeIgnitor , micro PHP Framework

I’ve been working on a side project lately which has made me dive back into PHP, HTML, and JavaScript.  I haven’t actually used PHP properly for a few years as ActionScript has been my bread and butter for a while.  At first the idea of server side programming made me shudder but I soon embraced the challenge (and it was a good chance to scrub up on my PHP skillset!)

One thing I’ve grown found of are micro frameworks. For me a micro framework is enough to get your boiler plate code out of the way without getting into your way and making your coheir to strict coding frameworks (Joomla comes to mind)  So the first thing I did was to find a good PHP framework.  I’ve came across one called ‘codeIgnitor’ a few times and it was recommended to me so I decided to go with that. It actually really reminds me of Robotlegs but for PHP so it’s great stuff.

More Information here http://codeigniter.com/

Flash Player 10.2

Flash Player 10.2 is fresh out of the labs and is now live to everyone.

Here’s my standout points I’m really excited about;

Stage Video

There’s no lie that Flash Video used to run like a dog on OSX, my oldish white Macbook used  to struggle to keep a decent framerate when i bumped it into fullscreen.  Even if i didn’t make it go into fullscreen, the fans would almost instantly rev up to 100% and it sounded like it was about to lift off.  With the new StageVideo API you have the ability to play the video at a lower tier and enable hardware acceleration across all platforms, you do loose the ability for transforms and bitmap effects (which 99% of the tiem you don’t need) but gain a great performance boost (especially on a mac!).  I had a test of it while it was still in Beta and was quiet impressed by the speed of it on my mac, a long awaited, and much needed change.

Multi-monitor Support

A small change in the grand scheme of things, but a great change for myself. For people who use dual monitors, you now have the ability to go fullscreen video with one monitor, and hapily work with your other monitor.  It used to go out of fullscreen soon as you select another window, but now you can happily watch YouTube in fullscreen and do work! (although still not recommended when trying to do work 😉 )

More Information / Blog Articles

http://www.adobe.com/devnet/flashplayer/articles/stage_video.html
http://www.bytearray.org/?p=2740
http://blog.brightcove.com/en/2011/02/stage-video-brightcove-player

I haven’t forgotten about bloggin!

I just been busy! I try to get out of the house when i can these days, take Photo’s and such, so in turn you might see a few random Photography posts here and there from now on

Appcellerator

Just stumbled across this really cool Mobile Platform called Appcelerator, it’s compatible with Android, Blackberry, IOS and has full hardware controls, very nifty. It uses HTML and JS markup and hooks in with the native operating system which gives it speed and UX as if it was native, very clever indeed.

If my JS and HTML wasn’t so rubbish I’d actually wouldn’t mind trying it out on my next mobile project

The Codec Wars

I have been trying to follow the HTML5 video saga very carefully as any Internet Developer should.  The latest movement on this front is Google are planning to drop H.264 as a supported <video> codec on it’s Chrome Browser (Which I have learned to love) in favor for their own WebM.  This again is going to fragment the movement to make all all HTML5 standardized.  While I believe what Google had done is good by merit I don’t see how is going to work with it’s mere 10% market share, but hey, power to them.
Let’s see how it all unfolds!

Air for the laziness?

A non ActionScript entry for once,

I recently was given a task that was non-AS3 oriented. My task was to do some cool creative stuff using the OpenFrameworks which is C++. Having absolutely no C background what so ever I was very overwhelmed at first, I have had to never had to worry about things such as manual garbage collection and such scope restrictions (compared to AS). Not saying it’s a bad thing, I could see from the start the power , possibilities and control doing it manually.

At my first sign of struggle a instant light-bulb popped into my head considering how much easier it would be for me to do the project in Adobe AIR (which I could have, the libraries were there for this certain project) . Then I thought, was I being lazy? I’m not going to be a sole ActionScript developer for every, no technology lasts forever and being pigeon holed and bound to one technology will not help me in the long term. I know the point of Adobe AIR is writing something once and deploying it many places, but in turn, it can’t be the best for much when it’s being deployed on so many platforms. In this instance, using the C++ method yielded such better performance even with my low level of understanding.

Anyway, that was a bit of a ramble, i still love ActionScript and the flash platform and will try to keep it my main bean income as long as I can, but it has really open my mind again to other languages other then web programming languages once again.