Assignment # 8: Option A - South Park Animation

I'm using SouthPark as a way of introducing complex animation to you because of the rudimentary nature of its animation. Originally SouthPark was done using construction paper, but after a couple of seasons due to the time constraints in production it migrated to the computer, but always retained its rough feel

TASK 1 - CREATE YOUR CHARACTER

Special thanks to S. Hughes

Table of Contents

TASK 1 - CREATE YOUR CHARACTER

TASK 2 - CREATE THE PROPER FRAMES IN THE HEAD SYMBOL

TASK 3 - SPEAK OH GREAT MOUTH OVERLORD

Your task will be an easy intro to 2D characters as you will be tracing some of the simplest characters out there ... South Park! Simply follow the steps listed below. Please READ ALL STEPS BEFORE BEGINNING. See the South Park version of Mr. McIntyre below:

STEP 2

Start a blank new flash file

Make sure your Animate workspace is set to window>workspaces>Animator view.

Once you have created your character, save the image created in the southpark creator. In Animate you will:

Save your file as firstname_lastname_spCharacter.fla.

File>Import>ToLIbrary the image you just saved from the southpark creator.

Don't worry about re-drawing the mouth, it will be made later as we frame mouth positions for the different sounds.

As you trace the body you use a combination of line tools and pen tools. We will take advantage of their vector nature to bend the vectors so that they 'fit' the character.  Make sure you're drawing the body on the body layer, and the head on the head layer

Using the subselect tool (A) you can adjust the shape of any object by grabbing the Bezier points along the path of the shape. Finally, if every shape you draw in Animate has it's own grouping, to change things within the group you either need to double click it as in the typography assignment), or break it apart (CTRL-B), then begin editing it. 

TASK 2 - CREATE THE PROPER FRAMES IN THE HEAD SYMBOL

In this task you will setup up all the necessary mouth positions and emotions for your character. These will be used to sync up the sound in the next task.

Unlike in photoshop there's no way in Animate to deselect something, so while working in Animate it is useful between selections to click off into the "grey-space" at the edge of the timeline before you plan on selecting a frame, or several frames. The reason for this is that if you have a frame selected already and you try to drag your cursor over a series of frames in your timeline, it's quite possible you'll create a cascading series of mistakes. If you make a mistake - don't try to fix it. Stop and go back a step (ctrl-z). Always!

Step 2 - Editing head symbol and isolation of eyes and mouth 

We are now going to create all the necessary mouth positions and emotions for your character (see image above)

We are now going to create the following ADDITIONAL layers inside the head symbol:

1. mouth positions layer

2. eye layer

3. notes layer

We're now going to draw our eyes (and eyebrows if relevant) in the eye layer, and a default mouth in the mouth layer.

You'll be creating 12 different mouth positions. Simply choose your brush tool (1), make sure you're on the right frame (2), label it (4, you have to hit enter when you're finished typing in the label), then when you're done drawing the mouth shape (3), click on the next keyframe in the timeline and draw the next mouth-shape. Use combinations of brushes and paint buckets to get the various mouth shapes. Try to line them up so your mouth is always in roughly the same spot on the head.

YOU CAN BE DONE HERE IF YOU WANT. FOR MORE ADVANCED ANIMATION YOU CAN ADD ANOTHER SET OF EMOTIONS OR EVEN OTHER FACIAL FEATURES

Only do this if you want a challenge with your animation. 

Here's what I did:

• I've animated the eyes separately for frames 1->12

• I added eyebrows for frames 1->12

• I added a notes layer with a keyframe at frame 1 and frame 13 - just to remind me what emotion I was going for in that region. (tv/movie characters will have dozens of emotional face-sets)

• I highlighted the keyframes for mouth-positions, then COPY FRAMES (picture below left), then went to frame 13 and PASTE FRAMES. (so I didn't have to re-draw the mouth positions for my new emotion)

• I created a set of angry-eyes (weird triangles typical of SouthPark) for the entirety of the second emotion (all in the left-eye layer)

If at any point in time you make a mistake, don't start randomly deleting things. To clear a frame, but keep it as a keyframe, simply select the contents by clicking on the layer and frame that you want and hit delete (or Right-Click>Clear-Frame). To clear a keyframe simply Right-Click>Clear-Keyframe (by Removing>Key-Frame your timeline will shift on you reflecting the removed frame).

And remember, CTRL-Z is LIFE!

TASK 3 - MAKE YOUR CHARACTER SPEAK

In this final task, you will make your character say one line of dialogue using the previous two tasks. We will also trigger it to play It must not simply loop.

A sample movie has been provided below.

Step 1 - Inserting an audio file 

For this task YOU MUST HAVE HEADPHONES! I will deduct 5% every time I hear somebody's audio clips!!!!

Download the sample audio file below and save it to an appropriate place (click and on the google drive page click on download. Move the audio file to the same folder as your southpark flash file)

ohmygod.wav

1. If they're not already - lock your body and head layers. Hide you original picture layer.

2. Go to "File>Import to Library" the WAV audio to your flash library.

3. On the main timeline create a a new layer called speech.

4. Select the (first) blank keyframe in the speech layer and drag your "ohmygod wav" file from the library to the stage (not onto the timeline). You'll see a little red line through the keyframe - that's an indication of a waveform (sound) that exists (see below)

5. Click on your speed layer. Go to the Properties panel and make sure that your speech layer has a Sync setting of Stream (see picture above)

6. You'll notice that there will be a strange little line going across the middle of your 'blank frame' - don't worry, you just don't have a long enough time period for the whole wav file to be played at present. Remember, you only inserted it on frame 1 and at the moment that's 1/24th of a second. We'll fix that by extending out the amount of time available to the wav by going off to a frame somewhere around frame 48 inserting a static frame F5 is the keyboard shortcut (BTW, do NOT make this frame a keyframe). Because of my 'extras' like moving arms and body I have a series more layers than you will have. 

If you made too many frames at the end of the speech layer, simply trim your frames back to where the wav. file ends. To do so, simply highlight the frames you don't want and then Right-Click>Remove-Frames. If things go squirrely in your selection, CTRL-Z!

In this case OH MY was simplified into NEUTRAL then AH. To fix it:
A) I clicked on frame 2 and chose the mouth shape OH from the frame picker.

B) I clicked on frame 5 and inserted a new keyframe. I used the frame-picker to choose 'M'

C) I clicked on frame 7 and used the frame picker to choose the AH shape (it's the Y sound in mY that the lip-sync though it should choose for that whole first bit).

Exporting

You can be done now if you want to be. 

1) So choose File>Export>Export Video/media

2) Take the defaults and wait a minute after hitting the Export button. Adobe Media Encoder will pop up. 

3) Submit your editing file (FLA file) and your exported movie file (MP4) to the Classroom

Step 2 - creating a button

Buttons are simply another type of symbol. Whereas regular symbols (graphics/movie) have their own timelines, a button has a pretty simple timeline that has "States".

Once you've created the button, the screen will completely change for you. (picture above). Don't freak out and drive a sharpened keyboard through you monitor, this is normal, every time you edit a symbol you will move away from the regular timeline and move into this type of sub-timeline-editing.

The key features of this Button Edit are that instead of a regular timeline we now only have 4 'states' the Up state, the Over state, the Down state and the Hit state. 

1. Simply put, whatever is in Up will be seen regularly w/out having your mouse near it, it's the default view of your button. 

2. Your Over state is what your button will look like when you hover your mouse cursor over it. 

3. Down is what it looks like once you've pressed down (but not released the button click). 

4. Finally, the Hit state is where the trigger is. Typically, the Hit is the actual button shape itself, but can be really anywhere or anything on the page. We'll make ours the same size/shape as our button plus a bit on each side. 

For more information follow this link here.

You can see the 4 states above. In up I typed in the word Play and drew a rectangle with rounded edges. You can put anything you want in there. In Over I changed the colours of the word play. I did so again for the Down state. 

To populate each state, we need to have keyframes in each state. So, mash F7 a few times to create a blank keyframe 4 times. Next - we'll make the button itself. Do as you please, but it's probably easiest to just make some text called play and change its colour in the 3 states.

For the final hit state, just make a filled rectangle a bit bigger than the originally button size.

Step 3 - controlling our animation

Finally - let's control our movie. We have already caused the movie to stop upon loading. Now we want our button to allow for playback. To do so we will first make sure the button we made is on the stage and visible. Here's the control we want on the movie:

movie loads but pauses at the beginning, waiting for a user-input

user presses play

movie plays

To get our movie to do this, we will do the following:

1. Open our actions panel and place a global stop script on Frame 1 of the control layer (we did this back at the beginning of the last step).

2. Drag our Play button onto the stage (we just finished this)

3. Click on your button. In the Properties panel make sure our button has an instance name. playButton would be good (see picture below)

Now, unless you want to learn some actionscripting, you're going to copy/paste some code over to the actions window and paste them below stop().

stop();

playButton.addEventListener(MouseEvent.CLICK, clickHandler);

function clickHandler(event:MouseEvent)

{

  play();

}

What that does (for those curious) 

line 1: stops the program from running

line 2: adds an event to "listen" for the mouse-click on the object playButton (our button). It says, if button is pressed, run the function (mini-program) I called clickHandler (though it could be named anything) 

line 3 defines what happens when the miniprogram called clickHandler runs. It just plays the animation. Period.

Assignment #8: Option B - Motion Graphics

In the ever evolving world of combining computing with visual entertainment (games/movies/TV) motion graphics has come to represent the incorporation of digital footage or animation (which creates the illusion of motion or rotation), with audio for use in multimedia projects. Simply put, we can combine real and rendered footage along with sound - manipulate it to give the illusion of motion and enhance a production. Much of this is driven by static graphic and moving elements controlled precisely with movement vectors.

You will be making the following motion graphics composition in After Effects (see below). To do so you'll need to grab these resources (click on each and download to a common folder called Motion Graphics on the D drive): 

VIDEO

AUDIO

STEP 5  - TRIMMING OUR VIDEO CLIP TO THE RIGHT LENGTH

We want to trim out the beginning bit of our composition so we don't see the intro. To do so:

At the bottom of this window where you see a timecode click and you'll get a "go to time" popup appear. Type in 24;23 in the left side goto (see left at the very bottom). Click OK 

Set (click) the mark IN now. We'll keep the existing mark OUT without any changes.

This will trim out the 24seconds and 23frames that exist prior to what we want. If you want to fine tune the frame to come in on you can hit PAGEUP or PAGEDOWN keys to nudge the playhead 1 frame forward or backwards

STEP 6 - INSERTING AND TRIMMING AUDIO

We're going to do the same thing for our audio. If we scrub our video to the end (hold SHIFT down and drag the CTI (current-time-indicator, the playhead with the blue handle) to the right edge of our video we can see the video ends at 53;06

In the staging area double click our audio (the MP3) Jump to 53;06 in the audio track (that's 53 seconds and 6 frames). 

Click the MARK OUT button. See the audio trim back?

At the top of the Preview area let's head back to the Composition now (or alternatively just click on the composition layer in your Project space at the left). That gets us out of audio editing and back to the video track.

STEP 7 - EXTENDING THE COMPOSITION

Let's preview what we have by pressing SPACE. If we end the music harshly at 0:53;06 it will seem abrupt and weird. What we'll do is extend the composition out to 1:00. Let's extend out the composition past the end of the video footage to capture this feel. It will be a black screen for those 7 seconds, but the music will continue.

Press CTRL+K (or COMPOSITION>COMP.SETTINGS). We're going to change the length of the composition to 1:00

STEP 8 - ADDING OUR FIRST ACTOR

Right away we see our actress. We want to give her a name. I'm going to call her Nieve - and the location which is the Grand Canyon

B) CREATE A NULL OBJECT. This is used in After Effects ALL the time. It's an invisible object that we can use to anchor other object's X/Y/Z points/rotations/effects. Right click down by the layers section and NEW>NULL OBJECT. Move the null to the middle left of your screen.

A red box will appear onscreen. And another layer in the timeline will appear too called NULL1. We now want a tracker to analyze our footage.

STEP 9 - MOTION TRACKING

Turn the quality back up to 100% for this part. Select your video layer (the one that says MP4 at the end). Go to WINDOWS>TRACKER (it should already be on the right side by default). Notice the options? 

STEP 11 - ADDING MORE LOCATIONS and ROTATION

Now that you've added 1 LOCATION, try adding one more. At timecode 15;07  there's another clip of Nieve in the rockies.

• Add another null object.

• Create a new tracker object (by clicking on the video layer, then on the right click on TRACK MOTION), DON'T USE SCALE ON THIS ONE (just position)

• Add the location COLORADO roughly where I put mine (see picture below).

• Go ahead and run the automatic tracking.

• You will find the word COLORADO jumps around a bit depending on what you put the tracker box on. 

• BEFORE YOU APPLY THE result to the null - open the graph view of the tracker (A)

• With the 2nd tracker selected - and the layer subsection FEATURE CENTER clicked on, select all the points on the graph by dragging a window around them. (B)

• Choose WINDOW>SMOOTHER (it'll be in the same area as the tracker). Change the tolerance to 12 and hit APPLY. If tracker is greyed out and unusable you have to have selected the speed points (not x/y points) in the graph view. Call me over if this is an issue

To add rotation to the word COLORADO all we're going to do is:

(A) Click on the 3D rotational layer

(B) Click on the stopwatch next to the Y rotation label

See the 3D cursor at C? Also, notice there's a keyframe added at the beginning of the timeline for the word Colorado (D).

• Move the CTI to time 40;12

• Change the rotational angle (B) to -70

Scrub the CTI and notice that the text appears to be rotating with the camera?

STEP 12 - ADDING A TITLE THAT PERSISTS THROUGH TO THE SCREENOUT

Finally, around Timecode 40:14 (40 seconds, 14 frames) we're at Nieve in California

• Create one last null object.

• Do whatever type of tracking you want on this one (I only did motion and manually did rotation)

• Add large sized title (MOTION is 120px, GRAPHICS is 96px)

• Track the word MOTION GRAPHICS to Nieve. 

• I smoothed my keyframing again, but chose a value of 12 for smoothing (choose a greater value for less keyframes)

• Add rotation as you did in the last step (I finished my rotation around 115-degrees). 

EXPORT 

• Click on the Export button at the top left of Premiere. Give the file a name other than DSC001 (or whatever name it has currently). 

• Choose a default folder location (blue link in the export dialogue)

• At the bottom right choose EXPORT

• Find the the MP4 and submit it as the finished project