HOWTO: Animated Avatar

[The_Spinning_Top]

I have had a few people send me tells asking me how I made my animated avatar. There seems to be enough interest to publish a HOWTO post on this. Its really quite simple but it took a bit of experimentation before I hit on the right combination of tools.

First and foremost read the screenshot demo guide. (http://boards.cityofheroes.com/showflat.php?Cat=&Board=faq&Number=366654&fpart=1& PHPSESSID=). I used demorecord, demostop and demodump to record the in game sample for the animated GIF. To make your life easy I recommend using the Demo Launcher (http://home.kc.rr.com/dasloth/CoH/Demos/DemoLaunch.htm) program. This will let you dump the demo at a fixed rate and a fixed size. Make the demodump as small as possible (640x480 is the smallest) then dump the screens at 18 FPS.

Instead of using /demorecord you could use a program like FRAPS which is very good. But since the /demorecord does exactly what you want without having to download or play with more functions I recommend the former. Due to the nature of the dump (all .tga files) its going to hog your hard disk space. Mine took about 2 gigs of space so make sure you have plenty of room.

Your next step is you need to convert the actual screenshots into a format that can easily be manipulated. You could load each file and manually save them as gifs but my 10 second demo at 18fps turned into 600 .tgs screenshots. I recommend you use a batch conversion program of some kind. The best (and easiest one to use IMO) is LVIEW Pro (http://www.lview.com/index1280.htm). You can get a demo version for 21 days which should be ample time to convert your files.

Once that is done you need a good GIF Animator (http://www.ulead.com/). I recommend the ULEAD one. I tried a few different ones but each of them had some sort of deficiency that would turn the project into an exercise in monotony (example, having to crop each individual frame). Again you can get a fully functional demo which lasts 15 days.

Now what you need to do is drag and drop all the frames into the animator. Dont use the wizard as it limits you to 60 frames for some reason. Edit the animation to your satisfaction. Now the marginally tricky part. You have to crop the file into an even sized box. So pick the dimensions you want (I used 300x300) and crop the canvas (from the edit menu). This should get a nice square with the appropriate parts of the animation showing.

The final step is to then resize the whole thing so it fits the avatar size limit which is 80x80 pixels. Save it and bingo you have your new animated avatar!

I hope people found this guide useful. One last tip to have a smooth animation your file will probably be relatively large (my animation is 800kb). Make sure you upload it to a host that wont charge you for downloads. If you are a frequent board poster your avatar will be downloaded numerous times over the course of a month.

Good luck.

[Doctor_Shock]

I made my current animated avatar in Adobe Imagready CS. If you've used it, how would you compare it to the Ulead package?

I like Imageready, but there are a couple things in it that drive me mad.

[The_Spinning_Top]

Sorry never used it. But from past experience Adobe products can pretty much do anything - but they aint intuitive :)

I tried about 4 different shareware packages (including LVIEW Pro which can do animated gifs) and they were all tedious to use. The Ulead one was far and away the best and the most intuitive (as in I didn't have to read the help function :)

Hope that helps.

[Ex_Libris]

I gave it a shot. Here's what I created. Whaddya think?

[Edit: Removed due to bandwidth considerations. If you want to see it, check it at Emeralde (http://business.wm.edu/ted.boone/emeralde.gif) ]

[Kungfoo]

Personally, I think "between two avatars, the size of the page download just increased by over 1 mb." Am I the only one who finds this unacceptable?

[Chunes]

I'm surprised there isn't a filesize limit on the boards for avatars. Avatars should really be no larger than 30kb or so.

[Super_Volt]

Correct me if I'm wrong, but I think there's no limit of avatar filesize because Cryptic/NCSoft doesn't host the avatars. They only accept the link to your avatar image, so file size isn't something they need to be concerned with.

[Chunes]

Well, true. As long as it isn't their bandwidth being used, I imagine they don't care too much. It's just a courtesy thing, though. It's not really a problem for broadband users, but downloading a meg worth of avatars just to read some text is a little patronizing to dial-up users.

[Kungfoo]

It's not an issue with their bandwidth or anything, it's just bad netiquitte to use files that large. Some older browsers (older versions of Netscape, for example) load all page images before they load text.

If you were on 56k, would you want to wait several minutes (nevermind how slow this site can be sometimes on its own) for someone's animated avatar to load before you could see the text - the only thing you wanted to see in the first place?

Granted, those users are far and few between, but for heaven's sake, think of the dial-up users *shudder*.

EDIT: For what it's worth, both animations look really nice.

[Ex_Libris]

[ QUOTE ]
Personally, I think "between two avatars, the size of the page download just increased by over 1 mb." Am I the only one who finds this unacceptable?

[/ QUOTE ]
No you're not, but the second one is 355KB while the first is 802KB. Even smaller sizes can be done. I think the idea of capping your character, animated, is a neat one, but you'll have to use short animations. That Accelerate Metabolism one should be the maximum.

By the way, the concerns of dial-up users are not very important on this particular board, because while some do play CoH, it's a bad idea so most CoHers (and other modern MMORPGs) are broadband.

[Ex_Libris]

[ QUOTE ]
Personally, I think "between two avatars, the size of the page download just increased by over 1 mb." Am I the only one who finds this unacceptable?

[/ QUOTE ]

I didn't really think about the bandwidth issue. My bad. I'm now using a 3k file, instead of a 350k file. Hope that helps.

[Doctor_Shock]

[ QUOTE ]
[ QUOTE ]
Personally, I think "between two avatars, the size of the page download just increased by over 1 mb." Am I the only one who finds this unacceptable?

[/ QUOTE ]

I didn't really think about the bandwidth issue. My bad. I'm now using a 3k file, instead of a 350k file. Hope that helps.

[/ QUOTE ]

You can still have an animated avatar if you keep it simple. I think mine stylishly conveys my character and his electrical based powers, all in less than 10 frames of animation and just over 20k in size.

You could do the same in a similar fashion to the still frame your using now. Keep the same pose but take a demo with the flames on the left billowing. When you import it into your gif animating software, pare it down to less than 15 frames, put it on a loop and it should still look good.

[Ex_Libris]

Where exactly do you host the file at? That's the only part I'm seeming to have any trouble with...

[Ex_Libris]

[ QUOTE ]
Where exactly do you host the file at? That's the only part I'm seeming to have any trouble with...

[/ QUOTE ]

You've got to come up with your own space for hosting the picture.

[Ex_Libris]

Hmmm....every place that I try to put it on, I get "access forbidden" errors and crap...can anyone please help me out with an idea on some webspace that's easier to use?

[Ex_Libris]

Okie dokie...think I found one.

[TheBlackMallard]

this is great thanks

[The_Spinning_Top]

[ QUOTE ]
I gave it a shot. Here's what I created. Whaddya think?


[/ QUOTE ]

Awesome. What she casting?

[The_Spinning_Top]

First, anyone who replied to this thread on dialup?

Second, anyone here using such an old browser that you must wait for pics to load before you start reading?

Finally, you only load it once then its cached either on your PC or at your ISP.

But point taken. I am working on optimising the anim now. Gif Animator has a few options I am looking at without reducing frame rate. But is a bit more complex.

Thanks all.

[Ex_Libris]

[ QUOTE ]
First, anyone who replied to this thread on dialup?

Second, anyone here using such an old browser that you must wait for pics to load before you start reading?

Finally, you only load it once then its cached either on your PC or at your ISP.

But point taken. I am working on optimising the anim now. Gif Animator has a few options I am looking at without reducing frame rate. But is a bit more complex.

Thanks all.

[/ QUOTE ]
Nevermind framerate; just reduce what you show. You don't need to show your character just standing there with the fiery hands; cut that short. And you don't need all the frames of Burn; make it shorter.

[Ex_Libris]

[ QUOTE ]
Awesome. What she casting?

[/ QUOTE ]

Accelerated Metabolism. The bread and butter of a Radiation Defender. I put her back up. :)

[Ex_Libris]

CGameProgrammer - GET BENT! your [censored] is taking up more bandwith than any of their Avatars. SHUT THE HELL UP! :)

[Projection]

Very nice info. Thank you.

[The_Spinning_Top]

Just used the optimised function for my avatar in GIF Animator. Cut the size in half. The easiest way to optimise your file is to use the colour selection. Since the avatar is so small you can cut a lot of repitative colours out. Dropped mine from 256 colours to 30 with no noticable loss of quality.

Something else you can try. :D

[The_Spinning_Top]

One last thing. An 800k file takes 1m 55s to download. Not so terrible. To be honest I dont know anyone who is still on modem... :)

[Nethersoul]

Just wanted to mention that I am sometimes on a modem along with some friends.

It's only because we play when we travel, and obviously our BB dunt come with us. It stinks, but we need our CoH fix.

And, any cutting down you do on your avatars is very much appreciated. I love to see them. But if modem guys are really gonna throw a hissy over it, they can always disable bringing them up in the forums.

Secondly I believe there are several GIF optomizers out there that do all that cutting-down-without-losing-quality for you at least on the GIF part if that's an issue for you. I think GIF Optimizer (gee what does this prog do? :P) does a good job, but I can't remember if it has a free trial or not. I'll look it up again and see what they offer.

Any other suggestions for optimizing your anime besides the GIF? Please post again, thx.

Great thread Spin and all. :cool:

[Ex_Libris]

If it's helpful at all for those of you on dial-up, you can turn off portraits in your user settings for the forums. Under "Main Configuration", click "Edit" next to "Display preferences, number of shown threads, languages, colors... ". Select "No" for "View user's pictures with their posts?", the second to last option on the following page.

[The_Spinning_Top]

Just a bump to make sure it doesnt get deleted due to inactivity...

[MothTwiceborn_NA]

I managed to shave 150K off your avatar by reducing the colours to 127 in Paint Shop Pro's Animation Shop. It still looks the same to me :-)

[Prolix]

[ QUOTE ]
Just a bump to make sure it doesnt get deleted due to inactivity...

[/ QUOTE ]

FYI, posts in the Guides forum don't get deleted. Happy happy, joy joy :D

*Runs off to make an avatar of me herding*

[The_Spinning_Top]

[ QUOTE ]
I managed to shave 150K off your avatar by reducing the colours to 127 in Paint Shop Pro's Animation Shop. It still looks the same to me :-)

[/ QUOTE ]

Is that all? :)

I managed to half its size by using the GIF animator. Got it down to 100 colour or something. I just need to change the link to point to the 400k one as opposed to the 800k one.

[The_Spinning_Top]

[ QUOTE ]
[ QUOTE ]
Just a bump to make sure it doesnt get deleted due to inactivity...

[/ QUOTE ]

FYI, posts in the Guides forum don't get deleted. Happy happy, joy joy :D

*Runs off to make an avatar of me herding*

[/ QUOTE ]

Thanks. Didnt know that. Didnt want to loose the info :)

[MasterMarbles]

Hey The_Spinning_Top, thanks for the tips. :)

After some painful positioning of my chars, I managed to make this... What do you all think?

[The_Spinning_Top]

[ QUOTE ]
Hey The_Spinning_Top, thanks for the tips. :)

After some painful positioning of my chars, I managed to make this... What do you all think?

[/ QUOTE ]

Awesome!

[Runpunch]

awesome tips Spinning Top :D

<---------- my first try

[XeRox]

i just dont know how to make an avatar nor get 1

[XeRox]

[ QUOTE ]
i just dont know how to make an avatar nor get 1

[/ QUOTE ] as you can see i dont have 1

[ElDee_NA]

Hey, it worked. Groovy.

Thanks for the guide :)

[Loviatha]

[ QUOTE ]
Personally, I think "between two avatars, the size of the page download just increased by over 1 mb." Am I the only one who finds this unacceptable?

[/ QUOTE ]

Probably.

[ElDee_NA]

Of course, you should be able to disable avatars from the "My Home" link. And once you've seen them, they stay in your cache and don't need to be downloaded again ;)

[Markus]

awesome thanks getting to work on it now

[Markus]

bump

[Your_Ad_Here]

Can't wait to get mine going now that I've seen all these cool ones. Have you guys seen the one with spider man dancing? Do you think DC is going to get peeved if they see that as someones avitar?

[Markus]

bunp

[Markus]

WOO-HOO! I did it!

Thanks a ton!

[Starstruck]

Does anyone know if Paint Shop Pro 9 will make animated gifs? I just want to know if it's possible, but instructions from someone who has done it would be cool too.

[Markus]

Well I used paint pro 8 for mine so I would assume yes.

[GageEndaI]

[ QUOTE ]
I made my current animated avatar in Adobe Imagready CS. If you've used it, how would you compare it to the Ulead package?

I like Imageready, but there are a couple things in it that drive me mad.

[/ QUOTE ]

Heh, I have the CS2 Suite also, Imageready has a lot of features I wouldn't mind upgrades for.. perhaps with Adobe buying Macromedia we might be able to get a lot of more intiresting features coming through.

InDesign is probrobly one of the easiest animation editors, heck, it even lets you control how long each frame is on the screen. I am a huge fan of it and will support it to anyone who wants to buy a copy. Just make sure you do it legitimately! Nothing worse than thieves.

[Starstruck]

Cool...for those that want to know...do this to use Paint Shop Pro 7+ to create an animated gifs from individual pictures:

File | Jasc Products | Launch Animation Shop

Then choose File | Animation Wizard

[Starstruck]

Ok well...I used Paint Shop Pro to create the animated gif but when I saved it, a wizard came up about optimization and now all the pics are grainy. :( Anyone have advice on how to stop it from "optimizing"?

[KiwiLi]

Just set the better image quality bar to the top, and the colors shouldn't be changed, or press the customize button, and change the colors to the maximum which is 255 colors.

By the way, I tried to optimize Spinning Top's avy. :p 249KB (http://www.kiwichan.com/avatars/temp/spinningtopoptimized.gif) I could probably collapse it more it but not enough time atm. ^^

[Markus]

Bump this is a good guide, and I want to keep it active.

[thePatriot]

I always wondered you guys did it. Great guide and after reading I have to say "Doh! Why didn't I think of that!"

[Mad_Druid]

I have a short (very) wav file I want to turn into an avatar...any idea how to do that?

[Mad_Druid]

well, I say wav, its uses Windows Media Player...not that sure what type of file it is.

[NinjaAssassin]

Nice Guide!

[Street_Wolf]

I cant see anything :(, I click the link and when its done loading i get a blank white screen. Nothing.

[Dysmal]

[ QUOTE ]
I have a short (very) wav file I want to turn into an avatar...any idea how to do that?

[/ QUOTE ]

Hmm. .Wav files are audio files. They dont contain video. At least, not as far as I know.

[Altoholic_Monkey]

[ QUOTE ]
I have a short (very) wav file I want to turn into an avatar...any idea how to do that?

[/ QUOTE ]

are you sure its a .wav file, that is sound. Is there a .wmf that's a window media file, which can contain video but .wav is sound only.

[Nachtraserei]

Yay!!! I now know how to make a nice avatar! Thank you...

One question, how did Altoholic_Monkey make his avatar?

[Golden_Ace]

her...

take a snapshot of all the different insperations, Cut them down to size, put them together with a gif maker program. I use Easy Gif animator myself.

[Swift_Lightning]

Thanks for the great guide.