Flash animation overview: Difference between revisions

The educational technology and digital learning wiki
Jump to navigation Jump to search
m (Text replacement - "<pageby nominor="false" comments="false"/>" to "<!-- <pageby nominor="false" comments="false"/> -->")
 
(73 intermediate revisions by 2 users not shown)
Line 1: Line 1:
{{Incomplete}}
{{Incomplete}}
{{under construction}}
{{Flash tutorial|CS3, CS4, CS5, CS6|beginner|}}
<pageby nominor="false" comments="false"/>
<!-- <pageby nominor="false" comments="false"/> -->


== Definition ==
== Overview ==
 
This is part of some [[Flash]] tutorials. (I have to go over it again, there may be some "Vodoo thoughts" inside this article - [[User:Daniel K. Schneider|Daniel K. Schneider]]).


<div class="tut_goals">
;Learning goals:
;Learning goals:
:Learn about basic motion animation, i.e. move an object from A to B, to C ...
: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:
;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 layers tutorial]] (first part)
:[[Flash drawing tutorial]] (at least some of it)
:[[Flash drawing tutorial]] (at least some of it)
:[[Flash frame-by-frame animation tutorial]] (not absolutly needed, but probably useful)
:[[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
;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>
;Materials (*.fla file you can play with)
:http://tecfa.unige.ch/guides/flash/ex/motion-tweening-intro/


== Introduction ==
== Introduction ==


=== Frame-by-frame vs. tweening ===
'''Animation means changing properties of objects (e.g. position, size or color) over time.'''


In Flash, you can create several kinds of animations and associated special effects. To create motion animation, there are 2 options:
In Flash CS3 to CS6, you can create several kinds of animations and associated special effects. To create animations, there are several options:
* Frame-by-frame animation (like they used to do for cartoons). This is very time consuming of course. 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}}.


=== What can be animation with motion tweening ===
(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]].


You can animate all sorts of compound objects:
(2) '''Motion tweening''' with the CS Flash authoring interfaces
* Symbols, i.e. any object that is an instance of a library object, e.g.
[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}}.
** Graphic symbols
** Movies (full *.swf Flash animations)
** Buttons
* Compound objects (things that you grouped together
* Text boxes


In this tutorial we will mostly work with graphic symbols. So the first thing you may have to do is to convert one of your objects in a graphic symbol:
In CS4/CS5/CS6, there exist two variants:
* ''Right-click'' on the object (click down the right mouse buton) and then select ''Convert to Symbol ...''. Alternatively just select the object and hit F8.


So the principles is: Each object to be animated must be symbol in a separate layer. All the other objects can remain in a single layer.
# '''Classic motion tweening''' as known from CS3 and earlier versions. See the [[Flash classic motion tweening tutorial]]. You can skip this.
[[image:flash-cs3-convert-to-graphic-symbol.png|thumb|400px|none|convert a select object to a symbol]]
# '''Motion tweening''', a more oject-oriented method introduced in Flash CS4. See [[Flash CS4 motion tweening tutorial]]  


So before we start, make sure that you have a least one graphic symbol, i.e. the object that you would like to move around in your library.
(3) Shape animations
* [[Flash shape tweening tutorial|Shape tweening]], since you can position key frames of shapes in different positions.


You also must use a different layer for each separate animation. If you plan 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''


== Introductory example ==
There exist many different possibilities, e.g.


In this example, we will use the drawings made for the [[flash drawing tutorial]] and move one of the cats around. If you want to reproduce what we do here, you can start from file [http://tecfa.unige.ch/guides/flash/ex/drawing-intro/flash-cs3-drawing-trees3.fla
* 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.
flash-cs3-drawing-trees3.fla]. Objects are already in the library.


The principle of motion tweening is quite simple:
* 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.
* Firstly position an object in different locations at different times
** We call these positions ''keyframes'' in the timeline, since objects are frozen in different states.
** Btw, you also can change other features than just the position of an object (more later)
* Then, you have to apply some interpolation method (''tweening'') between the two keyframes, i.e. you tell the computer to to generate some in-between picture for each frame between the 2 keyframes in the timeline.
** Simple motion tweening is a linear path, i.e. the object will move on a line from x1,y1 to x2,y2.
** You can also apply a motion tween along a random path (but this is bit more complicated and will will introduce it towards the end).


=== Moving a cat from x to y ===
* Using the Adobe "fl.motion" classes. See the [[Flash CS4 motion tweening with AS3 tutorial]]


You may want to lock all other layers. This way you are sure not edit by mistake a frame for another layer.
(4) '''Inverse kinematics'''


; Step 1 - Create a a new layer and chose an object for animation
* Inverse kinematics is the animation of armatures for shapes or connected symbols instances. See [[Flash CS4 inverse kinematics tutorial]]
* Create a new layer and call it "animation cat" for example (see the [[Flash layers tutorial]] if you forgot how]].
* Select this layer
* Put an object inside, e.g. it drag from your library, or cut/paste or copy/paste from an other layer or *.fla document.
** In this case we drag the cat.


; Create a first keyframe
== What can be animated with built-in motion tweening ? ==
* Right-click for example in position 5 and ''Insert Keyframe''
* A keyframe in the timeline is grey and has a black dot inside. Each time you select some frame in the timeline and then draw something inside, you also will create a 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. at 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
* The timeline for the layer including this object should now include a solid line with an arrow (if it is dashed something went wrong). See screen dumps below.
** Movie clips
 
** Buttons
; Click on a random frame between the two keyframes
* Compound objects (things that you grouped together)
* 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''.
* Text boxes
[[image:flash-cs3-motion-tweening1.png|thumb|600px|none|Moving a cat]]
 
The result should look like this in the screen capture below:
* Between the two keyframes you see a solid line with an arrow (look at the "Animat cat" layer).
* You should see your object somewhere in the middle of the two keyframes.
 
[[image:flash-cs3-motion-tweening2.png|thumb|600px|none|Moving a cat]]
 
; Test it
* ''Control->Test Movie''
* Alternatively, you can glide (left-right) the red rectangle on top of the red line that displays the current frame in the timeline. It will manually move the object to a position within the interpolation path.
 
; Make sure that all the static objects are displayed during the movie
 
Objects from other layers that are only defined in frame 1 (the default) will not show anymore once the animations starts.
 
In order to make these visible until the end you should do the following:
* Rick-Click in frame 1 and ''Convert to keyframes'' (if layers are unlocked it should convert them all, else do it one by one).
* Then click on the little white rectangle inside the grey rectangle and drag each to the last frame of your animation. The result should look as in the screen capture above, i.e. each animation track is gray and at the end you see a white rectangle.
 
=== Adding more motions ===
 
; Several motion tweens for an object
You can add more motions to an object simply by repeating the procedure outlined above.
* Add a new keyframe
* Right-click in the middle and add a motion tween
 
; Onion skins
* 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.
 
; Turning the cat
* Turning a cat in the animation is not very graceful
* 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'')
 
In the screen capture below you can see that we now have several keyframes. In the "animation cat" layer you can see several dots, each one represents a new keyframe.
[[image:flash-cs3-motion-tweening.png|thumb|600px|none|Moving a cat]]
 
You can also consult the published result: [http://tecfa.unige.ch/guides/flash/ex/motion-tweening-intro/flash-cs3-motion-tweening.html  flash-cs3-motion-tweening.html]
 
The directory including the *.fla file which you can load into your Flash and play with is here:
:http://tecfa.unige.ch/guides/flash/ex/motion-tweening-intro/
 
=== Adding shape tweening ===
 
In each frame you can change properties of the moving object. In the next example, we will have the cat move up on top of the hill. We want to implement 2 effects:
* It should become smaller (because it's further away)
* It should change color (because it's an effort to run up a hill).
 
; To change size
* Go to the frame (click on it in the timeline)
* Select the objects (i.e. the little cat)
* Select the Free Transform Tool in the tools panel (see [[flash drawing tutorial]]), hold down the SHIFT key and drag a corner.
 
; To change color
* Go to the frame
* Select the cat
* In the properties panel you can change the Color, e.g. the Tint.
 
Here is a screen capture. The animated cat is pink and sits under a tree on top of the hill ...
 
[[image:flash-cs3-motion-shaping-tweening.png|frame|none|Moving a cat and changing is size and color]]
 
You also may download the flash-cs3-motion-shaping-tweening.fla file from [http://tecfa.unige.ch/guides/flash/ex/motion-tweening-intro/ here]
 
== You don't like my cats ? / Next steps ==
 
As we pointed out in the [[Flash drawing tutorial]], you can import professionnally made [[clipart]] into Flash.
 
You also can import ready made flash animations, e.g. a cat that would have moving legs. We have a simpler animation that uses a rocket.
 
* The rocket making is described in the [[Flash frame-by-frame animation tutorial]].
 
To import a Flash movie as object:
Use ''File->Import->Import to library''
You then will see the *.swf files as items and you can drag them on the stage. With the Transform tools you then can adapt a few features (like size) to your needs.
 
If you want, you can:
* [http://tecfa.unige.ch/guides/flash/ex/motion-tweening-intro/flash-cs3-rocket-moving.html Look] at the flying rocket
* Or get the file ''flash-cs3-rocket-moving.fla'' from here:
:http://tecfa.unige.ch/guides/flash/ex/motion-tweening-intro/
 
== Motion guide tweens ==
 
; Step 1 - Create a normal motion tween
* Like explained above, create two keyframes, i.e. one for start and one for the end and then insert a motion tween.
* This is important, else you will fail ...
 
; Step 2 - Insert a motion guide
 
* Select the first keyframe and layer that starts your animation
* On the time click on the little motion guide icon (looks like a slinky) or on ''right-click->Add Motion Guide''.
 
You should get something like in the capture below:
[[image:flash-cs3-motion-layer.png|frame|none|A Motion Guide layer]]
 
; Step 3 - Draw the motion guide
* Make sure that you have the motion guide layer you just created selected. You may lock the other layers and just display their outlines.
* Then with the pencil tool draw the line you rocket has to follow. Use object mode and "Smoth drawing".
 
In the screen capture below, this would be the red line:
[[image:flash-cs3-rocket-motion-guide.png|thumb|500px|none|A rocket motion guide drawn with the pencil in the Motion Guide layer]]
 
; Step 4 - Snap the animated object to the start of the motion guide
* Unlock all layers
* Select the animation layer (''not'' the motion guide layer !) and select your start frame
* Then you have drag the object (i.e. our rocket) to the start of the line until it "snaps". Just drag, don't click...
[[image:flash-cs3-motion-guide-snapping.png|frame|none|A rocket snaps to the motion guide]]
 
; Step 5 - Snap it to the end
* Same as above, but select the end frame first
* Then drag the object (the rocket) to the end of the line until it snaps. It should snap with the little white circle.
 
; Step 6 - Orient to path
* You can have the objet tilt along the path if you want
* Select the animation layer (not the guide)
* Select a frame in between start and end
* In the properities, check the box "Orient to path"


If you want, you can:
The ground rules are the following:  
* [http://tecfa.unige.ch/guides/flash/ex/motion-tweening-intro/flash-cs3-motion-guide-tweening.html Look] at the flying rocket
* 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.
* Or get the file ''flash-cs3-motion-guide-tweening.fla'' from here and play with it.
* 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.
:http://tecfa.unige.ch/guides/flash/ex/motion-tweening-intro/
* With ActionScript it depends, but usually you also would use "heavy" objects like movie clips.


== Discussion ==
== Flash CS4/5/6 timeline representations of interpolations ==


=== [[User:Daniel K. Schneider|Daniel K. Schneider]]'s opinion ===
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))


I do have to say that I find the [[SMIL]]/[[SVG]] time-based animation model including its interpolation mechanisms more elegant and simpler to understand. In SVG, you simply decide which property of the object (position, size, shape, whatever) you want to animate and how interpolation should be done. The killer argument in favor of SVG is of course that it is an open and human-readable format.
* 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]]


But then there are no such tools as Flash CS3 for these formats. A shame. The biggest shame is the Firefox doesn't have the resources to implement SMIL animations in SVG and that Adobe stopped support for its SVG plugin. Currently, Opera seems to be only browser that implements SMILE animation. Read the [http://en.wikipedia.org/wiki/SVG_animation SVG animation] article in Wikipedia. Of course, an alternative to Flash animation is DOM scripting of HTML or SVG with JavaScript, but that's not an option
* 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.
for non-programmers.
:[[image: an_motion_tween_span_no_target.png]]


== Software ==
* 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]]


Besides Flash from Adobe, certain animation software can export in Flash (I didn't find any that can export to *.fla, just *.swf)
* A black dot at the beginning keyframe with a black arrow and blue background indicates a '''classic tween'''.
:[[image: motion_tween-classic.png]]


; E-Frontier products (commercial)
* A dashed line indicates that the classic tween is broken or incomplete, such as when the final keyframe is missing.
* [http://www.e-frontier.com/ E-Frontier home page]
:[[image: classic-motion_timeline_broken.png]]
* E.g. Anime Studio [http://en.wikipedia.org/wiki/Anime_Studio Anime Studio (Wikipedia)]
* Motion Artist


; Toufee (free online software, needs registration)
* A black dot at the beginning keyframe with a black arrow and a light green background indicates a shape tween.
* [http://www.toufee.com/ Toufee Home Page]
:[[image: shape_timeline.png]]
* [http://en.wikipedia.org/wiki/Toufee Toufee] (Wikipedia)
* [http://www.toufee.com/wiki/index.php/Main_Page Toufee Wiki]


; KToon  (not tested)
* 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.
* Frame-by-frame animation drawing tool for Unix systems (including Linux).  
:[[image: keyframe_timeline.png]]
* Ktoon can export animations in Flash or a series of PNG images.
* [http://ktoon.toonka.com/ KToon Home Page]
* [http://en.wikipedia.org/wiki/KToon KToon Wikipedia article]


== Links ==
* A small a indicates that the frame includes an associated script (created with the Actions panel).
:[[image: frame_script.png]]


=== Video Tutorials ===
* 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.


I strongly suggest that look at some of the videos you can find on the Adobe web site
:[[image: frame-commented.png]]
* [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.


=== Other ===
* A gold anchor indicates that the frame is a named anchor.
:[[image: anchor_tween.png]]


* [http://en.wikipedia.org/wiki/Flash_animation Flash animation] (Wikipedia)
== Credits and copyright modification ==


[[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]]
[[Category: Flash]]

Latest revision as of 18:29, 22 August 2016

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:

  1. Classic motion tweening as known from CS3 and earlier versions. See the Flash classic motion tweening tutorial. You can skip this.
  2. 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.

(4) Inverse kinematics

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.
An motion tween span.png
  • 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.
An motion tween span no target.png
  • 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.
An pose layer span.png
  • A black dot at the beginning keyframe with a black arrow and blue background indicates a classic tween.
Motion tween-classic.png
  • A dashed line indicates that the classic tween is broken or incomplete, such as when the final keyframe is missing.
Classic-motion timeline broken.png
  • A black dot at the beginning keyframe with a black arrow and a light green background indicates a shape tween.
Shape timeline.png
  • 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.
Keyframe timeline.png
  • A small a indicates that the frame includes an associated script (created with the Actions panel).
Frame script.png
  • A red flag indicates that the frame contains a label. This allows for instance to write AS code like:
 ''GotoAndPlay("label");''
Frame label.png
  • A green double slash indicates that the frame contains a comment.
Frame-commented.png
  • A gold anchor indicates that the frame is a named anchor.
Anchor tween.png

Credits and copyright modification

Retrieved from "https://edutechwiki.unige.ch/mediawiki/index.php?title=Flash_animation_overview&oldid=59377"