he time has come, at last, for a major update of Flash?Macromedia’s flagship animation and interactive development tool. Expected in early September, Flash 8 (Macromedia has officially dropped the useless “MX” from the new product monikers), is an exciting upgrade that should pique the interest of even the crustiest upgrade curmudgeons.

If the buzz in the Flash community is any indication, the prevailing objective consensus will almost certainly be that this upgrade packs a wallop. There are both inspiring new features and much needed improvements. In fact, many of the changes in Flash 8 are in areas where the development community wanted them most: performance, text legibility, video, and interface enhancements.

I’ll confine this article to an overview of the changes in Flash 8. Future articles will delve more deeply into individual features. For example, I’ll focus a bit more on IDE changes this month, with a greater emphasis on ActionScript next month and beyond. Those of you who need a scripting fix early can check out the Additional Resources. For weeks, since the Flash 8 Player went into public beta, adventurous developers around the world have been experimenting with any code snippet they can pull out of the player. Links to many of these experiments?lovingly collected by Franto, LuminicBox, 5-1/2, and many other generous blogging developers?have been included.

Finally, there are many differences between Flash 8 Basic and Flash 8 Professional. Rather than discussing those differences repeatedly as I address each topic, I’ll summarize the features for each version in a matrix available as a sidebar (see “The Studio Feature Matrix“). Also, be sure to read my brief summary of the improvements to the rest of the Studio 8 product family in the sidebar ” Beyond Flash: A Look at the Whole of Studio 8.” Without further delay, I’ll dig right in.

Video
New Video Codec with Alpha-Channel Support
One of the most talked about new features is a video codec, developed by On2, called VP6. (There is a new version of the codec called VP7, but it is currently available only for Video for Windows.) The new codec offers near-DVD quality at even smaller file sizes. Obviously, mileage may vary. The tradeoff of quality and file size is a never-ending battle.

Even more interesting, however, is that VP6 supports alpha channels making it much easier to composite the video stream with other assets. This makes video of glass, chroma key knockouts, fire, smoke, etc., much more realistic (see Figure 1).

Figure 1. The Elements: The VP6 alpha-enabled video from which this still was taken renders fire and stone with surprising realism and even more surprising performance.

Frankly, I am surprised at how good the performance is when using this new codec. Every additional processor task affects performance, but don’t make the mistake I did and assume that you should use it sparingly. As always, test your intended use in your application; this isn’t something you should automatically reserve for high-end applications.

Creating the video assets is similar to creating video files for prior versions of Flash. You can embed video in Flash (not recommended except possibly for very specific uses of tiny files), or create an external FLV file. When embedding the video, a new wizard that includes the VP6 codec (in addition to the existing Sorenson Spark codec, which has not been replaced?you can use either) makes the task simple.

Rendering external FLV files can, as in prior versions, be accomplished in a variety of ways. The Flash Video Exporter add-on will allow any QuickTime-savvy application to export to FLV, and Flash 8 Professional now ships with its own external encoding application called Flash 8 Video Encoder. It works the same way as the exporter but also supports batch processing.

This means that no additional third-party application is required to create FLV files. In the past, however, such third-party apps have offered enhanced features. Sorenson Squeeze, for example, improved video compression over Flash’s built-in Sorenson Spark codec. On2 may offer the same thing for its VP6 codec in the future (VP7, perhaps?), as they have purchased Wildform’s Flix video encoder as an entrée in this market. However, at press time, this could not be confirmed.

In both cases, enabling support for an existing alpha channel is as simple as checking a checkbox. Creating the alpha channel is the task of your video editing software. This means that video applications such as FinalCut Pro and AfterEffects, as well as 3D applications capable of creating alpha channel capable files, can render videos that will really make your Flash files pop.

Improved Video Cue Points
Cue points?time markers within the video ?can now be embedded in FLV files. Unfortunately, as near as I can tell, this is not an automatic process. The cue points must be manually inserted at encoding time, similar to the way they were created in the MX 2004 Pro Media Playback component. A named cue point is inserted at a specific time code. However, they are embedded in the FLV file, so you only have to do this once no matter how many times you use the FLV asset.

Further, the cue points are more powerful than before. When you set a cue point, you can designate its type as “Event” or “Navigation.” Navigation cue points are used for navigating within the video. When such a cue point is created, a corresponding keyframe is created in the video and used as a destination point. Event cue points are used to trigger ActionScript events, and can even pass user-defined name value pairs along with the cue point, in a parameters object. You can then use these names and values in your scripting.

The new FLVPlayback component offers a dozen or so ActionScript methods to use with these cue points. You can add or remove them, as well as enable and disable them, with ActionScript. You can differentiate between embedded cue points and those added via ActionScript, and you can also differentiate between event and navigation cue points. Finally, you can find the different cue point types or seek to the nearest relevant cue point.

Expanded Video ActionScript
The FLVPlayback component offers additional ActionScript beyond working with cue points, for improved playback control when creating your own controller interfaces. Further, a dozen or so standard properties, such as alpha, rotation, width and height, x- and y-coordinates, x- and y- scale, etc., have been added directly to the Video class to make compositing of the video assets even easier. Additional On2-specific deblocking filters have also been added for use with low-bandwidth videos.

Easily Skinnable New Media Component
The FLVPlayback component is also easily skinnable. The provided controller comes in seven different button/position configurations, in four different themes. You can create your own skins relatively easily by modifying external files that the component can load at runtime. You can also build your own discreet controller elements with individual playback controls (rather than using a single controller bar).

Runtime Filter Effects
Another feature that has gotten a lot of attention in Flash 8’s pre-release period is the suite of realtime filter effects. When applied to MovieClips, effects such as drop shadow, blur, and bevel?traditionally reserved for bitmaps rendering?are rendered in real time by the Flash Player.

Figure 2. Choosing a Filter: Filter Effects can easily be applied using the new Filters tab of the Properties panel.

Figure 3. Detailed Settings: The Filters tab in the Properties Panel reveals the settings the for Drop Shadow effect.

Effects can easily be applied in the properties panel, using the new Filters tab, as seen in Figure 2. In Figure 3, you can see the settings for the Drop Shadow filter. Standard features such as the light angle, the offset distance, the opacity (strength) and spread (in this case, blur, variable in both the x and y directions) are included. You can even save presets of filters for later use.

Three variants of the traditional drop shadow are supported (see Figure 4). Knockout mode knocks out the shadow in the shape of the MovieClip being affected, without showing the clip itself. Inner Shadow creates a shadow on top of the clip being affected, as though it were cut out of the stage surface itself. Finally, the most intriguing variant, Hide Object, is the ability to show the shadow intact, without the clip being affected. That is, unlike the Knockout setting, the shadow is not affected. Only the main clip is hidden. Therefore, by duplicating the desired clip, once for the clip itself, and once for a shadow-only version skewed in perspective, you can render real-time shadows under animated objects.

Figure 4. New Shadow Effects: The Drop Shadow Filter Effect in normal, knockout, inner shadow, and hide object modes.

Figure 5. Animated Shadows: Filter Effects, such as Drop Shadow, can be animated in real time by the Flash Player.

Figure 5 shows the Hide Object variant in use. I’ve selected both MovieClips prior to the screen capture so you can see the normal clip without a filter applied, and the duplicate clip, with the Drop Shadow effect applied, using the Hide Object option. Since the shadow is just a copy of the animated clip, it changes along with the main visual making a realistic shadow that is surprisingly easy to achieve.

ActionScript Control over Filter Effects
The new flash object has a filters package that allows ActionScript control over filter effects. In simple terms, you can exert programmatical control over just about everything you can manipulate in the Filters Panel. Here is a very simple example for creating and applying a drop shadow filter.

var dropShadow:DropShadowFilter = new DropShadowFilter(4, 45, 0x000000, 100, 10, 10, 2, Quality.HIGH);myClip.filters = [dropShadow];

The first line creates a drop shadow filter object in the variable named “dropShadow.” It defines the distance, angle, color, alpha, blur x, blur y, strength, and quality of the shadow, respectively. The second line applies the object you just created to the MovieClip “myClip.” Because you can have more than one filter effect applied to a MovieClip at any time, the filters object is an array.

For example, you could add a blur filter this way:

var dropShadow:DropShadowFilter = new DropShadowFilter(4, 45, 0x000000, 100, 10, 10, 2, Quality.HIGH);var blur:BlurFilter = new BlurFilter(10, 10, Quality.HIGH);myClip.filters = [dropShadow, blur];

Figure 6. Darken Blend: The Darken blend mode allows you to take this overly enthusiastic coworker out to the park on a summer day?without having to edit the bitmap or create a PNG of the file before its use.

With ActionScript, you can also remove filters, enable and disable them individually or altogether, and change their rendering order (which usually changes the appearance of the clip).

Blend Modes
Blend modes are another familiar bitmap effect that can now be applied to MovieClips. If you’ve ever used Photoshop you’ve almost certainly used blending modes. They allow you to composite one layer into the rest of the document by only displaying those pixels that are darker or lighter (for example) than the underlying layers. (In Director, blend modes go by the name of Ink effects.)

A dozen or so blend modes including Lighten, Darken, Screen, Multiply, and Luminosity can be applied easily via the Properties panel or via ActionScript using the MovieClip.BlendModeType property. Figure 6 shows the Darken blend mode in use. On the left, the model is layered atop the sky background but with the default Normal blend mode in use. On the right, the Darken blend mode is applied to the model allowing the sky background to shine through. While I have not tested this myself, my assumption is that this approach would yield better performance than constantly re-compositing a PNG with alpha data. In any case, the blend modes can allow you to skip the step of creating the PNG externally, allowing for faster development and more flexibility.

Imaging Lingo… er, ActionScript
BitmapData Class
Fans of Director’s Imaging Lingo, Processing, and similar technologies?and now a whole community of Flash artists?are going to love this. The new BitmapData class provides a long list of bitmap manipulation methods. I won’t go through the whole list in detail, as I’m planning on focusing on this in a future column.

The basis of the process is creating a new BitmapData object. This object can have dimensions, can be transparent or opaque, can be filled with color, and so on. Into this object, you can load a bitmap from the library, draw the contents of another BitmapData object or MovieClip, generate a noise pattern, or add a fill. You can copy pixels or a specific channel (red, green, blue, or alpha) from another BitmapData object. You can apply a filter from the aforementioned filters object, and merge (or dissolve pixels between) two BitmapData objects (see Figure 7).

Figure 7. Additive Blending: The new BitmapData class makes additive blending possible. This example was inspired by a beautiful sphere by Emil Korngold.

You can also examine bitmap data and build creative interactions. For example, you can get and set pixels, you can isolate areas of specific colors?either by finding a minimum bounding rectangle surrounding all pixels of that color, or even by checking the hitTest at a pixel level. Testing thresholds can be used to perform logical operations based on color. For example, some people have already attempted motion capture with Flash video. (See example collections in Related Resources, left column.)

Geometry Class
Hand in hand with the BitmapData class, scripters will use the flash.geom class. This class makes it possible to specify rects and points for manipulating areas of an image, as well as create a transformation matrix that allows for simultaneous transforms of position, scale, and rotation.

Performance Improvements
Even without new features, developers are going to be interested in new performance improvements and MovieClip rendering options that will influence playback speed and file size. In general, playback performance is significantly improved in Flash Player 8 over previous versions. Perhaps the most tangible change is the introduction of the new MovieClip property, Cache As Bitmap.

Figure 8. Bitmap Caching: Bitmap caching can be enabled in the Properties panel (note the “Use runtime bitmap caching” checkbox) for continuous use, or can be enabled and disabled via ActionScript.

Runtime Bitmap Caching
One of the primary reasons that Flash is so much slower than many relevant bitmap-based technologies is that Flash must constantly recalculate all of the vector math required to display its shapes and symbols. If you could convert complicated vectors to bitmaps, they would display much quicker because those processor-intensive calculations would be dramatically reduced. The problem is, of course, that you lose the sharp vector qualities that prompted you to create your assets as vectors in the first place.

Runtime bitmap caching solves this problem. It temporarily caches and displays a bitmap version of a MovieClip, while still maintaining the integrity of the vector information. This allows the player to focus more on other changing elements of your file, without having to update the vector math of the cached MovieClip. This feature can easily be enabled in the Properties Panel (see Figure 8) or can be changed on the fly at any time via ActionScript. And because the vector information is preserved, you don’t lose any opportunities for future vector manipulation.

When possible, enabling the ActionScript property MovieClip.opaqueBackground can improve performance even more. This is somewhat equivalent to the reduction in processor drain when switching from a PNG with a transparent background to a JPEG. If Flash can temporarily stop calculating opacities, for example, of a cached bitmap, performance can be further boosted.

MovieClip ScrollRect
Another cool performance optimization, and creative option, is the new MovieClip.scrollRect property. This allows you to quickly scroll movie clips within a cropped rectangle defined by the property. Complex MovieClips and text fields scroll much faster because a bitmap of the clip is scrolled instead of having to recalculate the entire clip from vector data. Just like Director’s sprite rect, the scroll rect is based on the MovieClip’s bounding rectangle with 0,0 residing in the upper left corner of the clip.

Figure 9. Better Anti-aliasing: These examples of various typical fonts at a variety of sizes demonstrate the improved Flash type rendering engine.

Figure 10. Anti-alias Presets: Two new anti-alias presets have been added to the type rendering options, as well as an option to define your own custom anti-alias values.

Type Rendering Improvements
Developers and designers alike will rejoice in the improved type rendering engine in Flash 8. Fonts have been a perennial weakness of Flash since its inception and this is the first major improvement. In most cases, the new engine makes everyday fonts look vastly better at smaller file sizes?even as small as 6 pt. Figure 9 shows four fonts in sizes from 6 to 10 points. Some fonts fare better than others, but all are significantly improved over prior versions of Flash.

Two presets in the Properties panel allow for improved anti-aliasing optimized for animation and readability (see Figure 10). You can also customize thickness and sharpness values for your own anti-alias values. This makes it possible for you to create settings that are optimized for specific fonts.

ActionScript’s new TextRenderer class makes this even easier. For a given font, you can define the anti-alias type (normal, text field control, or advanced), the color type (dark or light), the font style (bold, italic, or bold/italic), and the grid fitting, or type hinting, type (align verticals along the pixel or sub-pixel grid?the latter best for LCD displays). With the “advanced” anti-alias type, you can even define the inside (opaque) and outside (transparent) cutoff thresholds at which the anti-aliasing is applied.

Drawing Improvements
Corners!
Designers will really be happy with the drawing improvements in Flash 8. At last, lines with corners! How many times have you had to create lines out of shapes because you needed square corners? All that labor is a thing of the past with the introduction of the new Cap and Join controls. With these two beauties you can have the default rounded corners and end caps of yore, or sharp end caps and mitered corners (see Figures 11 and 12). Another cool option is the scale type for the line. This allows you to specify, when scaling the MovieClip, whether lines are scaled normally, only vertically, only horizontally, or not scaled at all.

Figure 11. Cap and Join: New Cap and Join options allow you to control the appearance of line ends and corners.

Figure 12. Cornucopia of Corners: The three lines in this illustration show not only the variety of corners and endcaps but also demonstrate the new ability to use gradients on strokes.

All of these options can be set with ActionScript through the new MovieClip.lineStyle method for unprecedented control. You can define line thickness, color, alpha, caps and joint styles, and miter limit, as well as pixel hinting (whether or not lines should be rounded to the next full pixel), and the aforementioned scale type.

New Gradient Options

Figure 13. Object Drawing with Ease: A new context-sensitive button available in drawing tools enables the Object Drawing model. With this option enabled, shapes are “pre-grouped” so they will not destroy each other when overlapping.

Expanded controls over gradients have also been introduced. These include setting the focal point of a radial gradiant, overflow modes (so the gradient can be expanded, reflected, or repeated if it continues outside your preset focal area) and even applying gradients to lines (see Figure 12).

A New Shape Drawing Mode
One of the initially confusing behaviors of Flash’s natural drawing tools involves the overlapping of shapes on the same layer, which causes them to interact and “destroy” each other. That is, shapes of differing colors will interact with each other, with the top shape erasing the areas in common with the underlying shape.

Once you get used to this approach, it can be very useful. It’s very handy for doing quick fill or line bisections, reflections, color changes, and more. But you need to take extra steps to avoid this behavior when it’s not preferred. The simplest is to group the shape you’ve created before deselecting it. But this doesn’t always solve the problem, and any method you use involves extra steps.

Flash 8 introduces a new “object drawing” model that creates shapes that do not automatically destroy other shapes. Think of this technique as automatically grouping everything you draw. If you want the shapes to interact, you can break them apart and merge them at will. Similarly, you can double-click to edit any shape object just like you would a group.

Fortunately, the Flash team has handled this elegantly. An additional context-sensitive button in the tools palette allows you to enable and disable object drawing whenever you want (see Figure 13).

Custom Easing Controls
For animation work, Custom Easing controls let you create realistic, and even quirky, tweening motion. In previous versions of Flash, you could specify a value from -100 to 100, to ease out of your first key frame (acceleration) or ease into your second keyframe (deceleration). Flash 8 allows you to draw Bezier curves to describe your motion (see Figure 14).

Figure 14. Custom Easing with Curves: The new Custom Easing interface allows you to draw the behavior of motion tween properties. In this case, the same curve is affecting all applicable properties.

Figure 15. A Curve for Scale Only: Separate curves can be created for each property controlled by the tween. In this case, the curve shown affects scale only.

The curve in Figure 14 takes me halfway through the tween in the first five or so frames, then does little over the next 10 frames, and then speeds up again and quickly finishes the last 50 percent of the tween in the remaining five or so frames.

Position isn’t the only thing you can manipulate, either. Because a tween can affect several MovieClip properties, you can draw different easing curves for each relevant property. This can cause some interesting effects. As a hypothetical example, Figure 15 shows that the scale change is approximately 70 percent complete about one-third of the way through the animation, and then slowly completes the transformation over the remainder of the tween. Because the checkbox for “Use one setting for all properties” is unchecked, I can create entirely different curves for position, rotation, color, and filters.

Interface Enhancements
As I mentioned earlier, it’s easy to get excited about new features that may provide you with new creative opportunities. Some of the nuts and bolts interface improvements, however, may make those in the trenches just as happy as the loudest bell or whistle. For brevity, I’ll highlight just four of my favorite changes.

First, the Macintosh version finally has an option to collect all open documents in a single window, accessible via a tabbed interface (the Windows version has had this feature for awhile). You can even elect to have your test SWFs open in a tab, but it may take some getting used to. It’s helpful if you want to look at a script, or other interface element, during SWF playback, but it’s initially strange not automatically finding your test movies in the foreground.

Both platforms now have a far friendlier, unified Library panel. Previous versions of Flash housed every library for every open window in a separate panel–each of which could be hard to find depending on whether or not that panel was open, or minimized. Flash 8 libraries for all open documents appear in a single Library window accessible via a menu (see Figure 16). You can easily switch back and forth between any library, regardless of which document has focus. Plus, you can pin a library so that even when changing focus of a document, the library won’t change with it. This is very handy when you spawn a new Library window, because it makes it really easy to copy assets between them. Also, libraries remember their position like other panels.

Figure 16. Consolidated Library Panel: Managing multiple libraries has never been easier than with the new consolidated Library panel.

Figure 17. Tabbed Panels: Two different color panels are shown, each with multiple controls collected in a tabbed view.

Finally, the other panels have also been improved by allowing you to group a panel with any other panel of your choice in a new tabbed panel that can optionally be renamed to your liking. Figure 17 shows two color panels grouped together, as well as the components, component inspector, and behaviors panels sharing a single tabbed panel.

Finally, text assets can now be resized without scaling the text therein, just by dragging handles on the stage. It’s no longer necessary to use the text tool and double click to edit the text, just to resize.

ActionScript
Although I’ve peppered many of the discussions about the IDE enhancements with ActionScript equivalents, there are many ActionScript additions that I haven’t yet written about. Realistically, I can’t discuss them in any serious depth in this article (I’ll save that for future articles), but I’d like to gloss over four really cool items.

1. The new ExternalInterface class. There are probably very few ActionScripters who haven’t wanted to interface more reliably with an HTML hosting page. This class is designed for that purpose. It improves player-JavaScript communication through callbacks.
2. The flash.net package. It’s FileReference and FileReferenceList classes make it possible to upload files to, and download files from, a server. It has its own events and security protocol, and can accommodate files up to 100 MB each.
3. Support for loading additional graphical asset types. Flash 8 can also now dynamically import GIF, PNG, and progressive JPEG files. Previously, only standard JPEG files could be loaded dynamically if not enclosed in a SWF.
4. Nine-slice scaling. Just like many components scale, you can now set MovieClips to scale based on nine discreet slices. In Figure 18, starting with the bordered clip on the left (initially disregard the lines and numbers), scaling the clip horizontally will distort the border at the corners resulting in a clip similar to the frame in the upper right corner of the figure.

   However, nine-slice scaling tells Flash 8 to scale the clip in nine different pieces. Looking at the lines and numbers now, corners one through four won’t scale, slices five and six will only scale horizontally, slices seven and eight will only scale vertically, and slice 9 will scale normally. The result is the frame that can be seen at the bottom of Figure 18. Rock!

   Figure 18. Nine-slice Scaling: Nine-slice scaling allows a MovieClip to scale without distortion like many components do.

   Winding Down with a Few Remaining Goodies
   I’d like to close with a few features that didn’t quite fit into any of the major categories that I’ve already mentioned. First, Flash 8 offers an optional document-level undo (as in previous versions of Flash), or a new object-level undo which provides a separate undo table for each main object in your document.

   Second, the Document Properties dialog now allows you to enter metadata that is automatically exposed to search engines for better indexing. Not too shabby, eh?

   Also, ActionScript beginners will be happy to hear that the Actions panel’s “Normal” mode is back. Now more descriptively called “Script Assist,” this context-sensitive wizard helps guide you through scripting by prompting you with syntax and parameters.

   Last but definitely not least, Flash 8 Professional features the FlashLite development platform for mobile devices. Templates, scripting references, and examples make it easy for existing developers to expand their reach to this quickly growing market. There’s even an emulator that lets you test your work using preset profiles for every device that supports FlashLite. You can filter the supported device list to determine which phones, PDAs, etc., support screen savers, wallpapers, in-browser content, and standalone player content. This makes it possible to rapidly develop applicable content for a wide variety of devices.

   Stepping Up
   For many years, Flash has been sold primarily as a bundle in a suite called Studio, and this version is no different. Figuring out what version you need to buy and getting the best bang for the buck is going to be half the battle. Therefore, there are two very important sidebars to this article: Sidebar 1, ” Beyond Flash: A Look at the Whole of Studio 8,” will give you a rundown of some of the basic improvements in the other parts of the Studio 8 suite. Sidebar 2, “The Studio Feature Matrix,” shows you the various combinations and what you’ll get at different price points.

   As is usually true with a big upgrade, you have to decide for yourself if you think the new version is a must, and if so, when you should take the plunge. For my money, this is one of the most impressive Flash upgrades in a long time.

   For many users, particularly designers, the new video codec, runtime filters, and blend modes will be enough incentive. Scripters will appreciate the new ActionScript for increased performance, image manipulation, file transfers, JavaScript communication, and lots of other little changes beyond the scope of this article.

   But I cannot overlook the fact that Macromedia took the comments of many users into consideration when they added so many existing feature enhancements and user interface improvements. Simple things like line caps and joins will drive me nuts no more, and the new panel manageability features will make using a tool with the depth and breadth of Flash much more enjoyable.

   When you should step up depends a lot on how conservative you are. There’s a lot to be said about introducing a new rev into a busy work environment before you’re sure all the kinks have been ironed out. When it comes to creative applications, I’m typically an early adopter. I can’t wait to dig in. Either way, when you make the decision to upgrade, I hope you enjoy Flash 8 as much as I have so far.