Hand Crafted Media

About this site

This site has been designed to be viewed in fullscreen mode at a resolution of 1680 x 1050 although it views well from 1024x768.


It has been developed for the second assignment in level 2 Advanced Web Design as part of the Digital Media course that I am studying at Canterbury Christ Church University. I also work there as a web developer and designer for the Faculty of Education.


I decided to be rather self indulgent and develop a site that plays my catalogue of digital music that I have worked on over the years, and since I spend most of my working life having to adhere to somebody else's style/corporate guidelines, I thought it would be nice to see if my creative juices still had anything left in them! I'll let you decide for yourself, although I am personally pleased with the result, as I write this and the assignment is very nearly due for submission.


The idea behind it is a development of an idea I have played with for several years. The idea being a portal for delivering multi-media content. Here are some examples of projects I have worked on, where I used Flash to create user interfaces:


Augustine House Interactive Floorplans
My latest use of Flash was to design an interactive floorplan for the new library at work.


Smashed - CD-ROM
This is the online version of a CD-ROM that I developed for an arts project dealing with alcohol abuse in young people.


Sofa Surfers - CD-ROM
An online version of a CD-ROM that I developed for an arts project dealing with homelessness in young people.


Ben's Online Jukebox
This was my last incarnation of an album player that I built in Flash. It uses an external XML file to load the content data but the entire interface is Flash...


Where this project has developed is that Flash is now only used to deliver the media files, the rest of the content is valid XHTML using a strict doctype declaration. Also I have used Expression Engine as a CMS and as a result, it has become evident that the idea of a portal to deliver media from various locations and formats is made far more straightforward by leveraging Expression Engine's Model-View-Controller (MVC) framework. It deals with the content and the markup so variables can be dynamically passed to page elements (Flash) which then call for data (XML) based upon incoming variables back to Expression Engine. With a stable controller in place, content and data can be readily transposed to more or less any required format. How good is that!


With that all in place I came up with this! To read more about various elements to this project, here are some handy links!

From the development blog

Blog homepage »

Assignment Brief »

Assignment proposal »

Setting up a portable server »

Development – Week ending 19/02/2010 »

OK… so I’m not so great at keeping a development blog! 08/04/2010 »

Development - Week ending 16/04/2010 »

Flash, XML and Expression Engine 17/04/2010 »

Flash Album Payer 25/04/2010 »

Evaluation »



Reset CSS styles - obtained from www.getashot.co.uk

Various images - obtained from google images.

Guitar lead and other elements - www.shutterstock.com

Earth Monkey content - www.earthmp.com

Navigation system developed from this tutorial - www.rockatee.com

Lightbox elements on this page - flowplayer.org