Friday, August 21, 2009

Motion Graphics Process

I have been excited about the completion of my first of what I hope to be many Motion Graphics Video Loops for PR Newswire...

This project came out really well, and was a blast to do.

But this type of project is not yet my "Bread and Butter"
So I wanted to outline the process and steps that went into making this project a successful one, while the project is still fresh in my mind.

hoping we can pick up where we have left off when the next series becomes active and or a similar project is engaged by another client.

First Step is to develop the script.

This step should be left to the professionals.

A professional copy writer should be able to interview your key staff and develop a powerful script that will cover all aspects the piece needs.

I do know that PR newswire uses a script when doing their product demos, and this was a jumping off point for this script, they also gathers a list of frequently asked questions from past presentations to be sure to include all hot topics.

The next step after the script was approved is to get a voice over completed.

There are many ways to approach this, one you can do it in house. just be sure to take many takes and edit the voice over to not have any unnecessary pauses or hick ups in the delivery.

An approach I would prefer to use is to hire a third party vendor
They have a wide variety of talent and I like the ease of use.

Once the voice over script is completed and approved then it is time for us ( to do our magic!

The magic starts with the music and pace of the project...
An Idea to putting original music with musicians you know is an awesome idea to try

or a quicker easier way could be to use getty.

Once we have a piece of music we would like to use we add it to an after effects timeline where we tweak the sound levels to make sure the music sets the tone without over crowding the voice over.

Then its time to start adding the visual tone.

One of the most challenging aspects of designing a motion graphics piece is to get the "timing right" all the effects in the world and cool transitions don't mean a thing if the timing is off...

One of the best ways I like to set the timing and tone of a motion graphics piece is to take snippets of inspiration... and edit these snippets to the voice over to see if the tone and timing is right...

A great collection of where you can see some great Motion Graphics Inspiration can be found at

Once you have the audio and inspiration in place

Its time to get to work.

Here are the elements I used for the PR piece that I believe could work for basically any piece

1) 3d in After effects
After effects has added a new property to its timeline, and that is 3d,

Although you are changing the properties of a 2d image, these effects can be used to really ad a great dimension to the project.

2) Reveal the Design
This is taking a well designed "frame" and letting the elements of the frame appear at different times. This is not the same as animating each piece into focus, but rather breaking up a static image and revealing these elements at different times.

3) Next is the animating each element.
Now this is one of the most time consuming parts of the project but well worth the effort.
You take a well designed frame, and you think of how these elements can be animated into focus through non traditional ways, through 3 spinning in, through a completely different shape, through breaking up an element into multiple layers then animating each layer, the ideas are limitless, and can be the fun-nest part of the project, just know you are going to be working on these elements a very long time, probably a good 12 hours or so per segment, so watch the budget!

4) Reveal Elements,
If you have simple screen shots, product shots or imagery to hep get a point across, think of interesting ways these elements can be presented.
Ie: a hole in the canvas that the piece come flowing out of, again the ideas can be limitless, but the point here is to go beyond a simple fade in trasition

5) Focus attention to,
This is where you have a screen shot or a layout and you want to put the viewers attention to a specific area, its a simple formula that seems to do the job. Simple screen capture that frame blur it out then scale the section to blow up and add a drop shadow, by doing this effect in after effect you can actually animate how each of these effects come in, which looks really cool, my only suggestion is that when you scale the piece you should only scale about 50-60%, anything bigger than that looks really obnoxious. But by doing this it may be hard for the viewer to zoom in so adding a text call out can help drive the point home.

6) Maya Scale, spin effects.
This is the fun part and yet again a very time consuming part.
Maya is great but it has a steep learning curve, and has a ton of variables that make you project look bad. It also needs the right timing which you should be able to track by viewing after effects timeline by frames instead of seconds. Then you have the actual material, and texture, then you have the lighting and the rendering, not that a lot of times rendering out animations can be very time consuming, you could spend hours doing and animation to then only wait hours before seeing, and this process continues throughout while tweaking...

I highly recommend for their tutorial on maya, the guy gives a great foundation on how to use maya...

Basically this step or element of style, is to take a scene and do simple Maya animations to create a wow, effect.

Things like rotating the abject or scaling the elements. Keeping it simple with no or little camera animations.

Not you will have to use the image plain to match up the 2d graphics from maya to the 3d environment, Take your time on matching this up.

7) Maya Write in,
This is the more complex aspect of maya, and the most time consuming, But probably the highest form of "wow" factor.

Maya has the ability to animate a shape in. through using a "partial" Nurb Extrude, loft, or planar effect added to a curve. (unfortunately this has taken me years to figure out and I can only wish you luck on learning how to do this, or at least until I get the chance to put together a tutorial video!)

The biggest challenge to this process, is the camera movement, I have discoverd that the best way is to start with the aim, up camera, this allows you to control where the carea is aiming and can control the tilt of the top of the camera.

You can try and attach the camera or the aim object to a path and control that path t create a smooth animation.

You could also animate the camera's movement manually by looking through it as you move around, I believe this was the approach I decided to go with for the PR newswire piece, its kinda hard to remember because this was definitely one the 14 hour work days.

Then when it comes time for the extruded shape, draw the curves with the cv tool (its the smoothest and you can control it with the vortex's)

Draw the shape as you animate through the camera view, adding points, deleting points, and inserting knots where compositionally you see fit. Tweak the curves until you are happey before extruding the shape, its easier to manage this way.

No matter how you look at it this will be a very time consuming part and will take the most effort in tweaking.

But the final result will make you proud...


Once the animation is worked out and you are ready for the clients to either love it or hate it

render out the entire moving then take each section piece by piece, if something doesn't "feel" right work on that one section until it does then move in the next.

once you have the final piece use sorensor squeeze to render out a f8_768K flv file.

Then go directly to dreamweaver to import the flv media, there you will be able to choose the type of playback skin you'd like and save the files out.

To present the movie you can simple have it load as soon as the url loads.

Or you can take the extra step and design an awesome splash page that invites the user to "launch video"

This is a cool script I use to open a window to show the piece.

Thats all for now.

Hope it helps not only you but my future me as well

No comments:

Post a Comment