QUARTER 2, MODULE 7

I
 Media and Information Literacy
Self-Learning Modules
Quarter 2 – Module 7: Producing a motion-based and manipulative-based
presentation
First Edition, 2021

Republic Act 8293, section 176 states that: No copyright shall subsist in any work of the
Government of the Philippines. However, prior approval of the government agency or office
wherein the work is created shall be necessary for exploitation of such work for profit. Such
agency or office may, among other things, impose as a condition the payment of royalties.
Borrowed materials (i.e., songs, stories, poems, pictures, photos, brand names, trademarks,
etc.) included in this module are owned by their respective copyright holders. Every effort
has been exerted to locate and seek permission to use these materials from their respective
copyright owners. The publisher and authors do not represent nor claim ownership over
them.

Published by the Division of Romblon

Superintendent: Maria Luisa D. Servando, Ph.D., CESO VI
OIC-Asst. Superintendent: Mabel F. Musa, Ph.D., CESE

Development Team of the Module

Writer: April Joy C. Mendezabal

Content Editor: Cecille M. Gado
Rhea G. Gallos
Content Evaluator: Melicia R. Galicia
Marisol F. Tapalla
Illustrator: Romisa Monica R. Galicia
Layout Artist: Rosalyn M. Wagwag
Cover Design: Apryl C. Bagnate
Cover Illustrator: Albert Xavier M. Merano
Management Team: Marisol F. Tapalla
Melicia R. Galicia
Zandro Estrada
Division Management Team: Maria Luisa D. Servando, Ph.D., CESO VI
Mabel F. Musa, Ph.D., CESE
Melchor M. Famorcan, Ph.D.
Apryl C. Bagnate- Project Coordinator
Ruben R. Dela Vega
Leopoldo M. Mago Jr.
Leona Lynn F. Famorcan

Printed in the Philippines by

Department of Education – Region IV-B Schools Division of Romblon

Office Address: Brgy. Capaclan, Romblon, Romblon

Telefax #:
E-mail Address: deped.sdoromblon@deped.gov.ph

II
 PRODUCING A MOTION-BASED
LESSON
PRESENTATION

Hello Senior High learners! In this lesson you will learn to:
1. Identify the design elements and principles in creating a motion-based
presentation.
2. Produce a creative motion-based presentation using design principle and
elements. MIL11/12MIM-IVef- 18

Do you still remember the different design principles and elements of text and audio
from the previous lesson? You can apply all of them in motion media because it gives more
power and life to the content itself and to the audience. Later on you will clearly understand
everything.

Discussion of the Lesson

What is motion media?

1. A form of media that has the appearance of moving text and graphics on a display.
Its purpose is to communicate information in multiple ways (Roblyer 2006).
2. An integrated sight and sound kinetic media. (Shelton,2014)
3. It can be a collection of graphics, footage, videos. It is combined with audio, text,
and/or interactive content to create multimedia.
4. In essence, it is a visual media that gives the appearance of movement.

Design elements of motion media

A. SPEED- can be constant or variable. The tone of the movement can be highlighted
by the speed coupled with music. A fast movement gives vigor and vitality, intensifying
emotions. A slow movement connotes lethargy, solemnity or sadness.
B. DIRECTION- can indicate a movement from one direction to another. It can also refer
to the growing or shrinking of an object. As objects move, the background must remain in
scale with the object.

1
 C. MOTION PATH- refers to the route that the object will take. It shows the change in
direction of a movement. It is important to note the triggers to the change in direction of an
object. These triggers are often key objects or events in a story. •
D. TIMING- can be objective or subjective. Objective timing can be measured in
minutes, seconds, days, etc. Subjective timing is psychological or felt. Objective timing is
used to produce subjective timing. Timing can be used to clarify or intensify the message
or the event. Using a pause can help time the events.
Example of timing for text is running text during local news. Or use of movement in
showing credits for a movie shown at the beginning or end of a movie.

Scan to know Or click this link:

more about
motion https://vimeo.com/ 7440725.
design

Design principles in creating movement

1. Speed, direction and timing should depict natural laws of physics. This included
trajectories, impact on objects and reactions of the environment.
For instance, if you have a heavy, plodding beat, movements that correspond with the
downbeats of the song can make the contents of the video feel epic, confident, and
powerful.
2. Timing affects recall. Fast movement sends much information slow movement
provides emphasis and lasting recall.
3. Transitions are used to switch between scenes. Having a clear start and finish in
your motion path or scenes Using neutral colors at the start or end of a scene is a good
method for creating the right mindset. It is important to know which type of transition to
use as this sets the tone for the next event and should provide a smooth connection
from one event to another.
4. Sound and color adds depth and meaning to movement.
5. Cartooning your graphic and text provides dynamic movement. This can be done by
using the following movements: stretching, rotating, and squashing
6. Blurring can be used in different ways. In animation, blurring can provide the illusion
of fast movement. In videos, it is often used to censor information for security or
decency.

Or click this link:

Scan to know
more about https://www.yumyumvideos.com/5-of-the-best-examples-
animated video of-animated-video-advertising-wp/

2
Different Formats Of Motion Media

 FILM- also called a movie picture, is a series of still or moving images.

 ANIMATION- a scene from the animated film.
 SHORT FILM- a trailer of a short film, ninety seconds about a surveillance expert taking
on an assignment that might be his downfall.
 MOTION PICTURE IN TELEVISION- television is a telecommunication medium for
transmitting and receiving moving images that can be monochrome (black and white) or
colored, with or without accompanying sounds.
a. Commercial advertisement on TV.
b. Philippine melodrama
c. Reality show
d. Game show
e. Talk show
f. Television news

 INTERACTIVE VIDEO -usually refers to a technique used to blend interaction and linear
film or video.
a. Customizable Online Interactive Videos -Customizable videos allow the user to
adjust some variables and then play videos customized to the user’s particular
references. However, the user does not actually interact with the video while it is
playing.
b. Conversational Online Interactive Videos - conversational videos allows the user
to interact with a video in a turn-based manner, almost as though the user was
having a simple conversation with the characters in the video
c. Exploratory Online Interactive Videos-exploratory videos allow the user to move
through
d. Others (i.e. phone gaming, computer games, cinema) live stream is a platform
that allows users to view and broadcast video content using a camera and
computer through the internet. It offers a free ad-supported service ad multi-tiered
premium services.

EXERCISE 1

Directions: The following are examples of motion picture in television, select one of your
favourite and watch it.
A. Commercial advertisement on TV
B. Philippine melodrama
C. Reality show
D. Game show
E. Talk show
F. Television news

3
Then, answer the following questions. Write your answers on your study notebook.
 What is the title of the media?
 What principles are present in the video?
 What elements are present in the video?
 Were the elements and principles being utilized well in the media? Why? Why
not?
 Is the animated video effective? Why?

EXERCISE 2.
Directions: Read carefully the following questions and write the correct answer on the
space before the number.

______1. How many design principles and elements do the motion media have?
a. 7 c. 9
b. 8 d. 10
______2. What principles in movement will you apply if you want a graphic motion?
a. Timing c. Blurring
b. Cartooning d. Speed
______3. This element can show movement from one way to another?
a. Direction c. Motion path
b. Speed d. Timing
______4. What principle will you use if you want to switch scenes?
a. Speed c. Transition
b. Cartooning d. Blurring
______5. It is frequently used to censor information for security or decency.
a. Timing c. Blurring
b. Cartooning d. Speed

Instruction: Please write your learning from the above discussion. Write your learning in
your notebook/answer sheet.
Upon reading the lesson above, I learned that…
_________________________________________________________________________
_____________________________________________________________________
and realized that…
_________________________________________________________________________
_____________________________________________________________________

4
Multiple Choice. Directions: Read carefully the following questions and choose the letter of
the correct answer. Write your answer before the number.

______1. Which of the following does not belong to the group?

a. Timing c. Blurring
b. Cartooning d. Motion path

______2. What principle gives depth and meaning to the movement of a motion media?
a. Sound and color c. Transition
b. Blurring d. Timing

______3. In which design element do this statement applies. Subjective timing is

psychological or felt. Objective timing is used to produce subjective timing?
a. Timing c. Motion path
b. Direction d. Speed

______4. How many design elements does the motion media have?
a. 6 c. 4
b. 5 d. 3

______5. Why is it important to know which type of transition to use in your motion media?
a. Because this give more power to the content of a motion-based presentation.
b. Because this sets the tone for the next event and provides a smooth connection
from one event to another.
c. Because this sets the mood of the events from one way to another and gives
attraction to the audience.
d. Because this provides more stylishness to the movements of every characters and
objects.

______6. A slow movement in a motion media connotes the following except:

a. solemnity c. sadness
b. lethargy d. vitality

______7. It is basically refers to the route of the objects in a motion media.

a. Direction c. Speed
b. Motion path d. Timing

______8. Which of the following formats of motion media gives the user an interaction with
an audio-visual in a turn-based manner and having a simple conversation with the
characters in the video?
a. Film c. Animation
b. Motion pictures in TV d. Interactive video

5
______9. What format of motion media do advertisement applies?
a. Motion pictures in TV c. Interactive video
b. Animation d. Film

______10. Why is there a need to understand motion media and information?

a. Because the movements of graphics and texts give an additional way to let the
audience understand more the video.
b. Because it is very helpful to make a motion media most especially for the students.
It will give more detailed and clear communication to everyone.
c. Because the movement of the combination of texts and graphics communicate
information in multiple ways. It is also multisensory in such a way that it stimulates
the audience sight and hearing.
d. Because the motion media and information communicates to the audience itself
through the movements of graphics and texts.

PRODUCING AN ANIMATION ADVERTISEMENT!

DIRECTIONS: Produce an animation advertisement on the importance of using mobile
phones in this time of modular learning. Make sure to apply all the design principles
and elements of motion media. Your animation advertisement should last for about 2-
3 minutes only.

Some of the applications that you can use:

1. PicsArt Animator (you can download
and install this from play store or app
store)

2. Anime Maker (you can download and

install thisfrom play store or app store)

You can save and submit your output by choosing one from the following options:
 Mobile phone (you can submit your output through SHAREit or Bluetooth to your
teacher)
 Flash drive (you can hand over your output to your teacher)
 Facebook (you can upload your output to our FB group)
 Messenger (you can send your output directly to your teacher)

6
 Criteria 4 3 2 1
Content Content is clear Content is clear Content is not Content is not
and relevant to with some clear has some relevant
audience confusing relevance
points, has
some
relevance to
audience
Design Motion design Motion design Motion design Motion design
maximizes creates some creates some is inappropriate
audience audience audience and not helpful
impact impact impact
Use of motion Motion design Most motion No principles &
Use of motion design principles & principles & elements used
design principles & elements are elements are
principles and elements are appropriate. appropriate
elements appropriate. Layout is
Layout is cluttered.
pleasing to the
eye.
The given time The time has The The given time
Timeliness is observed exceeded to its advertisement is not followed
and followed maximum did not meet
the given time

7
 PRODUCING A MANIPULATIVE-
LESSON
BASED PRESENTATION

Hello Senior High learners! In this lesson you will learn to:

1. Produce a creative presentation on manipulative/interactive, using design

principles and elements. MIL11/12-MPIM-IVgh-22

Why do you think Facebook is very popular today? Well, aside from its popularity and
having a wide audience, it is also easy to use. I am sure that you have your own Facebook
account too. Did you know class that by simply adding a friend, confirming a request, hitting
the love, wow, care and like button to show approval for another’s profile picture, and
commenting on your friend’s videos and photos can be considered as manipulative or
interactive? Did you know that most of the time you were being manipulated? Later on as
you read the lesson you will understand more of everything. Are you ready? Let’s start now.

What is manipulative or interactive media?

 May be loosely defined as any material, program or application that people use to
formulate new information to aid learning.
 These are tools used to aid in hands-on learning. They can be physical objects or
computer programs which learners can manipulate in order to grasp an idea, and
gain understanding or mastery of given concepts. These tools assist students to
advance their knowledge through their visual and kinesthetic senses.
 The use of manipulative is constructivist because students are actively engaged in
discovery during the learning process. A teacher provides the materials along with a
basic direction, but students should be allowed to explore the materials and ask
questions before and during the lesson.”
 We count with our fingers, use hand signs like thumbs up, ok, quit, etc. the “basics”
of manipulatives media and information is innate in us. Learning through this medium
is natural. Learning through this medium is also engaging and affective as well.

8
INTERACTIVE MEDIA
1. Interactive Media – a method of communication in which the program's outputs depend
on the user's inputs, and the user's inputs in turn affect the program's outputs. Interactive
media engage the user and interact with him or her in a way that non-interactive media
do not. Websites and video games are two common types of interactive media.
(Definition taken from Investopedia via http://www.investopedia.com/terms/i/interactive-
media.asp)

Interactivity – the communication process that takes place between humans and
computer
Software. The most constant form of interactivity is typically found in games, which need
a continuous form of interactivity with the gamer. Database applications and other
financial, engineering and trading applications are also typically very interactive.
(Definition taken from Technopedia via
https://www.techopedia.com/definition/14429/interactivity)

One area where interactivity is most useful is in online training. Interactivities in this
area allow learners to interact with the course in terms of action and/or thinking.
The following below are examples of interactive media and how you interacted with
them.
 Social media (e.g. Facebook) - sending friend request; accepting friend request;
liking and commenting on a friend’s post; following a site; uploading a file;
chatting with a friend; sending private message.
 Online booking – searching, booking and paying a flight, checking-in, etc.

9
Examples of interactive media
In today's digital era, people are surrounded by interactive media. Everywhere you look,
you will find an example of these forms of communication.
 Social networking websites such as Facebook, Twitter, and Instagram are examples
of interactive media. These sites use graphics and text to allow users to share photos
and information about themselves, chat, and play games.
 Video games are another type of interactive media. Players use controllers to
respond to visual and sound cues on the screen that are generated by a computer
program.
 If you have a mobile device like a smartphone—and chances are that you do—you
use apps or applications. These forms of interactive media can help you figure out
the weather, direct you to the desired location, choose and respond to news stories
in which you are interested, and allow you to shop. The possibilities are endless.
 Another form of interactive media is virtual reality, or VR. VR gives users a
completely immersive experience, allowing them to delve into a world that is an
almost carbon copy of reality. The only difference is that this world is digital.
 As technology becomes more advanced, interactive media will become even more
immersive, broadening what people are able to do. After all, smartphones and the
internet are fairly recent inventions.

10
Note: There are still a lot of sample images from the internet. If you have “mobile data”,
please make time to search and look for them.
Did everything I say earlier make sense? I hope you are on your way to
understanding manipulative or interactive media. Let us now proceed to its design principles
and elements:

Design principles for interactive media

When designing interactive media content, consider the following principles.
1. USER-CENTERED DESIGN
What you are presenting with interactive media is dictated by the user, otherwise
known as the audience. You must know your audience: how large it is, who they are,
where they come from, what their goals are, and what obstacles they may face when
accessing your interactive media content. Some variables to consider include:
O Language and culture
O Impairments
O Interests
o Experience with technology

2. PURPOSE
What is the main purpose of your interactive media? Is it a corporate website, a
software application, an entertainment site, a game, or an instructional
demonstration? Having a clearly described purpose will help you consider different
technological, graphic, and usability factors.

3. TECHNOLOGY
Be aware of the technical requirements it will take to implement, deliver, and access
your presentation. Elements to consider are:
1. Web servers
2. Browser and e-mail security
3. External application needs, such as Java
4. Media playback components, such as sound cards and speakers
5. Display sizes (Will you be designing for more than one screen size or device?)
6. Processor speeds and other characteristics of the delivery devices (computers or
mobile devices, for example)

4. CONTENT
The content of your application takes into consideration all other design principles.
The content should be appropriate for your audience, and it should align with the
application’s purpose. The content should be well organized, consistent in
presentation, and technologically suited for your users. Make sure the media you
include enhances your message and does not distract from it. Increase the
readability of text elements by applying appropriate font types, sizes, and colors. Use
graphics and photographs that are meaningful and that complement other content.

5. CONSISTENCY

11
 As you design your content, use a consistent frame theme, color scheme, and
navigation system. Such consistency not only unifies the design, it helps your content
be more usable, because users can recognize and use familiar elements. For
example, if the interactive media being created is for a website, be sure to use the
same button style and menu system for all the pages on your website.

6. GUIDE
For most applications and web content, use simple navigational objects. Use
standard designs for all buttons, scroll bars, and menus.

7. CONTROL
Provide simple navigational objects for the users. Use standard designs for all
buttons, scroll bars, menus, and language, and do not hide navigational elements.
Consider accessibility guidelines when designing the navigational system.

Design elements for interactive media

Unlike traditional media, interactive media is meant to enhance a user's experience.
In order to do so, an interactive medium will require one or more of the following elements:
 Moving images and graphics
 Animation
 Digital Text
 Video
 Audio
A user can participate by manipulating one or more of these elements during their
experience, something traditional media does not offer.

EXERCISE 1.
Directions. Identify wether the following are manipulative or interactive media. Write your
answer on a sheet of paper.

1. Mobile applications 6. Advertisements

2. Jigsaw Puzzles 7. Lego
3. Twitter 8. Lazada/Shopee
4. Candy Crush 9. Digestive system actual model
5. Rubik’s cubes 10. Instagram

12
Thank you for answering the practice exercises. If you answered the practice exercises
correctly, you are now ready to proceed to do the written works. If not, please try until you
arrived on the correct answer.

Instruction: Please write your learning from the above discussion. Write your learning in
your notebook/answer sheet.
Upon reading the lesson above, I learned that…
_________________________________________________________________________
_____________________________________________________________________
and realized that…
_________________________________________________________________________
_____________________________________________________________________

MANIPULATIVE/INTERACTIVE-BASED PRESENTATION
Note: Choose one task between Task A and Task B that you like to do.

Task A. Make a simple yet creative pamphlet showing

the ways of interacting with the Internet. Include also its
importance and purpose.

Task B. Create an interactive video showing how media will influence people interactivity in
the near future. Your video should only last for about 2-3 minutes. Be creative in your output.

Rubric for Pamphlet

Criteria 5 4 3 2

13
Content Content is Content is Content is Content is
accurate and all accurate but accurate but questionable
required Some required some required Information is
information is information is information is not presented in
presented in a missing and/or missing and/or a logical order,
logical order not presented not presented in making it
in a logical a logical order, difficult to
order, but is still making it follow
generally easy difficult to
to follow follow.

Presentation Presentation Presentation Presentation Presentation is

of Information flows well and flows well. flows well. unorganized.
logically. Tools are used Some tools are Tools are not
Presentation correctly. used to show used in a
reflects acceptable relevant
extensive use understanding manner.
of tools in a
creative way.
Use of Visual Use of visual Visual design Most visual Visual design
Design design elements are design elements are
Elements elements are appropriate. elements are inappropriate or
(point, line, appropriate. Layout is appropriate. layout is messy.
shape, value, Layout is cluttered
texture, and pleasing to the
color) eye.

Rubric for the Interactive Video

Criteria 5 4 3 2

Content Content is clear Content is clear Content is not Content is

and relevant to with some clear has not relevant
audience confusing points, some
has some relevance
relevance to
audience
Use Use of interactive Interactive design Most No principles
interactive design principles principles & interactive & elements
design & elements are elements are principles & used
principles appropriate. appropriate. Layout elements are
and Layout is is cluttered. appropriate
elements pleasing to the
eye.
The given time is The time has The The given
Timeliness observed and exceeded to its advertisement time is not
followed maximum did not meet followed
the given time

14
 MOTION MEDIA

Exercise 1 Exercise 2

1. June: Life is Better When You Share the Ride 1. D

2. Speed, direction, timing, transitions sound & color, cartooning 2. B
3. Speed, direction, Motion path, Timing 3. A.
4. Student’s answer may vary 4. C
Sample answer: Yes, video involves objects and characters which 5. C
needs color and sounds to attract the audience, since the video is an
advertisement. The characters have colors which bring them into a
lively one, as well as the objects such as cars, mobile phones,
eyeglasses and more. The speed and transitions were also used
effectively. It was so smooth and clean. The sound was also powerful
as it gives good mood to the audience. The cartooning was also
evident since all the characters and objects are animated.
5. Student’s answer may vary.
Sample answer: Yes, because it gives clear visuals and sounds. It
also captures the eyes of the audience. They presented it in a friendly
and interesting way.

MANIPULATIVE MEDIA

Exercise 1
1. Interactive
2. Manipulative
3. Interactive
4. Interactive
5. Manipulative
6.Interactive
7. Manipulative
8. Interactive

9. Manipulative

10.Interactive

15
 1. Crawford, A. (2020, February 6). blog.vmgstudios.com. Retrieved from
blog.vmgstudios.com: blog.vmgstudios.com/10-principles-motion-design
2. Dhir, R. (2021, February 23). investopedia.com. Retrieved from investopedia.com:
investopedia.com/terms/i/interactive-media-asp
3. Jr., G. P. (2019, January 20). slideshare.net. Retrieved from slideshare.net:
slideshare.net/jikumoshijiku/motion-informartion-and-media-128569087
4. sites.google.com. (n.d.). Retrieved from sites.google.com:
sites.google.com/site/motion-infomationandmedia/
5. Virginia P. Andres, L. M. (2016). Media and Information Literacy. 4th Floor,
Commission on Higher Education, C.P. Garcia Ave., Diliman, Quezon City, Quezon
City, Philippines.
6. https://sites.google.com/site/motioninformationandmedia/

7. https://lesley.edu/academics/undergraduate/animation-motion-media
https://www.pinterest.ph/pin/351351208402780966
8. https://www.pinterest.ph/pin/99642210492230105/
https://www.columnfivemedia.com/best-100-motion-graphic-examples
9. https://www.entrepreneur.com/article/321611

OTHER SOURCES
1. Commission on higher Education, 2016. Teaching Guide for Senior High School
MEDIA AND INFORMATION LITERACY CORE SUBJECT.
2. Media and Information Literacy Curriculum Guide by DepEd
3. Design Principles for Interactive Media ©2014 Adobe System Incorporated Retrieved
from;https://www.basearts.com/curriculum/ADOBE/~InteractiveDesignSyllabus/~inter
active%20Design%20Syllabus/1_Animation_basics/4_Introduction_to_interactive_m
edia/design_principles_interactive_media.pdf

16