Onion Skin

Onion Skins are useful in Frame by Frame animation

Timeline Onion Skin Icons

• Onion Skin
• Onion Skin Outlines
• Edit Multiple Frames
• Modify Onion Markers

                                  

                             

Onion Skin: Shows object in several frames at once.

Onion Skin Outline: Shows object as an outline in several frames at once.

Edit Multiply Frames: Shows objects as Fill and Stroke

Modify Onion Markers: Defines what frames have onion skins visible.

Markers move with Playhead

• Always Show Markers: Markers move with Playhead
• Anchor Onion:  Markers don’t move with Playhead
• Onion 2: Markers span is 5. Two to left and right of the selected frame
• Onion 5:  Marker span is 11. Five to the left and right of the selected frame
• Onion All: Markers at first and last frame. All onion skins are visible
• Markers can be dragged to desired placement

                               

Open a New Document

Layer 1

• Name ‘Stage’
• Lock layer

Layer 2

• Click Insert Layer
• Name ‘Circle’
• Right click frame 40
• Insert Frame
• Click Fill Color to Red
• Click Oval (O)
• Draw a circle in the Work Area to the left of the Stage
• Click Selection (V)
• Click frame 1
• Press/hold Shift
• Click frame 40
• Right click inside selected Keyframe Span
• Convert to Keyframes

All frames are Keyframes

                                             

• Open Timeline Menu
• Select Medium
• Click frame 10
• Move selected circle to bottom of left side of Stage
• Click frame 20
• Move selected circle to middle center of Stage
• Click frame 30
• Move selected circle to bottom of right side of Stage
• Click frame 40
• Move selected circle to Work Area on the right of the Stage

Layer 3

• Insert Layer
• Name ‘Guide’
• Click Stroke Color to Green
• Click Pencil (Y)
• Draw a line from starting position of circle to each position across Stage to ending position.
• Lock layer

Line is an up and down wave

                                              

Layer 2

• Click Selection (V)
• Click frame 10
• Move circle to line up with bottom of wavy line
• Click frame20
• Move circle to line up with top of wavy line
• Click frame 30
• Move circle to line up with bottom of wavy line
• Click frame 1 and 40 to move circle to start and ending position
• Move Playhead

Circle appears in each location

Frame by Frame Animation

• Click frame 5
• Move circle on line half way between frame 1 and frame 10
• Click frame 3
• Move circle on line half way between frame 1 and frame 5
• Click frame 2
• Move circle on line half way between frame 1 and frame 3
• Click frame 4
• Move circle on line half way between frame 3 and frame 5
• Click frame 7
• Move circle on line half way between frame 5 and frame 10
• Click frame 6
• Move circle on line half way between frame 5 and frame 7
• Click frame 8
• Move circle on line half way between frame 7 and frame 10
• Click frame 9
• Move circle on line half way between frame 7 and frame 10

Onion Skin

• Click frame 5
• Click Onion Skin icon
• Hold/drag onion skin markers to frame 1 and 10 to expand view of onion skin

Circles are semi transparent

                                                                                

• Click frame 10
• Move each circle in every frame to space evenly between frame 10 and frame 1
• Move Playhead

Repeat Frame by Frame Animation between frame 10 and 20 and between frame 20 and 30 and between 30 and 40.

Layer 3

• Click Show/Hide layer circle

Green guide line is hidden on the Stage

Layer 2

• Deselect Onion Skin
• Move Playhead to frame 1
• Press Enter

Circle animates up and down across the Stage

Onion Skin Outlines

Layer 3

• Click Show/Hide layer circle to reveal green guide line

Layer 2

• Click frame 20
• Click Onion Skin Outline
• Click in Work Area for Properties>Document
• Change Stage Background to Black

Green guide and onion skin outlines are very visible for working with.

                                             

• Make any adjustment to circle animation

Edit Multiple Frames

• Deselect Onion Skin Outlines
• Click Edit Multiple Frames

Circle is visible as Fill and Stroke in each frame for editing

                                                          

Modify Onion Markers

• Click frame 20
• Click Modify Onion Markers
• Click Anchor Outline
• Move Playhead

Markers do not move with Playhead

• Click frame 1
• Press Enter
• Click frame 20
• Click Modify Onion Markers
• Uncheck Anchor Outline
• Click Onion 2
• Move Playhead

Markers move with Playhead.

• Click Modify Onion Markers
• Click Onion All
• Move Playhead

Show all onion skins depending on where Playhead is moved.

                                          

                                                

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

Plato

Frames

Frames and layers are located in the Timeline panel.

Frames are numbered every fifth frame. Example: Frame 1 has a number. Frames 2, 3 and 4 don’t. Frame 5 has a number and so on.

Icons

• Center Frame
• Onion Skin
• Onion Skin Outlines
• Edit Multiple Frames
• Modify Onion Markers
• Current Frame is a  #
• Frame Rate is a # in fps
• Elapsed Time is a # in seconds
• Slider

            

Frame #1 starts with a Keyframe.

Keyframe is a Frame that defines a change to an object's properties for an animation or includes ActionScript code to control some aspect of your document.
The order in which Frames and Keyframes appear in the Timeline determines the order in which they are displayed in the animation. The arrangement of Keyframes in the Timeline can be edited to change the sequence of events in an animation.

Keyframe symbol is a circle

Frame symbol is a rectangle

Keyframe circle with content is black.

Keyframe circle with no content is white

Keyframe Span:

• Keyframes separate frames into sections or Keytframe Spans.
• Each Keyframe Span can have one or more different content.
• Keyframe Spans go from Keyframe to Frame

Frame Tinting:

• White Frames have no content
• Gray Frames have content. Gray area means there is a static object (doesn’t move)inside that section
• Light lavender Frames have motion tween content
• Light green Frames have shape tween content

         

                             

Selection (V)

Selected area turns black

• Click a Frame to select
• Double click inside a Keyframe Span to select span.
• Click layer to select all Frames

                     

Open a New Document

Layer 1

• Name ‘Stage’

Layer 2

• Click Insert Layer
• Name ‘One Span’
• Right click frame 15
• Insert Frame
• Click inside Keyframe Span
• Click Fill Color select Green
• Click Oval (O)
• Draw a circle
• Move Playhead

Layer 2 has a single Keyframe Span.

Layer 3

• Click Insert Layer
• Name ‘Many Spans’
• Click Playhead to deselect Keyframe Span
• Right click frame 5
• Insert Keyframe

Layer 3 has two Keyframe Spans.

• Click inside first Keyframe Span
• Change Fill Color to Blue
• Click Oval (O)
• Draw a circle
• Move Playhead

Frame 1 to frame 4 have content and are gray. Frame 5 to frame 10 have no content and are white.

• Right click frame 10
• Insert Keyframe

There are three Keyframe Spans

• Click inside last Keyframe Span
• Change Fill Color to Red
• Click Rectangle (R)
• Draw a square
• Move Playhead

Blue circle is in first Keyframe Span, no content in second Keyframe Span and red square in last Keyframe Span.

                             

Moving an Object

• Click Selection (V)
• Click inside last Keyframe Span
• Move selected square to a different location on the Stage

Objects inside a Keyframe Span can be moved anywhere on the Stage or Work Area

Adding an Object

• Click inside second Keyframe Span
• Change Fill Color to Purple
• Click Rectangle (R)
• Draw a square
• Move Playhead

Objects can be added by clicking anywhere inside a Keyframe Span.

• Click inside second Keyframe Span
• Press/hold Ctrl
• Deselect purple square
• Change Fill Color to Yellow
• Click Oval (O)
• Draw a circle
• Move Playhead

More than one object can be in a Keyframe span.

Deleting content

Layer 3

• Click insider first Keyframe Span
• Press Delete

Blue circle is deleted. Keyframe Span has no content and is white.

Convert to Keyframe

• Click frame 1 (Keyframe)
• Press/hold Shift
• Click frame 4 (Frame) to select
• Right click in selected area
• Concert to Keyframe

Frames 1, 2, 3 and 4 are Keyframes.

Insert Frame

Layer 2

• Click layer 2 ‘One Span’
• Right click inside the Keyframe Span. (All frames are selected)
• Insert Frame

15 frames are added to the last frame. Layer 2 has a Keyframe Span from frame 1 to frame 30.

• Click Playhead to deselected Keyframe Span
• Right click inside the Keyframe Span
• Insert Frame

A frame is added to the last frame. Keyframe Span is from frame 1 to frame 31.

Deleting Frames

• Deleting one frame
• Right click inside the Keyframe span
• Remove Frames

Keyframe Span is from frame 1 to frame 30.

• Deleting several frames
• Click on frame 10
• Press/hold Shift
• Click on frame 19 to select those frames.
• Right click inside selected frames
• Remove Frames

Frames are removed from the last frame toward the first frame. Keyframe Span is from Keyframe 1 to frame 20.

Deleting Keyframe

Layer 3

• Click layer 3 ‘Many Spans’
• Click Playhead to deselect the Keyframe Spans
• Right click Keyframe 3
• Clear Keyframe

Frame 3 is now a Frame

• Right click Keyframe 10
• Select Clear Keyframe

Last Keyframe Span is deleted

Frame Span 5 to 15 has a purple square and yellow circle in it.

Moving Frames:

• Click on the frame 10
• Hold/drag to frame 20

Frame turns gray when it can be dragged

Keyframe Span is now from Keyframe 5 to Frame 19

Moving a frame puts a Keyframe with objects from Keyframe Span in the new location, frame 20.

• Right click frame 25
• Insert Frame
• Move Playhead

Moving a frame puts a Keyframe with objects from the Keyframe Span in the new location, frame 20.

Moving Keyframe

• Click Keyframe 4
• Change Fill Color to Orange
• Click Oval (O)
• Draw a circle

Keyframe 4 has content

• Click on the Keyframe 5
• Click/hold/drag to frame 10

Keyframe Span with purple square and yellow circle is from Keyframe 10 to Frame 19

Keyframe with orange circle is now a Keyframe Span from Keyframe 4 to Frame 9

• Click Show/Hide All Layers eye icon
• Click Lock/Unlock All Layers lock icon

All layers have a red cross in Show/Hide layer circle and all objects are hidden on the Stage.

All layers have a lock and cannot be altered

Layer 4

• Insert Layer
• Name ‘Keyframes’
• Right click frame 25
• Insert Keyframe
• Click inside Keyframe Span
• Change Fill Color to Purple
• Click Oval (O)
• Draw a circle

Keyframe Span is gray, has content

• Right click frame 5
• Insert Keyframe
• Place Keyframes in every fifth frame (10, 15, 20)
• Click Selection (V)
• Click inside second Keyframe Span and move object
• Click inside third Keyframe Span and move object
• Click inside fourth Keyframe Span and move object
• Click inside fifth Keyframe Span and move object
• Move Playhead

Circle moves to different location in each Keyframe Span.

                       

                         

• Move Playhead to frame 1
• Press Enter

Playhead moves from frame 1 to 25 showing animation

• Click inside first Keyframe Span
• Move circle to bottom left of Stage
• Click inside second Keyframe Span
• Move circle to middle top of Stage
• Click inside third Keyframe Span
• Move circle to bottom right of Stage
• Click inside fourth Keyframe Span
• Move circle to middle top of Stage
• Click inside fifth Keyframe Span
• Move circle to bottom left of Stage
• Move Playhead to frame 1
• Press Enter

Animated circle moves up and down

Frame Rate

12 fps is a good rate for movies on the internet

Motion Picture Default is 24fps

File Size:

• The higher the fps the larger the file size.
• Use the smallest fps while keeping the animation effect wanted.

Changing fps:

• Click gray space in Work Area
• Properties Document>Frame rate
• Change Frame rate to 5

Fps has changed in Frame Rate window

                                                        

                                                        

• Move Playhead to frame 1
• Press Enter

Animation is slower

• Double click Frame Rate window
• Change Frame rate to 20
• Move Playhead to frame 1
• Press Enter

Animation is faster

                               

• Modify>Document
• Change Frame rate to 40
• Move Playhead to frame 1
• Press Enter

Animation is faster

Elapsed Time

How to Figure the Animation Elapse Time

• Divide number of frames by fps.
• 25 Frames divided by 40 fps equals .6s

                       

Elapsed Time is .6s of animation

• Double click Frame Rate window
• Change fps to 12
• 25 Frames divided by 12 fps equals 2.0s

The decrease of fps the longer the animation Elapsed Time

The increase of fps the shorter the animation Elapsed Time

• Move Playhead to frame 10
• Elapsed Time is .8s
• Move Playhead to frame 20
• Elapsed Time is 1.6s

Playhead position shows Elapsed Time for that location

Elapsed Time

Converting Animation Elapses Time to Frames Required

• Multiply fps by total time
• Frames rate is 12 fps. Animation time is 4 seconds.
• 12 fps * 4 sec = 48 frames
• Frame rate is 24 fps. Animation time is 4 seconds
• 24 fps * 4 sec = 96 frames

Center Frame

• Open Timeline menu
• Select Preview

Frames change to show object in each Keyframe Span

                                          

• Click Center Frame

Frames move to center Playhead in view area

• Move Playhead to frame 10
• Click Center Frame

Frames move to center Playhead in view area

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

Plato

Layers

Layer uses:

• Organization
• More than one animated happening at same time. There can only be one animation per frame.

Layers have a stacking order from top to bottom and are viewed in that order like a writing tablet.

Change the stacking order of layers by holding down left button on layer and dragging it up or down.

To name a folder or layer double click then typing in a name.

Layer Icons:

• Insert Layer: Adds a new layer above highlighted layer
• Add Motion Guide: Adds a guide layer for Motion Tween.
• Insert Layer Folder: Adds a folder above highlighted layer
• Delete Layer: Deletes selected layer
• Show/Hide All Layers
• Lock/Unlock All Layers
• Show All Layers as Outlines

Open a New Document

Layer 1

• Name ‘Stage’
• Properties>Document>Background
• Change to Black

Layer 2

• Click Insert Layer
• Name ‘Circle’
• Click Fill Color select Red
• Change Stroke Color to White
• Click Oval (O)
• Change Stroke height to 3
• Draw a circle

Layer 3

• Click Insert Layer
• Name ‘Square’
• Change Fill Color to Blue
• Click Rectangle (R)
• Draw a square

Layer 4

• Click Insert Layer
• Name ‘Oval’
• Change Fill Color to Green
• Click Oval (O)
• Draw an oval

Folder

• Click Insert Layer Folder
• Name ‘Shapes’
• Hold/drag ‘Oval’ layer into folder

Area between folder and layer changes indicating which direction up or down layer is being dragged

• Hold/drag ‘Square’ and ‘Circle’ layers into folder

Layers inside folders are indented

• Click expand/collapse triangle to close folder

Layer 5

• Click Insert Layer
• Name ‘Star’
• Change Fill Color to Purple
• Click Rectangle (R)
• Change to PolyStar
• Properties>Options>Star
• Draw a Star

Layer 6

• Click Insert Layer
• Name ‘Polygon’
• Change Fill Color to Orange
• Click PolyStar
• Properties>Options>Polygon
• Draw a Polygon

Layer 7

• Click Insert Layer
• Name ‘Triangle’
• Change Fill Color to Yellow
• Click PolyStar
• Properties>Options>Polygon
• Change Number of Sides to 3
• Draw a Triangle

Folder

• Click Insert Layer Folder
• Name ‘PolyStar’
• Hold/drag ‘Star’, ‘Polygon’ and ‘Triangle’ layers into folder
• Click expand/collapse triangle to close folder

Show All Layers as Outlines

• Click the colored outline square on ‘Shapes’ folder

Circle, square and oval are outlines. Icon is an outline only.

Lock/Unlock All Layers

• Click circle under Lock/Unlock All Layers on ‘PolyStar’ folder
• Open the ‘PolyStar’ folder

The pencil icon has a line through it. The layers are locked and cannot be altered.

• Click the circle under the Lock/Unlock All Layers on the ‘Star’ layer to unlock

Only that layer can be altered.

 Show/Hide All Layers

• Click the circle under Show/Hide Layers on ‘Shapes’ folder

The ‘Shapes’ folder layers are hidden on the Stage

Deleting

Highlight layer or folder to be deleted;

• Click trash or
• Right click and select Delete Layer or Folder

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

Plato

Eraser Tool

Eraser  (E)

Options: These options work like the Paint Brush tool

• Erase Normal: Default mode. Erases the Fill and Stroke
• Erase fills: Erases only the Fill
• Erase lines: Erases only the Stroke
• Erase selected fills: Erases selected Fills
• Erase inside: Erases the Fill when starting inside the Fill. Fill is not affected when started outside of the Fill. Stroke is not affected. Does not erase when beginning at an empty point

Facet Icon:

Click to erase all of a Fill or Stroke

Eraser size and shape:

Change size and shape of the Eraser. Square shape is good for corners.

To erase, hold/drag across the object. The erased and not erased areas appear when the mouse button is released.

Layer 1

• Name ‘Stage’
• Open Properties>Document>Background
• Change Stage color to light yellow

• Click Fill Color select Red
• Click Oval (O)
• Open Properties>Oval
• Change Stroke height to 8
• Draw a circle
• Click Eraser (E)

• Options, click Facet (pointer changes to facet)
• Click the Fill to erase

The Fill is erased

• Change Fill Color to Green
• Click Paint Bucket (K).
• Click the Fill

• Click Eraser (E)

• Click Stroke to erase

The Stroke is erased

• Click Ink Bottle (S)
• Click the Fill

Circle has a Fill and Stroke

• Press/hold Ctrl for Selection
• Clear the Stage

• Click Oval (O)
• Draw 5 circles. Fill Color is one; Red, Blue, Purple, Green and Orange

Erase Fills

• Click Eraser (E)
• Click the Facet to deselect
• Options, select Erase Fills
• Hold/drag Eraser across the Red circle.

Only the Fill is erased

Erase Lines

• Options, select Erase Lines
• Hold/drag Eraser across the Blue circle

Only the Stroke is erased

Erase Selected Fills

• Option, select Erase Selected Fills
• Hold/drag Eraser across the Purple circle

Nothing happens

• Press/hold Ctrl
• Select the Fill
• Hold/drag Eraser across the Purple circle

Only the selected Fill is erased

• Press/hold Ctrl
• Deselect the Fill
• Select one Fill section
• Hold/drag Eraser across the Purple circle

Only the selected Fill is erased

Erase Inside

• Option, select Erase Inside
• Hold/drag Eraser starting outside the Stroke across the Green circle

Nothing happens

• Hold/drag Eraser starting inside the Green circle

Only the Fill is erased

• Place Eraser inside erased area on Green circle
• Hold/drag Eraser across the Green circle

Nothing happens when beginning at an empty point

Erase Normal

• Option, select Erase Normal
• Hold/drag Eraser across the Orange circle

Fill and Stroke are erased

• Double click the Eraser

Everything on the Stage is removed.

Eraser size and shape:

Changes the size and shape of the Eraser

 

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

Plato

Paint Bucket and Ink Bottle Tools

Paint Bucket Tool (K)

This tool is used for Fills and uses the Fill Properties.

Options:

Lock Fill:

• Only works with a gradient
• Lock Fill controls whether a gradient fill will span only one shape, or will span all shapes filled by that gradient.
• Paint Bucket icon changes to a bucket with a lock

Gap Size

Useful when an object is drawn manually

Use to close gaps that are not too far apart

• Don’t Close Gaps. To close gaps manually before filling. Closing gaps manually can be faster for complex drawings.
• Close Small Gaps
• Close Medium Gaps
• Close Large Gaps

Note: Gaps that are too large need to be close manually before using the Paint Bucket. No fill happens when gaps are too large

Open a New Document.

Layer 1

• Name ‘Stage’
• Click Fill Color to Black
• Draw a Circle
• Click Paint Bucket (K)
• Place Paint Bucket icon over the Black circle

The white dot (which is at the tip of the paint pour from the bucket) is the point where the Fill Color is applied.

Radial Colors

• Change Fill Color to Radial Red
• Click Paint Bucket (K)
• Click center of circle
• Click edge of circle
• Click bottom of circle

Highlight moves where paint pour tip is placed.

Lock Fill

• Press/hold Ctrl to change to Selection (V).
• Clear the Stage
• Click Oval (O)
• Click No Color to draw just the Stroke

• Draw 25 small circles in a horizontal line across the Stage and Work Area.
• Change Fill Color to Linear Rainbow

• Click Paint Bucket
• Click Lock Fill
• Click each circle to fill. Paint Bucket has a lock icon

Circles fill in a rainbow pattern

• Click Oval (O)
• Click No Color
• Starting on left side of Stage
• Draw 4 circles down, 3 circles horizontal, 4 circles up, 3 circles horizontal, and repeat across the Stage.

• Change Fill Color to Linear Rainbow

• Click Paint Bucket
• Click each circle to fill. (Paint Bucket still has lock icon)

Rainbow fills horizontally but not vertically

                              

Gaps

• Clear the Stage
• Click Zoom
• Select Option (+)
• Zoom Stage to 200%
• Stroke Color to Black
• Click Pencil (Y)
• Open Properties and change Stroke height to 3
• Draw a shape that has a gap.
• Fill Color to Red
• Click Paint Bucket (B)
• Select Close Large Gaps
• Click shape with Paint Bucket

Gaps should be wide enough for Fill not to happen

• Double click Zoom to return Stage to 100%
• Click shape with Paint Bucket

If shape doesn’t fill

• Click Zoom
• Select Option (-)
• Zoom Stage to 50%
• Click shape with Paint Bucket

If shape doesn’t fill

• Click Zoom
• Select Option (-)
• Zoom Stage to 25%
• Click shape with Paint Bucket
• Gap should fill.
• If gap doesn’t fill then it’s too large. Drawn another shape with a smaller gap.

Using the Zoom is helpfully in closing gaps

Ink Bottle Tool (S)

This tool is used for Strokes and uses the Stroke Properties

Strokes can be added to Fills without Strokes

Color of Strokes can be changed.

Ink Bottle

• Clear the Stage
• Double click Zoom to return Stage to 100%
• Click Oval (O)
• Open Properties
• Change Stroke height to 5
• Draw a circle
• Press/hold Ctrl for Selection Tool
• Select the Fill and move outside of the Stroke
• Change Stroke Color to Green
• Click Ink Bottle (S)
• Click on the edge of the red Fill

The red Fill has a green Stroke

• Click the Black Stroke

Black Stroke is now Green

• Clear the Stage
• Click Line (N)
• Draw a line across the Stage
• Click Pencil (Y)
• Draw a line across the Stage
• Click Paint Brush (K)
• Select a large brush size
• Draw a line across the Stage
• Change Stroke Color to Blue
• Click Ink Bottle (S)
• Click each line

The lines made with the Line and Pencil tools are Strokes. The line made with the Paint Brush is a Fill. The Ink Bottle puts a Stroke around the Paint Brush line.

 

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

Plato