This is the background I created for the animation, I am planning to create an animation of a ball falling from the top hole, into the bottom hole and creating a loop, similar to the way that the portals in the videogame series Portal works.
I then created the object of the ball to be moved around on the screen, It is made up of in fact two circles, one a solid red, and the other a black outline. This then gives the appearance of the ball having a black outline.
I then moved the ball into place and realised that because the ball is on the top layer, it just sits on top of the hole and doesn’t create a realistically looking effect of it falling from a hole.
This problem as overcome by creating a shape on the next layer up over the ball over only the close side to create the illusion that it has gone into the hole.
From this I created all the motion frames for the ball to move from one hole to the other in a realistic fashion, making it so the ball would squeeze horizontally when it hit the ground to make it look like the ball was actually bouncing up and down when it landed.
From there I exported the animation as a GIF as this is the most common file type for an animation to be put into my website.
On the export screen, I was able to choose the different colour settings for it, meaning I could create a more compressed file size if I reduced the colour depth.
I exported two copies of the animation in 2 colour depths, one in 256 bit depth, and another in 18 bit depth. From this you can see that the lower bit depth saved 60KB in file size. Although exporting to a lower bit depth will reduce the colours included, this animation is very simple and doesn’t use very many so it effects the overall quality minimally.