SEARCH
  Tutorials Flash & Swish Flash Tutorials How to make an animated gif with captain amercia

How to make an animated gif with captain amercia

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.

img

2.&nbsp 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.

img

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

img

4.&nbsp 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.

img

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

img

6.&nbsp 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.

img

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

img

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

img

9.&nbsp 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.

img

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

img

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.

img

12.&nbsp 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.

img

13.&nbsp   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!

img

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!!!

ABOUT THE AUTHOR

10Steps is a huge resource of Photoshop tutorials, freebies and inspiration for designers.

subscribe to newsletter