Flash animation overview: Difference between revisions

Latest revision as of 18:29, 22 August 2016

This article or chapter is incomplete and its contents need further attention. Some information may be missing or may be wrong, spelling and grammar may have to be improved, use your judgment!

Flash tutorials
Tools: CS3, CS4, CS5, CS6
Level: beginner

Overview

Learning goals: Learn about the various methods to create animations in Flash; Learn about timeline representations of the Flash Professional Interface (you can consult that later again)
Prerequisites: Flash CS6 desktop tutorial (or 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)
Next steps: Flash classic motion tweening tutorial (optional, CS3-style tweening for CS3 and better); Flash CS4 motion tweening tutorial (CS4, CS5, CS6); Flash shape tweening tutorial (all); AS3 TweenLite tweening engine (CS3-CS6, intermediate)
Moving on: Flash CS4 inverse kinematics tutorial; Flash animation summary; Flash CS4 motion tweening with AS3 tutorial; After these (or even before) you should be ready for interactivity. E.g. do the Flash button tutorial
Quality and level: This is just an overview article.

Introduction

Animation means changing properties of objects (e.g. position, size or color) over time.

In Flash CS3 to CS6, you can create several kinds of animations and associated special effects. To create 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, since you will have to draw each picture. 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/CS6, there exist two variants:

Classic motion tweening as known from CS3 and earlier versions. See the Flash classic motion tweening tutorial. You can skip this.
Motion tweening, a more oject-oriented method introduced in Flash CS4. See Flash CS4 motion tweening tutorial

(3) Shape animations

Shape tweening, since you can position key frames of shapes in different positions.

(4) Motion and shape tweening with ActionScript code

There exist many different possibilities, e.g.

Using a third party library like the Greensocks AS3 TweenLite tweening engine. Must need to know for everyone who plans to create interactive educational scenarios.

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

(4) Inverse kinematics

Inverse kinematics is the animation of armatures for shapes or connected symbols instances. See Flash CS4 inverse kinematics tutorial

What can be animated with built-in motion tweening ?

In Flash 9/10/11, 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
- Movie clips
- Buttons
Compound objects (things that you grouped together)
Text boxes

The ground rules are the following:

Motion animation means just changing x/y positions of an object over time. Of course during the motion path one also can change other properties, e.g. orientation, size and tint.
With all built-in tools, an animation is usually done in a single layer with a single instance of something that sits in the library.
With ActionScript it depends, but usually you also would use "heavy" objects like movie clips.

Flash CS4/5/6 timeline representations of interpolations

Adobe show different types of animations using the timeline in the following way: According to Animation basics, (retrieved 11:17, 25 April 2010 (UTC))

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 includes an associated script (created with the Actions panel).

A red flag indicates that the frame contains a label. This allows for instance to write AS code like:

 ''GotoAndPlay("label");''

A green double slash indicates that the frame contains a comment.

A gold anchor indicates that the frame is a named anchor.

Credits and copyright modification

This article is also available under the following copyright: Some contents of this page (including pictures) have been taken from Adobe's Using Flash CS4 Professional, in particular Animation Basic. You also must quote this source according to the Attribution-Noncommercial-Share Alike 3.0 License that is used by both Adobe and Edutechwiki

@@ Line 1: / Line 1: @@
 {{Incomplete}}
-<pageby nominor="false" comments="false"/>
+{{Flash tutorial|CS3, CS4, CS5, CS6|beginner|}}
+<!-- <pageby nominor="false" comments="false"/> -->
-== Definition ==
+== Overview ==
-This is part of some [[Flash]] tutorials.
+<div class="tut_goals">
 ;Learning goals:
-:Learn about basic motion animation
+:Learn '''about''' the various methods to create animations in Flash
+:Learn about timeline representations of the Flash Professional Interface (you can consult that later again)
 ;Prerequisites:
-:[[Flash CS3 desktop tutorial]]
+:[[Flash CS6 desktop tutorial]] (or [[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)
+; Next steps:
+: [[Flash classic motion tweening tutorial]] (optional, CS3-style tweening for CS3 and better)
+: [[Flash CS4 motion tweening tutorial]] (CS4, CS5, CS6)
+: [[Flash shape tweening tutorial]] (all)
+: [[AS3 TweenLite tweening engine]] (CS3-CS6, intermediate)
+; Moving on:
+: [[Flash CS4 inverse kinematics tutorial]]
+: [[Flash animation summary]]
+: [[Flash CS4 motion tweening with AS3 tutorial]]
+: After these (or even before) you should be ready for interactivity. E.g. do the [[Flash button tutorial]]
 ;Quality and level
-: This text should technical people get going. It's probably not good enough for beginners, but may be used as handout in "hands-on" class. That is what [[User:Daniel K. Schneider|Daniel K. Schneider]] made it for...
+: This is just an overview article.
-: It aims at beginners. More advanced features and tricks are not explained here.
+</div>
 == Introduction ==
-=== Frame-by-frame vs. tweening ===
+'''Animation means changing properties of objects (e.g. position, size or color) over time.'''
+In Flash CS3 to CS6, you can create several kinds of animations and associated special effects. To create 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, since you will have to draw each picture. 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/CS6, there exist two variants:
-In Flash, you can create several kinds of animations and associated special effects. To create motion animation, there are 2 options:
+# '''Classic motion tweening''' as known from CS3 and earlier versions. See the [[Flash classic motion tweening tutorial]]. You can skip this.
-* Frame-by-frame animation (like they used to do for cartoons).
+# '''Motion tweening''', a more oject-oriented method introduced in Flash CS4. See [[Flash CS4 motion tweening tutorial]]
-* 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}}.
-=== Layers ===
+(3) Shape animations
+* [[Flash shape tweening tutorial|Shape tweening]], since you can position key frames of shapes in different positions.
-You should use a different layer for each animation. If you want to animate several of your objects there is a practical shortcut to distribute each object to a new layer:
+(4) '''Motion and shape tweening with ActionScript code'''
-# Select objects you want to distribute (e.g. with ''right-click->select all'')
-# Then, ''Modify->Timeline->Distribute to layers
+There exist many different possibilities, e.g.
-== Introductory example ==
+* Using a third party library like the Greensocks [[AS3 TweenLite tweening engine]]. '''Must need to know''' for everyone who plans to create interactive educational scenarios.
-We will use the drawings made for the [[flash drawing tutorial]] and move a cat around.
+* 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.
-The principle of motion tweening is quite simple:
+* Using the Adobe "fl.motion" classes. See the [[Flash CS4 motion tweening with AS3 tutorial]]
-* Firstly define position of objects at two or more different times
-* You also can change, size, and rotation at different times.
-* Finally, you can also apply a motion tween along a path.
-=== Moving a cat from x to y ===
+(4) '''Inverse kinematics'''
-; Create a layer
+* Inverse kinematics is the animation of armatures for shapes or connected symbols instances. See [[Flash CS4 inverse kinematics tutorial]]
-* Select the layer with the object (graphic symbol) you want to animate
-* Put an object inside, e.g. drag from your library, or cut/paste or copy/paste from an other layer.
-; Create a first keyframe
+== What can be animated with built-in motion tweening ? ==
-* Right-click for example in position 5 and ''Insert Keyframe''
-* You should still see the object you want to animate, move it to its starting point which can be outside the stage
-; Create a second keyframe
+In Flash 9/10/11, you can animate all sorts of compound objects:
-* Right-click somewhere in the timeline, e.g. a 50 and ''Insert Keyframe'' again
+* Symbols, i.e. any object that is an instance of a library object, e.g.
-* Drag the object to its final position which can be outside the stage again.
+** Graphic symbols
+** Movie clips
+** Buttons
+* Compound objects (things that you grouped together)
+* Text boxes
-; Click on a random frame between the two keyframes
+The ground rules are the following:
-* Then in the properties panel, use the ''Tween'' pull-down menu and select motion. Alternatively, you can just right-click between frames and ''Create Motion Tween''.
+* Motion animation means just changing x/y positions of an object over time. Of course during the motion path one also can change other properties, e.g. orientation, size and tint.
-* Between the two keyframes you see a solid line with an arrow.
+* With all built-in tools, an animation is usually done '''in a single layer''' with a '''single instance''' of something that sits in the library.
-* You should see your object somewhere in the middle of the two keyframes.
+* With ActionScript it depends, but usually you also would use "heavy" objects like movie clips.
-; Test
+== Flash CS4/5/6 timeline representations of interpolations ==
-* ''Control->Test Movie''
-* Alternatively, you can move the the red rectangle on top of the red line that displays the current frame in the timeline
-; Make sure that all the static objects are displayed during the movie
+Adobe show different types of animations using the ''timeline'' in the following way: According to [http://help.adobe.com/en_US/Flash/10.0_UsingFlash/WS42406111-940D-4eff-A9F3-16EFDA4F1340.html Animation basics], (retrieved 11:17, 25 April 2010 (UTC))
-Objects that are drawn in layer 1 (the default) will not show anymore once the animations starts...
+* 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.
+:[[image:an_motion_tween_span.png]]
-In order to make these visible until the end you should do the following:
+* 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.
-* Rick-Click in frame 1 of each layer and convert it to a keyframe.
+:[[image: an_motion_tween_span_no_target.png]]
-* Then grab the the rectangle and drag it to the last frame of your animation.
-=== Adding more motions and shape tweens ===
+* 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.
+:[[image: an_pose_layer_span.png]]
-; Several motion tweens for an object
+* A black dot at the beginning keyframe with a black arrow and blue background indicates a '''classic tween'''.
-You can add more motions to an object simply by repeating the procedure outlined above.
+:[[image: motion_tween-classic.png]]
-* Add a new keyframe
-* Right-click in the middle and add a motion tween
-; Onion skins
+* A dashed line indicates that the classic tween is broken or incomplete, such as when the final keyframe is missing.
-* You can display the path an object will take by clicking one of the onion skin buttons in the Edit toolbar. This is handy if you have several objects that move.
+:[[image: classic-motion_timeline_broken.png]]
-; Turning the cat
+* A black dot at the beginning keyframe with a black arrow and a light green background indicates a shape tween.
-* Turning a cat in the animation is not very graceful
+:[[image: shape_timeline.png]]
-* In this case I made an animation from left to right and the cat will leave the stage. Next to the end frame I made a new frame with the cat turned (Click on the cat and ''Modify->Transform->Flip Horizontal'')
-The final result in the Flash Desktop should look like this (more or less):
+* 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.
-[[image:flash-cs3-motion-tweening.png|frame|none|Moving a cat]]
+:[[image: keyframe_timeline.png]]
-You can also consult the published result (including the *.fla file which you can load into your Flash and play with)
+* A small a indicates that the frame includes an associated script (created with the Actions panel).
-* http://tecfa.unige.ch/guides/flash/ex/motion-tweening-intro/
+:[[image: frame_script.png]]
-== Motion along a path ==
+* A red flag indicates that the frame contains a label. This allows for instance to write AS code like:
+<source lang="actionscript">
+ ''GotoAndPlay("label");''
+</source>
+:[[image: frame_label.png]]
+* A green double slash indicates that the frame contains a comment.
+:[[image: frame-commented.png]]
-== Links ==
+* A gold anchor indicates that the frame is a named anchor.
+:[[image: anchor_tween.png]]
-I strongly suggest that look at some of these videos.
+== Credits and copyright modification ==
-* [http://www.adobe.com/designcenter/video_workshop/ Video tutorials]
-** Click in the top left window on "Flash CS3 Professional"
-** Then view in particular "Creating animations with motion tweens" and "Understanding the timeline, keyframes and frame rate.
-[[Category: Tutorials]]
+{{copyrightalso|Some contents of this page (including pictures) have been taken from Adobe's [http://help.adobe.com/en_US/Flash/10.0_UsingFlash/index.html Using Flash CS4 Professional], in particular [http://help.adobe.com/en_US/Flash/10.0_UsingFlash/WS42406111-940D-4eff-A9F3-16EFDA4F1340.html Animation Basic]. You also must quote this source according to the [http://creativecommons.org/licenses/by-nc-sa/3.0/ Attribution-Noncommercial-Share Alike 3.0 License] that is used by both Adobe and Edutechwiki}}
-[[Category: Multimedia]]
-[[Category: Authoring tools]]

Flash animation overview: Difference between revisions

Latest revision as of 18:29, 22 August 2016

Contents

Overview

Introduction

What can be animated with built-in motion tweening ?

Flash CS4/5/6 timeline representations of interpolations

Credits and copyright modification

Navigation menu

Flash animation overview: Difference between revisions

Latest revision as of 18:29, 22 August 2016

Overview

Introduction

What can be animated with built-in motion tweening ?

Flash CS4/5/6 timeline representations of interpolations

Credits and copyright modification

Navigation menu

Slow Search