tripleaxis.com

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.

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 .

(more…)

View the Bentley 60Year Celebrations Microsite

Towards the start of 2006, my company began working with Bentley Motors and it fell to me to develop their first Global Beach content – a flash microsite celebrating 60yrs of motor cars design and development in Crewe.
Due to quite a short deadline, parts of the site had to be timeline based instead of our usual, scripted approach. It’s always quite annoying having to integrate designer created flash into your app – movieclips not being top-left aligned, scaled or just simple unnamed. It’s mainly just a case of looking at the component parts of the design and seeing how much easier it would be to create and control the layout/animation through pure code. It just takes a little longer sometimes
(more…)

View the Design Your Jaguar Application

This was an existing application that a colleague, James built back in 2004 and I was tasked with adding an accessories and bodykit layer to it.
It’s a common enough occurrence that, in dev work, you’ll have to pick up the threads of someone else’s application and modify it. It’s just a bit of a nightmare when it’s a large, complicated application.
(more…)

View the JaguarXK Microsite

This was the first major site I did with Global Beach and I collaborated with the other developer there, James Costerton. I learned a hell of a lot about using and controlling video in Flash and, although it was a pretty tight deadline, had some fun writing it. James’ involvement was mainly the integration of his configurator app (design your jaguar) into my MVC framework, the addition of a hydra-esque Build + Price module and, of course, being great company while working til stupid-o’clock at night.
(more…)

http://www.daimlercars.com/

One of the first projects Global Beach let me loose upon was the new Daimler flash site. Content managed and localised to eight countries (including japan), it was a great opportunity to get to grips with GB’s CMS and flash data API as well as familiarise myself with the existing AS2 library.

As the brand is quite dignified/classic, there wasn’t really a lot of scope for bells and whistles, but I got to do my first 360 spinner (just a simple mc frame controller really) and some cool automated data layouts. Overall, I think this site was a good learning experience for me and gave me a chance to file some sharper edges to my AS2 teeth on a medium-sized app for a global client. I think the end result is a solid app with some very slick content, if not a little slow paced for my tastes

Click the thumbs below for some screengrabs.