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 4th 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 4th 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!