1. Animations Flash ActionScript Introduction to 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) Any system with some kind of movement (ex. video) Online Games and Online Games and Prototypes for Real games Prototypes for Real games Prototypes for developers Prototypes for developers Estimate time Estimate time Demonstrations for movement Demonstrations for movement Motion Motion Bending Bending Twist Twist Transition Transition Bounce Bounce and more… and more…

3. Animations Two general ways of animating Two general ways of animating 1. Traditional: Timeline – based 2. ActionScript – based Examples of animation usage: 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 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: 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: 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. Animations with ActionScript Create a constant loop that handles the animation Create a constant loop that handles the animation The animation performs within the time-interval: The animation performs within the time-interval: 1/movie framerate Tip: Write/collect the code in an ”Action frame” Tip: Write/collect the code in an ”Action frame” //loop this.onEnterFrame = function(){ do someting… } Ex

9. Animation (AS) Animate a body (movieClip), x-position, rotation & alpha 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 } Ex

10. Motion (AS) Example: Start & stop motion with friction 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 } Ex

11. Arrow Keys & Movement (AS) Animation with keyboard control (Arrow keys) 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 } Ex

12. setInterval (AS) The setInterval function could be used for animations The setInterval function could be used for animations An interval identifier that you can pass to clearInterval to cancel the interval An interval identifier that you can pass to clearInterval to cancel the interval Interval: The time in milliseconds between calls to the function Interval: The time in milliseconds between calls to the function arg1, arg2,..., argn Optional parameters passed 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 Ex

13. Random Movement (AS) Example of a Random movement animation with setInterval 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… Ex

14. Elasticity (AS) The basics of how to create an ” elastic animation” The basics of how to create an ” elastic animation” if(!dragging){ //on release speedX += (startX - ball_mc._x) * tension; //tension = 0.09 speedX += (startX - ball_mc._x) * tension; //tension = 0.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

15. Bounce with gravity (AS) The basics of how to create a bouncing ball ball with a gravity constant 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… Ex

16. Dynamic Bubbles (AS) Example of how to create and animate some dynamic bubbles Example of how to create and animate some dynamic bubbles function createBubble() { 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... Ex