Overview

An interactive consumer information site for Pfizer and their Viagra brand. Users are presented with a view of a pristine laboratory. Various “hotspots” invite the user to interact and reveal the awful alternative lab beneath

Development

Developed in pure AS3 using Robotlegs MVCS framework. I had to do lots of animation and visual work. This was done with script or frame-by-frame work.
The site is also localised so all text is from XML

Screenshots

Overview

This was a major promotion for Bacardi’s new brand “Oakheart”. It was a Facebook “App” reached via Bacardi’s main Facebook presence. The promotion ran for a month and handled thousands of users every day.

Development

The project was developed with AS3 using the Robotlegs MVCS framework. Facebook authorisation was handled via Javascript and made heavy use of server-side HTTPServices and JSON.

Other technologies used:

• Facebook Graph API
• YouTube API
• After Effects for some animated elements
• Sound effects and sample work in Adobe Soundbooth

Offline demonstrations

These demos are missing a lot and are used to preview visuals.

Win a bottle
Site inactive
Unused explosion animation

Screenshots

Just getting back into Stage3D after being caught up in a client project for the last month. Now there is quite a buzz about the new Starling 2D framework which leverages Stage3D so I thought I would take a look (will add the Starling setup later)

I find getting the development environment set up is a little tricky, so this guide is a future reference for me. Hope it helps anyone else who finds it.

I am using FDT 4.5

1. Download the latest Flex SDK  http://opensource.adobe.com/wiki/display/flexsdk/Flex+SDK
   At the time of writing, the latest was 4.5.1
2. This SDK does not contain the required “playerglobal.swc” required to develop for Flash Player 11. So, next thing we need to do is update that. Download from here http://www.adobe.com/support/flashplayer/downloads.html
3. Use this to replace the existing playerglobal.swc which is located in the SDK at ‘\frameworks\libs\player\10.2′
   Be sure to rename the new swc to “playerglobal.swc”. The  download in (3) is named “playerglobal11_0.swc” at the time of writing – this must be changed.
4. Ok that’s it for the SDK. Back into FDT and create a new AS3 project. Choose “include HTML wrapper” to speed things along.
5. On the SDK configuration screen, you may need to add the new SDK you have just created. Choose 10.2 as the player version (it will actually publish to version 11 thanks to the new playerglobal.swc added in 3)
6. Finish creating the project and go to “run configurations”. Open up the tab (“compiler options”) and add the line
   “-swf-version=13″. See screenshot below



7. Apply settings these settings and then we’re on the final step
8. Edit the HTML file which will be used to embed the Flash. In the embed code, make sure the wmode parameter is set to “direct” if this parameter does not exist, create it.params.wmode = “direct”; in SWFObject style embedding
   <param name=”wmode” value=”direct” /> in standard Object style embedding

That should do it for the basic setup of FDT and Stage3D development.

Development

The project was developed with Flash Builder using the Parsley MVC framework. I joined the development team to take over the Actionscript development and take the project to completion. It was one of the more complex projects that I have worked on and featured a high level of user interaction. The main challenge was to capture users faces via webcam or by uploading a photograph and mapping them onto several video based animations. The technical issues included making sure this difficult effect was as realistic as possible.

Other challenges included the storage and loading of user submitted data which was achieved by flash remoting with the AMFPHP library. This was a viral campaign and so each and every use of the application was recorded and possibly distributed to other users via Facebook, Email or Twitter.

Press release

This is taken from the Sapient Nitro press release

“Set in a fictional village ‘Soggy Bottom’, three characters – a butcher, farmer and elderly lady (Bob Trickle, Tim Sprinkle & Gladys Drizzle) – appear to innocently man their stalls at the local fete but surprisingly start a water fight aiming directly at consumers’ computer screens. In creating the Great British Water Fight campaign, SapientNitro is helping Energy Saving Trust raise awareness about the importance of saving water and energy in the real world.

What makes the campaign both unique and engaging, is that the consumer is able to map their face onto one of the characters in the video, creating a personalised soaking they can share with their friends via Facebook and Twitter. The goal is to make saving water fun while getting people thinking about their personal water and energy consumption.”

Overview

I developed a new CSS base and worked on the front-end of ELLE UK for over a year and a half. Over the course of this time I also developed many Javascript and flash based systems for displaying content across the whole site. Articles and features were written daily and published via the EZPublish content management system.

CSS development

I created a range of stylesheets for ELLE UK which are in use across the website’s hundreds of pages. The site is very design-heavy and attention to aesthetic detail was very important to the brand. The challenge was to create base styles which could be extended and reused across the site.

With each iteration of design, the need for extendibility was reinforced and I gained a lot of great experience working on such a large site.

External clients

I also developed microsites, advertising campaigns and other features for several external customers. These clients included: Sony, Phillips, John Lewis, Space.NK, Versace, Dior, Littlewoods, Ugg, French Connection. Some of the projects are featured on my portfolio.

Overview

This is an RIA created for CIMA – Chartered Institute of Management Accountants.

The client was in need of a solution for creating a range of documents for print, without having the time and expense of using graphic designers each time they needed a new variation. The application was designed to allow staff with no particular experience of design to create posters, invitations, certificates and various other printed materials up to A3 in size. There was also a need for a full document creation and management system.

The application in action

Maximise for a better view
(Video: Watch this video on the post page)

Methodology

After evaluating different software solutions, we decided the build the application with Adobe Flex and AMFPHP with PHP and jQuery for the client administration section. One of the various challenges presented by this project was the need for multiple user environments linked to user permissions or access levels. Flex proved to be the ideal solution.

XML was used for the saving and retrieval of document data. Each document is composed of a variable number of text elements. The user can add, remove, format, resize and reposition text elements as they wish. At the end of a session, the user can save their work and the application compiles a new XML document to save each and every detail of the document and saves this to the database. When a user chooses to retrieve and edit documents, this XML is reloaded and the application would parse and rebuild the document ready for editing again.

Project summary

This was a promotion for Phillips who were somehow involved with the Sex In The City 2 film. The project needed a mechanism for displaying several photographs from the launch party at once. The iPhone-style ‘Coverflow’ gallery method was chosen.

I could not find a suitable solution available and so I created my own version from scratch with Flash and Papervision. The content is supplied via a remote XML file, I have actually linked this one to the original at http://features.elleuk.com/flash/assets/imageXML.xml

Usage

Click on the photos to enlarge or scroll. Click on the side buttons to scroll.

Download

If anyone finds this and think they might want the source code, just get in touch and I’ll be glad to send.

Overview

This was a Flash based feature for use in a website created for Orange Retail. This part of the project required a fun, interactive “Spin The Wheel” type element for customers to enter a code, spin a wheel, and see if they have won. The prizes were to be managed remotely, by the client. To facilitate this, the movie was XML driven.

The challenge with this movie was to simulate the behaviour of a real wheel of fortune, users can use their mouse to spin the wheel as fast or as slow as they like. It took quite a bit of actionscript work to create this effect. In the end it worked well and was deployed across Orange Retails UK stores.

The Wheel bit

You can use your mouse to manipulate the speed and direction of the spin.