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