Still working on a detailed functional design for a content management scheduling system. Having torn my hair out trying to find some pre-built components to barstardise I resorted to designing it all from scratch.

Often when designing a user interface one may turn to Powerpoint for wireframes, Visio for flow and logic diagrams or even HTML to mock up a simple prototype. I decided to shun all these options in favour of flash…

Initially it seemed like a fairly bad idea since things like drag & drop, frame control and scrolling windows are all a little complicated thanks to ActionScript 3.0’s attempts at being a proper programming language. Luckily I soon brought my Flash 5 skills into the 21st century as I juggled event listeners, mouse events and sophisticated function calls.

The tool basically allowed an editor to select spots on a page, then choose an item from a pool of content, schedule it and then edit or modify their settings as and when necessary. To start with I allowed the user to drag content directly from the pool onto the page. This was very usable, but tricky to do technically without heavy customisation on some JS frameworks such as MooTools or Scriptaculous. In the end I settled for a simple overlay system to let users select spots and content.

Within a day I had a reasonably complete interface (with a bit of smoke and mirrors) and I was able to review the design with stakeholders before moving onto the next iteration. The core look and feel as even overhauled twice before settling on a workable arrangement.

Once done I will add in an example since I think it’s useful to see what can be done in a day even by someone with limited experience with flash and actionscript (still managed to rack up nearly 500 lines of code somehow)l. Ideally in projects with experienced flash integrators, a design mock-up like this could be turned into the finished product thus saving valuable development time.

If I get a chance I will update with a list of tutorials for all the components I used to get the crucial bits and pieces in place.