Flash Game Design  
Tutorials Articles
Flash Game Design > Tutorials    
 
Pacman Avatar Photoshop Tutorial - Part 2  
  Step 12.
  This is part 3 of the photoshop tutorial to make an animated Pacman avatar. When Pacman moves he'll need to face 4 different dicrections. We've only made the frames, with his mouth open and closed, for him to face east. So, name each of the 2 layers "e" for facing east. Next, in each of the folders duplicate the "e" layers, naming them "n" for north, "s" for south, and "w" for west. You should end up with 8 frame, 4 in each folder. Next, rotate the 6 duplciates so that they match their name. So for "w", you'll need to flip the layer horizontally (edit > transform > flip horizontal). Do this for "w" in both the open and closed folder. After you've rotated all 6 duplicates, you should have a frame of Pacman facing left, right, up and down. Finally before we open up the photoshop PSD in image read, link all of pacman layers, so that when 1 of them is moved, all the other move.
   
 
a)   b)   c)
  Step 13.  
  Save the pacman PSD and then open it up in Adobe Image Ready. Make the "closed" folder invisible and the "open" one visible. Create a new frame and then make the "closed" folder visible and the "open" one invisible. In the 2nd frame move the closed mouthed pacman to the right, like in image c), and then make the dot, to the left of him, invisible. You can easily select the dot by holding down the Ctrl key then pointing and clicking the dot with the left mouse button.  
   
 
a)   b)   c)
 
  Step 14.  
  Make a 3rd frame and then make the east facing, closed mouth pacman invisble. Make the open mouthed, south facing pacman visible, and move him a step down. Make the trailing dot invisible and then move both of the ghosts down 1 step.  
   
 
a)   b)   c)
 
  Step 15.  
  Continue to make new frames and move the ghosts and Pacman along, step by step. Don't forget to also remove the the dot, as he eats them!  
   
 
a)   b)   c)   d)
 
 
  Step 16.
  Eventually, you'll come to apoint where the characters collide. When this happens you'll want to indicate that Pacman has died. A simple way to do this is to make a few frames making him flash, invisible then visible.
 
a)   b)   c)
  Step 17.  
  After you've made him die, you can make another sequence, so that it doesn't look repetitive and then you're done! That's the end of the Photoshop tutorial to create a Pacman avatar. Hope you enjoyed it!  
   
 

 

 
 
 
 
   
   
Site Copyright © 2008 Nick DS. All rights reserved.