< Back to Portfolio

Although we generally didn’t charge our clients for it, I almost always designed a quick splash animation for each custom training course. It was an easy way to establish art direction and mood of a course, and in the often very dry world of corporate training, it was a special treat for the client to review and show off to their stakeholders.

Here’s a step-by-step look at my design process for a brief introduction animation to a travel/hospitality training course. Click the image below to see the final animation.

pegasus_art

First Steps

My idea was to cut an audio clip of a jet landing on a runway, and have the client’s logo be sort of swept up in the virtual air current. I decided that my first task would be to tie a graphic (the logo) to a sound (a low-flying jet). If I was a logo floating just under the belly of a landing jet, what would happen? Well, the intense sound would probably make me shake, right? So, I re-purposed some ‘jiggle’ ActionScript code I’d used in other projects to set up a prototype.

Yeah, "_root" is evil. What can I say? I got better...

Yeah, “_root” is evil. What can I say? I got better…

pegThumb01Step 1: Interactive Jiggle Prototype (swf) (Click the black boxes)

Iterations

Now that I had the base-code for my animated effect, I needed audio to proceed with animation. After choosing some stock audio clips and editing them together for a satisfying jet fly-by and landing, I started experimenting with an intensity interval on the jiggle code. To really sell the effect, the logo would need to start out perfectly stationary, then shake more and more as the jet made its approach, then settle down as the jet passed. So, Step 2 was experimenting with a script that could ramp up and down the intensity of the jiggle. I also added a background, and a very simple shadow to show the position of the off-screen jet.

pegThumb02Step 2: Ramping the effect up and down (swf)

Not bad, but I wasn’t entirely satisfied with the jiggle shake all by itself. To give the effect some more intensity, I added some clones of the logo at reduced opacity, and varied their shake intensity from the original.

pegThumb03Step 3: Adding clones for intensity (swf)

Better! But now that the shake is looking good, there’s still a big audio/visual disconnect as the jet’s shadow passes across the ground. I needed to do some timeline key-frame work to make it look like the logo really got swept up in the wake of the aircraft. I also fleshed out the background a bit, still trying to keep it extremely simple.

pegThumb04Step 4: Timeline animation (swf)

A New Direction

At this point, I was fairly satisfied with the overall effect, so I began showing it around the office and asking for feedback. The general consensus was that the jet shadow wasn’t really working. Maybe a little too abstract. And, as is so common in the e-learning world, it probably needed more flashy in-your-face things going on.
So, the plan: I’d extend one element of the client’s logo, the arrow, as a literal representation of the jet flying across the screen. More key-frame work!

pegThumb05Step 5: Moar Flashy! (swf)

The unexpected bonus in this approach for me, was that having the ‘jet’ literally pass through the logo really helped sell the effect on the logo. Obvious is good, right? This version was good enough to submit to the client for approval.

Crossing the Finish Line

Two major elements were changed to achieve the final animation. First, my colleagues really wanted me to somehow incorporate a completely different idea I had much earlier on. Before I had come up with the jet idea, I was playing with a simple but fun play with the logo elements. It was pretty cool, but just never went anywhere:
pegThumb06Arrow animation (swf)

Second, the client wanted a livelier background with brighter colors. So, after one background illustration and a little more key-frame work, I landed on the final animation:

Final Version (swf)