R_L
12-30-2009, 12:20 AM
Seems like a lot of people are interested in making an Animated Avatar for ElaKiri.com ;) So this tutorial is to provide the details on how to create this avatar in an easy way.
http://lh6.ggpht.com/_fvSqTlBJorc/SzpC_8IMw3I/AAAAAAAAADw/dgQ12sir78k/s800/Movie1.gif
There are many ways to make animations especially animated images (gifs in this case). The most famous software Flash is not very very easy to use and everyone doesnt feel comfortable with it so this is NOT going to be using Flash! We will be using another software known as SwishMax.
SWiSH Max is a flash creation tool that is commonly used to create interactive and cross-platform movies, animations, and presentations.
For anyone interested in learning more about SwishMax please visit the Wikipedia article here (http://en.wikipedia.org/wiki/SWiSH_Max) or doing a Google Search here (http://www.google.lk/search?q=swish+max).
The first step would be to download SwishMax if you do not already have it installed. Please use the link below to download Swish Max and then install it using the setup file provided. Patch the file using the patch also in the zip file.
DOWNLOAD SWiSH MAX 2.0 (With Patch) (http://www.4shared.com/file/184073768/196fc13a/SwishMax20_withPatch_.html)
Before Starting The Animation
Before starting on the animation you need to plan and visualise how you would want to have your avatar. You should also keep in mind, about the size of your avatar which is allowed on ElaKiri.com. Currently, you are allowed to use an avatar which is 90 by 90 pixels or 19.5 KB (whichever is smaller). Therefore your animation needs to be small and try to avoid big images. Make it to around 70-75 frames.
Here It Goes!
Now to commence animating. :)
1. Open SWiSH Max. Cancel any windows which may ask you to open stuff, register, etc. Go to File > New.
http://lh5.ggpht.com/_fvSqTlBJorc/SzpD--xv3DI/AAAAAAAAAD0/HPTM1KxKVOQ/1.jpg
2. Go to Modify > Movie Properties (Shortcut Key: Ctrl + J)
http://lh3.ggpht.com/_fvSqTlBJorc/SzpE2V93MXI/AAAAAAAAAD4/p5nZLJV6Jgc/2.jpg
3. In the dialog you receive put the Width and Height as needed. (You have to decide that beforehand.) Leave the frame rate as default (25 fps).
For the example, I shall be using 90 x 90 pixels (the max. dimensions)
http://lh6.ggpht.com/_fvSqTlBJorc/SzpFkEE3qfI/AAAAAAAAAD8/JGwxPkfra5w/3.jpg
4. Zoom In if you need using the Zoom Tool. Then select the Text Tool.
http://lh5.ggpht.com/_fvSqTlBJorc/SzpGQZlZCnI/AAAAAAAAAEA/2ioZQSepa28/4.jpg
Click and drag across the white space (also called Stage). Then type whatever your text is.
http://lh6.ggpht.com/_fvSqTlBJorc/SzpG_e9GkeI/AAAAAAAAAEE/UmuyWt7EZQM/5.jpg
Notice how a layer is added. Now we need to add an animation.
http://lh4.ggpht.com/_fvSqTlBJorc/SzpH94eaoTI/AAAAAAAAAEI/i3d7xp4xKSA/6.jpg
Right click on Square 1. Then select Appear Into Position. In the list that comes select an Animation. Theres a big list.
For our example Fade In (Std) will be used.
http://lh3.ggpht.com/_fvSqTlBJorc/SzpJLwYxEFI/AAAAAAAAAEM/NOvM13oiGPo/7.jpg
ANIMATIONS:
http://lh6.ggpht.com/_fvSqTlBJorc/SzpJL0dYfEI/AAAAAAAAAEQ/a36btF6OivQ/8.jpg
Once you select it will be added.
http://lh6.ggpht.com/_fvSqTlBJorc/SzpKN3nIVKI/AAAAAAAAAEU/sndCr9MPhB0/9.jpg
You can shorten the time by clicking and dragging on the small black dot which you see on the 20th frame. For our example we reduce it to 7 frames.
http://lh4.ggpht.com/_fvSqTlBJorc/SzpMGRU0upI/AAAAAAAAAEc/5djO7PGNhTY/10.jpg
You can then have a Looping Animation if you need. Right-Click on the 8th frame an select Loop Continuously and select an animation in the list that appears.
There too you can change the time as earlier by clicking and dragging the last frame. In our example its reduced to 25 frames and the looping animation is Wild-Pulse.
http://lh3.ggpht.com/_fvSqTlBJorc/SzpN-eAXd4I/AAAAAAAAAEg/kEe9TD2ydQY/11.jpg
The same way a Fade Out effect can be added by right clicking on the next blank frame which is on the 33rd frame. Select Disappear from Position and then the animation fade out. Reduce the time accordingly as above. In our example its 7 frames.
Click on the 40th frame, then select the text tool. Then again drag and draw a text box. Type a text as in our example "Try It!". Again use another effect by adding it like in the above steps. In the end you should have something like this:
http://lh3.ggpht.com/_fvSqTlBJorc/SzpRbvam6sI/AAAAAAAAAEo/yIfc8WE7U7s/12.jpg
Animation used in the example is Fade In > Looping - Rocking > Fade Out.
Now if you want to add an image. Click on the next empty frame. Go to the File > Import to Library > Image. Then select the image from whereever you saved it from.
http://lh3.ggpht.com/_fvSqTlBJorc/SzpSybhrBnI/AAAAAAAAAEs/CeGAnEOAEsw/s512/13.jpg
If it was successfully imported you should see it in the Content Panel under Image Resources in the Library section.
http://lh4.ggpht.com/_fvSqTlBJorc/SzpTAuB_clI/AAAAAAAAAEw/i8FPK6lV600/14.jpg
Drag and drop the image to the stage. Then click on the layer which was added for the image. Then click on the next empty frame and then add an effect just as previous. You can add a fade in and just a fade out even.
http://lh4.ggpht.com/_fvSqTlBJorc/SzpbAuuv1II/AAAAAAAAAE4/5OUTi7v8_-g/15.jpg
Thats it.. Your basic and most simple animated avatar is complete. Now comes the part of producing a .gif file. This file is what will be uploaded as your avatar. To produce this gif file you need to first do a small amendment in the settings.
Generating Your Animation
All done and now to make your settings ready.
GETTING THE SETTINGS READY
Go to File > Export Settings (Ctrl + Shift + F12)
Click the GIF Animation option.
Make sure the dimensions are 90 x 90 or whatever you selected earlier.
Choose the number of colors as 128. The higher the number the larger the size of the output file.
Select Loop as Forever.
Click OK.
http://lh4.ggpht.com/_fvSqTlBJorc/SzpcWKJJbwI/AAAAAAAAAFA/e2cMA6aMKEI/16.jpg
CREATING THE FILE
Go to File > Export > GIF Animation (Ctrl + Shift + F)
Select the location to save and save the file.
Thats it!
Final Animation
http://lh3.ggpht.com/_fvSqTlBJorc/Szpg8jdu-wI/AAAAAAAAAFU/mromvBHi9YI/Final.gif
This is what our final example looks like. BUT even this is too big to upload to ElaKiri as an avatar. So get an idea of what your animation should be if you want it to be as your ElaKiri avatar.
Any questions please post it here.. Dont worry no questions are stupid unless if they dont belong to the topic... ;) Apologies on any typo errors, etc which might be there... පුලුවන් නම් මෙක unicode වලිනුත් දාන්නම්! ;)
Have Fun!
http://lh6.ggpht.com/_fvSqTlBJorc/SzpC_8IMw3I/AAAAAAAAADw/dgQ12sir78k/s800/Movie1.gif
There are many ways to make animations especially animated images (gifs in this case). The most famous software Flash is not very very easy to use and everyone doesnt feel comfortable with it so this is NOT going to be using Flash! We will be using another software known as SwishMax.
SWiSH Max is a flash creation tool that is commonly used to create interactive and cross-platform movies, animations, and presentations.
For anyone interested in learning more about SwishMax please visit the Wikipedia article here (http://en.wikipedia.org/wiki/SWiSH_Max) or doing a Google Search here (http://www.google.lk/search?q=swish+max).
The first step would be to download SwishMax if you do not already have it installed. Please use the link below to download Swish Max and then install it using the setup file provided. Patch the file using the patch also in the zip file.
DOWNLOAD SWiSH MAX 2.0 (With Patch) (http://www.4shared.com/file/184073768/196fc13a/SwishMax20_withPatch_.html)
Before Starting The Animation
Before starting on the animation you need to plan and visualise how you would want to have your avatar. You should also keep in mind, about the size of your avatar which is allowed on ElaKiri.com. Currently, you are allowed to use an avatar which is 90 by 90 pixels or 19.5 KB (whichever is smaller). Therefore your animation needs to be small and try to avoid big images. Make it to around 70-75 frames.
Here It Goes!
Now to commence animating. :)
1. Open SWiSH Max. Cancel any windows which may ask you to open stuff, register, etc. Go to File > New.
http://lh5.ggpht.com/_fvSqTlBJorc/SzpD--xv3DI/AAAAAAAAAD0/HPTM1KxKVOQ/1.jpg
2. Go to Modify > Movie Properties (Shortcut Key: Ctrl + J)
http://lh3.ggpht.com/_fvSqTlBJorc/SzpE2V93MXI/AAAAAAAAAD4/p5nZLJV6Jgc/2.jpg
3. In the dialog you receive put the Width and Height as needed. (You have to decide that beforehand.) Leave the frame rate as default (25 fps).
For the example, I shall be using 90 x 90 pixels (the max. dimensions)
http://lh6.ggpht.com/_fvSqTlBJorc/SzpFkEE3qfI/AAAAAAAAAD8/JGwxPkfra5w/3.jpg
4. Zoom In if you need using the Zoom Tool. Then select the Text Tool.
http://lh5.ggpht.com/_fvSqTlBJorc/SzpGQZlZCnI/AAAAAAAAAEA/2ioZQSepa28/4.jpg
Click and drag across the white space (also called Stage). Then type whatever your text is.
http://lh6.ggpht.com/_fvSqTlBJorc/SzpG_e9GkeI/AAAAAAAAAEE/UmuyWt7EZQM/5.jpg
Notice how a layer is added. Now we need to add an animation.
http://lh4.ggpht.com/_fvSqTlBJorc/SzpH94eaoTI/AAAAAAAAAEI/i3d7xp4xKSA/6.jpg
Right click on Square 1. Then select Appear Into Position. In the list that comes select an Animation. Theres a big list.
For our example Fade In (Std) will be used.
http://lh3.ggpht.com/_fvSqTlBJorc/SzpJLwYxEFI/AAAAAAAAAEM/NOvM13oiGPo/7.jpg
ANIMATIONS:
http://lh6.ggpht.com/_fvSqTlBJorc/SzpJL0dYfEI/AAAAAAAAAEQ/a36btF6OivQ/8.jpg
Once you select it will be added.
http://lh6.ggpht.com/_fvSqTlBJorc/SzpKN3nIVKI/AAAAAAAAAEU/sndCr9MPhB0/9.jpg
You can shorten the time by clicking and dragging on the small black dot which you see on the 20th frame. For our example we reduce it to 7 frames.
http://lh4.ggpht.com/_fvSqTlBJorc/SzpMGRU0upI/AAAAAAAAAEc/5djO7PGNhTY/10.jpg
You can then have a Looping Animation if you need. Right-Click on the 8th frame an select Loop Continuously and select an animation in the list that appears.
There too you can change the time as earlier by clicking and dragging the last frame. In our example its reduced to 25 frames and the looping animation is Wild-Pulse.
http://lh3.ggpht.com/_fvSqTlBJorc/SzpN-eAXd4I/AAAAAAAAAEg/kEe9TD2ydQY/11.jpg
The same way a Fade Out effect can be added by right clicking on the next blank frame which is on the 33rd frame. Select Disappear from Position and then the animation fade out. Reduce the time accordingly as above. In our example its 7 frames.
Click on the 40th frame, then select the text tool. Then again drag and draw a text box. Type a text as in our example "Try It!". Again use another effect by adding it like in the above steps. In the end you should have something like this:
http://lh3.ggpht.com/_fvSqTlBJorc/SzpRbvam6sI/AAAAAAAAAEo/yIfc8WE7U7s/12.jpg
Animation used in the example is Fade In > Looping - Rocking > Fade Out.
Now if you want to add an image. Click on the next empty frame. Go to the File > Import to Library > Image. Then select the image from whereever you saved it from.
http://lh3.ggpht.com/_fvSqTlBJorc/SzpSybhrBnI/AAAAAAAAAEs/CeGAnEOAEsw/s512/13.jpg
If it was successfully imported you should see it in the Content Panel under Image Resources in the Library section.
http://lh4.ggpht.com/_fvSqTlBJorc/SzpTAuB_clI/AAAAAAAAAEw/i8FPK6lV600/14.jpg
Drag and drop the image to the stage. Then click on the layer which was added for the image. Then click on the next empty frame and then add an effect just as previous. You can add a fade in and just a fade out even.
http://lh4.ggpht.com/_fvSqTlBJorc/SzpbAuuv1II/AAAAAAAAAE4/5OUTi7v8_-g/15.jpg
Thats it.. Your basic and most simple animated avatar is complete. Now comes the part of producing a .gif file. This file is what will be uploaded as your avatar. To produce this gif file you need to first do a small amendment in the settings.
Generating Your Animation
All done and now to make your settings ready.
GETTING THE SETTINGS READY
Go to File > Export Settings (Ctrl + Shift + F12)
Click the GIF Animation option.
Make sure the dimensions are 90 x 90 or whatever you selected earlier.
Choose the number of colors as 128. The higher the number the larger the size of the output file.
Select Loop as Forever.
Click OK.
http://lh4.ggpht.com/_fvSqTlBJorc/SzpcWKJJbwI/AAAAAAAAAFA/e2cMA6aMKEI/16.jpg
CREATING THE FILE
Go to File > Export > GIF Animation (Ctrl + Shift + F)
Select the location to save and save the file.
Thats it!
Final Animation
http://lh3.ggpht.com/_fvSqTlBJorc/Szpg8jdu-wI/AAAAAAAAAFU/mromvBHi9YI/Final.gif
This is what our final example looks like. BUT even this is too big to upload to ElaKiri as an avatar. So get an idea of what your animation should be if you want it to be as your ElaKiri avatar.
Any questions please post it here.. Dont worry no questions are stupid unless if they dont belong to the topic... ;) Apologies on any typo errors, etc which might be there... පුලුවන් නම් මෙක unicode වලිනුත් දාන්නම්! ;)
Have Fun!