FLASH TUTORIAL  

Antomy of a Flash Animation
by Midnite

Being as Flash is primarily designed for vector based animation, using raster-based images (pictures, etc.) created several problems which have to be dealt with. With some careful planning and knowledge of how flash handles these files, we can better prepare for doing an animation in flash based on poser (or any other raster-based output) that we choose.

When doing Flash animations from Raster-based renders, there are several areas that have to first be carefully planned and considered.

  • 1) Render Prep
  • 2) Postwork Prep
  • 3) Final Output

These areas will all be discussed in separate sections, with liberal examples from actual animations. This way if you can see how a flash animation is put together, maybe it will help you discover a better way to render for flash, and hopefully help you understand what flash can and can't do.

1) Render Prep:
To make full use of the Flash environment pieces must be constructed from your render engine (i.e.Bryce, Poser, 3DMax, whatever) with Alpha channels and hopefully as separate sections. that way If you'd like an arm or a leg to move, it's usually no problem to cut and paste it (after the fact) to move slightly as long as it's a sparate piece with no background. I generally take the full pictures into Photoshop, put them all in one big psd file and move things around accordingly. If everything is right, when I click on a picture's alpha channel it should select the main character and not the background, so I should be able to sparate it easily. [Note: ...more on this in the next section.]

[*Important Note - Just so you know...rendering to a tiff or psd file will save your alpha channel, saving it to a jpeg afterwards destroys it! - You have to use the original render - not a jpeg copy!]

Ok - So You've got your picture all set up as a master shot. This is the one that we will use as a guide layer for the rest of the pictures. Flash provides this function to line up all the pieces to, yet won't render {publish) that layer. If you have a background shot, you can also use this as a regular (bottom) layer. Since Flash usually publishes content from the bottom up this is the first layer that the user will see. The Flash Area outlined below will be the only part I use in the Flash Animation, the rest will be sliced up in Adobe Image-ready for use as the basic HTML page that hoses the flash section. If done correctly it will look like one solid picture to the user.

Roll your mouse over the picture for an example of what the page will look like.

Final Picture and Flash Area
I-comix Arcade renders by Skyler Mystwood

This "guide layer" gives you an idea where everything is supposed to go, and what gets animated. In this particular instance the robots will be animated. Justina's arms and the robot arms will also be animated as well as their joysticks. This will be like one of those old "Rock'em Sock 'em Robots" games. OK - Probably before your time, let's just say the robots will appear to fight. In the render prep for this file, everything that you'd like to have move in flash should be an individual picture or be able to be separated, and not like Siamese twins! Just hide the things that get in the way - like the foreground trans square, the table, the two figures, and just render the robots. Turn to the next page to see what I mean..
  Next Page