Unit 03 - Symbols and Motion Tweening

iTunes U Unit 03 Training Videos

ActionScript Terminology - Here is analogy to get you started thinking about some terminology. If the class is "dog" an object may one type of dog such as a labador. The dog could have properties such as wet nose, long tail, short fur and methods such as barking, running and playing fetch.

  • Classes: Blueprints for defining a group of objects such as a movie clips or buttons.
  • Objects: Instances of classes. For example, when you drag a movie clip from the library to the stage.
  • Methods: Behaviors of an object. For example, play, stop, gotoAndPlay.
  • Properties: Attributes of an object such as alpha, rotation, etc.
  • Function: Just like a symbol is a container that holds visual information and can be used over and over a function is a container of ActionScrip statements. You know how you can change a symbol in the library and every instance of the symbol will also change? Well functions are similar in that you can declare a function and then call that function in many different areas. If you change the function, all the areas that call the function will reflect the change. For example, say you have many buttons that you want to play a movieClip, stop the music and display a message. You could create the following function:

    function buttonClick() {

myMC.play();
myMusic.stop();
myMessage.text = "You clicked the button.";
}

buttonClick is the name of the function above and could be called by typing the function name like so:
buttonClick();

Tween Class

Great Example - http://www.flashperfection.com/tutorials/Creating-Animations-Using-The-AS3-Tween-Class-78117.html

A tween is an increase or decrease of a value of a property. For example if the X value of a movie clip go from a value of 0 to a value of 100 there will be a horizontal animation. The Tween Class allows for tweening of any property of any object.

To keep file sizes down the Tween Class does not export into your file swf without first importing it into your project. The code below imports the Tween Class.

import fl.transitions.Tween;
import fl.transitions.easing.*;

Next you have to make an new instance of the Tween Class. As part of the process you will enter in parameters for the tween such as which movie clip will the tween be applied to and how long will it take to complete the tween, etc.

The code below is not actual code but to be used as a way of understanding what parameters you can set.

var myTween:Tween = new Tween(object, "property", EasingType, begin, end, duration, useSeconds);

  • Object: The instance name of the object you are targeting. For example this could be the instance name of a movie clip instance that you want to animate.
  • Property: Property to animate such as X or Y coordinates, alpha, scaleX, scaleY.
  • EasingType: Defines specifics about acceleration and deceleration.
  • Begin: Starting position. (number)
  • End: Ending position. (number)
  • Duration: How long the tween will take. (number)
  • UseSeconds:"True" = duration measured in seconds.

    The code below moves the object " ball_mc" from X position 600 to X position 200 using an elastic ease and a total duration of 5 seconds.

var ballTweenX:Tween=new Tween(ball_mc ,"x", Elastic.easeOut, 600, 200, 5, true);

EasingTypes:

Back: Motion goes beyond end position then rebounds back to end position.
Bounce: Motion bounces before settling on end point.
Elastic: Bounce effect plus Back effect.
Regular: Motion determined by specified by the easing method.
Strong: Regular effect but stronger.
None: No easing.

The EasingTypes get paired with easing methods to determine at which part of the tween will be affected.

easeIn: - Start of the animation is affected.
easeOut: - End of the animation is affected.
easeInOut: - Start and end of the animation is affected.
easeNone: - No tweening effect use this with the None tween function.

Character Development

http://www.youtube.com/watch?v=V1Jucm-hm80&feature=email

ActionScript Reference

 

Homework

#1 Add transitions to your final project.

#2 Draw initial sketchs of a character you want to animate include the turnaround with at least profile and head on.