Lesson 3: Tweening & Symbols

The goals of this lesson:

Introducing Tweening Animation
In the previous lesson keyframe animation was used to portray organic movement. In this lesson we look at "tweening" animation also-known-as "pose-to-pose" animation which is a less-detailed and less laborious way to animate.

There are six types of tweening animation and they can be used to cover all animation sequences such as flying planes, cars moving, camera pans and zooms, trees swaying in the breeze, cross-fades from scene to scene, scrolling backgrounds, bouncing balls, collisions and "morphing".

Tweening animation is used to produce animation that involves opacity changes, colour changes, scaling, rotation, translation and even morphing aka Shape Tweening.

From L-R; Shape, Colour, Opacity, Rotation, Translation and Scale

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player


What about 3D Animation ?
There's one category of animation not effectively produced by tweening and this is full-3D animation.

3D Animation isn't covered within this delivery however (it's delivered on-campus at CertIV and Diploma/ Adv. Diploma levels) but in order to produce 3D animation, you need to employ software such as Discreet Plasma...unfortunately discontinued or Illustrate! plug-in for 3DSMax, Swift 3D or Papervision Flash plug-in.

Note: Animate has basic 3D capability...more like 2.5D capability, see this in action courtesy of Tom Green at Layers Magazine.

 


An Introduction to Tweening Animation
Animate does all the hard work of drawing artwork in the frames between keyframes.

In the screenshot opposite, the red boxes mark where three keyframes sit.

The in-between frames (shown as light-blue) are all automatically generated. You don't have to draw the artwork, Animate draws it based on the artwork at each keyframe. It makes assumptions based on position, colour, size, transparency and shape of the artwork at the keyframe and fills in the frames in-between.

Symbols | Tweening animation needs symbols to work
To make tweening work you need to convert your artwork into a "symbol" first. It's just the way it works. No other software does this. It's actually one of the reasons why Animate is such an effective animation tool.

If you forget to convert artwork to a symbol then try animating it, Animate will convert your artwork into a symbol for you and call it "Tween1" or "Tween2". This can lead to confusion so it's best to undo a few steps and ensure your artwork is converted to a symbol first before animating it.

What's a Symbol?
It's specific to Animate, no other software application behaves the same way. It's a type of "container" that artwork needs to be placed in if you want to animate the artwork.

Caveat: Shape Tweening is the exception. You can animate using shape tween without first converting artwork.

Symbols can be explained using a car metaphor. Imagine if you were driving along the road. The car is the symbol and anything inside the car is artwork. Where the car goes, the artwork goes. In addition, if the car is scaled, coloured, made transparent, rotated etc. the artwork inside the car is subject to the same changes.

Nesting symbols; a powerful animation technique
Still with the car scenario, imagine if you had to pick up your hyperactive four-year-old niece and drive her to the park. She could be considered a symbol too; a very animated one. Once inside the car and moving through traffic we now have a symbol (niece) inside a symbol (car) aka "a nested symbol".

She still continues to jump around even while the car goes around corners and up and down hills. It's easy to see how the nested symbol is an effective way to mimic reality.

More on Nested Symbols
If your niece was holding an animated toy pony that shook it's tail and raised its head then you could consider this to be a symbol (toy horse) inside a symbol (niece) inside a symbol (car).

If you look at the Melancholy fish animation again, see how the fins are moving while attached to the fish? That's achieved using nested symbols. The fin animation is nested inside the fish body.

 

Understanding this concept is essential if you want to fully exploit the animation toolset in Animate.

Animate can handle multiple instances of symbols inside symbols inside symbols. It can handle 16000 symbols in a movie nested or otherwise.

Types of Symbol
There are three types of symbols; Graphic Symbols, Movie Clip Symbols and Button Symbols.

Use Graphic Symbols if you're doing simple animation and you need to see your symbol move when you move the playback head. This is an important point. If you were doing lip-synch, seeing the animation play while you scrub the playback head to hear audio is vital.

Use Movie Clip Symbols if you need to control the symbol using Javascript or ActionScript code. Also if you want the symbol to animate independently like a looping, scrolling background or a spinning propeller on a plane. One negative is Movie Clip symbols don't animate when you move the playback head so they're not good for keyframe / character animation development where you need that immediate feedback.

Also consider Movie Clip Symbols if you want to use a special effect (aka filter) to blur, drop-shadow or glow your artwork.

 

Use Button Symbols for "simple" button interactivity. (there's a more detailed explanation of buttons later).

Caveat: Movie Clip Symbols can be made to behave just like buttons and offer even more flexibility than simple button symbols.

Tween animate text to simulate a "fade in"

Watch the video tutorial "fadetype.mp4" (8 mins. , 100MB) from our Google Drive folder for a demonstration of how to make a symbol fade in and out again.

There's additional tips on animation / drawing in this video as well.

Now do colour, scale, rotate and translate

To create the other animations, follow the steps shown above but change the size, position, opacity (alpha) colour of the symbol at a keyframe. For the ambitious, insert a few intermediate keyframes and change the symbol's appearance or position at each keyframe. Try to make it bounce, fly or hover.

Rotating a symbol | Hot Tip
To get your name to rotate in whole rotations, don't spin it with the transform tool, simply click on the keyframe when you want it to start rotating and in the Properties Panel choose TWEENING/ Rotate then specify clockwise (CW) or counter-clockwise (CCW) and specify the number of rotations you want it to spin before it gets to the next keyframe.

 

Note# if you can't get the TWEENING options to show, chances are you haven't clicked the keyframe first.

Shape Tweening ie: Morphing
Shape tweening is slightly more involved but the results are worth it.

Shape tweens work best when morphing from a simple shape to another equally sized simple shape. You can shape tween colour or opacity changes too...it's not strictly for shapes.

Follow these steps to create a basic shape tween:

  1. Start a new file using the same stage size/ frame rate as before and create a capital "E".

    Text in Animate is defined as vectors but it needs to be converted to a shape so we can shape tween it. Note: You can't edit your text like you normally would after it's been converted to a shape so if you're creating a long paragraph it's best to save a copy of your document prior to this next step.
  2. To convert the text into a shape for this to work, right-click the "E" and select "Break Apart" or select it and hit Ctrl-B.
  3. Insert a keyframe further along the timeline (I've used frame 40).
  4. Delete the "E" and replace it with an "F" in approximately the same position. Break the "F" apart as well. If you need precise alignment use your align panel. Change the colour of the fill if you like; shape tween can animate colour changes too.

 

  1. Right-click between the keyframes and select "Create Shape Tween". The frames should turn a light green hue indicating a successful shape tween.
  2. Now drag the playback head to see your shapes "morph". If you hit Enter you'll see it play at the nominated frame rate. Hit Ctrl-Enter to see it play. You'll see it "snap" as it loops back to the original shape. This is awkward. We need to make it adhere to a full "cycle" of animation. We'll do that next.

Note:
If your shapes don't appear to smoothly "morph" you may need to use Shape Hints to tell Animate how to morph smoothly. Watch this short video on using Shape Hints to control how the "morph".

For a demo, Download (12MB shapehint.swf) and view using Flash Movie Player.

The full cycle of animation
Walking animation, blinking, planetary orbits, wave motion, trees swaying; they all adhere to a smooth "cycle" of animation. They don't "snap" back to a half-way posture like our shape tween below.

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

We can get our shape tween to smoothly cycle by copying the existing frames, pasting them in at the end and reversing them. This is also demonstrated in our "fadetype.mp4" video.

Follow these steps to fix this:

  1. Copy your shape tween frames from 1 to 40. To select the frames, click on frame 1, hold down the shift-key, click on the last frame.
  2. Right-click any of these selected frames and select "Copy Frames" (not just Ctrl-C, that's different).
  3. Click on the frame just after the last frame and right-click, Paste Frames (see opposite) :

 

Note: If you've used Shape Hints unfortunately this copy / paste frames option doesn't work so well. You need to re-apply the shape hints by hand.

 

  1. Select those frames (click on the keyframe, shift-click the next keyframe), then right-click selected frames and select "Reverse Frames". See opposite:
  2. Note: If you've got a layer with background artwork on it you might need to drag the last frame along to the end so the background is visible to the end; otherwise you'll have an empty stage visible instead.
  3. Hit Ctrl-Enter to test. You should now have a full-cycle of animation.
  4. You can use this copy frames/ paste frames / reverse procedure for all sorts of full-cycle tweening. See the example below. Watch how it smoothly animates from start to finish and back to start and keep looping indefinitely. Note: if you want any movie to stop when it comes to the last frame you need to tell it using ActionScript or Javascript. We explore this further on in this module.

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

Opening up Possibilities with Copy Frames / Paste Frames
The copy frames/ paste frames trick is very handy for taking tweens you've developed and pasting them into new blank symbols.

For example if you've developed a city skyline animation with lights blinking and clouds / moonlight and you'd like to create a cinematic zoom into the lit window of an apartment in the city from distance. You'd take all the layers and all the frames involved with the animation and copy them and paste them into a new separate symbol.

It's then a matter of simply animating this separate symbol using a scale tween accompanied by a slight translation movement to keep the subject in the centre of the frame.

It's a technique favoured by a lot of animators to simulate a camera zoom.

Learning Task: Tweening Examples (2 -4 hrs)

To demonstrate your understanding of the previous tweening methods, you are required to create six examples of the following using your first name as the artwork:

  1. Opacity change
  2. Colour change
  3. Scale / zooming / stretching
  4. Rotation
  5. Translation (movement in "X" or "Y" axes)
  6. Shape tweening . Go from your first name to another word of equal length. What sort of word do you use? It's up to you)
Submitting your Tween Examples
You need to end up with six separate .fla movies for this task. For instructions on how to submit for feedback, jump to the bottom of this page.

 

Ease-In, Ease-Out:
To make your tweening animation seem more "realistic", as if it was reacting to things like gravity, anticipation, collision or deformation like rubber or plastic, you can use "ease-in" and "ease-out" to deccelerate or accelerate the tween.

See the ball below; the ball on the left has a constant speed for all its motion, the ball on the right appears to "bounce" off the ground. This is enabled by applying ease-in/ease-out on the keyframe.

 

 
zero ease-in means "linear" or "robotic" movements (left), 100 ease-in (right) makes it more "real"

 

screen grab of ease-in settingTo do this, use a tween that you made previously, then click on the 1st keyframe and adjust the "ease-in" to -100 in the Properties Inspector then add "ease-out" = 100 on the next keyframe (see below). Then scrub the playback head to see it play (or hit your Enter key).


Try adding ease-in (or out) to your tweening examples; it's not just for bouncing balls. A character walk cycle needs a bounce to make it more real, titles that zoom into view then zoom off again need ease-in/out to add that essence of reality.

Ease-In/Out using the Edit Curves Tool |

This technique gives you finer control of ease-in/out.
The letter E on the left (shown below) has no edit curve adjustment. The other one has had its motion affected by using edit curves to make it more "natural". To create this effect, just click on the keyframe then click the Edit button (the pencil) in the Property Inspector (see below right).

 

screenshot of flash cs4 edit tween

 

There's a 75MB tutorial movie in our Google Drive folder called editcurve.mp4 that demonstrates this. See your teacher for access. Watch the movie then have a go yourself.


sine wave curve for bounce motionCurve handles can be added (by clicking along the curve) and deleted (just select the handle and hit delete) to create some wild animation. If it all goes "pear shaped" you can always click the "reset" button to restore the curve to a line.

The lively "E" shown below is simply animated using a wave shape motion curve at the first keyframe that looks like this (opposite):

Learning Task: Bringing "life" to your kitchen disaster scene (4-6 hr)

Goal:
Animate your Kitchen Disaster scene to tell a story. Include stretch/squash to make your animation movement realistic using the Edit Curve method.

This task is a chance to explore how to simulate gravity, elasticity, collision, bouncing or breathing by using non-linear motion. Give it life by using authentic movement.

In reality, nothing moves like a robot except a robot.

Method:
Watch the supporting tutorial video "soupcan.mp4" (11:30mins, 240MB) found on our shared Google Drive for guidance with completing this task.

Use your kitchen disaster scene with a duration around 100 frames.

Animate your item using tweens and the edit motion curve tool to give it some life. Add a few keyframes and change its position/ colour/ alpha and size. Drag two or more instances of it onto the stage. Add some supporting artwork.

This is a chance to experiment. Can you make a hard object like a can of soup bounce like a rubber ball? Pulse like a beating heart ? Do the Tango? Can you make a carton of milk breathe? Can you make it move in the 3rd dimension with the 3D Tool? See Derek Banas Youtube video for a demonstration of the 3D Tool.

Submission Guide:
For instructions on submitting this task, jump to the bottom of the page.

Explaining the Nature of Symbols

In the previous task you were shown how to create a graphic symbol; but why we did this wasn't made obvious. The following information may help:

In order to tween animate artwork it needs to be converted to a symbol; a Movie Clip Symbol or a Graphic Symbol.

A symbol is a special object you create once, and you are able to re-use it throughout your movie without significant impact on the final published file size.

Like making a field of grass. Just make 1 blade of grass, convert to a symbol and re-use it multiple times changing each instance of it to make it look as each blade of grass is different and natural.

If you make a change to the original symbol every single instance of that symbol chnages. This is very "cool". You'll discover how cool when you make the windmill for the next learning task.

 

Symbols and the Library
When you convert an object to a symbol, it automatically becomes part of the library. To view the library go to window > library or F11 or Ctrl-L. The library is the storage bin for all the symbols or artwork/ sounds/ video you create or import into Flash. Note: you can click n' drag your artwork into the Library Palette from the stage or the desktop for an easy way to convert it to a symbol.

Types of Symbols
As you may have noticed in the previous exercise, when you convert artwork to a symbol this dialog box pops-up (see opposite) asking you to specify a Name and Type and choose one of the three kinds of symbols:

 

Graphic Symbols
Graphic Symbols are used if you want to see the animation play when you move the playback head. Movie Clip Symbols don't do this...they need to be previewed (Ctrl-Enter) to see any animation play.

Animators favour using graphic symbols because they can get immediate feedback by moving the playback head.

You are still able to further animate inside the graphic symbol but its timeline is tied to the main timeline and stops when the main timeline stops. So if you find your graphic symbol's animation isn't working on the main timeline, it may be because there aren't enough frames on the main timeline to accommodate the animation. You have to give a graphic symbol "room to breathe".

Movie Clip Symbols
Like a graphic symbol, a movie clip has its own timeline independent of the main timeline. However, if the main timeline stops, the movie clip's timeline is unaffected; it keeps moving. This is great for making scrolling backgrounds that don't stop. Another reason for converting artwork/ animations to Movie Clip Symbols is to attach ActionScript code to them.

Here's a YouTube video tutorial explaining the difference in more detail from Cartoon Solutions.

Button Symbols
If you need to implement visual feedback for mouse clicks or mouse "events", the Button symbol is the right choice. The Button symbol has three visible "states" and 1 hidden state (used to define the "hit area" for the mouse). Button symbols can have ActionScript code attached to them enabling them to "trigger" other actions like loading video, moving to another frame, playing music or opening a browser window.

When creating a button symbol (try it; hit Ctrl-F8 or Apple-F8 to make a new Symbol from scratch) you will see that the timeline for the button consists of four frames (see right).

Up - The appearance of the button when the mouse isn't placed over it.
Over - The appearance of the button when the mouse is placed over it.
Down - The appearance of the button when it is clicked on.
Hit - Is where you define an area (using a shape) that will respond when clicked. It's invisible though and simply defines the "hit area" for your mouse.

To add states for over, down and hit you will need to insert key frames; insert > key frame (F6) (similar to the main timeline behaviour).


To see how this was made, download the
file here (right-click, Save Target As)



Interactivity using Button Symbols, Movie Clip Symbols and ActionScript will be explored later on in this module.

 

General Symbol Creation
There are three ways to create symbols:

1. Create your artwork first, then select it and hit F8 or MODIFY/ CONVERT TO SYMBOL. (This is the way we have created symbols in previous exercises)

2. Or Ctrl-F8 (Apple-F8) INSERT/NEW SYMBOL, and this gives you a new blank stage to work on.

3. Even easier; create your artwork then simply drag it to the library palette. You can even drag it from the desktop straight into the library.


Duplicating Symbols:
If you have created a symbol that you would like to use to create another symbol, that's a little different, you may find that duplicating it and modifying it may be useful. It allows you to use an existing symbol as a starting point for a new symbol. Once duplicated, it is added to the library and can be modified without affecting the original (see Note# below for the exception)

To duplicate a symbol follow these steps:

1. Open the library panel window > library (F11) Ctrl-L.

2. Right click the symbol in the library panel and select Duplicate. A copy of the symbol now sits in the library.

Note#
If you have artwork that's shared between the original & the duplicate symbol and you change that artwork it WILL affect both the original and the duplicate...in this case making a duplicate doesn't make it totally independent.


Editing Symbols
Editing a symbol affects all instances of that symbol in the movie. The grass blade scenario (above) is a prime example of this.

1. To edit a symbol, double click the symbol in the library panel OR on the stage. The difference here is that double-clicking on the stage still shows the stage and all its artwork whereas double-clicking from the library shows you just the symbol artwork and nothing else. Watch the Cartoon Solutions YouTube video above, this technique is demonstrated in some detail.

2. Once you've edited it, return to the main stage by clicking on the Scene 1 Clapperboard (lower-left of timeline).

You can go back and edit it at any stage by double clicking on it either on the stage (you can see other elements on the stage dimmed) OR double-click on it in the library (you then see JUST the symbol on the stage)


We will now explore exactly how this works in Learning Task 7.

Learning Task: Nancy's Windmill Cottages (4-6 hrs)

Introduction:
For this exercise you are required to create an animation that will promote a small cottage accommodation business called Nancy's Windmill Cottages.

The blades of the windmill need to rotate. Any extra animation is up to you (clouds, sun, trees, birds etc.)

Key outcomes from this task are understanding how the Transform Palette works and how you may need to "go inside" a symbol to change it.

Method:
960x540 stage, 20fps, aim for around 5 seconds duration | aim for 100 frames for the whole movie. Create original artwork including sky & background. Create artwork that supports the message.

Use layers and layer folders if necessary to reduce the number of visible layers.

How to draw and animate your windmill blades:

  1. On a layer, draw a blade (example shown below).
  2. Select it, convert to graphic symbol ( give it a name like blade_art )
  3. Use the transform tool to move the pivot point (the white dot) to where the blade needs to rotate (hint: a little away from the bottom of the blade)
  4. Use the Transform palette (WINDOW /TRANSFORM) to "Duplicate Selection and Transform" to rotate the blade as many times as you like (see opposite) :
  5. Specify an appropriate angle in degrees (sub-multiples of 360)
  6. Select all the blades then convert to a graphic symbol.
    Hint: to select all the blades, hold down shift and click on every blade, give the symbol a suitable name like "blades".

    This is an example of your first "symbol inside a symbol". It's a bit like Russian Dolls which "nest" inside each other.
  7. To make the the blades rotate clockwise or counter clockwise, we do this by inserting another key frame at frame 40. Right-click betwen keyframes, and Create Classic Tween. Then go back and select the first key frame (black dot) and choose "rotate clockwise twice" in the Properties Panel.
  8. Save & test the movie, control > test movie (Ctrl+Enter)
  9. Add new layers for other artwork & contact info shown below :

    Stay Warm & Cosy at
    Windmill Cottages,

  10. 24 Fratton Park Lane,
    Bathurst,
    NSW 2075
    ph. 02 853674210
    www.windmillcottages.com.au

  11. Add artwork to maximise interest & intrigue... eg. animate the sun, clouds, trees etc.
  12. Don't feel compelled to populate the screen with the artwork and contact info. all at once. Because we're working with animation and the increased potential for distraction it's wise to break it up into smaller pieces. Try using a sequence of screens.

Submission Guide

See below.

If you have any questions about this task, jump into our 2D Animation Forum and ask for help there.

 

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player


Windmill courtesy of James Donoghue
2012 Cert III Multimedia


Guide to submitting Learning Tasks 4, 5 & 6.

To submit your work for feedback, students need to submit:

  1. LT4 | The six types of tweening; supply all six separate .fla files in a zipped folder including any extra assets if used.
  2. LT5 | Bringing life to your Kitchen Disaster scene animation; zip the folder containing the .fla file and the assets.
  3. LT6 | Windmill Advert; zip the folder containing the .fla file and the assets.

Submit all three tasks in a further single zipped-up folder as lesson3.zip via email.

If you get stuck, jump into our 2D Animation Forum and ask for help.

 

Chris Adams 2017

Summary:
This was a big lesson. It covered tweening types and how to create them, motion curves to make the tweens "realistic" and lastly it introduced symbol types; button, graphic and movie-clip.

 

Craige Langworthy 2014 | Certificate III Media

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player