To apply a gradient fill to existing artwork, select an object or objects on the Stage.
- Adobe Animate User Guide
- Introduction to Animate
- Animation
- Animation basics in Animate
- How to use frames and keyframes in Animate
- Frame-by-frame animation in Animate
- How to work with classic tween animation in Animate
- Brush Tool
- Motion Guide
- Motion tween and ActionScript 3.0
- About Motion Tween Animation
- Motion tween animations
- Creating a Motion tween animation
- Using property keyframes
- Animate position with a tween
- How to edit motion tweens using Motion Editor
- Editing the motion path of a tween animation
- Manipulating motion tweens
- Adding custom eases
- Creating and applying Motion presets
- Setting up animation tween spans
- Working with Motion tweens saved as XML files
- Motion tweens vs Classic tweens
- Shape tweening
- Using Bone tool animation in Animate
- Work with character rigging in Animate
- How to use mask layers in Adobe Animate
- How to work with scenes in Animate
- Interactivity
- How to create buttons with Animate
- Convert Animate projects to other document type formats
- Create and publish HTML5 Canvas documents in Animate
- Add interactivity with code snippets in Animate
- Creating custom HTML5 Components
- Using Components in HTML5 Canvas
- Creating custom Components: Examples
- Code Snippets for custom Components
- Best practices - Advertising with Animate
- Virtual Reality authoring and publishing
- Workspace and workflow
- Creating and managing Paint brushes
- Using Google fonts in HTML5 Canvas documents
- Using Creative Cloud Libraries and Adobe Animate
- Use the Stage and Tools panel for Animate
- Animate workflow and workspace
- Using web fonts in HTML5 Canvas documents
- Timelines and ActionScript
- Working with multiple timelines
- Set preferences
- Using Animate authoring panels
- Create timeline layers with Animate
- Export animations for mobile apps and game engines
- Moving and copying objects
- Templates
- Find and Replace in Animate
- Undo, redo, and the History panel
- Keyboard shortcuts
- How to use the timeline in Animate
- Creating HTML extensions
- Optimization options for Images and Animated GIFs
- Export settings for Images and GIFs
- Assets Panel in Animate
- Multimedia and Video
- Transforming and combining graphic objects in Animate
- Creating and working with symbol instances in Animate
- Image Trace
- How to use sound in Adobe Animate
- Exporting SVG files
- Create video files for use in Animate
- How to add a video in Animate
- Draw and create objects with Animate
- Reshape lines and shapes
- Strokes, fills, and gradients with Animate CC
- Working with Adobe Premiere Pro and After Effects
- Color Panels in Animate CC
- Opening Flash CS6 files with Animate
- Work with classic text in Animate
- Placing artwork into Animate
- Imported bitmaps in Animate
- 3D graphics
- Working with symbols in Animate
- Draw lines & shapes with Adobe Animate
- Work with the libraries in Animate
- Exporting Sounds
- Selecting objects in Animate CC
- Working with Illustrator AI files in Animate
- Applying blend modes
- Arranging objects
- Automating tasks with the Commands menu
- Multilanguage text
- Using camera in Animate
- Graphic filters
- Sound and ActionScript
- Drawing preferences
- Drawing with the Pen tool
- Platforms
- Convert Animate projects to other document type formats
- Custom Platform Support
- Create and publish HTML5 Canvas documents in Animate
- Creating and publishing a WebGL document
- How to package applications for AIR for iOS
- Publishing AIR for Android applications
- Publishing for Adobe AIR for desktop
- ActionScript publish settings
- Best practices - Organizing ActionScript in an application
- How to use ActionScript with Animate
- Accessibility in the Animate workspace
- Writing and managing scripts
- Enabling Support for Custom Platforms
- Custom Platform Support Overview
- Working with Custom Platform Support Plug-in
- Debugging ActionScript 3.0
- Enabling Support for Custom Platforms
- Exporting and Publishing
- How to export files from Animate CC
- OAM publishing
- Exporting SVG files
- Export graphics and videos with Animate
- Publishing AS3 documents
- Export animations for mobile apps and game engines
- Exporting Sounds
- Best practices - Tips for creating content for mobile devices
- Best practices - Video conventions
- Best practices - SWF application authoring guidelines
- Best practices - Structuring FLA files
- Best Practices to optimize FLA files for Animate
- ActionScript publish settings
- Specify publish settings for Animate
- Exporting projector files
- Export Images and Animated GIFs
- HTML publishing templates
- Working with Adobe Premiere Pro and After Effects
- Quick share and publish your animations
- Troubleshooting
Create or edit a gradient fill
A gradient is a multicolor fill in which one color gradually changes into another color. Animate (formerly Flash Professional CC) lets you apply up to 15 color transitions to a gradient. Creating a gradient is a good way to create a smooth color gradation across one or more objects. You can save a gradient as a swatch to make it easy to apply the gradient to multiple objects. Animate can create two types of gradients:
Linear gradients change color along a single axis (horizontal or vertical).
Radial gradients change color in an outward direction starting from a central focal point. You can adjust the direction of a gradient, its colors, the location of the focal point, and many other properties of the gradient.
Animate provides additional control over linear and radial gradients for use with Flash Player. These controls, called overflow modes, let you specify how colors are applied beyond the gradient.
-
-
If the Color panel is not visible, select Window > Color.
-
To select a color display mode, select RGB (the default setting) or HSB from the panel menu.
-
Select a gradient type from the Type menu:
Linear
Creates a gradient that shades from the starting point to the end point in a straight line.
Radial
Produces a gradient that blends outward in a circular path from a central focal point.
When you select a linear or radial gradient, the Color panel also includes two other options if you are publishing for Flash Player 8 or later. First, the Overflow menu is enabled below the Type menu. Use the Overflow menu to control the colors applied past the limits of the gradient. Second, the gradient definition bar appears, with pointers below the bar indicating the colors in the gradient.
-
(Optional) From the Overflow menu, select an overflow mode to apply to the gradient: Extend (the default mode), Reflect, or Repeat.
-
(Optional) To create an SVG-compliant (Scalable Vector Graphics) linear or radial gradient, select the Linear RGB check box. This will allow the gradient to look smooth when scaled to different sizes after it is first applied.
-
To change a color in the gradient, select one of the color pointers below the gradient definition bar (the triangle at the top of the selected color pointer will turn black). Then click in the color space pane that appears above the gradient bar. Drag the Brightness slider to adjust the lightness of the color.
-
To add a pointer to the gradient, click on or below the gradient definition bar. Select a color for the new pointer, as described in the previous step.
You can add up to 15 color pointers, letting you create a gradient with up to 15 color transitions.
-
To reposition a pointer on the gradient, drag the pointer along the gradient definition bar. Drag a pointer down and off of the gradient definition bar to remove it.
-
To save the gradient, click the triangle in the upper-right corner of the Color panel, and select Add Swatch from the menu.
The gradient is added to the Swatches panel for the current document.
-
To transform the gradient, such as to make a vertical gradient instead of a horizontal one, use the Gradient Transform tool. See Transform gradient and bitmap fills for more information.
Adjust Stroke and Fill color
You can specify the stroke and fill color of graphic objects and shapes using either the Stroke Color and Fill Color controls in the Tools panel, or the Stroke Color and Fill Color controls in the Property inspector.
The Stroke Color and Fill Color section of the Tools panel contains controls for activating the Stroke Color and Fill Color boxes, which in turn determine whether the strokes or fills of selected objects are affected by color choices. Also, the Colors section has controls for quickly resetting colors to the default, setting the stroke and fill color settings to None, and swapping fill and stroke colors.
In addition to letting you select a stroke and fill color for a graphic object or shape, the Property inspector provides controls for specifying the stroke width and style.
To use these controls to change the painting attributes of existing objects, first select the objects on the Stage.
Also see: Live Preview of Colors.
Adjust stroke and fill color using the Tools panel
The Tools panel Stroke Color and Fill Color controls set the painting attributes of new objects you create with the drawing and painting tools. To use these controls to change the painting attributes of existing objects, first select the objects on the Stage.
Click the Stroke or Fill Color control, and select a color swatch.
Click the System Color Picker button in the pop-up window, and select a color. You could also hover the pointer over different colors to preview the effect of the color on the shape.
Type a color’s hexadecimal value in the box.
To return to the default color settings (white fill and black stroke), click the Black And White button in the Tools panel.
To remove any stroke or fill, click the No Color button.
The No Color button appears only when you are creating an oval or rectangle. You can create an object without a stroke or fill, but you cannot use the No Color button with an existing object. Instead, select the existing stroke or fill and delete it.
To Swap colors between the fill and the stroke, click the Swap Colors button in the Tools panel.
Animate allows you to preview Stroke or Fill colors live when changing them from the Color Swatch. For more information, see Live Preview of Colors.
Apply a solid color fill using the Property inspector
-
Select a closed object or objects on the Stage.
-
Select Window > Properties.
-
To select a color, click the Fill Color control and do one of the following:
- Select a color swatch from the palette.
- Type a color’s hexadecimal value in the box.
Select a stroke color, style, and weight using the Property inspector
To change the stroke color, style, and weight for a selected object, use the Stroke Color control in the Property inspector. For stroke style, choose from styles that are preloaded with Animate, or create a custom style. To select a solid color fill, use the Fill Color control in the Property inspector.
-
Select an object or objects on the Stage (for symbols, first double-click to enter symbol‑editing mode).
-
Select Window > Properties.
-
To select a stroke style, click the Style menu and select an option. To create a custom style, click Custom in the Property inspector, select options in the Stroke Style dialog box, and click OK.
Selecting a stroke style other than Solid can increase file size.
-
To select a stroke weight, set the Stroke slider or enter a value in the text box.
-
To enable stroke hinting, select the Stroke Hinting check box. Stroke hinting adjusts line and curve anchors on full pixels, preventing blurry vertical or horizontal lines.
-
To set the style for a path end, select a Cap option:
None
Is flush with the path’s end.
Round
Adds a round cap that extends beyond the path end by half the stroke width.
Square
Adds a square cap that extends beyond the path by half the stroke width.
-
(Optional) If you are drawing lines using the Pencil or Brush tools with the drawing mode set to Smooth, use the Smoothing slider to specify the degree to which Animate smooths the lines you draw.
By default, the Smoothing value is set to 50, but you can specify a value from 0 to 100. The greater the smoothing value, the smoother the resulting line.
When the drawing mode is set to Straighten or Ink, the Smoothing slider is disabled.
-
To define how two path segments meet, select a Join option. To change the corners in an open or closed path, select a path and select another join option.
-
To avoid beveling a Miter join, enter a Miter limit.
Line lengths exceeding this value are squared instead of pointed. For example, a Miter limit of 2 for a 3-point stroke means that when the length of the point is twice the stroke weight, Animate removes the limit point.
Adjust the strokes of multiple lines or shapes
To change the stroke color, width, and style of one or more lines or shape outlines, use the Ink Bottle tool. You can apply only solid colors, not gradients or bitmaps, to lines or shape outlines.
Using the Ink Bottle tool, rather than selecting individual lines, makes it easier to change the stroke attributes of multiple objects at one time.
-
Select the Ink Bottle tool from the Tools panel.
-
Select a stroke color.
-
Select a stroke style and stroke width from the Property inspector.
-
To apply the stroke modifications, click an object on the Stage.
Copy strokes and fills
Use the Eyedropper tool to copy fill and stroke attributes from one object and immediately apply them to another object. The Eyedropper tool also lets you sample the image in a bitmap to use as a fill.
-
To apply the attributes of a stroke or filled area to another stroke or filled area, select the Eyedropper tool and click the stroke or filled area whose attributes you want to apply.
When you click a stroke, the tool automatically changes to the Ink Bottle tool. When you click a filled area, the tool automatically changes to the Paint Bucket tool with the Lock Fill modifier turned on.
-
Click another stroke or filled area to apply the new attributes.
Modifying painted areas with Paint Bucket tool
The Paint Bucket tool fills enclosed areas with color. This tool lets you do the following:
Fill empty areas, and change the color of already painted areas.
Paint with solid colors, gradients, and bitmap fills.
Use the Paint Bucket tool to fill areas that are not entirely enclosed.
Have Animate close gaps in shape outlines as you use the Paint Bucket tool.
-
Select the Paint Bucket tool from the Tools panel.
-
Select a fill color and style.
-
Click the Gap Size modifier that appears at the bottom of the Tools panel and select a gap size option:
- Don’t Close Gaps to close gaps manually before filling the shape. Closing gaps manually can be faster for complex drawings.
- A Close option to have Animate fill a shape that has gaps.
If gaps are too large, you might have to close them manually.
-
Click the shape or enclosed area to fill.
Paint Bucket tool options
You can use Paint bucket tool to click and drag across the contours of an object to fill them with a chosen color. Click and drag the tool in any direction across the contours. Paint bucket tool fills the color wherever dots are captured across the contours.
When you select the Fill all regions checkbox, all regions of selection are filled with the color while dragging.
By default, the Fill all regions option is unchecked. In this mode, Paint Bucket tool fills only specific color.
When Fill all regions is not selected (default)
- In this mode, when a user clicks the mouse using paint bucket, you can notice the color that is being replaced. In this case, let us consider that green color is being replaced by red now.
- As the user drags across artwork, this option replaces only the contours which are filled with that green color.
- If the user drags across an empty closed contour, it is filled with red.
- At the time of mouse click if the underlying contour was empty, then this option fills empty contours when the user drags the paint bucket tool.
When Fill all regions is selected
All the regions are filled with the selected color. In case of above mentioned illustration, it is red.
Transform gradient and bitmap fills
You can transform a gradient or bitmap fill by adjusting the size, direction, or center of the fill.
-
Select the Gradient Transform tool from the Tools panel. If you do not see the Gradient Transform tool in the Tools panel, click and hold on the Free Transform tool and then select the Gradient Transform tool from the menu that appears.
-
Click an area filled with a gradient or bitmap fill. A bounding box with editing handles appears. When the pointer is over any one of these handles, it changes to indicate the function of the handle.
Center point
The rollover icon for the center point handle is a four-way arrow.
Focal point
The focal point handle appears only when you select a radial gradient. The rollover icon for the focal point handle is an inverted triangle.
Size
The rollover icon for the size handle (middle handle icon on the edge of the bounding box) is a circle with an arrow inside of it.
Rotation
Adjusts the rotation of the gradient. The rollover icon for the rotation handle (the bottom handle icon on the edge of the bounding box) is four arrows in the shape of a circle.
Width
Adjusts the width of the gradient. The rollover icon for the width handle (the square handle) is a double-ended arrow.
Press Shift to constrain the direction of a linear gradient fill to multiples of 45°.
A. Center point B. Width C. Rotation D. Size E. Focal point.
-
Reshape the gradient or fill in any of the following ways:
- To reposition the center point of the gradient or bitmap fill, drag the center point.
- To change the width of the gradient or bitmap fill, drag the square handle on the side of the bounding box. (This option resizes only the fill, not the object containing the fill.)
- To change the height of the gradient or bitmap fill, drag the square handle at the bottom of the bounding box.
- To rotate the gradient or bitmap fill, drag the circular rotation handle at the corner. You can also drag the lowest handle on the bounding circle of a circular gradient or fill.
- To scale a linear gradient or a fill, drag the square handle at the center of the bounding box.
- To change the focal point of a circular gradient, drag the middle circular handle on the bounding circle.
- To skew or slant a fill within a shape, drag one of the circular handles on the top or right side of the bounding box.
- To tile a bitmap inside a shape, scale the fill.
To see all the handles when working with large fills or fills close to the edge of the Stage, select View > Pasteboard.
Lock a gradient or bitmap to fill the Stage
You can lock a gradient or bitmap fill to make it appear that the fill extends over the entire Stage and that the objects painted with the fill are masks revealing the underlying gradient or bitmap.
When you select the Lock Fill modifier with the Brush or Paint Bucket tool and paint with the tool, the bitmap or gradient fill extends across the objects you paint on the Stage.
Use a locked gradient fill
-
Select the Brush or Paint Bucket tool and select a gradient or bitmap as a fill.
-
Select Linear or Radial from the Type menu in the Color panel.
-
Click the Lock Fill modifier .
-
First paint the areas where you want to place the center of the fill, and then move to other areas.
Use a locked bitmap fill
-
Select the bitmap to use.
-
Select Bitmap from the Type menu in the Color panel.
-
Select the Brush or Paint Bucket tool.
-
Click the Lock Fill modifier .
-
First paint the areas where you want to place the center of the fill, and then move to other areas.