FLASH MAKES IT easy to add video into your project. The best part is that video can be treated like an object in Flash, allowing you to layer it, add ActionScript and even animate it. Depending on your project needs, video can be imported into the Flash timeline or kept external of the SWF and progressively downloaded.
Due to the ubiquity of the Flash Player, the client was confident integrating Flash video into their website while providing their audience with an engaging online experience.
1 Let me explain why Flash video was used for this project in the first place. The client’s logo incorporates a photograph of a rubber band. The concept is to animate the rubber band flipping and catching the “Cone” logo in a rubber band-like way. It is rare that I ever need to leave the Flash toolset, but in this situation, Flash simply doesn’t offer the essential tools to manipulate a photograph in such a way. I turned to Anime Studio Pro (e-frontier.com) because of it’s Bones and Image Warp features – perfect for this style of animation. I was able to manipulate the rubber band image over time by assigning an IK (Inverse Kinematics) chain to it. Anime Studio also supports native motion blur effects as seen above. The animation was then exported to QuickTime.
2 File size is always a concern when dealing with video files. Since this is only a site introduction, loading the animation quickly is priority. The QuickTime file is over 6 megabytes, an unacceptable size given it’s only 7 seconds long. Launch the Flash Video Encoder and add your video file. Then click on Settings to launch the Flash Video Encoding Settings window.
3 In the Encoding Profiles tab, select an encoding profile that best suits your image quality, file size requirements and Flash Player version.
4 Click on the Video tab and select either On2 VP6 or Sorenson Spark. If your video includes an alpha channel that you want included in the FLV, you must encode with the On2 VP6 codec.
5 The Video Encoder allows you to adjust Audio (if any), add Cue Points and Crop and Resize the video before exporting. Try cropping the video as much as possible to keep the file size down. The FLV progressively downloads, which simulates streaming. Depending on its size, playback starts within seconds of loading.
6 Open Flash and go to Window > Components to open the Components panel and drag the FLVPlayback component to the stage. In the Component Inspector you can specify the path to your FLV file.
7 The intro animation is designed to fit in seamlessly with the rest of the page. Therefore the controller skin is removed completely using the Component Inspector.
8 With the FLV Component on the stage, you can position it based on any other design elements you wish to include. Here a simple graphic was added on a layer above to hide the top edge of the FLV. Content was also added with simple text fields. When compiled, the FLVPlayback component will load and play the external FLV during runtime in the Flash Player. You can control when the FLV starts by moving the component to a later or earlier frame in the timeline.
9 Once your Flash document is published to the Web, visitors to the website are introduced with a Flash Video animation that they, without any inside information, assume is an animation made entirely with Flash. There is no indication that an FLV is being progressively downloaded, especially when combined with actual vector graphics. The resulting file size of the FLV is under 200kb, very acceptable for web animation.
Taking advantage of the FLV fomat can be very useful if you have very long animations that are very processor intensive as when played back in the Flash Player. Export your movie to the FLV format and progressively download it instead.
Hot Tip
Experiment by exporting several various encoding settings to achieve the best ratio between file size and video quality based on your target audience.
