Flash CS3 colors tutorial: Difference between revisions
m (using an external editor) |
m (using an external editor) |
||
Line 47: | Line 47: | ||
=== How to use the color selection popups === | === How to use the color selection popups === | ||
When you select (or change) fill or stroke color, a color popup swatches pane will pop up. You then can select a color with the | When you select (or change) fill or stroke color, a color popup swatches pane will pop up. You then can select a color with the eye-dropper tool or alternatively from any color in the Flash workspace. | ||
You also can change alpha channel or type a 6 digit hexadecimal RGB Code (see color panel explanation below) | You also can change alpha channel or type a 6 digit hexadecimal RGB Code (see color panel explanation below) | ||
Line 72: | Line 72: | ||
=== Using color points === | === Using color points === | ||
* There are some | * There are some built-in gradients (linear and radial) you can use as is | ||
; Adjust color bands | ; Adjust color bands | ||
Line 89: | Line 89: | ||
* rotate gradients (both linear and radial). | * rotate gradients (both linear and radial). | ||
* stretch out the gradient | * stretch out the gradient | ||
* stretch the | * stretch the radial gradient in only one direction (make an oval) | ||
[[image:flash-cs3-linear-gradient-transform.jpg|frame|none|Linear gradient transform]] | [[image:flash-cs3-linear-gradient-transform.jpg|frame|none|Linear gradient transform]] | ||
Revision as of 19:30, 4 September 2007
Introduction
This is part of the Flash tutorials.
- Learning goals
- Learn to deal with colors
- Prerequisites
- Flash CS3 desktop tutorial
- Flash layers tutorial
- Flash drawing tutorial (at least some of it)
- Quality and level
- This text should technical people get going. It's probably not good enough for beginners, but may be used as handout in "hands-on" class. That is what Daniel K. Schneider made it for...
- It aims at beginners. More advanced features and tricks are not explained here.
- Materials (*.fla files you can play with)
- Color types overview
In Flash there are three kinds of colors
- Normal colors (solid)
- Gradients (linear and radial)
- Bitmaps
Both RGB and HSB model is supported for colors
Tools overview
- Tools panel
- Paint bucket and ink buckets
- Stroke color and fill color (for most tools). Select colors before you choose a tool to draw
- Properties panel
- Stroke color and fill color
- Color panel
- Color selection
- Swatches
- Preset colors
How to use the color selection popups
When you select (or change) fill or stroke color, a color popup swatches pane will pop up. You then can select a color with the eye-dropper tool or alternatively from any color in the Flash workspace.
You also can change alpha channel or type a 6 digit hexadecimal RGB Code (see color panel explanation below)
How to use the color panel
Select an object on the stage (or decide to modify the one that you just made)
We recommend to have the color panel docked on top right, else get it with menu Window-Color (or SHIFT-F9).
In the color panel you then can:
- Select the color type
- Select colors (depending on color type)
- Change the alpha channel
Gradients
There are 2 kinds of color gradients:
- Linear
- Radial
Using color points
- There are some built-in gradients (linear and radial) you can use as is
- Adjust color bands
- Move various 'color points left or right to make a band smaller or larger
- Add new color bands
- Click into the area of the color pointers
- Select a color in the window or double-click to select from the swatches
- Remove a color point
- Drag it down and off (below the gradient preview window)
Transforming gradients
With the gradient transform tool (hidden underneath the Free Transform tool) you can
- rotate gradients (both linear and radial).
- stretch out the gradient
- stretch the radial gradient in only one direction (make an oval)
The alpha channel
In computer graphics, alpha compositing is the process of combining an image with a background to create the appearance of partial transparency (wikipedia)
In more simple terms, when alpha is set to
- 100% you can't see through
- 80% bad see trough
- 50% in between
- 30% good see through
- 10% good see through, but very little color
- 0% no color left
Hint: With the alpha channel you can create other effects than see-through "windows". E.g. you can overlay textures of color or the other way round.
Drawing with bitmaps
- Importing a bitmap
There are two solutions:
- You can just paste into the library from the clipboard. I.e. if you see a nice (and copyright free) texture on the Internet: With Firefox (1) View image, (2) Copy Image, (3) CTRL-V into Flash
- Save the image on your computer then click on the Import button in the colors panel.
- Using a bitmap
- You can use the bitmap either as stroke or as fill color.
- Adjusting "gain size"
With the free transform tool you can ajust how a bitmap will be applied. You can change:
- Size, i.e. whether the bitmap is applied as is, or reduced or magnified in x, y direction or both
- Rotation
- Skew (a kind of distorsion)
Select the Free Transform tool, then
- Click on the fill or stroke
- Play with the handles (if the bitmap is big, you may have to search for these handle way out of the stage !)
Note: I have the impression that there may some bugs (i.e. the tool acts strangly when use twice with several instances of the same bitmap).
Links
- General color
- See the color article