Archive

Archive for the ‘Project’ Category

Volvo S60 Pinball game – Things I learnt

October 12, 2010 3 comments

As I mentioned earlier, this is my first game project. If you have not checked it out, please do. I had so much to learn from this project. Here is a breakdown of the new stuff I ended up using:

Box2DFlash

Box2DFlash is the best available physics engine for flash in my opinion. I had looked into APE (ActionScript Physics Engine) and Fisix Engine briefly before I finally decided to go ahead with Box2DFlash. It is basically an ActionScript3 version of an opensource physics engine Box2D developed by Erin Catto. The main reason which got me going with it was the richness, the details and the controls it offered me. If you are looking for a list of different physics engines available for ActionScript, Henry Jones has written a nice blog covering almost all of them. The examples right there on the homepage of Box2DFlash, show you the capabilities of this engine. But I have to say, setting up and then getting along is quite difficult with it. This is where QuickBox2D comes in.

QuickBox2D

QuickBox2D is basically a wrapper around Box2DFlash. Zevan Rosser, the guy who created QuickBox2D puts it rightly:

The main purpose of this library is to significantly simplify instantiation of rigid bodies and provide a simple way to skin rigid bodies with custom graphics.

If you are looking for a comparison of what a simple task with Box2DFlash would look like with that of QuickBox2D, Emanuele Feronato has written a blog tutorial using QuickBox2D and a tutorial done earlier using Box2DFlash alone. It clearly shows you how easy it is to setup Box2DFlash when used with QuickBox2D.

There is a very well-written tutorial on tutsplus which covers QuickBox2D from ground up. This series on tutsplus covers most of the basic stuff for this library but at the time of this writing, the third in the series is yet to come. Plus to understand skinning, Zevan Rosser has written this entry and for contacts (collision detections), this series of posts on his blog or just search the term “contacts” on his blog and you will see many results. For the different forces I had applied on this game on various spots, from handles, to spring, from tunnel to roads, this entry helped me understand better the available forces in Box2DFlash.

I highly recommend that if you decide to use Box2DFlash, QuickBox2D should be used alongside. The only thing is, I am really hoping QuickBox2D keepgs getting updated to be used with the latest version of Box2DFlash. I did not miss any features but it would be very nice if both the libraries update on a regular basis.

Robotlegs

I had been thinking of starting to get into frameworks and all. Tried and worked with PureMVC on a couple projects but in this project I (based on a lot of hubbub over internet) used Robotlegs. And it was a good decision I made.

This whole idea of wiring the objects together, the events channeling through the application, model being updated only by commands, seperate Service actor for all external communications and view living its life all alone (decoupled) is so good. I absolutely loved Robotlegs. To understand better this framework, somewhere in the middle of this slideshare by Joel Hooks, he explains the workings of this framework. Plus this hello world video tutorial by John Lindquist explains quite a bit about the framework. Then on InsideRIA, there is an introductory series by Joel Hooks starting off with the basic question, what is Robotlegs?. Then ofcourse, the robotlegs community is so quick in responses. Robotlegs just clicked.

SFXR

And just when I was in need of sound effects for my game, I saw this blog post by Keith Peters. SFXR lets you create sound effects and provides extensive control over the sound you want to generate. It then exports the sound in WAV format. There is an ActionScript3 port of the same (mentioned in Keith Peter’s blog’s comments).

Facebook ActionScript3 SDK

I used the new Facebook ActionScript3 SDK for the share with facebook functionality of the game. This api is updated by talented developers at gskinner.com so you expect quality and quality it is. I can finally say that the troubles of working for Facebook with ActionScript are over.

Overall, I had a nice experience building this game. I had been thinking of doing a game for quite some time but just was not getting any opportunity. But now that I did, I am happy with the results.

Phew! long post haan? Check out the game.

Volvo S60 Pinball game

October 11, 2010 3 comments

We pushed live yesterday the launch website of Volvo S60 and the site revolves around a flash pinball game. The objective of the game is to score as much as you can for a chance to win a trip to some place in Botswana (kidding; check the website for details on prizes).

This is my first flash game development project and I have learned so much from it. I will be sharing the technical details about the game and the things I learned in a few days but for now, play the game and tell me if you liked it or not.

The National – Infograph Facebook Application

July 20, 2010 1 comment

I finally got an opportunity to work with the Facebook ActionScript API. Though, at first, everything look quite confusing and all over the place but I eventually got the application working. The funny thing however is that the final application I was able to develop does not use the ActionScript API instead I ended up using Javascript API. Why?

Facebook Actionscript API is good and it has its advantages but the thing that is really annoying is its login process. Since the session is meant to be created and handled within flash; there is no way it can know if the user is already logged-in and thus already has a session; unless used javascript. This is where you see new windows opening up just to give you a message saying “You can now close this window” (which technically makes sense but to a user it is a WTF! moment).

At this point, my application was ready and I had sent around a test link to colleagues. Everything was working but then my peers started asking me that why does that window opens up even if they were already logged-in etc and I was not able to explain them what exactly was happening.

So then I started googling, trying to find a better way and soon found out that setting up the connect process in javascript is a better option even for flash applications. Though, there are a number of solutions out there to get you started using the Javascript API I am mentioning but I ended up using Philip Bulley’s solution.

Overall, it was a good experience for me to get started in the Facebook world of development. Take a look at what I’ve been able to create.

Castrol – Cheer with Castrol

I just pushed one of my recent projects live. A few new things I learnt during this project and experimented with were;

SWFAddress

I have never used it before and yes I am very late on it. SWFAddress is indeed a helpful tool for Flash and Ajax developers.

Local Shared Object

A very handy utility to store temporary (or permanent) settings or data on user’s machine to make the user-experience even better. I used LSO to store the values of the fields and other choices the user selects.

Casalib

I have already blogged about it before; I am absolutely in love with Casalib. I used a number of classes of this package in this project but video loading using VideoLoad class of this package has never been so easy for me.

Have a look and have your say. Oh! and it is in Arabic though.

Code Tip: Copying image files along with an AIR application

March 20, 2010 6 comments

*** UPDATE ***
In my post below; I am mentioning 1 out of 2 possible ways of embedding image (or any other format for that matter) into an AS3 project but here is link to a detailed post by Renaun Erickson mentioning both the techniques.
***

I have been developing an Adobe AIR application for the last 2-3 weeks and so far, it has only been a simple yet big (in terms of content) interactive presentation running on the desktop. Just recently, I was asked to see if there is any way some images could be copied to user’s desktop when the application is being installed or is being run so that the user can select those images to set as wallpaper.

As always, I started my journey with googling but soon realized that there is no direct way of copying images from development environment to a user’s desktop via AIR application. The solution I figured out was as follows and please, if someone knows a better way around this; let me know.

As a note; my main development IDE was Flash CS4 Professional and I used FlashDevelop as code-editor.

I first embedded the images I wanted to carry with my application using the [Embed] metadata tag; which is a part of Flex SDK. Attached a Class to it obviously and then instantiated in code.

[Embed(source='../../../../Library/wallpaper.jpg')]
private var Wallpaper :Class;
private var wallpaper :Bitmap = new Wallpaper ();

Then it was about creating a folder on user’s desktop. It uses File class of AIR API.

var directory :File = File.desktopDirectory.resolvePath ( 'Wallpapers' );
directory.createDirectory ();

Then it was about writing a JPG file.

this.file = File.desktopDirectory.resolvePath ( 'Wallpapers/Wallpaper.jpg' );

The above code doesn’t write the file instantly as you can see we haven’t yet connected our embedded image to this file in anyway but instead it creates a placeholder, a blank image file which has nothing but 0 bytes yet.

The FileStream class of AIR API is the one providing the necessary methods of opening/reading/writing bytes on a file but since it only allows ByteArray to be written on to a File instance, I had to first convert my embedded image data into ByteArray data. as3corelib comes in handy again. JPGEncoder class of this package provides us with encode method which converts BitmapData to ByteArray.

var imageByteArray:ByteArray = this.jpgEncoder.encode ( this.wallpaper.bitmapData );

And finally, it was about opening the File instance and feeding this imageByteArray data to it using our FileStream instance.

this.outputProgressed.addOnce ( this.onProgress_CopyFiles );
this.fileStream.openAsync ( this.file, FileMode.WRITE );
this.fileStream.writeBytes ( imageByteArray );

I used openAsync instead of open because I wanted the other code to run at the same time while the images were being copied in the background. Plus, since I used Robert Penner’s AS3Signals as my main event mechanism throughout this application, I used the lovely addOnce method to make sure the listener object gets removed once the event is fired.

P.S. Robert Penner has compiled a list of examples of AS3Signals for those who are interested in giving it a try.

Mercedes-Benz C-Class Microsite

February 1, 2010 Leave a comment

Yet another Mercedes-Benz site has been pushed live which is developed by me.

Check out the site.

Mexx Attracts

October 23, 2009 3 comments

Few months ago, I was involved in a project for Procter & Gamble called as Mexx Attracts – Sexy meets Smart which was a match-making microsite where one would select one of his freind’s pictures and match with their own self through a questionnaire about personalities but much like most flash developers, all I really cared about was the scope of the project and an opportunity for me to learn from/experiment with new technology. And it seriously was one great experience technically.

As with most of typical match-making microsites (did I just say typical? :)), based on the answers, users are led to see one of the five situations showing as a video where their heads are masked to the role-playing characters. The final situation varies depending on the answers; it can be funny, plain boring, a marriage ceremony or even a fight.

For this project, I had to get into using ByteArray class to store the bitmap data of a movieclip placed on stage and pass this data on to a php file which would store the image on filesystem and create and store a respective ID in a database as well.

Upon googling, some of the links came in very handy understanding the whole flash-to-filesystem-storing issue and I got to know a few more benefits of using ActionScript 3.0. One of those useful links was this, and obviously the JPGEncoder class of adobe’s as3corelib package did the magic for me.

It all went well, the site went live and received some good response overall.

But just recently I was asked to update the code to pass on the bitmap bytearray data to HTML rather than a PHP, why?, because for the facebook part of this microsite was having a bit of an issue storing the image on the filesystem. The whole back-end application works in a way that first the HTML form fields are submitted to a PHP, PHP then creates the database fields and then flash calls another PHP to store the image to the filesystem with an ID. But in the facebook application, flash call was made a lot earlier and since the PHP doesn’t get the required IDs fetched from the form-fields of the HTML, the file was not stored on the database and on filesystem. So to update that, we decided to pass on the flash image data to HTML/JS and then HTML/JS would take care of the calls since it will have all the data to pass on to PHP to store.

Now, upon googling again, I found out that the only format HTML understands for image source is in Base64 format and just after a few more queries, I was able to find out a good handy AS 3.0 class for conversion of ByteArray data to Base64 format which allows you to convert any String or ByteArray data to Base64 and vice versa.

So in all, it was a good experience for me to get a little more deep into ActionScript programming, to tackle a few complex tasks which may sound easy and to understand a few more concepts moving along.

Check out the live site, www.mexx-attracts.com.

Follow

Get every new post delivered to your Inbox.