CS 1033 Multimedia and Communications Lab 8: Animation with Video Timeline REMEMBER TO BRING YOUR MEMORY STICK TO EVERY LAB!
LAB #8 - Exercise 1 Objectives: Upon completion of Exercise 1 you should be able to: Create a basic video timeline animation Create keyframes at different times within the video Make an image or text layer fade in or fade out Make an image or text layer rotate, scale or move across the screen Save animations as both gif and videos (.mp4 format) 1. NOTE: YOU NEED PHOTOSHOP CS6 OR CC FOR THIS LAB. Older versions do not have the same interface nor the same capability. 2. Create a folder to use for this lab call it lab08 e.g. F:/cs1033/lab08 Go to http://www.csd.uwo.ca/~lreid/cs1033labs/lab08/ and copy the files onto your memory stick in F:/cs1033/lab08 3. Open Photoshop CS6 or CC version. (it won t work with any older version). 4. Choose File > Open and open the file videotimeline.psd in the lab08 folder. 5. Save the file using File >Save As > petshopvideo.psd 6. Notice in the Layer Manager Pane, we have already done the work for you in terms of putting one object on each layer for you. When you start building your own animations, you will have to decide on which objects you want to include in your animation, and put each object in its own layer. From the Menu Bar select Window and make sure the Timeline window is checked (so you can see the Timeline Pane at the bottom of the screen) You want the Create Video Timeline button (Note: if it says Create Frame Animation click the button to switch to Create Video Timeline). Click on the button to complete the action. A 5 second long animation is being created. 7. You will now see this Timeline window. Circled in red below are the parts that show how long your video will be and how many frames it will contain. Use the zoom button to see less frames (zoom in) or see all the frames at once (zoom out). Try zooming in and out, then leave the zoom level so that you can see all 5 seconds (150 frames). By default, each video is initially 5 seconds. We will leave ours as 5 seconds but you can change this.
8. To make the Timeline window taller, move your mouse over the top of the Timeline window until it turns into a double-sided arrow and drag it up (as indicated with the red circle ) 9. You ll notice that while similar, this timeline is a bit different than the frame animation timeline. For the video timeline, layers are automatically tweened for us when we add keyframes as opposed to having to adjust every individual frame ourselves. 10. Before we start adding keyframes and animating, let s convert all of our layers (except the background) to Smart Objects. Smart Objects allow us to perform nondestructive transformations such as rotations or scaling. Go to the Layer Manager Pane and select the Including Llamas! Layer. Right click and select Convert to Smart Object. 11. Do the step above for all of six layers EXCEPT FOR THE BACKGROUND. DO NOT convert the background. 12. Now turn off the visibility of all the layers except for the Pet Shop layer and the Background layer. Your Layer Manager Pane should look like this: You are now going to animate the text Pet Shop In the Timeline window, select the Pet Shop line, then press the button to the left of Pet Shop line (circled in red in image to the right) to give us access to the Keyframe options. It expands and shows you the various options you have to control. 13. Make sure that you that Pet Shop line is highlighted in the Timeline. Click and drag the play head (circled in red to the right) from the start to around the 04:00f mark (the 4 SECOND mark, not the 4 th frame).
14. Press the beside option Transform in the Timeline window s Pet Shop layer to activate transform keyframes. Note: this adds a keyframe at the 4 second mark. The keyframe is shown as a small yellow diamond on the Timeline window. 15. Click on the playhead icon again and drag it back to position 0 seconds (back to the start). 16. Press Ctrl + T to enter the Free Transform mode as you are going too resize it. The drag handles will appear around the text Pet Shop. 17. In the Options bar, change the angle to -180 (typing -180 in the box) 18. Drag the entire layer off the canvas like so. Commit the changes by pressing the key. 19. Notice this created another keyframe at the start of the video Timeline in the Pet Shop Layer. You still have a keyframe at the 4 sec mark that you created above. So at the 4 second mark, you made a keyframe where the text was in the position you wanted it at that point. Then you made a keyframe at the 0 second mark with the text OFF the screen and flipped. When you press the play button, the computer will generate all the frames that rotate and move it from its flipped position off the screen at time 0 TO its correct position in the middle of the screen at the 4 th second. 20. Press the play button to see your results so far if done properly you should see the Pet Shop text rotate in from off screen. 21. Move the playhead icon to the 0f position (the beginning) and this time press the Go to next frame button a few times to see the rotation and movement happening frame by frame: 22. Save the file using File> Save > petshopvideo.psd
You are now going to animate the paws: 23. In the Layer Manager panel to the right of your screen, hide the Pet Shop layer and make the three paw layers visible (top paw, bottom paw and middle paw). 24. Collapse the Pet Shop line in the Timeline window as well to clear up some room. 25. Drag the playhead bar to the 01:00f mark (1 second mark) And expand the bottom paw options in the Timeline menu and click on the bottom paw line in this window 26. Make sure you are highlighted on the bottom paw layer. Press the button on Opacity for bottom paw. Note again it creates a keyframe for you. 27. Drag the playhead bar to the start of the animation again to 0 sec. 28. Go to the Layer Manager Pane to the right side. Click on the layer bottom paw. Change the opacity to 0%. 29. The Timeline menu creates a keyframe at time 0 and the bottom paw disappears. 30. Play the animation and notice how in the beginning the bottom paw does not show up but slowly appears by 1 sec mark.
You are now going to animate the middle paw. 31. Collapse the bottom paw in the Timeline tab. Expand the middle paw layer in the timeline and make sure that layer is highlighted. 32. Drag the playhead bar to the 02:00f (2 second) mark 33. Make sure you are highlighted on the middle paw layer. Press the button on Opacity for middle paw. Note again it creates a keyframe for you. 34. Drag the playhead bar to the 01.00f (1 second mark). 35. Go to the Layer Manager Pane to the right side. Click on the layer middle paw. Change the opacity to 0%. Notice that another keyframe has been created at the 1 second mark. 36. Move the playhead bar back to 0 seconds (the beginning of the animation) 37. Play the animation and notice how in the beginning the middle paw slowly appears at 1 sec mark and completely appearing by 2 sec mark. Now YOU are going to animate the top paw: 38. Now your turn! Animate the top paw by repeating the steps above. For the top paw however have the 100% opacity keyframe at 03:00f and the 0% opacity keyframe at 02:00f. Test your animation by pressing the play button to see your paws fade in. 39. Save the file using File Save As > petshopvideo.psd
Animating the Including llamas! text 40. From the Layer Manager Pane on the right side, turn off the visibility of the paws, and turn on the visibility of the Including Llamas! layer. 41. In the Timeline, make sure that you that the layer Including Llamas! line is highlighted and expand to show options. 42. Click and drag the playhead bar the 04:00f (4 second) mark. 43. Press the beside option Transform in the Timeline Incuding Llamas! Layer. This will activate Transform keyframes. Note: that this adds a keyframe. 44. Move the playhead bar just to the right of 01:00f. Press Ctrl + T to open the Free Transform mode. Change the X: value to 618:00px (this will move the text off the canvas to the right.. you could have moved it manually too). Then lock the Width and Height together by pressing the button and change either of them to 1 when finished it should look like so. Commit these changes by clicking on the in the top right corner of the screen. Test the animation with the play button to see the text move in from the right and grow as it does. You may be asking yourself, why the paws aren t showing up well, remember the right hand side Layer Manager Pane only has the Including Llamas! Layer visile. So to see the paws too, make the paws layer visible in the Layer Manager Pane, and then play the animation. 45. Save the file using File > Save> petshopvideo.psd
Making the llama peek in and out and fade and appear: 46. Go to the Layer Manager Pane and hide the visibility of the Including Llamas! layer and the paws layers. Change the visibility of the llama layer so that you can see it. 47. In the Timeline pane, click on the Llama layer and expand the layer to show the keyframe options (ie. Transform, Opacity and Style) in the Timeline window. 48. To start move the play head bar to the 20f to the right (after) of 04:00f. (If you cannot see the individual frames, then click on the zoom slider and drag slider to the right to zoom in till it is your comfort level.) 49. To enable both the Transform and Opacity keyframes here, click on the beside the Transform and the Opacity. This will add a keyframe on each of those layers. Your timeline will look like this: 50. Move the play head bar to the 03:00f marker. Go to the layer panel, and set the opacity to 0% for the llama layer. 51. Now move the play head bar to the 10f marker to the right of 02:00f. Go to the Layer Manager Pane, and set the opacity to 100%. We need to flip instantly between being able to see and not see the llama so move the play head bar just to the right (1 frame) of where it currently is and set the opacity to 0. Your Timeline should now look like this:
52. Without moving the playhead bar (keeping it at 10f after 02:00f), press the Add or remove keyframe at playhead button (the diamond circled in red) corresponding to Transform in the llamas keyframe menu to add a transform keyframe at the position of the playhead. 53. Move back one tick with the time bar so the llama is visible and we are on the keyframe with 100% opacity. Press Ctrl + T and set X: to -64.5 and commit changes (press the Checkmark). This should put the llama just off the canvas like so below: 54. Between 01:00f and 02:00f, move the playhead to half way between the 10f and 20f and press Ctrl + T then set the angle to 50, Y to 313, and X to 46.5 your canvas should like so. Commit these changes. And this is what it will look like. 55. Move the playhead bar to half way between the 00 and the 10f at the start of the timeline. Press Ctrl + T and set the values to X: -64.5, Y: 302, and the angle to 0. Commit these changes. 56. Play your animation. You should see the llama start off canvas, peek its head in, move its head back out, then fade into a standing position on the canvas. 57. Go to the layer panel to the right side, and change the visibility of all the layers to visible. Play your animation. 58. Save the file using File>Save petshopvideo.psd
Now we are going to save the animation to a format that will allow it to be displayed on the web. We can save this animation in multiple ways, we can save it as a gif just like how we did in lab07 or we can also export it to a movie. 59. First let s save it as a gif. Go to File > Save For Web and choose these settings.: GiF with Colors: 128, Dither: 88% (you can leave it at 100%) Set percent to 40% to make animation file smaller in terms of bytes. Click on Save button at bottom of dialog box. Save the file as petshop_video.gif 60. Now let s make it a video. Go to File > Export > Render Video The following dialog box will appear: Set the Name: to petshop.mp4 Make sure the folder beside Select Folder is pointing to your lab08 folder. If it is not point there then click on that button and change the folder. Choose Adobe Media Encoder Preset to High Quality. But note all the available presets. These may be useful if you want to export to a specific format. 61. Click on the Render button. 62. Go to File>Export>Render Video again, this time set the file Name: to petshop10frames.mp4 and change the Frame Rate to 10fps and hit Render button again. 63. Exit Photoshop 64. In File Explorer, go to your lab08 folder and click on each of the.mp4 files (notice the difference in quality) and on the.gif file. Also, in File Explorer notice the difference in the number of bytes each file (the file size). In the last Lab 10 you will learn how to add a video into your webpage that you will have created with Moviemaker or Photoshop. DON T FORGET TO TAKE YOUR MEMORY STICK!