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 Research
Animation Considerations For the Web
Web Animation Optimisation
Uses of Animation
Use of Animation
History of Animation
Types of Animation
File Formats & Software
Animation is the rapid display of a sequence of images to create an illusion of movement. The development of animation began as a quest to capture real world on a fixed setting. Before cameras were invented, animation was only created using drawings and paintings which didn't give a smooth movement to the naked eye. As technology progressed, animation became more and more popular. Types of animation include:
Linear Animation - Linear animations are animations that play independently without user input. Linear animation is used in basic animations like web banners and short clips such as this one underneath.
Interactive Animation - Interactive animations require user input for the animation to progress. Unlike linear animation, you have control of what happens. The most common interactive animations include computer games and interactive adverts that you see on some websites. The images underneath are screenshots of interactive animation that I created.
There are a lot of ways that animation could be used. Animation is normally used for entertainment, with cartoon programmes being the most popular use of animation on the television. Animation can be used in music videos as well. They could be used for promotional uses such as advertising a new product or showing off clips in a new computer game. Animation has practical uses as well. Animation makes giving presentations a lot easier and more effective and interesting. Animations also help in explaining instructions and tutorials. Basically, creating animations makes everything a lot easier.
YouTube video of stop motion animation.
There are many types of animation. Below there will be a few of the main forms used today:
Stop Motion - Stop motion animation is where a photograph is taken each time the animated object has been moved. They are then put together to create a smoother animation without tweening. Usually, about 300 photographs are taken to create a 10 second clip, which shows that doing stop motion is a long process and is why it isn't as popularly used as it once was.
Claymation - Claymation is a type of stop motion animation, but use models and puppets instead of drawings. Although called claymation, the models can be made out of anything that is malleable but can stay still during the photograph. Claymation provides a 3D effect that is often lacking in other traditional techniques.
Persistence of Vision - Persistence of vision is a commonly and widely accepted theory which states that the human eye always retains images for around 0.04 seconds. This means that everything we see is a subtle blend of what is happening now and what happened a fraction of a second ago. In film and video, this phenomena is often claimed to account for our ability to perceive a sequence of frames as a continuous moving picture. However this idea was disproved in 1912 and there is no scientific evidence to suggest that persistence of vision works in this way. It is thought that the illusion of continuous motion is caused by unrelated phenomena such as beta movement, which is the brain assuming movement between two static images when shown in quick succession. Despite this, persistence of vision continues to be incorrectly taught in schools as the physiological mechanism behind video's illusion of movement. For an example, a helicopter only has two or four blades but when it is in flight the blade looks like it is a disc shape because it is moving so fast. In this video the helicopter has two blades but when it takes off it looks like there is four blades.
Computer Generated Imagery - Computer Generated Imagery (CGI) is used widely in modern films and can create fanastic looking scenes such as flying through space and fighting aliens. It can also be used to replicate objects and show, for example, a fleet of ships filling the ocean to the horizon. CGI used some of the stop motion techniques which didn't get give a realistic effect but in 1993, the producers of Jurassic Park revolutionised CGI technology and proved that convincing digital animation was achievable and loved by audiences around the world.
Flash - Adobe Flash is a multimedia authoring application. The program allows users to create animations frame by frame using vector images or imported bitmap images. Sound and video can also be included to flash animations. Flash uses a language called ActionScript which helps in creating such things as clicking buttons and moving characters with keys. Using this language makes it easier to create computer games. As it is made by Adobe, the tools are very simple to use as opposed to other animation programs. You can make both interactive and linear animations within Flash which is why it is so popular.
SWiSH - SWiSH is a lot like Flash in that it uses the same sort of tools and that the designs can be seen in Flash Player. The difference between SWiSH and Flash is that SWiSH is much cheaper. The downside to this product is that it is only for Windows. The company haven't got around to making the product for Macs yet. SWiSH, like Flash, can also create both linear and interactive animations.
Amara - Amara sofwtare is different to the other two programs in that it can't actually create animated graphics. It's more of a slideshow program with the keypoint function so that you can take a different view on photographs. You could zoom in and out on photographs to create a nice, smooth movement between images. Slideshows are linear animations and because it isn't a software where you can create animated graphics, you can't create interactive animations
Flash Player - Adobe Flash Player is probably the most popular of multimedia players for animation. Flash Player can play pretty much anything that is created in Flash, SWiSH and Amara. Unlike most products from Adobe, Flash Player is actually free which helps because quite a lot of things on the internet need player Flash support.
Shockwave - Adobe Shockwave was introduced prior to Flash and, like Flash and Flash Player, it was previously owned by Macromedia. Shockwave was Macromedia's most successful multimedia player. Whereas Flash Player focuses more on 2D animation, Shockwave specialisesin 3D graphics, streaming videos and has a faster rendering engine.
QuickTime - QuickTime is a multimedia product that is made from Apple. Even though it is made from Apple, it can be used on both Macs and Windows platforms. It supports animation, sound, video and other type of media clips. QuickTime comes free with modern Macs operating systems to rival the Windows Media Player which is already embedded in Windows platform products.
RealPlayer - RealPlayer is a cross-platform mulitmedia player that can support both QuickTime and Windows Media formats. Although this seems to be the answer to the issues between QuickTime and Windows Media Player, RealPlayer has received a lot of criticism over the last few years for displaying adverts and pop-up messages during use. They created a advert free version for businesses, but some features have been removed that you can get in the full program.
GIF - GIF is a bitmap format that holds a maximum of 256 colours. This means that they aren't very high in quality. The advantages of using GIFs for animation include the lossless compression, which means that you can make the file size smaller without losing the quality of the animation. Another advantage it supports transparent backgrounds. The colours can appear blocky in photographic quality images which is another disadvantage, as well as the lack of colour that can be contained.
SWF - SWF is a Adobe Flash format that is used for multimedia and flash graphics. When a file is saved in this format, it becomes compressed. This is so it doesn't take up as much room, therefore easier to load when it is on the internet. This file format cannot be edited which is a disadvantage.
FLA - FLA is the editable version of the SWF file format. This is also created by Adobe Flash. The FLA file does not play so for it to work, you would have to export it into the SWF file. As it is made by Adobe, switching from FLA to SWF is very easy. Pressing Ctrl + Enter in Flash normally pops up a window that shows the animation in SWF format. Flash isn't supported in any Apple products and new Android products so websites that have been built in Flash won't show up. This is why Flash is a slowly dying animation file format.
The whole point of compressing images is to keep the file size as small as possible. This is so the images will load quickly on websites. There are a few ways of doing this such as cropping the image you've already created to remove all the unneccessary stuff around the outside, and also just rubbing certain parts out. Most of the animation products include an option where you can compress images to make it quicker and easier.
Java Applets - A Java applet is a small Internet-based program written in Java, which can be downloaded by any computer. The applet is also able to run in HTML. The applet is usually embedded in an HTML page on a website and can be executed from within a browser. One advantage of using these Java Applets is that they are supported on most browsers all over most operating systems. They are very quick to load on webpages as well. There are some disadvantages to using these as well. You need a Java plug-in for them to work, and they don't work at all on mobile phones. As with any client-side scripting, security restrictions may make it difficult or even impossible for an untrusted applet to achieve the desired goals. Java Applets aren't supported by Apple and Android products so they aren't very popular at all.
1825 - The thaumatrope was invented. It was a Victorian toy that was created by Dr. John A. Paris in 1825. It is a small disc, held on opposite sides by pieces of string. An image is drawn on each side of the disc, and is selected in such a way that when the disc is spun, the two images appear to become superimposed. To spin the disc, one string is held in a hand, and the disc is rotated to wind the string. Then, both strings are held, and the disc is allowed to rotate. Gently stretching the strings will ensure that they continue to unwind and rewind. This motion causes the disc to rotate, first in one direction and then in the opposite. The faster the disc rotates, the greater the clarity of the illusion.
1831 - Dr. Joseph Antoine Plateau and Dr. Simon Rittrer constructed a machine called a phenakistoscope. This machine produced an illusion of movement by allowing the viewer to gaze at a rotating disc containing small windows. Behind the windows was another disc containing a sequence of images. When the discs are rotated, the synchronisation of the windows with the images created an animated effect. This machine created what seems to be the earliest animations ever.
1889 - Thomas Edison announced his creation of the kinetoscope which projected a 50ft length of film in approximately 13 seconds. This was an early motion picture device which was designed to show films to one person at a time. It wasn't a movie projecter, but gave the impression that it was.
1920 - The first colour cartoon was created. John Randolph Bray's "The Debut of Thomas Cat" was about a kitten who was taught by his mother to catch mice. Including colour was a huge breakthrough in the history of animation as it meant different moods of the scenery and characters could be seen more easily.
1922 - Walt Disney, probably the most famous animator, created his first animated short film called "Little Red Riding Hood". It was an adaptation of the classic children's book written by Charles Perrault. It was considered Disney's first attempt at animated storytelling.
1930 - The Warner Bros. creation Looney Tunes debuts with "Sinkin' in the Bathtub". It was the first of many iconic Looney Tunes short cartoon creations that the Warner Bros. would make.
1834 - William George Horner creates the zoetrope. It was an early form of motion picture projector that consisted of a drum containing a set of still images that was turned in a circular fashion to create the illusion of motion. Horner originally called it the Daedatelum but French inventor Pierre Desvignes renamed it the zoetrope, which derived from Greek meaning 'things that turn'. The zoetrope can be turned at a variable rate to create slow-motion or speeded-up effects. Like other motion simulation devices, the zoetrope depends on the fact that the human retina retains an image for about 0.04 seconds so that if a new image appears in that time, the sequence seems to be uninterrupted and continuous. It also depends on what is referred to as the Phi phenomenon, which observes that we try to make sense out of any sequence of impressions, continuously relating them to each other.
1917 - The first feature-length animated film was created in Argentina. Quirino Cristiani's "El Apostol" was 70 minutes long and was about Argentinian president Hipólito Yrigoyen destroying the capital, Buenos Aires, using thunderbolts sent from Jupiter. The film was destroyed in a fire.
1879 - British photographer Eadweard Muybridge invents the zoopraxiscope. The zoopaxiscope was the first motion projector which worked by showing a sequence of still photographs in rapid succession. This worked due to the theory of 'persistence of vision' and that the eye only sees things in 10 frames per second. The zoopraxiscope, along with the zoetrope and the thaumatrope, are considered forerunners of today's motion display technologies, including the animated GIF and video display technologies such as streaming videos, all of which create an effect of motion by presenting discrete but closely related images one after the other.
1914 - Winsor McCay creates a short animated cartoon called 'Gertie the Dinosaur'. It was just over 12 minutes long and each frame was redrawn on a sheet of paper.
1915 - In order to save time and money, Winsor McCay invented the animation cel. Instead of drawing on a single sheet of paper and then redrawing the entire scene for every frame, the scene was drawn in parts on a thin, transparent celluloid acetate or "cel". For example, the background would be drawn on the first layerand then the body of a character would be drawn on the next layer. After that, the head on the next layer and the expression on the next layer. This made it easy to change an expression without having to redraw everything. In order to make cel animation work correctly, everything had to be registered. This meant that both edges of every cel need to be punched with holes and placed over pins or pegs so that each cel lines up perfectly with the cel underneath it. McCay first used cel animation to create the 25 minute flim 'The Sinking of the Luisitania', which used over 25,000 drawings. Cel animation was also used by Walt Disney in all of his animated films including 'Snow White and The Seven Dwarfs'. Cel animation continues to be the technique used by most quality animators.
1928 - Walt Disney creates the first animation with synchronised sound. 'Steamboat Willie' was also the cartoon that started one of the most famous cartoon characters in the world, Mickey Mouse.
1973 - Computer generated images are used for the very first time in a brief shot within the science-fiction film "Westworld". This was another huge step towards the animation we have today.
1995 - Toy Story is released, the first full length computer animated film. The future of animated films started here. Another iconic moment in the history of animation.
Appropriate Content - When creating an animation, you need to make sure that the things you are putting into it aren't offensive to anyone. You need to consider whether it has inappropriate images within the animation or that the actions that the characters are doing aren't racist in any way.
Compatibility - Different browsers support different file types. For example Flash, Shockwave and Java all require plug-ins. This means that when creating the animation you will have to make sure it is compatible in all main web browsers such as Google Chrome, Mozilla Firefox and Internet Explorer. You will also have to consider Apple products and the web browser Safari.
Size of Animation - Advertisements on websites have set sizes so if you wanted to create an animated advert then you would have to set the stage to one of these set dimensions.
File Size - Some people might not have quick computers or a high bandwidth. This is something to consider when creating an animation because if it is too large it won't play on the small bandwidth and will crash your whole web browser. Having a reduced file size will also help when on smartphones. They will play smoothly on your phone if the file is small enough.
There are a lot of ways to reduce the file size of Flash animations using CS6. You can reduce image and sound quality, use only necessary items that are included in the library and decrease the frame rate. As an example, I am going to show you how to reduce a file size in Adobe Flash.
For my example I have chosen to use an animation I created last year. The file size at the moment is 339 kilobytes. After opening my animation, I clicked on File > Publish Settings. This brought up this window. After, I unticked a few options including 'Include hidden layers' and 'Include XMP metadata'.
After optimising the animation, the file is now 296 kilobytes. This will help towards uploading the animation onto the internet.
Photoshop - Photoshop is another Adobe product that is primarily used for editing photographs. Even though that editing photographs is what Photoshop is mostly used for, you can still create linear animations within it. Opening the timeline in Photoshop will give you a load of options where you can animate 2D and 3D images and raster graphics.
Advertisement & Promotions - Animations are often used in advertising and promoting products such as movies, games and food. The animations are mostly CGI based or live action mixed with animation. Companies use animation for advertising and promoting new products because it attracts a better crowd than an advert in a newspaper of magazine. People are too busy to read nowadays and won't have the determination to read small print on a page, so using animation would catch the eye of a potential buyer much more successfully. Using animation for selling a product could also help when explaining how the product works because you are given visual aids.
Education - Animation can also be used for educational use such as slideshows explaining what to do for a lesson. This helps in saving time in writing what to do on a whiteboard. As younger children are attracted to bright colours, using brightly coloured characters could help in them learning new things. This is why children's TV shows have so much colour and energy. Without using animation, children could lack some basic knowledge that they should know for the future, for example learning road safety.
Instruction - Instructions can come in animated form as well as paper form. You could use animation to create a walkthrough through a game or a manual on how to cook certain meals. Using animation to instruct something would help a lot more easier as it would show you visually as well as verbally. This would make for better results as actions "speak louder" than words.
Entertainment - Probably the most obvious uses of animation. Animations such as games, cartoons and videos are all used to entertain everyone from young children to middle aged adults. You cannot go anywhere without seeing some sort of animation about. Like animation in promotions and adverts, the most common animation style that is used for entertainment is CGI. This gives the viewer a very real look into a virtual experience. Examples of these are usually in films, such as "Toy Story" and "Shrek".
This animation is advertising a car comparison website. The loving character that they have used will sell the website as the graphics that have been used make him real. It also makes the company more recognisable and therefore more people will go to their website. Although the lovable character has been used, it has nothing to do with insurance in any shape or form. Maybe using a character that links more towards insurance of some sort, like a car, would probably be more meaningful. The company 'National Accident Helpline' also use a character to attract customers. This character is meant to be an 'underdog' but with that you would think the character would be a dog and not just a random shaped figure. Both of these companies have had the same idea and have btoh been successful, but they both have their visible flaws in doing so.
The video to the right educates people, mostly children, of being safe whilst at a train station. They have made a serious matter into a humourous song to interest young people. The cartoon characters are fun and loving which helps in getting the message across as they will listen and sing along with them. In my opinion, it is a very clever way of using animation. However, this animated advert still has its problems. Some people might view this as a mockery of something that could be fatal. Also, the message could be miscontrued by small children and could end up copying the tasks being shown throughout the video. I feel that, instead of showing the characters doing the things they're meant to avoid, they should actually create the animation so that the characters actually prevent themselves from doing them. This way, the message would be even clearer and would also stop any ideas popping into children's heads.
For instructional purposes, I used this YouTube video that shows beginners how to use Adobe Flash CS6. It is an online tutorial which shows how to use the simple tools within the program. Following this would give the user a much more easier understanding of using the software than if it was in a textbook. You can easily see which tool is being selected which saves time on you trying to find the tool yourself. Following a tutorial can work well but could also be hard to understand, especially if you haven't any type of design software before. Also, due to the size, there could be a problem with people who have poor vision. Even with the video full size, you can still struggle to see whereabouts the cursor is clicking on which makes it harder to follow the tutorial.
The last example I am going to show is for entertainment purposes. This video is a collaboration of Doctor Who and Sherlock. Using very high tech effects, they have created a very realistic looking video that brings both virtual worlds together. The characters look very human-like and the detailing is perfect. One disadvantage to creating something like this is obviously the duration it would take to perfect an animation with intense detail. Another disadvantage could be the fact t the software used would be very expensive and not everyone would want to spend so much on CGI software.
In contrast, this mouthwash advert doesn't use any animation but rather camera effects. In my opinion, this doesn't make the product interesting. There isn't a lovable character that everyone can enjoy whilst watching the advert and to be honest, the advert is pretty boring. Having said that, it still gets the message across in a serious manner as the problem is quite serious within the general public. This advert shows that you don't have to include any cartoon characters to grab attention and that is a positive thing. The graphic image of the girl without a tooth expresses a huge wake up call to people who might not take as much care with their dental hygiene as they should which means the advert as a whole is still very successful.
In the 40s, they obviously didn't have any advanced animation software so most educational videos were long winded and boring. This particular video is educating future teachers how to control a classroom. As the video is nearly 14 minutes long, people aren't going to listen to all of it and thus makes this a bad educational video. Considering they didn't have the technology that is around today, I suppose this is the only way of educating people. If they had made the video shorter, I think that the message would be easier to follow and would obivously take up less time to watch. They could also include a jingle of some sort to keep teachers interested in the video. There really isn't much going for this video other than the fact that the information is straight to the point and very detailed. It covers all bases on teaching a classroom and how to control the students if they misbehave.
The website eHow is a very popular instructional website which tells you step by step guides to anything you want to learn. This is fine if you can visualise things easily. If you have problems trying to understand situations without the use of animated examples or even the use of images, then I would say that you should stick to using video tutorials. If you prefer images to follow rather than videos, though, this would be a great way to learn new things. These tutorials are easy to follow and the images used are highly defined so you can easily see what is going on at each step. Both examples are successful in their own ways and it's really up to what type of person you are to see which one you prefer. Personally, I prefer video tutorials but that doesn't mean that traditional tutorials aren't well explained.
In huge contrast, cartoon comedy show South Park uses, or rather used to use, basic stop motion and card cutouts to animate each character. Now, though, each episode is created using software rather than card cutouts. The difference in quality is large and I feel that, even though some people still love the show, animation wise it doesn't really show time and effort that the creators have obviously put in to create the episodes. People like the show due to the jokes and insults that is involved within the script, but I think the low quality stop motion animation of the characters add comic effect as they don't walk like humans. I think the producers have been very clever in using paper to create the characters as it shows that animation can be created using any type of material. 'Wallace & Gromit' is another cartoon animation that uses simple materials to create movement. The clay that they use shows how quality, or even the lack of it, can actually work very well and be popular with the public.