Reading: Types of animation, About frame rates, Identifying Timeline

Types of animation

Adobe® Flash® Professional CS5 provides several ways to create animation and special effects. Each method provides you with different possibilities for creating engaging animated content.
Flash supports the following types of animation:

Motion tweens:

Use motion tweens to set properties for an object, such as position and alpha transparency in one frame and again in another frame. Flash then interpolates the property values of the frames in between. Motion tweens are useful for animation that consists of continuous motion or transformation of an object. Motion tweens appear in the Timeline as a contiguous span of frames that can be selected as a single object by default. Motion tweens are powerful and simple to create.

Classic tweens:

Classic tweens are like motion tweens, but are more complex to create. Classic tweens allow for some specific animated effects not possible with span-based tweens.

Shape tweens:

In shape tweening, you draw a shape at one specific frame in the Timeline, and change that shape or draw another shape at another specific frame. Flash Pro then interpolates the intermediate shapes for the frames in between, creating the animation of one shape morphing into another.

Frame-by-frame animation:

This animation technique lets you specify different art for each frame in the Timeline. Use this technique to create an effect that is like the frames of a film being played in rapid succession. This technique is useful for complex animation where the graphic elements of each frame must be different.

The following video tutorial provides further explanation of the different types of animation: Understanding tweens (2:36).

About frame rates

The frame rate, the speed the animation is played at, is measured in number of frames per second (fps). A frame rate that’s too slow makes the animation appear to stop and start; a frame rate that’s too fast blurs the details of the animation. A frame rate of 24 fps is the default for new Flash documents and usually gives the best results on the web. The standard motion‑picture rate is also 24 fps.
The complexity of the animation and the speed of the computer playing the animation affect the smoothness of the playback. To determine optimum frame rates, test your animations on a variety of computers.
Because you specify only one frame rate for the entire Flash Pro document, set this rate before you begin creating animation.

Identifying animations in the Timeline

Flash Pro distinguishes tweened animation from frame-by-frame animation in the Timeline by displaying different indicators in each frame that contains content.
The following frame content indicators appear in the Timeline:

• A span of frames with a blue background indicates a motion tween. A black dot in the first frame of the span indicates that the tween span has a target object assigned to it. Black diamonds indicate the last frame and any other property keyframes. Property keyframes are frames that contain property changes explicitly defined by you. You can choose which types of property keyframes to display by right-clicking (Windows) or Command-clicking (Macintosh) the motion tween span and choosing View Keyframes > type from the context menu. Flash displays all types of property keyframes by default. All other frames in the span contain interpolated values for the tweened properties of the target object.
  
  
• A hollow dot in the first frame indicates that the target object of the motion tween has been removed. The tween span still contains its property keyframes and can have a new target object applied to it.
  
  
• A span of frames with a green background indicates an inverse kinematics (IK) pose layer. Pose layers contain IK armatures and poses. Each pose appears in the Timeline as a black diamond. Flash interpolates the positions of the armature in the frames in between poses.
  
  
• A black dot at the beginning keyframe with a black arrow and blue background indicates a classic tween.
  
  
• A dashed line indicates that the classic tween is broken or incomplete, such as when the final keyframe is missing.
  
  
• A black dot at the beginning keyframe with a black arrow and a light green background indicates a shape tween.
  
  
• A black dot indicates a single keyframe. Light gray frames after a single keyframe contain the same content with no changes. These frames have a vertical black line and a hollow rectangle at the last frame of the span.
  
  
• A small a indicates that the frame is assigned a frame action with the Actions panel.
  
  
• A red flag indicates that the frame contains a label.
  
  
• A green double slash indicates that the frame contains a comment.
  
  
• A gold anchor indicates that the frame is a named anchor.
  
  
  
  
  Guide Book:
  http://help.adobe.com/en_US/flash/cs/using/index.html

Inspiration: Logomotion

http://www.cgstudionyc.com/

Inspiration: Paper Pop-Ups

Delightful Paper Pop-Ups by Jenny Chen

Portland-based designer and art director Mengyu Chen is currently working on a new comic book and has mocked up some experimental pop-ups of her own design. The ideas and execution are really quite spectacular and I can’t wait to see the finished product. (via tuh dah)

http://www.thisiscolossal.com/2012/05/delightful-paper-pop-ups-by-jenny-chen/?utm_source=feedburner&utm_medium=feed&utm_campaign=Feed%3A+colossal+%28Colossal%29

Tutorial: Classic Motion Guide

http://www.peachpit.com/podcasts/episode.aspx?e=6684173e-1ae0-4bf8-a6cb-5c6e6eb53f48

Reading: Frame rate

Frame rate (also known as frame frequency) is the frequency (rate) at which an imaging device produces unique consecutive images called frames. The term applies equally well to computer graphics, video cameras, film cameras, and motion capture systems. Frame rate is most often expressed in frames per second (FPS), and is also expressed in progressive scan monitors as hertz (Hz).

24p is a progressive format and is now widely adopted by those planning on transferring a video signal to film. Film and video makers use 24p even if their productions are not going to be transferred to film, simply because of the on-screen "look" of the (low) frame rate which matches native film. When transferred to NTSC television, the rate is effectively slowed to 23.976 FPS (24×1000÷1001 to be exact), and when transferred to PAL or SECAM it is sped up to 25 FPS. 35 mm movie cameras use a standard exposure rate of 24 FPS, though many cameras offer rates of 23.976 FPS for NTSC television and 25 FPS for PAL/SECAM. The 24 FPS rate became the de facto standard for sound motion pictures in the mid-1920s.[2] Practically all hand-drawn animation is designed to be played at 24 FPS. Actually hand-drawing 24 unique frames per second ("1's") is costly. Even big budget films usually hand-draw animation shooting on "2's" (one hand-drawn frame is shown 2 times, so only 12 unique frames per second)[3][4] and a lot of animation is drawn on "4's" (one hand-drawn frame is shown 4 times, so only 6 unique frames per second).

30p is a progressive format and produces video at 30 frames per second. Progressive (noninterlaced) scanning mimics a film camera's frame-by-frame image capture. The effects of inter-frame judder are less noticeable than 24p yet retains a cinematic-like appearance. Shooting video in 30p mode gives no interlace artifacts but can introduce judder on image movement and on some camera pans. The widescreen film process Todd-AO used this frame rate in 1954–1956.[5]

From Wikipedia

http://en.wikipedia.org/wiki/Frame_rate

Reading: about Symbols

About symbols

A symbol is a graphic, button, or movie clip that you create once in the Flash Pro authoring environment or by using the Button (AS 2.0), SimpleButton (AS 3.0), and MovieClip classes. You can then reuse the symbol throughout your document or in other documents.

A symbol can include artwork that you import from another application. Any symbol that you create automatically becomes part of the library for the current document.

An instance is a copy of a symbol located on the Stage or nested inside another symbol. An instance can be different from its parent symbol in color, size, and function. Editing the symbol updates all of its instances, but applying effects to an instance of a symbol updates only that instance.

Using symbols in your documents dramatically reduces file size; saving several instances of a symbol requires less storage space than saving multiple copies of the contents of the symbol. For example, you can reduce the file size of your documents by converting static graphics, such as background images, into symbols and then reusing them. Using symbols can also speed SWF file playback, because a symbol needs to be downloaded to Flash® Player only once.

Share symbols among documents as shared library assets during authoring or at runtime. For runtime shared assets, you can link assets in a source document to any number of destination documents, without importing the assets into the destination document. For assets shared during authoring, you can update or replace a symbol with any other symbol available on your local network.

If you import library assets with the same name as assets already in the library, you can resolve naming conflicts without accidentally overwriting existing assets.

Additional introductory instruction about symbols is available from these resources:

• Adobe TV: Understanding symbols (2:28)
• Adobe Video Workshop: Creating and using symbols and instances (CS3) (7:12) (This video focuses on Flash Professional CS3, but the information is still relevant.)
• Flash Professional Design Center article: Using Flash for the first time – Part 1: Building a banner

Types of symbols

Each symbol has a unique Timeline and Stage, complete with layers. You can add frames, keyframes, and layers to a symbol Timeline, just as you can to the main Timeline. When you create a symbol you choose the symbol type.

• Use graphic symbols  for static images and to create reusable pieces of animation that are tied to the main Timeline. Graphic symbols operate in sync with the main Timeline. Interactive controls and sounds won’t work in a graphic symbol’s animation sequence. Graphic symbols add less to the FLA file size than buttons or movie clips because they have no timeline.
• Use button symbols  to create interactive buttons that respond to mouse clicks, rollovers, or other actions. You define the graphics associated with various button states, and then assign actions to a button instance. For more information, see Handling events in Learning ActionScript 2.0 in Adobe Flash or Handling events in the ActionScript 3.0 Developer’s Guide.
• Use movie clip symbols  to create reusable pieces of animation. Movie clips have their own multiframe Timeline that is independent from the main Timeline—think of them as nested inside a main Timeline that can contain interactive controls, sounds, and even other movie clip instances. You can also place movie clip instances inside the Timeline of a button symbol to create animated buttons. In addition, movie clips are scriptable with ActionScript®.
• Note: To preview animation in component instances and scaling of 9-slice-scaled movie clips in the Flash Pro authoring environment, select Control > Enable Live Preview.

Create symbols

You can create a symbol from selected objects on the Stage, create an empty symbol and make or import the content in symbol-editing mode, and create font symbols in Flash Pro. Symbols can contain all the functionality that Flash Pro can create, including animation.

Using symbols that contain animation lets you create Flash Pro applications with a lot of movement while minimizing file size. Consider creating animation in a symbol that has a repetitive or cyclic action—the up‑and‑down motion of a bird’s wings, for example.

To add symbols to your document, use shared library assets during authoring or at runtime.

Convert selected elements to a symbol

1. Select an element or several elements on the Stage. Do one of the following:
   • Select Modify > Convert To Symbol.
   • Drag the selection to the Library panel.
   • Right-click (Windows) or Control-click (Macintosh) and select Convert To Symbol from the context menu.
2. In the Convert To Symbol dialog box, type the name of the symbol and select the behavior.
3. Click in the registration grid to position the registration point for the symbol.
4. Click OK.
   Flash Pro adds the symbol to the library. The selection on the Stage becomes an instance of the symbol. Once you have created a symbol, you can edit it in symbol edit mode by choosing Edit > Edit Symbols, or you can edit it in the context of the Stage by choosing Edit > Edit In Place. You can also change the registration point of a symbol.

Convert animation on the Stage into a movie clip symbol

To reuse an animated sequence on the Stage, or to manipulate it as an instance, select it and save it as a movie clip symbol.

1. On the main Timeline, select every frame in every layer of the animation on the Stage that you want to use. For information on selecting frames, see Insert frames in the Timeline.
2. Do one of the following to copy the frames:
   • Right-click (Windows) or Control-click (Macintosh) any selected frame, and select Copy Frames from the context menu. To delete the sequence after converting it to a movie clip, select Cut.
   • Select Edit > Timeline > Copy Frames. To delete the sequence after converting it to a movie clip, select Cut Frames.
3. Deselect your selection and make sure nothing on the Stage is selected. Select Insert > New Symbol.
4. Name the symbol. For Type, select Movie Clip, then click OK.
5. On the Timeline, click Frame 1 on Layer 1, and select Edit > Timeline > Paste Frames.
   This action pastes the frames (and any layers and layer names) you copied from the main Timeline to the Timeline of this movie clip symbol. Any animation, buttons, or interactivity from the frames you copied now becomes an independent animation (a movie clip symbol) that you can reuse.
6. To return to document-editing mode, do one of the following:
   • Click the Back button.
   • Select Edit > Edit Document.
   • Click the scene name in the Edit bar above the Stage.

Duplicate symbols

Duplicating a symbol lets you use an existing symbol as a starting point for creating a symbol.

To create versions of the symbol with different appearances, also use instances.

Duplicate a symbol using the Library panel

 Select a symbol in the Library panel and do one of the following:

• Right-click (Windows) or Control-click (Macintosh), and select Duplicate from the context menu.
• Select Duplicate from the Library Panel menu.

Duplicate a symbol by selecting an instance

1. Select an instance of the symbol on the Stage.
2. Select Modify > Symbol > Duplicate Symbol.
   The symbol is duplicated, and the instance is replaced with an instance of the duplicate symbol.

Edit symbols

When you edit a symbol, Flash Pro updates all the instances of that symbol in your document. Edit the symbol in the following ways:

• In context with the other objects on the Stage by using the Edit In Place command. Other objects are dimmed to distinguish them from the symbol you are editing. The name of the symbol you are editing appears in an Edit bar at the top of the Stage, to the right of the current scene name.
• In a separate window, using the Edit In New Window command. Editing a symbol in a separate window lets you see the symbol and the main Timeline at the same time. The name of the symbol you are editing appears in the Edit bar at the top of the Stage.
  You edit the symbol by changing the window from the Stage view to a view of only the symbol, using symbol-editing mode. The name of the symbol you are editing appears in the Edit bar at the top of the Stage, to the right of the current scene name.
  When you edit a symbol, Flash Pro updates all instances of the symbol throughout the document to reflect your edits. While editing a symbol, use any of the drawing tools, import media, or create instances of other symbols.
• Change the registration point of a symbol (the point identified by the coordinates 0, 0) by using any symbol-editing method.

Edit a symbol in place

1. Do one of the following:
   • Double-click an instance of the symbol on the Stage.
   • Select an instance of the symbol on the Stage and right-click (Windows) or Control-click (Macintosh), and select Edit in Place.
   • Select an instance of the symbol on the Stage, and select Edit > Edit In Place.
2. Edit the symbol.
3. To change the registration point, drag the symbol on the Stage. A cross hair indicates the location of the registration point.
4. To exit edit-in-place mode and return to document-editing mode, do one of the following:
   • Click the Back button.
   • Select the current scene name from the Scene menu in the Edit bar.
   • Select Edit > Edit Document.
   • Double-click outside the symbol content.

Edit a symbol in a new window

1. Select an instance of the symbol on the Stage and right-click (Windows) or Control-click (Macintosh), and select Edit In New Window.
2. Edit the symbol.
3. To change the registration point, drag the symbol on the Stage. A cross hair indicates the location of the registration point.
4. Click the Close box in the upper-right corner (Windows) or upper-left corner (Macintosh) to close the new window, and click in the main document window to return to editing the main document.

Edit a symbol in symbol-editing mode

1. Do one of the following to select the symbol:
   • Double-click the symbol’s icon in the Library panel.
   • Select an instance of the symbol on the Stage, and right-click (Windows) or Control-click (Macintosh), and select Edit from the context menu.
   • Select an instance of the symbol on the Stage and select Edit > Edit Symbols.
   • Select the symbol in the Library panel and select Edit from the Library Panel menu, or right-click (Windows) or Control-click (Macintosh) the symbol in the Library panel and select Edit.
2. Edit the symbol.
3. To exit symbol-editing mode and return to editing the document, do one of the following:
   • Click the Back button at the left of the Edit bar at the top of the Stage.
   • Select Edit > Edit Document.
   • Click the scene name in the Edit bar at the top of the Stage.
   • Double-click outside the symbol content.
     
     
     >> http://help.adobe.com/en_US/flash/cs/using/WSd60f23110762d6b883b18f10cb1fe1af6-7deea.html

Reading: about drawing

• 
  Using the drawing tools (1:55)
• Using the drawing tools (CS3) (5:03)
• Object and merge drawing (2:09)

Paths

Whenever you draw a line or shape in Flash, you create a line called a path. A path is made up of one or more straight or curved segments. The beginning and end of each segment is denoted by anchor points, which work like pins holding a wire in place. A path can be closed (for example, a circle), or open, with distinct endpoints (for example, a wavy line).

You change the shape of a path by dragging its anchor points, the direction points at the end of direction lines that appear at anchor points, or the path segment itself.

Components of a path

A.

  

Selected (solid) endpoint

B.

  

Selected anchor point

C.

  

Unselected anchor point

D.

  

Curved path segment

E.

  

Direction point

F.

  

Direction line.

Paths can have two kinds of anchor points: corner points and smooth points. At a corner point, a path abruptly changes direction. At a smooth point, path segments are connected as a continuous curve. You can draw a path using any combination of corner and smooth points. If you draw the wrong type of point, you can always change it.

Points on a path

A.

  

Four corner points

B.

  

Four smooth points

C.

  

Combination of corner and smooth points.

A corner point can connect any two straight or curved segments, while a smooth point always connects two curved segments.

A corner point can connect both straight segments and curved segments.

Note: Don’t confuse corner and smooth points with straight and curved segments.

A path outline is called a stroke. A color or gradient applied to an open or closed path interior area is called a fill. A stroke can have weight (thickness), color, and a dash pattern. After you create a path or shape, you can change the characteristics of its stroke and fill.

Direction lines and direction points

When you select an anchor point that connects curved segments (or select the segment itself), the anchor points of the connecting segments display direction handles, which consist of direction lines that end in direction points. The angle and length of the direction lines determine the shape and size of the curved segments. Moving the direction points reshapes the curves. Direction lines don’t appear in the final output.

After selecting an anchor point (left), direction lines appear on any curved segments connected by the anchor point (right).

A smooth point always has two direction lines, which move together as a single, straight unit. When you move a direction line on a smooth point, the curved segments on both sides of the point are adjusted simultaneously, maintaining a continuous curve at that anchor point.

In comparison, a corner point can have two, one, or no direction lines, depending on whether it joins two, one, or no curved segments, respectively. Corner point direction lines maintain the corner by using different angles. When you move a direction line on a corner point, only the curve on the same side of the point as that direction line is adjusted.

Adjusting direction lines on a smooth point (left) and a corner point (right).

Direction lines are always tangent to (perpendicular to the radius of) the curve at the anchor points. The angle of each direction line determines the slope of the curve, and the length of each direction line determines the height, or depth, of the curve.

Moving and resizing direction lines changes the slope of curves.

Drawing modes and graphic objects

In Flash Pro, you can create several different kinds of graphic objects by using different drawing modes and drawing tools. Each kind has its own advantages and disadvantages. By understanding the capabilities of the different graphic object types, you can make good decisions about which types of objects to use in your work.

The following video tutorials demonstrate the drawing modes in Flash Pro. Some videos show the Flash Pro CS3 or CS4 workspace, but are still applicable to Flash Pro CS5.

• Object and merge drawing (2:09)
• Using the drawing tools (CS3) (5:03)

Merge Drawing mode

The default drawing mode automatically merges shapes that you draw when you overlap them. When you draw shapes that overlap each other in the same layer, the top-most shape cuts away the part of the shape underneath it that it overlaps. In this way, drawing shapes is a destructive drawing mode. For example, if you draw a circle and overlay a smaller circle on top of it, and then select the smaller circle and move it, the portion of the second circle that overlaid the first circle is removed.

When a shape has both a stroke and a fill, they are considered separate graphic elements that can be selected and moved independently.

Shapes created with the Merge Drawing mode merge together when they overlap. Selecting a shape and moving it results in the overlaid shape being altered.

Enter Merge Drawing mode

1. Select the Merge Drawing option in the Tools panel.
2. Select a drawing tool from the Tools panel and draw on the Stage

Note: By default, Flash Pro uses the Merge Drawing mode.

Object Drawing mode

Creates shapes referred to as drawing objects. Drawing objects are separate graphic objects that do not automatically merge together when overlaid. This lets you overlap shapes without altering their appearance if you move them apart, or rearrange their appearance. Flash Pro creates each shape as a separate object that you can individually manipulate.

When a drawing tool is in Object Drawing mode, the shapes you create with it are self-contained. The stroke and fill of a shape are not separate elements, and shapes that overlap do not alter one another. When you select a shape created using Object Drawing mode, Flash Pro surrounds the shape with a rectangular bounding box to identify it.

Note: Set preferences for contact sensitivity when selecting shapes created using the Object Drawing mode.

Shapes created with the Object Drawing mode remain separate objects that you can manipulate individually.

Enter Object Drawing mode

To draw shapes using Object Drawing mode, you must explicitly enable it.

1. Select a drawing tool that supports Object Drawing mode (the Pencil, Line, Pen, Brush, Oval, Rectangle, and Polygon tools).
2. Select the Object Drawing button  from the Options category of the Tools panel, or press the J key to toggle between the Merge and Object Drawing modes. The Object Drawing button toggles between the Merge and Object Drawing modes. You can set preferences for contact sensitivity when you select shapes created with Object Drawing mode.
3. Draw on the Stage.

Convert a Merge Drawing mode created shape to an Object Drawing mode shape

1. Select the shape on the Stage.
2. To convert the shape into an Object Drawing mode shape, select Modify > Combine Objects > Union. After conversion, the shape is treated like a vector-based drawing object that does not alter its appearance by interacting with other shapes.

Note: To join two or more shapes into a single, object-based shape, use the Union command.

Primitive objects

Primitive objects are shapes that let you adjust their characteristics in the Property inspector. You can precisely control the size, corner radius, and other properties of the shape at any time after you have created it without having to draw it from scratch.

Two types of primitives are available, rectangles and ovals.

1. Select the Rectangle Primitive Tool  or Oval Primitive Tool  from the Tools panel.
2. Draw on the Stage.

Overlapping shapes

When you draw a line across another line or painted shape in Merge Drawing mode, the overlapping lines are divided into segments at the intersection points. To select, move, and reshape each segment individually, use the Selection tool.

A fill; the fill with a line drawn through it; and the three line segments created by segmentation.

When you paint on top of shapes and lines, the portion underneath is replaced by whatever is on top. Paint of the same color merges together. Paint of different colors remains distinct. To create masks, cutouts, and other negative images, use these features. For example, the following cutout is made by moving the ungrouped kite image onto the green shape, deselecting the kite, and then moving the filled portions of the kite away from the green shape.

Making a cutout with the kite image.

To avoid inadvertently altering shapes and lines by overlapping them, group the shapes or use layers to separate them.

http://help.adobe.com/en_US/flash/cs/using/WSd60f23110762d6b883b18f10cb1fe1af6-7e8aa.html#WSd60f23110762d6b883b18f10cb1fe1af6-7e87a

Flash Lesson 2: Shape & Motion Tweens, Sounds.

6. Understanding Tweens


7. Creating Shape Tweens:


8. Creating Motion Tweens:


9. Working with sounds:


10. Using the Motion Editer


http://tv.adobe.com/

Flash Lesson 1: Intro, File Type, Drawing

0. Understanding Flash


1. Understudying Flash File Types:


2. Setting up Workspaces:


3. Using the drawing tools:


4. Object and Merge drawing:


5. Working with bitmap graphics:


http://tv.adobe.com/

welcome

welcome to GRPH 392!

>> Course Syllabus