Flash animation summary: Difference between revisions

The educational technology and digital learning wiki
Jump to navigation Jump to search
 
Line 40: Line 40:
== Layers ==
== Layers ==


# Put every object to be animated in a separate layer
* Put every object to be animated in a separate layer
** To create a layer click on the insert layer icon (left underneath the layers)
** To create a layer click on the insert layer icon (left underneath the layers)
# Immediately give this layer a meaningful name
* Immediately give this layer a meaningful name
** double-click on the layer name
** double-click on the layer name
# If objects of one layer should be in front/in the back of an other layer you can grab a layer with the mouse and move them up or down.
* If objects of one layer should be in front/in the back of an other layer you can grab a layer with the mouse and move them up or down.
# When you edit objects in one layer, it's good policy to lock the other layers !
* When you edit objects in one layer, it's good policy to lock the other layers !


If you are lost: go back to the [[Flash CS3 layers tutorial]]
If you are lost: go back to the [[Flash layers tutorial]]


== Drawing ==
== Drawing ==

Revision as of 16:47, 3 September 2007

This article or section is currently under construction

In principle, someone is working on it and there should be a better version in a not so distant future.
If you want to modify this page, please discuss it with the person working on it (see the "history")

Introduction

This article is a summary of:

  1. Flash frame-by-frame animation tutorial
  2. Flash motion tweening tutorial
  3. Flash shape tweening tutorial

It also includes some of:

This summary might be useless to you, if you are not somewhat familiar with the topics above.

General principles

Description and stage size

  • Make sure to start with an appropriate stage size. Change it via the properties panel or menu Modify->Document
  • Fill in the description, also via menu Modify->Document

Configuration of the desktop

They you want your desktop configured depends on your screen size and the type of animation you build. If your screen is big enough, put as many tools at your finger tips as you can. In particular:

  • All toolbars
  • Properties panel at the bottom
  • Colors, Swatches, Align, Info and Transform on top right
  • Libraries middle right
Tip
  • You can hide/show these panels with F4 (e.g. if your drawing is too big)

If you are lost: go back to the Flash CS3 desktop tutorial

Layers

  • Put every object to be animated in a separate layer
    • To create a layer click on the insert layer icon (left underneath the layers)
  • Immediately give this layer a meaningful name
    • double-click on the layer name
  • If objects of one layer should be in front/in the back of an other layer you can grab a layer with the mouse and move them up or down.
  • When you edit objects in one layer, it's good policy to lock the other layers !

If you are lost: go back to the Flash layers tutorial

Drawing

There are two modes: merge mode and object mode:

  • In merge mode (default) you draw shapes and overpaint other shapes
  • In object mode you draw graphic objects.

Most of your drawings should be in object mode. So make sure that this icon is on when you select a drawing tool: object button pressed

  • Only use merge mode when you paint like you would with real paint.
  • You can assemble shapes with menu Modify->Combine Objects->Union. The result is a graphic object.

To break apart a drawing: right-click; Break Apart.

To transform an object there are three tools (read the Flash object transform tutorial)

  • The Select tool: Make sure all objects are de-selected, then move it close to a stroke of an object or a shape. When the cursor changes shape you can distort it.
  • The Free Transform Tool has three different modes. The most powerful one is the envelope tool.
  • The subselection tool lets you fine tune things you did with the above tools

To align objects, work with the align panel (menu Window->Align or Ctrl-k). There are also shortcuts.

Frame-by-frame animation

Is useful for several things, e.g.

  • to do precision work, e.g. drawing 15 frames for just an arm movement.
  • to make pulsating objects that you can move around
  • to reposition objects when they are hidden
Procedure

Frame by frame animation works with anything. Just draw something in each keyframe.

To add new keyframes that are empty:

  • In the timeline (in the right layer!) click into the new frame to create
  • Hit F7 (or right-click->Insert New Keyframe)

Then draw something new or copy/paste from an other frame.

To add new keyframes and copy over contents from the last keyframe:

  • In the timeline (in the right layer!) click into the new frame to create
  • Hit F6 (or right-click->Insert Keyframe)

Simple motion tweening

Procedure
  • Draw something in a keyframe (e.g. frame 1)
  • Create a new keyframe (e.g. in frame 20) by hitting F6 (this will copy the object from the previous frame).
  • Then move the object in the new frame to its new place
  • The click anywhere in the timelime between these 2 frames and right-click->Create Motion Tween.
  • Every animation object must be in its own layer.
  • Unless you are an expert, don't put more than one object into an animation layer (results are unpredictable, i.e. you get a tween within a tween).

Motion guide tweening

Shape tweening

(later)