Posts Tagged Rich Internet Application

My journey into AIR

The last two weeks I got to play around with AIR for the first time. I was fun, but it was also a bumpy ride. Bumpy for the fact that I had a deadline and because it seems that every step of the way there was something that wasn’t what I expected (which I guess is normal when learning something new). What I want to gather here is some quick facts and links about what you should know to get started with AIR.

First things first, you have to be able to compile a swf using AIR APIs. I think this is fairly easy to do with Flex Builder, but I didn’t want to use it. I didn’t want to use Flash either because I forsee in the future that multiple persons could work on the project at the same time and FLAs are not that teamwork friendly. My final choice was tu do an Actionscript project using FlashDevelop. What got me confused, at first, was the fact that when you want to create such a project in FlashDevelop; it is called an AIR AS3 Projector. Well once you are past that, the rest is done for you: the folder structure and the bat files to package your application. Now you can get started.

Since it was my first AIR project, there was one thing that I really wanted to do right: the Update functionality. Since an AIR application has the ability to update itself, if you do that part right, you can make mistakes on the rest since you’ll be able to send updates later. I encourage you to read this article from Adobe Development Center on Using the Adobe Air Update Framework.  You will also need the applicationupdater.swc library that is inlcuded in the Adobe AIR SDK to use the update framework. Another quick thing about the update process is that will updating AIR will erase everything in the folder your application was installed to, so if you want to save stuff from previous version, you will have to move them first.

Because of the previous fact, you may want to know if it is the first time ever that the user open your application. Detecting that is easy once you think about it, but is not obvious when you come from a web background. What you do is check if a certain file (from your application) has  been created on the user’s computer. If it is created that means the user has started the application at least once before. If not, it means this is the first time so you go ahead and create that file and do everything you need for the first run. I have been very vague about the file, but my guess is that every application will need to move at least a config file from the installation folder, so you use that config file to do the check. More information in the help for Adobe.

The rest of what you might want to do should go smoothly: creating  a chromeless application, implementing the grag, minimize, maximise and close function is all a breeze when you consult the help files. Well I said the rest but there is still something that is not so obvious; working whit SQLite.

I am used to working whit database, before doing full time flash I also did some PHP/MySQL, but AIR/SQLite is a different beast. It is mostly details but when you add them up, it makes a pretty big bump (to refer to my previous bumpy ride). You can work synchronously or asynchronously, SQLite DATE primitive is a bit weird and you can parametrize SQLStatements. I will write another post about SQLLite optimization later.

Well that is it for now, that should help people used to AS3 find their way quickly while doing AIR development.

, , , ,

1 Comment


Gingerbread house builder – TELUS holiday 2008 card

Just a quick post, while it is still the time, to bring you to the Gingerbread house builder we did for TELUS. I think it is a pretty little piece of flash that is fun and will make you smile. As it is the costum with holiday cards, the deadline was really tight but I think we managed well. This small rich internet application is packed with features that if you don’t stop to look, you won’t notice.

First the send to friend option actually sends a picture of the gingerbread house you built which was very nice to program. I had to take a screenshot(bitmapData.draw) of the House MovieClip encode it in JPEG (using as3corelib) and send it to the server. Next nifty detail is the print version of the recipe which also includes a picture of your creation. It wasn’t something really complicated to do considering I mostly used the send to friend code and put it in a PrintJob. Lastly, to save the recipe to PDF, instead of simply doing a navigateToURL to the PDF location, which would have opened a new tab in the browser with the PDF in it, I used FileReference.download to pop the download window so that the file is directly downloaded.

Independently these attentions might not seem like much, but if you put it all together the user won’t notice it but he will still feel this is a better application, without knowing why. Don’t get me wrong, I’m am not saying that the TELUS holiday card is the best application out there; I am saying that paying attention to details is what makes the difference between a nice application and a great one.

In that sense, I think there are stuff we could have done better. Mostly sound wise, to emphasize the meerkat (that is the name of the current TELUS critter) sneaking to take a bite on your gingerbread house. I’m not good at all in audio and when it comes to it I need help, and sound is somewhat not needed to make a website / application functionnal and beautiful, so it is often forgotten. But I will make sure in following projects to give it the proper time.

As I always do here is a list of the libraries I used to build it:

Well that’s it, enjoy your holidays, I surely will!

, , , , , ,

2 Comments


My second Rich Internet Application

A month ago (October 15th 2008) was the release of Flash player 10, but it was also the week that my second rich internet application was set (a)live. I wanted to make a post about it for a long time but I had a lot going on and only just now have things slowed down. So I present you Home Depot – redefining floors. I am really proud of it and I really put a lot of energy in it. It is the legitimate big brother of the previous RIA I made Home Depot – think in colour. I had known for a little while that I would be doing a follow up application to the paint picker and I had started planning and building the application in my head. When the development began, I knew a lot of things that I would not be doing again. Some of the pitfalls that I had faced doing the first application would not show up this time; I was ready and awaiting this new challenge with the motivation to do something better.

In the first one I had jumped head first into the code because I didn’t see any reason why I would use a framework, it was ok at first, but when the codebase became more imposing, dispatching event also became very tedious. So this time around, I used the framework PureMVC and I can say it helped a lot; it helped with the events and it also helped with shaping my ideas into classes.

An other thing I did differently was that I made sure that my ActionScript classes wouldn’t have displayed text in it. I live in Montreal and we speak mostly French here but the rest of Canada speaks English. So if I start putting copy in my code, I will need to have a codebase for French and a codebase for English. That is what I had done for the first application and every time a modification had to be done I had a whole lot of files to touch. So this time around most of the text was located in an xml file which was something better.

All in all, it was a very nice project that I liked to do a lot and seeing how its little brother got rewarded last Friday (Home Depot – think in colour won a Bronze CMA award  in the retailing category on November 28th 2008) I foresee a bright future for this one too.

Here is a couple more libraries I have been using for this project:

  1. TweenLite
  2. PureMVC
  3. SWFAddress
  4. SWFObject
  5. Alcon (for tracing SWFAddress stuff)

I have a couple of new ideas how to improve my workflow and tools for my next RIA; can’t wait to get my hands dirty!

, , , , , , , , , ,

7 Comments


My first RIA

Two weeks ago we launched a website that I am real proud of: Home Depot Think in Colour. It was the first RIA that I programmed (if you don’t count my favicon editor) and man did I sweat doing it.

First, it was way bigger than I first thought because applications have way more possibilities to break than normal websites. I never thought this would take as much quality insurance as it did, every time we would think it was done, someone would find a bug. Another thing I didn’t foresee was all the Event managing and making sure every part of the application was getting the right message at the right time.  Now I really understand what a framework like PureMVC can do for you, plus the nice features you can add that are not so hard to implement like undos.

Second we also had a lot of trouble with the hosting. We are not the main agency for Home Depot Canada,  so we once we were done with our files, we had to hand them over to the other agency and they really screwed up. I won’t list every thing that is not working properly, but I list this one, the back button was supposed to work to some extent, but now it doesn’t… for no reason. I knew there would be complications from having two agencies working together, but I didn’t think there would be so much.

All in all, we came up with a really nice product, actually the website I’m the most proud of to this date. So get out there, and start Thinking in Colour!

, , ,

5 Comments