Blancer.com Tutorials and projects

This 2 part tutorial is a simulated Pac Man animation as he navigates a maze and gobbles dots along the way… with ghost chasers. The tutorial will include guidelines on building the components in Photoshop or Illustrator and then integrating them into AE to animate Pac Man. This is more of a design project that incorporates many of the foundational skills associated with AE; pre-comps, transformations, layer masks, etc.

---

Tutorial

In this project we will expand upon the Pacman animation we completed in Part 1.
What we will be doing in part 2:

1. Design the ghost shape and eyes, and animate them in After Effects
2. Add a "Start Game" and "Game Over" Slate
3. Add some Start Game and End Game audio
4. Add some enhanced sized muchies
5. Add some enhanced Munchie audo
6. Navigate our ghost in th maze, annimating changes in color

What you will need to complete Part 2

1. All of the footage files associated with Part 1. You can access these files at http://ae.tutsplus.com/
2. Download all the footage files associate with this tutorial; Part 2.

The Basic Ghost Design –
Preparing the Files in Photoshop

Ghost

The ghost element is easily created in Photo Shop or Illustrator. My tutorial uses Photoshop as the design tool.

Launch Photo Shop and open a new document.

Use a measurement that conforms to your needs. 300×300 will do nicely.

Use a transparent background.

(You only need one ghost. We’ll duplicate it later in After Effects.) I recommend you use the same dimensions as you did for your PACMAN image.

Ghost Body

1. Draw a square with the Marquis tool. Use most of the available space in your art board. Fill it with any primary color; red, green, blue, yellow.

2. Create a new layer and draw a sphere the same width as the square, and fill it with the same color as your square, then arrange the layers so they form the shape of a PACMAN Ghost.

Merge the layers.

3. Use a semi-round brush the size you want to make the eye sockets, and paint two spots where you want the eyes. I opened the Brush palette in Photoshop and changed the shape dynamics of a basic round brush to create an oval shaped brush. If you use the grid view in Photoshop it will make your life easier with this task.

Ghost Eyes

1. Create a new layer and draw a round circle with the Marquis Tool that will fit inside the eye sockets of your ghost body and fill it with black or white; something that will contrast with the body of your ghost. Rename your layer as ghost body.

2. Duplicate the layer and arrange the eyes symmetrically – to fit inside the eye sockets, and merge the two eye layers. Rename the layer as eyes.

At the end of step 2 here, you should have two layers in your photoshop document. a Ghost image and eyes.

You’re done with this design element. Be sure to save your file as something other than untitled. My suggestion is to call it Ghost Layers. Open After Effects and import this file as a Composition.

 

Enhancing The Basic Pac Man Simulation

Open your Simulated Pacman Part 1 AE project file. Imort the footage files for Part 2

Looking at your completed Part 1, you should have at the very minimum, the following functional layers, and in this order from top to bottom, in your timeline:
PacMan – as a composition.
Munchies … I call mine dots.
Maze
PacMan audio … mine is called munchie clip.

Critical Audio Clip Placement

The first thing we’re going to do is put in our Audio clips for the start of the game and the end of the game. It is critical we do this first because it sets up the parameters for how Pacman and the Ghosts will ultimately interact on the screen.

1. FROM THE PROJECT WINDOW – Drag the Intro to Pacman audio wav file into the timeline two times.

2.Position the clips so the beginninig of one of the clips aligns at the begining of the timeline, and the other aligns with the end of your timeline.

3. In preparation for the next step, we need to position the timeline marker at then of the introduction music.

Modifying Pac Man’s Chomping

Now we’re going to adjust PacMan’s two frame animation so that he starts chomping at the end of the introduction music, instead of right away.

1. Double click on the Pacman Comp in the TIMELINE window. This will open a new Comp Window and a new Tab in the Timeline.

2. Double Click on the layer. This will open a new comp Window and a new Comp Tab in the Timeline. Yes, I know I’m repeating myself.

You should now be looking at your origninal two layer Pacman comp, as illustrated above.

3. Now select the three Rotation key frames in each layer and drag them so that the first key frames line up with the timeline marker. The easiest way to select the key frames is to draw a box around one set of key frames, hold the shift key and draw a box around the next set.

Modifying Pac Man’s Route

1. In Part 1 I had my Pacman navigate off-screen to end the timeline. Seemed like a natural thing to do … But in this scenario, we have Ghosts with which to contend, so we want to change up the route that Pacman takes … one that ultimate leads to his demise. Ya ha ha ha ha. To do this we need to go in reverse for a moment and back out of some of our hard work in Part 1. Not to worry, we’re going to put everything back to normal. So … Select the Pacman layer in the Timeline. Tap the P key to reveal the Position Key Frames for the Layer, then click on the Positon text to select all of the Key Frames. Your layer should like the illustration below if done correctly.

2, Now, in the command bar, choose Animation > Key Frame Interpolation > and change the Roving Setting to Lock to Time, then click OK.

3. Now hold the Ctl Key (Cmnd Key on the Mac) and select one of the key frames. All your key frames should now be diamond shaped. Then select off the layer to deselect the key frames.

Now comes the tricky part. You must determine at what point in Pacman’s route you want him to alter his course. In my Part 1 maze, Pac man takes a northbound turn right at 14 seconds, but at that point, my Pacman should be dying. So this would be a good place to put in our pacman ending audio. Don’t worry we’ll come back to the Position Key Frames.

4. Drag the "Pacman Ending.mov" from the Project Window into the Timeline. You should position it so the end of the clip lines up with the first frame of the ending music. See my illustration below.

Hold down your control key and drag the timeline marker over the pacman ending clip to get an idea of where you might want to trim it.

Okay, back to those key frames. So now I know the exact point in time Pacman expires, so my last position keyframe will correspond with that point … dictated by the audio.

5. Manipulate your position Key Frames so that your last keyframe corresponds with the first frame of the "padman ending.mov clip.

Compare the two illustrations below to get an idea of what I did to alter my position Key Frames.

Okay … some more tweaking to do here. Those rotation Key Frames need to be corrected, but first we need to make our Position Key Frames Rove across time.

6. Select all the Position Key Frames in the Pacman layer. In the command bar choose Animation>Keyframe Interpolation>Roving>Rove Across Time. Click OK.

7. Tap the U key on the Pacman layer to reveal both the Position and Rotation Key Frames, and then line up the Rotation Keyframe pairs with their corresponding Position Keyframes. My illustrations below show out-of-synch Rotation Key Frames and then in-synch Key Frames.

Okay, we’re done with Pacman for the moment. Now we can concentrate on the Ghosts, and their interaction in the maze.

Animating the Ghost Eyes

Making the eyes wiggle in the sockets of our ghost is similar to the rotation animation we accomplished with Pacman in Part 1. We will use three key frames and the “loop out” expression.

1. Double Click on the Ghost comp. You should see two layers in your timeline; the ghost body and the eyes.

2. We only need to concern ourselves with the eyes layer, so select the eyes layer and tap the P key on the keyboard. This will reveal the Position transformation properties. Move your timeline marker to the end of the introduction music (about 4 seconds) in the timelilne then click on the stopwatch next to the Position property indicator. You will notice that a key frame appears on the timeline. Immediately Copy this keyframe.

3. Advance the timeline marker 3 frames, by tapping the Page-Down key three times. In the Comp Window move the eyes layer to the position you wish for them to toggle.

 

4. Advance the timeline marker three frames as in step three, then Perform a Paste function to create a new key frame at the new timeline position.

 

5. Hold the Alt Key (Command for Mac) and click on the stop watch to enable expressions for the layer. Select all three key frames and then from the expressions language menu choose Property > loopOut(type = "cycle", numKeyframes = 0) from the expression language arrow.

6. Precompose the two layers by selecting both layers and choosing Precompose from the Layer Menu. (Layer>precompose) Name your pre composition appropriately. You may need to find it later. Now you have one layer of a ghost with animating eyes. This is the layer we will move into our working comp.

Ghost Treak

In this tutorial we will deal with two Ghosts:

1) A Death Ghost; the one who ends Pacman’s journey, and

2) A Munch Ghost; a Ghost that gets eaten by Pacman.

Some of the steps here will be familiar to you if you completed Part 1.

1. Drag your Ghost Composition into the Composition Window, resize it and position it where you wish for it to start in the maze.

2. Duplicate the Ghost Composition Layer: Select it, Edit>Duplicate. and move it to a position in the maze where you want it to start.

3. Now change the color of one of your Ghosts. Select one of the Ghost layers then Access the Effects Menu from the command bar … choose Color Correction>Change to Color.

4. Using the Eye Dropper choose the color you want to change by clicking on one of your Ghosts.

5. Change the color of your Ghost by changing the value of the Hue Transformation Propery.

We will come back to the Effect Palette in a future step to animate the color of your Ghosts.

Ready To Navigate

1. Choose one of your Ghost layers and tap the P key to reaveal the Position properties. Move the timeline marker to the end of the introduction music, then enable Position animation for this layer by clicking on the stopwatch. You will see a diamond show up in the layer.

2. Advance the timeline marker 20 or 30 frames, then move your Ghost in the comp window to a new position. (Hold down the shift key to move in a straight line.)

 

3. You will have the same bezier path issue with your Ghosts as you did with Pacman. So use the Convert Vortex Tool to square-up the Ghost path in the Maze.

4. Repeat steps 1 through 3, navigating your Ghost around the maze. If this is the "Death Ghost" you will need to cooridinate your Ghost to collide with PacMan at the start of the "Pac Man dies" music. If this is the Munchie Ghost, you will need to coordinate the Ghost to collide with Pacman prior to the "Pacman dies" audio.

Remember to use the Key Frame Interpolation feature to force each of your Ghost Position Key Frames to Rove Across Time. Select all of the position Key Frames for the layer and then from the command bar choose: Animation>Keyframe Interpolation>Roving>Rove Across Time. Click OK. (Click here if you need help.)

Tweaking The Munch Ghost

1. Your munch Ghost needs to disappear at the point that Pacman and the Ghost collide.
To make this happen simply trim that Ghost Layer back to the point where Pacman and the Ghost Collide.

2. While we’re here we might as well add the "Ghost Eat" Audio in the timeline. Position your timeline near the point of collision between Pacman and Munch Ghost. Drag the "Ghost Each" Audio into the timeline.

3. Use the RAM Preview button in the Preview Tab or Hit the 0 in the numeric keypad to review the animation.

 

Tweaking Pacman At The Collision of the Death Ghost

1. Pacman needs to disappear at the point at which Pacman and the Death Ghost collide.
To make this happen simply trim the Pacman layer back to the point where Pacman and the Death Ghost Collide. This point also corresponds with the "Pacman dies.mov" We placed this audio in the timelne in an earlier step … referenced here.

2. Tweak your layers and Key Frames in the Timeline to line everything up. You won’t get it right the first time … trust me.

Mega Munchies

In the original Pacman Video Game, the player navigated Pacman around the maze to eat dots and Mega Munchies in order to earn points and change the Ghosts into edible Ghosts instead of Death Ghosts.

In my version, my Mega Munchies are nothing more than Big Dots. To make my dots I simply added shaped layers, positioned them in the comp window at desired locations, and then performed a precomp to collapse the shaped layers into one layer.

1. Create a new shaped layer: Go to the Command bar and choose Layer>New>Shape Layer.

2. Now, in the tool bar choose the Elipse tool, and modify the properites associated with the layer.

3. In the comp window, draw a sphere and position it in the maze accordingly.
(You can duplicate the layer to create as many Mega Munchies that you want.)

4. Position the shape layers in the maze to your liking.

6. Trim the appropriate Shape Layer(s) to correspond with the point that
Pacman
"eats" each Mega Munchy.

In my version Pacman only has time to munch one.

7. From the Project Window, drag the Cherry Bite.wav audio file to the timeline .. lining it up with where Pacman eats the Mega Munchy.

8. (Optional) Select all of your shape layers and create a precomp.
You can reference how to do that by clicking here. What this does is save you some real estate in your timeline.

Animating the Ghost Color Changes

In the original Pacman Video Game, whenever Pacman consumed a Mega Munchy .. in some versions it was a piece of fruit like a Cherry or Strawberry… all of the active Ghosts turned blue for a limited amount of time. If Pacman ate a Blue Ghost the player earned points, but if perchance Pacman encountered a Ghost of a different color, the game ended. So what we’re going to do now is animate those Ghosts in out timeline so they turn blue, and then back to their original colors, just in time to end our game at the end of our timeline.

1. In the Timeline Window, move the timeline marker to the point at which Pacman eats the first Mega Munchy. For an additional point of reference, this is also where we placed our Cherry Bite.wave file.

2. Select all Ghost layers, and access the Effects Control Palette. Click on the Hue Transform Stopwatch to set a keyframe.

3. Advance the timeline marker one frame, and change the Hue transform value till the Ghosts turn Blue. You will see that a new Key Frame was created for each of your Ghost layers. It will be necessarry to copy each pair of these keyframes for each of your Ghost layers that do not get eaten by Pacman during the time the Ghosts are Blue.

4. Advance the timeline marker to the point at which Pacman eats the first Blue Ghost, and then from the Project Window, drag into the Timeline the "Ghost Eat.wav file, and align it with the timeline marker.

One Ghost down … one to go.

5. Advance the timeline a couple of seconds .. at least past the point where Pacman eats the first Blue Ghost. Select one of your remaining Ghosts .. If you haven’t already done so, Copy the Hue Transform Key Frames for this layer that you created in step 3. Paste them into the layer, then swap the order of these Key Frames in the timeline.

Now you have returned the Ghost to it’s original color.

FINISHING UP

If we’ve done everything right most of our animating is done, but there is still one more little item with which to attend. You may notice in my maze there is a small line at the top of the Ghost box before they start animating. Let’s call it the Gate.

At the point the Ghosts are released, the Gate goes away. I did this by using a layer mask on the Maze layer.

Masking Out The Gate

1. Select your Maze layer in the Timeline Window, position your timeline marker to the point just prior to when the Ghosts start moving around the maze.

2. Using the Pen Tool from the tool bar, draw a box adjacent to the Gate.

3. Tap the M Key to reveal the Mask properites for the layer, and then click on the stopwatch.
If all you are seeing is the mask, click on the Inverted box.

4. Move your timeline marker a few frames, to the point just prior to when the Ghosts make their escape from the box, and then move the entire mask so it covers the Gate.

That’s it. You’re done with this step.

Adding Game Slates

We’re all but done with our Pacman Simulation. All we have to do now is add some graphics to help make it "real."

1. Create a new solid. Layer>New>Solid .. make sure it’s black, and size it so it covers up a portion of the maze you want your Start Game graphics to occupy. (In the illustration below, my black solid layer has been resized, indicated by the red anchor points.) Trim the layer in the Timeline so it is the same lenght as the introduction audio.

2. Make a new Text Layer. Layer>New>Text. Type in your Intro slate text. Mine says "Get Ready."

Access the Character Palette: You will necessarily have to change the fill color …white works well, the stroke properties … mine is set to none, and the font style and size.

Trim the layer so it is the same length as your black solid. Study the illustration below for the layer order, type style, and properties I used.

Repeat Steps 1 and two for your Game Over slate.

Testing Your Pacman Simulation

Tap the 0 Key on the Numeric key pad.

You can also view this video at here:

You’re done. Thank you for working through this challenging tutorial. I hope the process advanced your skill and expertise in After Effects.

Russ Williams

We have a new set of vector illustrations available exclusively for Vector Premium members. Crafted by the group over at Designious, there are numerous alien and monster skull vector illustrations in this set. You can use them in your next project that needs a scary and stylish skull. Learn more at the jump!

Continue reading “Premium Vector Pack – Stylish Skulls”

The Flying Rabbit is back! This time he needs some color. In this Video Quick Tip, you will learn how to use the Live Paint Tool in conjunction with the Swatches Panel to color an illustration. Let’s get started!

Continue reading “Quick Tip: Lightning Fast Coloring with Live Paint”

In this week’s Audio Premium content, Toby Pitman continues his series on how to make a live performance rig in Logic Pro similar to the Sonifi iPhone app.

Like the last tut in the series, this one contains twice the written detail of the average Premium tut, and almost an hour worth of of screencasts is included in the playpack.

To learn more about what you get as part of Audio Premium, read this.

Hello, and welcome to the second part of this Live Rig tutorial. In this part were going to look at how we can convert notes on the keyboard into messages that can activate FX. Well assign controllers like Modulation and Aftertouch to plugin parameters to animate them.

I’ll also show you how you can build reusable blocks by creating Macros and also build user interfaces for those blocks for more intuitive editing. You’ll also learn how to build custom faders and switches.

We’ll also deal with the problems that arise when dealing with Note Off messages in the environment.

If you wanted to know some more advanced Environment techniques then you’ve come to the right place!!!

Table of Contents

• Turning On An FX Using A Note
• Switching The FX Off
• Assigning CC Data To An FX Parameter
• Working With Different Hardware Controllers
• Adding Another Effect
• Recording your Effects Performance
• Other Applications Of This Technique

What’s included?

• Project Files
• 4 Video Walkthroughs

Existing Premium members can log-in and download. Not a Plus member? Join now.