history of animation timeline P1 M1 D1

here is a link to my timeline click here 

click here to see an extension to the timeline. here you can read more about animation and learn different animation techniques such as celluloid animation

praxinoscope

the praxinoscope was the first device to overcome the distortion that was caused by viewing the moving images through a slot. because of this, the device quickly became more popular then the zoetrope. as the praxinoscope continued to grow in popularity, Emile reynaud discovered a way of projecting these images. this allowed more people to view the animations and also allowed the animations to be longer. this device was called the Theatre optique. if you want to learn more about the theatre optique you can find more information on my timeline 'History of animation'

sources
http://www.earlycinema.com/technology/praxinoscope.html

zoetrope

although William Horner invented the Zoetrope in 1834, a device was found in china which dates back to 180AD. this device was invented by Ting Huran.
the zoetrope is still used today but has been slightly modified. below you will see an example of this.

  if you are interested in creating your own zoetrope, the video below will give you detailed instructions on how to create one using basic materials.

sources

http://zoetrope.org/zoetrope-history

web banner animation

click here to download web banner .swf
click here to download web banner .html



 

Development log

before i talk about the initial ideas i think it is important that you get a basic idea of what i am designing this web banner for. i have developed a game called killer hydroclops. this is a game about a weak knight who has to buy new weapons to improve his skills so he can eventually slay the hydroclops beast (the hydroclops is a giant three headed cyclops). when designing my web banner, i had to consider many things such as: the target audience, the style of the web banner, and the size of the web banner. i also wanted to keep the theme of my web banner the same as the theme of my game (my games theme is medieval). all these are very important to consider because i needed this banner to advertise my game and to convince people to play it. 

initial ideas 

my first idea for my web banner was to have burning text. although i liked this idea as i thought that fire was a good metaphor for evil. However i did not think it would suit my game and i thought the fire would be too difficult to animate. 

my second idea was to have a glowing effect to give the impression that there was fire underneath the text. i also liked this idea as it would have been easier to animate compared to fire and it would also give quite an interesting look to the web banner. however i thought this was too basic on its own and i did not think it would attract enough attention.

my third idea was to have a block that was textured too look like brick. in the first few frames the block would begin to crack. after this, the cracked block would begin to fall apart and form the name of my game. i thought this would be a very interesting thing to animate. however, considering my skills in flash i though it would be unrealistic to animate something like that. i also would have had the problem of making that animation loop. because there were so many problems with that idea i decided not to use it

my final idea was to have a white blinking eye coming out of the darkness. in the center of the web banner there would be a circle of light which would surround the name of my game. the eye would blink every few frames. there would also be a fire sound effect which would let people know that there was a fire underneath the text, this was my favorite idea as it was simple but still complex enough to stand out.  

size

the size of my web banner is 720 x 300 (this size of web banner is called a pop under) . The reason i chose this size was because i wanted the web banner to be at the top of every page on my website. this was the perfect size for this because it allowed me to fit it nicely at the top of my website and left a small amount of space either side so i could include additional images such as my games logo. i also considered making my web banner 468 x 60 (which is known as a full banner). the reason i did not use this size was because it did not stand out as much as the pop under banner. 

audience

the target audience for my game is people aged 11 to 65. it is important to consider the age of the audience when developing my web banner because i do not want to add anything that is inappropriate for the audience that will be viewing my website. the audience affected the final design of my web banner a lot as i had to make sure the style was enjoyable for people of those ages; i also had to make sure there was nothing that would scare the people in my target audience e.g. blood.

style

the style of animation i have chosen is digital animation. i chose this style because it gave me more control over the effects i used. an example of this is the glowing background. because i was using digital animation i could change the opacity of layers. this allowed me to make the background appear to be glowing and give the illusion that a fire is burning underneath the banner. another reason i used digital animation is because it allows me to use layers. this meant i could easily animate a specific object such as the eye without having to redraw a new background for every frame. i considered using cell animation for my banner. the reason i considered cell animation is because i thought it would be the best way to show the cartoon style that i originally wanted my banner to look like. i also thought it would be very interesting to see what the banner would look like if it was hand drawn on paper. the problem with using cell animation would be that it is difficult to put it on the computer and export it as a format that would be suitable for my website. it would also be very hard to get the same effect in cell animation then i would get using digital animation 

brainstorm

story board

click here to see the story board for my chosen web banner animation.

the reason i chose this design was because it was interesting and basic at the same time. when designing my web banner i thought the animation should be subtle to prevent it from distracting people from the important information however i also wanted it to be interesting because it would be one of the first things people would see when they go on my site. 

click here to see the story boards for my other idea 

this was the second idea. i liked this idea because it focused the viewers attention to the name of my game and made it stand out more however, i thought this animation was too basic on its own.

in the end i decided to use the first story board because i liked the basic look which helped to emphasize the cartoony art style that i wanted to use on my web banner. 

software

i used two different pieces of software to make my animation. Photoshop and flash. i used Photoshop to create certain effects such as the glowing effect i used in the background of my banner. the reason i used Photoshop for this is because it had a large amount of different tools that i could use to get the effect that i wanted. i considered using gimp because it was free and had a large amount of tutorials online, however i decided to use Photoshop because i had more experience with the software and found it gave me a  better effect compared to gimp. i used flash to create the over all animation. the reason i used flash is because it used vector graphics which helped to emphasize the cartoon style of my animation. i considered using visual effects instead of flash because it had a large amount of tools. however, i did not feel like i could get the same cartoon effect that i could get when using flash.

format

the format i used for my finished web banner was .FWS movie. the reason i used this format is because it could be imported onto my website and because it is a lossless format, it would not lose any quality. i considered using HTML but i found problems when importing it onto my website. my main problem was i could not get the web banner onto my master page.