My Wacky Animated Signatures... So How Do I Do It?

I get asked this a lot on the forums and occasionally in-game as well so I figure i may as well just post it here so i won't have to re-type this over and over and over...  it's much simpler than most people realize, as long as you're already somewhat comfortable using the tools in Photoshop.

This is an example of what I'm talking about:

If you're familiar with Fiesta, and you must be if you're reading my blog or else why would you be here?, you know that Grandma Myzen is an NPC that resides in Elderine.  She doesn't move, she just stoically stands there asking you to do some mundane tasks for her like killing Kebings, finding a lost amulet, gathering ingredients for a soup, etc.  She's basically just there to progress the storyline.  So how did i make a statue of a character move?  We'll get to that shortly.



So here's a list of the programs that I used to create the simple signature seen above:
Photoshop (I use an old Photoshop 7.0, which does not have framed animation capabilities built in like the new CS versions do)
ImageReady (again, if you're using a newer version of PS, ImageReady is probably not necessary, but the tools are the same, so you can follow along)
FRAPS
Microsoft GIF Animator
NIF Skope

Here is what each program does in a nutshell for you:
Photoshop - You will use this program to create the general layout of your design.  This includes all font-work, design elements, etc.  Think of this as your canvas.
ImageReady - I use this only for the animation portion of the design.  Everything else, design-wise, is crafted in Photoshop.
FRAPS - I use this to record the animation once it is playing in NIF Skope.  I think you can use Hypercam or some other programs as well.  I'm comfortable using FRAPS, so it's what i stick with.
Microsoft GIF Animator - You will use this to convert your FRAPS video into a .GIF file.  The capabilities of the program are extremely limited, but you won't use it that much.
NIF Skope - This program is used to animate the characters.  I'm fairly new to this program, and self-taught, so many of the techniques could possibly be done easier and more efficiently by someone more familiar with the program itself.

Okay, so now that you have all the tools, here is a somewhat simple rundown of how it's all put together...

I'll skip the Photoshop tutorial since you should already be familiar with this to even begin with.  If you're not, there's really no sense in reading on.  You could try using the other tools with GIMP, but i'm not sure if GIMP does .GIFs or not as it's not a program i've ever used.

NIF Skope to start it all..... NIF Skope is probably unfamiliar to many of you reading this, it was completely foreign to me when someone mentioned it on the forums as a way to preview some new mobs, new weapons, etc.  NIF Skope is basically a 3-D rendering program (at least i think it is, tech-savvy people may refute the title, but really you're being nit-picky here).  With NIF Skope, i peruse the Fiesta folder on my computer and preview some animations and what not.  The program is A LOT more advanced than what I use it for, and maybe with more familiarity, some other users can teach me some advanced techniques on it.

(I apologize ahead of time that there aren't any screenshots of the process, i just don't have time at the moment)

So anyway, open up NIF Skope.  You'll see a button in the top left of your screen that simply says "Load".  Press that button and go into your Fiesta/reschar folder.  Here you will see a file folder for every mob, player-type, and NPC, as well as other various things like signposts, ores, wood, etc.  For this example let's use "Archer-F".  Archer-F, as you can tell, is the basic model of the female archer.  When you open this folder, you'll see a ton of different files within.  Each file corresponds to a different action, some are segments of an extended animation.  A single skill cast could take 3 or 4 animation files to complete, so keep that in mind.  But for now, since your screen is still black, we want to find the actual archer herself.  The easiest way is to sort this parent folder by file size.  So click the 'size' tab to sort it accordingly.  We're looking for the largest file which will be titled 'Archer-f'.  It should be a 1,095kb file.  Double click that to open it.  You may need to zoom out a little bit once the file is loaded.  Once you zoom out, you'll see the female archer model standing there in her newbie yellow dress with a pure white head and black hair.  This is the basic model.  I do not know how to add textures to this, but i'm sure there are ways to do it.  at this point, it is beyond my capabilities and beyond my care.

Okay, so now that you have that female archer standing there, we have to animate her.  To choose an animation, simply right-click in the black area that surrounds the archer model.  You will have to select 'Animation/Attach .KF" a .KF file is what i believe is called a key frame (at least that was the term we used when i was learning Flash ages ago, i'm guessing it's the same).  When you select what i had mentioned, the same folder will open up showing all of the available female archer animations.  Let's sort this list by Name, so go ahead and click the Name tab to alphabetize the list.  Once that's done, let's choose Arc-f_Bip01_Angry1.  You should then see your archer model act out the emote you just selected.  You can hit the play button on the top as well as the repeat button to have the archer model continue to repeat the animation.  You'll notice that this is the animation for the male-version of 'Angry'.  The Arc-f_Bip01_Angry2 is the correct female animation.  Right next to the repeat button is the 'Switch' button.  The switch button allows you to link various animation parts together.  So in this case, if you also attached the Angry2 .KF file, and then hit the Switch button, you'll see the two different animations played back to back and repeated.  This is good if you wanted to see all parts of a skill animation.

As you look through the folder of all the different animations, you'll see that it's really difficult to tell what animation is attached to what skill or dance in-game.  At this point, it's basically trial-and-error.  I had wanted to make a list of all the dances and their corresponding numbers, but i got lazy.  Sue me.

Okay! So now that you have the archer jumping up and down, let's work on a non-matching animation.  We'll do Grandma Myzen since i love her so much.  So hit that Load button again.  You'll have to go up one folder back into 'reschar'.  Scroll down and you'll see a bunch of folders that begin with "Eld", this corresponds to all of the NPCs that reside in the town of Elderine.  So Myzen can be found at EldMrsMisen, the spelling isn't perfect as Fiesta is adapted from Korean, but most of the time you can make an educated guess.

Okay now that you've opened Myzen's folder, you'll see that she actually does have some animations of her own even though she doesn't perform any of them in-game.  You can attach these animations the same way you did the archer OR you can hit the Attach .KF and go back up a folder into reschar again.  From here, you can choose any of the animations from any other Fiesta character you want.  Not all animations will be clean however, some of them are size dependent (like making Phouches dance, for example, you'll see it doesn't look good at all) and just won't work well.  Other characters, like Helga, cannot be animated at all for some strange reason.  Okay, so back to Myzen... let's use the same Angry1 animation that we used on our archer model earlier.  So go to Attach .KF then go up to the parent folder reschar, back into Archer-F and then select the same ..Angry1 animation we had used earlier.  You will see Myzen act it out now.  You'll also notice that her body distorts a bit, this is something that i do not know how to fix, so i just generally avoid these animations in my works.

So there you have it, that's the basics in NIF Skope.  You can play around with some of the viewing angle tools as well to get a better view of the image you want to capture.  The timeline that's shown on the top of the black box is great for frame by frame shots of various animations, like Karen's Captivate skill for example... bet u didn't know she blows kisses!

Okay, so now you have your animation.  You'll simply have to fun fraps over it to record that animation.  F9 has it's own use in both Fraps and NIF Skope, so if you're like me and lazy to change either of the defaults, you'll just have to make adjustments when you convert the video to GIF.

Okay, so you've recorded your video, now you have to convert it to GIF.  Open up Microsoft GIF Animator and then open up the file you just recorded.  full-motion video takes up a lot of space both in .fmv or .mov form or in .gif form as well, so i suggest keeping your recordings under 10 seconds if possible.  with gif animator you can edit out frames from the beginning and ending of your file, as well as removing redundant frames in-between to make your file size smaller.  i do not know of a way to lower the resolution on the animation though, or crop the unnecessary sections so i just do that in photoshop.

once you've saved your .gif, you can open it up, along with your .psd design in photoshop and imageready.  crop the .gif as you see fit and add all the layers into your .psd design.

i hope this helps, sorry it's long, and sorry there are no screenies... leave a comment if you need help.