KSSM 2020 Bahan Pembelajaran MPV Produksi Multimedia Tingkatan 5 - COMPRESSED

Machine Translated by Google
EYE LEARNING MATERIALS

VOCATIONAL LESSONS
STANDARD SECONDARY SCHOOL CURRICULUM
PRODUCTION
MULTIMEDIA
FORM 5
DEPARTMENT OF EDUCATION RESOURCES AND TECHNOLOGY

WITH COOPERATION
DEPARTMENT OF VOCATIONAL TECHNICAL EDUCATION AND TRAINING
LEARNING MATERIALS
VOCATIONAL SUBJECTS
STANDARD SECONDARY SCHOOL CURRICULUM
MULTIMEDIA PRODUCTION
FORM 5
DEPARTMENT OF EDUCATIONAL RESOURCES AND TECHNOLOGY

WITH COOPERATION
DEPARTMENT OF TECHNICAL AND VOCATIONAL TRAINING EDUCATION
2020
0
RUKUN STATE
That our country is Malaysia
support the ideals;
Achieve closer unity among the entire community;
Maintaining a democratic way of life;
Creating a fair society where the prosperity of the country will be

shared fairly and equitably;
Ensure a liberal approach to its rich cultural

traditions and diverse patterns;
Build a progressive society that will use modern science and

technology;
THEREFORE WE, the people

of Malaysia, pledge to focus
all our energy and efforts to achieve these goals based on the
following principles:
BELIEF IN GOD
LOYALTY TO KING AND COUNTRY
SUPREMACY OF THE CONSTITUTION
RULE OF LAW
COURTESY AND MORALITY
(Source: Department of Information, Ministry of Communications and Multimedia Malaysia
Issue 2020
© Ministry of Education Malaysia
All rights reserved. It is not permitted to reproduce any part of the article,
illustration and content of this book in any form and by any means whether
electronic, photocopying, mechanical, recording or any other means without
obtaining written permission from the Director, Educational Resources and
Technology Division , Ministry of Education Malaysia, Pesiaran Bukit Kiara,
Bukit Damansara, 50604 Federal Territory of Kuala Lumpur
AWARD
AWARD
ADVISOR
Puan Maznah binti Abu Bakar Director
Educational Resources and Technology Division
Tuan Haji Azman bin Adnan Director
Technical Training Education Division and
Vocational
Ab Aziz Bin Mamat deputy director of the Right
YBrs. Dr. Haji Zainal Rashid bin Kamaruddin Deputy Director of Production Sector
Textbook
EDITORIAL ADVISOR
Zurinah @ Rosmawati binti Rajab Chief Assistant Director of BSTP
(Program coordinator)
Rozita binti Rosli @ Phua Peng Lin Dr. Abdul Chief Assistant Director of BSTP
Rahman bin Mahamad Anuar bin Mohd Chief Assistant Director of BSTP
Som Shamsuri bin Omar Chief Assistant Director of BPLTV
Khairil bin Muhamad Chief Assistant Director of BPLTV
Shafar Norma Hazura binti Mohd BSTP Assistant Director
Zulkafli Rasidi bin Nordin @ Radin Mohd BSTP Assistant Director
Fisha Hafiz bin Abidin @ Syariza BSTP Assistant Director
binti Zainal Abidin Zaiton binti Mohd BSTP Assistant Director
Rashidi bin Ahmad Muhammad BSTP Assistant Director
Syafiq bin Mahfol Aiza Musfira binti Mozi BSTP Assistant Director
BSTP Assistant Director
Assistant Director of BPLTV
All parties involved directly or indirectly in completing this Vocational Subject Learning Module
(MPV).
CONTENTS
RUKUN STATE
AWARD
AUTHOR'S PANEL
CONTENTS
FOREWORD
INTRODUCTION
MODULE 6 ANIMATED ELEMENTS
6.1 Basics of Animation 2
6.2 2D Animation 16
6.3 Animasi karakter 2D 43
6.4 Animasi 3D 70
MODULE 7 MULTIMEDIA PRODUCT DEVELOPMENT
7.1 Project Requirements Analysis 148
7.2 Multimedia Product Design 172
7.3 Multimedia Product Development 205
7.4 Testing and Assessment 228
7.5 Resource Management and Distribution 243

FOREWORD
Assalamualaikum Warahmatullahi Wabarakatuh and Peaceful Greetings.
Thank God for the Standard Curriculum Learning Materials with His permission
Secondary School (KSSM) Vocational Subjects (MPV) Form 5 can
completed its publication.
In dealing with the direction and development of the world of education today, the Resource Division and
Educational Technology (BSTP), Malaysian Ministry of Education seeks to provide materials
this learning as a primary reference source document for MPV students and teachers
able to meet current needs in the field of vocational skills education.
This learning material is built based on the content of the Curriculum Standard Document and
Assessment (DSKP) to help students master knowledge and skills
which are related in addition to being able to give birth to people who are productive and balanced in terms of
intellectual, spiritual, emotional and physical. To realize this wish, this Learning Material
also serves as a guide for teachers in implementing teaching and learning (PdP)
effective.
BSTP greatly appreciates all the ideas and efforts that have been put together when publishing these
Learning Materials. Every successful education policy and program that supports the policy must be
implemented with strong understanding and cooperation from all parties, especially educators.
Hopefully this noble effort can achieve the expected objectives and goals. BSTP hopes that this module
can be an important source of reference and guidance to determine the main direction of education in
Malaysia.
Finally, BSTP takes this opportunity to say well done and all the best
Congratulations and many thanks to the writer panel, quality control panel, Education Office
District (PPD), State Department of Education (JPN), subject officers of the Education Division
and Vocational Technical Training (BPLTV), BSTP officers and also all parties who have
work together to make the publication of this MPV Learning Material a success.
Thank you.
Director
Malaysia Education Ministry
we
INTRODUCTION
This Teaching and Learning Material (PdP) was developed

based on the Curriculum and Assessment Standard Document (DSKP) Mata
Multimedia Production Vocational Lessons (MPV) aims to help teachers
plan and implement various teaching and learning strategies in
classroom effectively and efficiently. This PdP module is developed as
guides and teachers can plan their own or modify PdP strategies
according to the mastery level of students in their respective schools.
Teachers need to plan PdP according to Content Standards, Standards
Learning and Performance Standards by providing Teaching Aids
(BBM) for students to use for PdP activities found in the KSSM PdP Module
MPV Multimedia Production.
Therefore, it is expected that the wishes contained in the Production curriculum

Multimedia can be understood and implemented well by teachers with
using Multimedia Production PdP Materials. Planned PdP sessions
can turn off the planned learning objectives achieved to produce
students who have knowledge, skills, and have values and ethics
professionalism and subsequently be able to produce students who are able to generate ideas
creative and innovative, smart decision-making and competitive for
contribute to the development and progress of the country in multimedia aspects.
vii
MODULE 6:
ANIMATED ELEMENTS
1
MODULE 6.0
Standard 6.1 Basics of Animation
Content:
Standard 6.1.1 Explain the need for animation in
Learning: multimedia presentation.
6.1.2 Explain the concept of animation.
6.1.3 Distinguish types and techniques of animation:

(i) Traditional
(ii) Digital
6.1.4 Produce traditional flipbook animation.
Objective 1. State the need deep animation
Learning multimedia presentation.
2. Explain the concept of animation.
3. Comparing different types and techniques of animation
4. Produce traditional flipbook animation

themed.
Time: 6 jam
2
REFERENCE NOTES
6.1.1 Animation Requirements in Multimedia Presentations
In multimedia presentations, animation is one of the elements
able to increase the attractiveness of a multimedia product or software.
Animation refers to a visual display that is dynamic. Among the requirements
animation in multimedia presentation is
• Makes an object or text appear alive but is originally static.
• Being able to explain something that is difficult to convey more easily
and effective.
• Able to give emphasis to allow the audience to focus on the content
the content you want to convey.
6.1.2 Animation Concept
Animation simply refers to the method of giving an illusion
optical movement to a sequence of static images. Animation can also refer to a set
graphics that are displayed quickly in the form of a series of frames .
6.1.3 Types of Animation
a. Traditional Animation
ü Before the development of computer animation technology, all animation
Traditionally done using hands.
ü Each moment of animation requires around 20 frames.
ü For the production of animation for two minutes, an animator
requires around 2400 image sheets.
3
b. Digital Animation
Also known as computer animation.

ü Two types of digital animation, namely 2D and 3D animation.
ü 2D animation is animation that involves objects with
horizontal dimension (x-axis) and vertical dimension (y-axis). Example
software that can be used to create 2D animation is
Macromedia Flash, Swish Max, Toonz, Toon Boom Studio and others.
ü 3D animation is also animation that involves objects with

horizontal dimensions (x-axis), vertical dimensions (y-axis), and dimensions
depth (z-axis). Examples of software that can be used for
making 3D animation is MAYA, 3Ds Max, Light Wave, 3D Cinema
4D, Blender and others.
Animation techniques
Traditional Digital
Hand drawn animation Path animation (path animation)
Stop motion model animation Screen animation or object transitions
Animasi thaumatrope Animation of characters and icons
Morphing animation
4
Traditional Animation Techniques
• Hand Painted Animation (Handrawn)
Hand-drawn animation is the process of producing a sheet of images that show objects
in motion.
Figure 6.1.1: Hand drawing animation
• Stop Motion Model Animation
This animation uses models made of clay, puppets,

paper cut and others. The animator will move the model on
various different positions and every movement will be photographed.
5
Figure 6.1.2: Stop motion model animation
• Animasi Thaumatrope
Use a disk or card by placing two different pictures
on each side tied to a string. When the string is rotated quickly between
finger, two images appear to merge into one image.
Figure 6.1.3: Thaumatrope animation

Digital animation techniques
• Path animation (path animation)
It is an animation that is easy to learn and produce. Easy object
moved along the path set on the screen. Paths can
is a straight or curved line. Usually, moving objects
will not change to another object but it changes in terms of size and
shape.
6
Figure 6.1.4: Path animation (path animation)

• Screen animation or object transitions
Known as transition or transition which refers to the transition from one
presentation to another presentation. For example, the screen
flying from a certain direction or the screen getting blurry before being replaced
with a new presentation screen. Transitions can be placed on
entire screen or on selected objects.
Figure 6.1.5: Screen animation or object transition
7
• Animation of characters and icons
Character animation is animation of selected and capable characters

turn on an electronic presentation. Icon animation or animation
sprite involves changing an existing icon to another icon
when pressed by the user. This animation is widely used in
multimedia software development, internet, kiosk and so on.
Figure 6.1.6: Icon animation

• Morphing animation
Morphing animation is a process that allows the transition from one

pictures to other pictures smoothly. It also shows change
on size and shape. This animation uses special software that can
detect certain features in the image such as face, mouth, eyes, nose
etc. Then will match with the picture
next. Therefore, the main picture will slowly change into
new picture.
Figure 6.1.7: Morphing animation
8
6.1.4 Flipbook Traditional Animation Earnings
Flipbook or kineograph animation is a traditional animation technique

creates the illusion of movement by rapidly displaying a sequence of static images.
Flipbook animation can be produced by preparing a small book that
have several sheets of pages that contain images or text that
same but has a different position on each sheet to give the illusion
movement.
Traditional flipbook animation

Rajah 6.1.8: Flipbook
9
Steps to produce a traditional HAPPY BIRTHDAY flipbook animation
1. Divide the first A4 paper into 4 parts.

2. Cut out all four parts.
3. Repeat steps 1 and 2 for the second and third A4 paper (12 small pieces
A4 paper is produced)
4. Draw an initial sketch of the text you want to animate.
5. Open the LED tracing pad (LED tracing pad) and start tracing text after text.
10
6. Paste the same text repeatedly but in different positions-

difference.
7. Text that has been pressed repeatedly at various positions is ready for
animated by flipping the sheet quickly.
Reference source : https://www.youtube.com/watch?v=SU3zexN_h1I
11
ACTIVITY
MATERIALS AND EQUIPMENT
1. A4 paper
2. Brush 2B
3. Scissors / cutting tool
4. Cutting mat (Cutting mat)
5. Ruler
6. Extinguisher
7. Paper clip 8.
LED Tracing Pad (LED tracing pad)
TASK
- Students produce themed flipbook animations (ref

previous note)
- Students present their work in front of the teacher
and friends.
WORK STEPS (TASK 1)
1. Prepare three sheets of A4 paper of the same size to be used as a flipbook.
2. Draw an image based on the theme on each sheet of paper.
3. Gather each sheet of paper on which the image has been drawn in a row.
4. Move each sheet of paper quickly to get the animation
flipbook.
12
Figure 6.1.9: An example of an image sketch for flipbook animation
Source: https:// www.wikihow.com/ Make-a-Flipbook
13
TRAINING/ ASSESSMENT
1. State the correct animation technique whether traditional or digital animation for
Example animation below.
Animation Example Animation Techniques
Path animation (path animation)
Animasi thaumatrope
Stop motion model animation
Animation of characters and icons
2. Match the following animation techniques according to the correct characteristics.
Morphing animation Objects are moved along
predetermined route
on the screen.
Stop model animation Using a disc or card
motion by putting two
different pictures in each
side tied to a string.
Path animation (path Using special software
animation) which can detect the characteristics
certain in the picture.
Animasi thaumatrope Using that model
made of clay
or doll.
14
STUDENT ACHIEVEMENT REPORT
Student Name:
Year:
Class

Content:
Standard 6.1.1 Explain the need for animation in presentations
Learning: multimedia.
6.1.2 Explain the concept of animation.

6.1.3 Distinguish types and techniques of animation:
(i) Traditional
(ii) Digital
6.1.4 Produce traditional flipbook animation.
Achievement
Was Valued items Not yet Notes
Skilled
Skilled
State the need for animation

1
in multimedia presentations.
2 Explain the concept of animation.
Comparing different types and techniques

3
animation.
Produce traditional animation

4
themed flipbook .
DECISION
(ACHIEVED / NOT ACHIEVED)
DATE
Teacher name: Signature &

Date
Confirmed Signature &
by: Date
15
MODULE 6.2 A
Standard 6.2 2D Animation
content:
Standard 6.2.1 Explain the concept of frames and keyframes.

learning: 6.2.2 Identify the tool's function and basic features
used in 2D animation software.
6.2.3 Generate and color objects with
use the appropriate tools and features in
2D animation software.
6.2.4 Editing objects and text with
use appropriate tools and features.
Objective 1. State the concept of frames and keyframes in
Learning: 2D animation software.
2. List the tool's functions and basic features
used in 2D animation software
3. Generate and color objects with
use appropriate tools and features in
2D animation software
4. Produce edits on objects and text.
Time: 10 jam
16
REFERENCE NOTES
Concept of Frame, Keyframe and Blank Keyframe in Flash
Frames are components of the working Flash window

to determine the animation duration of an object. The more frames, the better
how long the object will be played/animated. Frames are marked with white boxes
with black lines in Flash.
Frames per second abbreviated as FPS is the number of frames played at any time,
just like in the video.
A keyframe is a key frame. Keyframes serve to determine when a

the object will appear in an animation. A keyframe has an object
or more. Keyframes are marked with black circles. Keyframes that don't
has an object known as Blank keyframe.
Blank keyframe is an empty key frame. Blank keyframe works for

placing one or more objects in the frame. Blank keyframe is marked
with a white circle with a black line.
2D Animation Producing Software

(Flash software)
Macromedia Flash MX is a software that can be applied in

various levels of multimedia authoring, especially interactive through the web. It is
Timeline -based software that can meet the needs of the software
multimedia authoring, graphics software and animation software. It is also capable
allowing interactive elements to be used easily and effectively.
17
This module provides several facilities to users, so that they can

learn the main aspects found in Macromedia Flash MX. On
At the end of this module, the user will be able to create an interactive presentation
easy.
Figure
5 6.2.1:
1
Flash MX interface
1. Menu bar (menu bar)

Contains control instructions and basic functions.
2. Toolbox
Contains work tools that have specific functions and roles.
It can be used by activating it. Each selected item can be specified in terms of
specifications or features in the options .
3. Timeline
It contains the number of numbers that represent each frame . It also contains layers for
work order. This Timeline area is used for the elements in the Flash application to be
arranged and their roles and instructions determined.
18
4. Stage (work stage)

Is an area or location to place the content of a presentation and display it to users. This
stage can be resized according to the needs of the performance to be developed.
5. Windows
Window for:
color mixer - determine the level of color mixing color swatches - component
color selection - selection of tools for the interface
users
answers – related information
Macromedia Flash MX –
actions action command options –
properties information about an option
work done
arrow
subselection
line
lasso
pen
text
oval
rectangle
pencil
brush
free transform
Fill transform
ink bottle
paint bucket
eyedropper eraser
hand zoom
stroke color fill color
Rajah 6.2.2: Toolbox
19
Here are the tools found in flash that are used to draw.
- Arrow Tool
The arrow tool icon is used to activate a line or object.

It is often used to modify the shape of a line or object as well
move it from one location to another.
- Line Tool
To build an interesting line , you can use the line icon

tools. The constructed line can be straight, curved, slanted and
so on.
Note: modify the color , The thickness and shape of the line can be
This is done by making a selection in the stroke panel .
- Oval Tool
Oval tool is used to build circular or oval shaped objects. Form

The drawn object will consist of fill and stroke based
color selection in the color toolbox section.
- Rectangle Tool
The Rectangle tool is used to build rectangular objects
have a sharp or semi-rounded corner with
Enter the radius value for Round Rectangles Radius in the options section
toolbox . Like the oval tool, the shape of the drawn object will consist of fill
and also strokes based on color selection in the color toolbox section .
- Pen Tool
The pen tool icon is often used to build straight lines as well
curved This icon has the same function as the line tool but it
20
has a point (dot) that allows the line to be changed in shape
after it is ready to be built. If the lines built form an object
which has a closed (continuous) line, the object will
has a color according to the color set on the fill box in the Toolbox
or opened in the fill panel .
- Pencil Tool
The tooltip icon is often used to construct lines or objects
as if produced through a pencil sketch. This tool allows you to draw
freely manually. The color of the line or object formed
is based on the choice of stroke color .
The tool pencil icon has 3 modes in the option toolbox section :
• Straighten – the drawn line will be straightened as much as possible
Automatically.
• Smooth - the drawn line will be automatically smoothed.
• Ink - the drawn lines will be slightly modified and smoothed
automatic.
- Lasso Tool
The lasso tool icon is used to build a specific selection on the area
an object with a more independent rate. This icon has 2 types
against:
• Magic Wand – suitable for use to build selected areas
based on color uniformity (usually used for bitmap images)
• Polygon Mode - suitable for building selected areas
polygonal or square.
- Eraser Tool
The Eraser Tool is used to delete certain parts of an object
not used yet . Icon eraser tool has 5 modes on the part
21
Option Toolbox :
• Erase Normal – enables n lines that form objects and colors
which meets the object is deleted if it is in the same layer .
• Erase Fill – enables only the interior of an object
deleted.
• Erase Lines – enables only the lines that make up the object
just delete it.
• Erase Selected Fills – enables only selected parts or
activated only deleted.
• Erase Inside – enables the entire interior of the object
surrounded by closed lines only deleted.
Drawing an image in Flash involves two main elements

strokes and fills. You can draw a line that only involves strokes or
can also draw objects without a stroke or both.
Note: Stroke
Fill
Before drawing and coloring , It is important to understand that

draw , coloring and modifying objects will affect the object
others in the same layer if the object is placed in the same way
layered.
To avoid this happening, make sure every object has been drawn
combined first (Modify > Group @ Ctrl+G).
And if you want to modify the object that has been merged, the object
needs to be separated (Modify > Ungroup @ Ctrl+Shift+G or Modify > Break @ Ctrl+ B .
22
ACTIVITY: MAKING BASIC SETTINGS IN FLASH

1. Computer
2. Macromedia Flash software
TASK
Students make basic settings in Macromedia Flash.
23
Activity 1: Size and Color of the Stage Background
Steps:
1. Open the Macromedia Flash MX software by clicking on the button
Start > Program > Macromedia > Macromedia Flash MX.
2. A Macromedia Flash MX interface display appears (as shown in Figure 6.2.1).
3. Click on the properties window.
4. A document properties window will appear.
5. Select the size tab and set dimensions at 800 px width and
600 px height.
6. Next, select the background color tab to determine the background color selection
stage (green- #00FFCC).
24
Activity 2: Naming Scenes And Layers
Steps:
1. Click the Modify menu on the menu bar and select scene
2. The scene window appears and double click on "scene 1" then type
the new scene name is “text”.
3. Repeat step 1 with the layer option to display the layer window
properties and on the Name tab type "menu" to name it
layer.
25
Activity 3: Add a scene
Steps:
1. You are still in the "learnflash" scene "text" file.

2. Click the Insert menu on the menu bar and select Scene to add a new scene .
3. Name the new scene as "graphic".
4. Name layer 1 as “graphics1”.
5. The timeline looks like the following.
nama layer
exposure of scene names
26
Activity 4: Save the work
Steps:
1. You are still in the work scene in activities 1 and 2.
2. Click the File menu > save as to save your work.
3. Save your work with the file name "learnflash".
4. Work results for Flash applications can be saved in 2 conditions:

• Flash MX Document(*.fla)
In this situation the presentation that is built can still be modified.
• Flash Movie(*.swf)
27
In this case, a ready-made presentation for

presented in movie form. It can no longer be modified.
The step is to select the menu File > Export Movie and enter the file name.
ACTIVITY: PRODUCING AND COLORING OBJECTS
1. Computer
2. Macromedia Flash software
TASK
Students produce and color basic objects using tools

in Flash.
28
Activity 1: Rectangular Objects
Steps:
1. You work with the "learnflash" file in the "graphics" scene and layers
"graph1".
2. Type a text "GRAPHIC" on the stage to be used as a title
performance in this scene and adjust accordingly.
3. Add a new layer and name it "square".
Activate the Rectangle Tool pada Toolbox.
4. Click on the Properties window.
5. The Rectangle Tool Properties window is displayed and adjust as shown in the figure
below by clicking on each required tab.
Stroke Color Fill Color Stroke Height Stroke Style
6. Click and drag the mouse to the right on the stage to get the size of the face
four that fit.
29
Activity 2 : Round Objects
Steps:
1. You are still in the "learning flash" file and the "graphics" scene .
2. Add a new layer to the timeline and name it “round”.
3. Activate the Oval Tool on the Toolbox (refer to Figure 6.2.2) and adjust accordingly
requirements on the properties window as in Task 1, activity 2.
4. Click and drag the cursor on the stage to create a circle.
Activity 3: Triangle Objects
Steps:
1. You are still in the "learning flash" scene "graphics" file.
2. Add a new layer and name it as "triangle".
3. Activate the Line Tool on the Toolbox (refer to Figure 6.2.2) adjust accordingly
requirements on the properties window as in Task 1, activity 2.
4. Before building a triangle using the line tool command, make sure you
select the menu View > snap to objects on the menu bar to ensure each
the line will continue.
30
5. Build three lines that connect to form a triangle.
31
Activity 4 : Oval object

Steps:
1. You are still in the "learning flash" file and the "graphics" scene .
2. Add a new layer and name it "oval".
3. Activate the Rectangle Tool on the Toolbox (refer to activity diagram 2) and create one
more square on the stage.
4. Adjust as appropriate on the properties window.
5. Build a square on the stage.
6. Activate the Arrow Tool in the Toolbox .

7. Move the cursor to the right side of the square until one appears
curved sign k with the cursor.
8. Click on the edge and drag to the right to create a border
curved.
9. With the Arrow Tool still active, repeat steps 7 and 8 for the edge line
left side.
32
10. Save your work.

Activity 5: Modify the Color of the Object
Steps:
1. You are still in the "learnflash" file and the "graphics" scene .
2. Activate the "square" layer .
3. Click on the Stroke Color tab on the Toolbox (refer to unit diagram 1) and select a color
yellow.
4. Click on the Fill Color tab on the Toolbox and select purple.
stroke color
fill color
33
REFERENCE NOTES
Alat teks ( Text Tool )

The text tool ( Text Tool ) is one of the tools used to enter text
in Flash, It allows us to specify the characters that we want to display
according to the choice of font type, size, alignment, style and features.
Tool this allows you to add your stage text. You start
with a click + drag to make rectangle size selection. When

release the click the default text (default text) will be displayed and the text editor window
will appear. Hover over other text shapes, highlighting box borders and text
will be the active text.
34
ACTIVITY: ENTERING AND EDITING TEXT
1. Computer with Macromedia Flash software.
TASK
Students enter and edit text using the Text Tool and Properties.
35
Activity 1: Entering Text
Steps:
1. Open the "learnflash" file by selecting the menu File > Open. Next select the file
and click the open button.
2. Activate frame 1 on the "menu" layer .
frame
nama layer
3. Activate Text Tool + A pada Toolbox (Figure 6.2.2: Toolbox) dan cursor
visible on stage.
4. Click once on the stage and type the text "FLASH MX " and click again on
every stage room.
36
5. Select the Insert menu on the menu bar and select Layer to add a new layer
on the Timeline and name it "text1".
6. Activate frame 1 on the "text1" layer .
7. Repeat steps 2, 3, 4 and type "TEXT"
8. Add several new layers for the text as below:

• layer name "text2" type "GRAPHICS"
• layer name "text3" type "ANIMATION"
• layer name "text4" type "AUDIO"
• layer name "teks5" type "VIDEO"
9. The timeline will look like the following:
37
10. The display on the stage is like the diagram below.
11. Save the results of your work in the file "belajarflash".
38
Activity 2: Text Editing
Steps:
1. You are still working in the file "learnflash" scene "text".
2. Click frame 1 on the “ layer ” menu ” to select it on the Timeline.
3. Activate the Arrow Tool pada Toolbox Flash MX.

4. Click and move the text "FLASH MX" on the stage to the appropriate position
by using the mouse or arrow keys on the board
key.
5. Open the Properties window at the bottom of the stage .
6. A Properties window is displayed.
Font type Font size Text color Text line
7. Click on the “ A “ for font type selection
and select the font “ Arial Black “.
39
8. Click on the text color tab for color options and choose red or another color
suitable color.
9. Next select the font size tab for the font size option (font ) and select size 28 or size
other appropriate.
10. On the alignment tab, select center to align the text in the middle of the space.
11. Repeat steps 2 to 10 for the text below:

• layer “text1” for text “TEXT”
• layer “text2” for text “GRAPHIC”
• layer “text3” for text “ANIMATION”
• layer “text4” for text “AUDIO”
• layer “text5” for text “VIDEO”
12. The following is an example of the resulting text after being edited in terms of font type
(font), font size (font), font color (font), alignment and position.
40
13. Save your work in the same file.
41
Student Name:
Year:
Class

Content:
Standard 6.2.1 Explain the concept of frames and keyframes.
Learning: 6.2.2 Identify the functions of basic tools and features used
in 2D animation software.
6.2.3 Generate and color objects with
using the appropriate tools and features in 2D animation
software.
6.2.4 Make edits to objects and text using appropriate
tools and features.
Achievement
Skilled
Skilled
State the concept of frame and keyframe in 2D
1
animation software.
List the functions of basic tools and features

2 used in 2D animation software Produce and
color objects using
appropriate tools and features in 2D animation
software
3
Produces edits to DATE RESULT objects and text

4

Date
Verified by: Signature &
Date
42
MODULE 6.3 (A)

content:
Standard 6.3.1 Explain the function and character of the avatar in
learning: multimedia products.
6.3.2 Sketching the avatar character design in
Objective 1. Explain the function and character of the avatar in

Learning multimedia products.
2. Produce a character sketch
based on the study of idea processing.
3. Make a turn around character painting
based on character traits.
4. Draw a character using

animation software.
Time: 8 jam
43
REFERENCE NOTES
6.3.1 Functions and Characters of Avatars in Multimedia Products
Each character has certain personality traits and emotions that can be portrayed
in an animation.
Figure 6.3.1 : An example of an avatar character
Nowadays, character roles known as avatars are often used in applications

multimedia games. This avatar character is also used in various applications
other multimedia to revive the atmosphere of the show like that
found in the iThink learning software application.
Figure 6.3.2: One of the avatar characters in the iThink learning software
44
Character Design
The design of various characters should be produced based on the storyline of the animation work
which is developed. Interesting characters will be selected for the clean-up drawing process.
The perfection of the character design will be reviewed to ensure the character
which is drawn can describe the characteristics of the character that wants to be developed.
Figure 6.3.3: The process of creating an avatar character work
After developing the chosen character, the artist will draw the character's turn around
for the staging process. This turn around painting depicts the position of the character
overall from the direction of front, side and back view.
Figure 6.3.4: Turn around drawing
45
Composition Ratio
Each character produced will be drawn at the same horizontal line level
to ensure the continuity of the height ratio for each character or as well
objects in the developed animation.
Figure 6.3.5: Character composition ratio in one animation
Illustrating and Coloring Characters
The character illustration will be generated when the selected character sketch has been updated
so that the line drawing of the character looks more clear and understandable.
Figure 6.3.6: An example of a character illustration
46
ACTIVITY
1. Paper and stationery
2. Graphics software (if needed)
TASK
Think of a character that is suitable for use in the application
learning. Generate a character sketch of the character according to
your creativity.
WORKING STEPS
1. Make a character and character field study that suits the application
learning.
2. Make a sketch of several characters and choose the best character.
3. Generate a turn around painting for the character and the composition ratio
if involving various characters and objects.
4. Transfer the sketch into digital form using software
animation.
5. Color the selected character sketch according to the character's suitability.
47
6.3.2 Sketching Avatar Character Designs in 2D Animation Software
1. Students identify which tools

Selection tool
used. Subselection tool
Free Transform tool
Lasso tool
Pen tool
Text tool
Line Tool
Oval Tool
Brush Tool
Ink Tool
Paint Bucket Tool
Eye dropper Tool
Eraser Tool
Hand Tool
Zoom Tool
Stroke Tool
Paint Bucket Tool
2. Pupils prepare a sketch of the 'chicky' character like the diagram on the side.
48
Steps to produce Chicky's body parts.
1. Double click on layer 1, name it body.

2. On frame 1, draw a oval shape using the oval tool or pen tool.
3. Change the shape using the selection tool.
Steps produce Chicky's wing parts.
4. Click the insert menu, select layer.
5. Double click on layer 2, name it wings.

6. On frame 1, draw a triangle shape using the polygon tool or pen tool.
7. Change the shape using the selection tool.
49
Steps produce Chicky's beak.
9. Double click on layer 3, name it as beak.

10. On frame 1, draw a triangle shape using the polygon tool or line tool.
11. Click fill color, choose yellow to color the beak.
Steps to produce the Chicky eye part.
13. Double click on layer 4, name it as eyes.

14. On frame 1, draw a round shape using the oval tool.
50
Student Name:
Year:
Class:
Content:
Standard 6.3.1 Explain the function and character of avatars in production
Learning: Multimedia.
6.3.2 Sketching character designs in 2D animation software.
Achievement Notes
No. Items assessed Not yet

Skilled
Skilled
Explain the function and character of the avatar

1
in multimedia products.
Produce character sketches

2
based on the study of idea processing.
Make a turn around painting
3
character based on character traits.
Draw a character with

4
using animation software.
DECISION
DATE

Date

by: Date
51
MODULE 6.3 (B)
content:
Standard 6.3.3 Determine key poses for the avatar character.

learning: 6.3.4 Assess the smoothness of movement in between
avatar character.
Objective 1. Sketch the movements of key poses characters.

learning 2. Sketch the character's movements in between.
3. Produce key poses and in between characters
in animation software.
4. Assess the smoothness of the avatar character's movement.
Time: 16 jam
52
REFERENCE NOTES
6.3.3 Determining Key Poses for Avatar Characters
Key poses dan In between
Key poses refer to the main movements that should be highlighted

in an animated scene . Without this main movement, the storyline or action is
shown will appear unrealistic.
In between basically refers to the frames that connect

key poses with other key poses
In between
Key poses
Figure 6.3.7 : Key pose and in between on the running Pin-ping animation.
The results are as follows:
Key Pose:
1. Left foot steps forward.
2. The right foot points forward stepping over the left foot.
In-between:
1. Movement of the step of the right foot in line with the left foot.
2. Movement of the right foot following the left foot towards the front
53
6.3.4 Evaluating Movement in between Avatar Characters
Steps produce character movement key poses
1. Activate the wing layer , right click the mouse, select convert to symbol
2. Click on the graphic, type the name 'wing'. Click the OK button.
3. Click the transform tool, move the center tip to the upper end of the wing as shown in the diagram
down.
54
4. Activate at frame 20 for the body, beak, eye layers . Click the Insert menu. Select
frame.
5. Click frame 10 on the wing layer , right click the mouse, select keyframe.
6. Click the transform tool, move the wings up by 45 ÿ.
9. Press Enter to play the movement.
55
Steps produce movement in between characters.
14. Press Enter to play the move.
56
Evaluation of animation movements is made after key-poses and in-between movements

generated before the full animation is generated. An analysis of this movement needs to be made
every time there is a movement change to ensure every movement
is accurate and smooth.
The animation production process is repeated to complete something

scene. The construction of character movement animation needs to take into account the steps-
steps that have been shown before.
Play the animation again and observe the movement and correct it for movement
looks smooth.
57
Student Name:
Year:
Class:
Content:
Standard 6.3.3 Determine character movements (key poses).
Learning: 6.3.4 Assess the smoothness of character movement (in between).
Achievement Notes
No. Items assessed Not yet

Skilled
Skilled
Sketching key character movements

1
poses.
Sketch the character's movements

2
between.
Generate key poses and in

3 between characters in the software
animation.
Assess the smoothness of movement

4
avatar character.
DECISION
DATE

Date

by: Date
58
MODULE 6.3 (C)
content:
Standard 6.3.5 Generate avatar character animation.

learning: 6.3.6 Generate the final animation by creating
rendering process using 2D software.
Objective 1. Produce a simple avatar character animation.

learning 2. Identify the final animation file format.
3. Generate the final animation through the rendering process.
Time: 8 jam
59
6.3.5 Generating Avatar Character Animations
For example we want to produce a bee that is moving its wings.
1. Create a new layer and name it as "BEE BODY".

2. Click the Oval Tool and draw the body of the bee on the stage (work stage).
3. Click the Line Tool to create a vertical line (stripes of the bee's body).
4. Click the Paint Bucket Tool to enter black and yellow colors for each
bee body stripes.
60
5. Click the Oval Tool to make a bee face. Use the Paint Bucket Tool to
fill the yellow color into the face of the bee.

6. Click the Oval Tool to make the bee's eyes and pupils.
7. Click the Pencil Tool to shape the bee's tentacles and the bee's mouth.
8. Click the Line Tool to form the bee sting section in the section
back.
9. Click the BEE BODY layer . Click Insert>Convert to Symbol. Window Convert to
The symbol will be displayed.
Name : Symbol 1
Behaviour : Movie
Clip
Click OK
61
Click the small circle here to go to the next

section
This section indicates you have reached

the next section
10.Click Insert>Layer and name the layer as “LEFT WING”.
11. Click the Oval Tool to form the left wing of the bee.
12.Click Insert>Layer and name the layer as “RIGHT WING”.
13. Click the Oval Tool to form the bee's right wing.
62
14.Click the RIGHT WING layer and using the Free Transform Tool,
move the right wing slanting to the right at the top of the wing.
15. Click the BEE BODY layer , click the 5th frame > click Insert> select Keyframe. Click the frame to
10>click Insert>select Keyframe.
16. To move the right wing, click the RIGHT WING layer , click the 5th frame , click
Free Transform Tool and reduce the width of the bee's wings. Click on the th frame
1>right click the mouse>Copy Frame. Click on the 10th frame >right click the mouse>Paste
Frame.
63
17.To move the left wing, click the LEFT WING layer , click the 5th frame , click Free
Transform Tool and reduce the width of the bee's wings. Click on the 1st frame >right click
mouse>Copy Frame. Click on the 10th frame >right click the mouse>Paste Frame.
18. Test your file by clicking Control>Test Movie/(Ctrl+Enter). Save your file as
performance.
64
6.3.6 Produce the Final Animation by Creating a Rendering Process
For a work to be presented in a complete multimedia form,

it should be generated in .swf format , .exe or .html.
Generated work in .swf format , .exe and .html cannot be modified.
The .swf and .html formats require Flash Player found in Flash MX for
play it while the .exe format does not require Flash Player and you can
play it on any computer.
You can view your presentation in .swf or .exe format by searching

locate the file via Windows Explore or My Computer.
Steps to generate the final animation file
1. Select File > Publish Settings to create the final file settings.
2. The Publish Setting window appears and complete as follows. Please do
options on:
• Flash (swf) for .swf format
3. Click Publish > OK.
65
TRAINING / ASSESSMENT
1. By using the knowledge and skills learned, produce

an avatar character to be used in the tourism kiosk application.
2. Sketch the character and state its characteristics.
66
Student Name:
Year:
Class:
Content
Standard 6.3.5 Generate avatar character animation.
Learning: 6.3.6 Generate the final animation by creating a process
rendering using 2D software.
Achievement Notes
Was Valued items Not yet
Skilled
Skilled
Generate avatar character animations

1
complete.
Identify the final file format
2
animation.
Generate the final animation via

3
rendering process.
DECISION
DATE

Date
Date
67
ACHIEVEMENT STANDARD DECISIONS
Student Name:
Year:
Class :
Module: Animation Elements
Content: 6.2 2D Animation
6.3 Animasi Karakter 2D
Achievement Standards Skilled
Level Yes, not yet

Interpretation
Mastery
State the need for deep animation

1
multimedia presentation.
Explain the concept of movement based on

2
flipbook animation earnings .
Produces object and text animations

3 using movement concepts and techniques
basic movement, morphing and masking.
Analyze the movement of object animations and

4 produced text and make connections
suggested avatar character movements.
Evaluate key poses and in between characters
avatar as well as making improvements

5
character movement for the animation
generated rationally.
68
Achievement Standards Skilled

Level Yes, not yet
Interpretation
Mastery
Generate 2D animations of avatar characters
by applying the concept of movement
and basic animation techniques through the process
6
animation rendering using
2D animation software ethically, systematically,
meaningful and creative.
Decision Level

Date
Date
69
MODULE 6.4A
Standard 6.4 Animation 3D
content:
Standard 6.4.1 Explain the need for 3D animation in the product

learning: multimedia.
6.4.2 Identify the tool's function and basic features

used in 3D animation software.
6.4.3 Lists the steps to import 3D objects
which has been produced.
6.4.4 Determine the key pose of the 3D object.
Objective 1. State the need for 3D animation in the product

Learning multimedia.
2. Identify the interface, menu, toolbox and

control panel in 3D software.
3. Know the function of the features contained in it
panel toolbar main, tool dan toolbar status.
4. List the steps to import 3D objects
which has been produced.
5. Identify key poses of 3D objects in something

designed scene .
Time: 6 jam
70
REFERENCE NOTES
6.4.1 EXPLAINING THE NEED FOR 3D ANIMATION IN MULTIMEDIA PRODUCTS.
Among the requirements of 3D animation in multimedia products are:

• Provide a very enjoyable learning environment.
• Attract someone's interest and attention in the teaching process and
learning.
• Cartoons, commercials, movies and music video clips supported with 3D animation
more interesting.
• Provide simulation training for medical practitioners to perform

surgery in a dynamic and realistic visual form.
• Provide simulation training to soldiers and pilots to perform
risky and dangerous tasks.
71
6.4.2 Identify the Functions of Tools and Basic Features Used in Software
Animasi 3d
Interface
Generally when 3D animation software is opened, it will display

interface as follows.
Main Menu Bar Main Toolbar
Command Panel
(Command Panel)
Viewport
Timeline
Reactor Tool
Animation Control
Viewport
Navigation
Control
Figure 6.4.1: 3D Studio Max interface.
72
Main Menu Bar
This Main Menu Bar provides instructions for opening new files,
saving and opening existing files, editing and so on.
The diagram below shows an example of the Main Menu Bar ( Main Menu Bar ) which
available in 3D software.
Figure 6.4.2: Main Menu Bar.
Main Toolbar
Toolbar is a very important tool for 3D software, because the user

access editing commands for objects easily. The following is
toolbar icon found in this software.
Window/ Select Reference

Unlink Crossing And Coordinate Select And
Redo Selection Select By
Selection Name toggle Rotate System Manipulate
Filter
Undo
Select Bind to Select Rectangular Select Select And Pivot

and Link Space Object Selection And Scale Selection
Wrap Region Move
Percent Named
Snap Selection Mirror Layer Schematic Render
Quick
Snap Toggle Set Selected Manager View Scene Render
Toggle
Angle Spinner Selection Align Curve Material Render

Snap Snap Set Flyout Editor Editor Type
Toggle Toggle Pulldown
Figure 6.4.3: Toolbar.

These icons can be added or removed from the Toolbar as needed.
73
Layout
1. Generally when the 3D software is opened, it will display four squares
a separate one called a Viewport.
2. This viewport is divided into Top Viewport, Front Viewport, Left Viewport and
Perspective Viewport.
Figure 6.4.4: Viewport view
3. This viewport can be displayed in various arrangements according to convenience

users.
To customize the viewport display, click the menu Customize > Viewport
Configuration. A Viewport Configuration dialog box will be displayed.
74
Figure 6.4.5: Layout tab in the Viewport Configuration box.
4. Click on the layout tab, select the preferred scene type and click OK.
Panel Arahan ( Command Panel )
To make an object, we need to use the tools available
on the Command Panel as in the diagram below.
Create Hierarchy Display
Modify Motion Utility
Figure 6.4.6: Command Panel.
Create Panel
Create Panel
Geometry Systems
Light Helper
Shape
Camera Space Wrap
Rajah 6.4.7: Create Panel.
75
On the Create tab there are several tools commonly used to build
object.
Geometry Tool
In this option, the user is given several options of tools to produce
basic three-dimensional geometric shapes for standard primitive objects such as boxes , spheres
(Sphere), cone (Cone), cylinder (Cylinder), tube (tube), torus (Torus) and pyramid
(Pyramid).
Geometry Tool
Tool Geometry option
Rajah 6.4.8: Geometry Tool.
Shape Tool
In this option, the user is given a number of tool options to create a look
two dimensions formed using Spline objects such as lines , faces
four (Rectangle), circle (Circle), ellipse (Ellipse), arc (Arc), two circles
(Donut), polygon (NGon), star (Star), text (Text), spring (Helix) or fractional objects
rectangle (Section).
76
Shape Tool
Shape Tool Options
Rajah 6.4.9: Shape Tool.
Generate a Sphere using the Geometry Tool
1. Activate the Create panel in the Command Panel and click Geometry.
2. In the Drop Down menu, select Standard Primitives.
3. Click on the Sphere button. The mouse pointer changes to

cross hair shape .
4. In the middle of the Top Viewport square, click and drag the mouse down then
let go. A sphere is formed. The size of the sphere we want to form is up to us
to user.
77
Figure 6.4.10: Producing a sphere using the Geometry Tool.
5. At the bottom of the Command Panel , click Modify Panel listed
details regarding the sphere that has been formed. Users can
change the items of the model formed here.
6. Type a name for the generated object. Generally 3D software will
give the name of the object formed as a sphere.
7. Change the radius (Radius) to 50 and the segment to 32. The resulting object
grow bigger
8. Click on the Zoom Extents All button on the right side of the section to set
object position in the middle of all viewports like figure 6.4.11.
78
zoom item
Extents All
Figure 6.4.11: Zoom Extents All button.
9. Save the file by naming it sphere.max
79
6.4.3 Lists Steps for Importing 3D Objects That Have Been Produced
Opening a New File
1. Click on the File menu > New…
2. A dialog box appears that gives us the following options:
Figure 6.4.12: New Scene dialog box.
a. Keep Objects and Hierachy

This command is used to open a new file but with
maintain the existing objects and layout of the file
previously.
b. Keep Objects
This command is used to open a new file but with
keep the objects only without the existing layout on the file
previously.
c. New All
This command is used to open a new file without any objects

and everything is according to the default setting.
3. Select one of the options and click OK.
80
Importing 3D Objects that have been generated

1. Click on the File menu > Open…
2. A dialog box appears as follows:
Figure 6.4.13 Open File dialog box.
3. Select the file you want to open (has a .max extension) and click the Open button.
4. The desired file will be opened in the scene.
81
6.4.4 Determining Key Poses for 3D Objects
Key Poses
Key poses refer to the main movements that should be highlighted
in a 3D animated scene . Without this main movement, storyline or action
shown will appear unrealistic.
1 3
Figure 6.4.14: Three key poses.
In Figure 6.4.14, we can see three key poses in the ball bounce scene . Key
In the first pose , the ball is on a flat surface. Second key pose ,
the state of the ball is at its highest peak and in the third key poses , the state
the ball on landing and touching the flat surface again.
This is an example of the simplest key poses found in a scene

ball bounce. If the movement process is more complex, then of course more
many key poses that the animator needs to think about.
82
In between
In between basically refers to the frame that connects the key poses
with other key poses .
In between
1 3
Figure 6.4.15: Movement In between.
In Figure 6.4.15, we can see In between that exists between key poses one
with key poses two and key poses two with key poses three. When key poses
done well and the fractions are properly aligned, the animator will
can produce realistic animations. In between is perfecting again
the movement that occurs between the key poses . This movement in between is possible
generated using the transformation feature:
• Translation
• Rotation
• Scaling (Scaling)
83
ACTIVITY
1. 3D software
TASK
Students produce works illustrating themed 3D objects using

3D software as appropriate.
WORKING STEPS
1. Pupils produce 3D objects using 3D software.
84
1. State two animation requirements:
________________________________________________________________________________
________________________________________________________________________________
________________________________________________________________________________
________________________________________________________________________________
2. Name the icons labeled below:
85
3. Name the viewport space in the figure below:
4. Sketch key poses for an object.
86
Student Name:
Year:
Class

Content:
Standard 6.4.1 Explain the need for 3D animation in the product
Learning: multimedia.
6.4.2 Identify the functions of basic tools and features used in 3D animation
software.
6.4.3 Lists the steps to import 3D objects that have been produced.
6.4.4 Determine the key pose of the 3D object.
Achievement
Skilled
Skilled
State the need for 3D animation in multimedia
1
products.
Identify interfaces, menus, toolboxes

2 and control panels in 3D software.
Know the functions of the features contained

3 in the toolbar panel
main, tool and status toolbar .
Lists the steps to import 3D
4 objects that have been produced.
Identify key poses of 3D objects in a designed

5
scene .
DECISION
DATE

Date
Date
87
MODULE 6.4B

content:
Learning 6.4.5 Generate in between movements using the transformation

standards: feature: (i)
Translation
(ii) Rotate
(iii) Scale
Objectives: 1. Generates movement in between 3D objects using the

translation transformation feature (Translation), rotation
feature (Rotate) and scaling feature (Scale).
Time: 3 jam
88
REFERENCE NOTES
6.4.5 Generating In Between Movements Using Features

Translation, Rotate and Scaling Transformations .
Transformation in 3D animation is a process of creating object movement,

change in point of view in a space and distance or
object size change according to three main planes, namely X-axis, Y-axis and
WITH.
For example as in the diagram below, the position of object A with

the original coordinates (x,y,z) have changed the distance to the new position (x1,y1,z1)
through a translational transformation process along the Z-axis.
Figure 6.4.15: Translational transformation
In a 3D environment, each object has its own coordinate value. Through

this coordinate value a person who builds a 3D object knows the position
these objects in three-dimensional space. These coordinate values are what
will be changed to produce movement or change in the 3D object
by using the desired transformation feature.
89
Diagram 6.4.16: Translation transformation process of object A
There are three basic types of transformations that can be applied to 3D objects:
Translation
(Translation)
Round
Transformasi 3D
(Rotation)
Scaling
(Scaling)
Translation
Translation transformation is the process of moving an object from one position to another
another position in the 3D plane.
90
Figure 6.4.17: Object Translation.
Rotation
3D rotation is the process of rotating an object according to a rotation angle in a three-dimensional plane
dimensions whether rotation on the X-axis, Y-axis or Z-axis.
Spin on the X-axis Rotation on Y-axis Rotation on the Z-axis

Figure 6.4.18: Rotation transformation process.
Scaling (Scaling)
Scaling is the process of changing the size of a 3D object.
Figure 6.4.19: Object Scaling.
91
These three types of transformations are basic transformations that can be used
on 3D objects. In a 3D animation software, a transformation feature is provided
to make it easier for animators to produce object movement animations and
more accurate camera movement animations that look more realistic.
For example, in the animation software 3D Studio Max, tools such as Select and
Move, Select and Rotate and Select and Scale are available on the main toolbar
to apply the transformation to the constructed 3D object.
Select and Rotate
Select and Move Select and Scale
Figure 6.4.20: Transform tool.

To set transformation values in more detail, the Transform Toolbox feature
can also be used in 3D Studio Max by clicking the menu Edit> select
Transform Toolbox.
Figure 6.4.21: Transform Toolbox feature for rotation transformation
92
Animation of movement between 3D objects using transformation features.
The working principle of in-between movement animation is to build key poses
main 3D object starting from the initial movement to the final movement such as
in the figure below.
In between Key pose 2
Key pose 1 In between
Key pose 3
Figure 6.4.22: Example of movement in between 3D objects.
While the frame between the key poses will be formed automatically at
along the animation path. If in the animation path there is
some movements that are different in shape and appearance then the keyframe will
placed. It is in these keyframes that transformation features such as translation, rotation and
Scaling is done to make the animation look more realistic.
Generates movement animations between 3D objects using features

transformation
1. Reopen the file mejateko.max.

2. Activate Left Viewport.
3. Click the File menu > select Merge.... Click on the Merge menu...
4. A Merge File dialog box is displayed and select the 'sphere.max' file that has been
created before. Click the Open button.

5. The Merge-sphere.max dialog box is displayed. Activate the sphere object from the list
option and click the OK button.
93
Directly the sphere object is in the middle of the viewport as shown in the figure
down.
Figure 6.4.23: Sphere object left view.
6. Activate the sphere object and click the Select and Scale tool on the Main Toolbar.
7. Click the mouse and drag the mouse towards the inside of the sphere object to shrink it
the size.
Figure 6.4.24: The reduced sphere object.
8. In the Left Viewport, place the planet object slightly upwards

face the teapot located on the table using the Move tool.
See figure 6.4.24
94
Diagram 6.4.24: The sphere object is in a new position.
7. On the Animation Control bar click on the Time Configuration button

shown in the figure below.
Figure 6.4.25: Time Configuration button.
8. A Time Configuration dialog box is displayed. In the Animation section

Enter the number 0 in the Start Time field and the number 100 in the End Time field. This
will set your animation path to 100 frames. Click OK to
closes the dialog box.
Rajah 6.4.26: Kotak Time Configuration.
95
9. Activate the sphere object.
10. On the Animation Control bar, click the Auto Key button.
11.Using the Time Slider, click the right arrow to move
to frame 50. You can also directly type the number 50 into the box
Current Time.
Rajah 6.4.26: Time Slider.
Current Time
Figure 6.4.27: Auto Key button and Current Time box.
12.Click the Move Tool icon and activate Front Viewport. Move the sphere object
until it hit the top of the teapot on the table. See the diagram below.
Figure 6.4.28: Movement of the sphere object.

96
13.Using the Time Slider click the right arrow to move to

frame 70 or directly type the number 70 into the Current Time box.
14.Move the teapot object in the form of rotation by using Rotate

Tool on the z-axis and move it slightly forward using Move
Tool.
As for the sphere object , move it slightly upwards. See the diagram below.
Figure 6.4.29: The movement of the teapot.
15.Using the Time Slider click the right arrow to move to

frame 100 or directly typing the number 100 into the Current Time box.
16.Move the sphere object far to the right. And also move the teapot forward
in original condition. See the diagram below.
97
Figure 6.4.30: Movement of 3D sphere and teapot objects.
Try playing the animation you've created by moving the Time Slider
or the play button on the Animation Controller bar.
Play
Go to Start Go to End
Previous Frame Next Frame
Figure Figure 6.4.31: Button Animation Controller.
17.To edit the animation, activate the object

sphere.
18. Klik panel Motion pada Command Panel.
19. Click on the Trajectories button.

Figure 6.4.32: Trajectories button.
98
20. In the Left viewport, we will see the movement path of the sphere object
in our animation as shown below.
Figure 6.4.33: Movement path of the sphere object.

21. You can edit the movement and position of the object in the animation
by moving the keyframes on the path and
change the position of the object.
22. Save your 'animasimejateko.max' file.
99
ACTIVITY
1. Computer
2. 3D Studio Max software
3. Fail ‘sphere.max’
4. Image texture that fits the theme
TASK
Theme: Bowling Game

Pupils produce movements in between on 3D objects
by using the Translation transformation feature
(Translation), Rotate and Scaling (Scale).
WORK STEPS (TASK)

1. Open the 3D Studio Max software.
2. Students produce several 3D objects called 'bowling pins'
in the Left Viewport.
3. Students arrange the objects in the appropriate position.
4. Students import existing objects into the scene , namely spherical objects from the file
‘sphere.max.’
5. Pupils change the size of the spherical object as appropriate and place it on
position in front of the 'bowling pin' object.
6. Pupils put appropriate textures on spherical objects and 'bowling pins'.
7. Pupils create an animation of movement in between spherical objects
dropping the 'bowling pin' using the Translation transformation feature
(Translation), Rotation (Rotation) and Scaling (Scaling).
8. Students play animation.
9. Students save the file as 'permainanboling.max'.
100
3. State three types of transformations that can be used in producing

animation 3D.
i. _____________________________________________________________
ii. _____________________________________________________________
iii. _____________________________________________________________
4. Match the rotation transformation shown in the figure below with
its correct axis of rotation.
• Rotation on the X-axis
• Rotation on Y-axis
• Rotation on Z-axis
5. Name the transformation tool based on the diagram below.
101
6. Based on the initial position of the teapot object, specify the axis and transformation
involved in producing the in between movement animation below.
Axis: Axis:
Transformation: Transformation:
Axis: Axis:
Transformation: Transformation:
102
Student Name:
Year:
Class:

Content:
Standard 6.4.5 Generate in between movements using the
Learning: transformation feature: (i) Translation
(Translation)
(ii) Rotate
(iii) Scale
Achievement
Skilled
Skilled
Generates movement in between
1
3D objects using the translation
transformation feature .
Generates movement in between

2
3D objects using the rotation
transformation feature (Rotate).
Produce movement in between

3
3D objects by using the scaling
transformation feature (Scale).
DECISION
DATE

Date
Date
103
MODULE 6.4C
content:
Standard 6.4.6 Differentiate the use of types of light in

learning: 3D animated environment.
Objective 1. Understand the concept of light in 3D animation.

Learning: 2. Putting light into the scene.
Time: 6 jam
104
REFERENCE NOTES
6.4.6 DIFFERENTIATING THE USE OF TYPES OF LIGHT IN THE ANIMATION ENVIRONMENT
3D
Lighting is a technique used to simulate indoor light

3D animated environment. 3D animation lighting techniques are used accordingly
different functions and difficulty levels. Light usage can be chosen from
various light sources, tools and techniques that suit the needs of animation
3D.
The types of light in 3D applications vary from one to another

other depends on the type of software, but the concept is similar ie for
produce a realistic effect and resemble a real situation.
For example:
• light that can produce shadows.

• light that comes from natural sources.
• light that comes from a lamp.
• focused light.
There are several lighting techniques in 3D animation:
1. Omni/Point Light (Point/ Omni Light)

• Emits lighting in every direction from a single light source
which is very small.
• Focus on a specific location in the 3D scene.
• Useful for simulating any light source
omnidirectional such as light bulbs, candles and Christmas tree lights.
105
Diagram 6.4.34: Omni/Point Light – The Incredibles.
2. Directional light
• Represents very distant light sources such as the sun or
moon.
• Rays emitted from parallel directional light in one direction.
• Simulates sunlight or moonlight.
Diagram 6.4.35: Directional Light – Monsters Inc.
3. Spot light
• There are 2 types, namely target spot and free spot.
• Target spot - emits a focused beam of light.
• Free spot - does not have a target object.
• Simulate lamps such as table lamps or street lamps.
106
Figure 6.4.36: Spot Light – Monster University.
4. Area Light (Area Light)

• Emitting light according to the boundaries set in
specific size and shape such as square or round.
• Visualize 3D object architecture and product lighting.
• Produces soft shadows that make the animation 3D
looks more realistic.
Figure 6.4.37: Area Light – La Luna.

5. Volume Light
• Shines light in all directions from a specific point.
• Has a specific shape and size.
• Illuminates surfaces based on set values.
• Provide special effects such as smoke, fog, etc.
Figure 6.4.38: Volume Light – Wreck It Ralph.
107
6. Ambient Light
• Emits soft light in all directions.
• Has no specific direction and does not cast shadows in

land.
• It can be compared to twilight after sunset.

• Be an additional source to the color of the main light source
for 3D views.
Figure 6.4.39: Ambient Light – Pixar Up.
Putting the Light in the Scene

1. Open 3D animation software.
2. Build the teapot and table objects in the Perspective Viewport.
Figure 6.4.40: 3D objects - teapot and table.
3. Click in the Left Viewport to activate it.
108
4. On the Command Panel > click Create panel.
5. Select the Lights icon.
Panel Create
6. There are two types of light methods:

Light
• Standard s
• Photometric
7. Select Standard.
8. In the Object Type section, select the type of light
Target Spot.
Rajah 6.4.41: Panel Create.
9. Click in the Left Viewport. The cursor will change to a Crosshair shape.
10.Click the left mouse button on the top of the teapot and drag the mouse towards the teapot. One
a blue-lined cone shape will form. This circle represents light
formed spot light .
The position of Spot light

the direction of
light that you
want to
change using the Blue
move tool.
striped con
(light direction)
Figure 6.4.42: Position of the left view light.
109
11. This cone line will not be visible after the rendering process is made. The visible
only the effect. The position of this light can be changed
its position by moving the position of the spot light with
use the move tool as shown in the diagram above.
12.Activate the spot light, select the Modify panel and rename Spot01 as light1.
Rajah 6.4.43: Panel Modify.
13. Under the General Parameters menu in the Shadows parameters section:
- Click and check the box On and Use Global Settings.
- On the drop down list, select
Shadows Maps to place shadows
on objects in the scene .
- This shadow will only appear when
the rendering process is executed.
Rajah 6.4.44: General Parameter.
110
14.Build another light inside the Left Viewport using the Omni light type.
Place it slightly below the level of the table surface. Try to see the results from
Perspective View.
Omni Light
Figure 6.4.45: Omni Light and its position.
15.Save the file by selecting File > Save.
16. Save as kaghamejateko.max
Placement of Target Spot Light Placement of Light

Target Spot and Omni
Figure 6.4.46: Light placement.
111
Table 1: Types and Forms of Light.

Types of Light Shape of Light
Target Spot
Free Spot
Target Direct
Free Direct
Omni
Skylight
112
mr Area Omni
mr=mental ray
mr Area Spot
Source:
http://ohelstudio.blogspot.com/2015/07/pencahayaan-dalam-3d-animasi.html
https://3d-ace.com/press-room/articles/how-light-3d-scene-overview-lighting-techniques
113
ACTIVITY
1. Computer
2. 3D Animation Software
TASK
- Pupils explore and recognize the types of light in the software

animation 3D.
- Pupils build and distinguish between two lights
produced that have different positions.
WORK STEPS (TASK 1)

1. Open the 3D animation software.
2. Identify and explore Lights on 3D software.
3. Build a new 3D object.
4. Build Target Direct light on 3D objects.
5. Save the 3D file as light_direct1.max.
WORK STEPS (TASK 2)

2. Build a new 3D object.
3. Build a Skylight on a 3D object.
4. Save the 3D file as light_skylight1.max.
114
1. In the diagram below, circle the lights icon
2. On the command panel light icon (lights Icon) there are several types
the light that can be produced. Name the types of light.
a _________________________
b __________________________
c __________________________
d __________________________
3. Based on question 2, choose three and state the difference in characteristics
light in the space provided
1. 2. 3.
115
Student Name:
Year:
Class

Content:
Standard 6.4.6 Differentiate the use of types of light in
Learning: 3D animated environment.
Achievement
Skilled
Skilled
Understand the concept of light in 3D animation.
1
Put the light inside

2
scene.
Distinguish the use of light techniques in a 3D
3 animation environment.
DECISION
DATE

Date
Date
116
MODULE 6.4D

content:
Learning 6.4.7 Determining the suitability of position and angle

standards: camera view in a 3D animated environment.
6.4.8 Produce camera motion animations in a 3D animation
environment as appropriate.
Objectives: 1. Understand the concept of camera movement in 3D animation.

2. Identify the types of camera positions and viewpoints in a 3D environment.
3. Identify the types of camera movements in a 3D environment.
4. Place the camera into the 3D animation.

5. Move the camera to produce 3D animation.
Time: 9 jam
117
REFERENCE NOTES
6.4.7 Determining Appropriate Camera Position and View Angle

In a 3D Animation Environment.
The camera works to simulate still images, moving images

or recording from a video camera in the real world. In the 3D concept, when
we put the camera object into the 3D environment, the scene
produced is from the point of view of the designated camera.
Figure 6.4.47: Example of camera position placed in a 3D scene.
Figure 6.4.48: The generated camera view.

The camera's point of view can not only help the editing process
on 3D objects even it can help in producing a shape
118
complex and interesting animation by making movements
on the camera.
By placing several cameras in the same scene , various

different viewing angles can be produced. Like a regular camera,
virtual camera in 3D concept can also do camera techniques like
zoom, pan and dolly.
For example in Figure 6.4.49 below, the camera is positioned

above a little of the object by producing an intermediate camera view angle
objects and cameras. Then the camera lens is moved using the Zoom In technique
resulting in a camera viewing angle that is getting closer or larger, such as
in Figure 6.4.50.
Figure 6.4.49: Position of the camera placed in the 3D scene

(before zooming in).
Figure 6.4.50: The final result after zooming in from the camera's point of view.
119
Camera position and camera viewpoint in a 3D environment
The camera is the 'eyes' to

the viewer's or character's
point of view in a scene or
3D environment.
Figure 6.4.51: Example of camera position.
Camera position and camera viewpoint in a 3D environment

function to have an impact on the subject/object produced. By
resulting in a suitable and interesting view angle it is able to make
the main subject looks dominant, weak, lost, confident, big or small to
audience and other objects.
120
Info Corner
Types of camera angles

Camera angles refer to the position of the camera
while the shot or recording of the subject is taken.
Different camera angles can add and drive meaning
and different levels of audience engagement.
Figure 6.4.52: Types of camera angles.
121
Here are some examples of corners

camera view by position
Info Corner
cameras (camera angles) used
according to the way of storytelling
desirable
• Extreme long shot:
Camera angle
(Camera angles)
Figure 6.4.53: Extreme long shot in How to

Train Your Dragon Animation.
Usually the camera's point of view reflects the subject's surroundings

or showing where the subject's location is but not showing the subject
itself.
122
• Medium shot:
This camera angle is half of the featured character which is from

waist level up. The audience can see the characters' faces more clearly as well
interactions between other characters.
Figure 6.4.54: Medium shot in Cloudy Animation.
• Close-up:
Figure 6.4.55: Close up in the Animated Movie Brave.
Most of them are used to show the subject's emotions more clearly.
The camera position focuses on the head only.
123
• Extreme Close-up:
Figure 6.4.56: Close up in the Animated Movie Brave.
Extreme Close Up is a shot that shows more of the subject's face

as close as the eyes, nose, or ears.
See figure 6.4.57 how the camera position and the camera's point of view
can be used to arrange shots and scenes that will appear when
rendering is carried out.
Figure 6.4.57: Camera position (blue circle) determines what is seen

audience in this animated movie scene from A Bug's Life.
124
Diagram 6.4.58: Medium shot results.
By choosing the appropriate camera angle can not only add

Moreover, the atmosphere in this scene can actually create a strong relationship
with the onlookers.
125
Types of camera movements

The camera in a 3D animation environment can be in one place, rotated or
enlarged. It can do many things that are difficult to achieve by
normal camera. The way the camera moves can give meaning to what is
occurs on display.
Figure 6.4.59: Camera Movement in 3D.

Here are two examples of the types of camera movements applied in
3D scene using Cinema 4D software.
126
• Crane
Virtual camera movement from bottom to top or vice versa

shows the state of objects at different heights.
Figure 6.4.60: Crane camera movement in Cinema 4D software.
• Hand held
The camera moves dynamically as if the audience is inside

the animated scene.
Figure 6.4.61: Hand Held camera movement in Cinema 4D software.
127
6.4.8 Producing Camera Movement Animations in a 3D Animation Environment

Accordingly.
Animation in 3D is a process of making movements

an object or point of view in a certain spatial distance according to direction
three dimension. The animations in 3D applications are more attractive when compared to
2D animation because it looks more realistic and complex.
In the world of 3D animation, animation can be generally divided into

two forms namely:
• Animation of objects
• Camera animation
These two forms of animation can be categorized into two types namely:
• Frame by frame animation
• Tweening Animation
Object animation occurs when there is movement of an object inside something

room.
Camera animation happens when there is movement on the camera (in

this is the user's point of view) appears as if something
the object moves or the user feels as if it is moving.
128
Creating Animation Based on Camera Movement
1. Open the file ghahaya_mejateko.max.
2. Go to the Command Panel and click

create panel . Click icon camera.
3. In the Object Type section, select Target.

4. Activate Left Viewport.
Rajah 6.4.62: Panel camera.
5. At a slightly higher position from the level of the table surface and a little further away
right, Left-click the mouse and drag to approach the object on the table. Look at the diagram
under.
Figure 6.4.63: Camera placement in the scene.
129
6. One prism with blue lines will be formed. This prism represents the view of
camera.
7. Activate Perspective Viewport by clicking the right button

mouse.
8. Press the letter 'C' on the keyboard. The letter C stands for
the word Camera. Press the letter C on the keyboard, to see the angle
camera view.
Perspective viewport Camera viewport

Figure 6.4.64: Camera view
9. Activate Top Viewport.
10. Make it look like the diagram below.
130
Figure 6.4.65: Camera placement from top view.
11. You can make adjustments to the shape of your viewport

by using the button and .
12.On the Animation Control bar, click on the Time Configuration button
shown in the figure below.
Figure 6.4.66: Time Configuration button.
13.On the Animation tab, set Start Time to 0 and End Time to 200.
131
14. Click on the Auto Key button on the Animation Control Bar.
Figure 6.4.68: Auto Key Button.
15. Change the position of the camera by using the Move tool as shown in the diagram
down.
Figure 6.4.69: Camera position at frame 0.
16. In the Current Time box type the number 50.
Figure 6.4.70: Settings on the Current Time box.
17. Move the camera to the right with the focus facing
table.
132
18. Repeat step 16 above with the camera position on each frame
• 100
• 150
• 200
by rotating the camera in the direction as shown

in the figure below.
133
19. Click the Auto Key button again when finished.
20. Try playing your animation by moving the slider bar.
21. Save the file with the name animasi_kamera.max.
22. You have successfully produced a camera motion animation.
134
ACTIVITY
1. Computer
3. File 'permainanboling.max'
4. Fail 3D animasimejateko.max
TASK
- Students can find out the function of the camera in 3D animation.

- Students can use the camera to produce
camera motion animation in a 3D animation environment.
- Pupils produce three shots of position and angle
different camera views on the scene
'game bowling.max'.
WORK STEPS (TASK 1)

2. Identify and explore cameras on 3D animation software.
3. Buka fail animasimejateko.max.
4. Place two cameras in the tea table animation.
5. Move the camera to animate the movement of camera1 and camera2.
6. Play camera1 in camera viewport and save as
animasigerakankamera1.max.
7. Play camera2 in camera viewport and save as
animasigerakakamera2.max.
8. See the difference in the movement results of camera1 and camera2.
135
WORK STEPS (TASK 2)

1. Open the file 'permainanboling.max'.
2. Go to Command Panel and click Create panel. Click the Camera icon.
3. In the Object Type section, select Target camera.
4. Activate the Top viewport, click and drag the camera object towards the center of the object
targeted.
5. Activate the Perspective viewport by clicking the right button

mouse.
6. Press the letter 'C' on the keyboard to activate the viewpoint

camera. * Pay attention to the bottom right of the Animation Control bar,
viewport navigation controls have changed. There are different controls
for the camera while the Camera viewport is active.
7. Select any viewport.
8. Click on the camera object and make the appropriate movement on the camera
by using:
8.1 Truck Camera Button
8.2 Dolly Camera Button
8.3 Orbit Camera Button
9. View each shot in the Camera viewport for three types of camera movement
on.
10.Save the file with the name 'truckboling.max','dollyboling.max' and

‘orbitboling.max’.
136
1. In the figure below circle the camera icon (Camera icon) and Object Type.
2. Select and write the type of camera position (camera angle) for the film shot
'The Incredibles' animation below properly.
Full shot Medium shot Long shot Wide shot
Extreme Close-up shot
137
3. Name the type of camera movement shown in the software
3D animation below.
Original position
138

Student Name:
Year:
Class:
Standard 6.5 Animasi 3D
Content:
Standard 6.4.7 Determining the suitability of position and angle
Learning: camera view in a 3D animated environment.
6.4.8 Generate internal camera movement animations
3D animated environment as appropriate.
Achievement
Skilled
Skilled
Understand the concept of camera

1
movement in 3D animation.
Identify types of camera

2 positions and viewpoints in a 3D
environment.
Identify types of camera
3 movements in a 3D environment.
Put the camera inside

4
animation 3D.
Move the camera to produce 3D
5
animation.
DECISION
DATE
139
Date
Date
MODULE 6.4E
content:
Standard 6.4.9 Generate 3D animated environments with

learning: make determination of the rendering process
using 3D animation software.
Objective 1. Understand the concept of the rendering process in 3D animation

Learning: 2. Make settings for the rendering process in the software
animation 3D
3. Save the results of the 3D animation rendering
Time: 6 jam
140
REFERENCE NOTES
6.4.9 Producing 3d Animation Environments By Making Process Settings

Rendering Using 3D Animation Software.
Rendering is the process of gathering animation information that has been scripted
through the difference in the values of the position of an object on the X, Y and Z planes, or
a 3D composition to a series of 2D images. Usually model-
models that have gone through the rendering process, can be stored in various
animation file formats such as fli, flc, avi, mov, mpeg and others.
Rendering Process
Once you are satisfied with the animation results, you need to do the rendering process.
After the rendering process is carried out, this series of animations can be done
transferred to film, videotape or into various formats for use
in the computer.
The rendering process may take time depending on the texture

used, the form of lighting and the complexity of the animation.
Creating Renderings and Saving Files in Animation Format.
1. Open the file animation_kamera.max.
2. Activate Camera Viewport .
Figure 6.4.75: Camera view of teapot and table objects
141
3. Click the Rendering menu on the menu
bar and click Render. Dialog box

The Render Scene will be exposed.
4. For the Common section
Parameters, in the Time section
Output pilih Active Time segment.
5. In the Output Size section select
the type of resolution desired

for example '640 x 480'.
6. On the Render Output section

select the Save File option.
7. Click on the 'File….' button,
Figure 6.4.76: Render Scene dialog box
142
Rajah 6.4.77: Kotak dialog Render Output File.
8. In the Render Output File dialog box :
- Type in File Name : Render_Animation
- Save as type: select *.avi format
9. Click the Save button
10. Click the Render button.
11. Open the folder that holds the rendering file.
12. Double click on the Render_Animation file to see the rendering results.
143
ACTIVITY
2. Computer
TASK
- Pupils explore and know the settings for the process
3D animated rendering.
- Students carry out the rendering process to produce results
3D animated environment.
- Students save the rendering results in *.avi format
using 3D animation software
WORK STEPS (TASK)

2. Produce one 3D animation project with a minimum duration of 200 frames.
3. Identify and explore Rendering settings on 3D animation software.
4. Make rendering process settings in 3D animation software.
5. Save the 3D animation rendering result as animation3d.avi using
6. Carry out the rendering process for the resulting 3D animation.
144
1. Based on the diagram below, circle the Time Output setting for the process
rendering.
2. Specify two Output Sizes that can be used in the rendering process.
i. __________________________
ii. __________________________
3. State the two file formats used to save 3D animation results.
a __________________________
b __________________________
145
Student Name:
Year:
Class:
Content:
Standard 6.4.9 Generate 3D animated environments with
Learning: make determination of the rendering process
using 3D animation software.
Achievement
Skilled
Skilled
Understand the concept process
1
rendering in 3D animation.
Make rendering process settings
2
in 3D animation software.
Save animation rendering results

3
3D.
DECISION
DATE

Date
Date
146
MODULE 7:
DEVELOPMENT
MULTIMEDIA PRODUCTS
147
MODULE 7.1A
Standard 7.1 Project Requirements Analysis
content:
Standard 7.1.1. Explain the Phases of Product Development
learning: Multimedia
(i) Requirements Analysis
(ii) Design
(iii) Implementation
(iv) Testing and Assessment
(v) Packaging and Distribution
7.1.2. Explain the types of multimedia products such as:
(i) Information kiosk
(ii) Interactive CD/DVD
(iii) Web-based
(iv) Mobile applications
7.1.3. Describes the presentation mode or platform
product:
(i) Online (on-line)
(ii) Offline (on-line)
Objectives: 1. Briefly describe the phases involved
in the Multimedia Product Development Phase.

2. Explain different types of multimedia products.
3. Compare the difference between modes or platforms
product presentation.
Time: 4 jam
148
REFERENCE NOTES
7.1.1 Explaining the Phases of Multimedia Product Development
Requirements Analysis
This phase is the first phase and the most important because of this phase
allows the development team to determine the focus of the project they want
developed. The team needs to get feedback from the client or
end users to define the problem statement and proposal paper.
In this phase, a proposal paper will be produced.
Shape
This phase refers to the design planning of the multimedia project that will
developed. In this phase flow charts and storyboards will be produced. Flowchart
is a flow of symbols created to describe
the overall structure of the multimedia product as well as the sequence of movement of the process or activity
involved. A storyboard is a series of images or sketches

describe or explain the organization, sequence and detail of information
about the multimedia presentation developed.
Implementation
In this phase, the development team will start developing the multimedia product
based on the design plan that has been produced. Development of this product
including works to integrate all multimedia elements ie
text, graphics, audio, video and animation. An authoring software will be used
to integrate all these elements.
149
Testing and Assessment

The testing phase aims to ensure that the multimedia product is developed
quality and without any errors. A select few users will
rate the product and provide feedback on the product
can be improved if necessary. In this phase, a product prototype will
tested through alpha and beta testing.
Packaging and Distribution

This phase involves the process of handing over the application to the user. This process will
involves the production of CDs, publishing on websites, kiosks, mobile applications
or various other mediums that can be used. CD packaging process as well
done in this phase.
150
7.1.2 Explaining Types of Multimedia Products
Information kiosk
Figure 7.1.1: South Integrated Terminal Ticket Kiosk
A computer terminal that provides access to information for

communication, entertainment or education. Usually provided in places that
always visited such as supermarket complexes, offices, airports as well
tourist attractions. Display for an information kiosk
interactive must be able to attract user interest in addition to loading
various important information needed.
Interactive CD/DVD
151
Figure 7.1.2: Interactive Learning CD
CD/DVD is a multimedia product medium that is widely used.

One of the advantages of using CD/DVD is that these products are easy to use
carried and usually does not require an Internet connection. One of the products
multimedia that uses CD/DVD as its medium is software
interactive learning.
152
Web based
Figure 7.1.3: MoE Website
Web-based multimedia applications are widely used throughout the Internet.

One of the advantages of web-based multimedia is that it can always be upgraded
according to current developments. In addition, a multimedia product
web-based is also easy to reach anywhere as long as you have
Internet network.
Mobile application
Figure 7.1.4: Various mobile applications
Mobile applications refer to multimedia products that can be accessed through

mobile device. One of the main advantages of mobile applications is
the ability to download or view content such as television shows,
sports, or news reports even when away from home or office.
Text, picture, and video messaging services are examples of mobile applications.
153
7.1.3 Explaining Multimedia Presentation Modes or Platforms
Table 7.1.1: Comparison of Online and Offline Multimedia Presentation Modes

Application
Online Offline
Multimedia
Provide information Multimedia presentation
up to date to users can always be used

because connected even network
to server for Limited internet.
get time data
real.
Advantage
Make it easy for users No need to load

access the presentation data from the network
it's everywhere Internet to start
only through various multimedia presentation.

available devices.
Requires connection Information that

good internet and displayed may not
stable. describe the data
latest.
Weakness The number of users who Can not be used

too many can on devices other than devices
affect smoothness original unless it is installed
performance. / is copied to the new device.
154
1. State the five phases of multimedia product development.
i. _____________________________________________________________
ii. _____________________________________________________________
iii. _____________________________________________________________
iv. _____________________________________________________________
in. _____________________________________________________________
2. State the advantages and disadvantages of online multimedia applications
or offline in the table below.
Schedule 1
Application
Online Offline
Multimedia
_________________________ ___________________________
_________________________ ___________________________
_________________________ ___________________________
Advantage
_________________________ ___________________________
_________________________ ___________________________
_________________________ ___________________________
_________________________ ___________________________
_________________________ ___________________________
_________________________ ___________________________
Weakness
_________________________ ___________________________
_________________________ ___________________________
_________________________ ___________________________
155
3. Match the media type of the multimedia product with the given image
Kiosk
• •
Information
CD/DVD • •
Based
• •
Web
Application
• •
mobile
156
Student Name:
Year:
Class:
Standard 7.1. Project Requirements Analysis

Content:
Standard 7.1.1. Explain the Phases of Product Development
Learning: Multimedia.
7.1.2. Explain the types of multimedia products.

7.1.3. Describes the presentation mode or platform
product.
Achievement
Skilled
Skilled
Describe the phases of development
1
multimedia products.
Explain the different types of products

2
multimedia.
Comparing mode differences or

3
product presentation platform.
DECISION
DATE

Date
Date
157
MODULE 7.1B
content:
Standard 7.1.4 Analyze the needs of development projects

learning: multimedia products
7.1.5 Recommend development cost estimates
multimedia products based on time and
team member needs
7.1.6 Produce a project proposal paper
multimedia product development
Objectives: 1. Identify the aspects that need to be considered

during the needs analysis of the development project
2. Make an estimate of the cost of development
3. Produce a project proposal paper
multimedia product development.
Time: 12 jam
158
REFERENCE NOTES
7.1.4 Analyze the needs of multimedia product development projects
Requirements analysis is the most important initial phase before development
a multimedia product. This ranking is also an overview of ideas
about the planning of actions that will be done in the whole process
project development. This stage is important for the project development process
run smoothly and organized as planned.
Among the aspects that need to be considered when making an analysis
requirements are:
Table 7.1.2: Important aspects when doing a needs analysis
The question Aspect

ÿ Project title
ÿ What projects do you want to develop?
ÿ Product type
ÿ Why the project is wanted ÿ Problem statement
produced? ÿ Project objectives
ÿ Who are the target users for the project

ÿ End user groups
developed?
ÿ What multimedia elements are appropriate ÿ Multimedia elements (text,
used in delivery graphics, animations, videos,
project content? audio)

ÿ Is the material content available or ÿ Content purchased/
need to produce yourself? self-produced/ existing
ÿ What are the hardware requirements and

ÿ Hardware and software
software for project development?
ÿ Does the developer have

ÿ Developer skills
ability and skills to
ÿ Production team
using hardware and software?
ÿ Who will be involved in

ÿ Production team
project development?
159
The question Aspect

ÿ How much time will it take ÿ Time period
for project development? project development
ÿ How much does it cost to
ÿ Total cost estimate
project development?
ÿ How will the project be distributed ÿ Mode or platform
to the end user? performance
160
7.1.5 Propose cost estimates for multimedia product development

based on the time and needs of team members
Cost Types
Estimated cost of multimedia product development is made to know the amount

money that needs to be spent to produce a multimedia product. Cost
to consider are:
Table 7.1.3: Types of costs

Cost type Description
• Costs payable to team members
production involved.
• Costs are usually calculated based on the wage rate per
days and number of working days.
Labor cost
• Is the highest cost in
• Referred from the Work Process Schedule and Schedule
Guidelines for Determining Labor Costs.
161
Cost type Description
• Costs paid for purchase or rental
every equipment or software used
in project development.
• The calculation is based on the purchase price or

Equipment cost
rental rate and number of days used.
• Examples of equipment such as digital cameras, cameras
video, computer, printer, software and
etc.
• Costs paid other than labor costs and costs
equipment.
• For example, transportation expenses,

Incidental costs
accommodation expenses, electricity bills, water bills, rent
premises, travel costs, copying costs,
purchase of CD/DVD and so on.
Work Process Schedule and Guidelines Schedule for Determining Labor Costs
The work process table displays the number of working days for each team member
production involved in every phase of multimedia project development. Amount
the number of working days must not exceed the number of days allocated for
project development.
Table 7.1.4: Example of work process table
Content Expert
Manager Designer Method
Work process Content
Project (Day) Form (Day) manager (Day)
(Day)
Needs analysis 5 2 2 3
Shape 10 10 4 4
Development EXAMPLE
15 10 10 2
Testing and
10 8 5 8
Assessment
Packaging and
5 5 - -
Distribution
Number of days 45 35 21 17
162
Here is an example of a guideline table for determining labor costs.
Table 7.1.5: Examples of guidelines for determining labor costs
Low Simple Height

Position
(RM per day) (RM per day) (RM per day)
Project manager 50 75 100
Content Specialist 30 50 75
Photographer 15 25 50
Graphic Artist/ Designer

Narrator
EXAMPLE 20
15
40
30
60
40
Musician 15 25 75
ÿÿÿ ÿÿÿÿÿÿ 15 30 200

Audio Specialist 15 30 75
Method manager 20 35 50
Multimedia Architect 15 30 40
500 (each
Computer Animator 20 30
model ready)
In addition, payment rates for labor costs can also be referred from
the following link https://www.payscale.com/research/MY/Job.
Example of Estimated Cost Calculation for Multimedia Product Development
Product Example: Interactive Learning CD "Let's Get to Know 123"
Time Period : 45 Days
i. Labor cost
Production Team Wage Rate/ Day Number of days Cost
(RM) Work (RM)

Project manager
Designer EXAMPLE 100.00
60.00
45
35
4,500.00
2,100.00
Method manager 50.00 21 1,050.00
Content Specialist 75.00 17 1,275.00

Total Labor Cost 8,925.00
Use: Production team and number of days are referred from table 7.1.4
while the wage rate is referred from table 7.1.5 at a high rate.
163
i. Equipment Cost
Details Rate (RM) Number of days Kos (RM)
Printers and scanners 80.00 5 400.00
Rent a computer 120.00 30 3,600.00
Digital camera EXAMPLE 100.00 6 600.00
iii. Ancillary Costs
Details Kos (RM)
Electricity bills 300.00
Transportation 500.00
CDs and CD shells EXAMPLE 1,000.00
iv. Total Project Cost
Details Kos (RM)
Labor cost 8,975.00
EXAMPLE
Equipment cost 4,600.00
Incidental costs 1,800.00
Total Total Cost 15,325.00
164
7.1.6 Produce a proposal paper for a multimedia product development project

A proposal paper is a document that contains information
overall about a multimedia product that wants to be developed. Paper
the proposal also provides information about the background of the project, scope of work
up to the costs involved in project development.
Among the contents of the multimedia project proposal paper are:
Content Description & Examples

Title Displayed on the face
front of the recommendation paper.
Example title: Learning CD

Interactive “Let's Get to Know 123”
EXAMPLE
Statement A brief description of the desired problem or issue

Problem resolved or repaired that caused a product
multimedia wants to be produced.
Example:
a) Lack of interactive learning CDs for children

who use Malay in the market.
b) ...
Objective A brief description of the intended purpose or goal
achieved in the production of a multimedia product.
Example:
a) Develop an interactive learning CD

for children.
b) ...
165

Kick Project A description of the limitations or limitations of the project
developed.
Example:
a) Development of this interactive learning CD only
for offline platform use only.
Online use of this product is possible
need another support system.
b) ...
Target A brief description of who the end user is for
User developed multimedia products such as ages, groups
age, community group and so on.
Example:
a) Children aged 4 – 7 years.
b) Nursery teachers/ Parents/ Teenagers
c) ...
Product Type Description of the type of multimedia product
developed such as interactive CDs, information kiosks, websites
web, mobile applications and so on.
Example:
Product Type: Interactive CD
Against/ A description of the way or method of the multimedia product
Platform presented to the user as in
Performance online (on-line) or offline (off-line).
Product Example:
Presentation Mode: Offline
166
Requirements A description of the hardware and software specifications that
Hardware used for the development of multimedia projects as well
and Software hardware and software requirements for end users.
Example:
a) Hardware and software for development
Hardware Software
• Computer (RAM: • Flash 8
8GB, SDD 500 GB) • Adobe Photoshop 8
• Drawing tablet • Windows 10 (OS)
• CD/ DVD burner
b) Hardware and software for end users
Hardware Software
• CD/ DVD player • Flash Player
• Computer/ Computers
Riba
• Television
Timetable A table showing the implementation plan of each
(Time line project development phase by day/week/month.
project) Example:
EXAMPLE
167
List of tasks Explanation of the role of each production team member

Team member which are involved.
Example:
The team
Task
Production
• Ensure the smoothness of work

project development at each phase.
• Coordinate the tasks of each team
Manager production involved.
Project • Ensure equipment availability,
software, place, transportation,

accommodation and every need
production team.
... ...
Estimated Cost Estimated amount of money that needs to be spent on

multimedia project development (Please refer to 7.1.5).
Cost
Cost
whole = Labor Cost + Equipment Cost +
Side
project
Conclusion A brief summary and developer expectations about the project

that want to be developed.
168
ACTIVITY
1. Computer
2. Microsoft Word software
3. Calculator
4. Printing machine
TASK
Students produce a multimedia project proposal paper
including title, problem statement, objectives, project scope,
target user, type of product, presentation mode/platform,
time schedule, team member task list, cost estimate and
conclusion.
WORK STEPS (TASK)

1. Students discuss with the teacher about the title of the multimedia project they want
produced.
2. Pupils produce a proposal paper and estimate the cost of using

Microsoft Word.
3. The proposal paper is saved and printed.
169
1. Write down the important aspects of requirements analysis that fit the details
given in the table below
Schedule 1
Details Aspect
• Interactive CD
• Mobile applications
• Flash 8
• Adobe Photoshop
• Labor costs
• Equipment cost
• Incidental costs
• Teenagers
• Parents
• Primary school students
• Graphic artist
• Multimedia architect
•Pakar video
170
2. You are asked to produce a video for the Program Opening Ceremony
Let's visit Sabah with a cost not exceeding RM 60,000. Time frame for
completing this project is for 60 days.
Table 2 is a work process schedule for producing multimedia presentations
the.
Table 2
Manager Designer Content Expert ÿÿÿ ÿÿÿÿÿÿ
Work process Project Form Content and Audio
(Day) (Day) (Day) (Day)
Needs analysis 10 2 6 8
Shape 10 6 4 8
Development 20 8 4 16
Testing and
10 4 6 16
Assessment
Packaging
10 4 - -
and Distribution
Number of days 60 24 20 48
Based on Table 2, complete the cost estimate table below.
a) Labor cost
Wage rates/ Number of days

Position Kos (RM)
Days (RM) Work
Project manager 60 18,000.00
Designer 250.00 24 6,000.00
Content Specialist 20 5,000.00
Video and Audio Expert 48
171
b) Cost of equipment
Amount
Details Rate (RM) Kos (RM)
Day
Printers and scanners 500.00 5 2,500.00
Rent a computer 500.00 20
Video camera 500.00 3,000.00
Studio 1,000.00 2 2,000.00
Total Equipment Cost
c) Amount of side costs
Details Kos (RM)
Electricity bills 700.00
Water bills
Transportation 500.00
Total Ancillary Costs 1,400.00
d) Find the total cost of the project.
172
Student Name:
Year:
Class:

Content:
Standard 7.1.4 Analyze the needs of development projects

Learning:
multimedia products
7.1.5 Propose product development cost estimates
multimedia based on the member's time and needs
team
7.1.6 Produce development project proposal papers
multimedia products
Achievement
Skilled
Skilled
Identifying the aspects that need to be
considered during the needs analysis
1
of a multimedia product development

project. Making an
estimate of the cost of multimedia product
2
development.
Produce a proposal paper for a multimedia
3 product development project
DECISION
DATE

Date
Date
173
MODUL 7.2A
Standard 7.2 Multimedia Product Design

content:
Learning 7.2.1 Explain the structure of presentation design

standards:
multimedia products:
(i) Linear
(ii) Not Linear
(iii) Waves
(iv) Composite
7.2.2 Explain design principles:
(i) Affirmation (Emphasis)
(ii) Pattern (Pattern)
(iii) Repetition
(iv) Balance (Proportion)
(v) unity (Unity)
Objective 1. Explain the concept of presentation design structure

Learning
2. Understand design principles.
3. State the meaning of design structure
presentation of multimedia products and design principles
shape.
4. Using presentation design structure and
design principles in product production
multimedia.
Time: 6 jam
174
REFERENCE NOTES
7.2.1 EXPLAINING THE DESIGN STRUCTURE OF MULTIMEDIA PRODUCT PRESENTATION:
The presentation design structure of multimedia products is one of their processes

structural form or travel pattern of a product. This process will also
determine where and how the power of control will be given to the user
to enable them to communicate or interact with the computer.
This matter is implemented for various purposes such as to deliver or
receive a message, determine the path of exploration to be taken and
etc.
Figure 7.2.1: Examples of Multimedia Products
This design in brief involves the following activities:

• Build a guide system to guide users.
• Designing navigation systems and achievement routes.
• Explains what will happen on each screen.
• Designing controls for interactivity purposes.
• Designing storyboards
175
Therefore, a designer has to plan the design

which is appropriate to the needs, clear, simple and easy to use.
To help a designer plan a presentation design
multimedia products, some exploratory or navigation structure options can
be a guide.
Generally, there are several presentation design structures
multimedia products that can be used and among the popular ones are:
Linear
The linear structure only allows the user to explore a presentation

in order only. It will start from the beginning to the end of the show.
Examples: TV ads, videos, animations and polling websites.
Figure 7.2.2: Linear Structure
Not Linear
The non-linear structure provides links or relationships between each topic.
Such a structure gives freedom to the user to explore
more easily and flexibly. Users are free to go anywhere
the desired topic through the navigation button.
Examples: Social media websites, educational learning software.
176
Figure 7.2.3: Non-Linear Structure
Hierarchy
A hierarchical structure is also known as a tree structure. Each display represents a topic
or headline. Each main topic can be divided into several
small topic or subtopic. This subtopic can also contain its subtopics which
separately.
Examples: Learning websites, educational learning software
Topic
Chapter 2 Chapter 3
Chapter 1
Subtopic 1 Subtopic 2 Subtopic 1 Subtopic 2 Subtopic 1 Subtopic 2
Figure 7.2.4: Hierarchical Structure
177
composite
A composite structure is a combination of several structures such as linear, non-linear or
hierarchy to complete a more flexible presentation system as well
meet the needs of multimedia products. This situation is to ensure information
that you want to convey can be achieved more easily as needed
users and also current needs.
Example : Educational Learning Software, online shopping application
and game applications.
Menu
Intro 1 Intro 2 Intro 3 Gallery
Image Audio
Video1
Video2
Figure 7.2.5: Hierarchical Structure
178
7.2.2 EXPLAINING THE PRINCIPLES OF DESIGN
Design principles are concepts or rules that apply to design elements
shape to facilitate the construction of an object in order to produce a visual
be attractive, comfortable and give satisfaction to users. Principles
design will help us decide how to
using design elements.
Here are the design principles:
(i) Affirmation
- a concentration of artistic elements or images that look more significant if
compared to others.
- Affirmation and contrast have almost the same characteristics.
- In works of art, artistic elements such as lines, looks, shapes, weaves, spaces
and color can create emphasis.
- Example:
Figure 7.2.6: Emphasis Graph

- Sample interface
Assertion for
menu
Quiz
Figure 7.2.7: Letter Education Software
179
(ii) Pattern
- The same repeating arrangement of art elements such as lines, shapes or
Colors repeat themselves into patterns.
- The use of patterns must be used wisely to avoid
complicated layout or unattractive design.
- Example:
Figure 7.2.8: Pattern Graphics
- Sample interface:
Group squares and questions

are repeated to form a
pattern
Figure 7.2.9: My Clothes Education Software
180
(iii) Repetition
- Repeated rearrangement of objects in terms of size and shape
in series, parallel or radial arrangement.
- Example:
Figure 7.2.10: Repetition Graph
- Sample interface:
Repeat for the

menu button shape
Figure 7.2.11: Learning ABC Educational Software
181
(iv) Balance
- An object that has similarities and matches in terms of weight,
attraction, focus of attention or asymmetric shape.
- There are two types of balance:
i) Symmetrical balance has similarities in both
split it.
ii) Asymmetrical balance has nothing in common but is more interesting

and has its own charm.
- Example:
Symmetrical balance Asymmetrical balance
Figure 7.2.12: Equilibrium Graph
- Sample interface
The menu buttons are

balanced with the
interface
Figure 7.2.13: Fun Mathematics Education Software
182
in) Unity
- The relationship between art elements such as line, appearance, shape, space, color
or textures that help in producing visual works of art.
- Unity features exist in nature, man-made objects
and works of visual art.

- Example:
Figure 7.2.14: Union Graph
- Sample interface:
Unity in terms of
background lines,
button layout, space between
menus and
the color used.
Figure 7.2.15: Learning ABC Educational Software
183
ACTIVITY
1. Computer
2. Examples of Multimedia Products
3. A4 paper
4. MS Word
TASK
- Pupils discuss the navigation structure and design between
user face of multimedia products.
- Students list the design principles used.
WORK STEPS (TASK)
1. See examples of multimedia products displayed by teachers.
2. Discuss the design structure and user interface used.
3. Sketch the navigation structure on A4 paper.
4. List the design principles used in multimedia products.
184
1. List two presentation design structures of multimedia products.
a _________________________
b _________________________
2. Based on question 1, draw an example of a design structure
presentation of multimedia products in the space below.
3. Write the design principle in the space provided.
185
Student Name:
Year:
Class:

Content:
Standard 7.2.1 Explain the structure of presentation design
Learning:
7.2.2 Explain the principles of design.
Achievement
Skilled
Skilled
Explain the concept of multimedia product
1 presentation design structure.
2 Understand design principles.
State the meaning of multimedia product

3 presentation design structure and design
principles.
Using presentation design structure and design
principles in the production of multimedia
4
products.
DECISION
DATE

Date
Date
186
MODUL 7.2B

content:
Learning 7.2.3 Analyze the needs of multimedia elements

standards:
and interaction between users in
7.2.4 Produce a product flow chart based on structure
presentation design of multimedia products
Objective 1. Explain the need for multimedia elements and

Learning
interaction between users in development
2. Produce a product flow chart based on the structure
Time: 6 jam
187
REFERENCE NOTES
7.2.3 ANALYSIS OF MULTIMEDIA ELEMENT REQUIREMENTS
As a developer of multimedia products, one needs to make an analysis
the need for multimedia elements and interaction between users.
The purpose of the analysis is to ensure that multimedia products can
developed in a more planned and systematic way. It is also constructive
understanding of the user environment whether the product will
produced can meet the goals and achieve the objectives of the product developer.
This is an example of a needs analysis of multimedia elements and interactions between them
users in developing multimedia products for Learning CDs
Interactive Kids.
Text size can be read from an appropriate distance.
Use an appropriate and easy-to-read font. Make sure the

font is available on the other computer system.
ELEMENT
TEXT
Make sure the text color and background color are

contrasting so that it is easy to read.
Writing styles such as bold, italic and underline are used to

provide emphasis.
188
Make sure the graphic size is appropriate, not too much
small and not too big.
Use the shadow or outline effect settings for
emphasis on graphics.
Make sure the graphic quality is clear and image selection is easy
ELEMENT to be understood.
CHART
Make sure the graphic position is consistent and
easy to see.
Ensure that graphics are produced using
design principles such as emphasis, pattern,
repetition, balance and unity.
Make sure the audio recording and the audio selection
use is clear.
Make sure the tempo of the recorded voice is not too fast
and emphasize the tone of voice.
ELEMENT
AUDIO
Make sure the audio volume control of the voice recording is over
higher than the background audio.
Make sure the user can control the audio for
play, stop, pause dan repeat.
189
Choose a video quality that is high and suitable for the scene
screen.
Make sure the show time is not too short

so that the audience can understand and keep the time
The video show is not too long
ELEMENT prevent the audience from getting bored.

VIDEO
Camera movement and selection of types

good and effective portrayal for
describe the situation.
Special effect technique using green screen (green

screen) able to save costs.
The animation produced must be simple and compact.
Make sure the exported animation (rendering) is of good quality
high in size.
ELEMENT
ANIMATION
The animation has good lighting which
accompanied by shadows.
Animated objects that have textures can

interest.
190
7.2.3. INTERACTION BETWEEN USERS IN MULTIMEDIA PRODUCT DEVELOPMENT
The interface of a multimedia product plays a role in

ensure that users understand how to use the product
produced. A content arrangement consisting of multimedia elements
important in ensuring that users find it easy to use.
Good use of
characters and
The content
animation
arrangement of
in metaphors.
pictures &
text needs
to be organized
and systematic.
Content should
be simple and
easy to read
Figure 7.2.16: An example of a multimedia product interface
The use of buttons plays a role in the interaction between users.

Basic buttons should be there such as the button to the next page and the button
to the previous page. Instructions or user manuals should be provided so that
the user knows which buttons are available.
The button is placed in the bottom position so as not to disturb
reading. A replay button is also provided for users to create
repetition. Animation can also be seen if the mouse is pressed on the picture.
Buttons
are clearly
provided
to the
user
Audio and animation
control buttons
Figure 7.2.17: Buttons in multimedia products

191
7.2.5 MULTIMEDIA PRODUCT FLOW CHART
A flow chart is a flow of symbols made to illustrate

the entire structure and interaction that occurs between users. This will
provide an overview of the application process of multimedia products that will
developed. To create an allir chart, a multimedia form developer is necessary
make a decision whether you want to make a product offering online
linear, nonlinear, hierarchical or composite.
Once the decision is made, the developer needs to get an overview
about the number of scenes to be performed. After all the scenes have been
is decided, then the developer can organize the position of the interior
flow chart form. Each flow of the scene includes an arrow as a symbol of direction
direction of a scene. Here is an example of production for a CD product
Children's Interactive Learning in a linear way.
VIDEO MENU HALF HALF

INTRO MAIN FIRST SECOND
VIDEO HALF TO HALF

ENDED FOUR THIRD
Figure 7.2.18: Linear flow chart of Children's Interactive Learning CD
192
Once the flow chart is made, then the multimedia product production process can be completed
produced easily. This is because through flowcharts, developers can

identify what ingredients need to be present in the production of the product
multimedia. Here is an example of the production of a finished multimedia product
produced using a linear flow chart.
VIDEO INTRO MAIN MENU FIRST HALF SECOND HALF
VIDEO ENDED ACT FOUR THIRD HALF
Figure 7.2.19: An example of a linear flow chart of Children's Interactive Learning CD
In addition to linear flowcharts, developers can produce multimedia products by

composite or hierarchically. Here is an example of a hierarchical flow chart.
WELCOME
THE MAIN MENU
INFORMATION GALLERY VIDEO AWARD
Figure 7.2.20: Hierarchical flowchart of Children's Interactive Learning CD
193
Figure 7.2.21 is an example of a product that uses a flow chart

hierarchy. Arrows should be included to make it easier for developers
know where the scene is going.
Figure 7.2.4.21: An example of a hierarchical flow chart product of the Children's Interactive Learning CD
Children
194
ACTIVITY
1. A4 paper
2. Stationery
TASK
Pupils design and make a flowchart of the Children's Interactive Learning CD
Children
WORKING STEPS
1. Design to produce an Interactive Learning CD product
Children
2. Choose whether you want to create a linear, non-linear, hierarchical flow chart
or composite.
3. Once the decision is made, the developer needs to get an overview
about the number of scenes to be performed. It includes
overview of the beginning, content and end scenes.
4. After all the rounds have been decided, then students can arrange
the position of the scene in the form of a flow chart. Every chapter flow is necessary
an arrow is inserted as a symbol of the direction of a scene.
195
1. State two of the needs analysis of multimedia elements in
multimedia product development
Multimedia
Analysis
elements
I. ________________________________________________
________________________________________________
II.
Text Elements ________________________________________________
________________________________________________
I. ________________________________________________
________________________________________________
Elements II. ________________________________________________
Chart
________________________________________________
I. ________________________________________________
________________________________________________
Elements II. ________________________________________________
Audio
________________________________________________
I. ________________________________________________
________________________________________________
Elements II. ________________________________________________
Video
________________________________________________
I. ________________________________________________
________________________________________________
Elements II. ________________________________________________
Animation
________________________________________________
196
Student Name:
Year:
Class:
Standard 7.2 Product Design

Content:
Standard 7.2.3 Analyze the needs of multimedia elements and
Learning:
interaction between users in development
7.2.4 Produce a product flow chart based on structure
Achievement
Skilled
Skilled
Make a needs analysis
multimedia elements in
1
Make a needs analysis

interaction between users in
2
Produce a product flow chart
3
based on the design structure
presentation of multimedia products.

DECISION
DATE

Date
Date
197
MODULE 7.2C

content:
Learning 7.2.5 Produce a storyboard based on a flow chart

standards:
produced.
Objective 1. Explain the concept of the presentation storyboard

Learning
2. Identify the elements in the storyboard
3. Sketching a product presentation storyboard
multimedia based on flowcharts.
Time: 4 jam
198
REFERENCE NOTES
7.2.5 PRODUCE A STORY BOARD BASED ON THE FLOW CHART

PRODUCED.
Storyboard sketching is a task that a screenwriter has to complete

before the multimedia product development process is carried out
as a whole or in phases. The storyboard should be sketched
based on the scope that has been determined.
Storyboard means:
• Storyboards are prepared in the early stages of the design process.
• A storyboard is a collection of sketches of the shape of the display screens
used in multimedia products.
• In sketching the storyboard we need to apply the concept of layout.
• A storyboard is an imaginative sketch of what to display
in a multimedia product presentation.
Diagram 7.2.20: Example of a production storyboard
199
Storyboards are needed to:
• Enable all project members especially product developers
multimedia knows what needs to be on the screen as well as the content
intended by the scriptwriter.
• realize a unified system of graphic, text, animation, video, audio and process instructions
systematic multimedia products.
• Simplify the implementation process done in a separate place
at a separate time.
• Enables application content experts, graphics and animation experts, experts
video and audio experts understand each other's needs without
require them to be together at the same time.
• Help script writers and multimedia product developers sketch and
build products systematically.
Advantages of storyboards
• Enables multimedia product developers to sprout minds and
idea
• Being able to plan the storyline at an early stage
• Enables developers of multimedia products to express ideas before
moved above the computer display
• Changes can be made easily
• Save time and cost of production construction
• Reduces the risk of missing important storylines
The elements on the storyboard include the following:
ÿ Title ÿ Text ÿ Interactivity
ÿ No Skrin ÿ Audio / Background Sound ÿ General notes
ÿ Background color ÿ Video
back ÿ Graphics
ÿ Font type ÿ Animation
ÿ Font size ÿ Script / content
ÿ Font color content
200
Multimedia product presentation storyboard
TITLE:
NO. SKRIN:
IMAGES / GRAPHICS
ANIMATION
VIDEO CLIP
AUDIO / BACKGROUND SOUND Determine the position of the elements listed below on the screen display.
There is None
Text Color Paragraph Animation
Font Type Images / Graphics Audio
Font Size Background Color Video
NOTES :
201
ACTIVITY
1. Flow Chart that has been produced

2. Storyboard
3. Stationery
TASK
- Students identify the elements in the storyboard.

- Pupils complete the storyboard based on the elements
has been identified for certain.
- Pupils create multimedia presentation storyboards

based on the flow chart produced,
WORK STEPS (TASK)
1. See the flow chart that has been produced

2. Draw a storyboard based on the flow chart produced
3. Fill in the information for each element in the storyboard based
sketch made
4. Presenting a multimedia product presentation storyboard
202
1. List three advantages of storyboards.
c __________________________
d __________________________
It is __________________________
2. State the seven elements in the storyboard
i) ____________________________________
ii) ____________________________________
iii) ____________________________________
iv) ____________________________________
in) ____________________________________
vi) ________________________________________
vii) ____________________________________
203
Student Name:
Year:
Class:

Content:
Standard 7.2.5 Produce a storyboard based on a flow chart
Learning:
produced.
Achievement
Skilled
Skilled
Know the concept of storyboards
1
presentation of multimedia products.
Know the internal elements

2
storyboard.
Draw a storyboard
3 presentation of multimedia products

based on the flow chart.
DECISION
DATE
Teacher name: Signature & Date

Date
204
MODULE 7.3
Standard 7.3 Multimedia Product Development

content:
Learning 7.3.1 Identify product ingredients

standards:
multimedia.
7.3.2 Build material multimedia with
using hardware and software that

appropriate
7.3.3 Identify the tool's function and basic features
used in authoring software.

7.3.4 Build and produce half
(scene) by using tools and features

in accordance.
7.3.5 Integrate scenes by creating
links using appropriate tools and features
by using authoring software.
Objective 1. Identify the multimedia elements present

Learning
on multimedia products.
2. Build material multimedia with
using hardware and software that

in accordance.
3. Identify basic functions and features
used in authoring software.
4. Build and produce a scene.

5. Integrate the scene by creating links.
Time 40 Jam
205
REFERENCE NOTES
7.3.1 Identifying Content Materials of Multimedia Products
Content material in multimedia products are the elements that are available
in a product whether an Interactive CD or a web-based Application.
Figure 7.3.1
The elements found on the interface of Figure 7.3.1 are text, graphics and buttons
interactive.
Figure 7.3.2
The elements found on the interface of Figure 7.3.2 are text, graphics, audio and
interactive button.
206
7.3.2 Build multimedia materials using appropriate hardware and software.
To produce interactive multimedia products, multimedia elements

need to be built and integrated well with each other. To build
an element, we need to use various software to obtain results
the best.
Table 7.3.1 : Examples of construction for each element

ELEMENT EXAMPLE DESCRIPTION
Constructs a text element

Text
use
Adobe Illustrator
Chart Build graphic elements

use
Adobe Photoshop
Video Build video elements

use
Adobe Primer
207
ELEMENT EXAMPLE DESCRIPTION
Audio Build audio elements

use
Sound Forge
Animation Build animation elements

use
Macromedia Flash
things Construct a button element
Interactive interactive use

Macromedia Flash
208
7.3.3 Identify the basic tool functions and features used in the software
authorship
There are several parts to be aware of in using the application

Macromedia Flash, namely:
Menu Bar
The Menu Bar is a row of menus containing groups of commands that are used
on Macromedia Flash.
Toolbar
The toolbar is a menu line marked with several icon options

a shortcut that can be used to run the menu.
Stage
Stage is part of Macromedia Flash used for
make a presentation or place an object.
209
Timeline
Timeline contains various frames that function to control animated objects.
a. Layer
is an arrangement or layer consisting of a group of objects or
image, text, or animation components. The order of layer positions will be
affects the display order of animated objects.
b. Playhead
is an indicator of the position of the frame when running. Playhead marked
with a red vertical line.
c. Frame
is a part that consists of the stages that will be carried out

alternately from left to right
Toolbox
Toolbox consists of various tools that work to create images, select

objects and manipulating objects
Table 7.3.2: Name and Function of Tools
Ikon tool Nama tool Function
Arrow Tool Select and move objects
Sub Selection Tool Change the shape of an object with edit

points
Free Transform Tool Resize or rotate
shape the object accordingly
Gradient Transform Tool Changes the color of the gradient
210
Lasso Tool Select the part of the object that will

edited
Pen Tool Create the shape of the object freely,
use point as
liaison
Text Tool Generate text, words or
sentence
Line Tool Make a line
Rectangle Tool Create a square shaped object
Oval Tool Create an elliptical or elliptical object

circle
Pencil Tool Draw objects freely
Brush Tool Draw objects freely with

measurement of thickness and shape
already provided
Ink Bottle Tool Coloring the edge line (outline)
Paint Bucket Tool Color objects freely
Eyedropper Tool Take a color example
Eraser Tool Delete an object

Hand Tool Move the display
Zoom Tool Zoom in or out
object or display
Stroke Colour Give or choose color for
edge line
Fill Colour Gives color to an object
Option Tool Additional functions on the buttons
is active
211
7.3.4 Build and produce scenes using tools

and appropriate features
Building the first act (scene).

1. Open the macromedia flash software.
2. Change the background to turquoise green (#33FFFF).
3. Click Modify>Scene to name the scene. The scene window will be displayed.
4. Double click on the word Scene 1 and name the scene as 'menu
main'.
5. Using the text tool, type 'MAIN MENU' above the stage
work)
-Jennis Fon : Showcard Gothic
-Font size: 38
-Font Color : Red (#FF0000)

6. Name the layer as 'MAIN MENU'.
7. Create a new layer and name it as 'KENALI 123'.
212
8. Click the text tool, type 'Kenali 123' above the stage (work stage)
-Jenis Phone : Minion Pro Med
-Font size: 38
-Font Color : Blue (#F0F0F0)

9. Create a new layer and name it as 'LET'S SING'.
10. Click the text tool, type 'Let's Sing' on the stage (work stage)
-Font size: 38

11. Create a new layer and name it as 'QUIZ'.
12. Click the text tool, type 'Quiz' on the stage (work stage)
-Font size: 38

13. Create a new layer and name it as 'PICTURE 1'.
14. Click File>Import to Library. The Import to Library window will appear. Select
suitable picture and click Open.
15. Click Windows>Library>Click the desired picture in the room
library and drag the image onto the stage (work stage).
16. Create a new layer and name it as 'PICTURE 2'. Repeat step 13
and 14.
17. Create a new layer and name it as 'PICTURE 3'. Repeat step 13
and 14.
213
Build the second scene

1. Click Insert>Scene.
2. Name the scene as 'know 123'.
How to set a graphic as a project background

suitable picture and click Open.
2. Click Windows>Library>click the desired picture in the room
library and drag the image onto the stage (work stage).
3. Click the Free Transform Tool to reduce or enlarge the size of the image
corresponding to the size of the stage (work stage).
4. Name the layer as 'LB'.
5. Create a new layer and name it as 'KENALI 123'.

6. Click the text tool, type 'KENALI 123' above the stage (work stage)
-Font Type : Showcard Gothic
-Font Size : 38
-Font Color : Blue (#0000FF)
214
7. Create a new layer and name it as 'NUMBERS'.

picture number 1 and click Open.
9. Click Windows>Library>click picture number 1 in the library column and
Drag the image onto the stage (work stage).
10. On the 'NUMBERS' layer , select timeline 20, right-click the mouse>Insert Keyframe.
11.Repeat the same steps for the LB and KENALI 123 layers .
12. On the 'NUMBER' layer in the 20th timeline , students can insert pictures
number 2 by repeating steps 10 and 11.
**Repeat the same steps for numbers 3 to 10
215
7.3.5 Integrate scenes by making links using tools
and appropriate features
Build a link button
1. Create a new layer and name it 'HOME'.
2. Click the oval tool and draw a small circle at the bottom right
project. Set the color to blue (#0000FF).

3. Click the text tool and type 'MAIN MENU' above the circle
-Font Size : 12
-Font Color: Yellow (#FFFF00)

4. On the 'HOME' layer , select timeline 20, right mouse click>Insert Keyframe.
5. Click the HOME>Insert>Convert to Symbol layer. The Convert to Symbol window will appear
appear.
Name : HOME
Behaviour : Button
Click OK
**See additional note at end of note
216
6. Click on the MAIN MENU button and click on the Action-Button window.
7. Double click on the goto button under Actions>Movie control. On
scene column click on the arrow button and select the main menu.
8. To avoid the built scene working without stopping when

tested, create a new layer and name it as 'STOP'.
9. Double click on the stop button under Action>Movie control. Close

Actions-Button window .
10. Return to the main menu scene .
11. Click the KNOW 123 layer >Insert>Convert to Symbol. Convert to Symbol window
will appear. After setting the settings as in step 19, click OK.
217
12. Double click on the goto button under Actions>Movie control. On

scene column click on the arrow button and select recognize 123.
13. Create a new layer and name it as 'STOP'. Double click on

stop button under Action>Movie control. Close the Actions-Button window.
14. Build a new scene for 'let's sing' and 'quiz' to complete the project.
15. Insert the appropriate audio file into the scene that has been built for
looks more interesting (refer to the additional note how to insert songs into
development project at the end of the note).
16.Test your file by clicking Control>Test Movie/(Ctrl+Enter).
17.Save your file as a presentation.
218
**Additional note
How to create link buttons using text, graphics and
Comman Libraries
a) By using text
2. Click the text tool and type 'MAIN MENU' above the circle
-Font Size : 12
-Font Color: Yellow (#FFFF00)
Text is rendered as
link button
4. Klik layer HOME>Insert>Convert to Symbol. Tetingkap Convert to Symbol
will appear.
Name : HOME
Behaviour : Button
Click OK
219
b) By using Common Libraries

1. Create a new layer and name it as
‘HOME’.
2. Klik Windows>Common Libraries>Buttons.
3. The Library-Buttons window will be displayed.

4. Double click on Arcade buttons and select
arcade button-blue, drag to stage (stage
work). (You can choose any type of button
according to suitability. Arcade buttons only
used as an example).
Link from button

Common Libraries

will appear.
Name : HOME
Behaviour : Button
Click OK
220
c) By using graphics
2. Click File>Import to Library. Select the graphic you want to make the link button
and click Open.
3. Click Windows>Library>click the desired graphic in the library column
and drag the graphic onto the stage (work stage)
Graphics are
used as link buttons
will appear.
Name : HOME
Behaviour : Button
Click OK
221
How to insert audio into a development project

a) Create a new layer and name it 'SONG'.
b) Click File>Import to Library. Select audio in mp3 format and click Open.
c) Click Windows>Library>click audio in the library room and drag the audio
on stage (work stage).
222
ACTIVITY
1. Authoring software
ASSIGNMENT 1
Pupils produce a simple multimedia project

on 'Myself' which contains the cover and
link between scenes .
ASSIGNMENT 2
Pupils produce a multimedia project based on paper

work that has been carried out on Learning Standards
7.1.6 (Analysis of Project Requirements).
223
TRAINING / ASSESSMENT
1. State the type of element found in Figure 1 below
figure 1
a)……………………………… b)……………………………
c)……………………………… d) …………………………..
2. Complete the table below:
Schedule 1
Generate text, words

or verse
Color objects freely
Eyedropper Tool
224
3. Build an interactive teaching and learning material for one point

the lesson you choose by including elements of text, graphics, audio,
videos, animations and link buttons using software
appropriate authorship.
225
Student Name:
Year:
Class :
Standard 7.3 Multimedia Product Development

Content
Standard 7.3.1 Identify the content of multimedia products

Learning:
7.3.2 Build multimedia materials by using
appropriate hardware and software
7.3.3 Identify the function of the tool and its original features
used in authoring software
7.3.4 Build and produce scenes with
use appropriate tools and features
7.3.5 Integrate scenes by creating
links using appropriate tools and features
by using authoring software
226
Achievement
Skilled
Skilled
Identify multimedia elements
1 found in the product
multimedia
2 Build multimedia materials

Identify tool functions and features
3
basis used
Build and produce scenes
4
(scene)
Integrating acts (scenes)
5
by creating a link button
DECISION
DATE

Date
Date
227
MODULE 7.4
Standard 7.4 Testing and Assessment

content:
Standard 7.4.1 Testing multimedia product prototypes through:

learning: i. Alfa
ii. Beta
7.4.2 Improving multimedia products.
7.4.3 Produce final multimedia products based on

selected presentation mode or platform.
Objectives: 1. Explain the two types of product prototype testing
multimedia.
2. Explain the improvement of multimedia products.
3. Produce final multimedia products based on
Time: 32 jam
228
REFERENCE NOTES
7.4.1 Testing Multimedia Product Prototypes
This test is done to ensure that the product or prototype meets the requirements
which has been planned. Every product needs to be tested as often as possible
so that no fault is found with the product.
Various testing approaches should be used:

1. Concept testing by the target group.
2. Prototype
3. Peer review or external review of the design document
shape.
4. Usability testing
5. Field trials
6. Acceptance exam
There are two types of tests that are usually done to test prototypes
namely Alpha Test and Beta Test.
229
Table 7.4.1: Alpha Test and Beta Test
Alpha Test Beta testing
• Alpha test is a phase test • Beta testing is the second phase of testing
first for product testing. for product testing after the Test
Alpha implemented.
• Tests are conducted on the website • Beta testing is carried out involving
product builder. customer or product user.
• Aspects of functionality and usability • Aspect can trust,
the product will be tested. safety and soundness will
tested.
• Tests Alfa is for • In addition to product quality aspects, input/

ensure product quality before feedback from users
Beta testing is underway. is also taken into account to ensure

the product can be used in situations
real.
• Critical problems or fixes • A large number of problems or
can be repaired by the builder collected feedback
products with immediate effect from Test Beta will
Alpha Test. implemented on that version of the product

will come.
230
Sample Alpha Testing Form
INTERACTIVE LEARNING CD EVALUATION FORM
Instructions: Circle your response.

'1' is a Weak response; '3' is a simple response; '5' is
Best response .
1 Text is clear and readable. 1 2 3 45
2 Graphics are clear and appropriate. 1 2 3 45
EXAMPLE
3 Colors used effectively. 1 2 3 45
4 The audio used is appropriate and effective. 1 2 3 45
5 Interesting animated movements. 1 2 3 4 5
6 Interactivity (such as roll over, click the button) 1 2 3 45
simple and functional.
7 Links on each topic and page 1 2 3 45
wanted easily.
8 Icons and clear and easy guidance 1 2 3 45
understood.
9 The application guide is clear and easy to understand. 1 2 3 45
231
Example of Beta Testing Form
Organization logo
INTERACTIVE LEARNING CD ASSESSMENT
Thank you for helping us with the CD rating
this interactive learning. Because your opinion is very
appreciated, we ask that you take a moment to
answer the following

interactive learningquestions. Your response
CD provided, is very important
please respond in By using
to the following the
questions
honestly and sincerely. our efforts to improve the quality of learning
CD design
This.
Instructions: Circle your response.
'1' is a Weak response; '3' is a simple response;
EXAMPLE
'5' is the Best response.
1 Instructions are clear and easy to understand. 1 2 3 45
2 Presentation attracts attention. 1 2 3 45
3 The layout of the screen display is attractive and suitable 1 2 3 4 5
with the target group level.
4 Information is arranged in an orderly manner. 1 2 3 45
5 Link button in appropriate position 1 2 3 45
and works.
6 Sound effects that are interesting and suitable with 1 2 3 45
contents of the interactive CD.
232
7.4.2 Multimedia Product Improvements
Improvements can be made after the testing & evaluation process

to the product produced. Evaluation example from: (5 multimedia elements)
i. Attractive screen design
i. Text is clear and readable

iii. Attractive and effective graphics
iv. The colors used are effective
v. The audio used is effective
i. Interactivity (such as roll over, button click) is simple and adequate
vii. Links on each topic and desired page are easy
viii. Icons and guides are clear and easy to understand
ix. The application guide is clear and easy to understand
7.4.3 Multimedia Product Mode or Platform
There are two [2] types of product presentation modes or platforms which are online
(on-line) and offline (off-line).
The online presentation mode or platform is the use

information and communication technology or connected devices
internet network to facilitate the way the presentation is conducted. Example
YouTube or Google Drive.
While the offline presentation mode or platform refers to

the use of devices that are not connected to the internet network.
For example, CD or DVD ROM.
233
Convert Presentations In .fla Format to .exe Format.

The result of the work that has been saved in a Flash file with the .fla format is still there
can be modified or edited. For a work presented
in the form of multimedia, it must be published in .exe format.
The results of work published in .exe format cannot be modified or

edited. The .swf and .html formats require Flash Player which is available in
Flash MX to play it while the .exe format does not require Flash
Player and you can play it on any computer.
Steps:
a) Before the work results are published, you need to determine the settings
First, select File > Publish Settings
b) The Publish Setting window appears and complete as follows. Please
make a choice on:
• Windows Projector for .exe format
c) Once the Publish Setting is set, you can publish in a way

Select File > Publish
d) You can view your presentation in .exe format with

Find the location of the file in your computer folder .
234
e) Ready multimedia production materials may be distributed via

compact disc (CD) or digital versatile disc (DVD) use
format.exe to be played via a CD or DVD player.
235
Steps to Burn a CD Without Software

Steps:
1. Buka File Explorer CD/DVD Drive
2. Insert the CD / DVD ROM
3. Provide a Title and select With a CD/ DVD Player
236
4. Copy and Paste the desired file
5. Right click and select Burn to Disc

6. Click Next for the Burning process
7. The Burning process will run and wait until it is finished.
237
8. Burning process is complete (Finish)
238
ACTIVITY
1. Electronic Materials
2. Internet Reach
TASK
Students are required to find mode or platform information

presentation of the following multimedia products:
(i) Offline (off-line)
WORKING STEPS
1. Pupils look for information related to the presentation mode or platform

multimedia products offline (off-line).
2. Pupils make a Powerpoint presentation to explain:

a) Advantages of offline presentation mode (off-line).
b) Examples of offline presentation mode (off-line).
239
1. State two types of multimedia product testing:

i. ...................................................
ii. ...................................................
2. State the three characteristics of Alpha and Beta testing conducted on products
multimedia:
Alpha Test Beta testing
240
Student Name:
Year:
Class:
Standard 7.4 Testing and Assessment

Content:
Standard 7.4.1 Testing multimedia product prototypes through:
Learning:
i. Alfa
ii. Beta
7.4.3 Improving multimedia products

7.4.4 Produce final multimedia products based on
Achievement
Was Not yet Notes
Valued items
Skilled
Skilled
Explains multimedia product prototype testing.

1
Explain the improvement of multimedia products.

2
Produce the final multimedia product of the platform based
3
selected mode or presentation. on the
DECISION
DATE
241

Date
Date
242
MODULE 7.5
Standard 7.5 Resource management and distribution

content:
Learning 7.5.1 Explain the importance of file and folder management

standards:
product construction materials.
7.5.2 Provide user manuals.
7.5.3 Propose product distribution design
based on:
i. Interactive CD
i. Website/kiosk
iii. Mobile application
7.5.4 Produce a product distribution design that
selected based on the recommendation paper.
7.5.5 Provide development project documentation

developed multimedia products.
Objective 1. Explain the importance of file and folder management

Learning
product construction materials.
2. Provide a user manual.
3. Produce a product distribution design
based on the proposal paper.
4. Produce development project documentation
Time: 28 jam
243
REFERENCE NOTES
7.5.1 Explain the importance of file and folder management of development materials
product.
Allows the information contained in it to be controlled and accessed

quickly and accurately when needed.
Easy to reach Easy to search
The Importance of Management

Fail
Saves time Files are kept more organized
Saves storage space
244
A guide that contains information to implement something with

orderly way. What should be in the product user manual
multimedia is:
System Requirements
Table 7.5.1 : Examples of system requirements
Component Minimum Specifications
Operating System Windows 7
Processor Pentium or AMD
Main Memory (RAM) 1 GB 32-bit
Storage Space 256 GB
Display LCD Monitor
Basic outline of the user manual

Here are some examples of displays available in the software
interactive multimedia CD titled Knowing the Human Skeleton and the Senses.
Main Menu Display
Figure 7.5.1 : Main Menu Display
245
Table 7.5.2 : Examples of user manuals
Navigation Button Information
To go to the Main Menu scene
To go to the Mind Test
Stop or play background music
Exit the interactive CD
To go to the Head Frame scene
To go to the Body Frame scene
To go to the Moving Frame scene
To go to the Mata scene
To go to the Ears scene
To go to the Nose scene
To go to the Tongue scene
To get to the Leather scene
246
To go to the Motion Joint scene
7.5.3 Propose circulation design based on:
(i) Interactive CD
Figure 7.5.2 : An example of an interactive CD design
247
(ii) Website/kiosk
Figure 7.5.3: Example of website design
(iii) Mobile applications
Figure 7.5.4 : Example of mobile application design (icon)
248
7.5.4 Produce the selected product distribution design based on paper

proposal.
The product distribution design can be generated using software

image manipulation like Adobe Photoshop.
Figure 7.5.5 : Example of CD/DVD Label design and box label
249
7.5.5 Provide project documentation for the development of a multimedia project

developed.
Table 7.5.3 : Checklist

Was Information Yes / No
1
Project proposal paper
a) Title
b) Problem statement
c) Objective
d) Kick project
e) Target users
f) Product type
g) Presentation platform
h) Time table
i) Task list of team members
j) Cost budget
k) Conclusion
2 Flow chart
3 Sketch the storyboard
4 A complete and correct copyright form
5 Interactive multimedia products
6 Test Forms:
i) Alfa
ii) Beta
7 User manual
8 Multimedia product packaging (CD/DVD labels
and box label)
250
ACTIVITY
1. Image manipulation software
TASK
TASK
a) Students produce circular designs for selected products

b) Students present their work in front of the teacher and
friends.
251
1. State two importance of file management:
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
2. State three product distribution designs:
a) _____________________________________________________________________
b) _____________________________________________________________________
c) _____________________________________________________________________
252
Student Name:
Year:
Class
Standard 7.5 Resource management and distribution
Content:
Standard 7.5.1 Explain the importance of file and folder management
Learning: product construction materials.
7.5.3 Propose product distribution design
based on:
iv. Interactive CD
v. Laman web/kiosk
i. Mobile application
7.5.4 Produce the selected product distribution design
7.5.5 Provide development project documentation
developed multimedia projects.
253
Achievement
Skilled
Skilled
Explain interests
1. file and folder management of materials
product development.
2. Provide a user manual.
Produce a handout design

3. paper based products
proposal.
Produce project documentation
4.
multimedia project development.
DECISION
DATE

Date
Date
254
GLOSSARY
Scene A small part of a scene (drama)

which begins with the appearance
new actor
Dappled light Centralized or focused light.

Close-up A catch taken from a distance
close to focus part-
certain parts such as the head,
shoulder, face or any other object
closely.
Drawing Tablet Enabled input devices

users draw images, animations and
graphics using a special pen ie
The Stylus Pen is just like the user
draw on paper.
Dominant Powerful or influential.
AND
Extreme long-shot Method of capturing images or

object from the farthest distance.
255
Flash Player Computer software used

to play the content
developed using the platform
Macromedia Flash/ Adobe Flash.
Hand-held camera The camera used for

make a film or video recording
which is held with hands without

using a tracing tool.
Special effects Effect.
Coordinate Position points in a graphics system

which uses angular reference
and the distance from a central point as
way to determine position
point.
Complex Complicated, Difficult (Not easy or not

clear).
Dialog box An enabling screen component
users create questions
or get information
about a system.
256
Route The trajectory of an object

move.
Camera lens Kanta kamera.
Long shot Method of capturing images or

objects from a distance.
Medium shot The technique of capturing images

shows where someone is
in a large frame,
for example, from head level to
waist
Simulate Reproducing certain conditions
for training or study purposes.
O
YOU Abbreviation for Operating System
which refers to system software
operations used by a
Computer.
257
Paksi-x The horizontal axis in coordinates

Cards.
Paksi-y Deep vertical axis

coordinate Cartes.
Paksi-z The third axis is perpendicular to
x-axis and y-axis in the system
three-dimensional Cartesian coordinates.
Scaling Incarnation Which involves
image resizing versus size

object. The shape of the image remains the same
object. Size changes image
compared to objects according to scale

certain and has a center or
fixed point.
Round An incarnation that occurs when
each point on the diagram rotates on
center of rotation through a certain angle
and a certain direction.
Realistic In relation to the statement or

show situation Which
actually.
A string A network of several things
associated
258
S
Plane Flat surface.

Border A sign indicating a limit
an area or boundary.
Transformation The process of changing positions,

orientation or size of an object
through translation, reflection, rotation
and enlargement.
Translation Transfer of all points on one
plane according to direction and magnitude
a vector.
259
AUTHOR'S PANEL
1. Associate Professor Dr. Mr. Rina Mustaffa Universiti Putra Malaysia
2. Mrs. Siti Noraishah binti Mueedin SMK Ayer Keroh,

Malacca
3. Mr. Mohd Hambali bin Ismail SMK Dato' Onn,

Kuala Lumpur
4. Mrs. Nurul Huda binti Azizi SMK Menjalara,

Kuala Lumpur
5. Puan Norazurai binti Sari SMK Bandar Kerayong, Bera

Pahang
6. Mr. Rosiadi Bin Tajudin SMK Gadong Beaufort, Sabah
7. Mr. Brother Abdul Rahman bin Old Trusan SMK,

Brother Abdul Hamid Sarawak
8. Puan Siti Hajar binti Mohd Ghazali SMK Darul Ehsan,

Selangor
9. Mr. Muhammad Hafiz bin Hassan Kangkong High School,

Kelantan
10. Miss Jah binti Juhaini SMK Bukit Garam

Kinabatangan, Sabah
11. Puan Siti Asiah binti Mohamad Jarami SMK Bandar Baru Sg Buloh,
Selangor
12. Mrs. Azfa Ilyana binti Ishak SMK Taiping, Perak

REFERENCE
Mayankjtp. (2020, January 21). 3D Rotation in Computer Graphics. Downloaded from https://
www.tutorialandexample.com/3d-rotation/
Alamia, M. (1999). World, View and Projection Transformation Matrices. Downloaded from http://
www.codinglabs.net/article_world_view_projection_matrix.
aspx
Singhal,A.(2019, September 18). 3D Rotation in Computer Graphics | Definition | Examples.Dimuat turun

daripada https://www.gatevidyalay.com/3d-rotation-in-computer-graphics-definition-examples/
Autodesk,Help.(2018, June 11). Using Transforms. Downloaded from https://

knowledge.autodesk.com/support/3ds-max/learn-explore/caas/CloudHelp/cloudhelp/2018/ENU/
3DSMax -
Basics/files/GUID-B287B821-8C01-41E3-8B5F -8173E765BF97-htm.html
The MathWorks, Inc. (2002, June 17). Defining the View (3-D Visualization). Downloaded from http://
www.ece.northwestern.edu/local-apps/matlabhelp/techdoc/visualize/chview6.html
Chang, A. (2018, October 5). The Process of 3D Animation. Downloaded from https://www.media-freaks.com/
the-process-of-3d-animation/
Oh well, Studio. (2017, December 21). Camera shot in animation. Downloaded from http://ohelstudio.com/
2015/07/08/camera-shot-dalam-animasi/
Ohio State University,U. (2016, Disember 26). Cinematography | 3D Animatio.

Downloaded from https://u.osu.edu/animation/cinematography/
Merroz,M.(2019 Mac 25). Camera animation: 4 Tips for Animating a 3D Camera.
Downloaded from https://www.bloopanimation.com/camera-animation/
3D Ace Studio(2019, April 23). How to Light a 3D Scene. Overview of Lighting Techniques. Dimuat
turun daripada https://3d-ace.com/press-room/articles/how-light-3d-scene-overview-lighting-
techniques
Oh well, Studio. (2015, December 12). Lighting in 3D Animation. Downloaded from http://ohelstudio.blogspot.com/
2015/07/pencahayana-dalam-3d-animasi.html
260
https://www.guru99.com/alpha-beta-testing-demystified.html - Alpha Testing Vs Beta

Testing: What's the Difference?
https://www.guru99.com/alpha-testing.html - What is Alpha Testing? Process, Example
https://www.softwaretestinghelp.com/what-is-alpha-testing-beta-testing/ -Alpha Testing

And Beta Testing (A Complete Guide)
https://steemit.com/art/@zord189/animationkeyposesin-betweens-xx4r34hcfe
https://www.youtube.com/watch?v=SU3zexN_h1I
https://www.wikihow.com/Make-a-Flipbook
261

KSSM 2020 Bahan Pembelajaran MPV Produksi Multimedia Tingkatan 5 - COMPRESSED

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

KSSM 2020 Bahan Pembelajaran MPV Produksi Multimedia Tingkatan 5 - COMPRESSED

Uploaded by

Copyright:

Available Formats

Machine Translated by Google

EYE LEARNING MATERIALS

STANDARD SECONDARY SCHOOL CURRICULUM

DEPARTMENT OF EDUCATION RESOURCES AND TECHNOLOGY

STANDARD SECONDARY SCHOOL CURRICULUM

DEPARTMENT OF EDUCATIONAL RESOURCES AND TECHNOLOGY

Achieve closer unity among the entire community;

Maintaining a democratic way of life;

Creating a fair society where the prosperity of the country will be

Ensure a liberal approach to its rich cultural

Build a progressive society that will use modern science and

THEREFORE WE, the people

(Source: Department of Information, Ministry of Communications and Multimedia Malaysia

© Ministry of Education Malaysia

MODULE 6 ANIMATED ELEMENTS

6.1 Basics of Animation 2

6.3 Animasi karakter 2D 43

MODULE 7 MULTIMEDIA PRODUCT DEVELOPMENT

7.1 Project Requirements Analysis 148

7.2 Multimedia Product Design 172

7.3 Multimedia Product Development 205

7.4 Testing and Assessment 228

7.5 Resource Management and Distribution 243

Assalamualaikum Warahmatullahi Wabarakatuh and Peaceful Greetings.

This Teaching and Learning Material (PdP) was developed

Therefore, it is expected that the wishes contained in the Production curriculum

Standard 6.1 Basics of Animation

Standard 6.1.1 Explain the need for animation in

Learning: multimedia presentation.

6.1.2 Explain the concept of animation.

6.1.3 Distinguish types and techniques of animation:

6.1.4 Produce traditional flipbook animation.

Objective 1. State the need deep animation

Learning multimedia presentation.

2. Explain the concept of animation.

3. Comparing different types and techniques of animation

4. Produce traditional flipbook animation

6.1.1 Animation Requirements in Multimedia Presentations

In multimedia presentations, animation is one of the elements

able to increase the attractiveness of a multimedia product or software.

Animation refers to a visual display that is dynamic. Among the requirements

animation in multimedia presentation is

• Makes an object or text appear alive but is originally static.

• Being able to explain something that is difficult to convey more easily

• Able to give emphasis to allow the audience to focus on the content

the content you want to convey.

6.1.2 Animation Concept

Animation simply refers to the method of giving an illusion

graphics that are displayed quickly in the form of a series of frames .

6.1.3 Types of Animation

ü Before the development of computer animation technology, all animation

Traditionally done using hands.

ü Each moment of animation requires around 20 frames.

ü For the production of animation for two minutes, an animator

requires around 2400 image sheets.

Also known as computer animation.

ü 3D animation is also animation that involves objects with

Hand drawn animation Path animation (path animation)

Stop motion model animation Screen animation or object transitions

Animasi thaumatrope Animation of characters and icons

Traditional Animation Techniques

• Hand Painted Animation (Handrawn)

Figure 6.1.1: Hand drawing animation