6.2 : Multimedia Elements Animation 1

Learning Outcomes At the end of this topic, students should be able to: 1) Describe the purpose of using animation in multimedia. 2) Describe the types of animation. 3) Identify sources of animation. 4) Identify different types of file format. 2

History of Animation 50 years ago Walt Disney created animated objects such as Mickey Mouse. Today the process used to create animated objects has had to change. In fact, it continues to change.. 3

4

“animation is the act of making something come alive or makes static presentations come alive.” (Vaughan, 2011) “Appearance of motion created by displaying a series of still images in sequence.” (Shelly & Vermaat, 2012)  Animation is a process of making a static/still image look like it is moving. 5 What is Animation?

Animation is created by: Creating a series of still images that can be shown rapidly creating a sense of motion. Manipulating and moving an object along a vector or path. Storing animation information in a data file for later playback. 6

7  To make static presentations come alive  To create an examples for dangerous and costly events The Purpose of Using Animation in Multimedia

Animation is useful for illustrating concepts which involve movement. Can help organize thoughts and illustrate processes. Can graphically simplify complicated concepts and convey complex inter-relationships, which are difficult to visualize. 8

The Purpose of Using Animation in Multimedia Example: Teaching swimming – the proper way to swing hands for swimming can be more effectively illustrated with an animation. Can combine vast amounts of scientific data into a compact package, which can then be presented simplistically. 9

The Purpose of Using Animation in Multimedia Can re-create an event, which is too expensive or too dangerous to reproduce. Example: an aircraft accident. 10

Types of Animation 2D Animation 3D Animation 11

12 2D (2 Dimension) In 2-D space, the visual changes that bring an image alive occur on the flat Cartesian x and y axes of the screen. A blinking word, a color-cycling logo (where the colors of an image are rapidly altered according to a formula), or a button or tab that changes state on mouse rollover to let a user know it is active are all examples of 2-D animations. (Vaughan, 2011) 3D (3 Dimension) “In 3-D animation, software creates a virtual realm in three dimensions, & changes (motion) are calculated along all three axes (x, y, and z), allowing an image or object that itself is created with a front, back, sides, top, and bottom to move toward or away from the viewer, or, in this virtual space of light sources and points of view, allowing the viewer to wander around and get a look at all the object’s parts from all angles.” (Vaughan, 2011) movements like spinning and flying across the screen are some samples of animations. Types of Animation

2D Animation Two dimensional (2D) animation software adds movement and action to static images. Use either vector drawn or bitmapped images as objects. The motion of animation is perceived by the viewer from a series of frames. For the motion to appear smooth a minimum of 15 frames per second (fps) is generally required. 13

Examples of 2D Animation 14

2D Animation There are two types of 2D animation Cel Animation Path Animation 15

Cel Animation based on a series of frames or cels in which the object is redrawn in each consecutive cel to depict motion. Cel comes from the word celluloid (a transparent sheet material) which was first used to draw the images and place them on a stationary background. Cel animation is a technique in which a series progressively different graphics are used on each frame or movie film. Cel animation begins with keyframes. Keyframes refer to the first and the last frame of an action. The frames in between the keyframes are drawn in the tweening process Tweening depicts the action that takes place between keyframes. 16

Path Animation Path Based animation is the simplest form of animation and the easiest to learn. It moves an object along a predetermined path on the screen. The path could be a straight line or it could include any number of curves. Often the object does not change, can be resized or reshaped. Use tweening technique, which object is set beginning position on 1 frame and end at another frame The technique will fill in the intervening frames. 17

18

3D Animation 3D animation are digitally modelled and manipulated by an animator. Creating 3D animation is considerably more complex than 2D animation and involves two steps : Modelling Rendering 19

3D Animation - Modelling Modeling is the process of creating 3D objects and scenes. The animation step involves defining the object’s motion and how the lighting and views change during the animation. Involves defining the shape and physical characteristics of an object which will be created in three dimensions. The most common modeling techniques are wireframe and solid object modeling. 20

3D Modelling 21

3D Animation - Rendering Rendering is the final step in creating 3D animation and involves giving objects attributes such as colors, surface textures, and degrees of transparency. It can take considerable time, depending on the complexity of the animation. There are different rendering processes, varying in time needed and quality of the completed animation. It paint the scene from top to bottom, one line at the time to create the type of image you expect from your design. Rendering option: Motion blur: used to digitally create the visual effect of blurring caused by objects moving past the camera. 22

3D Rendering 23

The Sources of Animation Adobe After Effects CS4 excellent visual effects and compelling animation software. Photoshop CS4 Adobe is the benchmark for graphics and animation software. Flash CS4 True advanced authoring environment for creating interactive content for digital, web animation, and mobile platforms. Create interactive web sites, rich media advertisements, instructional media, presentations and games. 24

The Sources of Animation Ulead Gif Animator This animation software gives you the tools to produce great and fast loading animations for the Web. 3D Studio Max Provide powerful, integrated 3D modeling, animation, rendering, and compositing tools that enable artists and designers to more quickly ramp up for production. Blender Blender is the open source software, cross platform suite of tools for 3D creation. 25

File Format for Animation .gif .swf . Ani .fla .flc .fli  Mng .blend 26

File Format for Animation gif (Graphics Interchange Format) a graphic image on a Web page that moves contains within the single file a set of images that are presented in a specified order. can loop endlessly or it can present one or a few sequences and then stop the animation 27

File Format for Animation Swf (Shock Wave Flash) a file format for multimedia, vector graphic and Action Script in the Adobe Flash environment can contain animations or applets of varying degrees of interactivity and function the dominant format for displaying "animated" vector graphics on the Web. 28

File Format for Animation Short NameLong Name Typical File Extensions Content ANI Microsoft Windows Animated Cursor.ani Color/Animated Cursor FLA Macromedia Flash FLA Project File Format.flaAnimation FLC.flcAnimation FLI.fliAnimation MNGMulti-image Network Graphics.mngBitmaps/Animation BlendBlender.blendanimation 29