Animation

Animation

__**General Information on Animation:**__

 * **"**By definition, animation makes static presentations come alive. It is visual change over time and can add great power to your multimedia projects and web pages" (Vaughan, 2008, p. 170).
 * **Animation means**, literally, to breathe life into some thing. A transformation is involved, what was still now moves. ( [] )
 * **Jakob Nielsen** Alert Box - When to use multimedia []
 * **Jakob Nielsen** Alert Box - Flash 99% Bad - []
 * “Animation catches the eye and makes things noticeable. But, like sound, animation quickly becomes trite if it is improperly applied. Unless your project has a backbone of movie-like, animated imagery, use animation carefully (and sparingly) to achieve the greatest impact. Your screens will otherwise become busy and “noisy” (Vaughan, p. 179).
 * Visual effects such as wipes, fades, zooms, and dissolves, available in most authoring packages, are a simple forms of animation (Vaughan, 2008, p. 186).
 * Two main types of animation are stop-motion animation and computer animation. Well-applied animation can improve learning skills and abilities (from wiki #1)


 * From Kristof & Satran, //Interactivity by Design// (1995)**
 * **Animation is** "Any motion created using the authoring tool (not as digitized video), from moving text to screen transitions and special effects" (p. 95)
 * "Animating the authoring tool" can be done in a number of ways, with:
 * **Elements that change** - simple animation can be done in the authoring tool by rapidly displaying a sequence of images
 * **Elements that move** - words and images can be moved around the screen to entertain viewers, emphasize content, or support narration
 * **Elements that appear/disappear** - the screen can be animated by introducing different elements over time
 * **Screen transitions -** the most common form of motion on the screen, transitions can be the simplest way to enliven the visual presentation, however most of the time, transitions work best when they are subtle and unobstrusive (pp. 114-115)


 * [|From usability.gov, chapter 14:]**

Use video, animation, and audio only when they help to convey, or are supportive of, the Web site’s message or other content. Multimedia elements (such as video, animation, and audio) can easily capture the attention of users; therefore, it is important to have clear and useful reasons for using multimedia to avoid unnecessarily distracting users. Some multimedia elements may take a long time to download, so it is important that they be worth the wait. Used productively, multimedia can add great value to a site’s content and help direct users’ attention to the most important information and in the order that it is most useful.
 * Guideline:**
 * Comments:**

__﻿Informative Websites on Animation:__

 * The advantages and disadvantages of the animation technology in education and training: []
 * Animation and learning: Value for money? []
 * Educause Quarterly, Volume 32, Number 4, 2009 - "[|Creating animations in PowerPoint to support student learning and engagement]" - by Michael Ruffini. "Key takeaways" from the article:
 * judicious use of animation can support teaching goals and further engage students in classroom presentations
 * PowerPoint, although one of the most frequently used presentation programs around, is rarely used to its full advantage by faculty
 * creating custom animations in PowerPoint is easy with a few pointers and some practice
 * **Ellen Finkelstein** has a website with PowerPoint tips. The following link has a section on animation and transitions with a number of useful tips: []
 * A University of Saskatchewan websute has useful information on the use of animation: []
 * Key points include:
 * Research about animations or motion in instructional materials states:
 * "animation (motion) can lead to positive learning effects if it is a critical attribute of the concept(s) being presented
 * animation (motion) can increase learning of a complex procedural task
 * motion or action used primarily to enhance the realism of the presentation does not appear to have a significant effect on learning" [Anglin, Towers, & Levie, 1996, p. 766]

__**Why Use Animation?**__

 * "Motion on the screen can help accomplish several presentation goals:
 * **Establish a sequence**: Bringing items into view one at a time helps to introduce topics and suggest a viewing order
 * **Create emphasis:** items that move or change shape can call attention to a topic or prompt users to take an action
 * **Create a visual bridge**: Transitions move users gracefully between topics" (Kristof & Satran, 1995, p. 114)


 * [] - Website that outlines the key points noted below on 'When to use animation'. Use animation when:
 * you want to draw the audience attention to an important point
 * you want to explain a complicated process
 * you want to share information in a phased manner
 * [|Inspire Consulting]has an interesting website with information on animation and when animation should be used

__**Words of Caution:**__

 * do not use animation in every slide (adds monotony, too much animation diverts audience attention from content to design)
 * do not use all types of effects - a presentation should ideally have one or two types of effects ([|allaboutpresentations)]
 * "Warning -- overuse of animation and annoying visual effects can ruin a multimedia project" (Vaughan, 2008, p. 170).
 * **Points from the Previous Wiki (Reference not given):**
 * try not to make animation the centrepiece of your Web pages
 * don't include any important information in the animation
 * by positioning an animation near some text, the animation can add to the page rather than overwhelm it
 * use animation on an introductory page (often called a splash page) to welcome visitors to your site. Make sure to place some important text (such as the website's full name and logo) beside the animation
 * consider the size of the animation; try to use simple images

** PennState University – Webstandards, Accessibility and Usability – March 25, 2009 **
[] Provides guidelines for usability and accessibility regarding animations. Key points include: · Animations needed to present content should also include a non-animated, text-based alternative accessible to screen readers. Text with still images could also be beneficial for users who have cognitive difficulties processing animations. · Transcripts are beneficial for users who may not be able to access audio on their computers.
 * Avoid automatic or looped animations, blinking and scrolling. These are distracting and, if incorrectly implemented, could trigger an epileptic seizure or headaches for some users.
 * Animations with sound should have synchronized captions or a text transcript.

__**Web 2.0 and Other Animation Applications:**__
I started to go through the listing on this website to include the animation links, but there are simply too many. The site has a listing of Internet resources for education that are listed alphabetically. There are many examples of animation in the list. As noted on the website, " These are some of **the best free internet resources for education**. This page is constantly updated; every time I come across a new piece of software or an exciting website, I list it here. You might also want to take a look at my [|**Diigo**] or [|**Delicious**] accounts for more links. This list is not exhaustive in any way. In fact, if you think there is a tool or application for use in education that should be added to this list, please don’t hesitate to [|**get in touch**] and suggest it!" Check it out! (The links cover all of our media topics.)
 * [|Technology and Education Box of Tricks: A-Z Internet Resources for Education]**


 * 3D Animation**
 * **[|Alice]**
 * Alice is an innovative 3D programming environment that makes it easy to create an animation for telling a story, playing an interactive game, or a video to share on the web. Alice is a freely available teaching tool designed to be a student's first exposure to object-oriented programming. It allows students to learn fundamental programming concepts in the context of creating animated movies and simple video games. In Alice, 3-D objects (e.g., people, animals, and vehicles) populate a virtual world and students create a program to animate the objects.

media type="youtube" key="YoBKfrtZUNs?fs=1" height="179" width="300" align="center"
 * Claymation


 * Graphical Animations**
 * **[|Cooltext Graphic Generator]**
 * Cool Text is a **FREE** graphics generator for web pages and anywhere else you need an impressive logo without a lot of design work. Simply choose what kind of image you would like. Then fill out a form and you'll have your own custom image created on the fly. The heading on this page was created with Cooltext.
 * [|Kinetic Typography]

media type="youtube" key="c6Q0dfrbr10?fs=1" height="151" width="256" align="center"

Did You Know 4.0
media type="youtube" key="6ILQrUrEWe8" height="390" width="640"


 * Stop motion**
 * Common Craft


 * [|RSA]

media type="youtube" key="zDZFcDGpL4U?fs=1" height="180" width="265" align="center"


 * Time Lapse**


 * The Sand Pit

media type="youtube" key="Fk9EBOOAYiU" height="177" width="274" align="center"

media type="youtube" key="BpWM0FNPZSs" height="390" width="480" align="center"
 * 2D-Digital**
 * **Postit video:**

Here's a disturbing little animated film from a Polish animator. media type="youtube" key="F7HMz1WKkso" height="390" width="480"
 * Cartoonster

>> i s a school friendly version of Go!Animate  (below) in which all inappropriate content is filtered out. Domo allows you and your students to create animations that can be embedded onto blogs, wikis, etc.
 * [|DoInk]
 * online animation maker - "simple & friendly vector editor; create flash-style animations; use community art & your own; post to YouTube & Facebook; download your art"
 * **[|Domo Animate] **
 * **  Domo   **


 * **[|xtranormal] **
 * ** If you can type, you can make movies. This web application used to be free, but now requires payment. New users can register and receive a number of free credits to try out the program. **
 * Jeannette's In-Class Creation, Jan 31, 2011: @http://www.xtranormal.com/watch/8320211/?listid=16637303
 * Use this animation as a prompt for, "What happens next?" or to analyze "Effective vs. Ineffective communication"
 * Invite students to create the next scene in this story.

>>> >>>> media type="youtube" key="UCOCJKGi6xY?fs=1" height="151" width="256" align="center"
 * Go!Animate
 * ** GoAnimate.com is an entertainment website that enables the simple creation of stories, satires and sentiments that can be shared with the entire online community. This site offers simple to more advanced innovative features that provide users with a multitude of possibilities for customizing their animations **

[|Blabberize] >>> > > **Southpark** >>>> >>>> media type="youtube" key="lieDzFBdCXY?fs=1" height="233" width="247" align="center"
 * Free web app that allows you to upload pictures and add an animated mouth - record your own voice - it's fun!

**__ Principles of Animation __** > “Animation is possible because of a biological phenomenon known as persistence of vision and a psychological phenomenon called phi. An object seen by the human eye remains chemically mapped on the eye’s retina for a brief time after viewing. Combined with the human mind’s need to conceptually complete a perceived action, this makes it possible for a series of images that are changed very slightly and very rapidly, one after the other, to seemingly blend together into a visual illusion of movement” (Vaughan, 2008, pp. 171- 172). >>>> __ Examples of Animations ... Effective Use or not? You decide! __ Some examples to consider - do the animations on these pages distract or add to the learning/content? Or are they simply meant to be 'fun'?
 * [|Animation done with digital still pictures]
 * [] - From Don Norman - jnd.org - check out the 'bouncing' balls!
 * Mrs. Blossom's Smart Board Lessons
 * []
 * []
 * []
 * []
 * []

**__Current Articles (Available through U of C online resources)__** > Ayres, P., & Paas, F. (2007). Making instructional animations more effective: A cognitive load approach. //Applied Cognitive Psychology, 21,// 695-700. doi: 10.1002/acp.1343 >> -an interesting article that uses cognitive load theory to provide an explanation for why animated instructions have not currently produced the learning benefits expected. (Themed issue of seven empirical papers - the linked article is the introduction. Other articles in this issue include: Learner control, cognitive load and instructional animation; Attention cueing as a means to enhance learning from an animation; and Can the cognitive load approach make instructional animations more effective? ... interesting reading!) > Draffan, E. A. (2009). Web accessibility and usability -- Can it happen with flash? //Journal of Access Services, 6//, 303-311. doi: 10.1080/15367960802301002 >> -focuses on the use of animation on the Web, such as Flash movies. Discusses the barriers that they types of technologies cause to some assistive technology users. Suggests a "pragmatic and proactive approach at the design initiation stage" to ensure that the media is accessible to many more people. >> > Dyer, S., & Adamo-Villani, N. . Animated versus static user interfaces: A study of Mathsigner. //International Journal of Humanities and Social Sciences, 2//(2), 118-123. >> -compares 3 interfaces in a program (Mathsigner) - a static interface, an interface with highlighting/sound feedback, and an interface that incorporates five Disney animation principles in an attempt to determine which interface is the most effective for the target users of Mathsigner (children aged 5-12). Results indicated that the animated interface was more 'likeable' than the other two interfaces. >> > Schwartz, N. (2003). The Impact of Animation and Sound Effects on Attention and Memory Processes. //Conference Papers -- International Communication Association//, 1-5. doi:ica_proceeding_12242.PDF >> -uses the "Limited Capacity Model of Mediated Message Processing" to find out how children respond to specific features, and combinations of features, in a multimedia lesson. Specifically, the research examines whether 9-to-12 year old children orient to the use of animation and/or sound effects in a multimedia lesson and whether these features affect recognition and recall of content. > Turner, M. (2007). Transitional movement: Value-adding animation design. //International Journal of Learning, 14//(4), 183-191. >> -interesting article that questions whether or not animation distracts or assists learning. "That it distracts this paper argues, is not the fault of the animation, but of the way it is employed. Harnessing moveent to the purposes of the content, to assist the learner make sense of a domain of knowledge is the basis of this paper." Provies a set of questions and provisional guidelines to assist academics make good use of movement in online resources. > Wong, A., Marcus, N., Ayres, P., Smith, L., Cooper, G., Paas, F., & Sweller, J. (2009). Instructional animations can be superior to statics when learning human motor skills. //Computers in Human Behavior, 25//, 339-347. doi: 10.1016/j.chb.2008.12.012 >> -explains why animated instructional animations are superior to static graphics for cognitively based tasks that involve human movement. >>>> >>>> >> **ANIMATION CLASS ACTIVITY** >>>> >> Working in groups of 3 or 4, create an animation using xtranormal - an online application to create simple and quick animations. Use any content scenario to create an animation. Please keep the animation short, not more than 2-3 minutes long. >> Guidelines for first time [|xtranormal] users. > You do not have to create a login to use xtranormal. Use your existing Facebook, Twitter, Google, LinkedIn, Google, or Yahoo accounts to access xtranormal.

> Once you login, you can make movies from any of the pre-existing characters, create your animation and publish it for the class discussion.

You can keep it private using privacy options in the ‘my movies’ section.

Graduate Students' eChunks on Animation
>> >>> >>> __ References __ >>> Anglin, G., Towers, R., & Levie, H. (1996). Visual message design and learning: The role >> >> >> __ References __ >> Anglin, G., Towers, R., & Levie, H. (1996). Visual message design and learning: The role of static and dynamic illustrations. In D.H. Jonassen (Ed.), //Handbook of research for educational communications and technology//. New York: Simon and Schuster Macmillan. >> Kristof, R., & Satran, A. (1995). //Interactivity by design.// Mountain View, CA: Adobe Press. >> Vaughan, T. (2008). //Multimedia: Making it work//. New York: McGraw Hill. >> >> media type="custom" key="8213382"
 * JJ: []
 * CL: []
 * CB []
 * AR @http://edificationinc.blogspot.com/2011/01/eportfolio-chunk-3.html
 * http://eder679.blogspot.com/2011/01/reading-response-4.html
 * FA http://falghaithi.blogspot.com/2011/01/echunk-3.html
 * CC: @http://catherinechensblogforeder679.blogspot.com/2011/02/echunks-3.html