Flash animation overview: Difference between revisions

The educational technology and digital learning wiki
Jump to navigation Jump to search
mNo edit summary
Line 30: Line 30:
=== Frame-by-frame vs. tweening ===
=== Frame-by-frame vs. tweening ===


In Flash CS3 to CS5, you can create several kinds of animations and associated special effects. To create motion animation, there are 2 options:
In Flash CS3 to CS5, you can create several kinds of animations and associated special effects. To create motion animations, there are several options:
* Frame-by-frame animation (ancient technique used for cartoons). This leads to precise results but is time consuming. Actually, before doing this tutorial you can do [[Flash frame-by-frame animation tutorial]] first.
 
* Tweening. [http://en.wikipedia.org/wiki/Tweening Wikipedia], retrieved 20:45, 7 August 2007 (MEST) defines {{quotation|Tweening, short for in-betweening, as the process of generating intermediate frames between two images to give the appearance that the first image evolves smoothly into the second image. Inbetweens are the drawings between the keyframes which help to create the illusion of motion. Tweening is a key process in all types of animation, including computer animation. Sophisticated animation software enables one to identify specific objects in an image and define how they should move and change during the tweening process. Software may be used to manually render or adjust transitional frames by hand or use to automatically render transitional frames using interpolation of graphic parameters.}}. In other contexts, one uses also "morphing". E.g. [http://www.pcmag.com/encyclopedia_term/0,2542,t=tweening&i=53271,00.asp PCMag] (retrieved 20:45, 7 August 2007 (MEST)) defines tweening as {{quotation|An animation technique that, based on starting and ending shapes, creates the necessary "in-between" frames. See morphing}}.
(1) '''Frame-by-frame animation'''
Frame by frame animation is an ancient technique used for cartoons. This leads to precise results but is time consuming. See the [[Flash frame-by-frame animation tutorial]].
 
(2) '''Motion tweening''' with the CS Flash authoring interfaces
[http://en.wikipedia.org/wiki/Tweening Wikipedia], retrieved 20:45, 7 August 2007 (MEST) defines {{quotation|Tweening, short for in-betweening, as the process of generating intermediate frames between two images to give the appearance that the first image evolves smoothly into the second image. Inbetweens are the drawings between the keyframes which help to create the illusion of motion. Tweening is a key process in all types of animation, including computer animation. Sophisticated animation software enables one to identify specific objects in an image and define how they should move and change during the tweening process. Software may be used to manually render or adjust transitional frames by hand or use to automatically render transitional frames using interpolation of graphic parameters.}}. In other contexts, one uses also "morphing". E.g. [http://www.pcmag.com/encyclopedia_term/0,2542,t=tweening&i=53271,00.asp PCMag] (retrieved 20:45, 7 August 2007 (MEST)) defines tweening as {{quotation|An animation technique that, based on starting and ending shapes, creates the necessary "in-between" frames. See morphing}}.
 
In CS4/CS5, there exist two variants:
 
(a) '''Classic motion tweening''' as known from CS3 and earlier versions. See the [[Flash classic motion tweening tutorial]].
 
(b) '''Motion tweening''', a more oject-oriented method introduced in Flash CS4. See [[Flash CS4 motion tweening tutorial]]
 
(3) '''Motion tweening with ActionScript code'''
 
There exist many different possibilities, e.g.
 
* Dynamically changing x and y positions of a display object over time, e.g. through using the Timer class. See the unfinished [[Flash games tutorial]] for an example.
 
* Using the Adobe "fl.motion" classes. See the [[Flash CS4 motion tweening with AS3 tutorial]]
 
* Using a third party library like [[AS3 TweenLite tweening engine]]. '''Must need to know''' for everyone who plans to create interactive educational scenarios.
 
(4) '''Special purpose motion animations'''
 
* E.g. [[Flash CS4 inverse kinematics tutorial]]


=== What can be animated with motion tweening ? ===
=== What can be animated with motion tweening ? ===

Revision as of 12:53, 25 April 2010

Draft

<pageby nominor="false" comments="false"/>

Overview

Motion tweening means motion animation with interpolation.

Learning goals
Learn about the various methods to create motion animations in Flash
Prerequisites
Flash CS3 desktop tutorial or Flash CS4 desktop tutorial
Flash layers tutorial (first part)
Flash drawing tutorial (at least some of it)
Flash frame-by-frame animation tutorial (not absolutely needed, but probably useful)
Immediate next steps
Flash classic motion tweening tutorial (CS3-style tweening for CS3 and better)
Flash CS4 motion tweening tutorial (CS4, CS5)
AS3 TweenLite tweening engine (CS3-CS5, intermediate)
Moving on
Flash shape tweening tutorial
Flash animation summary
After that you should be ready for interactivity. E.g. do the Flash button tutorial
Quality and level
This is just an overview article.

Introduction

Frame-by-frame vs. tweening

In Flash CS3 to CS5, you can create several kinds of animations and associated special effects. To create motion animations, there are several options:

(1) Frame-by-frame animation Frame by frame animation is an ancient technique used for cartoons. This leads to precise results but is time consuming. See the Flash frame-by-frame animation tutorial.

(2) Motion tweening with the CS Flash authoring interfaces Wikipedia, retrieved 20:45, 7 August 2007 (MEST) defines “Tweening, short for in-betweening, as the process of generating intermediate frames between two images to give the appearance that the first image evolves smoothly into the second image. Inbetweens are the drawings between the keyframes which help to create the illusion of motion. Tweening is a key process in all types of animation, including computer animation. Sophisticated animation software enables one to identify specific objects in an image and define how they should move and change during the tweening process. Software may be used to manually render or adjust transitional frames by hand or use to automatically render transitional frames using interpolation of graphic parameters.”. In other contexts, one uses also "morphing". E.g. PCMag (retrieved 20:45, 7 August 2007 (MEST)) defines tweening as “An animation technique that, based on starting and ending shapes, creates the necessary "in-between" frames. See morphing”.

In CS4/CS5, there exist two variants:

(a) Classic motion tweening as known from CS3 and earlier versions. See the Flash classic motion tweening tutorial.

(b) Motion tweening, a more oject-oriented method introduced in Flash CS4. See Flash CS4 motion tweening tutorial

(3) Motion tweening with ActionScript code

There exist many different possibilities, e.g.

  • Dynamically changing x and y positions of a display object over time, e.g. through using the Timer class. See the unfinished Flash games tutorial for an example.
  • Using a third party library like AS3 TweenLite tweening engine. Must need to know for everyone who plans to create interactive educational scenarios.

(4) Special purpose motion animations

What can be animated with motion tweening ?

In Flash 9, you can animate all sorts of compound objects:

  • Symbols, i.e. any object that is an instance of a library object, e.g.
    • Graphic symbols
    • Movies (full *.swf Flash animations or embedded movie clips)
    • Buttons
  • Compound objects (things that you grouped together)
  • Text boxes
Retrieved from "https://edutechwiki.unige.ch/mediawiki/index.php?title=Flash_animation_overview&oldid=27436"