05-23-2009, 09:00 PM
(This post was last modified: 05-23-2009, 09:10 PM by Cobalt Blue.)
GIF Animation Tutorial for Dummies
by Metaru
1)google "Unfreez". Download. (Disclaimer: you can use any program you want/can, i'll use unfreez for this because its simple, small and free)
2)Open MSPaint or you Graphic edition program of preference.
What is an Animation?
3)An animation its nothing but a sucesion of images wich are showed at a certain speed thus creating the optical ilusion of movement. Lets say we want to create a simple animation of a ball bouncing on the floor. so for that, we need a ball, and a line that represents the floor.
![[Image: s6oodh.png]](http://i41.tinypic.com/s6oodh.png)
4)Since we know that an animation is a sucesion of multiple images, we need to draw each stage of the ball from when it floats in the air, falls and touches the ground create the ilusion of movement. each one of these images will be known as Frames. save them as 1, 2 and 3.
![[Image: 2ql7eig.png]](http://i40.tinypic.com/2ql7eig.png)
![[Image: t9y78i.png]](http://i43.tinypic.com/t9y78i.png)
5)Now, Open Unfreez, and Click and drag the images in the proper order-otherwise your animation will not make any sense-.
![[Image: 2118fx5.gif]](http://i40.tinypic.com/2118fx5.gif)
click on Make Animated GIF and voilá, you created an animation.
![[Image: 55qb7q.gif]](http://i43.tinypic.com/55qb7q.gif)
6)Now you're wondering why it looks so silly. Its because the while the animation is indeed working and you see movement, there is no transition between the end of the animation and the start. in order to create a proper loop animation you need to conect the end with the start of the action. in this case is easy, because all you need is a frame for when the ball goes up again after bouncing, and for that you can use again the 2nd frame of our current animation. open unfreeze again, drag either the 3 frames you created first or the animation gif you created, both work, and then add again a copy of the frame 2. click on Make Animated GIF again and the animation will be complete.
![[Image: 2emcvo5.gif]](http://i43.tinypic.com/2emcvo5.gif)
7) now there is one last factor that you need to know if you plan to work on something more elaborated. this is the Frame Delay or Frame Speed and its often displayed as #/100(miliseconds), wich is basically how long a frame is displayed untill the file displays the next one. while you can indeed set the frame delay to 0(in wich case the frame would simply not appear) you must be aware that most browsers(such as Firefox, IE and Opera) will not be able to render anything below 3/100.
Conclusion:
This tutorial is aimed basically for those who want to learn the core mechanics of animationg using the GIF format. understanding this is just the first step, the rest is up to your own practice and learning.
by Metaru
1)google "Unfreez". Download. (Disclaimer: you can use any program you want/can, i'll use unfreez for this because its simple, small and free)
2)Open MSPaint or you Graphic edition program of preference.
What is an Animation?
3)An animation its nothing but a sucesion of images wich are showed at a certain speed thus creating the optical ilusion of movement. Lets say we want to create a simple animation of a ball bouncing on the floor. so for that, we need a ball, and a line that represents the floor.
4)Since we know that an animation is a sucesion of multiple images, we need to draw each stage of the ball from when it floats in the air, falls and touches the ground create the ilusion of movement. each one of these images will be known as Frames. save them as 1, 2 and 3.
5)Now, Open Unfreez, and Click and drag the images in the proper order-otherwise your animation will not make any sense-.
click on Make Animated GIF and voilá, you created an animation.
6)Now you're wondering why it looks so silly. Its because the while the animation is indeed working and you see movement, there is no transition between the end of the animation and the start. in order to create a proper loop animation you need to conect the end with the start of the action. in this case is easy, because all you need is a frame for when the ball goes up again after bouncing, and for that you can use again the 2nd frame of our current animation. open unfreeze again, drag either the 3 frames you created first or the animation gif you created, both work, and then add again a copy of the frame 2. click on Make Animated GIF again and the animation will be complete.
7) now there is one last factor that you need to know if you plan to work on something more elaborated. this is the Frame Delay or Frame Speed and its often displayed as #/100(miliseconds), wich is basically how long a frame is displayed untill the file displays the next one. while you can indeed set the frame delay to 0(in wich case the frame would simply not appear) you must be aware that most browsers(such as Firefox, IE and Opera) will not be able to render anything below 3/100.
Conclusion:
This tutorial is aimed basically for those who want to learn the core mechanics of animationg using the GIF format. understanding this is just the first step, the rest is up to your own practice and learning.