External Link: http://sunrise.tm-exchange.com/main.aspx?action=threadshow&id=107217&page=auto#auto
View Topic
Page: 1 of 1 Post Reply
TUTORIAL: Creating animated avatars
View User ProfileSend Private Message Wimmel
TUTORIAL: Creating animated avatars03-Jun-2005 : Quote : Report
Toy-Car Racer

People keep asking me how i've made my custom avatar. For all you people, here's my tutorial.
(to keep it dial-up friendly, i've resized the animations)

For this tutorial you'll be needing the following tools and some knowledge about working with layers in paintshop, if you want to make a transparent avatar.

VirtualDub - Freeware: http://www.virtualdub.org/download
Ulead Gif Animator 5 - 15 day trial: http://www.ulead.com/ga/trial.htm
Rad Video tools - Freeware: http://www.radgametools.com/bnkdown.htm
PaintShop pro 9 - 30 day trial: http://www.corel.com/servlet/Satellite?pagename=Corel3/Downloads/Trials

Background information.
TMS supports animated avatar's in the bink (*.bik) video format. Size restrictions are: 128x128px, 16Kb.
Custom avatars can be stored in TM_Install_Dir\GameData\Skins\Avatars

If you already have an *.gif you'd like to use, proceed to step [6] unless your gif needs some tuning, read on from step [5].

1 Selecting your source

For this tutorial i'll be showing you how i've build my own avatar.
As a source i used a divx rip i have made from my 'garfield the movie' dvd

2 Get into the Dub

Start VirtualDub and open the *.avi
Configure the settings:
Menu/Video/Compression -> select '(uncompressed RGB/YCbCr)'
Menu/video-> Select 'Full Processing Mode'
Menu/Audio-> Select 'No Audio'
Menu/Video/Frame Rate-> [frame rate conversion] Process every third frame (decimate by 3)
This will reduce the number of frames by a third (duh), but will be fluently enough for our purposes.

Delete everything except the frame's you'd like to use. Keep in mind that to get the best quality, less frames is better, remember the size limit is 16Kb. Luckily you can start with virtual dub doing some decimating for you. As you see in the screenshot, i've selected 83 frames. After saving with the abovementioned options, i'll be left with 27 frames.

Save the .avi (menu/File->save as avi)

3 Firing up Gif Animator

Start gifanimator and open the .avi (menu/file->open video)
First notice the time delay between the frames, take notes, we're going to need this value later on.
We're going to make a square selection wich contains all the action. From the tooldock on the left klik 'selection tool (rectangle)'. In the upper toolbar, make sure that 'equal width and height' is selected. Make your selection and by selecting the individual frames, check that all the actions stays within the selected boundaries.

When you're happy with the selection, crop to selection (menu/edit-> crop canvas).
Now for the hard part, as i've mentioned earlier, less is more. We'll have to lose some frames to get better quality after conversion. This is where your own judgement has to decide what you can afford to leave out and still have something to show for.

While i like this version best (28 frames), after conversion to *.bik it looked like crap.

After some axing of frames, i've ended up with this (9 frames). I agree, it's a loss butt still looks great in TMS.
If you think it's pretty enough for conversion go to step [5] However, if you stick with me we're going to separate the boys from the men.
Last edited 03-Jun-2005 by View User ProfileSend Private Message Wimmel
View User ProfileSend Private Message Wimmel
03-Jun-2005 : Quote : Report
Toy-Car Racer

4 To Paintshop Pro and Back

From gifanimator, save your work als *.psd file (menu/file/save as->psd file)
Startup paintshop and open the psd file.

Sorry, for the inconvenience, i'm dutch.
For every frame/layer unlock the transparancy (padlock symbol) and with background eraser tool, erase everything but the action. With the right edge detect settings, you don't have to be precise, paintshop will help you keeping the edge intact.
After editing, DON'T FORGET! to lock the transparancy again. If you forget it, like i have the first time, you'll end up with this:

Save the *.psd and reopen in GifAnimator, choose 'open each layer as an object' in the open dialog.

As you'll notice, you'll have to add frames manually and assign a layer/object to each frame by hand. After adding the frames, select all the frames and change the timing (menu/frame->frame properties/delay) back to what it was in step 3.

5 Getting ready for conversion

Now we're going to resize and resample the gif.
(Menu/edit->resize image/128x128) quality best.
Next, start the optimization wizard (F11)
In the welcome screen, DO NOT select 'Optimize using a preset', Select 'Yes' to create optimized palet, NEXT.
Number of colors: 128, Dither value: 75% , feel free to experiment with these values, NEXT.
Yes, Yes, NEXT.
View the optimization result, aim for <70Kb. Save the *.gif.

6 Convert
Open RAD Video Tools
Select your *.gif and hit Bink It!
(VISIT http://www.radgametools.com/binkhcwb.htm#START for a full explanation of all the options)

The important settings:
'Compress to a % of the original' Calculate your own percentage to reach max 16Kb
'Include input video's alpha plane' Select this if you have made an transparent gif.
Hit bink and wait till the conversion is done. Check the filesize, retry with altered values if necessary.

Copy your bik to the TMS avatar folder, startup TMS and enjoy
Last edited 03-Jun-2005 by View User ProfileSend Private Message Wimmel
View User ProfileSend Private Message Starbuck
03-Jun-2005 : Quote : Report
Go-Kart Racer

Impressive tutorial !!!!

Very good job man
View User ProfileSend Private Message |DT| Hawkins
07-Jun-2005 : Quote : Report
Toy-Car Racer

Excelent work Wimmel.

I've yet to try it on my "For the birds" bink but since im going on vacation later this week i have to reschedule that work.

I think everyone will enjoy this fine read.


View User ProfileSend Private Message spedzo
08-Jun-2005 : Quote : Report
Saloon Racer

Agreed, very nice tutorial, i'll go give it a try ,probably still gonna confuse me though.
Last edited 08-Jun-2005 by View User ProfileSend Private Message spedzo
View User ProfileSend Private Message Wimmel
09-Jun-2005 : Quote : Report
Toy-Car Racer

Originally posted by spedzo ...
...probably still gonna confuse me though.

If you think that something needs better explaining, let me know and I'll try to clarify it
Last edited 09-Jun-2005 by View User ProfileSend Private Message Wimmel
View User ProfileSend Private Message Farting Dog
07-Sep-2005 : Quote : Report
Hatchback Racer

View User ProfileSend Private Message Dark Dragon (A...
17-Sep-2005 : Quote : Report
Saloon Racer

Tiny statement

I can see why you don't use this:- as the avatar, sometimes it will get a little buggy and blank out a bit of the pic.
Last edited 17-Sep-2005 by View User ProfileSend Private Message Dark Dragon (Anti-TMU)
View User ProfileSend Private Message csani
good10-Nov-2005 : Quote : Report
Toy-Car Racer

thx for the information!!!
Last edited 10-Nov-2005 by View User ProfileSend Private Message csani
Post Reply
© 2005 tm-exchange.com (7 queries, 0.38 seconds)