AnimationsAnimations

Flash ActionScriptFlash ActionScriptIntroduction toIntroduction to

Thomas Lövgrenthomas.lovgren@humlab.umu

.se

AnimationsAnimationsWhere do we use Flash animations?Where do we use Flash animations?• Any system with some kind of movement (ex. Any system with some kind of movement (ex.

video)video)• Online Games andOnline Games and• Prototypes for Prototypes for Real gamesReal games• Prototypes for developersPrototypes for developers• Estimate timeEstimate time• Demonstrations for movementDemonstrations for movement

• MotionMotion• BendingBending• TwistTwist• TransitionTransition• BounceBounce

• and more…and more…

Animations Two general ways of animatingTwo general ways of animating

1. Traditional: Timeline – based1. Traditional: Timeline – based

2. ActionScript – based 2. ActionScript – based

Examples of animation usage:Examples of animation usage:

Motion, Shape, slide, scale, motion guide, random Motion, Shape, slide, scale, motion guide, random movement, rotation, fade, colors etc.movement, rotation, fade, colors etc.

(3D animations: Animate in 3D software then export to flash)(3D animations: Animate in 3D software then export to flash)

Motion (1/3) Example of how to create a simple motion Example of how to create a simple motion

timeline-based animationtimeline-based animation

1. Insert a new symbol1. Insert a new symbol

2. Choose movieClip and give it a name2. Choose movieClip and give it a name

3. Click OK and draw the object3. Click OK and draw the object

Motion (2/3)

1. Go back to Main stage1. Go back to Main stage

2. Open the Library2. Open the Library

3. Drag the movieClip from the Library to stage (left position)3. Drag the movieClip from the Library to stage (left position)

4. Go up to timeline and choose insert keyframe at 15 4. Go up to timeline and choose insert keyframe at 15

5. With the pointer at frame 15, now move the movieClip to the 5. With the pointer at frame 15, now move the movieClip to the rightright

6. Click on the area between your start- and endframe, then6. Click on the area between your start- and endframe, then

choose choose Create Motion TweenCreate Motion Tween

Motion (3/3)

7. Now the area between the start- and endframe will turn blue7. Now the area between the start- and endframe will turn blue

8. Export your movie: Press Ctrl + Enter8. Export your movie: Press Ctrl + Enter

9. Vìola, we got a motion tween!9. Vìola, we got a motion tween!

Questions:Questions:What happens if we put our endframe at 50?What happens if we put our endframe at 50?

Chaning the movie framerate to 30?Chaning the movie framerate to 30?

Easing in?Easing in?

Animations timeline-based Shape tweening:Shape tweening:

1. Draw a shape on stage at frame 1 on the timeline1. Draw a shape on stage at frame 1 on the timeline2. Insert a keyframe at 152. Insert a keyframe at 153. Draw a different shape on stage at this timeline-position3. Draw a different shape on stage at this timeline-position4. Right click and choose 4. Right click and choose Shape TweenShape Tween in the Properties Panel in the Properties Panel5. Export the movie5. Export the movie

Motion guide:Motion guide:1. Make a traditional Motion animation (200 frames)1. Make a traditional Motion animation (200 frames)2. Right click on the ”Layer” (right of the timeline)2. Right click on the ”Layer” (right of the timeline)3. Choose ”Add Motion Guide”3. Choose ”Add Motion Guide”4. Take the Pencil and draw a path4. Take the Pencil and draw a path5. Put the pointer at the last frame in the timeline5. Put the pointer at the last frame in the timeline6. Drag the movieClip and place it at the end of the guide6. Drag the movieClip and place it at the end of the guide7. Export the movie7. Export the movie

Animations with Animations with ActionScriptActionScript

• Create a constant loop that handles the Create a constant loop that handles the animationanimation

• The animation performs within the time-interval: The animation performs within the time-interval: 1/movie framerate1/movie framerate

• Tip: Write/collect the code in an ”Action frame”Tip: Write/collect the code in an ”Action frame”

//loopthis.onEnterFrame = function(){

do someting…do someting…}}

Ex

Animation (AS)Animation (AS)• Animate a body (movieClip), x-position, Animate a body (movieClip), x-position,

rotation & alpharotation & alpha

//create a loop for animationthis.onEnterFrame = function(){

body_mc._x += 5; //move rightbody_mc._rotation += 5; //rotatebody_mc._alpha -= 1; //decrease transparency

}

Ex

Motion (AS)Motion (AS)• Example:Example: Start & stop motion with friction Start & stop motion with friction

Two buttons and a body (movieClip)Two buttons and a body (movieClip)

//loopthis.onEnterFrame = function(){

if(startMotion){body_mc._x += speed; //speed = 15

}

if(decrease){body_mc._x += speed; speed = speed * friction; //friction = 0.96

}

}

Ex

Arrow Keys & Movement Arrow Keys & Movement (AS)(AS)

• Animation with keyboard control (Arrow keys)Animation with keyboard control (Arrow keys)

var speed:Number = 12;this.onEnterFrame = function(){ //loop

//right arrow keyif(Key.isDown(Key.RIGHT)){

ship_mc._x += speed;ship_mc._rotation = 0;

}

//left arrow keyif(Key.isDown(Key.LEFT)){

ship_mc._x -= speed; //directionship_mc._rotation = -180; //rotate

}}

Ex

setInterval (AS)setInterval (AS)

• The The setInterval functionsetInterval function could be used for could be used for animationsanimations

• An interval identifier that you can pass to An interval identifier that you can pass to clearIntervalclearInterval to cancel the interval to cancel the interval

• IntervalInterval: The time in milliseconds between calls to : The time in milliseconds between calls to the function the function

• arg1 , arg2 , ..., argn Optional parameters passed arg1 , arg2 , ..., argn Optional parameters passed to the function to the function

setInterval(function, interval [, arg1 , arg2 , ..] ) setInterval(function, interval [, arg1 , arg2 , ..] )

ExampleExample

intervallID = setInterval(myFunction, 2000); //time in milli-secondsintervallID = setInterval(myFunction, 2000); //time in milli-seconds

Ex

Random Movement (AS)Random Movement (AS)

• ExampleExample of a Random movement animation with of a Random movement animation with setIntervalsetInterval

//setInterval for time-interval call of a function//setInterval for time-interval call of a function

//function name, interval, parameters//function name, interval, parameters

intervallID = setInterval(moveClip, 2000); //time in milli-seconds intervallID = setInterval(moveClip, 2000); //time in milli-seconds

//function for moving the clip//function for moving the clip

function moveClip(){function moveClip(){

//get new random values//get new random values

newPosX = random(300) + 50;newPosX = random(300) + 50;

newPosY = random(300) + 65;newPosY = random(300) + 65;

speed = random(20) + 8;speed = random(20) + 8;

more code here…more code here…

Ex

Elasticity (AS)Elasticity (AS)

• The basics of how to create an ”The basics of how to create an ”elastic elastic animation”animation”

if(!dragging){ //on releaseif(!dragging){ //on release

speedX += (startX - ball_mc._x) * tension; //tension = speedX += (startX - ball_mc._x) * tension; //tension = 0.090.09

speedY += (startY - ball_mc._y) * tension; speedY += (startY - ball_mc._y) * tension;

speedX *= friction; //friction = 0.9 speedX *= friction; //friction = 0.9

speedY *= friction; speedY *= friction;

ball_mc._x += speedX; //new position ball_mc._x += speedX; //new position

ball_mc._y += speedY;ball_mc._y += speedY;

}}

Ex

Bounce with gravity (AS)Bounce with gravity (AS)• The basics of how to create a bouncing ball ball The basics of how to create a bouncing ball ball

with a gravity constantwith a gravity constant

//apply gravity to vertical plain//apply gravity to vertical plainspeed.y += gravity; speed.y += gravity;

if(!dragging){ //on releaseif(!dragging){ //on release

//add speed //add speed pos.x += speed.x;pos.x += speed.x;pos.y += speed.y;pos.y += speed.y;

//check the bounds and change the //check the bounds and change the //direction of the mc//direction of the mcif(pos.y > bounds.bottom) {if(pos.y > bounds.bottom) {

pos.y = bounds.bottom;pos.y = bounds.bottom;speed.y *= -restitution;speed.y *= -restitution;speed.x *= friction;speed.x *= friction;

}}More code here…More code here…

Ex

Dynamic Bubbles (AS)Dynamic Bubbles (AS)

• Example of how to create and animate some Example of how to create and animate some dynamic bubblesdynamic bubbles

function createBubble() {function createBubble() {

clearInterval(intID);clearInterval(intID);

intID = setInterval(createBubble, random(140) + 15);intID = setInterval(createBubble, random(140) + 15);

bubble = new Object();bubble = new Object();

bubble = bubble_mc.duplicateMovieClip("bub" + i, i);bubble = bubble_mc.duplicateMovieClip("bub" + i, i);

bubble.yMove = random(20) + 2;bubble.yMove = random(20) + 2;

i++;i++;

bubble.onEnterFrame = function() {bubble.onEnterFrame = function() {

this._y -= this.yMove;this._y -= this.yMove;

more code here...more code here...

Ex