Wednesday

Paths, Selection, Subselection, Lasso Tool

Paths are made up of:
  • Path points
  • Line Segments
A vector graphic is made up of paths

Selection Tool (V)
The black pointer is the Selection Tool for selecting Strokes, Fills, lines (or parts of them) individual objects, or groups of objects.

Options are:
Snap to Objects. Icon magnet
Smooth to smooth the curves of a selected shape/line
Straighten to straighten the outlines of selected shape/line

Open a New Document
Layer 1
  • Name ‘Stage’
  • Change Background color of Stage to Light Yellow
  • Click Fill Color select Red
  • Click Oval (O)
  • Draw a circle
  • Change Fill Color to Blue
  • Click Rectangle (R)
  • Draw a square
  • Click Selection (V)
Snap to Objects
  • Move circle Fill out of Stroke
  • Click Snap to Objects icon
  • Place pointer next to edge of circle Fill
  • Move toward a square corner
A small circle on the edge changes to a snapping circle when close to square corner
                                                


                             

  • Place pointer in middle of circle Fill
  • Move toward a different square corner
Circle Fill snaps to square corner

                                       
                           
Smooth
  • Place pointer on circle Stroke
  • Hold/drag to change shape of Stroke
  • Click Stroke to select
  • Click Smooth
The Stroke line is smooth a little

Straighten
  • Delete Stroke
  • Place pointer on edge of circle
  • Hold/drag to change shape of circle
  • Select circle
  • Click Straighten
The circle line is straightens a little


Subselection Tool (A)
This tool edits the Paths, vector points and vector point Control Handles of an object.

            
Vector Points on a Curved Paths
  • Double click the Eraser to clear the Stage
  • Click Oval (O)
  • Change Stroke height to 3
  • Draw a circle
Snapping circle appears indicating circle with Snap to Object selected
  • Press/hold Ctrl
  • Select and move Fill outside of Stroke
  • Click Subselection (A)
  • Click the Stroke and Fill of the circle
Vector points appear around the Stroke and Fill.

Control Handles
Curved paths have Control Handles
Control Handles rotate around vector points
Path points move the Control Handles.
  • Click a vector point on the Fill
Control Handles appear on that vector point and a single Control Handle for the vector points on either side
  • Move Control Handles to change the path of the Fill
  • Move Control Handle closer to the vector point for a smaller curve.
  • Move Control Handle further away from vector point for larger curve.
The curve follows the direction of the handle (up, down, in, out)


                         
Pencil (Y)
  • Double click the Eraser to clear the Stage
  • Click Pencil (Y)
  • Draw a curving line
  • Click Subselection (A)
  • Click the line
Curved line has many vector points

                
Delete
The fewer the vector points the better
  • Click Zoom
  • Zoom in on line
  • Click Subselection (A)
  • Click the line
  • Click on a vector point
  • Press Delete
Not needed vector points are deleted.

                                                               
  • Click Selection (V)
  • Double click line to select
  • Click Smooth several times
  • Click Subselection (A)
  • Click the line
Line has been smooth removing vector points                                      


                              
                                             
Vector Points on a Straight Paths
  • Double click the Eraser to clear the Stage
  • Change Fill Color to Green
  • Click Rectangle (R)
  • Draw a square
  • Click Selection (V)
  • Move Fill outside of Stroke
  • Click Subselection (A)
  • Click the Stroke
Vector points appear on each corner
  • Hold/drag a vector point to change the path
  • Click Selection (V)
  • Click one side of the square to select
  • Move selected line segment
  • Click Subselection (A)
  • Click on moved line segment
Line has vector points on each end


                                         
  • Move one of the vector points to overlap a line
  • Click lines
A vector point appears where lines cross                                             

                        
                       
  • Click Selection (V)
  • Click each line around center vector point
  • Move selected line segments
Where the line crosses makes individual line segments that can be moved

                                              
  • Double click Eraser to clear the Stage

Eraser (E)
The Eraser reshapes the path on vector graphics.
  • Change Fill Color to Orange
  • Click Oval (O)
  • Change Stroke height to 1
  • Draw a circle
  • Press/hold Ctrl
  • Move Fill outside of Stroke
  • Click Eraser (E)
  • Erase part of the Fill leaving a some of the middle
  • Click Subselection (A)
  • Select the edge of the circle
Vector points following the new path
  • Select the middle of the circle
Middle is a different vector graphic

    
Lasso (L)
To select objects by drawing either a freehand or straight-edged selection area.

Options are:
Magic Wand
Magic Wand Settings
Polygon Mode

Freehand
  • Double click Eraser to clear the Stage
  • Click Oval (O)
  • Draw a circle
  • Click Lasso (L)
  • Draw around a section of the circle without closing the Lasso line
Lasso area is selected. Flash automatically closes the loop

                   
Polygon Mode
  • Deselect the circle
  • Options select Polygon Mode
  • Click to set the starting point
  • Place pointer at end location of the first line segment
  • Click
  • Continue placing end points for all line segments.
  • Double click to close selected area
Straight lines segments are used to select an area


                         


Freehand and Straight-Edge Selection
  • Deselect the Polygon Mode
  • Deselect the circle
  • Click to set the starting point
  • Draw a semi circle without releasing mouse
  • Press/hold Alt
  • Release mouse
  • Click and drag line segment to close freehand selection
  • Release Alt
Straight lines segments and curved selection are used to select an area

Magic Wand
Magic Wand selects areas of a bitmap graphic that contain the same or similar colors.
Bitmap graphics must be Break Apart Ctrl+B to use the Magic Wand
  • Double click Eraser to clear the Stage
  • Click File>Import>Import to Stage
  • Import a bitmap file
  • Click Modify>Break Apart Ctrl+B
  • Click Lasso (L)
  • Select Magic Wand
  • Click bitmap graphic
Pointer changes to Magic Wand icon

                                 
 

                                 
  • Click areas of bitmap graphic to select
  • Press Delete
Selected area is deleted.                 

                 
Magic Wand Settings changes how wand selects


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

Tuesday

Grid, Guide, Ruler and Snapping

View>Grid
View>Guides
View>Rulers
View>Snapping

Grid
A grid is a set of lines behind the artwork in all scenes.
Objects can be snapped to the grid.
The size and line color of the grid can be modified

Open a New Document

Grid
Layer 1
  • Name ‘Stage’
  • Click View>Grid>Show Grid
A Grid appears on the Stage
   

                                         
Grid Color
  • Click View>Grid>Edit Grid
  • Change color to Red
The default color of gray is changed to red
                               
                                                       

                                             
Grid Size
  •  Click View>Grid>Edit Grid
  • Change size to 30 by 30
Size of Grid is larger
                                                                       
                                                                          
  • Click Fill Color select Blue
  • Click Rectangle (R)
  •  Select Drawing Objects (J)
  • Draw a square
  • Click View>Grid>Edit Grid
  • Check Snap to grid
  • Click Selection (V)
  • Place pointer over Stroke and move
A small circle appears. When close to snapping the size of the circle increases

                                                                        
                                                                 
  • Place pointer in center of square
  • Move square
Stoke and Fill move as one object. Snapping circle appear either on the Stroke or center of Fill

Rulers
Ruler units (pixels, inches, etc) are changed in Document Properties>Ruler units
  • Right click the Stage or Work Area
  • Click Rulers
Rulers appear on left side and top of Work Area
Stage upper left corner aligns with Zero on top and left Ruler measurements
                                                            

                                                                            
  • Move the square
Moving an object reveals the dimension lines in the Ruler areas
             


                                                                   
                                                
  • Right click the Stage or Work Area
  • Click Document Properties
  • Change Ruler units to Inches
Rulers changes to inches

 
                                                         
  • Click Zoom
  • Zoom in on square
  • Right click the Stage
  • Select Grid>Edit Grid
  • Change size to .5 by .5
Grid lines up with ½ markers on Ruler
                                                
                                                                          
                                                                
           

          

                                                              

                                                                                                                                                                                         
  • Right click the Stage
  • Click Document Properties
  • Change Ruler units to Pixels
  • Right click the Stage
  • Select Grid>Edit Grid
  • Change size to 25 by 25
  • Double click Hand to center Stage
  • Double click Zoom to return to 100% view

Guides
Guides are dragged horizontal or vertical from the rulers onto the Stage
Guide can be moved, locked, hidden and removed.
Guide can have object snapped to them
Guide color can be changed

Snap to Grid
  • Click Selection (V)
  • Right click Stage or Work Area
  • Select Guide>Show Guides
  • Drag a horizontal guide from top Ruler
Guide snaps to grid when close          


                                                                                      
  • Right click Stage or Work Area
  • Select Grid>Edit Grid
  • Uncheck Snap to grid
  • Drag a vertical guide from left ruler and place near the grid
Guide doesn’t snap to grid

Snap to Guide
  • Click View>Snapping>
  • Select Snap to Grid
  • Select Snap to Guides
  • Place pointer over Stroke on square
  • Move square
Smaller circle changed to the snapping circle indicating where square will snap to
Snapping to guides takes precedence over snapping to the grid in places where the guides fall between grid lines.
  • Right click Stage or Work Area
  • Select Guide>Lock Guides
  • Drag a vertical guide from left Ruler
  • Hold/drag guide
All guides can not be moved

Show/Hide Guides
  • Right click Stage or Work Area
  • Deselect Guide>Show Guides
Guides are hidden from the Stage and Work Area
  • Click in Ruler area
Guides appear on the Stage and Work Area

Remove Guides
  • Right click Stage or Work Area
  • Deselect Lock Guides
  • Hold/drag vertical guide back to Ruler
Guide is removed
  • Right click Stage or Work Area
  • Select Guide>Clear Guides
All guides are removed

Edit Guides
·        Drag a vertical and horizontal guide onto the Stage
·        View>Guides>Edit Guides
·        Change color to Black
Guides are now Black
·        View>Guides>Edit Guides
·        Change color to Green

                                          
         

Snapping
Snapping precisely places an object on the Stage by affixing itself to objects and alignment tools.

Snap Align   Set as default
Snap to Grid
Snap to Guides   Set as default
Snap to Pixels
Snap to Objects
Snap Editing
Edit Snap Align
Snap align settings changes where the alignment lines appear on the stage. Like distance from Stage border or Object spacing distance.
Center alignment relates to horizontal or vertical  alignment lines appearing in the center of an object. Different size/Shape objects can be aligned in a straight line using the center as the reference point.

Snap to Align 
    ·        View>Grid>Show Grid 
    ·        Deselect Show Grid 
    ·        View>Snapping>Snap Align 
    ·        Move square toward upper left corner of the Stage
Horizontal and vertical Alignment lines appear
·        View>Snapping>Edit Snapping
·        Change Stage border to 40
·        Click Zoom
·        Zoom in on square
·        Click Selection (V)
·        Move square to align with the Ruler 40 pixel measurement
Horizontal and vertical Alignment lines align with 40 pixels
 
                                                                 

·        Double click Hand to center Stage
·        Double click Zoom to return to 100% view
      Deselect square
·        Change Fill Color to Yellow
·        Click Oval (O)
·        Draw a circle
·        Click Selection (V)
·        Move circle around square using Alignment lines for placement
Snap to Guides
·        View>Snapping>Snap to Guide
  • Hold/drag a vertical guide to 100 pixel marker
  • Drag a horizontal guide to 100 pixel marker
Dimension line changes to white when on whole markers

  • Place pointer in center of square
·        Move square to crossed guide lines
Snapping circle appears when square center is close to center point
       ·        Place pointer in center of circle
·        Move circle to horizontal guide until snapping circle appears
Centers of circle lines up with center of square

                                             
  • Place pointer on Stroke
  • Move circle to vertical guide until snapping circle appears
Circle Stroke aligns with vertical guide
 
                                                             

  • Place pointer in center of circle
  • Move circle to center of square
Circle is placed in center of square

 
                         
Snap to Objects
  • Clear Guides
  • View>Snapping>Snap to Objects
  • Place pointer in center of circle
  • Move circle to a corner on the square until snapping circle appears.
Circle center snaps to corner of square


                        
  • Place pointer on Stroke
  • Move circle to a corner on the square
Circle Stroke snaps to corner of square
  • Double click Eraser to clear the Stage
  • Click Rectangle (R)
  • Hold/drag tool
Snapping circle appears when object is a square
  • Press/hold Ctrl
  • Deselect the square
  • Change Fill Color to Red
  • Click Oval (O)
  • Hold/drag tool
Snapping circle appears when object is a circle
  • Click Line (N)
  • Hold/drag tool
Snapping circle appears when line is vertical or horizontal
  • Double click Eraser to clear the Stage
  • Change Fill Color to Blue
  • Click Rectangle (R)
  • Draw a square
  • Click Free Transform (Q)
  • Rotate square stopping on snapping circles
Rotated objects snap to logical positions such as 45 degrees when Snap to Object is on

Snap to Pixels
Used to snap to an exact pixel
Pixel grid appears when Stage view is 400% or higher
The pixel grid represents the individual pixels that will appear in the Flash application.
  • View>Edit Grid
  • Change color to Gray
  • View>Snapping>Snap to Objects
  • Deselect Snap to Objects
  • View>Snapping>Snap to Pixels
  • Change Stage view size to 400%
  • Adjust scroll bars to move square to center of Work Area
  • Place pointer on Stroke and move the square
A small circle indicates what pixel is snapped to
  • Press/hold the X key
Pixels grid is temporarily hidden
 
Dimension Lines
  • Double click Eraser to clear the Stage
  • Click Rectangle (R)
  • Deselect Drawing Object
  • Draw a square
  • Click Line (N)
  • Press/hold Shift
  • Drag a 45 degree line
Hold Shift constrains Line tool to 45 degree movements
  • Click Selection (V)
  • Place pointer on end point of line.
Selection pointer change to show corner tail
  • Move top of the line to snap to corner of square
  • Click Line (N)
  • Starting at end of line not connected to the square
  • Hold/drag line to top square corner
  • Hold/drag line to opposite square corner
A snapping circle appears at starting point and ending point
  • Click Selection (V)
  • Place pointer where the three lines meet
  • Hold and move lines to change angle and distance from square
Lines move as one when snapped together at end point and on square corners







Edit Snapping
  • View>Snapping>Edit Snapping
  • Select only Snap to Align and Snap to Guides
  • Set Stage border to 18 px
  • Click Save Default
Alignment lines are very useful as Default in all documents along with Snap to Guides

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