Visit the site

Reebok Classics - Mixer

The second phase of this site was to add a new homepage and an audio/video sequencer, complete with gallery. As the homepage and other updates were just amendments to the existing site, I concentrated on the sequencer and ended up really enjoying designing the core class architecture.
At the core of the application is a Metronome class. Writing it this way left things open for the possibility of future re-factoring since the whole mechanic ran off the timing pulses that the Metronome class dispatched. As it happens, I did actually re-visit the Metronome class, updating it to try to tighten up the timing.
Next, the view elements and model objects were divided into logical structures; Views: Timeline,Bar,Beat and Model: Track,TrackLayer,TrackItem. This structure made it a whole load easier to work with the code and string elements together. A Track has a collecion of TrackLayers, which are displayed in the Timeline. A TrackLayer has a collection of TrackItems that are displayed within the Bar and Beat elements.

In addition, the Sequencer element of the site features the option to save your work to a gallery for others to play and edit. You can deeplink straight to either yours or any track in the gallery and if that wasn’t enough, you can also embed a cut-down version of the player in your blog that automatically cues up and plays your track. This mini-player has the option to launch the track editor in a light-box so you can create and save tracks from right within your blog.

Visit the site

A fun little site for SCA (Bodyform in the UK) to raise awareness about all the steps SCA are taking to be a greener company and reduce their carbon footprints.

The site uses a parallax system of layered landscapes and elements to give a sense of movement within the scenes and there are some great, hand drawn animations c/o Tom Butler (check out the cat )

The ‘Your Journey’ area features a quiz of sorts – mainly designed to promote thought rather than test knowledge – and a section where you can see (and vote on) issues that are of global concern. In addition, it is possible to take away an ‘eco-savvy’ badge and either post it on your FaceBook wall or on your own blog.

Visit the site

Reebok Classics Homepage

This project was released in two phases. This phase was a small microsite, consisting of a video intro page, a ’scatter-style’ product selection page and a product detail template page. The fun bit on that side of things was creating the product scatter – as a secondary navigation was available on product detail page, I had to ensure the zoom out effect on leaving the detail page animated to the position of the current item rather than that of the originally chosen item.

Reebok Classics - Product Scatter Page

Visit the site

Adidas football homepage

My first major project with De-Construct, this site for Adidas was a biggie to say the least. Having re-factored an existing framework by one of their previous flash devs, I was responsible for the framework, initialisation and core asset management and navigation. Once the framework and navigation was in place, we brought in a couple of very good freelancers to fill in the blanks.

The site uses SWFAddress and features an internal sitemap system whereby all navigation requests are validated against the sitemap. Illegal navigation requests are ignored, reducing the chance of site breakage. As all navigation is routed through SWFAddress, with NavEvents simply updating the current SWFAddress value and dispatching a change event, it was a load simpler process when it came to implementing deeplinking across the site.

Another nice feature on the site is the dynamic page resizing. Moving between the homepage and the content pages, the site needs to swap between a scrolling, unlimited height page and a fixed size page. The main navigation bar also moves between a central position To achieve this, I exposed some methods to javascript using ExternalInterface and sequenced the call to the client-side javascript to resize the page at the correct point during the transition animations.

This was a labour of love. With little time for a non-profit project and the intent to get something really cool together, there was late nights in my immediate future

The concept was to create a timeline of 2008 using images we’d stored throughout the year. These were captures from our office webcam, cover shots of the London Metro (a free paper), holiday snaps from colleagues, office stats, New Year resolutions and inspirational sites. In the end, I synched a SWF timeline of content to a date-driven mechanism that loaded in a hi-res copy of any image the timeline is stopped on.

Screenshots:

Visit the site

Unionview homepage

This project was a site for Universities in the UK to advertise themselves to prospective students. Through the site a student can research universities further than just what courses they offer. They can watch bespoke videos on each university, in which real students give their opinions on the campus, facitilities, social life and the surrounds.

Not being much of a mathophile, the prospect of creating sine/cosine generated carousels fills me with dread. In fact, trig and matrices have always been the bane of my professional life and I usually try to avoid them. I’m more than happy banging out algorithms for scrollbars, dynamically resizing layouts and have even drawn the odd curve here and there, but I just never really got comfortable with angles. It’s not something that I absolutely cannot do – rather I prefer to leave to those who are either interested in it or good at it.. either way, the site looks better for it and the client gets a better result.

In this case, I didn’t have that option, so I cranked the hack up to 11 and got trawling the net for carousel code! I think the end result was pretty cool – I even got in a startup animation that spins the carousel to stop evenly at a random university. In this case, the tricky part was in the fact that to keep processing down and to maintain a level of separation between the images in the carousel, I had to keep a fixed number of items on the carousel itself and, depending on the direction of rotation, swap out items as they passed through the rear-most point of the ellipse. This gave the impression that the carousel held many more items than were actually visible, whilst maintaining the overall shape and performance of the spin.

Unionview university video/info page

Fun little (ahem) viral project for the Terrence Higgins Trust to promote awareness in HIV+ gay clubbers who indulge in recreational drugs as to their effect on whatever HIV meds they may be taking.

http://drugfucked.tht.org.uk/

Another AS3 project – all a bit hack and slash, though, as time was limited and the focus was on getting the best result with the resources available.

Just a note to mention so recent work for the Sony GT5 Prologue game.

http://www.granturismoworld.com/

Nothing too special about this project. There’s some nice, balanced HTML/Flash integration demonstrated in the expanding flash menu that sits over the other HTML/Flash main content.

One nice feature is a Local Connection controlled auto-pause of the in-page videos whenever the flash menu is opened – and subsequent resume when it closes. The idea revolves around a satellite and controller system – the in-page videos register themselves with the menu (the controller) and then listen for events from the menu.

Sometimes you climb a mountain and, weary from the effort, you stand up and take a good long look around. You soak up the view and, feeling exhausted but re-invigorated, you stand back and really appreciate your achievement.

I’d like to echo the sentiments above, but I’d just really like a few days to get to know my duvet again – possibly with some pottering around the house, catching up on some lapsed TV series, maybe even deflowering the copy of God Of War II that still remains untouched next to my dusty PS2. You never know, I may even go outside… drink alcohol… see this summer thing that everyone’s on about…

Bit of a monumental project, this one; the microsite for the new Jaguar XF – no less for the fact that three generations of the Global Beach Flash team were involved in the project.

In fact this project saw the majority of our senior agency staff pull together to bring this beast to life.
And quite a beautiful beast it is:

http://www.jaguarxf.com/

View the Bentley Continental GT Convertible Microsite

Yet another tight deadline for this one. I think it topped out at around 3 weeks’ dev time on this. Completely content managed and data driven, this site featured a fair amount of ported code from the Bentley 60Yr Microsite as rewriting from scratch would simply have been impossible in the time given.

This kind of situation really brings home the value of code reusability and writing clean, modular class structures that provide flexibility and the option to slot them into different scenarios. I probably saved my own bacon on this occasion simply by putting a little forward thinking into some of my classes.

The CGTC site was another microsite, but I’m finding microsites are getting bigger and bigger. There are a hell of a lot of corporate sites out there that feature less sections, information and complexity than the majority of the ‘microsites’ that are released these days. I just hope the price of these things is growing proportionally .

Design/Technology
Basically ported from the 60Yr site, I created a hotspot interaction system for these sections where the thumbnail preview floats to your mouse on rollover and shows a crop of the image that will be revealed on clicking the item. The thumbnail expands on click to reveal the entire image.

Section transitions
Yet another testament to code reuse, this feature used the core of a class from almost a year ago to allow progression between views using a simple directional slide. In the CGTC site, we only used horizontal slides – left or right as per the section’s menu position, but vertical slides were also optional.

Image Transitions
Taking the 60Yr colour bleaching effect a little further, I created some scripted transitions that push a movieclip’s RGB values about, fading in from invisible to visible, whilst using a shifting colour value to tint the transition. The class allows for varying speeds and tints and is extremely effective in sections like Space (Interior) and Performance (driving), using colour and speed to create two very unique transitions.

Image Effects
Within the different sections, our designers came up with some really cool effects that overlay the images, providing depth and another dimension to imagery that can sometimes seem flat and dull. It seems like a simple thing to add to a site, but the actuality is that striking a balance between effectiveness/visibility and sublety can be suprisingly difficult.