• HELLO THERE!

    Site Updates


    Site Updates


    How to make an animated Gif with captain amercia

    Posted: 04 Sep 2011 11:57 PM PDT


    In this flash tutorial for beginners, we will take a look at how to make a animated gif with one of my favorite marrvel comic characters, Captain America. You can of course repeat this tutorial with any of your favourite comic characters from popular series such as Bleach, Naruto etc.

    1.    The first step in making an animated gif is to select the images of the characters that you want. This is not an easy process so you want two images that make sense when they animated as one gif file.  I carefully selected two images of captain America from the internet and open them up in photo shop to do some adjustments so that they can be made into gif animations in flash.

    2.     FNext I use the hues and saturation tool to refine the color so that the blue tint of captain America matches closely. This is the second step in making animated gif files.

    3.     Then I cut out the shield and manually draw the missing part of the leg.

    4.     I then place the three images together in one canvas, paying attention to the relative position at which they are going to appear in the flash canvas.

    5.     The two poses and the shield are saved into three individual transparent pngs.

    6.     The three pngs are selected and pulled into flash canvas together. Then we go to Modify>Document or Control+J to bring up the Document Property window.  And choose content then press "ok". This will make sure that the canvas will match our images sizes.

    7.     We put the shield and the two poses of captain America into their respective layers in frame one and frame two.

    8.     Select the shield and Press F8 to convert it into a graphic so that it can be animated in flash timeline.

    9.     We then space out the key frames to give them a little pause timing in between and set three more key frames for the shield.

    s//2011/09/09.jpg”>

    10.     This is roughly where you should position the shield in the four key frames.

    11.    Then we select the frames and right click and choose Create Motion Tween to create inbetween frames for the shield. Once done, you can then try to preview the animation by pressing Control+Enter.

    12.     To make the whole gif animation more dramatic, I created a spark of fire and convert it into a graphic. It is placed on the left side of the screen first.

    13.      Then I duplicated the spark key frame two more times to create some animation. This time we don't add tweening as we want the action to be very fast and swift. Please refer to the pic for how the other two frames are adjusted. And we are done for this tutorial!

    Below is the full effects on how the animated gif file will look like. Hopefully, you like this flash tutorial on making an animated gif in flash for beginners!!!


    0 comments:

    Post a Comment

     

    Meet The Author

    Experience

    About Me