Magic Music Player

Categories: Experiments, Source code
Tags:

I finally decided to learn Python after hearing good things for years. After a day getting started and playing around with the language I spent another day building a breakable toy app.

The language itself is easy to pick up and produces pleasingly minimal, readable source code. Being dynamically typed I did have to rely quite heavily on both reference docs and runtime errors! I used pydev in Eclipse as an IDE, so was easy to get up and running. App Engine seemed an easy noob option for testing and deploying.

The resulting app is in the iFrame above or here magicmusicplayer.appspot.com with source on github.

Posted By }i{ on December 21, 2011

Hugo Boss Kino

Categories: Awarded, Sites
Tags: ,

I really enjoyed working on this with a tight team including fellow dev, the awesome Phil Bulley. It was a big challenge, especially in terms of optimisation as the technique required to swap the videos perfectly was so expensive (basically sneakily achieved by baking several videos into one large canvas and scrollRecting it). Anyway through sheer determination and hard work we got there in the end. Unusually I also did some of the sound design on this project as well as the coding, selecting what to use and where from a library of loops.

I think the film is really beautiful. It was directed by Stinkdigital's Marco Brambilla, who also did the 'Power' video for Kanye West.

www.youtube.com/hugobosstv
FWA SOTD November 16 2011

Posted By }i{ on August 13, 2011

BBC One Life

This is an interactive film trailer for the BBC's One Life film. Users can drag up at any time during the trailer to get additional content related to the shot currently on screen. Dragging down accesses global content such as audience reactions and interviews.

www.one-life.com

FWA SOTD September 12 2011
Commarts Webpick of the Week

The UI is enriched by sampling the colours from the video. I used BitmapData.merge to gradually step through the colour changes, creating a smooth, fluid effect. Here's the code:

  1. private var _multiplier:uint = 32;
    
  2.  
    
  3. public function set videoFrame(bitmapData: BitmapData): void {
    
  4.    bitmapData.lock();
    
  5.  
    
  6.  bitmapData.applyFilter(bitmapData, _rect, _point, _colorMatrixFilter); // saturation and contrast
    
  7.    bitmapData.applyFilter(bitmapData, _rect, _point, _blurFilter);
    
  8.  
    
  9. 	_bitmapData.merge(bitmapData, _rect, _point, _multiplier, _multiplier, _multiplier, 0);
    
  10.  
    
  11.    bitmapData.unlock();
    
  12. }
    
Posted By }i{ on July 29, 2011

Digital Shoreditch

I had a lot of fun making something frivolous for family day at the Digital Shoreditch festival with colleagues Thomas and Margaux.

We made an installation where one participant could pump anothers head up into a big balloon! Watch the case study below to see what I mean:

Digital Shoreditch from Stinkdigital on Vimeo.

We experimented with the Kinect sensor using open source drivers, but they proved to be quite unstable at the time. In the end we did something fairly simple using a displacement map and motion detection.

Here's the (messy) code on if you'd like to see how we did it:

Posted By }i{ on May 30, 2011

Diesel Island

This was an exciting and challenging project. I was lead developer and was also heavily involved in the creative and technical planning.

To bring the island to life we made a mock Streetview interface using Away3d and integrated the site very tightly with Facebook to allow users to become citizens. Connected users could find a home, contribute laws, create national holidays, write a line of the national anthem, gain social status and even become the president for a day, taking over Diesel's Twitter account.

For musical accompaniment we made a 'pirate radio' that plays, as if by magic, (almost) anything you request. I did this by sneakily connecting to the YouTube API, searching the music category and playing back the audio without showing the video. This came from an earlier experiment of mine and it was great to get it used in a project.

Archived version of site
Case study video on Vimeo

Awards:
FWA SOTD April 27 2011
Bronze Cannes Cyber Lions

Posted By }i{ on March 30, 2011

FWA People's Choice Award 2010 winner

Categories: Awarded
Tags:

I still can't really take this in!

http://www.thefwa.com/article/fwa-people-s-choice-award-2010

lexus-dark-ride

Posted By }i{ on January 14, 2011

2010 at Stink Digital

Categories: Other
Tags:

Highs for me this year were working on my first Nike project; including supervising on the shoot which took place largely at Arsenal FC, the FWA SOTM award for Lexus Dark Ride; a project I am very proud of in terms of technical execution, and receiving a D&AD nomination which felt amazing being so close to my dream of winning a pencil one day.

It was an intense year at Stink Digital but overall an intensely enjoyable one! It was also a year where we went from being a few nerds in a room to having a full team truly capable of multi-tasking and taking on really anything we dare to. When I think back I find it hard to believe how much we crammed in.

We've delivered major interactive projects for the likes of Diesel, Lexus, Nike, Gucci*, Ikea, Axe and Wrangler*. We won another 4 FWA SOTD's and our first FWA SOTM, as well as Webby, One Show, BIMA and Eurobest awards and a D&AD nomination. We worked with agencies such as Anomaly, W+K, Mother, BBH and Santo to name but a few. Plus, we end the year stuck into projects for Diesel and Wrangler which have the potential to be our best work yet.

Bring on 2011!

* yet to be released

Posted By }i{ on December 29, 2010

Lexus Dark Ride

Categories: Awarded, Sites
Tags: , , ,

lexus-dark-ride

This is a hugely ambitious project that represents an attempt to forge a new direction in car advertising and, as we've done on many previous projects at Stink Digital, explore new ways of bringing film to the web. The result is a 12 minute interactive film in which the user participates. After submitting themselves to a mysterious 'interview' at the start of the journey, the user then sees their image and hears their voice as part of the film as they ride shotgun alongside the protagonist, played by the up-and-coming actor Norman Reedus.

Technically we had a few challenges, not least having a lot of HD video to buffer and sequence, with the routes the user could take pre-buffered in time to keep the experience seamless on a decent connection. It took some experimentation to find the sweet spot of balancing highest video quality possible and performance and we made a nice queuing system to buffer the videos for the choices the user could potentially make and closing streams no longer needed.

For the interview sequence at the start, we were tasked with having as few clicks as possible. We managed to largely automate the process with face-detection for the picture, video prompts and countdowns. We achieved the recording of the user's lines with the help of two great open source projects: Red5 for capturing the microphone and saving to the server and FFmpeg to normalise the levels and convert to Mp3.

For me, hearing your voice played back in context within the film was probably the most novel and fun part of the experience. I was also pleased with how we managed to integrate the decision points into the film, with a good-looking typographical approach and motion tracking video movements. Overall pretty proud of this one and extra pleased when it got the FWA 'Site of the month' for May, another first for Stink Digital and for me personally too.

www.lexusdarkride.com


www.thefwa.com/site/lexus-dark-ride

Posted By }i{ on August 31, 2010

IKEA Happy Inside

Categories: Awarded, Sites
Tags:

The combination of cats and competition was sure to be a www winner. We filmed a clutter of cats prowling around Ikea in Wembley. The interactivity was simple and engaging: Choose the product you want to win and the cat that might gravitate to it. If you guessed right you won the product.

The site was a roaring success generating tonnes of traffic in a very short space of time. We even got blocked by Facebook for a brief period because the site was generating so many shares (none automatic) their systems thought it was a spam app. Technically speaking this was quite a straightforward project but fun nonetheless.

cats.archive.stinkdigital.com

FWA SOTD November 18 2010
www.thefwa.com/site/happy-inside

Cannes Cyber Lions Bronze in Websites and Microsites category
www.canneslions.com/work/cyber/entry.cfm?entryid=6897&award=4

Case study film:

Ikea - Cats - Case Study from Stinkdigital on Vimeo.

Posted By }i{ on August 30, 2010

Nike Write Your Future

Categories: Awarded, Other
Tags:

This was an exciting and challenging project to work on. To make it happen we worked with agencies W+K and AKQA, motion graphics experts Mainframe, developers Lifelike, and 3D avatar service Digimi.

Essentially, the user can upload an image or use their web cam to transform them self into a footballer and see a film chronicling their rise, fall and eventual triumph.

We shot new scenes, including with some Arsenal stars, created motion graphics sequences and reused some shots from the TVC to construct the film. We then motion tracked all the scenes in order to map the user's face and name onto the film. Users who connected with Facebook also saw their friends at certain points.

The Digimi service creates a 3D avatar from the user's photo. This is what made it possible to apply different textures and morphs to the user's image so we were able to make them look sad, happy or even like a statue. We built a small app that worked with the Digimi API in order to get the right expressions, angles and lighting effects for each scene.

Eyal from Digimi posted a video showing the user journey and resulting film:
http://www.youtube.com/watch?v=uiq02wyt0Hk

FWA SOTD July 28th 2010

Posted By }i{ on July 30, 2010

Webby, One Show, D&AD and Shots

Categories: Articles, Awarded
Tags:

trophies

To my delight the work we've done at Stink Digital continues to be recognised within the industry this year.

This article from Shots places both Carousel (aka Philips Cinema 21:9) and A hundred lovers for Diesel in their top 20 digital campaigns.

Meanwhile Carousel was a Webby Awards winner. It also picked up Gold and Silver at the One Show Interactive awards. And if that wasn't enough, it got nominated at the 2010 D&AD awards, although sadly no pencil this time.

Posted By }i{ on June 16, 2010

Diesel A hundred lovers

Categories: Awarded, Sites
Tags: ,

diesel-ahundredlovers

Well I've been inexcusably slack in posting updates this year. Apologies to my readers. Both of you.

Anyway, backtracking a bit, the first big project I completed this year was an interactive film showcasing Diesel's 2010 Summer collection.

A homage to Goddard's 1964 film 'Bande à part', we shot the video in an uber cool East London pub and used an editing technique known as match-cut to squeeze the many participants adorned in Diesel's collection into the 3 minute film.

Dubbed 'A hundred lovers' after the excellent song by new artist Josef Xorto, the piece took the form of a music video. The result was entertaining and somewhat charming.

The big twist from a technical and usability point of view is that you can roll over the video at any point which pauses it and shows hot spots for each garment and participant in that particular frame.

From there you can find out about participants and follow their social links, or discover what garments they are wearing and follow links to buy them on Diesel's store.

To achieve this we first built an app, in Flash, to enable placing hot spots on the frames of the film and linking them up to the right data.

In order to be able to seek to any frame, skipping through to each look we went with Akamai real time streaming for delivery of the video.

We had to ensure we had highly optimised ActionScript to process all the hot spots for each frame. Instance reuse via an object pool was a key part of this, along with massively compressed JSON for the huge data set.

The hard work has been rewarded by great feedback from the public, which is still going strong on Twitter, the industry press and the FWA Site of the Day award for 15th April.

www.diesel.com/ahundredlovers

www.thefwa.com/site/a-hunrdred-lovers

Case study film:

Diesel - A Hundred Lovers - Case Study from Stinkdigital on Vimeo.

Posted By }i{ on June 14, 2010

Handling 'Load Never Completed' IOErrorEvent

Categories: Articles, Other, Source code
Tags:

This is a potentially annoying error that occurs in Safari/Chrome when you hit refresh or close a tab containing Flash content. If you have the debug player you see:

Error #2044: Unhandled IOErrorEvent:. text=Error #2036: Load Never Completed.

It can crash Safari or, in the case of Chrome, show a 'broken plugin' screen, shutting down every instance of Flash Player in the process.

Fortunately the fix is easy. To handle it you must add an IOErrorEvent listener to every Loader instance in your project, including the 'root' Loader (i.e. the class that is the base of your main SWF).

To handle the main SWF simply add the following code to your base class. In 'onIOError' you can handle the error silently should you wish.

root.loaderInfo.addEventListener(IOErrorEvent.IO_ERROR, onIOError);

Posted By }i{ on June 14, 2010

FlexPMD

Categories: Other
Tags: , ,

flexpmd

This is a nice open source tool from Adobe for reviewing and optimising your code. Although the set-up is a bit fiddly, I installed it on FDT without any issue.

To run the plug-in you simply select 'Run PMD' and a list of warnings is generated. Examples include 'HeavyContructor', 'TooManyFunction' and 'UnusedParameter'. You can click on the classes listed to highlight the source of the suspect code and decide what action, if any, to take. Very similar in function to the way FDT handles ActionScript errors and warnings

Any standards/optimisation junkies out there will find this very useful. Granted you will no doubt end up ignoring many of the 'violations' highlighted, but it's great when it does spot something you're grateful to discover and happy to amend.

Click here to get started

Posted By }i{ on April 7, 2010

New open source code repo. First commit: YouTube API Player

Categories: Source code
Tags: ,

diesel

I've set up a Google code repository at http://code.google.com/p/stinkdigital-flash/ with the idea of releasing some the work I do to the community. The plan is to add simple, encapsulated, useful (hopefully) chunks of code such as utilities and APIs.

The first commit is a wrapper for the YouTube ActionScript Player API. This was created for the first phase of a project we're working on for Diesel and it basically simplifies working with YouTube within Flash.

The YouTube ActionScript Player API allows you to play videos hosted on YouTube in your own custom player or as part of a larger Flash site. We're currently working on a project for Diesel which involves a recruitment phase to source participants for a music video slash online experience. This utilises a video hosted on YouTube and the API presented a great option to avoid duplicating the video resource, while also being able to customise the player design to match brand guidelines.

The API is pleasingly simple, yet no classes or interfaces are provided. This essentially means that you have to cast the loaded player to the dynamic Object class and access methods and properties as dynamic members. This is not particularly nice or easy to work with, as you have to rely heavily on documentation and your code will be highly vulnerable to runtime errors. As the player API looked like something we'd be likely to use again I coded a reusable wrapper to manage it and stored values for states, event types and video quality as constants.

Feel free to reuse the code. Download the source on our new Google code repository at http://code.google.com/p/stinkdigital-flash/. For usage example see http://code.google.com/p/stinkdigital-flash/wiki/YouTubePlayer.

You can see the player in action on diesel.com at http://recruit.diesel.com/.

Usage example:

var player:YouTubePlayer = new YouTubePlayer();
player.autoPlay = false;
player.source = "lQ3D4CqHbJM";
addChild( player );

Posted By }i{ on January 30, 2010

New Year New Dev Environment

Categories: Other
Tags:

fdt

The first thing I did as a developer this year was to install a trial of FDT; the result of my ongoing frustration with Flex Builder and the persuasion of a swathe of developers I've worked with recently.

A week in and I must say I'm mightily impressed. The whole application is really responsive, much more so than Flex Builder, and some of the code generation tools are invaluable. For example I love that after adding an event listener the event handling method is automatically created with a couple of key presses.

Being Eclipse-based, overall FDT is very similar to Flex Builder. This made it exceptionally easy to make the transition and start exploring. I haven't figured everything out yet, but have already used it to make a small widget and develop a prototype for an upcoming project for Diesel. It definitely feels like I'll be sticking with FDT for the foreseeable future.

Posted By }i{ on January 12, 2010

Happy Holidays!

Categories: Experiments, Sites
Tags:

xmas

For the Stink Digital season's greetings card we thought, as you do after a good few beers at Electricity Showrooms, that it might be cool to do some kind of snowball fight where you could record your throw and launch it at your unsuspecting friends via Twitter or Facebook. A month later we'd wrapped a bunch of really intense projects and had a clear couple of weeks to design, architect and build the thing. It was especially fun working with the excellent Red5 open source Flash media server which I'll definitely be playing with some more in the new year. Here's the result: http://holidays.stinkdigital.tv.

Posted By }i{ on December 15, 2009

FWA Site of the day

Categories: Other
Tags: ,

ps33

Hooray! Our site for the new Playstation 3, www.the15reasons.com, is the FWA site of the day today. Really thrilled to have got two FWA's this year, I think it's my favourite award as a developer… even despite the lack of partying involved!

Read my previous post about the project here

Music experience:
ps31

Post production magic:
ps32

Posted By }i{ on December 9, 2009

'-frame start ClassName' compiler argument

Categories: Other
Tags:

This is simple but very handy little device that allows you to begin displaying your main application SWF before it's actually loaded.

What the argument does is basically creates a second pseudo frame within your compiled SWF that starts your main app class. On the first 'frame' you will in general have only the classes needed to show the visual preloader. The effect is that you get an almost instantaneous preloader while the rest of the app loads so even in the scenario where you have a large application SWF or the user is on a very slow connection they won't get a blank screen.

Personally I've settled on naming my first class 'Main', with the actual application hanging off a class called 'Application', so my arg looks like '-frame start Application' or '-frame start tv.stinkdigital.projectName.Application'. I define a ratio of the total anticipated loading weight to the application SWF so that I can continue to load assets such as XML files and SWFs when the app has started whilst maintaining a smooth, consistent visual preloading progress from start to finish.

Posted By }i{ on December 6, 2009

Thanks Boards

Categories: Other
Tags: ,

Stink were named production company of the year by Boards and they wrote this very complimentary piece about us: http://www.boardsmag.com/articles/magazine/20091201/stinkdigital.html

Posted By }i{ on December 4, 2009

Best @ Eurobest

Categories: Events
Tags: ,

Carousel has been awarded yet again with Gold in the interactive category and Grand Prix in film at the Eurobest awards.

http://www.eurobest.com/winners/2009/interactive/index.cfm?award=2

Posted By }i{ on November 27, 2009

BIMAS

Categories: Events
Tags: ,

We had a great showing at the BIMAS, winning the Microsite, B2C, Motion Graphics and GRAND PRIX categories for Carousel. We were up against some excellent work such as AKQA's Eco Drive so it's really a massive compliment to win - I'm still not really taking it all in…

www.bimaawards.com/shortlist

Posted By }i{ on November 20, 2009

Sony PS3

PS3

We've had our noses to the grindstone in a big way creating this site for the new Sony PS3 and I definitely feel like it's been worth the effort.

The brief was to create a 'superhuman sales pitch' in which the presenter turns out to have extraordinary powers. This lent itself well to us creating a sprinkling of fun and surprising interactive experiences to sit alongside the post-enriched film content.

The shoot day went really well, squeezing everything into one long day, and we got everything we needed to build the rest of the site. We opted for a PureMVC multicore based architecture, using the Fabrication utility to facilitate inter-module communication and the State Machine utility to manage the state of the application. Javier Abanses, Benoit Vinay and Shane McCartney all did a great job in helping us to realise the various features and elements of the site, which comprises video, audio, games, 3D animation, sound processing, particles, physics, Facebook Connect integration, language localisation and an 'easter egg hunt' competition.

It was a good opportunity to utilise the advantages of Flash Player 10 on a fairly complex microsite build. For example, the 3D capabilities came in handy in coding the tumblers and loader, Vectors helped speed things up and the sound features, notably SampleDataEvent, enabled me to create a really solid, smooth running audio sequencer for the music experience.

www.the15reasons.com

Posted By }i{ on November 19, 2009

Shelter House of Cards

Categories: Sites
Tags: ,

HoC-2

Leo Burnett approached us to create an online event and experience to augment their 'House of Cards' campaign for the housing charity Shelter.

The site features the work of leading artists such as Damien Hirst and the Chapmans, and by uploading their own art through the site, users had the chance of having their work exhibited alongside them.

I created a 3d experience using Papervision, with design by Tim and HTML/PHP by Vincent and Marcel. Users could view the cards falling, view details of them, vote for their favorites and upload their own designs. We ended up with several thousand entries. After the competition was closed the entries were replaced with the artists cards, along with the winning entry and options to help the cause. The site was redesigned by Kristian Saliba with further Flash development by Huy Dinh.

http://www.shelterhouseofcards.org.uk

Posted By }i{ on September 24, 2009

AR experiment

makeitreal

I've been playing with augmented reality in Flash, aided by Saqoosha's excellent FLARToolkit and Papervision 3D. Here at Stink Digital we decided to develop these experiments to do something fun for an ad in Contagious Magazine.

At first we planned to make a virtual Cannes Lion, along with some fireworks to fit in with the advertising festival which coincides with the issue. After having some problems getting the 3D model to work how we wanted and, moreover, deciding this idea was perhaps a bit too gimmicky I started playing with showing trending Tweets as 3D text. This worked quite well, but we then took it a step further to pull a live feed of all kinds of trending topics from various sources, including Flickr images. The result was a 'What the internet is thinking' app where every time you show the marker you get a new 'thought'.

See it here:
http://www.stinkdigital.tv/makeitreal

Posted By }i{ on July 28, 2009

Web Designer Magazine

Categories: Articles
Tags:

Web Designer Magazine asked if I'd like to contribute to a 'Top 50 Professional Flash Tips' feature for issue 160. I decided to big up the mighty PureMVC and a little tool I've been using recently called Thunderbolt that logs stuff in the Firebug console.

Posted By }i{ on July 20, 2009

The Dead Weather / Nokia

Categories: Sites, Source code
Tags: ,

deadweather

Along with W+K, we've been helping Jack White's new band The Dead Weather build interest in and broadcast a live concert over the www, sponsored by Nokia. My task was primarily to build a custom video player to be used to brooadcast the Akamai stream on the site, various blogs and on screens in record stores. It needed to be very lightweight and work at pretty much any size. I took the opportunity to create some nice reusable PureMVC classes for the streaming and player build. The player is also in use on the Stink Digital website.

View the live set here: www.fromthebasement.tv/live

Here are the source files for the Model side of things: VideoStreamProxies.zip

They are dependent on PureMVC and, in the case of the AkamaiConnectionProxy, on the Akamai connection package.

Posted By }i{ on July 3, 2009

I'm in .NET Magazine!

Categories: Articles
Tags:

Following the success of our Carousel site for Philips, we were asked to write a feature on the build for .NET Magazine. I contributed a tutorial on the basics of building a localisable Flash site, which was not project-specific, hadn't been covered before and seemed about the right level for the audience. Even got my picture in there - fame at last! …well, not really, but was nice anyway ;)

Posted By }i{ on July 1, 2009

Cannes, baby!

Categories: Events
Tags:

cannes1

Carousel won a Silver Cyber Lion and the Film Grand Prix at Cannes! To celebrate we all jumped on last minute flights to attend the ceremony and spend the weekend in Cannes, basking in the sunshine and glory ;)

carousel

www.cinema.philips.com

Posted By }i{ on June 20, 2009

FWA SOTD

Categories: Other
Tags:

carouselfwa

We have won Stink Digital's first FWA SOTD award for our new site for Philips - Cinema 21:9, a.k.a Carousel. Special congrats to fellow Flashers Jamie (”FWA is so cool it's uncool”) Copeland and Matt Sweetman, who worked with us on the project. Not bad for our first Flash project - Let's make it number one of many ;)

And as if that wasn't good enough, yesterday we got major props from Kanye West on his blog and got tweeted to APlusK's 1,200,000 followers!

Posted By }i{ on April 20, 2009

Carousel

Categories: Awarded, Sites
Tags: ,

cinema219_sotd

Tribal DDB, Amsterdam asked us to create an online experience that could help to establish Philips new 21:9′s credentials as the best thing yet in home cinema. Adam Berg came up with a 'frozen moment' film treatment that really captured the imagination and we set about devising a site that would demonstrate the merits of the product in a completely effortless and uncontrived manner.

After a few days of prototyping, we settled on embedding the film in Flash to allow for total control over the playback. The user can drag through the frames of the film, slow it down or stop to inspect individual frames in detail. This, however, meant that we had a big video asset that needed to be loaded upfront, a problem we solved by adding a movie-style title sequence to the beginning of the site.

We created hot spot areas within the film where the user could go behind-the-scenes and gain some insight into the production process. We had to make this transition seamless, so that it appears that you are transported by magic into the scene, and this was achieved with some clever management of the video loading. The control bar expands to accommodate the extra footage, indicating that this new time line exists within one slice of the frozen moment.

Another big requirement of the experience was to demonstrate the key product features. We added a 16:9 view, with the typical black bars that 21:9 eliminates, and a runtime-generated ambilight effect that could both be toggled for comparison. Fully language localised to boot, there was a lot of work to do, but with the help of developers extroadinaires Matt Sweetman and Jamie Copeland and designer Eric Chia we conceived, planned and built a very solid site in only 7 weeks.

www.cinema.philips.com

Posted By }i{ on March 28, 2009

Flash Camp

Categories: Events
Tags:

Flash Camp came to Shoreditch today, just over the road from the Stink Digital offices, so I took the opportunity to detach my head from coding for the afternoon to check it out. I heard some interesting talks on Flash animation, Pixel Bender, and Air, but the highlight had to be Seb Lee Delisle of Plug-in Media.

I was impressed with his augmented reality wormhole and enjoyed 3D Pong, which the Flash Camp crowd controlled via web cam by waving our arms in the air. The best, however, was a groundbreaking new Papervision3D site for CBeebies. What's most absorbing about it for me is the level of detail in everything you can do and the soft, gentle feel they've managed to achieve - something quite tricky to accomplish in Flash 3D. Check out http://www.bbc.co.uk/cbeebies/bigandsmall/.

Posted By }i{ on February 27, 2009

Stinky Ian

Categories: Other
Tags:

I got a new job as a senior ActionScript dev at Stink Digital, a digital production house that brings together an awesome roster of film directors, with an equally awesome group of digital nerds conceiving and building great interactive stuffs. I'll be concentrating full time on ActionScript/Flash/Flex now and there are some great projects coming up that I can't wait to be involved in. Exciting times ahead…

Posted By }i{ on January 10, 2009

Rate my throw

Categories: Games
Tags: ,

This was a fun little project for on old colleague who'd started his own business Rate My Placement. Myself and Craig conceived and produced a festive Flash game called “Rate my Throw” in which the player is confronted with a member from the team and a barrage of snowballs. The player must use their skill to dodge and throw snowballs until they meet the next challenger, hopefully gaining a good enough score to get to the top of the scoreboard. The game was designed and illustrated by Craig using Flash and powered by my AS3.

http://www.ratemyplacement.co.uk/fun-game/

Posted By }i{ on December 22, 2008

ipeer.se 'Quality or Green?'

Categories: Online ads
Tags: ,

I created this skyscraper with AD Eric for ipeer.se, a Swedish web hosting company.

They came to us with a lot of text they wanted to include in the ad, but no real focus. We boiled their offer down to two main selling points: Green (Their datacentre uses renewable energy and has been nominated as the most green in Sweden) and Quality (they pride themselves on the reliability and uptime of their hosting).

Our idea was to present these two options as a choice the consumer has to make (“What do you look for in web hosting? Quality or Green?”), with the pay off being that with ipeer you can have the best of both worlds (“You don't have to sacrifice the Earth for quality server hosting with ipeer.se”).

The user has to select the options, triggering animations of Eric's beautifully crafted illustrations and detailing ipeer's USPs. I employed the wonderful Flint Particle System to bring the stars and insects in the illustrations to life.

Click to view

Posted By }i{ on December 18, 2008

i-design 08

Categories: Events
Tags:

i-design

Went to i-design 08 at the Southbank today. Unfortunately, my day was cut short when I had to get back to the office, but not before soaking up some very interesting thoughts from the likes of Simon Waterfall and Brendan Dawes.

Made me stop and think two main things:

1. This digital thing that we do is getting so excitingly open. Every day more constraints are loosening and more possibilities are opening up. Truly an exciting time to be in this.

2. London is such a melting pot of people it fills you with ideas, gives you a connection with the whole world in one place - makes it a great place to be doing this.

Posted By }i{ on September 17, 2008

Bank of England

Categories: Sites
Tags: , , ,

I have just launched this website for the Bank of England. Being a truly unique organisation, it's been a really interesting project to work on. Through meetings with the client we gained quite an insight in the culture of the organisation and, along with Emma (WD), I set out to architect the site to communicate the open, dynamic feel we uncovered under the austere exterior. Bringing forward the bank's people as a human face talking about their experiences seemed to be the best way to acheive this. With the design, we had to strike the right balance of looking and feeling very modern, while still staying fairly safe and conservative, and I think the approach we've taken using design elements from banknotes has acheived that.

The site is content managed using WordPress. I chose the YUI CSS framework again for the templates and used Flash (ActionScript 3) for the video and interactive features. The video interviews (shot by Simon Drew of kaspar films) in particular are key to the experience and I worked them into a stylised Flash interface. I used JQuery to handle the alternative text for the video.

Posted By }i{ on September 12, 2008

Caroline Bird

Categories: Sites
Tags: , , ,

When we were approached to create a web site promoting poet Caroline Bird it presented a somewhat new challenge in that we had to get ourselves into the mindset of creating something for an individual, rather than a brand or corporation. Taking inspiration from her unique brand of highly visual, often surreal poetry the AD (Eric) and I found ourselves bouncing around ideas of creating some fantastical journey or wierd surrealist online experience. This started to feel a little uncormfortable and it became clear to us that our approach should not be to try to illustrate or compete with the poetry, but to provide a blank page from which the words could have their own life. We acheived this by focussing not on the content of the poems, but on the tools used to create them - the pencil and paper.

Meeting Caroline you get a strong sense of her passion and desire to inspire others and get them excited about poetry. The blog gives her the opportunity to personalise the site and reach her readers. The 'latest updates' area ensures that any timely information is noticed. In this way the site serves it's two targets equally: publishers/educationalists/etc who might employ Caroline, and fans interested in her poetry and readings.

Technically this was an interesting project too. We wanted the site to feel fluid, organic and slightly playful, so we chose Flash for its smooth animation capabilities and typographical possibilities. We based the Flash build on Steven Sacks' Gaia Flash Framework (great out of the box deep-linking), which helped us concentrate more on the sexy bits. These included the mouse-tracking pencil that draws as you move around the site and the mouse-over scrolling technique, both of which I coded in ActionScript 3. Craig made some really nice paper animations in Swift 3D and I used ActionScript 3 and PHP to code a Flash/Wordpress integration (something I think we'll be using a fair bit) so that the site could be managed easily by Caroline herself.

Posted By }i{ on September 12, 2008

jParallax goodness

Categories: Other
Tags:

Colleague and JavaScript whiz kid Stephen Band just released his first jQuery plugin 'jParallax'. Very nice stuff, he's already used it to create a stunning presentation for an important pitch recently. Hopefully we'll come up with a site concept that gives us a chance to exploit its coolness to devastating effect :-)

Get it here: http://webdev.stephband.info/parallax.html

Posted By }i{ on August 26, 2008

Elevation Networks launch event

Categories: Events
Tags:

Had a good time last night attending the Elevation Networks launch event at Barclays headquarters in Canary Wharf. Funded by Barclays Capital, they have been our client for about a year now in the run up to their official launch and in that time we've created their brand, produced a variety of marketing collateral and built a very well received and useful web site for them.

The highlight of the event was the talk by Wilfred Emmanuel Jones 'The black farmer' which was truly inspiring. Not only does he have a unique story to tell, but some very good advice which was targetted to the audience of young black students, but equally relevant to veterans like us (I was accompanied by Eric, the art director on the account, and Craig the web developer). Basically the message was to follow your dream, keep focus (the reason most people don't make it is simply losing focus - think of olympic athletes who focus so hard on acheiving their goal they'll do whatever it takes), direct your energy (your most precious resource) and manage fear (take risks, understand that failure is part fo the journey).

After the talks came the networking, along with plentiful drinks and nibbles :o), and it felt good to be asked for help and advice by lots of ambitious young students - it's funny to think that we are now the experienced professionals who have 'made it' and have the power to assist or maybe even inspire others. It has made me think we should try to do some sort of summer internship or work experience programme here so that someone can get some really valuable industry experience and also feed some of that fresh, youthful energy into the agency.

Posted By }i{ on July 8, 2008

WordPress CMS

Categories: Other
Tags: , ,


I've been working on a couple of small freelance sites recently that needed content management. Being a big fan of WordPress as a blog platform I used this as an opportunity to try it out as a cms.

The first site was for for one of the partners where I work, advertising her palatial pad in Spain for rent: sesvistes.com. Very modest, and designed by me so doesn't look as good as the regular stuff I do with proper designers, but it did prove the point to me that WordPress can work very well as a cms for small/medium sites. So, when I got another little freelance job for an air conditioning specialist through a designer at work, I broke out the WP again. This time the site was a bit larger scale and a few more plugins were employed and it's worked a treat again. The result (which the client has now added loads of content too): coolingandheating.info.

Conclusion: WordPress definitely works very slickly as a website cms. One of the best things about it in my opinion is that non-technical people find it crazily easy to use - and that's got to be a major advantage in the cms stakes. Next step to start thinking about doing a Flash integration…

Posted By }i{ on June 15, 2008

Experimental Jetset

Categories: Events
Tags:

Design legends Experimental Jetset were the guest at the D&AD lecture last night. They didn't dissapoint. Very humble about their considerable talent and acheivements they definately made me think about spending more time on things, giving more thought and consideration to projects rather than running headlong into them like usual :-) . Also felt the usual gentle kick up the rear I always get from this kind of thing: they graduated just a year before me and I still feel like I'm just starting! Maybe that's the nature of the digital though - always in beta, always moving and consequently we're always trying to catch up…

Posted By }i{ on June 6, 2008

Candidata

Categories: Other
Tags: , ,

Candidata is a web application that enables posting of job opportunities on companies websites and for people to apply online for the vacancies. The client can then manage all the applications they receive and generate reports and so on.

I devised and wrote this web application from scratch with Sade (developer) using C#.NET, SQL Server and a pinch of JavaScript. The agency have since sold it on to several organisations, most notably British Waterways and Southern Railway. The application forms, reports and feature sets are completely configurable from the back-end and it has a basic theming system, meaning that setting up new ones is a doddle.

Posted By }i{ on May 2, 2008

Southern Railway 'Not for lightweights'

Categories: Online ads, Sites
Tags:

Southern Apprenticeship logo

'Not for Lightweights' is our approach to advertising an apprentice scheme for railway engineers. Targeted at 16 year olds, the apprenticeship programme is intensive and not for the those who want an easy option.

To engage the teenage audience we created online banners containing a playable game and a fun, playful website. We felt the target audience would find it hard to resist the challenge presented by the 'Are you a lightweight?' message and after engaging with the advertising, would be encouraged to find out more by exploring the site. After working on the concepts with Eric (AD) and Craig (developer), I did the site build in Flash/AS2 and Craig built the interactive ads. We turned round the whole project in just a few days.

Playable MPU (ran on Bebo & S-Cool)

Southern Apprenticeship MPU

Posted By }i{ on April 20, 2008

The National Archives pitch

Categories: Online ads
Tags: ,

The National Archieves logo

The National Archives is one of the new business wins we have had this year. The focus of the pitch was primarily on their employer brand message and digital strategy.

The National Archives generally conjures the image of old, dusty tomes. In fact, they are actually one of the most innovative organisations within information archiving. For example, they worked closely with Microsoft to develop technology to ensure the accessibility of all archived documents in the future avoiding what they call 'information blackholes'.

We presented the following two approaches, which I conceived and developed along with a writer (Fiona) and AD (Eric):

Give the past a future.

This encapsulates the idea of The National Archives as guardians and protectors of our history, and points to the danger of history being lost over the passing of time. You are being offered the opportunity to preserve the past so future generations will be able to enjoy and learn from the failures and successes of their ancestors.

The first ad features a film from the archives. Dragging the timeline into the future shows how the film degrades into static - unless you can help.

The second ad features an old tome. As you mouse over, your cursor is a key inviting you to unlock the secrets of the ancient text. Unfortunately the book only contains a parchment page with 'Error 404′ in calligraphy - it has been lost over time.

404 Error

History, Your Story.

The idea behind the 'Your story' route is that history is all of our stories. We can all relate to moments in history and in a sense history is us - it's not something that is stuck in the past, it's happening all the time all around us and we're all part of it. The ads connect actions of notable figures from the past with the actions of people at The National Archives today.

History. Your Story. MPU

Posted By }i{ on March 20, 2008

Campus Ali

Categories: Sites
Tags: , , ,

Campus Ali peeking out from tent

Stafford Long wanted to promote their graduate marketing services. The inital request from the new business team was to send out a rather dry email demanding that companies position them at the top of their pitch lists. We thought we could do something far more effective by using our creative noodle so we (me, Eric and Craig) got our thinking caps on. We identified their main point of difference from competitors as having a dedicated resource travelling the country gathering intelligence on university campuses.

To create a more appealing, human and interactive experience for our audience of potential suitors, we decided to introduce and brand him as a character - someone to be the face for this service. The result was 'Campus Ali', who on his travels would write a blog that served the purpose of keeping in touch with the target audience and steadily gaining momentum in the market by giving away valuable insights into campus life.

We built the blog using WordPress, Twitter (which Ali uses to text amusing updates that appear in the site header) and a mailing list sign up to capture details of interested parties. We also had fun spray-painting a grunged-out Stafford Long logo onto a tent, doing a photo shoot with Ali over the road around SOAS/Russel Square and shooting a slightly silly video introduction to the character (see first post).

Various media were used to promote the campaign, from targeted HTML emails to a mass postcard mailout. This soft-sell approach has been a great success in generating buzz and some great new business leads. It has also been praised as a valuable resource by existing clients alike who read it to keep up to date with the latest campus marketing thinking.

DM postcard

Campus Postcard

Posted By }i{ on February 20, 2008

Elevation Networks

Categories: Sites
Tags: , , ,

Elevation Networks website

Elevation Networks is a student-led initiative to bridge the gap between employers and students from under-represented sections of society. They were able to pitch this idea to Barclays Capital and got themselves sponsorship for branding, a website and some small collaterals.

The aim of these dynamic young individuals is to bring together people who share fresh ideas, positive thinking and big ambitions. They are seeking to inspire others and to challenge and overcome barriers, making them a very successful network within universities.

Eric created the brand and based the site design on the typical busy, crowded notice board on a pillar along a busy campus corridor. We setup a Facebook group along with Blogspot and MySpace pages to help them to increase their online presence and build up their community. I organised a green screen video shoot (with Craig as cameraman) of students introducing different sections of the website and some tips from the HR director of Barclays Capital. We felt that having the video introduction to the site by Joanna, one of the groups key members, would provide an exciting, engaging first impression for visitors and put a human face on the network, inviting students and prospective sponsors to register.

Conscious that we needed to provide an interactive utility that gave EN the tools to be self sufficient, the site is poplulated through a simple content management system and registrants go into a mailing list through which members are sent updates and invited to events. Additionally, we used Unity to create a real time avatar chat facility on the site where visitors can communicate and online events can be held.

I coded the site in ActionScript 2, along with Craig, and used PHP for the registration/mailing functionality, using the open-source Pommo as a basis. Stephen did much of the html work, creating a non-flash version and templates for the registration forms.

As a result of their higher profile, they have not only managed to recruit many students but also secured themselves some deals with 'magic circle' law firms and an event in collaboration with IBM.

Posted By }i{ on September 20, 2007

KPMG website

Categories: Sites
Tags: , , ,

KPMG needed to completely rebuild their dated careers website. We were tasked with enriching the user experience while meeting standards of usability and accessibility. Our solution was to build a feature-packed new website and to make sure all the content could be managed and updated by the client, so that they could avoid such problems in the future. Content ranges from video features and podcasts to an interactive events calendar.

The project provided quite a challenge in terms of its scale and we employed a whole range of technologies from C#.Net, to JavaScript, to Flash along with good old XHTML and CSS in order to bring all our ideas to life. I did much of the back-end coding, the jQuery and shared the Flash and HTML work along with Craig and Emma.

Posted By }i{ on August 20, 2007

RM 'Find the professor.'

Categories: Online ads
Tags:

The brief was to attract software developers and entice them to interact with the RM brand, raising awareness of RM as an exciting career destination. The aim here was to attract a new audience that might not be actively looking for a new job.

The MPU sets the scene for an intriguing mystery that surfers can solve by solving puzzles on RM's Virtual World website that we created. Me and Craig came up with the concept and used Flash to create a puzzle which is solved by using the familiar interface of a mobile phone.

RM like people who are excited by and able to solve intellectually challenging problems so for this campaign the emphasis is on interactivity and subtle messaging in order to engage the tech-savvy audience and not treat them as idiots or demand they apply for a position - a decision clearly vindicated by the MPU's impressive click-through rate and subsequent surge in applications.

Placed on theregister.com, the ad acheived a four times the average click-through rate. The Register has attributed this to the thought and creativity shown in the MPU which clearly interests their core readers. On top of this, for the month previous to the campaign RM's site had 407 visitors (14.5 per day). For the first week of the MPU campaign they received 577 unique visitors with a daily average of 82.5.

Posted By }i{ on February 20, 2007

RM 'Virtual World' trailer

Categories: Online ads
Tags: ,

The video trailer was intended to create a sense of intrigue and curiosity encouraging visits to RM's Virtual World website. The website involves a game where visitors can solve a mystery by solving a series of intellectually challenging puzzles.

Me and Craig concepted, filmed, edited and treated the footage for the movie in-house using our designer Ken as the actor. To achieve the desired effect we used After Effects, 3D modelling and music created in-house by myself. This enabled us to turn round the project very swiftly on a tiny budget.

The movie was hosted on a web page, with options to download. It was distributed to RM employees, and they were encouraged to provide some initial momentum for the campaign by sending it out to their personal network of contacts.

After the first two weeks the page had 381 unique visits (an average of 27 per day) and 157 downloads (as Windows Media and Quicktime movies). This of course does not include the number of people that have been forwarded the movies themselves as opposed to the link to the web page.

Working in conjunction with an interactive MPU banner, the movie has contributed to a surge in site visits that coincide directly with its release. For the month previous to the campaign RM's site had 407 visitors (14.5 per day). For the first week of the campaign they received 577 unique visitors with a daily average of 82.5.

Posted By }i{ on January 20, 2007

RM 'Virtual World'

Categories: Awarded, Games, Sites
Tags: ,

Virtual World Website

Winner, November 2006 Ri5er

The brief behind this project was simple: RM wanted to get across just how innovative they are as a company and attract the best talent, with a particular emphasis on software developers. In response, me Ken (AD) and Craig created the RM Virtual World, ditching the regular copy heavy approach for an almost text-free video based experience. We worked closely with a group of existing RM developers to test and hone our ideas to acheive something that would definately strike a chord with our target audience.

RM is an innovative organisation, leading ICT in Education, hence in the Virtual World, each company division is represented by a different fantastical room where extraordinary things happen. While exploring each room, visitors can watch and listen to people who already work there, and find out more about the company by clicking on various objects.

At the core of the site is the game, which is started when curious visitors click on a discarded newspaper lying on the ground. They then have to complete a series of puzzles, following the clues via a variety of different media to find Professor von Straaten - a fictional professor who has apparently gone missing. The game features various games, puzzles and clues, some fiendishly difficult, including one hidden in the html source code on Professor von Straaten's personal homepage. Those who do solve the mystery are invited to leave their name and contact number so that someone from RM can call them back.

We shot the participants against a green screen and put the website and game together using Illustrator, Flash and After Effects. We had to turn round the project very quickly, which was tough considering the technical challenges, but in the end we exceeded the client's expectations and got great feedback from visitors.

Posted By }i{ on January 20, 2007

Pizza Hut 'Create your own'

Categories: Games, Sites
Tags:

Pizza Hut

Pizza Hut wanted a new website that would get across what it's really like to manage one of their restaurants. A key element of the brief was to portray the renowned fun and friendly culture found in their dine-in and home delivery restaurants.

We set about doing just that - crafting a colourful Flash website bursting with animation and unique features, such as a 'Pizza Patrol' game and video profiles of existing managers. The theme for the website was 'Create your own', playing on the fact that Pizza Hut managers receive all the training and support they need to essentially run their own small business and implement their own ideas.

The design, by Ken (AD) and Craig, was based around the idea of painting and drawing, using a paint palette as a menu device and introducing lots of additional 'arty' features such as the opportunity to make your own e-cards using text, doodles and photos (which also serves to attract more visits). In fact, visitors can even scribble on the pages using the pens and pencils provided. We also wanted to make the site easy to understand and navigate, presenting the information in bite-sized nuggets in a friendly and engaging tone. We shot video interviews with existing managers to give some first hand testimonials.

I wrote most of the code for the site, game and interactive features in ActionScript 2 and built the entire site along with Craig. The addictive game has proved to be a very good source of referrals and at last count had around 10,000 high score entries. Don't blame me if you lose a few hours 'checking it out' though :-) .

Posted By }i{ on September 20, 2006

Severn Trent Water 'Thought Provoking'

Categories: Awarded, Games, Sites
Tags:

Winner, 2007 RAD Best Website
Winner, April 2006 Ri5er

Severn Trent Water had run apprentice schemes in the past - but never on this scale. They were looking for forty people to join them in areas from Engineering to Finance, and wanted to get across the complexity of the roles in an interesting and visually-stimulating way.

When formulating our ideas, it struck us that the majority of applicants would already have heard of the company and, indeed, most likely would have been drinking their water for many years. Hence with the body made up of two thirds water, they would literally already be 66.6% Severn Trent. This led us to think about a variety of other 'th2ought provoking' facts, and we commissioned 12 eye-catching illustrations to demonstrate these across the whole campaign.

The result was a suite of colourful web-driving materials, all pinned together by a playful website which featured a 'thought provoking' quiz, bathtime game and 'interactive home', demonstrating a number of water-saving initiatives. With the young audience in mind, not only is the site entertaining and engaging, but the information throughout is clear, friendly and educational, with no management speak or jargon.

I used Flash to construct the site along with Craig adding animations, games, sound effects and an unusual navigation in order to achieve a fun, engaging feel. We also made a simple content management system so that the content could be kept up to date throughout the campaign.

In a two-month period, the website received more than 7,000 visits, with users spending an average of 12 minutes on the site. In total, 963 applications for the scheme were received, and all positions were filled in time for the September 2006 start date.

Posted By }i{ on June 20, 2006

Capital One - 'Fast'

Categories: Games, Other
Tags:

Capital One - 'Fast' Email

Capital One - 'Fast' Game

When Capital One wanted to promote their newly streamlined referrals programme, we came up with a solution that was guaranteed to make a splash. Our task was to generate an exciting and innovative way of conveying the speed of the new employee referral programme.

We created an interactive communication to encourage employees to recommend a friend or member of their family to work at Capital One. I animated and made some hectic music for the ecard, which was very well received and certainly caught the attention of its target audience.

After the success of the first ad, we created a Flash game based on the concept of speed, in which players 'flipped' frogs across a virtual lily pond to score points against the clock. I built the game in Flash/ActionScript, made the music and sound effects and added a high-scores table to introduce an element of competition and hence addictiveness. Staff were keen to compare scores with fellow employees and the resulting viral effect in terms of promoting the ERP was therefore quite considerable.

Posted By }i{ on March 25, 2003
©2011 Ian McGregor. All rights reserved.