DVM (direct video manipulation) in Flash

Posted on September 21, 2008

0


When looking at the real stuff, the DVM we applied in the new Lancer Sportback minisite is more a trick than something else.

Real DVM is about moving objects around in a movie, like a car driving away or a person walking across the street. The DVM engine analyzes movement of shapes in the video and then allows you to use that data to “grab an object” and “move it around”. The results are quite OK

FLV on stage, in the timeline

The FLV (video file) is placed on stage, in a MovieClip and on a timeline. This enables you to move to a specific frame.

The engine

The Engine I build is made to be re-used without any coding required. Boiling down “DVM” in Flash you have:

  1. A specific area in which the object moves
  2. A specific direction to move in (always linear to keep it simple)
  3. Acceleration and decelleration of the object to move (in the case of the Lancer site, the backside opens slowly, accillerates, slows down again when it reaches its end-position)
  4. The interaction model: do you have to click on an specific spot to move the object, or IS the movie itself the draggable area?

I made 3 visual tools to aide this:

  1. The dragArea-start and dragArea-stop pointers, with an arrow, a line and a vertical line to visualize direction and the border / stopper
  2. The “Movement To Pixels” object that consists of a movieclip with several “lines” within which each represent the end of a gap of 20 frames on the timeline. When following the movement of an object (like a door) in the movieclip, you simply put each next “line” where that object in the movie is 20 frames further on the timeline. By referring the X/Y position of the mouse to the position between each two lines, you can then calculate the frame the movie should be based on the position of the mouse.
  3. The dragger you can either place on stage, or leave away. By leaving it away, each change due to the drag action by the user will be relative to the previous one.
Advertisements
Posted in: Uncategorized