Send the link below via email or IMCopy
Present to your audienceStart remote presentation
- Invited audience members will follow you as you navigate and present
- People invited to a presentation do not need a Prezi account
- This link expires 10 minutes after you close the presentation
- A maximum of 30 users can follow your presentation
- Learn more about this feature in our knowledge base article
Transcript of Animation Timeline
ANIMATION ON THE WEB
Uses of Web Animation
What is Animation
Animation is when you show still images in a rapid sequence to give an illusion of movement. This can include hand drawn drawing , computer generated images, pictures of 3D objects ,or a burst of images from a camera. Most of the time animation is cartoon related. This can also be used in scientific research and industry. An example of this could be an animated picture of what a 3D DNA molecule would look like. However ever, no matter what type of Animation it is, The viewer play a role in why people can only see Repetitive movement instead of a sequence of quickly changing images.
These are still images drawn on a computer. Part of creating an animation is getting a load of still images and showing them on after another in a rapid manner to get the illusion of movement. If these flowers were to be shown in a sequence and played faster it would give the illusion of a growing flower.
Types of Animation
3 different types of animation are used. Firstly there is
Computer generated Animation
. These all can be used to 2D and 3D images. However there are some less common forms ,Most of them which focus on an unusual mid sized glass or sand to create the images as well as a ix of live action ,drawings or computer produced images.
This is when every frame of a film is drawn by hand. after this , they are colored and can then be photographed or scanned into a computer and put together with the sound on a film. This is a long process because it requires you to create around 24 drawings per second of film. Most of the traditional movies, if not all of them were created by large companies because this process requires a lot of work.
These are examples of
Stop motion Animation
This is an example of
Computer generated Animation
This is the creation of moving images (or animation) using computer technology. In computer animation, software is used to animate and bring to life characters in digital landscapes. Computer animation is broke down into two different sections. these two are:
.Computer generated .This is where the animation is made on the computer system alone using animation and 3D graphics software.
.Computer assisted. This is where animators draw characters or objects by hand or with a computer. The animators creation is then put in keyframes which will show all the crucial movements. After this the computer will fill in the 'in-between' frames. This is known as 'Tweening'. Using key frames and tweening are types of traditional animation that can be done by hand but would be a lot faster if you use a computer.
My own Stop Frame ClaymationExample
For over 90 years, Walt Disney has been associated with family entertainment. It started of very small by being a cartoon studio but as years went by, it turned into today's global corporation.
Walt Disney (Born in 1901 December 5th - 1966 December 15th )started as a cartoonist because of his love for drawing and by 18 became a draughtsman at a Kansis Art studio. His Very first Job in the art company was where he met 'Ub Iwerks' who turned out to be a fantastic animator later on in s life. Disney and Iwerks became friends and later decided to form a company together. Working with Iwerks and his brother Roy, Disney opened a Hollywood studio in 1923. 5 years later the studio created and released 'Steamboat Willie' staring an animated mouse called 'Mickey' who would become the foundation of there company. One of the reasons the Mickey mouse animations were a success was because he used them to introduce sound into cartoons. It was the first Mickey Mouse sound cartoon .Mickey had appeared in two earlier cartoons ,without sound. These were called 'Plane Crazy' and 'The Gallopin' Gaucho. It was also the first Disney cartoon to feature synchronized sound. In 1934 ,Disney began working on 'Snow white and the seven dwarfs', which became the highest Grossing film of the year and named AFI's greatest american animated film of all time. This was important because t was the first full length animated film. It produced $1.499 million, in spite of the Depression, and won a total of eight Oscars. In the 1940's Disney released some old time successful classics such as Pinocchio, Fantasia, Dumbo and Bambi. By 1950, Disney released his first live action film TV special 'Treasure Island'. His Films got better as the years went by, each one adding more Detail each time. In Pinocchio, the detail improved from when he first started making movies, In Fantasia he had the opportunity to experiment with colour and sound ,Bambi brought new skills to the artists because the animals from Bambi were allot more realistic. Everything added to the skills of the studio.
This is the first Clay-Mation movie ever made. It contains 25 frames per second. This is a good amount of frames to use because the higher the amount of frames per second are, the better the quality. It is also good to use because 24-25 FPS can be either high quality TV animation, or low quality cinematic animation, while high quality cinematic animation is generally 30 FPS. For standard quality web animation there would be 12 frames per second. High quality web animation downloaded over high bandwidth goes up to 15 frames per second which is also, the default frame rate for standard quality television animation. Compared to my animation, this illusion of movement is a lot more fine.
Compared to a Claymation Movie made in 1953
After Being sequenced
This is my own stop frame animation that i have created. While making this ,i realized that unlike Claymations such as Wallace and Gromit ,i didn't have all of the right equipment and other things needed to give a proper illusion of movement. (E.ga a wire inside the clay to keep it in place making it easier to move.) Claymations are supposed to have round about 25 frames per second while my claymation only has about 9 again, consequently. not giving the full illusion of movement as i would have wanted.
How did Dynamation begin? - Ray had an idea called dynamation, which was to enable a model to be inserted directly into the action of a movie and interact with the actors. It can also be called the "split-screen" process because of the way the screen appears to be split while the animation is being enacted in the middle layer. In 1938 to 1939 he had experimented for his production which was 'Evolution of the world' and realised that if an area is matted out then why couldn't two areas be matted out to create what was known as a split screen.
Willis O'Brien, put models in the famous movie King Kong and Joe young. He wanted to use glass painting which would give the three dimensional effect to the animation but Ray knew that this was a time consuming method.
This process was simple but effective. He put a live action image onto a rear screen in front of which was placed on the animation table with the model. He would then insert a glass sheet in front of both. When the live action plate had been shot, Ray would construct where he wanted to make his matte line and so by looking through the camera view finder he would bring back that line with a wax pencil on the end of a stick, following the line that he drew on the glass. After he drew an accurate line m he would then start to paint outwith black matt paint, the lower half that was below the line. He would then photograph the animated model reacting to the live action on the plate. after this he would then create a second pass in the camera to bring back the lower previously matted out section so creating a merged image of the creature seemingly as part of the Live action.
The Human eyes are Amazing, they are made with certain characteristics to help us see and process light in such a way that our mind can create a meaning behind it. Optical illusions use colour, patterns and light to produce images that can deceit the eye and the brain. Information from the eye is from the brain and it creates a perception that in reality does not match the proper image. Perception is the interpretation of what we take in through our eyes. Optical illusions happen because the brain tries to interpret what we see in the world and make sense of it. They basically trick the brain into seeing things which may or may not be real.
Persistence of Vision" refers to when the retina keeps an image for a brief split-second after the image was actually seen, and lends itself to animation by fostering the illusion of motion when we view images in closely-timed sequence to one another. We don't notice the fractional skips between images because that persistence fills in the momentary gap to make the motion seem seamless.
Optical illusion of motion
Examples of optical illusions
A flick book is a book with a sequence of pictures that change one every page to create the illusion of movement when the pages are turned in a rapid manner. They were often used to create short stories in children books. They also can be seen in corners of magazines or an added feature in a book. This form of animation became one of the biggest selling optical toys in the late 19th and early 20th century.
This was an early motion picture device that was invented in 1896 by the Lumiere brothers 'Auguste' and 'Louis', the first film makers in history. this consists of a viewer with a concave lens mounted on a wooden stand. The handle that is on the stand rotates the wheel, attached to which is a type of flip book. The rights to the Kinora were purchased by Kinora ltd. in 1902. The device came into Britain and became the most popular moving image viewer until the 1st world war happened. The company's London factory burnt in 1914, and public interest in the Kinora disappeared and the cinema took its place.
in 1897 ,'Henry William' or 'Short', marketed his "Filoscope", which was a flip book placed in a metal holder to facilitate flipping.
Examples of a flip book
Hand drawn cells
A Cel or a celluloid, is a see through sheet on which objects are drawn or painted for traditional ,hand drawn animation. Cellulose nitrate and camphor was used in the first half of he 20th century, but because people noticed it was flammable and dimensionally unstable,it was replaced by cellulose acetate. Because computer animated production, Cel animation has been left due to new technology taking its place. Disney decided to stop using cels in the 990's when Computer animation production systems took its place.
what happens is , characters are drawn on cels and laid over a static background drawing. This lessens the amount of times an image has to be re-drawn and lets studios split up the production process to separate specialised teams.
Using this assembly line way to animate has made it possible to produce films much more cost-effectively. The invention of the technique is generally attributed to Earl Hurd, who patented the process in 1914. The outline of the images are drawn on the front of the cel while colors are painted on the back to eliminate brushstrokes. Traditionally, the outlines were hand-inked but since the 1960s they are almost exclusively xerographed on. Another important breakthrough in cel animation was the development of the Animation Photo Transfer Process, first seen in The Black Cauldron, released in 1985.
What is a cartoon?
An animated cartoon is a motion picture that has been created from a sequence of drawings, photographs of objects that don't move, and computer graphics. This can be done by imitating movement by slight and progressive changes in each frame. Below shows the worlds first animated cartoon with no sound.
This was created in 1908 by Emile Cohl. It was composed by using 700 drawings that he used to illuminate on a glass plate.To give the chalkboard effect, he photographed black lines on white paper and then chose to reverse all the negative. The drawings are always different than the ones before (only slightly) and the timing was crucial to give the illusion of motion.
Here is another example
of an Animated Cartoon
This is an example of Computer Generated animation
These are examples of
Stop Frame Animation
Stop motion animation ,which is also known as stop frame animation, is when an object is captured with a camera several times moving slightly each time in a frame to give the illusion of movement. When this sequence is played back in a rapid manner, the illusion of movement occurs. With 2D animation (That was used in Disney) you use drawings which makes it different it different from stop motion because you use objects instead of drawings. This type of animation can be found everywhere ,mostly on cartoons, music videos and advertisements. In the early days of Stop motion animation ,they used film cameras to capture it. This was bad because the animators couldn't see what there work looked like until it was fully processed. Also if lighting was bad or anything was moved accidentally ,the work was ruined and everything had to be done again from scratch.
Famous examples would be:
Wallace & Grommit
WHAT IS ANIMATION? (CONTINUED)
Graphic information File (GIF)
This file format were created originally to image transfer and and online storage easier. This fie type is normally used for graphics which needs to be put on websites. They are the best file format to use for simple images because they can only contain within them 256 colours at maximum. The quality of an image does not decrease as the file size reduces because files are compressed using 'Lossless' compression. However as already said, the GIF file format is good with simple images so if you were to save an image with lots of colour you will lose the quality. GIF files are good at storing animated files. These are called Animated GIF's and they can be seen on things such as web banners on websites. Using animated GIF's are good because when put on a website, they are interesting to look at.
However just like every other File format, there is a disadvantage. As already said, they can only contain 256 colours, so images saved in this file format may be less quality and look pixilated as it is only made for simple shapes with simple colours. Another disadvantage is that compared to a PNG, GIF files are not very transparent.
Here are some
examples of this
Dynamic Hypertext Markup language DHTML
XHTML is like HTML but written as XML. It stands for Extensible, Hypertext, Markup language. Many pages that are on the internet have a bad HTML. This is an example of a HTML code that will work fine if you view it in a browser. (even if it doesn't follow the HTML).
In market places today, different pieces of different browser technology are advertised and promoted. When using smaller devices, they often don't have power nor the resources to decode a 'Bad' markup language. However, some browsers run on mobile phones or computers and can run on many other different forms of small devices.
Extensible Hypertext markup XHTML
any moveable objects or images is animation on a web page. Although GIF and java animations are used in some websites, the animations are usually done in Adobe flash. There are many reasons to why you may want animation on web page and some of the reasons might be to interest the reader, to give them something to do while waiting (e.g animated pre-loader bar), To demonstrate or to draw peoples attention to something. Animation on web pages are usually seen on young people sites for example this website ( https://www.babytv.com/games.aspx ).
Animated Banner Adds
Animated banner adverts, most of the time, are rectangular shaped boxes which advertise something on the Web.This animated banner may be placed above or below the main content but mostly placed above. They have been developed over the years going from just having text and graphics to now been able to animate the the writing and the graphics! They come in different shapes and sizes but the most common size for a web banner is 468 x 60. Web banners are supposed to be eye catching to the audience so that the viewer will want to click on it and learn more about the site. When clicking on the web banner, it would usually take you to the Main site . By using a play on words and making the advertisement sound and look more interesting , you will be a lot more likely to get the readers attention. Below are a couple of examples of what interactive web banners should look like.
This website has used funny animated graphics to advertise something. This would be more likely to get view than something like this
Animated Interface Elements
Another name for a User interface is an 'UI'. This is where the viewer is enabled to interact with software given or hardware. Most pro grammes on the web use this, the user is able to select this using there mouse and keyboard. Buttons, tool bars ,and menu bars are all part of interface elements. Main ones that we may often use are things like Sliders ,Icons and colour palette selectors.
Sliders may have represented values on them that can be changed by sliding the slider. For example using a slider to change how bright a light is. Sliding down will make it darker, sliding up will make it lighter. These can be made on adobe Flash.
Small icons like these are little graphic images that represent web pages, programmes or files. They are things that help you get programmes running quickly.
The most famous icon used ,is the home Button. This icon re-directs you to the home page. It can be interactive for example it can also be a rollover button.
Linear and interactive Animation
Linear and non-linear, these are simply the ways in which the advert plays. Linear is where there is no interaction occurring. This is because things are animated and are looping continuously. So there is no need to click anything. They can also be used to demonstrate steps so people are able to do a certain task. Most of the time the animations may look very realistic so there will be the documentation and the actual situation that the user might be faced with.
Interactive animation is where the user does something which will trigger the image or object on the page to move. This may be done for promotional purposesor to demonstrate something. Here is a link for an interactive animation.( http://digitalsynopsis.com/zafarelli-bazza/ )
linear animation video example
Promotion is important for companies so they can get there business going. There are many ways to promote your business and using animation is one of the most popular ways. People may chose to use animation to promote something because of the way it attracts peoples attention and because of the impact it has on people. For example take these two websites.
Number one is boring and if someone was to click on it, they would have no interest and would not want to see what they have to offer because of first impressions. However number 2 shows animation and attracts the reader. It is a lot more likely to grab there attention and because of the animation, it is easy to know what the website is going to be about instead of having to read a couple of paragraphs to find out what the site is about. Another website where animation may be shown to promote something would be in here.
Instructions can be written in a numerous amount of ways, for example written instructions in the form of a method or verbal communication. These are both very good ways to give instructions however they can be long winded and boring. Here is a brief example of what an animated instructional video would look like.
When giving instructions, animation will sometimes be used,
This is an easier way of getting information across because of
the 3D graphics used to demonstrate it. By doing this, it makes
it easier for the viewer to understand.
Video number 2 shows how a professional instructional video
would look. Compared to number 1, video 2 has an audio track
in the background. This helps to set the mood for the video.
Also the animations are clearer and don't look so messy which helps more because then it is easier to follow..
Just like instructions, Information can be given in different ways such as verbal communication, and written instructions. Animated info-graphics are another way to get information across .Informative animation, (info-graphics) are animations which tells the reader what is happening on a website using animated illustrations. This can be done by Animated diagrams, symbols icons or maps. When the images have been turned in-to animations, they can be used to tell stories or to give out information. Here
is an example of an informative animation. In this animation ,they
have made sure that it keeps the reader intrigued by using eye catching
animation and an audio track in the background so that there is something
to listen to.
In this info-graphic, it shows you the worries of growing up and informs you that there is no need to worry.
In this info-graphic, it tells you about how to ate your own animated info-graphic
In this Info-graphic, it promotes a business called 'Animate your logo'.
Animation is used for a variety of things but most of all, it is used for the audiences entertainment. This is why it is used for things like informing ,teaching and demonstrating ,because it is an effective way of getting things across. Famous animations are animated films such as Shrek, Kung fu panda ,Madagascar and How to train your dragon.
Because it is so interesting ,it will stay in the audiences mind. Animations can be viewed by having flash. Examples of this may be different types of games where you can only use flash and also YouTube which uses flash to play it's videos. This is an example of a video that has been made in flash.
Raster (Bitmap) Animation
Compression File size
File formats, eg.FLA .SWF, GIF, MNG, .SVG
This is when animation is moved by vectors and not pixels. Vector animations are made using shapes and lines which make a mathematical formula. This is what a vector image is based on. because of the mathematical formula, it creates an advantage because it uses less space. Another advantage is that no matter how far the user may want to zoom in, the picture will always be the same. Whereas when using raster images, if the user was to zoom in the the image would look pixelated and will lose quality. A disadvantage of Vector animations is that they are not supported on the internet, whereas other popular formats such a JPEG, GIF and PNG are bitmap images and vector images need to be converted into bitmap images before the user will be able to use it on the web. Vector images can mostly be found on logos and illustrations.
A Raster image may be referred to as a bitmap image. People may use them when they want to enhance or edit photographs. They are a group of tiny dots called pixels and in these pixels are small bits of colour which will then ,when put together, will make up the full image. They are a lot more common than vectors. However Problems with this type of animation is that when you zoom into an image or animation, you may find that the graphics are pixelated. This may spoil the image. However this can be resolved by using software such as 'Adobe Photoshop' , 'page plus Serif' or a less advanced piece of software such as ' Microsoft Paint' (Bearing in mind that Microsoft paint can only be used on a PC). Another problem would be that would occur is that Data-sets can be very large and they need to have high resolutions and jagged lines need to be smoothed for a smooth appearance.
Advantages of this is that it's cheap. Another advantage would be that they are easy to create as all you need to do is take a picture or scan your drawing in. They are commonly used on the internet and are easy to come by.
Compression is when a file size is reduced so that the animation will be safe to upload on the Web. However there is a slight problem with this. When the quality of the file size is high, the file size gets bigger. This is a problem because when it then comes to compressing an animation, you lose some of the quality. This is known as 'Lossy compression'. Having a smaller file size makes files easier to store and send over the internet. Lossless compression is when a file size is reduced with no loss of quality, this can be applied to audio files and images.
Vector images are best for scaling because no matter how far up you scale the image, it won't lose it's quality. This is because of the mathematical formula used to make sure that the image won't pixelate. Scaling is when an image size is reduced or enlarged by changing the amount of pixels it contains. Using raster images would not be as good when scaling because then the viewer would be able to see all of the pixels. This is because quality is lost. Good examples of scalability would be YouTube Enlarging option. When watching videos, it gives you the chance to enlarge your video. This can be an advantage because then the user will be able to see better ,however if videos are already low quality, they end up looking pixelated.
There are different formats that both vector and raster graphics use. These are some of the main ones in terms of animation:
These files are used by the Adobe flash application which is also known as 'Macromedia Flash'. Many web browsing sites are able to support Adobe flash. This is good because Flash enables things like Movies and animations. This file is often saved as an SWF file so that it can be used on the internet.
SWF stand for 'small web format' .It is a compressed file that is made for use on the internet. This file was created by macromedia and is now owned by Adobe. SWF is a good file format to use because it was created for able delivery over the internet and can contain vector based animations, video and sound. Disadvantage of this file format is that it my only be viewed while using the 'flash plug in'.
An Animated GIF file also known as a (graphics interchange format), is a graphical image that shows motion. This is done by sequencing images one after another so that when it is put together it creates the illusion of movement. These can often be seen in web banner or advertisements.
These kinds of files are used as graphic image animations and just like the PNG file format, this file format hold within them bitmap indexed colours which are then played in things such as slide shows, and animations.
This file format stands for 'Scalable Vector Graphics' , it is a XLM-based vector image format for 2D shapes. It is a good file format because every element in it can become interactive and can also be animated. This is also a good file type because when images are resized or have been zoomed in to, the quality is not lost.
However there are disadvantages for this file format. When your application is loading, there is a chance that it will be quiet slow because SVG files are converted into PNG files. This can be the case especially when using detailed graphics
.FLV- The FLV File format may also be interpreted as a Flash video File. The FLV file format enables you to distribute videos over the web using Adobe Flash player.
How is it used in animation and interactive Web?
When wanting to add effects to web pages, this can be hard .However DHTML allows you to do this with less stress. Here are some of the things that can be carried out :
It can include rollover buttons and drop down menus
you can implant a ticker that will automatically refresh it's content with all the latest stock quotes, news and other information
Allows you to animate text and images in there document while moving each element from any starting point to any ending point following a predetermined path or one chosen by the user
This example shown shows colours change when you roll over the tab. If you click on green the font colour changes and so forth
To sum up, DHTML is fairly limited in it's animation applications. Reason being is because all it can d is move still images around the screen. However, the advantages of DHTML is that it can give you alot more control over HTML elements, therefore enabling them to change at any time, without having to come back to the web server.
Differences from HTML
.XHTML elements have to be in lowercase
.XHTML elements have to be nested properly
.XHTML elements have to be closed
A java applet is a program which is based on the internet. It's function is to program language for the internet. This information can be downloaded by any computer. This applet is also able to run in HTML. There are many programes which use java applets such as different games and educational wise, online calculators.
How is this used in animation and interactive Web?
Java applets help to make functional animations. There are many advantages to java applets such as being safe and trustworthy online. Therefore, untrusted online apps can only access servers that it originally came from. Java applets are used for interactive elements on the internet. These can not be supplied by HTML, but many different animations are possible. A disadvantage to java applets being trustworthy online this can make accessibility of some websites unavailable dependent on the special needs of the user.
Web Animation Software
Web Authoring is a programme which enables you to make websites and web pages. An example of this would be 'Adobe Flash' or 'Dreamweaver'. Before web authoring was around ,everything was mainly done through HTML coding which is very useful and creates great websites. it is proven to be a lot slower and requires someone who is talented to understand and create codes. Other examples of this would be Swish, Amara and Director.
.Adobe Director- This is a software that enables you to create and publish eLearning courses and interactive games for the web, dvd's, cd's and so forth.
.Swish is one of the creations of Flash which is used to create cross-platform movies
.This is a software which delivers animation software solutions to make a widespread variation of photo effect, flash text and web animations.
There are many different Web animation players, These are players that simply play animations. There are many examples such as Flash player, Shockwave, real player and Quick time.