Mohu™

After several years in the digital industry, and almost a year at Mohu, it feels like it's finally time to start Giving Back To The Community. This is the first in a series of technical posts which will run you through our programming workflow, starting by detailing the software we use to build a project.

The rest of the series will take the form of discussions of individual modules of the Mohu code library which we've built from the ground up to streamline the development process. I'll post source code as I go along: most of our work is done in AS3, but where possible I'll try to give out source code for iPhone/iPad, JavaScript and haXe as well. Free to use our code in your own experiments - if you want to include sections of the Mohu library in commercial projects that's fine too, but please let us know so we can glow with pride.

To get things started here's a run-through of the software we'd normally use to produce flash sites on mac computers. Here are our favourites for each stage of the process:

Step 1 - Version control: GitX (brotherbard fork)

It's important to make sure from the very beginning of a project that you're always working with the most recent versions of everything. While this sounds obvious, it can be easy to lose track when files are going back and forth between you and your team, or when clients decide they liked something better the way it was last week, or when you have to revisit an old project to make an update. If you haven't used Git before, you should give it a go - in my opinion it's a much better system than SVN. Seeing as it's a project originally developed for command-line-loving geeks, visual git clients are thin on the ground, but having tried out what's available for mac, GitX beats the others hands down (as long as you download the 'brotherbard' version, which adds a handy sidebar and push/pull support).

Step 2 - Design: Fireworks

I've always been amazed at how often you find that websites have been designed in Photoshop. You have to stack hidden layers on top of each other to simulate different pages, it's slow, the vector editing is terrible, and it's a nightmare to import graphics to Flash from. Unfortunately Fireworks, the obvious candidate for web graphics, has never really taken hold because it's always been a bit rubbish. It could be the ideal product for laying out designs if the UI wasn't so unresponsive/broken and if it didn't crash all the time, but as there's no better option it'll have to do.

Step 3 - Exporting asset libraries: Flash

When we're working on a flash project we use the Flash IDE to create a .swc library of all the assets, which we later add code to (see the next step). This is one stage in the process where the official Adobe product scores a solid victory over the less fleshed-out open source alternatives - you can easily add assets to the library, make vector adjustments and keyframe simple animations. Font embedding's improved a great deal in CS5 too - no more hunting around all the textfields making sure they've all got the right character sets embedded.

Step 4 - Flash coding: FDT

Out of all the different IDEs for writing ActionScript, FDT 4 comes out on top in terms of features. It's more expensive than the alternatives and slightly slower, but in my mind it's worth it for the live error checking and spot-on autocomplete (pro tip: add the whole alphabet into the 'Preferences > FDT > Editor > Code Assist > Auto activation triggers for AS' field and suggestions come up automatically as you type). FlashDevelop is pretty good too, especially as it's free, but seeing as it's based on the .NET framework there's very little chance of a mac port, and going through virtualisation software always seems unnecessarily long-winded. Flash Builder is getting better all the time, but still has a lot of catching up to do compared with FDT, especially now that FDT supports MXML editing. Once the FDT haXe plugin gets a bit more stable, I'll have no reason to use any other code editor.

Step 5 - Local testing: MAMP Pro, Charles

MAMP is an ideal setup for testing flash sites: it installs an Apache server on your computer with PHP and MYSQL support straight out of the box, with no need to mess around with config files. Along with DNS aliases for testing sites within a virtual domain, this makes MAMP a great choice for testing how sites will behave in the wild before uploading them. It's even better when teamed up with Charles, an incredibly useful little application which allows you to monitor all the HTTP traffic that goes in and out of your browser, even parsing XML, JSON, AMF and SSL responses, which makes debugging server script interactions far less painful. It's also worth using for its built-in throttle mode which simulates slow network conditions, so even if you're testing locally you can see what the clients are seeing.

That's it in terms of the major steps of the development process, but along the way lots of little tasks will crop up which it helps to have the right tools for. Here are our recommendations:

Text Editor: TextMate

FTP client: Transmit

MySQL admin: Sequel Pro

Quick image tasks: Pixelmator

Quick sound tasks: Amadeus Pro

So now you know a bit more about our coding environment, the next post in the series will dive into some of the code that forms the backbone of pretty much everything we make.