Clearly Trained's eLearning Blog

Timing Video and Animation in Adobe Flash

We just wrapped up a rather large project for an unnamed client involving about 16 one to four minute videos of the client speaking about a process. Our task was to import and compress the videos on an alpha channel, then time them to animated reveals, drawings and bullet points over time – and it needed to be exact.

Flash is a little tricky when it comes to this sort of thing… choose a single wrong export setting when making your .flv file and you waste three hours figuring out what went wrong (I’m talking about 3 gig video files being compressed into 4 meg .flvs.. it takes a while!).  For instance, if you thought importing the video into the .FLA timeline sounded like a good idea, it may be but only if the file was less than 25 seconds long. After that the audio track either speeds up or slows down and the visuals of not only your flash animation, but the person talking in the video itself become out of sync.

So understanding the above, and that we should use .FLV (external flash movie files) and import them into our eLearning template, we thought we had it figured out. The odd thing was, was that the audio and video might be in sync, but the timing of the main timeline visuals was completely random. We’d test the file once, and everything (bullets, animations) would time up perfectly. Test it again, and suddenly only the first bullet was well timed, the rest was completely off, sometimes by as much as 5 seconds. It was random, things like deleting a single frame would throw everything off.. even clicking a key frame would shift everything around.. it was very buggy looking.

The way I see it, the video is on an independant timeline, and once I thought of it that way I assumed that the video was playing as fast as it could, and the flash timeline was playing as fast as it could, and every once in a while they’d sync up, which wasn’t good enough.

The solution was to glue the video to the timeline, while still keeping the .flv files external. The way we went about doing this was importing a silent 1 second audio clip, adding a layer, then set it to loop, and stream for the entirety of the video file and main timeline.

Just like the difference between event and stream sounds, the streaming sound basically embeds everything on the flash timeline down into a permanent visual/audio experience. It makes the file sizes a little larger, and degrades the quality just a bit, but in the end you get a flawless timing of and external video file and an internal timeline animation.

About

The Clearly Trained eLearning Blog covers the wide variety of experiences Flash designer Eric Bort has had in the eLearning industry, as well as new project overviews and random inspirations.

For a little more about Clearly Trained click here.

Categories

  • Awards
  • eLearning
  • Flash Development
  • Inspiration
  • New Projects
  • Small Business
  • Archives

  • February 2010
  • January 2010
  • September 2009
  • August 2009
  • July 2009
  • June 2009
  • May 2009
  • March 2009
  • February 2009

  • Flash Forward SanFran Speaker Flash Forward SanFran Judge