"To give life to" is a simple definition of animation. For instruction, animation has many uses in understanding biological, physical, mechanical and historical ideas (Betrancourt, 2005). Through animation's connection with personality and plot, it also highlights many relationships to the agendas of language arts. Though animation has high values in getting initial engagement and attention, at the same time animation, like static images, can confuse or distract the learner when the perceptional elements of the visual scene dominate the thematic elements (Lowe, 2003). That is, animation can be a kind of magic act where distractions from interesting visual elements (perceptual) cause key elements of knowledge (thematic) to be ignored or missed. However, like understanding a magic act, composing the animation, instead of watching the animation, will be far more informative and increase the odds that the necessary mental model will be understood and retained in memory. This chapter introduces the ideas and tools for 2D and 3D digital animation. These compositional forms have yet to be condensed and simplified into good applications for beginner use as previous chapters have explored with text, image, video and sound. We'll be using a full strength professional tool, Adobe Flash, but there is hope for more school friendly animation applications on the horizon as elements within HTML5 gain prominence in competition with Flash.

In the digital palette on the right, the composition of animation is represented by the blobs of yellow and orange paint for two-dimensional and three dimensional animation. Like video, animation shows change over time. Unlike video, animation does not require a camcorder. Animation, like video, helps the brain focus on movement and its meaning. Due to the need to manually or digitally create it, animation creates a greater focus on the cause of movement and its mechanics. In animation, the composer creators the actors, the props and the stage, animating the elements against a background. Animation is already a significant component of Web pages, one that continues to increases in use as more become aware of the advantages of animating with computer technology.

The idea of animation or movement over time has many deep roots in our biology, in learning and in our culture, that are expressed in a wide variety of ways. Plants are tied to one spot and through various tricks only move locations through their reproduction into the next generation, whether spreading by roots or seeds; animals move as part of their basic nature. The animal known as homo sapien can take animation to a more intellectual level. Without being formally taught, children spontaneously experiment with ideas using motion and sound in their play to animate nearly everything around them with personality and theatrical plot. Puppets and puppet theater are another form of animation. Animation composition can be a way to simulate, to create a way to study some process over and over again, to better understand, to find ways to reduce risk and chance of error, and to prepare for action. It is little wonder then that the digital forms and uses of animation composition of this chapter have been invented that extend animation's ideas to digital screens. The process of learning some skills for creating and teaching movement through the use of a recording on a page also suggests the value using real movement as an integral part of learning and teaching.

History

After the key step of learning to compose physical things with our heads, the next key step in the history of composition came with the ability to record and edit words, to put them in the intellectual bank for later reuse over time. There has always been a need and desire to do the same for motion. Humanity has a long history of animated creations that draw a crowd, from something as basic as conversation to sporting competitions, acrobatics, puppet shows, and live theater. If it moves, we have a tendency to watch it. Recorded animation is one of many composition forms that were invented in just the last two centuries, a discovery that also led to the invention of film and then video. The capacity to store, edit and re-use motion added an additional important element to understanding, study and problem solving.

The first modern recorded animations were composed in the 1830's using the technologies called phenakistoscope and the zoetrope. The zoetrope, as the clickable picture on the left shows, was a revolving cylinder provided a slit to view images on the opposite side of the cylinder. Click and scroll to see a Flash animation version of the zoetrope in the frame above. This animated alphabet site has the added benefit of linking to further animations useful to those teaching the alphabet or those teaching about creativity.

The scenes depicted in the spinning circumference of a zoetrope could only represent a couple of seconds of animation. Such examples include the running horse on the left and the pair of boxers on the right. These animations are the result of copying the images from a zoetrope and putting them into the Web animation format called gif (graphic interchange format).

It is curious that the use of paper to make animations came along almost 30 years after the first animation machines were invented. The first hand-drawn flip books appeared in 1868, patented by the name of kineograph (moving picture). In 1894, photographers found they could also put photographs in the paper flip book format to achieve a photographic form of animation. This form of digital animation is an easy thing to recreate on paper or to build using any set of photographs or drawings and an animation editor. The paper versions, such as the clickable and playable example on the right showing metamorphosis, are called flip books. There are software applications available for both desk top and Web sites (e.g., such as FlipClips) that select a series of frames from a videoclip and turn them in to personalized flip books. A search of Barnesandnoble.com for "flip books" will turn up numerous flip books for sale today. A set of flip books should be a part of every library and classroom, if for no other reason than to serve as a simple and basic way to introduce the concept of animation composition. Flipping the pages quickly creates the illusion of motion. Slowly turning the pages to look at what is the same and what is different and how much it is different is critical to understanding what makes animation work. However, there are other valuable uses for them as well. This exercise also provides a useful way to discuss similarities and differences with children, which elevates their power of observation. Careful observation and analysis is a major component of science, and in some fields, the only option. How is one page the same or different than the next? Flip books also address content in many subject areas.

As the capacity of computers and computer programming grew, computer graphics, originally just line drawing, emerged first. Once computers were capable of drawing shapes, the shapes could be stored and sequenced and animation developed. The earliest of these line drawing and calculating applications was a program called Sketchpad, created by Alan Sutherland. Alan Kay, one of the premier designers in the history of computing, narrated a review of Sketchpad in a YouTube video clip, which provides some sense of the first computer graphics capability.

Eventually the capacity to animate graphic images found its way into a format that could be transmitted on the Web. This animation format called GIF animation is the digital equivalent of the paper flipbooks.

GIF animation examples are common and easy to find. See the Mars Microprobe example in this format on the left. See the clickable graph on the right that can be used to address slope, tangent and derivative. Also see exploding head flipbook, NASA flipbook or golf swing and over 6,000 others in the top frame, scrolling if necessary to see all. Such images would originally have been hand drawn images on paper fastened together in booklet form until the Web came into being. In the 1990's a way was invented to turn a static single image gif file into a kind of digital flipbook, a sandwich of digital images with control of the timing or length of visibility of each image. Some patent issues over the use of the GIF format led to the creation of a format that would replace the GIF format, the PNG format (portable network graphics) for single images, but this format has yet to develop an officially approved format for animation. New online flipbook editors constantly appear: search online flipbook editor. If interested in more, see the optional tutorial on GIF animation in the left sidebar. Such forms of animation are relatively simple to construct which lends them to easy incorporation into teaching assignments. For example, a teaching assignment might require students to create a flipbook to clearly show the 3 steps in DNA replication leading to two new DNA structures. Procedural knowledge is a significant part of what we learn and all procedure knowledge lends itself to various animation formats.

From 1920 to 1940 animation's cinematic uses went from a novelty to an art form to an industry. The culuminating wisdom of the art of animation from this period and its 12 basic principles can be found in a classic work that has been through at least two editions, The Illusion of Life: The Disney Animation (1995) was created by a pair of animators that led the Disney animation teams. These principles include: 1. Squash and stretch; 2. Anticipation; 3. Staging 4. Straight Ahead Action and Pose to Pose 5. Follow Through and Overlapping Action 6. Slow In and Slow Out 7. Arcs 8. Secondary Action 9. Timing 10. Exaggeration 11. Solid Drawing and 12. Appeal.

The 3 minute tutorial of this paragraph by Juan Diaz using clips from the movie Ice Age 2 is a great short form introduction to these ideas. There are many Web sites and YouTube clips that review the basic principles of animation from different perspectives and in greater detail. [This video clip gets deleted from YouTube from time to time, but keeps popping back up again. If it does not play below, see if you can find it using this YouTube search, principles of animation "Ice Age".] While watching the video, stop it from time to time and write down the vocabulary words to make a list of the basic principles it is teaching. Which of the 12 principles of animation did it not mention?

Until the advent of the digital age, a full length animated movie might require over 250,000 drawings which would take a large team of artists years to complete. The arrival of digital technology had a huge impact. Computers not only handled much of the filling in of image areas, but more importantly enabled the animator to draw the major changes in the animation and then have the computer transposes the existing shapes to create the in-between frames of actions.

Part of the definition of animation is to impart motion or activity to something. At the most basic levels of animation, any movement of a device or projected movement of something on a screen would meet that definition. However, the best animation takes that to a higher level of the definition. To animate something also means to give life to it; to impart interest or zest to; to fill with spirit, courage, or resolution. That is, the best animation, whether scientific simulation, a product advertisement or a movie, is connected to some deeper issue. Such animation better reveals the reality of raw mathematical data, such as the 3D movement of a hurricane simulation or the sequences of a robot's movement. It might also reveal the humanity of a character in an animated story or causes us to laugh at a commercial about something for sale. That is, the best animation of any category connects directly to issues and topics in the sciences and arts.

Composing Digital Animation

Composing animation in the digital age brings a number of challenges and opportunities. If reading and writing readiness for understanding text in first grade involves over 1000 hours of reading and writing related activity (Moore et al, 1990) before they can really read and write, what is your estimate for being ready to learn animation composing? For animation composing? Real reading takes more than awareness and exposure to the value of reading. Unlike learning to talk, reading and writing readiness does not cause the spontaneous generation of readers when they reach a certain age. Some one or some material has to reveal the basic elements that make up a form of communication and how they are combined to make larger structures. As part of your own animation readiness, look for the elements or patterns of animation in the many examples that are addressed below.

Slideshows Animation- Powerpoint

Some of the first commonly available tools for creating animations appeared in the slideware application called Powerpoint. Various elements of a slide or transitions between slides could be animated.Given the common availability of Powerpoint, this becomes an easy to use application for introducing animation to classrooms of students whether they have access to the Internet or not. See these examples from: SIU's School of Medicine, or Powerpoint Heaven's showcase material. The left column directs readers to two Powerpoint clips on how to create interactive animation such as buttons which advance slides and to create movement in the appearance of slides and slide elements. Powerpoint Heaven's tutorials and examples on animation are also helpful. Underwood and Bown (2004) provide some easy lessons for building building slides with children that introduce animation in the work on Multimedia Authoring With Students.

So what? Is the slide animation just attention getting or is the animation there because the animation itself is important to the content? More importantly, does animating elements in a slide improve or detract from understanding, from comprehension of the main ideas? The results of one study showed that Powerpoint animations are comprehension killers (Timmer, 2009). More studies will be needed to determine if there are any uses of PPT animation that are really helpful to recall and understanding.

Robotics Animation

If animation is bringing things to life, then robots are clearly another form of digital animation. Robots may be used in fictional plots of movies, but real robots work with real data in the real world. Given that robots also users sensors like other living organisms, it could be said that robots are the most sophisticated and life-like forms of animation.

Web Browser Animation

If one is going to paint, it is helpful to see many paintings by others to grasp its range of possibilities. The same is true of animations. As part of this chapter's study, use links and search ideas below to view a wide range and number of animations. But how can one search for animations in general as well as for specific school related topics?

Because Web animation uses specialized types of files with their own unique extensions, it is possible to search Google by file type, such as filetype:swf or filetype:gif. In doing such searches, it is important to avoid copyright issues in using what is found. Instead of trying to copying or downloading animations for inclusion in your own Web sites, use other options. These might include: studying the animations and creating your own; seeking the owner's permission to use; or simply making a link to the page that includes them.

To find millions of currently available Flash animation files, type Flash filetype:swf. To find Flash files by selected topics, type something like horse filetype:swf. However, as Flash files can be described in their accompanying text for so many different purposes, this seldom brings up a Flash animation that is close to the intent of the search. This might yield anything from an animated poem about a horse, to a slide show of pictures of horses. By refining the search to horse galloping filetype:swf one might find, for example, the wonderful children's story titled Fable Stable that does contain a page with an animation of a galloping horse. It is important to save the Web address of favorite Flash animation sites and pages because right-clicking the Flash player animation provides no option to download or save the Flash movie. There are some technical ways to download Flash swf files, but without specific permission from the author, the files could not be used in one's own Web site.

The common GIF filetypes have a much more limited duration so are much more focused in their descriptions which makes search more effective. However, a gif file can be static or animated. For example, click this search for tree filetype:gif whose results are only about 1/10 animated gifs. It can help to the refine the search and add the common letters of animate and animation. That is, search for tree filetype:gif animat. [The term "animat" is used so that it will also find related words such as animate, animation, and animating.] There are also many sites that provide large collections of free GIF images that can be found by searching for "free gifs". If the images are downloaded and inserted into documents used only in classrooms, then Fair Use can be claimed, for example if inserting them into Powerpoint slides.

In addition to searching by content area or by ratings, such as "best gif animations", there are a number of stand-out sites such as the Best Animation site collection of GIF animations or site for Best Flash story telling. Further, just as the Hollywood movies have their Emmy awards, there is also a widely known and highly competitive set of awards called the Webby Awards. A large number of the award winners within its numerous categories over the years have made extensive use of Flash animation. This award site provides even further examples of effective animation as well as more specific examples of the use of Flash to provide not just animation, but entire Web sites done in Flash that integrate of interaction, text, image, animation, video and sound.

The general needs of commercial and public service advertising share a number of needs with education, including the ability to concisely focus on awareness and recall of new terms, methods and ideas. Educators preparing lessons can draw useful lessons of their own in studying their methods and learn much about animation as well.

As newspapers and magazines have done since their beginnings, pages can hold ads. These ads on the Web are called banner ads. As animated ads on Web pages are more attention getting than still images, a large percentage of Web ads include animation. To reduce costs to advertising and marketing firms, the ad spaces on Web pages come in a variety of recommended standard sizes that marketers know as Ad Unit Guidelines. Much work has been done to determine which are the best performing banner ad sizes. These sizes serve as useful guidelines for teachers, students and other Web page authors that are creating animations for their own Web sites and pages. Banner Report has created a kind of Internet museum of over 15,000 examples of such banner ads. Note the stickiness or addictiveness of one of the best ever animated banner ads, Pringles Can Hands. Marketing firms have the own special awards known as the Internet Advertising Awards. View some to note the large number of categories and the well conceptualized and well drawn animations of these winners.

Using the groups grade level discussion group area, do a search for animation compositions related to your grade level or topic. Post a message or messages with links relevant to the content. Scan these links, and select some favorites. Move these to a Web page titled, 1st grade (content area) or MG (content area). This is a collaborative writing activity. Note that if someone else is editing the page, it will indicate that the page is locked. If you instead starting editing the page at the same time. Whoever saves the page last will erase the other person's contribution. Add a brief annotation under the link as to how you would use this animation. If someone else has already added one of your favorites, see if you can add further annotation for other possible uses.

One place to start for animation ideas is to skim required competencies. Look thru standard course of study competencies for topics that address change over time and multiple steps then consider animation compositions that reinforce such procedural knowledge. Much of what we teach and know is procedural. Animation can also be used to speed up a long sequence or slow down a short one to better understand it. Animation is also used to draw attention to and help the recall of words, phrases and concepts, which puts animation at the heart of much Web advertising, whether a simple banner ad or something more interactive. Teachers have a similar need for drawing attention and facilitating recall.

Introduction to 2D Flash Composition for the Web

A major innovation of the digital environment is the capacity to mix moving images and sound within a page of text or neighboring pages or frames. One of the first media to be integrated was animation, but the GIF animation format did not include audio or any forms of interaction other than starting and stopping it. Flash animation provided the missing pieces for two-dimensional animation. Though competing applications such as Silverlight from Microsoft have appeared, the almost exclusive editor for the creation of most of the Web's animation is Adobe's Flash application (Karlins, 2008). Do some brainstorming. What are some basic animation ideas that a beginner in animation might attempt in your educational specialty areas?

One basic use of animation is to take apart a GIF banner ad and repurpose its animated techniques to create an advertisement for an educational idea. That is, existing visual elements would be replaced by other images of your own making. Another simple educational use of animation is to animate a key idea, quotation, definition over related images. For example, view this animated poetry done in Flash. Note the simplicity of the animation, one set of text moving up, one mathematical term moving down, along with two pictures that scroll downward against the text.

A further challenge arises in how and where to display the animation. Next select embedded view and scroll to see the animation. Arrange the web pages so both are visible. Next click the still image on the right. One link creates a new display just for the animation; the second displays a new though identical page in which the animation is embedded. The third keeps the change within the frame. Does the animation distract you significantly while you are reading? How might you manage its distractive quality with either form of display? The content of the animation points to the central problem of composition and communication, getting to the point without taking more effort than necessary. Making static text and image work well with changing data from other media while heeding the call to distill ideas to their essence has become an interesting challenge for both author and reader.

New media, whether Flash animation or something else, might also be in an attached page called a frame page, something frequently demonstrated in this chapter and others. As with many browsers but not all, the Firefox browser enables users to resize the frames to make them disappear from view. These examples are a further demonstration that the web's capacity to manage and mix live and archived media and text pushes us beyond the existing boundaries of print or cellulose technology, and does so within a global communication media.

Adobe TV provides beginning Flash tutorials for the CS4 version from other sites such as Lynda.com and does so for free. This is the primary teaching material, but there are other useful secondary soures. Detailed instruction in Flash is available online for free for WCU students using the WCU onlinetraining.wcu.edu site, but this material is only for those that have CS3 version of Flash. The lab currently has the CS4 version. Commercial online training sites at Atomiclearning.com and Lynda.com provide even more opportunity for professional development.Other sets of training materials include those at BestWebDesignz, TutVid and selected items at YouTube (Introduction to Sounds).

In addition to the Flash training series in the left column, there are other specialized sites such as GoAnimate for creating animated stories. Two other sites hold much promise for improvements in the weeks and months ahead. Ajax Animator (features) is a free online Flash application but it does not yet consistently and fully work. The Aviary.com is working on a siimplified Flash animation editor but has not announced a predicted time of completion.

3D Animation

There are three ways that we "read" that is watch 3D animation: in a movie, in a specialized software application such as Second Life or a specialized game machine. Where readers/viewers have not been able to experience is within a standard Web browser and that is about to change.

Watch the online 3D animated movie "Warriors of the Net". The Warriors movie is also an excellent example of the three-dimensional (3D) animation created by some of the applications noted elsewhere in the optional activities section.This is not just a movie to see for examples, but also to watch carefully for ideas and vocabulary words. The movie describes the basic mechanics of how the Internet works, an important concept among these chapters. For example, can you explain what an Internet router does? The software used to create such a movie is beyond the scope of this course to teach for hands-on practice. View these pages to gain an understanding of what 3D applications can do: Blender (free), Bryce ($35), Maya Real Time Animation Suite, ($3,700). There are many other courses offered by colleges and universities that provide directed hands-on instruction on more sophisticated 3D animation and related forms of composition.

Fortunately, there is a form of 3D animation that provides a direct and easy hands on experience, one that you can "script" merely by using it. These applications are called virtual reality sites which are a part of genre of software are called Massively Multi-Player On Line Games (MMOGs). The most well known of these is Second Life. A link in the left column leads to a more detailed tutorial about this site and concept and how to download the specialized software to take you there. The clickable screen shot on the left is an example of a scene from Second Life when my avatar (the animated character representing me) enabled me to study the map of the Second Life site of NOAA (National Oceanic and Atmospheric Administration). In class experiences will help set up individual and team visitations to Second Life.

As Second Life is about experiences instead of actual file saving, capturing activity there requires another application, a screen movie capture application. The captured screen movie files from live interactive sites, whether 2D or 3D can be combined with videoclips shot in reality to enable educators and students to have some of the benefit of 3D design without taking weeks to learn the basics of 3D animation.

Specialized game machines, sometimes called video games, almost exclusively use 3D animation, and the gaming market has grown bigger than that of the Hollywood film makers. Major game machines include XBox 360 from Microsoft, PlayStation 3 from Sony and Nintendo with its Wii sensor controller. Many in our student populations have spent hundreds of hours solving game problems within this 3D media.

What has been missing is the capacity to play and experience 3D in a Web browser. Though plug-ins have been available for 3D display, none of them have become well known or heavily used, in part because it was seen as a hassle to download and install a new plug-in. Google, Inc. has set out to change that. Play the YouTube clip on the left for a demonstration or search YouTube for more. In November of 2009 Google announced that they were ditching their competitor to Second Life, a downloadable application called Lively, in favor of 3D design appearing within standard Web browsers themselves. This would happen first with a plug-in and then later would be built in to Web browser code so that users will no longer need to download a plug-in. To run demonstrations directly within the browser being used to read this paragraph, download the plug-in at code.google.com/apis/o3d/ and test it out. Tutorials on how to compose such 3D Web pages are just beginning to appear (Capseron, 2009; Meunier, 2009; YouTube, 2009).

Animating Learners and Education

We may learn things by sitting still and looking at things holding still, such as text and photographs. But clearly human beings, like all animals, are fundamentally designed to learn by studying things that move. Our vision system has this built into its design. Moving elements generally get first priority in our thinking. If it moves, look at it. If its new, food or dangerous, concentrate on it. The converse has significant educational value as well. Human beings are fundamentally designed not just to watch movement, but to move. If movement (animation) is intrinsically important to animal learning, is the degree of animation of students a useful criteria to consider when evaluating the quality of a lesson plan, a teaching event, the design of schools, or educational strategy? Does this mean that the most important point or the key idea of a learning activity should involve the greatest degree of movement? Have we built an educational system around school structures that are designed to make human movement constrained and difficult? Does this mean that our school architecture contributes to the dumbing down of human learning and learning potential? Does making the school day longer to gain more time to sit in a seat then really help with the drop-out rate or accelerate it? Recognizing the problem, what are antidotes that can help address the situation?

The value of animation composition to teaching and learning is that it is an important element of our thinking. Humanity is more impressed by actions than intentions but simulation throught various forms of animation is commonly used to prepare for action when it counts.

Bibliography

Betrancourt, M. (2005). The animation and interactivity principles in multimedia learning. In Richard E. Mayer (Ed.) The Cambridge Handbook of Multimedia Learning. Cambridge University Press. (part of this work available thru Google Books), 287-299.

Karlins, David (November, 2008). Review: Flash CS4 Professional. http://www.macworld.com/article/136595/2008/11/flashcs4.html

Lowe, R. (2003). Animation and learning: selective processing of information in dynamic graphics. Learning & Instruction, 13(2), 157. doi:10.1016/S0959-4752(02)00018-X.

Moore, Sharon Arthur ; Moore, David W. and Cunningham, Patricia M. (May, 1990). Review: Beginning to Read. The Reading Teacher ,43(9), 678-679.

Ollie Johnston, Thomas, F. (1995). The illusion of life: Disney animation. New York : Hyperion.

For further study, search for word strings that include the word animation. Use Hunter Library's access to ERIC to do an Advanced Search for animation with the DE Descriptors [exact] command. Further examples: Google Scholar for animation relevance; Amazon.com for animation or animation mathematics.