Video is the word. It is now used every capacity on the net. The idea of using video with animation is not new. Some would swear by using After Effects solely and not consider building flash timeline animation with video. In some case, you use what you know. And at The Morphic Group, we know Flash and Actionscript.
We were asked to build a presentation that featured video of a person talking about the client’s product while presenting statistic and data in an exciting visual way. We decided to do this presentation with Flash Timeline animation, Actionscript, FLV video files and some luck. The idea was to get a production house to produce video excerpts with alpha layers. A script was conceived and the video assets were delivered within a few weeks to a month (give or take the corrections and post-production snafus). While we were waiting for the video to arrive, I built the shell application that would house the video sections (SWF files with external video). Each section would contain the various video takes in the order of the production script. You never know how a script like this will play until you actually build the different sections. This was definitely the case for this project.
For me…. The developer… I wanted to control everything to the nth degree. The shell loads all of the video sections (swfs), animates the transition moving from one section to another via script, and has a navigation link bar with a drop down menu, all the things we do best in the programming structured discipline. But for the video sections themselves, it is a different story. I needed to consider the best environment for the animator/designer to work freely, to give them enough space for their animations and somehow gel the programming and video together.
That is where cue points come in (and save the day). The designer/animator created a list of titles for the animation in order of the video script. We developed a system where the cue point names would be the frame titles for the main movie clip; which would house the animations. I embedded cue points into the video to then play animation content at different instances of the presentation. This planning and collaborating was done well before any flash production started.
Example event handler for the cue points from the FLVPlayback (videoPlayer)
….
videoPlayer.addEventListener("cuePoint", onCuePointHandler);
….
function onCuePointHandler(event:MetadataEvent){
var cuePointName:String = event.info.name;
mainAnimation.gotoAndStop(cuePointName);
}
This is not a perfect system by any means. Most developer would poo poo the notion of using FLVPlayback, instead creating a video player class and going the route of a fully Actionscript solution. But I needed to keep in mind that the animator/designer would be using the timeline as his tool. We needed to see everything on the timeline. Animators/designers who work with the timeline seem to come up with amazing yet manageable animations that could never be created via script. Besides, it is a visual medium after all.
After creating one video section, we began to developer an organic workflow with the other sections. I built the FLAs with the cue point embedded video and code for referencing frame sections (named by the animation names). The designer/Animator added animations within the empty frame sections that are called based on the cue points fired. We had a system and we stuck to it throughout the project. The results were easy to see. The process of removing and moving parts that did not work was simple.
It is true that nothing is ever written in stone when you create a presentation like this. Here is an example of this fact. When we tested pieces of the presentation on the web, we noticed a big problem. The video did not always synch up with animation. Keep in mind that most of the animations consisted of movie clips embedded within movie clips. The solution was to create additional cue points, directly fire (or play) beginning/ending animations when needed and remove unnecessary frames. This improved the performance greatly and solved the lag problem on the web.
I will be honest with you. This approach is a bit wacky. In fact, I would revise the process if another projects like this comes up again. It got the job done and it did not break the original plan and system. As long as you keep things consistent and have a plan, you will always find a way out of any jam.
