Facebook Kinect

View

I was on a team that built the Facebook page for the release of Microsoft’s Kinect device. The page combines Silverlight, Flash, C#, ActionScript, .NET, HTML, CSS and JavaScript, and I got my hands dirty with all of them. The main content is Silverlight, coded in C#, and the YouTube video component is built with the YouTube AS3 API in Flash. The back end is .NET, and much of the “glue” is done in JavaScript. The site supports 26 languages, several of which have non-Latin character sets.

The page features user-generated content, and allows for uploading of photos and videos. It also features a live Bing map, which while the product release tour was active , showed real-time locations of the tour trucks. The page also features several video playback modules, including one which shows actual tour footage of people playing with the Kinect before it was released.

The page also features a Twitter feed, showing all the latest tweets from any user that tags their tweet with #Kinect.

This post is password protected. To view it please enter your password below:

Password:

This post is password protected. To view it please enter your password below:

Password:

Live video chat by Ustream

Esurance Basketball Game

View

I just finished creating a basketball balancing game for Esurance.com. This was originally built as an expanding rich media banner that appeared on nba.com, and now lives at http://www.esurance.com/basketball.

The game is fairly simple–you move the hand around to balance the ball, and you click the mouse to increase the ball spinning. The faster the ball is spinning, the easier it is to balance the ball.

The game is built in AS3, using a few frameworks, most notably Box2D for the ball physics.

View

I was one of the developers on this tie-in site for the movie Avatar while freelancing at AKQA. The premise of the site is that you are in charge of driving a ROVR (an exploration vehicle) on the planet Pandora. While driving the ROVR, you can take pictures with an outboard camera, listen to external audio, view and log plant, animal and mineral discoveries and view a 3D terrain map of the planet surface.

The ROVR view is intentionally low-res and has a low refresh rate, which is meant to give the impression of a transmission back to the main ship. When you take a picture, it passes the coordinates of the ROVR to a server farm, which then renders a high-resolution image and places it in your Log view.

I was responsible for creating the back-end communication for logging in, sending and receiving images, and various animations around the site. To see all this in action (like taking a photo, logging your discoveries, etc), you have to create a login.

Check it out here.

View

I refactored the Flash widget on the top of the page. The widget responds to which page you are on (How It Works, Products, or History), which language your region is set to, and updates itself accordingly. The updating is done via JSON/JavaScript, and all copy/images/links/stylesheets are fed in via JSON. It dynamically resizes itself depending on the amount of content, and auto-scrolling the textfield on the right if the text is longer than a max preset value. Built in AS3/Flash Player 9.

Nike Basketball

If the page doesn’t show up, but instead asks you to choose your region, select your region and refresh the page. View

This is a site I built while freelancing at AKQA in San Francisco. It’s a promotional/experiential site for a radio show hosted by Gary Payton and Charles Barkley. It features three new Nike products–the Lebron Zoom Soldier shoe, the Kobe Dream Season shoe, and the Nike Pure Grip ball. The site has a bunch of interactive elements, including audio clips from their radio commentary, and a video section called Trash Talk Call-In which features short highlight clips from the show. It’s fully XML driven, and can be translated into a number of languages, including non-Latin languages like Korean and Chinese.

SunPower How Solar Works

View

I created this interactive swf that showcases how solar power works on a residential structure. It goes through six steps, from the sun hitting the panels on the roof, to conversion and storage, to passing along excess to the grid.

The swf is completely XML-driven, and all copy, images, ordering, timing, etc can be controlled via XML.

Symantec SPN Banner

View

I created a series of banners for the Symantec homepage. They are completely XML driven, including all copy, images, fonts, positioning and animation timing.

Symantec ROI Calculator

View

I created an online version of a ROI calculator tool that is used by the Symantec Sales Team. This calculator allows sys admins to quantify the value from deploying Command Central storage in a Data Center. The user enters in several values based on their present system, and the calculator generates three years worth of ROI data, in both a table form and a graph form.

When running the code, you will get the following error:

ReferenceError: Error #1069: Property instance1 not found on [class path] and there is no default value.

Where “instance1″ can be anything from “instance1″ to “instance99″ or higher. It’s as if the Animator class is looking for the declaration of the object instance and it’s not getting created. I thought at first that it had something to do with the Automatically declare stage instances setting, but it doesn’t make a difference if it’s checked or not.

People have logged this bug here on the Adobe Bugs database.

West Ed Muddy Road

View

I created three interactive education modules for West Ed, a non-profit educational research organization. Each module was an interactive visual demonstration aimed at teaching kids about physics and biology.

In this one, a student is presented with the scenario that they are in charge of putting out a fire that is happening high up on a ridge. They have to drive up a muddy road to get there, and are presented with various challenges along the way. The first test is to estimate which of two roads is faster to get to the top–the longer road that is smoother and can be driven faster, or the short road that is slower and muddy. Then they have to estimate the amount and direction of force necessary to slow a skidding truck of a specific weight before it hits a tree.

Each scenario has an animation, an interaction section, and a written hypothesis and feedback section.

West Ed Lake Population

View

I created three interactive education modules for West Ed, a non-profit educational research organization. Each module was an interactive visual demonstration aimed at teaching kids about physics and biology.

This one is a demonstration of how different life forms interact and affect each other’s rate of population increse/decrease. A student is given a choice of several life forms to populate a lake with, and how many of each animal to add. Based on their choices, a dynamically-generated animation happens that shows what would happen with their populations over time. If they choose too much algae, for example, the larger fish will eventually die off because the smaller fish aren’t able to eat the algae fast enough to slow it’s growth, eventually using all the oxygen in the lake.

Along the way, the student is made to write hypotheses for their scenario, then explain why they made the choices they did. Then they are shown the animations, and they are allowed to modify their choices to create a balance.

West Ed Food Web

View

I created three interactive education modules for West Ed, a non-profit educational research organization. Each module was an interactive visual demonstration aimed at teaching kids about physics and biology.

This one is a demonstration of the Food Web, or how different levels of animals feed on each other, and create a balance in the correct numbers. The student is given a selection of life forms that are coexisting in a lake, and is asked to drag arrows from each fish to the one that consumes it. The demo checks if the arrows were drawn correctly, and if they aren’t, the student is shown the incorrect arrows and has to redraw them.

Symantec MSR Challenge

View

I created a loading and playback framework for this interactive product tour for Symantec.

Symantec DL2000

View

I created the loader and playback control functionality for this animated product tour for Symantec.

Symantec Backup Exec

View

I created the navigation and loading container for this interactive animated tour of the Symantec Backup Exec line of software. It is XML driven, and features run-time generated menu navigation, custom swf playback controls, and OOP AS3 code.

SunPower Corp

View

I created these interactive charts for SunPower Corp, a major manufacturer of commercial and residential solar panels. These charts are built in Flash/AS3, and are driven by JSON data from the back end. The user enters in information about their neighborhood and present energy usage, and the site generates JSON-formatted data about the estimated savings with a solar installation. The JSON is then imported and parsed in Flash, which generates the charts.

Go to http://us.sunpowercorp.com/residential/, and enter in your address and zip code in the green box to see the charts.

StickAndFind.com

View

Page flip image gallery piece I created for stickandfind.com. It is driven by XML, written in OO AS3.

Sonoa Systems

View

Flash animation for the homepage of Sonoa Systems.

MotorStorm Pacific Rift

View

I worked on a team at Organic that created the site for the Sony Playstation game MotorStorm® Pacific Rift. This site was built with the Gaia Flash Framework, and utilizes features like SWFAddress deep linking, custom page transitions and flows, and a fairly clean MVC code pattern. Check it out here.

Cafe Press Ungiftables

View

This is a mini site I created for the site Cafe Press. The site was for the holiday season in 2008, and featured streaming interactive video from a Flash Media Server. The user was presented with several hard-to-gift personalities, and when a user chooses one that best fits the person they are trying to find a gift for, that personality would play back several videos based on input from the user. While a user made choices about their character, they were presented with possible gifts that were pulled from the Cafe Press database.

The site was coded in AS3, and features a modified Model/View design pattern, as well as custom video playback code, and a few custom-built components.

mealstogether.com

This is a site I helped create for a combined-targeted campaign called Meals Together. The ideas of the site is to provide a series of ways a family can interact around the house, and help make meal times more fun and family-oriented.

This site has been taken down, so there isn’t a live link.

HeyNiceGarden.com

View

This site was developed for Landscape Architect Heather Reid. It is a full-Flash site that utilizes a CMS back end, SWFAddress for deep linking, the GAIA Flash Framework, and is written in AS3/FlashPlayer 9.

http://www.heynicegarden.com

deviate-ny.com

View

I programmed this site for Art Director Haena Kang. It’s an AS3, Flash Player 9 site that has a bunch of cool features. It’s a full Flash site that has SWFAddress integration for URL deep linking, Google Analytics tracking for all page views and interactions, and a CMS back-end based on the SlideShowPro project.

Clorox.com

View

This is an animation I created for the Clorox.com homepage. It is completely driven by PHP, including the loading and animating background images, loading in the four squares and associated content, and loading the weekly tip.

Cafe Press Valentines Banner

View

This is a banner I created for Cafe Press. The goal was to create a banner that connected to the Cafe Press back end to monitor what products the shoppers were buying on Valentine’s Day. It parses a custom XML feed that rewrites itself with data tagged as either pro-Valentine’s or anti-Valentine’s.

Cafe press Homepage

View

This is a slideshow shell that I created for Cafe Press to load and show several pieces of rotating content on their homepage. It’s fully customizable via XML, written in OOP AS3.

Genevieve Stevens Photography

View

Homepage for wedding photographer Genevieve Stevens. It features a CMS back end from SlideShowPro, which allows Genevieve and others to update all content on the site without even touching a swf. It also features deep linking via SWFAddress so Genevieve can direct clients straight to certain sections.

glad.com

View

Flash content for Glad.com

Then I found Box2D for Flash, which is a port of the same library for C++. Although it doesn’t have native support for 3D, it does have the best collision detection of the bunch, as well as the fastest response times (which I’m sure has a lot to do with the fact that it’s only calculating 2d transformations).

So here is my first example of what combining the Away3d library with the Box2d library. This demo itself is a port from the same example made by Billy Lamberta here, except for the fact that he used Papervision and I used Away3d.

You can pick up and throw the blocks with your mouse, and they will collide with the “walls” of the swf as well as the other blocks.

Edit: You can download the source code here. This is meant to compile in Flex Builder, but should work in the Flash IDE if you add the Base.as class as the Document Class in a new .fla.

I am building a site right now that requires a simple way for the site owner to add images to their Projects section. I usually use SlideShowPro for this, but since they have only released an AS 2.0 version, and this site is built in AS 3.0, it’s not an option.

I was trying to think up a simple way to allow a not very tech-savvy site owner a very simple way to add photos to their projects section without having to edit XML, log in to their FTP server, and all that business. I recalled that Flickr has an API, and that Adobe had an AS 3.0 wrapper library to handle interfacing with the Flickr API called the AS3FlickrLib.

So I downloaded the FlickrLib and started to dig in. One major problem–there is only one example file, and it’s an MXML file. Not only that, it’s an example for creating an authenticated application that has full permissions to read/write data on your Flickr account. This is way too much for what I was trying to do. All I wanted was a simple example on how to grab photos from a person’s public photo stream! I looked all over the place for an example, but there was none.

Finally I dug in to the Flickr documentation and created a very simple thumbnail image loader on my own. The code is ugly and not optimized by any means, but I only spent a few minutes on it.

You can download the source files here, and see an example here. To make it work, you will need your own Flickr API Key, Tweener, and the AS3FlickrLib.