DM20  Assignment 4 - Animation, Part One

due Thursday, March 28

( to A4 Part 2 )

In Part One of this assignment you'll be creating an animated banner that can be used in web pages as an ad or a title graphic, etc.
You'll be creating it in After Effects - because it has so many pre-set animation effects you can use. You'll render your creation as a video file - which you will then open in Photoshop and export as an animated gif.
Animated gifs are Web-friendly - no special plugins are needed for browsers to display gifs on desktops and mobile devices alike.

Here's an example:

And two more examples, because I couldn't stop. ;)

To begin, launch After Effects.

From the top menu, Composition > New Composition. In the Composition Settings window that opens, give it these settings:

Composition Name: banner1,  728 px for width and 90 px for height, Frame rate: 24 frames per second, and with a duration of 30 seconds (much longer than you'll need).

new comp settings

Click OK to close Comp Settings. Then go to File>Save in the top menu. Name your .aep (aep=After Effects Project) banner and save it into your DM20 Projects folder (not in your 20web root folder).

Next, in the upper right of the interface, check the workspace you're in. Suggest you use Standard:

workspace = Standard

We're going to be adding some text first. Open the Character panel - from the top menu click Window and click on Character.
For now, choose a basic font like Arial, 36px in size, and make the color white so you can see it:

character/font settings

Then choose the Type tool from the top toolbar (the big T), click in your Comp and type some text. For instance, the name of a company or website, or a tagline or some other short phrase.

Then switch back to the Selection tool (the arrow on the far left of the top toolbar, shortcut = V) and drag your text so it's in the center of your Comp:

(The red boxes in the pic above is how layers look like when they're selected - click away from the layer and they'll disappear).

Note in the Timeline, the lower part of the interface, you have one Layer, your text layer, and that the CTI (Current Time Indicator) is at the very beginning.



Let's set the work area in the timeline to end at 6 seconds - otherwise every time you preview it will play the entire 30 seconds of your Comp, which is unnecessary.

To do this, click once on the 06s in the timeline, which moves the CTI to that point:

CTI at 6 secs

...and then press the N key on your keyboard. This sets the end-point for the work area at 6 seconds.

This 6 seconds is the length of your Comp that will preview, and it's the amount of your Comp you will eventually render as a video. You can change it to longer or shorter at any time - this is just a good length to start with.

Let's choose an animation preset to apply to this text layer.

Make sure your text layer is selected (click on its Layer name in the Timeline) and from the top menu, Animation>Browse Presets:

animation/browse presets

This opens Adobe Bridge, which is where you can preview lots of After Effects presets. Double-click on the 'Text' folder:

text folder presets

Then, double-click a folder to explore - "Animate In", for example:

'animate in' folder

As pictured below, you can single-click on any of the presets to see it preview in the column on the right:

previewing presets

When you find one you want to use, make note of its name, and return to your Comp in After Effects.

With your text layer still selected in the Timeline, look for the Effects & Presets panel - if you don't see it, top menu>Window>Effects & Presets, or Ctrl 5 is the shortcut to open it:

...and go to the effect you chose:

Make sure your text layer is still selected in the Timeline.
Then double-click on the effect's name and it will now be applied to the text layer in your Comp.

To see your chosen effect in your Comp, press the zero key on your keyboard's number pad - the one on the right side of your keyboard, not the number keys at the top.
That number-pad Zero key is the shortcut for playing/previewing your Timeline. It's a toggle - press it to play your timeline, press it again to stop.

If you don't like the preset animation, or just want to try out another one, go to the top menu, Edit>Undo Apply Animation Preset. Then go back to the Bridge window and preview some more effects. Try out as many as you want, and Save often.

When you get the effect you want applied to your text layer, we're going to choose another preset, this time for the background behind your text.

First, you'll create a new layer on which to apply the Background effect.  You'll create a layer with a "Solid", which is basically a blank layer filled with a color - in this case it needs to be black.

Go to the top menu,  Layer > New >Solid

New Solid layer

In the Solid Settings window that opens, name it 'background', make sure its color is Black, and its dimensions are the same as your Comp's, then click OK:

solid settings

Then in the Timeline, click and drag the new 'background' layer beneath your text's layer, and also click the padlock icon to lock the text layer:

A good general rule for any animation project - lock layers you're not working on - one accidental nudge or movement will be glaringly obvious when you play back your animation.

Next, let's choose a preset for this background layer.

With that 'background' layer selected in the timeline, from the top menu choose Animation>Browse Presets, and this time choose the Backgrounds folder:

Double-click on the Backgrounds folder to open it and try out the different effects - single-click on them to see the preview in the right column:

When you find one you like make note of its name and return to your Comp in After Effects.

With your 'background' layer still selected, go to the Effects & Presets panel, browse to the effect you chose and double-click on its name in the list.

The effect is applied to your 'background' layer. Press the zero key on your number pad to play your animation.

If you change your mind and want to try out another one, go to the top menu, Edit>Undo Apply Animation Preset. Then go back to the Bridge window and preview some more effects. Try out as many as you want, and Save often.

Take a look at the keyframes for both of your layers - the preset animations you chose each have keyframes for the beginnings and endings of the animations.

To view keyframes in layers, single-click the layer name in the timeline to select it (you'll need to unlock any layers that are locked - click its padlock icon to unlock) and press the U key on your keyboard. This expands the layer(s) to show all keyframes.


In the pic above, the background layer's last set of keyframes end at 5 seconds - 1 second before the end of the workspace area.
If you preview the animation (zero key on the number pad), you'll see the background's animation stops before the end, which is not good - you want that second group of keyframes to be at the end of the animation, at the 6-second mark.
To move that group of keyframes, get the Selection tool from the top toolbar (shortcut=V), click and drag a selection box around them:

selected keyframes

Click on that group of selected keyframes and drag them to slightly past the 6-sec point in the timeline:

Now when you preview it, the animation loops without the background's movement stopping.

Next, we're going to have the first text animate out and a second line animate in.

Collapse (close up) and lock the background layer for now:

lock and collapse layer

Click the first text's layer name in the timeline to select it. You're going to set the CTI (Current Time Indicator) to about half a second after the its last keyframe. This is where the text's next animation will begin - it's going to animate out as a second line of text comes in.

Click on the CTI and drag it to just past when your text's animation ends - it animates in, and we're giving it a few frames before it will animate out.
In the pic below, it's at 2:15 in the timeline (2 secs, 15 frames) - yours may differ.

CTI at end of animation

Make sure the text layer is selected in the timeline (single-click on its layer name) and the CTI is where you want the animate-out effect to begin.
Then, go back to Bridge and choose an Animate Out effect for your text. (If Bridge is closed, you can open it again by going to Ae's top menu, Animation>Browse Presets.)

In Bridge, go into the Text>Animate Out folder, and choose an animation from there and make note of its name.

preview animation in Bridge

Return to your Comp in Ae - your text layer should still be selected and the CTI should be where you want the effect to begin - and from the Effects & Presets panel, browse to the effect you chose and double-click on its name.

...and you should see a second set of keyframes for the text layer, where it animates out:

Zero key on number pad to preview your animation. You can move that second set of keyframes if you want the text to animate out sooner or later (move them to the left for sooner, to the right for later). Or you can move them closer together if you want to animate-out effect to go faster - the closer together keyframes are, the faster the animation; farther apart, the animation is slower.

File>Save (or Ctrl S)

Next, lock the text layer (leave it expanded so you can see its keyframes.)

You're going to put in a second line of text that will animate in as the first one's leaving.

Choose the Type tool from the top toolbar, click in your Comp (those two layers you've already got should be locked), and type some text - maybe a tagline or a quote or something.

You can change the font, the color, or size in the Character panel - or leave this 2nd text the same as the first, your choice.

Type your text, switch to the Selection tool, and position it in the middle of your Comp. You can have the CTI where the first text is still showing, to get a better idea of where the 2nd text should be positioned:

Pictured below, I dragged the CTI to where the first text is animating out, and positioned the 2nd text right on top of it:

positioning 2nd text

When you've got the 2nd text positioned, drag the CTI to where you want its animating-in to begin - for this example, it's close to where it is in the pic above - I'd like the 2nd text coming in while the first one's leaving. Yours may differ, depending on what presets you're choosing.

Return to Bridge's Text Presets, choose a folder, and preview some animations. When you find one you want to use, make note of its name.
Then, in Ae, make sure your 2nd text's layer is selected in the timeline, and the CTI is where you want its animation to begin.
From the Effects & Presets panel, browse to the effect you chose and double-click on its name.

Preview your animation (zero key on number pad).
If you don't like the effect you chose for the 2nd text, Edit>Undo Apply Animation Preset and choose another one.

You might want to move both text layers' keyframes a bit as you preview until they're animating the way you like. You want the texts there long enough for people to read, but not too long.

For this example I also extended the workspace-end to 7 seconds, which meant I also had to move the background layer's last keyframes to just past the 7-sec mark so its movement doesn't stop before the end of this animation.

Here's the timeline for my example: (yours will differ)

Preview often, and Save often. 

When you've got an animation you like, it's time to export/render it.

After Effects exports/renders in many formats. Animated gif is one of them, but getting the quality and other settings good for the Web are a little complicated - especially when we have Photoshop's Save for Web - which does it better.

So, you're going to render a video file of this After Effects Comp, and then finish up in Photoshop.

First, File>Save to make sure your Ae Comp is ready. Also make sure the workspace end is set to the end of your animation - in this example it's at 7 seconds - yours may be different. After Effects renders only the work area - in this example, 7 seconds.
If your Work Area End isn't set to where your animations end you'll get a rendered video that is too long and won't loop well when it's an animated gif in a web page.
For example, if you had your Work Area End set at the end of your Comp (which we set to be 30 secs long) - you would end up with a 30-sec animated gif - 23 seconds of which would be motionless. Yeah, not a good idea. :)

Next, from Ae's top menu, click Composition, and choose Add to Render Queue:

add to render queue

The Render Queue panel opens at the bottom of the interface:

render queue panel

Click once on the word "Lossless" to open the render settings, or, 'Output Module Settings' as Ae calls it:

click Lossless to open render settings

We're going to render this Comp as an .mov file. (The default Format shown in the pic above is AVI)

Click the Format's dropdown arrow and choose QuickTime from the list:

choose Quicktime format

Click OK at the bottom to close the Output Module Settings...

click OK to close the window

...and you'll be returned to the Render Queue panel at the bottom of the interface.

Next, you'll tell Ae where to save your .mov video file. Click the words next to Output To:   as pictured below.

In the pic below it takes the name of my Comp, - but yours may say Not set yet...  (it's an Ae memory/cache thing - my version of Ae remembers what I've done before, your computer it might not have that.)

Output To choose where to save

Click once on those words and a Save To box will open - save it as (no spaces in the name!) into your DM20 Projects folder, not your 20web root folder.

Then click the Render button, far right of the Render panel, and the workspace area of your Comp renders out as an .mov video file, into your Projects folder.

render button

File>Save to save your .aep and you can minimize After Effects for now.

Next, before we get to saving your animation as a gif, you'll need to make a sub-folder inside your dm20web root folder.
There's eventually going to be a lot of Stuff in your root folder, so it's a good idea to organize it as much as possible early on.

So, navigate to your root folder, in Documents at the computer where you currently are. (If it's not there, put it there from your external storage/flash drive. Do Not work off a flash drive - always work with your root folder in Documents where you are sitting. Keep Dreamweaver happy - let it do its job of keeping track of files and links for you.)

Open your root folder in Documents, and create a new folder inside it. Name this new folder A4.

Next, we're going to have Photoshop save a Web-friendly animated gif of the .mov you rendered in After Effects.

Launch Photoshop. Go to File>Open and navigate to the file in your dm20Projects folder.

When the .mov file opens in Photoshop, it displays a timeline for it.
We don't need to here, but this Photoshop timeline is where you could edit a video, add more layers, adjust brightness/contrast, etc, etc. 
But for ours - we already did all the work in Ae, so you don't have to do anything with it here - unless you want to play it - press your Spacebar to play, press the Spacebar again to stop (or click the play button in the Photoshop timelime).

Next, go to File>Export>Save for Web. In the window that opens, put the settings like in the pic below.
It should be set to GIF, and be sure to change Looping Options from "Once" to "Forever" - so your gif animation will loop unto eternity:

save for web settings

Click Save in the Save for Web window, and save your banner.gif into your dm20web root folder/A4 subfolder.
Don't save it into your Projects folder - this gif is actually going into a web page and on the server, so it belongs in your root folder, inside the A4 folder you made earlier.

Next, launch Dreamweaver. Make sure your root folder is showing in the Files panel. If it isn't, go to Site>Manage Sites and select your site (or import your .ste file).

File>New and create a new HTML document, then go to File>Save. Name it A4-1banner.html and save it into your root folder's A4 folder.

Change Untitled Document to something like A4 Part One

This page doesn't have to be anything fancy yet, but use Page Properties (the button in the Properties panel at the bottom of the interface) to set a font, font size, font color, Links colors (don't forget those link colors - all 4 of them!), and page background color.

Next, click at the top of your page, and click the CSS tab in the Properties panel and click the 'center' icon to center the content in your page:

Then type some text for a header - like, A4 Banner.  Or, Look - it's a banner!  Or....

Whatever you type there, increase its size by setting it to Heading 1 in the Properties panel (click the HTML tab, then click the button by 'Format', as outlined below):

Then click just after that header text in your page and press Enter to move down a couple paragraphs.

Time to put in your animated gif - you can locate your banner.gif in your Files panel and drag it from there into your page, beneath the header text.
Or, you can use Insert>Image in the top menu.

File Save or Ctrl S - and preview your page and its nifty animated gif in a browser.


Next, put in some links in your banner page. Click once to the immediate right of the banner gif in your page. Press Enter a couple times to move down two paragraphs.

Type:  Home  |  Projects Menu   

Assign a link to the word Home:  Click and drag to select the word, use Point to File to link it to your index.htm page.

Then click and drag to select the words Projects Menu and link to your menu.html page.

Next, open your menu.html page (double-click it in your Files panel). You should be in Design view (not Live view).

Click and drag to select the "A4-1" text in your page's navigation bar and use Point-to-File to link that to your A4-1banner.html page (in the A4 subfolder).

File>Save, and Preview in Browser to test your pages and links.

When you're satisfied with the results, File>Save for both pages, then select menu.html and your A4 folder in the Files panel, and click the Put arrow at the top of the Files panel - this will put the 2 pages and your banner gif on the server (say Yes to the "Include dependent files" alert box). 

Then go to our DM20 home page, click your name on the right and check that your links are correct and your page with the animated banner is displaying correctly.

Continue with A4, Part Two