Project 3 – Post 3 – 12 Frame Animation Production and Review

Pre Production

Before creating my animation I created some test animations to find out how much difference is too much and what works. So I created some simple animations. The first test I created was a basic bouncing ball animation. This worked out well and play smoothly on the praxinoscope.  After I created some waves and different length, these don’t as-well as there was to much difference between frame.

When creating the 12 frame animation sequence that will loop I had to plan and work out how the sequence will work. So I got a piece of paper and planned out the 12 frames, as you can see from the picture below I worked out where the wheel will rotate in order for it to loop back to the top. As you can see I worked it out so it will have rotated 90 degrees every 3 frames, which means 30 degrees per frame.

Once I had worked out the basic rotation I drew out a rough concept of the animation to test if it works. Once the concept art was created I tested it by using a praxinoscope and inserting my animation sequence and spinning it to play each frame one after another. After testing the animation it proved that the animation is smooth and works as looping animation sequence.


Now that I have created the tests and proved that the animation will work it was time to begin creating a digital copy of the animation. So the first thing that I did was create the wheel which will be used in the animation. This was done by tracing an exciting creative commons licensed cartoon wheel which I found online which I then turned to a solid black shape and added my own spokes. I did this so I you can tell that the wheel is spinning.

Now that the object was created it was time to create the animation sequence. I started out by creating duplicate layers, theses will be my 12 frames. The next step was to rotate each frame to the correct position, I did this by using the singling out each frame by turning off all layers but the one I am using. after that I used the translate tool and rotated each frame 30 degrees. The translation tool allowed me precisely enter the exact number of degrees to create the perfect animation.

Now that each frame is set up it is time to convert the frames into an animation. This was done by using the animation mode within Photoshop which then allowed me to create the animation from the 12 layers, this was done by using one of the settings which turns each layer into there own frame. Once the layers have been converted into frames I changed the length of the distance between frame to create a smoother animation and flows better. There was one problem which is that the animation plays backwards. This was an easy fix was to just play the animation backwards and save it.

The final part was to export the animation. This was done by exporting the animation to web with-in Photoshop. I then choose the .GIF file format as it is a small file type which is compatible with most web browsers allowing a larger audience to able to see my animation. However the downside is the limited 254 colour range, however this doesn’t effect me as I’m using a sold black wheel.

Final Animation

Below is the final animation of the wheel spinning, it was saved as the .gif file type.



Now that the animation has been created I am extremely happy with the final outcome of the animation. It is extremely smooth and loops perfectly as set out in my brief. I really like the smooth look to the animation and the solid black wheel works extremely well as it allowed me to concentrate more on creating a smooth animation loop.

However If I was to re-do this task I would spend more time on the artwork and create a moving bike and environment however I spent to long research however to animate with-in Photoshop so I ran out of time, however I hope to revisit this animation technique in the future and hopefully move to key frame animation and motion graphics.

I really like the smooth looping animation, however more detail with-in the design would improve the animation – Max Copper

I like the simple silhouette look of the animation however I think there could be more to the animation. Other than that the animation works great. – Tom Whelsh.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s