Module 10. Using and producing animation and video
Module 10. Using and producing animation and video
Embedded Files
At the end of this module you should be able to do the following:
Describe the basic principles involved in generating an animation
Identify different kinds of animations
Identify basic technical issues when it comes to producing video
Describe the general steps in video production
Describe instances when you to use animations and when to use videos
Contents
Contents
Video and animation are related in that they involve the display of images in quick succession to create a visual experience that involves the perception of a smooth change through time, often involving movement. Indeed, the word "movie" comes from the phrase, moving image. In BAMS, you will study these separately as MMS 175 (Videography) and MMS 176 (Animation). In this module, we will take a quick look at these two topics together.
Animation
Animation
Activity 10.1. Animation as an optical illusion
Activity 10.1. Animation as an optical illusion
Allot 20 minutes
Part 1
Part 1
Read Stuart Grais' tutorial on the basics of animation from the DePaul University website. Pay attention to what kinds of optical illusions are generated by animations.
After reading it, use it to explain what optical illusions are being created in Videos 10.1 - 10.3.
Part 2
Part 2
Video 10.3 shows the Lego Batman 3D Zoetrope exactly how it would appear if you saw it live (which I have, at the Exploratorium museum in San Francisco!). How is this possible? (Don't search for the answers on the Web! This is a way to flex your thinking muscles.) Propose some ideas and try to be a specific and detailed as you can. Then discuss your ideas with your classmates until you feel like your class or group have a consensus about the installation works. Some hints:
Lighting is important
The 15 standing penguins and pools of water appear to remain in place
The 16 Batmans (or Batmen) appear to be walking
(You may be asked about some aspect of this activity in the quiz for Unit 3.)
Video 10.1. A thaumatrope (Utz, 2014)
Video 10.2. Flipbook animations (Andymation, 2017)
Video 10.3. Lego Batman 3D Zoetrope
This installation is even more impressive in real life!
An animation is a sequence of images that when shown in quick success appear to exhibit properties of motion, likely because of a combination of properties of the human perceptual system, including beta movement and the phi phenomenon. You may also come across the explanation that another property called the persistence of vision creates the illusion of animation, but researchers who study how people see say that this isn't accurate (McKinney, 2008). Persistence of vision is what prevents you from seeing the black in between of video or film frames, not what creates the illusion of motion. (Bakaus, 2014) But this is something that you don't need to worry about! What is important is that in making video and animation, you understand how you need to construct images and present them a particular way to take create optical illusions that take advantage of the how the human brain and eye work.
Activity 10.2. Media technologies that take advantage of (or exploit) the human sensory system
Activity 10.2. Media technologies that take advantage of (or exploit) the human sensory system
Allot 15 minutes
Other than in film and video, persistence of vision (POV) has been used in other interesting ways. For example, you can take advantage of POV to create an interesting display device, as shown in Video 10.4. Use the Web to find other unusual or interesting ways in which you can use optical illusions to create new visual experiences that take advantage of the human visual system.
Video 10.4. A persistence of vision display (lobstr003, 2011)
Applications of animation
Applications of animation
As we have seen, an animation is a sequence of images that when shown in quick success appear to exhibit properties of motion. The most popular use of animations is for entertainment and games. Some of you might be gamers already and know this quite well. However, animations can also play an important role in other applications, such as for education. Animations can be used to highlight important details in complex phenomena that occur in real time. Possible applications and examples include the following:
Simulations of real world phenomena
Simulations of real world phenomena
MyPhysicsLab – Physics Simulation with Java: http://www.myphysicslab.com
Animation of engines where you can control the animation speed: http://www.animatedengines.com
Illustrating underlying principles of dynamic or complex systems
Illustrating underlying principles of dynamic or complex systems
Animations of global climate patterns: http://geography.uoregon.edu/envchange/clim_animations
Animated demonstration of Bernoulli's Principle: https://web.archive.org/web/20130723062624/http://mitchellscience.com/bernoulli_principle_animation
Using animation to display a data dimension in a chart (that is, instead of mapping time as an axis, actually show changes in time):http://www.gapminder.org/videos/hans-rosling-asias-rise-ted-india
Virtual environments
Virtual environments
Second Life: http://secondlife.com
Activity 10.3. Experience playing an online game
Activity 10.3. Experience playing an online game
Allot 15 minutes or more
Animations are used most often in digital games. As a fun activity, play Samorost 1, an old award-winning puzzle game that walks the user through a visually enchanting world. One of the things you should also note is how the animator incorporated photographic images from the real world and integrated it into this game, showing that you can use a wide variety of material to created animated experiences. (You will need to have Flash installed on your computer to play Samorost 1.)
Figure 10.1. A screenshot of Samorost 1 (Amanita Design, 2003) that I took while playing it
Creating digital animations
Creating digital animations
You have several alternatives for creating digital animations or motion graphics, as as animations are sometimes called.
Frame-by-frame animations
Frame-by-frame animations
You can create frame-by-frame animations by using animated GIF files. GIF, which stands for Graphics Interchange Format, is an image format that allows you to string together a series of individual static images. You can do this using a variety of software, such as Adobe Photoshop or GIMP (software programs which we covered in the section on digital images), or Popims Animator or any other GIF animation software listed on the CNET downloads site. In GIMP, you create animated GIFs by creating each frame as a layer, and then saving the result as an animated GIF. A number of good examples of animated GIFs are on animatedengines.com. Figures 10.2a and 10.2 b illustrate another interesting use of animated GIF files, which is to create the illusion of 3-dimensionality by exploiting a visual perception phenomenon known as motion parallax.
Figure 10.2a and 10.2b. Animated GIF files using motion parallax to convey three-dimensionality.
Image courtesy of Thiophene_guy on Flickr. Creative Commons licensed.Image courtesy of Natejunk2004 on wikipedia.org. Creative Commons licensed.In general, frame-by-frame animation software are easier to learn than tween animation software, but generating every frame can be labor-intensive; if you find this to be the case, tweening may be what you are looking for.
Tween animations
Tween animations
Before the advent of HTML 5, a popular animation file format was Adobe Flash, which is a proprietary standard. Unlike animated GIF files, which are supported natively by most modern Web browsers and image viewing software, you need to install separate software on your computer---usually in the form of a browser plugin---to play a Flash animation. However, Flash animations can be greatly interactive; GIF animations cannot. For instance, Samorost 1 (which was mentioned earlier) was built using Flash.
HTML5 is a relatively recent standard for presenting Web documents. HTML5 also enables you to create animations for the Web. The standard is supported by the latest generation Web browsers. Many see it as a direct competitor to Flash, particularly because it is an open standard supported by important players in the development of the World Wide Web, such as the World Wide Web Consortium (W3C). A search on the Web on HTML5 animations will yield many examples, such as the ones listed on this article from Devstand.com.
Built-in animation features
Built-in animation features
Some programs that are not necessarily animation-focused allow you to create animated effects. These include slide transitions in presentation programs like Microsoft Powerpoint and Open Office Impress. The online tool, Prezi, offers an interesting set of zooming, highlighting, and animation tools to liven up presentations. Visualization tools such as those provided on IBM's Many Eyes site use animated text in specific ways to help users navigate through large sets of data in a smooth way.
Programmed or procedural animations
Programmed or procedural animations
Programmed or procedural animations that on computational procedures to create rich and often unexpected movement behavior, such as Levin, Nigam, & Feinberg's The Dumpster (2005), which features randomly moving circles that represent passages about romantic break-ups that were extracted from blogs, or Ken Perlin's Responsive Face application, which generates a lifelike human face using simple parameters that the viewer can control. The movement in this case is neither tweened nor frame-by-frame; rather, they are specified computationally, using simple math, random numbers, and simulated physical interactions. Creating these kinds of animations generally require proficiency in programming languages such as Java, C++, Processing, MaxMSP, PureData, or openFrameworks. These computationally-generated animations could well be called generative animations or adaptive animations.
3D animations
3D animations
Finally, you can create 3D animations using software like Blender, a free and open source 3D animation program, which you can create high-quality animations, such as the one in Video 10.5.
Video 10.5. An animated short film made with the free and open source animation program, Blender (CGMeetup, 2017)
Video
Video
Activity 10.4. Learn about how the illusion of video is created
Activity 10.4. Learn about how the illusion of video is created
Allot 30 minutes
Read this overview by Paul Bakaus (2014) of some of the issues you should taken into account when producing videos. Note that he provides a video version of his talk (Video 10.6) if you would rather watch the material he presents rather than read it. Note, too, that the material becomes increasingly technical. You will not be tested on this material, but do keep this resource in mind for your later courses.
Video 10.6. Paul Bakaus' talk at Smashing Conference in 2014 (Smashing Magazine, 2014)
Video production overview
Video production overview
In traditional production cycles for film and TV, there were often four phases:
Pre-production: During this phase, casting decisions are finalized, locations are chosen, scripts are written up, and the general shape of the film is planned.
Production: This is when you actually take video footage and record dialogue. Depending on the size and complexity of the video you want to shoot, you may have a professional crew helping you out.
Post-production: In this phase, the footage is edited and additional sound and music are added. Credits and other text are added. A master copy is made, and copies are produced for release and distribution.
Release and distribution: The video makes its way to the audience.
In the past, only large or well-equipped film and TV production companies could produce high-quality videos. However, developments in the availability of production and distribution technologies have disrupted this. With mobile phones that can capture high-definition movies and platforms like Vimeo and YouTube providing access to publishing and sharing videos, more and more people can participate in the culture of the moving image (as evidenced by the rise of "YouTube celebrities", for instance).
If you are interested in resources for learning about video production, you can check also check out this Introduction to Video Production produced by the Media and Information Services Department of the Faculty of Education at University of Western Ontario.
When to use video and when to use animation
When to use video and when to use animation
Good quality video can be more labor-intensive to produce, but there are instances when a video can explain concepts more quickly and efficiently than any amount of text or static graphics. Pause and consider: can you imagine under which circumstances those may be? When should you use animation instead of video, and vice versa?
Sometimes you are better off creating abstracted representations of reality, so you might choose to use animations instead, because "sometimes simple is better than real... People are faster at recognizing streamlined representations of common objects than detailed representations" (Bartram, 2009; Ryan and Schwartz, 1956), as shown in Figures 10.3a and 10.3b. Note that this example is about the difference between a photographic still image and a static graphics, but the comparison is sometimes true in the case of moving images as well.
Figure 10.3a and 10.3b. Which is easier to recognize as a hand? Image from Lyn Bartram's slides for her class in Knowledge Visualization (2009)
The Open University has an excellent course, called Designing the user interface: text, colour, images, moving images and sound, in which they give tips on when you might want to use video and when you might want to use animation, excerpted below:
When to use video
When to use video
from The Open University (UK) (n.d.)
• To convey human behaviour and emotions. For example, a training package teaching customer care for a bank may show a clip of an angry customer coming into a bank. Being able to see his facial expressions and body language would provide a lot of additional information.
• To show events that users cannot see directly. For example, video could be used to show the inside of a nuclear reactor or a recent historical event.
• To motivate. For example, seeing a clip of the users of your software struggling with the UI should motivate you to improve it!
• To provide additional contextual information. Animations tend to focus upon the particular sequence of events, whereas video usually also provides information about the location, the clothes people are wearing, and so on. This makes it essential to update video regularly, or the age of the package soon becomes apparent to users.
When to use animation
When to use animation
from The Open University (UK) (n.d.)
• To illustrate movement. An example of this would be an educational program that teaches about the muscles a horse uses when it runs.
• To provide dynamic feedback. For example, in some operating systems when you are copying a number of files, an animation appears that illustrates files flying from one folder to another. This is dynamic feedback, confirming that something is happening.
• To attract attention. For example, an advertisement on a web page may include some movement in order to attract the user's attention. This can become a visual irritant.
• To show that the computer system is operating. Dynamic screen savers are the most obvious example of this technique. Some kiosks simulate a user operating the system. This draws the attention of potential users and shows some of the functionality of the system.
Summary
Summary
In this module, you learned about how the animations and video use properties of the human perceptual system to create the illusion of continuous activity. We discussed different types of animations and the tools you would need to produce them. We also discussed technical issues when it comes to producing video and the general steps involved in video production. Finally, we compared the relative advantages and disadvantages of animations and videos.
References
References
Aden, G. (2010). Lego Batman 3D Zoetrope with diving Penguins. Retrieved from https://www.youtube.com/watch?v=AfS2kGO5lg8
Amanita Design. (2003). Samorost 1. Retrieved January 18, 2019, from http://amanita-design.net/samorost-1/
Amanita Design. (n.d.). Samorost 3 Teaser Trailer. Retrieved from https://www.youtube.com/watch?v=4-Hx3xIefV8
Andymation. (2017). Flip Book Compilation by Pro Animators. Retrieved from https://www.youtube.com/watch?v=JVzf9rtgf9Y
Bartram, L. (2009). IAT 814: Knowledge Visualization Lecture Slides. Simon Fraser University.
CGMeetup. (2017). CGI Animated Short Film “Agent 327 Operation Barbershop” by Blender Animation Studio | CGMeetup. Retrieved from https://www.youtube.com/watch?v=yHioWLdgnMI
Grais, S. (n.d.). Animation Basics. Retrieved January 18, 2019, from http://facweb.cs.depaul.edu/sgrais/animation_basics.htm
lobstr003. (2011). Most Awesome POV (Persistence of Vision) Display. Retrieved from https://www.youtube.com/watch?v=2hASOre63Nk
McKinney, M. (2008, Spring). The Persistence of Vision. Vision. Retrieved from http://www.vision.org/visionmedia/philosophy-and-ideas/persistence-of-vision/136.aspx
Ryan, T. A., & Schwartz, C. B. (1956). Speed of perception as a function of mode of representation. The American Journal of Psychology, 69(1), 60–69.
Smashing Magazine. (2014). Paul Bakaus - The Illusion Of Motion (Smashing Conference Freiburg 2014). Retrieved from https://vimeo.com/108331968
The Brain from Top to Bottom Blog – Beginner Level » The Phi Effect Is Not the Beta Effect! (n.d.). Retrieved January 18, 2019, from http://www.blog-thebrain.org/beginner/2012/06/11/the-phi-effect-is-not-the-beta-effect/
The Illusion of Motion. (2014, May 21). Retrieved January 18, 2019, from https://paulbakaus.com/tutorials/performance/the-illusion-of-motion/
The Open University (UK). (n.d.). Designing the user interface. http://www.open.edu/openlearn/science-maths-technology/computing-ict/designing-the-user-interface-text-colour-images-moving-images-and-sound/content-section-0
Utz, B. (2014). Thaumatrope. Retrieved from https://www.youtube.com/watch?v=AlXQxIIZuDw
Report abuse