Join Anastasia McCune for an in-depth discussion in this video Working with gradients and the Gradient Transform tool, part of Flash Professional CS6 Essential Training.
Gradients are a great way to add some depth to your visual assets in Flash. The Gradient Transform tool allows you detailed control on how your gradients look. So let's take a look at how these work. I am going to start by opening the file called gradients.fla from the exercise files for this chapter. I am going to save it right away into the end files. You can see that we've got two layers in the movie. The first contains our elephant and we are not going to change him, so that layer can stay locked. The background layer is currently blank. So I am going to click once on the background layer in the Timeline so I can draw a shape here.
Now I am going to click on the Rectangle tool and for the fill, I am going to choose a nice green color. The Stroke I am going to leave at No Stroke. And I am just going to draw a shape on the Stage so our elephant has a nice grassy place to walk. Of course, it's not the right size, so I am going to click on it once with my Arrow tool and move the X and Y to 00, the Width to be 550, and a Height to 400 to match our Stage dimensions. Now with the green rectangle selected, I am going to click to open my Color panel.
We will see in the Color Type dropdown, Solid Color is selected, which makes sense; we have a solid green rectangle. Now I am going to change the dropdown to Linear Gradient. You will see now that we have a gradient blend of two colors that go from one into another. Our green color got blown away, but that's okay. You can click on these little crayon-looking things to change the colors that they use. So for instance, I'll change my black back to green and I'll change the white to a lighter green color.
You can slide the gradient preview to change how much relative area one color uses. And you see that it updates on the Stage right away. I am just going to set it back to the way that it was. And now if you want more colors in your gradient, make sure your shape is selected and then just click below the gradient preview to add more color points. I'll add one and change its color to something like blue. So now our elephant has Kentucky bluegrass. You can add multiple color points to your gradient and change the color on each.
If you've got too many, click a color point and drag it off the panel to get rid of it. I am just going to get rid of all my extra color points, so we just go from the lighter green to the darker green again. So if you really like your gradient and you want to keep it for later, make sure your Shape is selected on the Stage and then pop open the Swatches panel. The mouse cursor turns into the paint bucket when I mouse over the gray area. And you can click to add the gradient to the Swatches panel to use anytime you want. So I am going to open my Color panel by clicking on the Color tab again.
And you'll notice that while we're working with gradients there are these options next to Flow. They are Extend color, Reflect color, and Repeat color. These give you control over how the gradient looks when using the Gradient Transform tool. So let's see how that works. With my green shape still selected, in the toolbar, I will click and hold on the Transform tool until flyout menu opens, and then I'll choose the Gradient Transform tool. You use the Gradient Transform tool to change the way the gradient is applied.
So notice I can click and drag the box with the arrow in it to scale the gradient. I can scale it out and scale it back in. Clicking and dragging on the circle control, I can rotate my gradient around. I am just going to undo that change. Grabbing the control point in the center, I can move the origin of the gradient, so I will just move it way over here to the left. And I am just going to undo that change. So the back on the Color panel, notice how the Flow option is set to Extend Color.
What this affects is the change in the gradient in between the two lines that control the scale of the gradient. I am going to make sure that I have got my Gradient Transform tool selected and click on the gradient. Notice that if I scale the gradient out bigger or a little bit smaller, the gradient is applied in between the lines. It becomes really obvious when I scale it very small. Notice how the light green continues on out to the right of the right blue line. The darker green continues on out to the left of the left blue line.
Now I am going to change my Flow to Reflect, and notice how the gradient reflects itself at the blue lines. If I change the Flow to Repeat, the gradient repeats left to right across the shape. I am just going to change it back to Extend Color. So now let's try changing our Gradient Type dropdown to Radial. You will that the gradient now radiates out from the middle instead of going from one side to the other. I think I'm going to swap the positions of the color markers to change the gradient flow so that the light green is in the middle.
I am going to close the Color panel, and I can still scale my Gradient using the little circle with the arrow pointing out. I can stretch it out really far--oops, stretched it out too far--or I can bring it back in. The circle with the arrow rotates the gradient around. That doesn't seem to make much sense for a radial gradient, since it's already round.
By using the control that looks like a square with an arrow in it allows me to stretch the gradient in one direction, or flatten it out so the green part now looks a little bit flatter. Now when I rotate the gradient around, you can see the difference that it makes. Just as with the linear gradient, the circle control in the middle of the Gradient Transform tool allows you to move the center point of the gradient. So I am going to have that light-green part start at the upper-left of the screen instead of smack in the middle. I think it makes it looks more like the sun is shining strongly on the upper-left.
So gradient fills are a way to add multicolor backgrounds that transition smoothly from color to color onto your objects. Remember that you create these in the Color panel. The Gradient Transform tool, which is located underneath the Free Transform tool in the toolbar, allows you to affect how that gradient appears.
- Choosing a document type
- Working with panels and workspaces
- Importing bitmap and vector graphics into a project
- Understanding the Timeline and frame rate
- Defining frames and keyframes
- Creating button, graphic, and movie clip symbols
- Nesting timelines
- Building shape tweens and motion tweens
- Defining inverse kinematic (IK) motion
- Applying filters, blend modes, and masks
- Integrating audio and video
- Using ActionScript code snippets
- Configuring SWF and HTML publish settings
- Publishing with AIR