Ultrashock Tutorials > After Effects > After Effects 4.1 to Flash5  
 
by: Vitaly Unclickable and Joseph Calderon, EgoMedia


 
 After Effects 4.1 to Flash5 (1/2)
 

 

QuickTime movies can be used to combine video with flash, but that still gets a bit cumbersome. File sizes are typically large and visitors may not have the QuickTime plug-in. The alternative method is to incorporate animation by importing a sequence of frames or video stills. Many prefer this to just using video since it has a more vector/cartoonish feel to it that goes better with the feel of Flash itself. A good example of this is the EgoMedia website itself. Many people have asked us how we did this so we thought we'd share the process with the community. It is a really cool effect and we think others should learn how to do it as well.

The process consists of two parts:

  • Using After Effects (After Footage Video)
  • File preperation for Flash (Post After Effects)

Using After Effects (After Footage Video)

1. After shooting digital or video footage, visual assets must be converted into a Flash-friendly sequence of frames. (Although Flash allows you to place Quick Time movies in a Flash movie, the Quick Time will not link with an SWF file.) Flash supports frame-by-frame image sequences in bitmap formats. So, we can convert any video into a short sequence of still images that can be played as an animation or movie clip in Flash. Adobe After Effects is a design tool software used to edit and enhance video. After Effects is the first step in managing video file size before importing movie clips into Flash. After Effects functions much like Photoshop, but for video clips. It contains tools like Filters and Motion Controls to enhance video footage.

2. Diminish the video frame size, rate, and length to a file-size that Flash (and lower bandwidth or slower Internet connections can handle, i.e., 28.8, 56.6, DSL.

a. Create a new After Effects Project (.AEP). If you already an existing After Effects project then open the Time Layout window.

b. Import the movie clip while taking note of duration and frame size of the imported clip, i.e. 300x260 at 24 frames per second (fps):

File>>Import>>Footage File command (Ctrl/Command+I).

c. Create a new composition (comp): (Command+N or Ctrl+N) and conform the settings of the comp to those of the imported movie clip. If the clip's frame size is 300x260 at 30 fps then make the comp's setting 300x260 @ 24 fps.


d. Drag the movie clip from the Project window to the new comp's Time Layout window. If for some reason the Time Layout window does not appear then double-click the comp name in the Project window. By default the comp's name will be Comp 1. Once you drag the movie clip into the Time Layout window it appears as a layer in the comp.


e. Define the work area in After Effects because all extracted frames will be drawn from this work area. Keep the length of the work area short (a few seconds or less, no more than 3 or 4) because each extracted frame will increase the size of Flash movie.

f. Move the Time Marker in the Time Layout window to the desired "In" point of the comp. The "In" point is where you will begin extracting frames. Make sure your composition window is still open for a visual reference for the Time Marker. As mentioned above, if the comp window is not open double click the comp's name in the Project window to re-open it.


g. In the Time Layout window click and drag the Work Area Start tab while holding down the shift key. Drag the tab to the Time Marker's position, and the tab will snap to it.


h. Move the Time Marker to the "Out" point of composition, and shift-drag the Work Area End tab to this position.

(Now that the work area is defined in After Effects, and we're ready to render a series of frames from the comp.)

Using After Effects to Treat Video Footage before Flash

a. In order to optimize file size and convert a sequence of images (frame-by-frame) from gifs to vector based information. Depending on the complexity of the bitmap image, the efficiency of tracing can vary. This way, the traced bitmaps in Flash will be less complex and will have smaller file sizes.

b. The main question before treating video-captured images in After Effects is whether or not to treat them as a sequence of images (Animated gif) or as a sequence of Jpegs. There are many possible file options in After Effects prior to Importation. Depending on the selection the images in Flash may result in a change in the quality or integrity of the movie images.

c. When the particular .AVI file is selected it will come up as a window. From the menu, select Composition. In composition you can select Frame Size, Movie Duration, Amount of Frames, et cetera. These are all options that appear in the window once you've clicked on the your .AVI file. The name of the .AVI file will default as Comp 1. You can, of course, rename your file whichever way you wish.

d. Once you have defined your .AVI parameters and pressed OK a Timeline will appear at the bottom of the screen and a box of options to the right. Drag your file icon that represents your .AVI file from the open file menu in the top left corner of the screen and a picture of your movie should appear in the box. If the image does not fit the parameters or if After Effects resizes the image you may crop it to fit inside the work area window.

e. While the image is in Work Area window you can fashion the image whichever way you choose. You may want to apply filters like Blur, Extract, Posterize, or Solarize to the original footage in After Effects. Go to the menu, once Effects is selected its window should remain on the screen near the work area:

Effects->>Adjust >>Hue/Saturation


<Set Master Saturation level to -100> You can play with this option. Try
-50 or -60. A value of -100 will turn your image into a scale of Gray.

f. Next, Choose from the menu,

Effect->>Blur>>Gaussian Blur. Select number 1 or 2.

g. Next step:

Effect>>Adjust>>Threshold.

Adjust the Slider to whichever value you want. Using this option will finally convert your movie clip from color to black and white. This is important because when you eventually import the clip to Flash you will use the Trace Bit Map function and also add whatever solid background and foreground colors. The addition of color and tracing bit map will round out the images and animate the movie.


h. At this point you can begin rendering the movie:


Compostion->>Make Movie (Command+M or Ctrl+M).

i. In the Save Movie dialog box browse to the folder where you want to store your frames. Enter a Prefix file name like "comp" or "ultrashock" and Save the file. After Effects automatically numbers the sequence by adding _0000, _0001, _0002, _0003 . . . to the filename on the PC.

j. Click the underlined "Current Settings" text field next to "Render Settings," and adjust the frame size and rate to match the size of your Flash movie, i.e. a video clip 720x480 is halved in size by choosing "Half" in the Resolution setting.

k. Choose "Work Area Only" to select the Time Span setting. The duration of the clip is listed directly beneath this setting.

l. For the Frame rate setting, select the "Use this Frame Rate" option and type a value that won't over-replicate the frames. For a 4 second composition, 6 fsp, would yield 24 frames that are then in-turn, imported into Flash, Click OK and proceed to the next setting dialog box.

m. Click the "Lossless" text field (or whatever your default may be) next to "Output Module." In the Output Module Settings dialog box, choose BMP sequence (BitMap Sequence). If you are using non-square pixel video like Digital Video you may want to resize each frame for each still image extracted from the original clip. For a 360x240 frame size, check the Stretch option and choose "Medium, 320x240 in the drop-down menu. Select "High" for the "Stretch Quality." Click OK.

Click the underlined filename field next to the "Output To" setting of the Render Queue window. Make any preferred changes to the filename structure at this point.

n. Render the sequence of frames from After Effects by clicking the "Render" button in the Render Queue window. After Effects will then generate a series of frames ready to import into Flash.


Import the sequence into Flash as a series of keyframes with bitmaps. Flash will autoimport an entire sequence into a movie clip symbol and place them frame-by-frame on a timeline.
Import a sequence of images into a movie clip symbol instead of directly into a layer within in a scene.

File Preparation for Flash (post-After Effects)
 

 
©2001 Ultrashock.com Inc. - All rights reserved