IT tutorials
 
Graphics
 

Adobe Flash Catalyst CS5 : Changing stroke and fill (part 2) - Change stroke color and weight, Add and modify gradient fills

1/30/2012 6:26:12 PM
- How To Install Windows Server 2012 On VirtualBox
- How To Bypass Torrent Connection Blocking By Your ISP
- How To Install Actual Facebook App On Kindle Fire

Change stroke color and weight

Stroke is the line or outline that defines a shape you draw in Flash Catalyst—as in the “stroke of the pen” or “brush strokes.” In Flash Catalyst, you can choose a solid stroke, a gradient stroke, or no stroke at all.

A gradient is when two or more colors gradually blend together. A gradient stroke may seem strange, but if you make the weight of the stroke heavy enough, it becomes almost like an outer shape surrounding an inner shape.

Our panel design doesn’t require any fancy gradient strokes, but we do need to make a few minor modifications, beginning with the panel background.

1.
Select the Panel Background rectangle (the larger rectangle).

2.
In the Properties panel, make sure the Solid Stroke property is selected. Click the Stroke color swatch, and change the stroke color to black #000000.

3.
Change the Weight value to 2.

4.
Use the Layers panel to select the Ellipse, Thumb, Track, Header Overlay, and Panel Header.

5.
In the Properties panel, click the No Stroke property to remove the stroke from all five selected shapes.

6.
Choose Edit > Deselect All so that you can see the change a little better.

Note

Removing the stroke from a rectangle reduces its overall height and width.

Add and modify gradient fills

Let’s add a gradient fill to the Panel Header and the Header Overlay. Then, we’ll place the overlay on top of the header to hide the bottom rounded corners.

1.
Select the Panel Header rectangle.

2.
In the Properties panel, select the Gradient fill property.

A gradient swatch displays a preview of the gradient from left to right. Beneath the swatch are gradient color stops. They’re called stops because they control where one color stops and the next one begins.

By default, there are two color stops. The first stop is the current shape’s fill color (blue). The last stop is black. The artboard shows a gradient fade from blue to black.

3.
Click anywhere in the gradient swatch to add another color stop.

A new color stop takes on the color of the stop to its left.

4.
Click directly on the new stop to open the Color Picker.

You can change the color and the opacity of each color stop.

5.
Select white in the color palette.

The new stop color is white. In the artboard, the fill color fades from blue to white and then to black.

6.
Drag the white color stop left and right to see how this affects the gradient fill in the artboard.

You can add more color stops. You can also move the first and last stops to adjust where the fades begin and end.

7.
Drag the white color stop (and any other extra stops you’ve added) away from the gradient swatch to remove it.

You’re back to where you started, with a blue and black color stop.

Note

You cannot remove stops when there are only two stops left. You can remove the first or last stops as long as other stops exist in the middle.

8.
In the Properties panel, change the Fill Rotation value to 80. Make sure you change the Fill Rotation, not the Rotation for the shape.

The gradient fades from blue to black at an angle, making it a little more interesting.

9.
Select the Header Overlay rectangle.

10.
In the Properties panel, select the Gradient Fill property and change its Fill Rotation value to 80.

The same blue to black gradient is added to the Header Overlay rectangle.

11.
Shift-click the Panel Header rectangle to add it to the selection.

12.
With both parts of the header selected, choose Modify > Align > Bottom. Then choose Modify > Align > Left.

13.
Choose Edit > Deselect All.

14.
Choose View > Grid > Show Grid to deselect it and hide the grid.

The combined shapes make a panel header that’s square on the bottom with rounded top corners. The shapes are different sizes so the gradient rotation creates a seam. To hide the seam, you can change the Rotation value for one of the shapes until the gradient patterns line up perfectly.

15.
Select the Header Overlay rectangle (the smaller of the two rectangles). In the Properties panel, change the Fill Rotation value to 5.

Note

If you select multiple objects with different gradients (or some with no gradients), the properties show that no gradient is applied. Clicking the blank gradient swatch resets all items to the default black-and-white gradient.

16.
Choose Edit > Deselect All.

The gradient patterns line up and the seam is gone.

Note

A checkerboard pattern in the gradient swatch indicates areas of transparency.

 
Others
 
- Adobe Flash Catalyst CS5 : Changing stroke and fill (part 1) - Change the fill color
- Adobe Illustrator CS5 : Working with Layers - Showing and Hiding Layers and Objects, Merging Layers and Groups
- Adobe Illustrator CS5 : Working with Layers - Duplicating Layers and Objects, Locking Layers and Objects
- Dreamweaver CS5 : Editing Content in the Browser (part 2) - Registering an InContext Editing site & Making edits online
- Dreamweaver CS5 : Editing Content in the Browser (part 1) - Setting up InContext Editing templates
- Dreamweaver CS5 : Using Dreamweaver Templates - Updating Templates & Removing Template Markup
- Adobe Photoshop CS5 : Fixing Problems Caused by Your Camera’s Lens
- Adobe Photoshop CS5 : Removing Tourists the Easy Way
- Adobe After Effects CS5 : Adding transparency & Rendering the composition
- Adobe After Effects CS5 : Applying an animation preset
 
 
Top 10
 
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Finding containers and lists in Visio (part 2) - Wireframes,Legends
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Finding containers and lists in Visio (part 1) - Swimlanes
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Formatting and sizing lists
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Adding shapes to lists
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Sizing containers
- Microsoft Access 2010 : Control Properties and Why to Use Them (part 3) - The Other Properties of a Control
- Microsoft Access 2010 : Control Properties and Why to Use Them (part 2) - The Data Properties of a Control
- Microsoft Access 2010 : Control Properties and Why to Use Them (part 1) - The Format Properties of a Control
- Microsoft Access 2010 : Form Properties and Why Should You Use Them - Working with the Properties Window
- Microsoft Visio 2013 : Using the Organization Chart Wizard with new data
programming4us programming4us
 
Popular tags
 
Video Tutorail Microsoft Access Microsoft Excel Microsoft OneNote Microsoft PowerPoint Microsoft Project Microsoft Visio Microsoft Word Active Directory Biztalk Exchange Server Microsoft LynC Server Microsoft Dynamic Sharepoint Sql Server Windows Server 2008 Windows Server 2012 Windows 7 Windows 8 Adobe Indesign Adobe Flash Professional Dreamweaver Adobe Illustrator Adobe After Effects Adobe Photoshop Adobe Fireworks Adobe Flash Catalyst Corel Painter X CorelDRAW X5 CorelDraw 10 QuarkXPress 8 windows Phone 7 windows Phone 8 BlackBerry Android Ipad Iphone iOS
Celebrity Style, Fashion Trends, Beauty and Makeup Tips.