Automated HTML canvas workflow with a custom generator script for photoshop
PBS Kids' Word Girl is an animated cartoon and comic. They wanted me to explore how to bring their comic experience to life on the web.
PBS provided me a flat PDF of the comic book consisting of about 80 frames. I wanted the experience to include animation, which meant breaking up the artwork. This resulted in approximately 200 separate layers to manage and bring into the application. As you can imagine it was a tedious process to position them and animate the layers, not to mention any updates to the artwork that would need to be saved out and included in the application.
I decided this was the perfect opportunity to put Photoshop's Generator functionality to the test. So I wrote a custom Generator script that I could have running while working in the PSD. Because of this when changes are made inside the PSD, optimized images are rendered out in the correct directory. The script also generated a JSON file which gave us access to the position of each layer, as well as the bounding box of the cell frame. This allowed us to use this data and reassemble the file in our application. This workflow automated the process of saving out all these files and instantly brought them into the application.
The application itself uses a variety of web technologies. All the dialogue text is HTML, while rich graphical text is done with SVG. The images themselves are all drawn into a canvas element. We then have a camera object that maps our DOM content to our canvas content, allowing them to both pan and zoom together through the comic.
The end result is not only an animated comic experience that works great on mobile, but also an optimized workflow from design tool to production. This makes the prospect of doing future comics like this even faster.VIEW PROJECT
rich web application for browsing recipes including hands free navigation
The Food Network had an iPad application called Cupcakes! featuring a variety of cupcake recipes along with beautiful photos and designs. We saw this as a great opportunity to bring it to the web and show off some new web features along with some that Adobe had contributed.
Some other interesting features include rich textures with CSS Masks, unique element shapes with CSS Clip Paths, as well as visually interesting transitions on supported platforms using a CSS Canvas Masking technique.VIEW VIDEO
Exploration of the future of digital layout utilizing cutting edge web technologies
National Geographic is known for great storytelling with amazing content and photographs. We wanted to take advantage of this content when showcasing some newer layout features from Adobe making their way to the web.
Forest Giant is an article about how they climbed and photographed a Giant Sequoia called The President. To take advantage of the browser screen and maximize the images I utilized viewport units allowing the images to take up the entirety of the window's viewport. To work around this flexibility and enable other features like varying columns I used CSS Regions allowing me to flow text between elements. I also wanted text to fit nicely within the irregular whitespace of certain images. I was able to use CSS Shapes to manipulate the shapes of the containers to adapt to the area.
A number of interactive components were included in the site. I made a WebGL experience showing photos flying in and merging together, then allowing you to pan around the giant image of the tree. Also a canvas component was included that lets you toggle and learn about different layers of the tree.
We also made a native PhoneGap application for the iPad using all of the same technologies with a mobile optimized layout. Altogether I think this is a great example of how we can expect storytelling to continue to become more engaging and interactive as the technology of the web improves.VIEW VIDEO
Rich animated presentation showcasing the graphical features of the web
Adobe asked me to come up with the concept and content for a keynote presentation for the Graphical Web conference. The keynote needed to discuss the graphical aspects of the web.
I came up with a tale involving a protagonist, 'Div', who travels through a world to make the web more graphically interesting. Along the way he meets characters that represent the graphical aspects of the web.
The presentation was built using the technologies it discusses, CSS, SVG, Canvas, and WebGL. It also mentioned other interesting and coming features to the web like 3D transforms and Blend Modes. I worked with illustrator David Luepschen to design the characters and booked voice talent for the characters voices. I also brought in Drastic Music for audio and sound effects.
The result was an impressive interactive application that introduced the features of the web. Adobe enjoyed it so much they used it for a variety of presentations including their highly publicized Create The Web event. The accompanying website went on to win the Awwwwards Site of the Day.VIEW VIDEO
A look at the potential of digital advertising on the web by creating rich experiences that work across modern browsers
Google's Advertising Arts team wanted to show off the potential of display advertising on the web, in a way that aligned it with advertising's glory days. To achieve this they decided to reach out to four legendary advertisers to re-imagine some of their classic ads and see how they could be enhanced by today's technology. Doug Pray, the director of Art & Copy, was hired to document the entire process.
Grow Interactive was brought in as the Lead Digital Agency for creative input as well as build the ads. Four classic ads were transformed and modernized to fit into a banner ad, but also on mobile devices. The ads themselves were HTML with videos, rich interactive games, and even connecting to various APIs and services.
I was responsible for building the native iOS and Android applications showcasing the advertisements and videos. I also advised and assisted development of the Avis and Volvo ads building out the UI, rich games, and interactions.
The project won several Cannes Lions in 2012 including two Silver Cyber Lions for the project and a Bronze Mobile Lion for the Volvo ad.VIEW VIDEO
Animated scrolling website showing how Google is helping the environment through their green initiatives
Google hired Grow Interactive to build a site showcasing videos and charts of the companies green initiatives. We built this clean scrolling site that triggers animations when they come into view. The end result was a fun beautiful way to learn and better understand how much Google values the environment.VIEW PROJECT
The first rich mobile ad using Google's admob platform featuring touch exploration, games, and videos
Google wanted a mobile banner ad built to show off their new admob rich media platform for iOS. They also wanted it to promote their new Google Search App for iOS.
Grow Interactive won the pitch with 'Uncover Your World'. The concept included a city street that users could swipe through and tap on buildings to paint them and uncover various features of the Google Search App. The aesthetic to the ad was white 3d printed miniatures with animations using stop motion photography.
The end result was a mobile ad that was visually stunning, entertaining and engaging. The ad went on to win the FITC Award for mobile advertising, the FWA Site of the Day and Webby People's Voice award.VIEW VIDEO
An immersive web experiencing utilizing visualizations to track shaun white's heart rate and other metrics as he learns to drive rally
The Martin Agency hired Grow Interactive to build the website for BF Goodrich's Shaun White campaign documenting the snow boarder learning to drive rally cars from their experts. The site needed to be built in two weeks to align with a television media campaign.
The Flash site featured numerous videos of the process of Shaun learning from the pros as well as a rich data visualization experience showing heart rate, g-force and speed overlaid on footage of an exhilarating thrill ride. There were also unlock-able videos and features hidden throughout the site.
I was responsible for building the interactive thrill ride. Synchronizing data collected in a variety of formats to the timestamp of the video and then visualizing them on the screen. I also built a number of components for the core site including the video playhead and unlock-able pop ups.
The result was a rich entertaining website with tons of content allowing you to play and explore while watching Shaun White fling around the track. The site went on to win the FWA Site of the Day.VIEW VIDEO
campaign epitomizing the creative potential of rich banner ads, including expandable ads, games, and videos
Google's Advertising Arts team hired Grow Interactive to build the ads for their Watch This Space campaign. A sort of meta-campaign, of advertisements to advertisers, showing off what was possible in modern banner ads.
The Flash ads involved a large variety of sizes and rich visual animations. It included expandable units that included twitter streams, video players, games, as well as using a variety of other API's and features to really show what the space is capable of.
The ads were built on Google's DoubleClick ad platform. I was responsible for building a number of the ad units as well as teaming up with another developer on the large expandable units and animations.
Native iOS application allowing children to explore characters, watch videos and play a game
I was hired to build the native iOS application for the British Children's animated series Fifi and the Flowertots. The application included clips of the show children could watch as well as character bios that could be easily swiped through. There was also an interactive game where Fifi would bounce up in the air collecting fruit and avoiding Bees.
Rich animated website allowing children to interact with CG characters, play games, and watch videos
Chuggington is a CG animated cartoon for young children that airs on Disney Junior. At Ludorum I was responsible for the Chuggington website which hosted videos, a game portal and interactive activities with the characters.
Along with the website I built a large library of games for the site, including analytics and achievements that would link into a back end portal where parents could track and reward their children. The games were also used on partner sites, like CBeebies and the Disney Junior website.
Easily build stories with animated graphics and your voice
Adobe Spark is an application that allows you to easily record voiceover and place graphics or text that animate in based on your chosen theme. It allows you to produce high quality visual stories with ease.
Adobe wanted to port their successful iOS app to the web. I was responsible for porting the native OpenGL rendering system they had for playback and drawing to WebGL. The Pixi.js library was used as the WebGL rendering library and custom filters were written for special effects like SDF parsing and Motion Blur.VIEW PROJECT
BUILD ANIMATED SVG CONTENT WITH A TIMELINE ANIMATION TOOL
ANIMATED BANNER AD USING SNAP.SVG
The Ad shows off a variety of complex animated transitions using clip paths and morphing paths.VIEW PROJECT
WEBGL SPACE INVADERS EXPERIMENT
This was a WebGL experiment taking the gameplay of space invaders and bringing it to 3d. I collaborated on this with Joe Branton who did the design and 3d models for the game.VIEW PROJECT
WEBGL SKI FREE EXPERIMENT
This was a WebGL experiment recreating the old PC game Ski Free and converting it to webGL. There are multiple camera angles that can be toggled with the spacebar.VIEW PROJECT