follow to the dictionary, animation can be identified as "the act, process, or an outcome of imparting life, interest, spirit, motion, or activity". In multimedia terms animation usually requires imparting movement of some kind to the objects ~ above the screen. If supplied correctly, animation can make her instructional program much more interesting come learners. Top top the other hand, if used erroneously it can likewise irritate the heck out that them, and also turn them turn off to her program.

You are watching: Displaying a sequence of still images to create illusion of motion

Animation deserve to be offered for a range of purposes, including to:

present transitions relocate objects throughout the display Indicate adjust over time Illustrate concepts Direct fist to important aspects on the screen Motivate customers

Animation in all its forms is in reality the illusion the movement. This illusion is created by displaying a series of still pictures one ~ the various other in quick succession. If the photos are placed close sufficient together (frame rate) and adjusted slightly each time climate you get the impression of movement. This kind of animation is possible because the the phenomenon well-known as persistence of vision. In brief, an item seen through the human eye continues to be mapped ~ above the eye"s retina because that a short time ~ viewing. This makes it possible for a series of images that space changed an extremely slightly and an extremely rapidly--one after ~ the other--to seemingly mix together into a intuitive illusion of movement.

If you"ve ever before seen a flipbook then you"ve viewed this result in among its most an easy forms. Each page of a flipbook has a solitary image on that - each one slightly various than the other. Together you flip v the publication the images on each web page seem come blend with each other to kind a relocating image. This is the same phenomenon that allows us to have the ability to watch movies. Movies you view in the theater or top top television space not "moving pictures" in ~ all. Lock are simply a series of still images displayed one after ~ the various other - in ~ 24 frames every second, to be exact.

So, computer animation is really a trick of the eye. It"s all in her head.

Outside the the computer system world, there are a variety ofdifferent varieties of animation, such as cel animation, clay animation, modelanimation, rotoscoping, and many others. This different varieties of animationare developed using a range of methods. In the computer human being there arebasically two techniques used to develop animations: the frame-based basedmethod and also the path-based method.

Frame Animation

With the frame-based an approach you have to create every one of theindividual photos that will comprise your animation and also then string themtogether in flipbook fashion. You carry out this by very first creating a series ofseparate photos that different slightly native one another. If her animationrequires 10 frames climate you have to develop 10 separate images. You then usesoftware to display them successively, providing the impression that a singlemoving image. This capitalizes ~ above the persistence the vision impact mentionedearlier.

The following instance illustrates this concept:


On the left you watch each of the individual pictures that to be created, and on the appropriate you check out the result of placing them with each other one ~ the various other in a solitary image. That combined image have the right to then be offered on the own. It"s as with a flipbook.

One of the more common frame-based kind of animations offered in computer applications is the animated GIF. The acronym GIF represents Graphics Interchange Format, and is usually supplied as a document format for still pictures containing 256 colour or less. However, the can also been offered to display screen a collection of images. This is accomplished by combining several individual GIF images into a solitary file. The image over is an animated GIF, and also was produced by combining the eight images on the left right into the solitary image top top the right. What"s an excellent about animated GIFs is the you don"t have to have expensive software to produce one, simply a small knowledge about frame-based animation. The drawback is that the user has actually no manage over the computer animation - it simply plays in sequence and also that"s the (notice the image above just store doing the very same thing over and also over). Plus, facility animations can be tricky to produce as man GIFs, and document sizes can acquire pretty large.

Another drawback of the man GIF is the you need to create every one of the separate images that you"ll need to produce your animation. You more than likely don"t need to create 24 frames for each 2nd as v commercial animation. It"s possible to achieve the persistence that vision impact in computer graphics v fewer than 24 frames per second, however once you gain too short the image starts to look jumpy and not an extremely well "animated". Also so, it"s still possible to create simple yet effective frame animations with just a couple of different frames. Because that example, here"s an animated GIF created of just 2 frames:


Still pretty effective, huh?

Animated GIFs deserve to be imported right into the Flash, PowerPoint, and HTML authoring environments. In addition to utilizing animated GIFs, speed has an effective frame animation capabilities built-in. Girlfriend can combine separate frames in flash manually, making use of the cast to Time command, the space to Time command, or by creating a movie loop.

Path Animation

With the path-based technique you produce a solitary "object" and also then straight the computer system to modify various properties of that object over time. This can involve an altering the location of the object, the size of the object, or even the color of the object. The most typical property to change is the location; by doing for this reason you can make the thing move around the screen.

For example, you can start through a snapshot of a car and then tell the computer system to relocate it native one side of the display screen to the other side, providing the impression that it is driving throughout the screen. Friend don"t have to attract the car at each various position, you simply tell the computer system the beginning point, ending point, and speed, and also it moves the car throughout the screen for you. In facility programs you might even have actually the vehicle grow or shrink or readjust color as it moved across the screen, just by adjusting the properties.

Path animation is likewise referred to as sprite animation or object-based animation. Route animations deserve to be created in Flash, PowerPoint, and HTML authoring environments. In flash the path-based an approach is referred to as "tweening", and also is quite powerful. You can pretty lot make objects do whatever you desire them come do.

In PowerPoint you can develop what are referred to as custom Animations to relocate objects approximately the screen. When PowerPoint is limited in the type of animations you can create, with a tiny creativity you can come up v some pretty exceptional results. Have a look at this one:

Path computer animation in PowerPoint

In HTML it"s a tiny trickier to create path animations. You need to either write one-of-a-kind code utilizing something favor JavaScript or DHTML, or usage a separate routine such together Flash to create the animation. Right here is an instance of a very straightforward path computer animation created using JavaScript. Click on the blue square to do it move:

Here is an example of a comparable path computer animation made using Flash and also converted to a Shockwave movie for usage on a web page:

As you can see, when working with multimedia, animations deserve to be created and then imported into your authoring program, or in many instances they deserve to be developed within the authoring program. The all relies on the routine you use. In any event, there"s no doubt that relocating images have a powerful effect on the person mind (not to mention lots of various other minds - have actually you ever before watched a cat follow a spot of light?). However, similar to other multimedia elements, it"s crucial to no overdo the usage of animations. Don"t have every little thing on the screen moving around and also flashing. Animations are finest used as an easy attention getters, or better yet together supplements to your key instructional material.

For this competency we"d favor for you come play roughly with your authoring program"s various ways of developing and/or importing animations. Relying on the authoring software application you are using, below are some LinkedIn learning tutorials we recommend that you go through. When again, store in mind the the names of the tutorials may differ slightly relying on which set of tutorials you room using.

PowerPoint Nothing brand-new here
Dreamweaver Nothing brand-new here
Flash Creating AnimationMotion TweeningUsing a guide LayerMask Animation
Other programs Nothing new here

When you"ve explored her authoring program"s various means of creating and importing animations, we"d choose you to show your capacity to create and use use animations using your authoring program. Exactly how you achieve this will differ depending on the regime you space using.

Begin by loading your task from the critical competency. For this activity, you can use the same food selection as before. When again, each of the 3 options accessible on the main menu should lead customers to a brand-new page or screen. These separate display screens should save the following:

one of the screens should have a frame-based animation. This have the right to be an man GIF or other frame-based animation. It"s up to you what wake up in the animation, but shot to do it appropriate to what you space doing in the course. If you usage an man GIF, you can either find one that"s already obtainable or shot creating one yourself. One of the displays should have actually a path-based animation. You should either have things or a block of text moving throughout the display in some way. It have the right to either be automatically or triggered by the user via a link of part sort. The third screen deserve to have any type of kind of animation you choose (as long as it"s different from the other two). Here"s your chance to it is in creative. Make certain there"s a switch on each display screen to permit users come go ago to the key screen. Finally, include your surname somewhere top top the key screen.

Once again, if you room using PowerPoint make certain that individuals cannot advance through the present except with the usage of the menu buttons.

If you desire to try creating your own animated GIFs, try this tutorial. You"ll require a graphics regimen to develop the separation, personal, instance images, and also an computer animation program to placed them with each other as an animated GIF. If you execute not currently have a routine for creating animated GIFs, try downloading among these:

Windows: GIF Construction collection Macintosh: GIF Builder

flash Notes

Frame computer animation - through Flash you have the right to use any of several methods mentioned previously to create a frame-based animation. This has manually combining different frames by producing a movie loop. Or, if you prefer you can import an man GIF.

Path computer animation - You deserve to use tweening to attain this. Tweening allows you come pretty lot animate any object.

PowerPoint Notes

Frame animation - through PowerPoint you can import an man GIF or develop your very own frame-based computer animation through the an imaginative use of lot of slides.

Path computer animation - through PowerPoint girlfriend can create a Custom computer animation to move an item around the screen.

HTML Notes

Frame animation - through HTML you"re nice much limited to using an animated GIF, uneven you want to write complicated programming code. Which friend don"t, right?

Path computer animation - with HTML, course animations can be a little trickier there is no the use of unique code (such together DHTML or JavaScript) or one external computer animation program (such together Flash). Feel totally free to try using one of these an ext advanced methods. However, if you cannot regulate to create a path computer animation this way, you might instead produce a custom animated GIF. If you select this alternative your computer animation should have actually at the very least 5 frames. When you are finished, include every one of the individual pictures on your page and also the perfect animation.

See more: How Did The Government Encourage Citizens To Join In The War Effort?

Save this activity in your program"s native file format. Surname the record "animation". Depending on the regime you room using, girlfriend will end up with one of the following varieties of files:

speed - fla(animation.fla) PowerPoint - ppt or pptx (animation.ppt or animation.pptx) HTML editor - htm or html (animation.htm or animation.html) other programs - swf or various other supported export styles (animation.swf)

After you have saved the file, walk to the student interface and submit her assignment because that grading. Click right here if you need added information concerning submission of her assignment.

Assignment: computer animation Activity Points: 15 Grading Criteria:

key screen consists of a menu containing at the very least three different buttons with mouseover effects. Each switch on the main display leads come a brand-new screen. Among the brand-new screens contains a frame-based animation, such as an animated GIF. One of the screens has a frame-based animation featuring an object or block of message moving throughout the screen. The 3rd screen consists of an computer animation of the student"s choosing. Each screen consists of a switch that leads earlier to the main screen. If using PowerPoint, the present does not advance except v the use of the buttons. Student"s name had somewhere on the main screen.