Edge Television Advertisement. -Open the 3 images of TV characters and the network logo in Photoshop. Your images must be high resolution images!

Transcription

1 -Open the 3 images of TV characters and the network logo in Photoshop. Your images must be high resolution images! -Use Layer Styles to add a White Stroke of 5 pixels to each image you cut out. This will put a white border around each cut out image. -Use layer mask to cut out the background from each characters and the logo. -You can make a new layer and fill it with a solid color to put below your character to see what the Stroke will look like. Clean up any edges that need to be adjusted with the mask -Next File > Save as the image as a PNG file format with the same name. This will keep transparency for a web based file, which is necessary since we are working with HMTL5 -Then, delete the new color layer so you have the transparent background again. Label the layer the name of the character and save as a PSD file called the name of the character incase you need to edit again later (ex. dwight.psd) -The PNG Options pop up window appears, select None for Compression and None of Interlace, then click OK

2 -Create New Edge Animate file -This opens the Animate Workspace STAGE PLAYHEAD TIMELINE -The Properties window is located on the left -Set the size to 300 W x 300 H px (pixels) -Change the Stage color to any color other than white -File > Save As and name as instructed -Save in the Edge folder -Place all files that will be needed for the project (images, audio, video) in the Library. -Click on the plus (+) for Images in Library window -Command + click on all the PNG image files needed for the project -Click Open

3 -The image files that will be used to animate the project now appear in the Library -Make sure red Playhead in Timeline is at the beginning of the Timeline (0.00) (Hit Home Key) -In the Timeline, turn on: Auto-Keyframe (K) Auto-Transition (X) Toggle Pin (P) -In the Library window, left click and drag the network logo image PNG onto the Stage *If you get an error window pop up about ID change, click Don t show me again and click OK - Use the Free Transform tool (Q) to transform (scale) your network logo so that it is much bigger than stage. Then move it up or down so that it covers the entire stage. *Remember to hold Shift and only drag from corners to keep the image in proper proportion -This will create keyframes in the Timeline for the beginning position and size of the logo (your numbers will not be the same as those below) -Click on the Timecode, located just above the Timeline -Type in.5 and hit enter to advance the playhead to half of a second

4 -Use the Free Transform tool to scale the logo on the Stage until it is centered on the Stage, smaller than the stage. -This will create keyframes in the Timeline for the new position of the logo *The pink guidelines will help to center the image -Click on the Timecode and type in 1 and hit enter to advance the playhead to 1 second -In the Timeline, for the logo layer, click on the Add Keyframes diamonds (grey diamonds to the right of the position and scale numbers) -Click each of these diamond to Add Keyframes for position and scale at 1 second. *Adding keyframes here will allow the image time to sit on the Stage without movement so we can see it. - 4 Keyframes will now show in the Timeline at 1 second -Click on the Timecode and type in 1.5 and hit enter to advance the playhead to 1 and a half seconds

5 -Hold Shift and click on each keyframe for size and position at the 0 second point in the Timeline. *Only the keyframes at 0 will turn orange -Command + C to copy these orange highlighted keyframes -Command + V to paste these keyframes, at 1.5 seconds -The logo should now zoom from big to normal, stay still for half a second, and then zoom big again -Move the Playhead back to 1 second, and click on the layer so it is highlighted -Properties window (near the top), locate the Opacity (checkerboard square) -Click the grey keyframe diamond to add a keyframe for opacity -Set the keyframe to 100% -Move the Playhead back to 1.5 -Add a keyframe for opacity -Set the keyframe to 0% -The logo will disappear on the Stage, but you will see the transform box remaining for the image

6 -Move Playhead to 1 second -In the Timeline, click the eyeball on the logo layer to temporarily hide it (will turn dark grey) -From the Library, drag the first character image onto the Stage -Scale (Free Transform Q) the image so that it fits properly on the stage and does not have too much headroom -Make sure the Toggle Pin is still turned on *If a portion of the body is cut off at the bottom or side then that cut edge needs to be at the bottom or side of your stage. It does not matter if some of your person is bigger than the stage, you want to make the object fit with just the right amount of headspace (see example below) -Add a keyframe for opacity here at 1 second for 0% so the image starts invisible -Move the playhead to 1.5 seconds and add a keyframe for opacity for 100% -This will fade in the first character as the logo fades out as they overlap -Click on the animation bar for the first character in the Timeline to highlight it -Command + C to copy

7 -Move the Playhead to 2.5 seconds -Command + V to paste the same animation section -At 2.5 seconds, change the opacity of this copied animation to 100%, and at 3 seconds change the opacity to 0% -The image should now fade in over.5 seconds then remain still for 1 second then fade out over.5 seconds -Move Playhead to 2.5 seconds -In the Timeline, click the eyeball on the first character layer to temporarily hide it (will turn dark grey) - From the Library, drag the second character image onto the Stage -Scale (Free Transform Q) the image so that it fits properly on the stage and does not have too much headroom -Make sure the Toggle Pin is still turned on *Remember you don t want any floating bodies so any images that have cut off edges on any side must be placed on edges of the stage so cut off areas are not seen -Repeat the same process as done for the first character, to fade this image up over.5 seconds then remain still for 1 second and fade out over.5 seconds -Keyframes 2.5 and 4.5 = 0% opacity -Keyframes for 3 and 4 = 100% opacity -Click and copy the animation sequence in the Timeline -Paste at 4 seconds

8 -Your second image should now fade in as your first is fading out, remain for 1 second and then fade out. -The Timeline should look like this now -Move Playhead to 4 seconds -In the Timeline, click the eyeball on the first character layer to temporarily hide it (will turn dark grey) -Make sure the Toggle Pin is still turned on -Drag the group image onto the stage -Free transform the image, being careful of cut off edges. -Place this image lower on the stage or to one side of the stage as you will add text either above or beside this image.

9 - Fade the group image up over.5 seconds with keyframes of 0% opacity at 4 seconds and 100% opacity at 4.5 seconds -Move the playhead to 6 seconds -Click Add keyframes in the Timeline for position, scale, and opacity -Move the Playhead to 7 seconds -On the Stage hold Shift to lock on a straight line and move the group picture all the way off the Stage to the right side -Move the Playhead back to 4 seconds -Click on the Text tool on the Toolbar (T) -Drag out at text box on the Stage above the group picture that currently has an opacity of 0% -Type the name of the show on the first line and the time it airs on the second. Experiment with fonts and see if you can find one similar to the show title, or choose something that fits your theme. -Select font types or add web fonts, text size, text color, and alignment from the Text window in Properties on the left -Center the font and place above or beside your image, depending on what your third image was.

10 -After typing the text and aligning it above the group, add a keyframe for opacity and set to 0% at 4 seconds -Move the Playhead to 4.5, set at keyframe for opacity for 100% -Move the Playhead to 6 seconds -In Properties, for Position and Size, click to Add a X and Y Keyframe for position (grey diamonds under the word Global) -Move the Playhead to 7 seconds -Hold Shift to lock into a straight line and move the text off the Stage in the opposite direction of the group image -The final Timeline should look like this - Hit the spacebar to watch the animation in Edge or Command + Enter to view in the browser