Easy Way to Make an ElaKiri Animated Avatar [TUTORIAL]

R_L

Well-known member
  • Jan 21, 2007
    3,064
    46
    48
    Colombo
    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.

    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 or doing a Google Search here.

    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)





    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.

    1.jpg




    2. Go to Modify > Movie Properties (Shortcut Key: Ctrl + J)

    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)

    3.jpg




    4. Zoom In if you need using the Zoom Tool. Then select the Text Tool.

    4.jpg


    Click and drag across the white space (also called Stage). Then type whatever your text is.

    5.jpg

    Notice how a layer is added. Now we need to add an animation.

    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.

    7.jpg


    ANIMATIONS:
    8.jpg

    Once you select it will be added.

    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.

    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.

    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:

    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.

    13.jpg


    If it was successfully imported you should see it in the Content Panel under Image Resources in the Library section.

    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.

    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

    1. Go to File > Export Settings (Ctrl + Shift + F12)
    2. Click the GIF Animation option.
    3. Make sure the dimensions are 90 x 90 or whatever you selected earlier.
    4. Choose the number of colors as 128. The higher the number the larger the size of the output file.
    5. Select Loop as Forever.
    6. Click OK.
    16.jpg



    CREATING THE FILE

    1. Go to File > Export > GIF Animation (Ctrl + Shift + F)
    2. Select the location to save and save the file.
    3. Thats it!


    Final Animation

    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!
     
    Last edited:

    Malinga

    Well-known member
  • Jul 20, 2006
    61,301
    1,013
    113
    podi podi Animation hadanna oona kattiyata honda sahayak dena tutorial ekak. Thanks.
     

    R_L

    Well-known member
  • Jan 21, 2007
    3,064
    46
    48
    Colombo
    Good work bro! :yes: Keep it up! :D

    thank u.. :)


    podi podi Animation hadanna oona kattiyata honda sahayak dena tutorial ekak. Thanks.

    yes ehema podi podi ewa easy ekata karaganna puluwan widihak thama demme.. :) thanks for the reply bro...


    ahh this was what i wanted :lol: ela ela machan +Rep added.. thx for sharing! :P

    ewa nam ona nehe.. walcome walcome.. :lol:

    any problems ehema nam kiyapan.. :rofl:
     
    • Like
    Reactions: lakshan000