animations n.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
Animations PowerPoint Presentation
Download Presentation
Animations

Loading in 2 Seconds...

play fullscreen
1 / 16

Animations - PowerPoint PPT Presentation


  • 157 Views
  • Uploaded on

Introduction to. Flash ActionScript. Animations. Thomas Lövgren thomas.lovgren@humlab.umu.se. Animations. Where do we use Flash animations? Any system with some kind of movement (ex. video) Online Games and Prototypes for Real games Prototypes for developers Estimate time

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'Animations' - breck


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
animations

Introduction to

Flash ActionScript

Animations

Thomas Lövgren

thomas.lovgren@humlab.umu.se

animations1
Animations

Where do we use Flash animations?

  • Any system with some kind of movement (ex. video)
  • Online Games and
  • Prototypes for Real games
  • Prototypes for developers
  • Estimate time
  • Demonstrations for movement
    • Motion
    • Bending
    • Twist
    • Transition
    • Bounce
  • and more…
animations2
Animations
  • Two general ways of animating

1. Traditional: Timeline – based

2. ActionScript – based

  • Examples of animation usage:

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

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

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

timeline-based animation

1. Insert a new symbol

2. Choose movieClip and give it a name

3. Click OK and draw the object

motion 2 3
Motion (2/3)

1. Go back to Main stage

2. Open the Library

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

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

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

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

choose Create Motion Tween

motion 3 3
Motion (3/3)

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

8. Export your movie: Press Ctrl + Enter

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

Questions:

What happens if we put our endframe at 50?

Chaning the movie framerate to 30?

Easing in?

animations timeline based
Animations timeline-based
  • Shape tweening:

1. Draw a shape on stage at frame 1 on the timeline

2. Insert a keyframe at 15

3. Draw a different shape on stage at this timeline-position

4. Right click and choose Shape Tween in the Properties Panel

5. Export the movie

  • Motion guide:

1. Make a traditional Motion animation (200 frames)

2. Right click on the ”Layer” (right of the timeline)

3. Choose ”Add Motion Guide”

4. Take the Pencil and draw a path

5. Put the pointer at the last frame in the timeline

6. Drag the movieClip and place it at the end of the guide

7. Export the movie

animations with actionscript

Ex

Animations with ActionScript
  • Create a constant loop that handles the animation
  • The animation performs within the time-interval:

1/movie framerate

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

//loop

this.onEnterFrame = function(){

dosometing…

}

animation as

Ex

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

//create a loop for animation

this.onEnterFrame = function(){

body_mc._x += 5; //move right

body_mc._rotation += 5; //rotate

body_mc._alpha -= 1; //decrease transparency

}

motion as

Ex

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

Two buttons and a body (movieClip)

//loop

this.onEnterFrame = function(){

if(startMotion){

body_mc._x += speed; //speed = 15

}

if(decrease){

body_mc._x += speed;

speed = speed * friction; //friction = 0.96

}

}

arrow keys movement as

Ex

Arrow Keys & Movement (AS)
  • Animation with keyboard control (Arrow keys)

var speed:Number = 12;

this.onEnterFrame = function(){ //loop

//right arrow key

if(Key.isDown(Key.RIGHT)){

ship_mc._x += speed;

ship_mc._rotation = 0;

}

//left arrow key

if(Key.isDown(Key.LEFT)){

ship_mc._x -= speed; //direction

ship_mc._rotation = -180; //rotate

}

}

setinterval as

Ex

setInterval (AS)
  • The setInterval function could be used for animations
  • An interval identifier that you can pass to clearInterval to cancel the interval
  • Interval: The time in milliseconds between calls to the function
  • arg1 , arg2 , ..., argn Optional parameters passed to the function

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

Example

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

random movement as

Ex

Random Movement (AS)
  • Example of a Random movement animation with setInterval

//setInterval for time-interval call of a function

//function name, interval, parameters

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

//function for moving the clip

function moveClip(){

//get new random values

newPosX = random(300) + 50;

newPosY = random(300) + 65;

speed = random(20) + 8;

more code here…

elasticity as

Ex

Elasticity (AS)
  • The basics of how to create an ”elastic animation”

if(!dragging){ //on release

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

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

speedX *= friction; //friction = 0.9

speedY *= friction;

ball_mc._x += speedX; //new position

ball_mc._y += speedY;

}

bounce with gravity as

Ex

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

//apply gravity to vertical plain

speed.y += gravity;

if(!dragging){ //on release

//add speed

pos.x += speed.x;

pos.y += speed.y;

//check the bounds and change the

//direction of the mc

if(pos.y > bounds.bottom) {

pos.y = bounds.bottom;

speed.y *= -restitution;

speed.x *= friction;

}

More code here…

dynamic bubbles as

Ex

Dynamic Bubbles (AS)
  • Example of how to create and animatesomedynamicbubbles

functioncreateBubble() {

clearInterval(intID);

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

bubble = new Object();

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

bubble.yMove = random(20) + 2;

i++;

bubble.onEnterFrame = function() {

this._y -= this.yMove;

more code here...