CMPD 434 MULTIMEDIA AUTHORING Chapter 04 Multimedia Authoring Process II

Objective At the end of this chapter, students should be able to: Multimedia Project’s Design and Development Storyboarding Animation, Video and Sound – dynamic media types, formats and integration. Creating images Designing linear movement Cel-animation Applying Animation in Multimedia System

Multimedia Project’s Design and Development - Storyboard When creating a storyboard, there are basically four things to consider. For each screen you want to describe: The elements that will appear on the screen, including the background, text, graphics, animations, video clips, and audio clips. How the elements will be arranged on the screen. What the learner will be interacting with on the screen. What navigation options will be available on the screen. Storyboards can be created on paper, in a word processor, in an authoring application, or in specific software applications designed for storyboarding. A typical storyboard includes a space to sketch the screen layout, and a space to describe all of the elements that will be included on that screen.

About Storyboard and Flowchart A flowchart allows you to determine how your learners will progress through the program, what order they will encounter the instruction, and how everything will be linked together. Storyboards go a long way toward ensuring a consistent, concise, and appealing interface and presentation of content. Together, the flowchart and the storyboards provide a graphical representation of the complete multimedia project. In addition, both of these elements will help to streamline the development process.

Creating Storyboard create a storyboard for each of the major screens or events in your program The storyboards should show the general screen layout, and indicate where each element you want to use on that screen will be positioned. You do not need to create a storyboard every time something minor happens on a screen. For example, you don't need to create a storyboard just to show a mouseover effect, or something flying across the screen. This means that you will likely have a storyboard corresponding to each box in your flowchart.

Storyboard template

Storyboard Storyboards are important! Storyboards are a smooth transition from a script to filming, and allow you see the film before filming. They can tell you where your script needs to be changed to look good in a film, saving you time, effort, and possibly money.

Dynamic Media Types Known as time-dependent continuous media  Sound, video and animation. Information is expressed as not only of its individual value, but also by the time of its occurrence

Example of File Formats Adobe Flash (.swf) Apple QuickTime (.mov) Windows Media (.wma,.wmv) Real Media (.rm,.ram) MP3 and MP4 files (.mp3,.mp4) MPEG files (.mpeg,.mpg) AVI files (.avi) You may need to enable an avi decoder within your browser.

Creating Image Images obviously play a very important role in multimedia products Images may be photograph-like bitmaps, vector-based drawings, or 3D renderings The type of still images created depends on the display resolution, and hardware and software capabilities. Access to the right tools and right hardware for image development is important! E.g., graphic designers like to have large, high-resolution monitors or multiple monitors

Bitmapped Images Bitmaps are an image format suited for creation of: Photo-realistic images. Complex drawings. Images that require fine detail. Bitmapped images are known as paint graphics. Bitmapped images can have varying bit and color depths.

Bitmapped Images Bitmaps picture and their suitability of use:- Use the native Microsoft bmp format as a raw image that will later be processed. It faster to process. Use JPEG, for photo sharing on the web because of its size and quality. GIF is normally used for diagrams, buttons, etc., that have a small number of colours It is also suitable for simple animation because it supports interlaced images. PNG is almost equal to gif except that it didn’t support the animation format.

Vector Images Vector-drawn images - created from geometric objects such as lines, rectangles, ovals, polygons using mathematical formulas Vector-drawn images are used in the following areas: Computer-aided design (CAD) programs. Graphic artists designing for the print media. 3-D animation programs. Applications requiring drawing of graphic shapes.

Vector Images A vector is a line that is described by the location of its two endpoints. Vector drawing makes use of Cartesian co-ordinates. Cartesian coordinates are numbers that describe a point in two or three-dimensional space as the intersection of X, Y, and Z axis X Y Z

Images as Information Deliver Images or Graphics for information delivery include: Drawn images Charts and graphs Maps Scenery People

Linear & Non-Linear Animation uniform linear motion with constant velocity or zero acceleration non-uniform linear motion with variable velocity or non-zero acceleration. Example of Linear Movement Animation

Linear & Non-Linear Animation Example of Non - Linear Movement Animation

Designing Linear Movement Not all objects move the same way. Lighter/smaller objects may accelerate or decelerate faster because they have less mass and require less force to do so. Larger/heavier objects may need more time to reach peak speed and come to rest. Daily life example??

Cel Animation Keyframes identify the start and end of action The process of filling in the action is called tweening Cel Animation The technique made famous by Disney Progressively different graphics on each frame of movie film Clear celluloid sheets were used to draw each frame ( 24 frames/sec. * 60 sec/min) = 1440 separate frames needed to produce one minute of a movie

Cel Animation Begins with keyframes (first and last frames of an action) Tweening – the series of frames drawn in between the first and last Originally hand drawn and “flipped” through to check the “motion” Now replaced by computer generated graphics

Applying Animation in Multimedia System When do we need to use animation in a multimedia system? Once we’ve established that, why not just use video? These are some of the questions a multimedia developer is typically faced with. Firstly, animation and video are very much alike. Both are comprised of moving images and both support sound and can depict motion or action.

Applying Animation in Multimedia System One of the places where animation and video do differ is the nature of the content itself. Most of the time, animation uses vector graphics and flat colors for its content. Video, on the other hand, often uses the equivalent of 24-bit color images to depict real people and real places. Think of animation to be like a cartoon and video like a real movie with real actors and people. Nevertheless, the line separating the two are becoming thinner with time.

Applying Animation in Multimedia System So, where would it be suitable to use animation over video? Consider a system which is trying to explain how a CD-ROM is read by the computer. You have the option of either using text, images, audio (narration), animation or video to explain it. All would work, but only one is best.

Applying Animation in Multimedia System Text would be too long and confusing. Images would be better, but needs to be complemented with a significant amount of text to be understood. Audio can only explain what can also be read in words. Plus, if you missed something, it would be inconvenient to review. Video is interesting, but how do we capture on video this particular process (CD-ROM being read) in reality and in a way that is easy to understand?

Applying Animation in Multimedia System Finally, we are left with animation. Because of its nature to depict strange and impossible things, we can illustrate how a CD-ROM works quite nicely. The individual components can be taken apart and shown, in motion, how they all interact with one another. Unfortunately, animation has its limitations. Often, we are unable to find something specific in the form of a ready-made animation (which someone else has done) and have to create the thing ourselves.

Applying Animation in Multimedia System It requires effort and work, but the results are worth it. Plus, we need not worry about copyright infringement, since we created it ourselves. Nevertheless, the long arm of the law can still prosecute us if the content within the animation itself is owned by someone else. So, if you create an animation you plan to use commercially (especially), make sure it is all yours from the ground up.