Option8 LLC: Flash programming and animation

Client: The Freelon Group, architectural firm

Contribution: Interface programming and animation, database/Flash integration, XML data structures

Agency: Capstrat

Database Programmer: Scott Reston

The story: While working at Capstrat, together with a designer and programmer, we created a dynamic Website for RTP architects, the Freelon Group. The client's goals were to be able to show off their work in a clean, elegant way, while utilizing the advanced capabilities of a Flash-based site, including animated transitions, dynamic loading of images, and customized interface elements. Atop all of this, they wanted to be able to update the site themselves, adding news items, employees, projects and images with a minimum of fuss, and without having to know Flash to do it.

The solution was to incorporate an Access database back end, programmed in Cold Fusion to generate XML-formatted data, which the Flash front-end parsed to populate the interface. I worked closely with the programmer to create the XML structures that were necessary to fill in all the content types necessary for the design. In turn, I worked with the designer to round out the interface with animated transitions that fit with the spirit of the design and to work out how the interface elements from his vision would actually function.

In the end, the site is a very successful merger of design and programming, which is one of the great strengths of Flash.

Note: The current Freelon site has been reprogrammed, and no longer uses Flash. The link below will take you to a screenshots of the site, circa December, 2006. Links to view a working demo are available upon request.

See it: The Freelon Website

Unfortunately, as a Flash-only site, Freelon.com was not accessible or searchable. To see how our methodology evolved to create more accessible Flash sites, see Stewart Engineering ››

Client: Stewart structural, civil and transportation engineering firm

Contribution: Interface programming and animation, database/Flash integration, XML data structures

Agency: Capstrat

Designer: Scott Buzik

Database Programmer: John Romano

The Story: In order to create a unique and dynamic Website to display their portfolio of projects and introduce people to thir staff, Stewart wanted a site built in Flash. In addition to the kinds of dynamic and interactive elements that only a Flash site can provide, a top priority for them was to have a site that could be found in Google and other search engines. This posed a challenge, as Flash-based sited are historically poor performers in the search engines.

The solution, much like the Freelon site, involved separating the content from the design. The content is built in a PHP-driven SQL database on the server, which allows the client or site maintainer to quickly and easily add or modify the site's contents, without having to touch the Flash front-end. This content is then pulled from the database with a series of PHP queries that populate either the Flash site or a text-only, search-engine-friendly version of the site. In addition, we implemented a method of "contexts" within the site, so that each discreet section or "page" can be bookmarked or navigated using the browser's back and forward buttons, another historic drawback of monolithic Flash Websites.

The dynamic nature of the content also posed a few challenges to me in implementing the designer's ideas, specifically in building a "Ken Burns" style slideshow of project images dynamically. In the end, though, the result is an eye-catching way to show off Stewart's extensive portfolio.

See it: The Stewart Website

Awards: Web Marketing Association's WebAward

Client: Capstrat

The Story: Over Memorial Day weekend, 2005, I installed the first Post-It mosaic of Elvis Presley in a conference room at Capstrat. The idea came from a brainstorming session where the idea was proposed that we cover the wall with Post-It notes, so that anyone in a meeting could pull a note off the wall if they needed something to write on. My idea was to use the notes as pixels or tiles and create an image from them. Between the two of us, Todd Coats and I decided that we should make the image a portrait of Elvis. The image was strong enough to garner attention from the local papers and television stations, and pulled in blog posts and links from all over the world, especially after the Elvis Week promo went online, during the worldwide celebration of the anniversary of Elvis' death.

After Elvis had been on the wall for over a year, we decided it was time to replace the image with a new one. After some discussion, we decided that an appropriate replacement was the image of Albert Einstein. But how do you make a logical transition from Elvis to Einstein? We decided that we ought to play a game of "Six Degrees" but using Elvis and Einstein instead of Kevin Bacon. I researched the lives of both men, as well as those that connected to them, and found several connections. Plotting these out on a grid, I built a matrix of connections. These were built into an interactive game, the prize at the end of which was a link to download the video of me and six friends and coworkers taking down Elvis and putting up Einstein.

The resulting press and attention spiked again, resulting in an appearance on the Late Show with David Letterman, where Todd and I built a mosaic portrait of stage manager Biff Henderson in about an hour.

See it:

Client: Capstrat

The Story: Staff meetings are boring things, full of PowerPoint slides and pie charts. To spice up the end-of-year meeting at Capstrat, we made an effort to break the tension and inject a little life into each one. Each year we tried to put something fun in the breaks between presentations. In 2003, these took the form of animated introductions, portraying the speaker — a member of the management — singing an appropriate showtune. The animation is rather simple, consisting of only a few frames of each face, strung together to synchronize lip movements to the music, but the result still cracks me up. The hardest thing about doing the animations was keeping them a secret. Each time I completed one and watched it through, everyone in my part of the office wanted to know what I was laughing at.

See it:

Client: Biomanufacturing Training and Education Center

Agency: Capstrat

Designer: Amme Fleming

The Story: To coincide with the completion of their Website, BTEC needed a quick overview of their mission statement to send out to students and other interested parties. The simple interface is based on the Website design, and along with the imagery, leads visitors directly into the Website proper. The straightforward approach of my animation creates a fairly simple presentation, but one with more style and impact than a standard slideshow or PowerPoint.

See it: BTEC intro

Client: Red Hat

Contribution: Storyboards, animation.

Designer (logo): Henderson Bromstead Art

The Story: This animation was produced for an internal meeting announcing the new Red Hat Exchange site, a program of software partners and open source vendors to reach out, evangelize and support open source software. The logo itself elicits a speech bubble, referring to the conversations and community that the RHX site facilitates. The animation expands on the conversation, creating an iconography familiar to online chat and web forums.

See it: RHX logo introduction

Client: Kenan-Flagler Business School at UNC-CH

Contribution: Banner animation, file optimization, animated GIF alternatives.

Agency: Addressable Media

Designer: Tim McCracken

The Story: This series of banner ads and associated landing page were created to promote the Women In Business seminar titled "Transitioning to Leadership." The concept revolves around "opening doors" and advancing through one's career to a position of mentorship and leadership.

See it: Seminar announcement banner

Client: SunCom Wireless

Designer: Marc Harkness

The Story: This animated invitation was sent out as a teaser to attendees of the SunCom Wireless annual managers' meeting. The theme of the meeting, "Commit to the Quest" inspired the graphics, signage and presentations for the weekend, and the email invitation was the first introduction that the attendees to this theme.

See it: SunCom email invitation

Client: Summus

Contribution: Interface design, programming and animation. Banner animation, file optimization, animated GIF alternatives.

Agency: Capstrat

Designer (banners): Matthew Muñoz

The Story: Summus (now Oasys Mobile) creates games and applications for mobile phones. With a diverse offering, from a Phil Hellmuth branded Texas hold-em game to Sports Illustrated swimsuit model wallpaper, to mobile versions of classic Mattel games, each property had its own set of challenges and its own unique audience. They needed some way of showing off how the applications work to entice people to download or subscribe to them, so I created this series of Flash demos. Utilizing screenshots from a phone emulator running the actual application, some basic animation and copy, each demo gives a potential buyer a better idea of what they're getting than static screenshots and marketing copy alone.

In addition, we created several series of banner ads to promote the games and applications on gaming and sports sites, my favorite of which (for obvious reasons) was the SI swimsuit model wallpaper.

See it:

Client: The Asphalt Education Partnership

Contribution: Interface design, programming and animation.

Agency: Capstrat

The Story: Part of the goal of BeyondRoads.com is to educate people and communities on the benefits of asphalt, and on the merits of the asphalt industry. To this end, it was only fitting to allow people a peek inside a virtual asphalt plant. Given static illustrations of a typical plant, and a great deal of information about how the various parts worked together, I set out to animate the process of creating asphalt, and learned a great deal along the way.

I also created an asphalt trivia quiz for the site.

See it: Virtual asphalt plant tour

Client: The Morehead Planetarium and Science Center

Contribution: Storyboards, design, programming and animation.

Agency: Capstrat

The Story: Every few months, the Morehead Planetarium Website features a film, program or event on its homepage. To promote these events, I created a series of Flash animations, intended to catch the eye of Website visitors and lead them into the site for more information.

With quick turnaround and few restrictions except on file size — these would be appearing on the homepage, after all, and we didn't want it to take forever to download — these are some of my favorite projects to date. While trying to have fun with the animation itself, I took pains to be true to the science content of the promo, consulting, for instance, with one of the paleontologists at the science center on which dinosaurs to feature in the "Extinction" promo.

See it:

Client: Deloitte Consulting

Contribution: Storyboards, design, programming and animation.

Agency: Capstrat

Sound: Todd Coats

The Story: This animated "elevator speech" was sent out to Deloitte employees as an encapsulated primer on the issue of the impending "talent crisis" in this country. As baby boomers retire and take their knowledge and skills with them, they create a labor shortage in a number of industries, which is where Deloitte has positioned themselves to help.

The emailed animation was meant to illustrate the Deloitte approach to solving the talent crisis, "develop, deploy, connect" with a greater emphasis on "connect."

See it: Deloitte "Talent Crisis" Animation

Client: Environmental Protection Agency / Sonoma Technology

Contribution: Interface programming and animation, database and XML integration.

Agency: Capstrat

Designer: Robin Vuchnich

The Story: In order to ilustrate the effects of population, weather and industry on air quality in a way that people can easily understand, the EPA created Smog City. This virtual city is based on a computer model that mapped out the effects of several variables on the air quality over a fictional city. The original Smog City was programmed in Java in 1999. Our task was to create an updated version in Flash, enabling more interaction and better accessibility.

With the virtual city model, created by Sonoma Technology, we created an updated interface with elements accessible via mouse and keyboard control, as well as a system that allows the EPA to update the model data and text content without delving into the Flash itself.

See it in action: Smog City V2 website

Client: Red Hat

Contribution: Interface programming and animation, XML data structures.

Agency: Capstrat

Designer: Matthew Muñoz

Director/Producer/Editor: Carson Mataxis

The Story: In order to keep up with the frequency with which Red Hat needed new webcast content for their Website and other online publications, I created a system by which new content could be added without any complicated Flash scripting.

Previous webcast interfaces, like those for Progress Energy, required at least some Flash work to update them for each new revision. With Red Hat needing more frequently changing content, the Flash was going to be a bottleneck. So I created a shell in Flash that takes a text file, which can be edited by anyone with a text editor, the video segments, which can come from pretty much any vendor that can edit the footage, and a simple slideshow document. The pieces are pulled together by the Flash shell, and presented in a consistent interface, one that is flexible enough to contain a few dozen video segments and their associated slides. The whole process can be completed, given the video source material, in just a few hours, and without any need to involve a Flash programmer, making my life just a little easier.

See it: a few of these webcasts in action at redhat.com

Client: Progress Energy

Contribution: Interface programming and animation, XML data structures.

Agency: Capstrat

Director/Producer/Editor: Carson Mataxis

The Story: To coincide with the company's quarterly corporate earnings reports to investors, Progress Energy produces a webcast for its employees. Over several iterations, the design and approach has evolved to what you see here. To link the talking heads with the numbers they're talking about, several of the videos trigger animated charts to better illustrate their financial message. The video segments were typically shot in the morning of one day, edited, pulled into the interface, and then released to the Progress intranet the next day. Such a tight schedule meant that with each iteration, the video editor and I would try and find new ways to work in parallel and increase efficiency.

As a result, we learned a great deal about automating and simplifying the process of creating a video interface in Flash. Many of these lessons were applied and further evolved in the webcasts we produced for Red Hat.

As this presentation includes investor information, I am unable to show it in its entirety here.

See it: screenshots of the Progress Energy Webcast for Employees

Client: SJI Associates

Designer, Illustrator: Adrienne Pope

The Story: SJI has created a series of promotional giveaways, dubbed "Sugar Cubes" - boxes filled with seasonal candies sent out to clients and partners, each featuring a different original candy-themed character. For Valentine's Day 2007, they wanted to add an online component to their Sugar Cube mailing. Based on their concept and designs, we built a fun interface for a memory game featuring all the candy characters.

Some early comments: "I've just got to say, I THINK IT'S FABULOUS!"

See it: Play the game here.

The Story: Like most of the world, I have become addicted to the logic puzzle sudoku. I like that each game has a unique solution (or should) and that one small, hard-fought logical leap can bring the whole board into focus. That, and I don't have the patience or vocabulary for crossword puzzles.

Being a logical thinker and an ActionScript developer, I quickly started working out in my head how to program the steps to solve any given sudoku puzzle. With a couple of strategies under my belt, I threw the first version together in a couple of days. After more than four months of off-and-on tweaks and the addition of several more complicated solving strategies, the result is a Flash-based sudoku solver that's capable of solving almost any puzzle I can solve by hand.

As with most of my personal projects, this is a work in progress, and I've been continuing to make updates as I get time and inspiration.

See it: Solve your sudoku here.