1 / 16

Animations

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

breck
Download Presentation

Animations

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. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Introduction to Flash ActionScript Animations Thomas Lövgren thomas.lovgren@humlab.umu.se

  2. 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…

  3. 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)

  4. 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

  5. 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

  6. 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?

  7. 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

  8. 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… }

  9. 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 }

  10. 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 } }

  11. 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 } }

  12. 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

  13. 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…

  14. 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; }

  15. 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…

  16. 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...

More Related