FOTD 15: Flash 8 – Enhanced Gradients

In Tuesday’s FOTD we looked at some key updates to strokes in Flash 8, and today we’re going to look at some similar (and equally helpful) updates to gradients that will give you a lot more options in your fills. Let’s dive a little deeper.

First up, when applying a gradient you’ll have much more onscreen control in Flash 8 over it’s placement. After applying a gradient fill and selecting the Gradient Transform tool (formerly referred-to as the Fill Transformation tool), here’s what the new onscreen controls look like for both a linear, and radial gradient:


For both linear and radial gradients, you can scale the gradient (i.e. effect the width of the gradient area within the fill of the selected object), rotate the gradient, and move the center point of the gradient to a new location inside the fill.For radial gradients, there are a few extra controls to bear in mind.First, the focal point of the radial gradient can be changed by clicking and dragging its triangle-shaped slider control. This focal point ‘handle’ will move along the central axis of the radial gradient and stay centered on that axis as you move it, up to the circular boundary defining the gradient. Rotating the gradient (via the rotation handle) will allow you to place the focal point at any point within the radial gradient area. To reset the focal point to center, you simply double-click the control.Secondly, you can stretch or squeeze the radial gradient by moving the appropriate control (see diagram above). This feature is very handy for adding ‘pseudo-perspective’ to radial gradient fills- useful for highlight variations to spheric shapes and skewed objects, for example.You also now have control over how colors are applied past the boundaries of your selected gradient (assuming there is more real-estate in the object’s fill area to show the overflow, of course). When either the “Linear” or “Radial” gradient fill type is selected, a popup menu will be available in the Color Mixer offering three different overflow modes:


Here’s a diagram illustrating how those overflow modes actually work out in practice:


A bit more description for the overflow mode examples above:

  • Extend
    This is how overflow was handled in previous versions of Flash- extending the final color of the gradient beyond the gradient’s boundaries.
  • Reflect
    Reflect the gradient as it extends beyond the gradient boundaries.
  • Repeat
    Repeat the gradient as it extends beyond the gradient boundaries.

This – along with the default number of gradient colors being increased from 8 colors to 16 colors, will afford you far more control, flexibility and options when using gradient fills. Now along with these updates, there’s a bit more to note with the gradient handling in Flash 8.Linear RGBAn additional interpolation mode will be supported- Linear RGB (closer to the SVG interpolation model). A check box to turn on Linear RGB interpolation is displayed in the color mixer when a gradient fill type is selected.Color Picker EnhancementsAlthough this isn’t specific to gradients- you’ll note the size of the individual color swatches within the Color Picker has been increased to enable much easier picking. You’ll also note there’s now the option to specify alpha for the selected color, putting more of the options you’ll need in one handy location:


AnimationWhat good is it to have finer control over your gradient’s focal point if you can’t animate it? Not a lot- so it’s fortunate that you can now animate the focal point of gradients in Flash 8. Gradient style, interpolation mode, spread mode or changes in the number of colors are not animatable, however.Gradients on StrokesDid I mention you can apply gradients as strokes? That should open up some out-of-the ordinary options for you, as well.


I hope you’ve found this overview of the new gradient handling interesting- yet another ‘expressive’ feature of Flash 8 that should help make your creative workflow more robust. See you next Monday for FOTD 16- and have a great weekend!

3 Responses to FOTD 15: Flash 8 – Enhanced Gradients

  1. Jack says:

    cotd on the FOTD, just WOW! Nice control over the Gradients I was already happy with the control that flash mx 2004 did give me but now I am even more happy :DBTW nice tool name change fill transform to gradients transform will help people new to flash to better understand it.

  2. AWESOME! Thank you, thank you. :)I had noticed larger color swatches in the Captivate demos but wasn’t sure if that was just for the demo – thank you again!Good tip: “To reset the focal point to center, you simply double-click the control.”

  3. Chris- glad you’re liking the new features! The praise really goes to the product teams though- they’ve done one helluva job this release, all across the board. I’m just reporting the good news, really… ;-)