Hand, Zoom, Free & Gradient Transform Tools

View

View is the second section in the Tools panel

There are two icons:

• Hand Tool (H)
• Zoom Tool  (M,Z)

                     

Hand Tool

This tool moves the Stage around

Double click will center the Stage and expands the Stage to fill the Work Area keeping the document width and height in ratio.

Spacebar, press and hold to use Hand tool while another tool is selected.

Zoom Tool

This tool will double the Stage size or reduce by half the Stage size. The current size of the Stage is shown in the Stage View Size window

Stage

Maximum Stage zoom in is 2000%
Minimum Stage zoom out is 8%
Double click to change Stage size to 100%

Ctrl+spacebar, press and hold to use Enlarge Zoom while another tool is selected

Ctrl+Shift+spacebar, press and hold to use Reduce Zoom while another tool is selected   

                                  

Zoom tool has two Options:

• Enlarge (+)
• Reduce (-)

Open a New Document

Layer 1

• Name ‘Stage’
• Draw a small square
• Double click Zoom to set Stage size at 100%
• Options click Enlarge (+)
• Click on square, Stage or Work Area to Enlarge. (Stage is 200%)
• Press/hold Alt key. Zoom tool changes to Reduce (-)
• Click to reduce the Stage. (Stage is 100%)

Each click changes the Stage size either up or down

• Hold/drag Zoom over a corner of the square and release to Enlarge that area
• Double click the Hand icon to center Stage
• Double click the Zoom icon to return Stage size to 100%
• Select Reduce (-) in Options
• Click Stage to Reduce. (Stage is 50%)
• Press/hold Ctrl key

Pointer has changed from the Zoom tool to the Selection tool

• Click Fill to select and move outside of Stroke
• Double click Hand to center
• Double click Zoom to return Stage size to 100%
• Click Hand (H).
• Hold/drag Stage to different positions
• Click Zoom.
• Press/hold Spacebar to use Hand tool

 

Gradients

A gradient is a multicolor fill in which one color gradually changes into another color. You can apply up to 15 color transitions to a gradient for some striking effects.

There are two types of gradients for either the Fill or Stroke:

·        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.

Radial Fills

• Clear the Stage
• Click Fill Color
• Click No Color icon
• Draw a Circle

Circle has only a Stroke with no Fill

• Fill Color, select the Red Radial fill
• Click the Paint Bucket (K)
• Place the Tip of the Paint Pour where you want the highlight to be.
• Click on circle.

Click in different areas of circle to move highlight

Linear Fills

• Select (V) the Fill and Delete leaving just the Stroke.

• Fill color, select the White to Gray Linear fill
• Click the Paint Bucket (K)
• Click on circle to fill
• Hold/drag Paint Bucket across circle to change direction and look of linear fill.
• The starting point is the hold click. The ending point is the release click.

Gradient Transform Tool (F)

This tool is used to transform a gradient Fill by adjusting the size, direction, or center of the fill.

A bounding box with editing handles is displayed. When the pointer is over any one of these handles, it changes to indicate the function of the handle.

Center point Select and move the center point handle to change the center point of the gradient. The rollover icon for the center point handle is a four-way arrow.

Focal point Select the focal point handle to change the focal point of a radial gradient. The focal point handle is displayed only when you select a radial gradient; the rollover icon for the focal point handle is an inverted triangle.

Size Click and move the middle handle icon on the edge of the bounding box to adjust the size of a radial gradient. The rollover icon for the size handle is a circle with an arrow inside of it.

Rotation Click and move the bottom handle on the edge of the bounding box to adjust the rotation of the gradient. The rollover icon for the rotation handle is four arrows in the shape of a circle.

Width Click and move the square handle to adjust the width of the gradient. The rollover icon for the width handle is a double-ended arrow.

Gradient Transform (F)

• Select (V) the Fill and Delete leaving just the Stroke

Radial Fill

• Fill color, select the Green Radial fill
• Click Paint Bucket (K)
• Click the center of the circle
• Click Gradient Transform (F)
• Click the Fill

Gradient Transform tool appears on the circle

• Move the Focal point back and forth.
• Place the Focal point midway to the left of the Center point
• Move Center point back and forth and up and down
• Move Width in and out
• Move Size in and out
• Move Rotate

Linear Fill

• Select (V) the circle and Delete
• Fill Color, click No Color icon
• Draw a square

Square has only a Stroke with no Fill

• Fill color, select the Blue to Gold linear fill
• Click Paint Bucket (K)

• Click square with linear fill
• Click Gradient Transform (F)
• Click the Fill

Gradient Transform tool appears with side bars

• Rotate horizontal so Gold is on the bottom and Blue is on the top.
• Move center circle half way down toward the bottom
• Move Width bars further apart  to increase white are between Gold and Blue

The square has a ground and sky appearance

Free Transform Tool (Q)

This tool is used to scale, rotate, compress, stretch, or skew lines and shapes. Use the Free Transform tool to compress your drawing.

Moving the pointer over and around the transform bounding box changes the pointer to indicate which transformation function is available.

Handles: Drag to transform

• Select (V) the square and Delete

• Change Fill Color to Blue
• Draw a small square
• Select Free Transform (Q)
• Click the square

The square has the bounding box around it

Moving

• Place the pointer over the square within the bounding box

The pointer has the crossed arrow icon

• Drag the square to a new position. The Fill is moved.
• Drag the square back to the original position

Rotating

• Place pointer on the outside of any corner

The pointer has a circle with arrow icon

• Rotate square to a triangle position. Stroke has not moved

• Move center circle halfway up toward corner
• Rotate square

Center of rotation has changed

• Press/hold the Shift and rotate

Square rotates in 45 degree increments

• Press/hold Alt and rotate

Square rotates from opposite corner

• Place pointer on one of the corners to resize proportionally
• Hold/drag square to a rectangle shape
• Hold shift and drag a corner to increase size.

Rectangle has resized proportionally

• Place pointer on one of the side handles.
• Hold/drag rectangle to increase or decrease the width.

To Skew

• Place pointer on the outline between the transformations handles
• Hold/drag to skew the shape

To Distort

• Press/hold Ctrl. The pointer has changed to an arrow
• Hold/drag a corner or side handle.
• Press/hold Ctrl+Shift. The pointer has changed to an arrow with handle symbol.
• Hold/drag a corner

The opposite corner also moves the same distance.

The Stroke

• Clear the Stage
• Draw a square
• Select (V) the Fill and Delete leaving just the Stroke
• Click Free Transform (Q)
• Double click the Stroke to select the whole Stroke for transformation
• Click outside the Stroke to Deselect
• Click a Stroke line to select that line for transformation

 

“Never discourage anyone who continually makes progress, no matter how slow.”

Plato

Drawing Oval, Rectangle, Polygon and Star

Selection Tool (V)

This is the basic tool used with objects.

The pointer changes to indicate which selection option is active.
Shift, press and hold to use Selection tool while another tool is selected

Selected object change from solid to a selected look.

Mouse cursor:

• Pointer with square: Pointer is Outside of object
• Pointer with crossed arrows: Pointer is On the Fill, Stroke or object to move or select
• Pointer with U-shaped line. Pointer is On the Fill, Stroke or object to alter the shape. Object is NOT selected.
• Pointer with right-angle line. Pointer is On the corner of a Fill, Stroke or object to alter that corner. Object is NOT selected.

The Selection tool:

• Selects objects
• Moves objects
• Alters objects
• Deletes

Select:

• Click once on the Fill or Stroke to select

• Double click to select the Fill and Stroke
• Hold/drag around object to select the object. (Fill and Stroke)

Move:

• Select the Fill to move
• Select the Stroke to move
• Select the object. (Fill and Stroke) to move

Alters:

• Changes the shape of a Fill
• Changes the shape of a Stroke
• Changes the shape of the object. (Fill and Stroke)

Delete: Used with the Delete key on the keyboard

• Select Fill and press Delete
• Select Stroke and press Delete
• Select the object (Fill and Stroke) and Delete

Good Idea: After using another tool, click back to the Selection (V) tool because this tool does not affect the appearance of the Stage or objects on the Stage unless used with that object.

Oval Tool (O)

The Oval tool is used for drawing ovals and circles.

Circle: To draw a circle, hold down shift and drag tool to desired circle size.

The Oval tool is made up of two separate parts:

• Fill
• Stroke

The Fill is the inside. The Fill works with two other Tools panel items.

• Paint Bucket Tool (K)
• Fill Color

The Stroke is the outside line. The Stroke works with two other Tools panel items

• Ink Bottle Tool (S)
• Stroke Color

Object Drawing (J)

When selected the Object Drawing groups the Fill and Stroke as one object and places a box around the object. This box is harder to see with the Rectangle tool.

Modify>Ungroup Ctrl+Shift+G to separate the Fill and Stroke

This option is available for any drawing tool: oval, rectangle, polygon, star, pen, line pencil, brush

NOTE: This option stays selected even if tool choice is changed. Click to deselect.

Colors

Colors is the third division of the Tools panel and used to pick a color for an object.

Color icons:

• Stroke Color: Pencil icon. This is used with the Ink Bottle and the Stroke of an object.
• Fill Color: Bucket icon. This is used with the Paint Bucket and the Fill of an object.
• Black and White: Used to change Stroke Color to black and Fill Color to white.
• No Color: Used to place no color in the Stroke Color and/or Fill Color.
• Swap Colors: Used to swap colors between Stroke Color and Fill Color.

Color window icon. Click arrow to expand window for color choices.

• Active color and its HTML (Hexadecimal) #.
• Alpha Transparency, percent and slider bar
• No Color icon
• Advance Color Mixer icon
• Color swatches
• Linear and Radial effects.

Advance Color Mixer

Color can have the Hue, Saturation and Luminosity changed and added to a Custom Color Palette.

Open a New Document

Layer 1

• Name ‘Stage’
• Click Fill Color and select Red
• Click Stroke Color and select Blue
• Click Oval (O) to select
• Draw a circle
• Selection (V) Hold/drag Fill outside of the Stroke

There are two shapes on the Stage. Fill and Stroke.

• Place cursor over Stroke (cursor with U-shaped line)
• Click to select Stroke and move, keeping Stroke and Fill separate

Cut-out Affect

• Move Fill over half of the Stroke
• Click Work area to deselect Fill
• Move Fill away from Stroke

Half of the Stroke is erased or Cut-Out

Clear the Stage: Select (V) all object and press Delete

• Click Oval (O) Draw a circle
• Select (V) the Fill and move outside the Stroke
• Select (V) the Stroke and move over half of the Fill

Stroke creates three Fill areas.

• Click Fill Color and change to yellow
• Select Paint Bucket (K) and click on one of the Fill areas
• Select Fill Color and change color to Blue
• Click inside the Stroke area (Paint Bucket is still selected)

There are three Fills, red, yellow, blue. Selected Stroke can be move again to create more Fills in different colors.

• Move the red Fill outside the Stroke. Changing the color creates new Fills.
• Move the other Fills outside the Stroke

Each Fill made a new shape. 

             

Alter Fill

Clear the Stage

• Draw a circle
• Select (V) Move the Fill outside the Stroke
• Deselect the Fill
• Place pointer over the Fill edge (pointer with U-shaped line)
• Hold/drag Fill to change the shape
• Drag some of the Fill over the Stroke

The Stroke cuts the Fill

Alter Stroke

Clear the Stage

• Draw a circle
• Select (V) Move the Fill outside the Stroke
• Place pointer over the Stroke (pointer with U-shaped line)
• Hold/drag Stroke to change the shape
• Drag some of the Stroke over the Fill

The Stroke cuts the Fill

Fill and Stroke

Clear the Stage

• Draw a circle
• Click Selection (V)
• Place pointer over the Fill edge (pointer with U-shaped line)
• Hold/drag to change the shape
• Select (V) the Fill and move outside of the Stroke 
• Both the Fill and Stroke changed shape

Drawing Starting Points

• Clear the Stage
• Adjust the Stage size so the Work Area is around it.
• Click the Fill Color
• Click the No Color icon. Fill Color is white with a red line.
• Click the Oval (O)
• Place the center of pointer symbol over a  corner of the Stage
• Hold/drag an oval toward the center of the Stage.

Starting point of the oval is the corner

• Place the center of pointer symbol over a  corner of the Stage
• Press/hold the Alt key
• Hold/drag an oval toward the center of the Stage

The corner stays the center of the oval

• Place the center of pointer symbol over a  corner of the Stage
• Press/hold the Shift and Alt keys
• Hold/drag a circle toward the center of the Stage

The corner stays the center of the circle

Rectangle Tool (R)

The Rectangle and Oval tools behave the same.

The Rectangle tool expands to the PolyStar tool.

PolyStar Tool

Properties>Options>Tool Settings window

 Tool Settings

• Style
• Number of Sides:
• Star points size

STYLE: Either polygon or star

NUMBER OF SIDES: How many sides the polygon or star have. A triangle, the polygon would be set to three.

STAR POINTS SIZE: How wide the points are.

Polygon

Clear the Stage

• Select the Polygon
• Place the center of the pointer symbol over a  corner of the Stage
• Hold/drag a polygon toward the center of the Stage

The corner stays the center of the polygon

The pointer draws from a polygon corner

Polygon rotate easily

• Place the center of the pointer symbol over a  corner of the Stage
• Press/hold the Shift key
• Hold/drag a polygon toward the center of the Stage

The corner stays the center of the polygon

The pointer draws from the side or corner of a polygon

Pointer moves along side and corner of polygon

Polygon does not rotate easily

Star

Clear the Stage

• Select the Star
• Place the center of pointer symbol over a  corner of the Stage
• Hold/drag a star toward the center of the Stage

The corner stays the center of the star

The pointer draws from a star corner

Star rotate easily

• Place the center of pointer symbol over a  corner of the Stage
• Press/hold the Shift key
• Hold/drag a star toward the center of the Stage

The corner stays the center of the star

The pointer draws from the side or corner of a star

Pointer moves along side and corner of star

Star does not rotate easily

Color

Clear the Stage

• Select Fill Color to Red
• Draw an Oval (O)
• Click Fill Color and change color
• Select Paint Bucket (K) and click Fill to new color
• Click Stroke Color and change color
• Select Ink Bottle (S) and click Stroke to new color
• Select (V) the Fill and move outside of Stroke (Fill is selected)
• Fill Color. Click and hold triangle to expand color window
• Drag eyedropper to a different color and release hold.

Fill has changed color

• Select (V) the Stroke
• Stroke Color. Click and hold the triangle to expand color window
• Drag eyedropper to a different color and release hold

Stroke has changed color

• Click Fill Color
• Using the eyedropper and click a different color
• Select Paint Bucket (K) and click inside Fill

Fill color has changed

• Click Stroke Color (Stroke is not selected)
• Use the eyedropper and click a different color
• Select Ink Bottle (S) and click on Stroke

Stroke color has changed

• Click Swap Colors icon

Fill and Stroke color have swapped

• Click Black and White icon

Stroke changed to Black. Fill changed to White

“Never discourage anyone who continually makes progress, no matter how slow.”

Plato

Basics

 I’m using Macromedia Flash Professional 8 with Windows XP

Good Idea:  Before creating a new document have a concept of the project. For large animations do a Storyboard first. It is not easy to make document adjustments once into the project. The most important consideration is what size the document will be.

Save Often: Flash doesn’t have a history feature like Photoshop where the history of a project is saved with it. The history in Flash is deleted when the project is saved. In Flash retrieving an early time period of a project is done with a saved version.

Testing: Always test the finished project live before distributing (Web browser, cell phone, CD, etc) Choose people you know as testers to view your animation for feedback.

     Window Size: Screen 800 by 600 equals 550 by 400

Start Page

• Open a Recent Item (List last 8 files opened)
• Create New
• Create from Template
• Extend. Macromedia Flash Exchange is an online site for additional plug-ins and Exchange where helpful downloads are available (buy and free downloads)

  

Open a New document:

• Start Page (Welcome Page) Click Create New>Flash Document. If the Start Page is not opened: Edit > Preferences > General > On launch >Show Start Page
• Click File>New>Flash Document

Flash Document:

• Menu Bar
• Open document tab
• Move grippers
• Tools panel. (If not opened: Window>Tools)
• Timeline panel: (If not opened: Window>Timeline)
• Work area: Gray area. (also referred to as off stage or backstage)
• Stage: White area
• Panel docking area arrows
• Properties. (If not opened: Window>Properties)

MENU BAR: List all the ways you can interact with a Flash file.

OPEN DOCUMENT TAB: Each opened document has its own tab. Documents are shown vertically across the Timeline panel.  The document window buttons are the standard; collapse, expand, close. Items can be copied from one document to another.

MOVE GRIPPERS: Each panel has move grippers. Place mouse over the grippers, hold/drag panel to a new docking location or leave panel on Work area as a floating panel. If working with more than one monitor, floating panels can be moved to another monitor.

TIME LINE: This is where the data goes that makes up the animation. (Window>Timeline, This panel should be checked to open as default)

TOOLS Panel: These are the tools for creating the animation. (Window>Tools, This panel should be checked to open as default)

WORK AREA: The surrounding gray area is off stage or backstage. Anything in the gray area is not seen by your audience when the animation is played.

STAGE: This is where all the animation action takes place. It relates to where actors are seen and perform.

PANEL DOCKING AREA ARROWS: These arrows expand and collapse the area where panels are docked (Docking means to make a panel stationary not floating)

PROPERTIES: Properties contain the document settings, tool drawing options and much more. (Window>Properties, This panel should be docked below Work area as default)

     View Area Size. To change the view size between the Work Area and the Timeline panel, hold mouse over the area between these sections. The mouse cursor will change. Hold/drag up or down to change the width of either area.

Stage/Document

The Stage area has different viewing size options in relation to the Work area.

  

Properties is where changes are made to the Stage and Document. The document properties can also be changed in Modify>Document Ctrl+J

Document Setting:

Should be set at beginning of the project. It is harder to set afterwards. A good size to start with is 550 x 400 pixels with a Frame rate of 12 fps (FramesPerSecond). The smaller the file size the faster the file loads.

• To embed metadata within your SWF files, improving the ability of web-based search engines to return meaningful search results for Flash content, do the following:
• Enter a descriptive title in the Title text box.
• Enter a description in the Description text box.     

·        Metadata is defined as data providing information about one or more aspects of the data, such as:

o       Means of creation of the data

o       Purpose of the data

o       Time and date of creation

o       Creator or author of data

o       Location on a computer network where the data was created

o       Standards used

o       The song title of a piece of music

Panels

Panels are located in Window>

• Click Window> and select desired panel
• Panels have their own menu options and Help
• Panels can float or be docked.
• Panels can be grouped with other panels or not.
• The black triangle next to the panel name expands or collapses the panel.

Properties Panel

The Properties panel interacts with almost everything done in Flash. Each element, documents, objects, tools, button, etc have their own properties. This panel is used constantly while creating the animation and is often left opened. The Properties panel should remain docked.

• Click on an item to view its properties.
• Click on the Work area to view the document’s properties.
• Locked layers will not show its Properties. Unlock to view the Properties

Tools Panel

The tool’s description and shortcut key is revealed by holding the mouse cursor over the tool icon.

Icons with black arrows expand for more options.

Tools panel has four sections:

• Tools
• View
• Colors
• Options

Timeline    

The Timeline determines what order the frames appear in the animation and how long each frame stays onstage.  

Scene: There can be more than one scene in the Timeline

Symbols have their own Timeline

Buttons have their own Timeline

Timeline Panel

• Timeline button
• Frame #
• Edit Scene Icon
• Edit Symbol Icon
• Menu
• Layers
• Frame #
• Playhead
• Current Frame
• Elapsed Time
• Frame Rate

TIMELINE BUTTON: Expands and collapses Timeline panel.

FRAME #: Shown in divisions of 5.

EDIT SCENE

EDIT SYMBOL

MENU: Options to change how frames are viewed

LAYERS

PLAYHEAD: Moves across frames to show action

LAYER FRAMES. Each layer creates its own unique frames.

CURRENT FRAME: Shows frame number when frame is selected or Playhead is over.

FRAME RATE; Frames per second

ELAPSED TIME: Time elapsed in each frame by seconds

Layers

Layers are where elements are placed to use in the animation. Each element has its own layer and frames to animate in.

SHOW/HIDE ALL LAYERS: Click the Eye icon to affect all layers. Click the circle on the layer to show/hide just that layer.

LOCK/UNLOCK ALL LAYERS: Click the Lock icon to affect all layers. Click the circle on the layer to lock/unlock just that layer.

SHOW ALL LAYERS AS OUTLINES: Click the Outline icon to affect all layers. Click the colored square on the layer to show outline for just that layer.

LAYER NAME: Double click to select and change name. Named layers are easier to work with.

ACTIVE INDICATOR: When the Pencil icon has a red line through it that indicates the layer can not be altered.

DELETE LAYER: Click to delete selected layer or right click in layer for options

INSERT LAYER FOLDER: Adds a new folder above selected layer

ADD MOTION GUIDE: Adds a motion guide above selected layer

INSERT LAYER: Adds a new layer above selected layer

Moving Layers:

Layers are moved up or down by clicking the layer then hold/drag it up or down. Layers are stacked from bottom to top like pieces of paper. Top layer covers lower layers.

Frames

Frames are like a film strip. You can place graphics, sound, video, etc into a Frame. The greater the number of Frames the longer the animation is. A rectangle inside a frame means it is a Frame.

Keyframes

• Keyframes define a stop place in a series of Frames. A circle inside a frame means it is a Keyframe.

Right click on a Frame to view the menu that shows what you can do with that Frame.

Open a new document

Properties are 550 x 400 with 12fps

Layer 1

• Name layer: ‘Stage’
• Lock layer

Layer 2

• Click Insert Layer
• Name layer: ‘Frames’
• Right click frame 30
• Select Insert Frame

Frames 1 to 30 are white. This is one frame span. The gray frame outlines are replaced

 

Selecting a group of frames. (Selected frames turn black)

• Click frame 30.
• Hold down the shift key and click frame 40 to select.
• Right click inside selected area
• Select Insert Frames

Frame span is now from frame 1 to 40

• Click frame 21.
• Hold down the shift key and click frame 40 to select.
• Right click inside selected area
• Select Remove Frames. Frames turn back to gray outlines.

Frame span is now from frame 1 to 20

Adding a Keyframe

• Right click frame 10
• Select Insert Keyframe

Keyframe circle symbol appears in frame 10 and the Frame rectangle symbol appears in frame 9. There are now two frame spans.

• Right click frame 9
• Select Insert Keyframe

Frame 9 and 10 are Keyframes and frame 8 is a Frame. There are three frame spans

• Right click frame 9
• Select Clear Keyframe

Frame 10 is a Keyframe and frame 9 is a Frame. There are two frame spans

Move Frames to increase frame span.

• Click and hold frame 20. Frame turns gray.
• Drag gray Frame to frame 30 and release.

The area between frame 1 and 30 is white. Frame 30 has changed to a Keyframe

• Click frame 30 to select
• Click and hold to turn Keyframe gray
• Drag gray Keyframe to frame 25 and release

Frame 25 is a Keyframe. Frame 30 is a Frame. There are three frame spans

• Click frame 25 to select
• Click and hold to turn Keyframe gray
• Drag gray Keyframe to frame 40 and release

Frame 40 is a Keyframe. There are two frame spans

• Click frame 39 (the Frame) to select
• Click and hold to turn Frame gray
• Drag gray Frame to frame 30 and release

Frame 40 and frame 30 are Keyframes. There are three frame spans.

• Click frame 29 (the frame) to select
• Click and hold to turn Frame gray
• Drag gray Frame to frame 50 and release

Frame 50 is a Keyframe. Frame 40 remains a Keyframe. There are four frame spans

• Right click frame 50
• Select Clear Keyframe. Frame 50 is now a Frame

• Click frame 39 (the Frame) to select
• Click and hold to turn Frame gray
• Drag gray Frame to frame 60 and release

Frame 50 is removed. Frame 60 is a Keyframe. There are four frame spans

Converting groups of frames to Keyframes

• Click frame 60 to select
• Hold shift and click frame 40. Frames 40 to 60 are selected
• Right click inside selected area
• Select Covert to Keyframes.

Frames 40 to 50 are Keyframes

 

“Never discourage anyone who continually makes progress, no matter how slow.”

Plato