[3D Rendering Tutorial]
Macromedia Flash's video handling explainedTom Arah shows you how to make the most of Flash’s bitmap-based animation and video capabilities.
Flash now offers dedicated video handling as well as bitmap-based animation.
Last month I looked at how Flash has developed from its vector origins to incorporate some advanced and efficient pixel handling demonstrated through the production of a full seascape built with just a couple of bitmap elements. This month I’m going to show how Flash can bring its pixels alive, first through animation and then through video.
Flash was conceived as an animation format. With its frame-based timeline it’s just a question of adding keyframes and swapping bitmaps to bring your static images to dynamic life. This simple flick-book style animation is very similar to that offered by Animated GIFs, and Flash can import these multi-image files directly even honouring the in-built timing, transparency and compression settings (you can also override the latter to effectively produce animated JPEGs). The Web is awash with free animated GIFs and, wading through the clipart horrors, I quickly found a realistic 8-frame animation of a gull flapping its wings that is just 4K in size - ideal for my sample seascape (www.gifanimations.com).
By default the GIF’s frames are imported to the main timeline but the better option is to first create a movie clip (Ctrl+F8) and import the GIF into that. You can then drag on multiple instances of the clip from the Library to fill the sky with flapping gulls. Test the movie ( Ctrl+Enter) and you’ll see that thanks to Flash’s symbol-based approach, which ensures that each embedded bitmap is stored just once and referenced as needed, the multiple gull Flash animation is still just 4K in size. Using the Free Transform tool (Q), you can then resize and rotate each instance to make each bird slightly different, again without affecting output size. By scaling the image up you can also gain a bit more impact bang for your bitmap buck.
At the moment all the gulls are flapping on the spot but, as movie clips, this is easy to sort out. By isolating each gull on its own layer and then setting up motion tweens you can reposition and resize each instance on their beginning and end keyframes to create the impression of birds both flying across and into and out of the scene. With motion guides for each layer you can also set up more realistic, and easily editable, swooping paths. And, using the Properties Inspector’s Colour setting, you can tweak the colour of each bird to give it its own identity as well as setting up colour tweens so that, for example, as the bird shrinks in size it also darkens, adding to the distancing effect.
Managing the animation through movie clip instances also opens up a whole new area of control – programmability. At the moment all of the gulls are flapping unrealistically in unison. You could try and avoid this by staggering the timeline but then each bird would suddenly appear onscreen in turn. A much better option is to set up an action in the main timeline’s first frame that randomly sets the start frame for each named instance. Another action could occasionally and temporarily pause the animation on a central keyframe to give the impression of soaring. More advanced users could control everything programmatically so that each time the animation runs, the fly-past is unique. Or set it up so that the gulls automatically begin to swarm around the end user’s cursor as it moves over the image!
Flash offers plenty of frame-by-frame animation control.
Put it all together (similar effects could just as easily be applied to the clouds and waves) and you can produce a truly dynamic and attractive stylized ( ie realistic rather than photorealistic) animation that is only slightly larger than the sum of its few original bitmap parts. That’s huge power and shows just how far Flash’s simple frame-by-frame and symbol-based approach can be taken. However all this efficiency comes from the fact that the animation is built up of bitmapped elements that are repeated and so can be re-used, and often that’s just not the case.
The obvious example is video where each frame is a one-off. Of course there’s nothing to stop you producing a Flash video yourself by manually importing each frame to its own keyframe on the timeline, but this gives Flash nothing to work with in terms of compression apart from setting an overall JPEG quality for the movie as a whole. With multiple full-size images appearing onscreen every second the result is a massive explosion in file size that just isn’t workable. To deliver video over the Internet there’s no alternative: you need dedicated video handling in which only the occasional keyframe is fully encoded and all other frames are limited to describing those pixels that have changed. In other words you need both intra- and inter-frame compression and Flash’s sequential flick-book approach just isn’t up to it.
Delivering effective web video is a very different ballgame and one that has come to be dominated by three main contenders – Apple’s QuickTime, Microsoft’s Windows Media Player and RealNetworks’ RealPlayer. Each format has its own strengths and weaknesses in terms of quality versus size, ease of authoring and delivery, end user accessibility and a host of other features such as integration and branding. The result is that no one format dominates so that on many sites you’ll find either a choice available – a serious pain for the author - or a single option that might not be compatible or involve a serious download before you see anything – a serious pain for the end user.
Macromedia’s stroke of genius was to spot the opportunity this presented and to realize that it could integrate dedicated video play-back directly into its already near-ubiquitous Flash player. The results were unveiled in the ground-breaking Flash MX release which incorporated a totally new “Spark” codec (compression/decompression) technology, brought in from Sorenson. In fact the codec wasn’t quite as new as originally claimed and was largely derived from Sorenson’s work on the QuickTime codec that it had worked on for Apple. However, after some suing and counter-suing, the matter was resolved and Flash had its all new video handling. So how does it compare to the existing standards?
There’s no doubt that adding dedicated video handling to your Flash projects could hardly be easier. Using the main Import to Stage ( Ctrl+R) command, you can select from video in MOV, AVI, DV, MPEG, ASF and WMV formats. Click OK and a wizard-based dialog appears in which you can choose to import the entire video or select clips, and then choose a bandwidth-targeted compression profile ranging from “56 kbps modem” through to “ DSL/Cable 786kbps”. Click Finish, and Flash converts the video and imports it directly to the main timeline. You can then scrub through your video with the timeline and easily add other content synchronized to the video. Publish to SWF and you’re ready to post your movie complete with embedded video to your site.
Importing and embedding video in the Flash timeline couldn’t be easier.
But what about the all-important end results? I imported around a minute of sample DV video footage using the broadband-targeted DSL/Cable 256K compression profile and then tested the movie to see the results. The first disappointment was the time it took to export the movie (around 8 seconds) which would be acceptable as a one-off but soon becomes irritating every time you want to test your movie. Much more disappointing was the quality – the video frame rate is limited to that of the Flash movie which at the default 12fps for web-delivery makes action very jerky. More to the point the image was so pixilated that it looked as if this had been done deliberately to protect the innocent!
And looking at the Bandwidth Profiler, the news regarding bandwidth requirements was just as bad with a whopping file size of 6.5MB. Crucially, the Flash player needs to download the entire video into memory before it can begin playback so, unless you break up the video into separate SWFs that call each other, even with broadband access you’re talking about waiting around 3 minutes before you would see anything! Even worse, this memory-based playback system means that the total length of video is limited by the end user’s available RAM up to a maximum of 16,000 frames. And in practice this proves largely irrelevant as after two minutes or so, audio and video synchronization begins to fall apart!
At this stage it might be tempting to dismiss Flash video entirely but that would be a big mistake. First it’s crucial to appreciate Flash’s unbeatable asset – penetration. With over 98% of web users directly able to view SWF content you can virtually assume that the end user has it installed. And that’s no matter whether they are Windows, Mac, Linux or Solaris based. Of course for video playback the end user needs to have the more recent Flash MX-compatible player 6 or later, but even here the figures are impressive with penetration now averaging around 96%. That’s compared to figures of 63% for Windows Media Player, 62% for Real Player and 56% for QuickTime. And, if the end user doesn’t already have the necessary Flash player installed, its small size and brand recognition mean that most users will be happy to accept the prompted download. (The latest NPD figures are available at http://www.macromedia.com/software/player_census/flashplayer/)
The advantages are immense but so are the disadvantages - so can the two be reconciled? The solution is to completely re-evaluate how you use your video. Rather than thinking in terms of large-frame, full-motion, full-length TV-style video, you need to think of embedded video in much the same way as the bitmap animations that we looked at earlier. As such, the key to success is to first minimize your byte count and then maximize its impact. Step one is to crush your file size and, using the Video Import wizard, you can not only clip your video to the absolute minimum but, using its Advanced Settings tab, you can set up re-usable profiles to scale it down (absolutely crucial), cut out the audio if it’s not essential and crop in to the most important action. Crucially, by squeezing the file size, your bandwidth-targeted quality can rise accordingly.
The resulting embedded video is very different to the original uncompressed footage but don’t worry: even a silent, thumbnail-sized video can have extraordinary impact so long as you use it effectively. And the key to this is to import your video element to its own movie clip rather than to the main timeline. Again this opens up the host of options that we saw earlier including the ability to resize and rotate your clip, to drag on multiple copies, to globally control colour and transparency, to set up motion and colour tweens and to take programmatic control. And all without affecting the final exported movie size! Perhaps most exciting of all, you can mask your video movie clip to break out of video’s inherent rectangular straightjacket (though remember that the hidden areas still feed in to the final SWF file size).
The results, if handled well, are creatively exciting video elements totally integrated into your larger design, immediately accessible to all and without breaking the bandwidth bank. However they bear little relation to the self-contained TV-style video that we have become used to. While embedded video clips are a great and under-appreciated design tool, the main use of web video will always be to provide high-quality, large-frame, full-length footage straight from the camera or video editor. It’s a job that Macromedia set itself to tackle with Flash MX 2004.
The major shift this introduced was the foregrounding of a new native Flash Video format – FLV. Embedding FLV video in your movie seriously boosts efficiency as neither importing nor exporting during testing involves conversion. Much the biggest advance though, is the ability to load external FLV files at runtime using either ActionScript or, if you’re using Flash MX Professional (highly recommended for video use), through dedicated media components complete with optional playback controls. This adds a layer of authoring complexity compared to the easy timeline-based access and synchronization offered by embedded video but, with advanced features such as bookmarking, cue points and the ability to create your own customized branding, it also adds considerable power.
Flash MX 2004 Professional offers advanced external FLV handling.
In any case disadvantages are more than outweighed by the external FLV’s vastly superior playback system. Rather than playing from RAM, the FLV files are cached and played from the local disk. This means that the limit on the length of video is lifted and the audio synchronization problems disappear. Also there is no longer any need to tie the FLV’s frame rate to the SWF’s. Most important, the system is “progressive” which means that playback can begin before the whole file has downloaded. This massively boosts perceived responsivity and enables the use of larger file sizes which allows the use of longer and higher quality video.
So how do you go about creating your FLV files? If necessary, Flash MX 2004 users can embed a video and then export the resulting movie to FLV. A much better option is to turn to third-party solutions, most obviously those provided by Wildform and Sorenson. Macromedia’s preferred route is for users to upgrade to Flash MX Professional 2004 which provides a Video Exporter plug-in. This piggy-backs onto QuickTime’s export plug-in architecture to enable most professional video editing packages such as Avid Media Composer and Adobe After Effects (though irritatingly not Adobe Premiere Pro) to export directly to FLV. If this is the route you choose, make sure that you download the Video Updater 1.2 which offers intelligent Two-Pass Variable Bit Rate encoding which greatly improves video quality.
With the main playback, file size and quality issues all tackled, Flash MX 2004’s external FLV video handling is seriously impressive. But there are still a few issues that need to be addressed. First, it’s important to remember that FLV playback requires the latest Flash 7 player whose market penetration lags some way behind. At over 70% accessibility already though, and rising quickly, it won’t be long before FLV support can also be considered near-universal. The real problem is that, to begin taking advantage of FLV, you really need to be an expert both in Flash Professional and one of the supported professional video packages. It’s not exactly a turnkey solution for those wanting to quickly get video footage onto their web pages.
Which is why Macromedia has come up with the Macromedia Video Kit ($99). Central to this is the inclusion of the standalone Sorenson Squeeze 4.0 application optimized for output to Flash FLV. At its simplest, this lets you load an uncompressed video file, select a customisable output preset - again targeted at different bandwidths but this time intelligently changing settings such as output size accordingly - and then hit the Squeeze button. And with advanced two-pass VBR compression based on Sorenson’s optimized Spark Pro codec the results in terms of size and quality are in a different league to those produced by Flash’s internal embedding. Other advanced features include the ability to batch process files, to set a target file size, to interactively crop length and size and to apply filters to, for example, remove interlacing and video noise and to normalize audio.
Sorenson Squeeze 4 is dedicated to converting video to FLV format.
Creating the FLV is taken care of, but having to then setup even simple playback via Flash is at best an unnecessary and complicated bottleneck and at worst, for non-Flash users, a complete dead-end. Macromedia’s solution is the Video Kit’s Flash Video Extension for Dreamweaver. This adds a new Insert > Flash Video command to Dreamweaver MX 2004 in which you select your FLV file and one of six preset playback “skins”. It’s as simple as that. Publish the page and your video begins playback in situ (assuming that you selected auto play) and, if you move your mouse over it, the semi-transparent playback controls suddenly appear. It’s all very simple, natural and professional – especially when you compare it to previous solutions with their need to provide multiple formats and playback in ugly, branded pop-up windows.
The Flash Video Kit enables FLV video files to be handled directly by Dreamweaver MX 2004.
The Dreamweaver extension provides another capability – an option to set up “streaming” based delivery. So what’s this? The difference to progressive handling is that a live link is made to a dedicated Flash Communication Server so that the FLV playback is handled live and on-the-fly (as such image quality is limited to bit rates that can be delivered in real time, all easily catered for by Squeeze presets). This is obviously necessary for live video feeds, but also offers a number of advantages for existing FLV playback including live scrubbing, bandwidth detection to deliver the appropriately encoded video and scripting capabilities such as synchronization of streams. And it works with the Flash player 6.
For most users streaming delivery is unnecessary overkill, but the Video Kit provides a free 15-day trial of VitalStream’s Flash Video Streaming Service Lite (continued use costs $99 per month for 10GB of transfer) so that you can test it out. What its inclusion highlights is the flexibility and scalability of Flash’s handling, moving from simple animated bitmaps through embedded video elements to progressive long-form FLV delivery and even continuous live streaming. Whatever your need, Flash provides a solution together with unrivalled control and playback penetration.
One thing’s for sure - it’s time to stop thinking of Flash as a vector-only format.
Hopefully you've found the information you were looking for. For further information please click here.
For free trials and special offers please click the following recommended links:
For further information on the following design applications and subjects please click on the links below:
[3D], [3ds max], [Adobe], [Acrobat], [Cinema 4D], [Corel], [CorelDRAW], [Creative Suite], [Digital Image], [Dreamweaver], [Director], [Fireworks], [Flash], [FreeHand], [FrameMaker], [FrontPage], [GoLive], [Graphic Design], [HTML/CSS], [Illustrator], [InDesign], [Macromedia], [Macromedia Studio], [Microsoft], [NetObjects Fusion], [PageMaker], [Paint Shop Pro], [Painter], [Photo Editing], [PhotoImpact], [Photoshop], [Photoshop Elements], [Publisher], [QuarkXPress], [Web Design]
To continue your search on the designer-info.com site and beyond please use the Google and Amazon search boxes below:
|designer-info.com: independent, informed, intelligent, incisive, in-depth...|
All the work on the site (over 250 reviews, over 100 articles and tutorials) has been written by me, Tom Arah It's also me who maintains the site, answers your emails etc. The site is very popular and from your feedback I know it's a useful resource - but it takes a lot to keep it up.
You can help keep the site running, independent and free by Bookmarking the site (if you don't you might never find it again), telling others about it and by coming back (new content is added every month). Even better you can make a donation eg $5 the typical cost of just one issue of a print magazine or buy anything via Amazon.com or Amazon.co.uk (now or next time you feel like shopping) using these links or the designer-info.com shop - it's a great way of quickly finding the best buys, it costs you nothing and I gain a small but much-appreciated commission.
Thanks very much, Tom Arah
[DTP/Publishing] [Vector Drawing] [Bitmap/Photo] [Web] [3D]
[Articles/Tutorials] [Reviews/Archive] [Shop] [Home/What's New]