JonnyReeves.co.uk

MoshiMonsters.com Homepage Redesign

As some of you may know, I am currently working for MindCandy as an ActionScript 3 developer hacking away on Moshi Monsters – a safe, online world for kids to learn and play.  This week is a very proud one for myself as the homepage redesign which I worked on went live – I thought I would take the opportunity to explain some of the problems faced and the solutions used.

First off I need to give full credit where it’s due; to our amazing designers.  I got to work with three such talented chaps on this project, Trevor, Ben P. and our latest hire, Axel.  These guys spent a good week illustrating the concept for the new homepage and creating the animations and elements which I wired up to make the finished product.

The page splits into two parts, the main body and the navigation is delivered in normal HTML with CSS styling and the central content including the monsters and ocean background are delivered using Flash.  One of the challenges to over-come was the fact the page had to scale horizontally to allow the user to resize their browser, this was achieved by using the ActionScript StageScale.NO_SCALE setting and using SWFObject to set the embed width to 100%.  By registering an Event.RESIZE  listener to the Stage, I am able to adjust the width property of the background gradients’ (which make up the ocean) DisplayObject.  It’s awesome to see the site still look great even when stretched across two 24″ monitors!

One of the key points of the new homepage’s Acceptance Test was that it weighed around the same as the static HTML version it was replacing.  Using firebug, I was able to tell that the original homepage weighed ~360kb; it wasn’t going to be easy providing all this interactivity.  We managed to come in at ~430kb which wasn’t too far off!  We made savings filesize savings on both the HTML and Flash by a combination of CSS Spriting and optimisation of all animations and MovieClips (the majority of the Flash optimisations were done by our Animator Ben P. so you will have to ask him for his tips and tricks!).  We didn’t go down the route of trying to optimise the ActionScript to reduce filesize as legibility is more important to us than a couple of kilobytes at the CDN.

Finally, the last goal of the new site was that it displayed on the user screen as quickly as possible – the last thing we wan the user to see is a massive white hole in the middle of our page whilst it loads!  Pre-Loaders in ActionScript 3 are not quite as intuitive as they used to be in AS2, but thanks to Keith over at Bit-101, they are reliviley straight forward once you know what you’re doing!  During the Preloader we render the background gradients in actionscript which helps the Flash element fit seamlessly with the HTML and CSS while the remaining 200kb loads.  Once the app has finished loading, the user can start interacting with the buttons, watch the tour video, etc.  At this point, we send off a background call to load in the monster animations and sound effects.  The monster anims are all contained in a single swf which weighs in around 130kb – we chose to use a single swf to reduce the number of requests on the web server (infact the entire page now renders in under 15 requests to our own server, down from well over 30!).  The monster animations SWF contains linkages for all the various animations – these are loaded into the Current ApplicationDomain and then initialised via getDefinitionByName.

If you are already a Moshi user then I hope you enjoy the new MoshiMonsters homepage and all the new features that our team keeps working on – and if you’re not yet a member, well get on over there and adopt one today!