Implementation of 2D Animation for Interactive Storybook “Reading for Fun with Anna”.
International Conference on Active Learning (ICAL 2012)
15-0
ISBN No.: 978-967-0257-
Implementation of 2D Animation for Interactive
Storybook “Reading for Fun with Anna”
Norasiken Bt Bakar
Wan Nur Liyana Wan Husain
Faculty of Information and Communication Technology
Universiti Teknikal Malaysia Melaka (UTeM)
Melaka, Malaysia
Faculty of Information and Communication Technology
Universiti Teknikal Malaysia Melaka (UTeM)
Melaka, Malaysia
norasiken@utem.edu.my
Norshahidatul Hasana Bt Ishak
Faculty of Information and Communication Technology
Universiti Teknikal Malaysia Melaka (UTeM)
Melaka, Malaysia
shahidatul87@gmail.com
teacher read without having two way conversation among
them. To overcome this problem, this project provides
interactive reading that is more interactive and effective
than just simply reading the book. Reading lessons that
contain daily listening and speaking activities can benefit
children that can develop their listening and speaking
skills in children to make them understand and to express
themselves to others. (Bentham, 2008).
Abstract—“Reading for Fun with Anna” is an interactive
storytelling learning method for children to develop their
vocabulary knowledge by exploring many things using their
imagination. This project is to unlock their creativity by
giving them various activities that relates to each stories.
These activities are good for children who are just starting to
read because children learn through examples and
participating. They are mostly good for reluctant readers,
who always run away when books are brought out.
II.
Keywords-component; Interactive storytelling
I.
PROBLEM STATEMENT
Children passion in reading books has become an issue
nowadays (Carolee Drake, 2000). In kindergarten, there
will be storytelling activity where teacher will read book
to their children. There is lack of student involvement at
kindergarten because when teacher read them a story, they
only hear and follow what teacher say. Children
involvement in classroom learning is connected by
classroom acknowledgement, ensuring relevancy for
educators and significance to children. A meaningful
student involvement is not a strategy for educators hence
it must be included during their daily activities and it
should be consists of service learning activity.
INTRODUCTION
Reading is very important for children to develop their
reading skills. It can be an interesting and imaginative
activity for children if they have the proper source of
reading books. For some children, they will naturally pick
up a book and read, while others need activities,
encouragement to attract them into the wonderful world
of books.
“Reading for Fun with Anna” is an interactive
storytelling learning method for children to develop their
vocabulary knowledge by exploring many things using
their imagination. This project is to unlock their creativity
by giving them various activities that relates to each
stories. These activities are good for children who are just
starting to read because children learn through examples
and participating. They are mostly good for reluctant
readers, who always run away when books are brought
out.
This problem will make children feel boring and do not
want to hear what teacher say in front of class. To avoid
this problem, this interactive storybook project, will bring
multimedia element to attract children to read book. The
uses of sound that will be used in this project are music
background, voice of storyteller and sound effect, which
can bring children the story mood. Besides that, this
interactive storybook also has graphics and animation to
bring imagination for children from the story as well as to
make children feel like they in the story.
Nowadays, children have difficult time learning
through traditional methods of teaching in class. There is
no children involvement in class especially in
kindergarten. This happened when teacher reading story
book to their student and the student only hear what the
Most children learn a new word every day, but not all
of them remember the new word unless it is included into
1
International Conference on Active Learning (ICAL 2012)
15-0
ISBN No.: 978-967-0257-
their communication with people. Mostly a child’s
vocabulary is influenced by the conversation they have at
home or in school. (Elizabeth Kennedy, 2011) Children
do learn a new word every day, however, not all of them
remember the new word. To overcome this problem, this
project will help student who are just starting to read.
Through this interactive storytelling, children will
recognize objects and this will indirectly help them to
develop their vocabulary knowledge. The use of words in
this storybook is objects that children will use in their
everyday live.
A children’s storybook with fancy drawings, animation
and sound can tell its story in various ways than ever
before. The story will become more alive by bringing the
entire multimedia element in one story. Storybook
developer should not be thinking on word and text on
paper. The technology have changed and the only way to
attract children to read books is by putting the story in
graphics, audio, video and imagination for children that
can bring readers feel the story.
III.
Language that will be using in this interactive
storybook is English because by teaching children English
at the young age, it is the first step for them to learn this
language so that they can easy to learn English for the
next level during school. Besides learning simple word,
they also can hear the voiceover how to pronounce the
word and follow what the voiceover say.
V.
OBJECTIVES
This interactive storybook is developed to accomplish
the objective, which are:
i.
ii.
iii.
A.
To develop interactive storybook that focus on
vocabulary - helps children recognize vocabulary
by giving them graphics to imagine.
To identify multimedia elements that can attract
children intention - encourage student interest in
reading by putting graphics, animation, sound
and picture.
To design a storybook using multimedia element
- attract children with animation, graphics, text,
sound and video.
IV.
LITERATURE REVIEW & PROJECT
METHODOLOGY
Existing System
The domain for this project is Education and Reading
Learning using interactive learning CD application. This
project is a 2D animation that contains interactivity
storytelling and vocabulary learning that suitable for
children who are around five to seven years old and also
can be used for children who just starting to read English.
This section is on the subject of the facts and findings that
have searched out after collecting all the data by
analyzing different type of resources that relates to this
project. The purpose of this section is to find the
comparison between other resources regarding teaching
so that it can know what is good and ban about other
resources to improve this project development.
SCOPE
Target user for this project is children who are around
five to seven year old and to children who are just starting
to read. This interactive storybook is good for them to
learn new word with graphics examples so that they can
easily imagine what the objects looks like and easy for
them to remember the words. They also will learn objects
that have animation and sound to attract their intention to
read.
Case Study 1: Ipad interactive storybook application:
Thomas and Friends
Apple Company has discovered the first steps in its
production for stepping into the world of digital
publishing. The interactive storybook in Ipad has been
popular among children. The reading practice will be
expectedly user satisfaction, using the already culturally
embedded motions of flicking, tapping and swiping to
turn pages, switch titles and adjust font size. Fig. 1 shows
the main interface for storybook application in iPad. The
story is based on children popular television called
Thomas and Friends. This application has two modules,
which are storytelling, and some fun exercise.One of the
The module scope for this project will be covered on
discovering objects, animals, food and occupation. This is
because all of these things are based on things that
happened in their everyday live. It is not just children can
learn new words, they also can recognize the object by
looking at the graphics, animation and sound effects.
2
International Conference on Active Learning (ICAL 2012)
15-0
ISBN No.: 978-967-0257-
activities that contains in this application is puzzle that
shown. This storybook application is a good reference for
this project because it uses all multimedia elements. The
interactive storybook that will develop supposed to be
similar to this application but this project will be more
interactive learning by providing more character
animation instead of static graphic. Besides that, there
also will be variety module of learning.
and noun. User need to understand what is different
between them.
Fig. 1 Ipad main interface in existing application
Case Study 2: Web based storybooks online.
This children’s storybookonline, magickeys.com, was
created in 1996. In this website, contains original stories
with color illustrations for three generation, which are for
young children, older children and young adults. This
websitelooks forward to make education and
entertainment as one combination to entertain and connect
children’s imagination.This web based storybooks online
will be used as a findings for this project analysis. Fig.2
shows the main interface of the website where user
choose any story that they want to read either by clicking
the book thumbnail or the link beside the thumbnail. User
can use whether they are young children, older children
and young adults.
Fig.3 Funbrain.com main interface
B. Comparison of the study cases
The purpose of comparison between existing systems
in this section is to tell what the theory is, how the
research was carried out and the gap that this research
tends to fill. Table 1 shows the comparison from 3 case
study cases above. The comparison will include the
functionality and convenience, and multimedia elements
that used in each method.
Table 1 The comparison of the study cases
Study
Cases
Ipad
Interactive
Storybook
(Thomas
and
Friends)
Web based
storybooks
online.
(magickeys
.com)
Web based
storybooks
online.
(funbrain.c
om)
Interactive
Storybook
:
Reading
for Fun
With Anna
Fig.2 Main interface in existing application
Case Study 3: Web based storybooks online.
Funbrain.com is an online web based that created for
kids at the age of preschool. It offers various interactive
learning games that can develop skills in math, reading,
and literacy. One main thing to discuss about in this
finding is the variety of books that provided in this
website. Fig.3 shows the main interface for Funbrain.com.
User can choose whether to read books or to do some
activities. The activity is about learning adjective, verb
3
Te
xt
Gra
phic
s
Animat
ion
(2D
Elemen
t)
Audio
Video
-
-
-
-
-
-
International Conference on Active Learning (ICAL 2012)
15-0
ISBN No.: 978-967-0257-
Most of the research findings do not have the
animation, which is 2D element in existing system.
However, they have other multimedia element to cover
the weaknesses in order to attract children intention such
as audio, graphics and text. Most of the activity that
provide in the existing system is not relate to the story. It
is just another section for children to learn new word,
solve mixing puzzle, mathematics and coloring book.
the design and content of the project. Basic flow of the
project will be Fig. and explained. Fig.4 below shows
system architecture of an interactive storybook – Reading
for Fun with Anna. There are 4 main menus in this
interactive storybook which are story, activity and video.
Story – This module will include 4 main
elements which are things, animals, food,
transportation and occupation. All of this
element is for each story scene and combining all
of them as a one story. There will be user
interaction between user and the character in the
story where user can click any available
character and it will give feedback such as audio
and animation. Each of the object character will
have text to describe the object. This is for
learning purpose to teach English among
children and kids whom just starting to read. The
story will be lots of animation in order to attract
children.
Activity – Activity that provide in this
project is relates to each story to make user
understand more about the story. There will be 3
activities which are word exercise, puzzle picture
and coloring book. Word exercise is a drag and
drop concept to match the word with the object.
This is to test users IQ about word recognition.
Puzzle picture will be based on picture for each
story where user needs to complete the missing
piece of the picture. Lastly is coloring book
where user can choose color to paint the picture.
Ipad Interactive storybook is a good comparison for
this research because the use of color is very attractive.
The unique thing about this application is the userfriendly screen touch. The structure of interface in this
application is well organized where user can easily
understand the concept of the structure flow. This
application still has its own weaknesses where it has lack
of using character animation in the story.
Interactive storybook, “Reading for Fun with Anna”
that will develop for this project will be based on the Ipad
storybook application. The concept is still the same but
there will be more animation involve in this project. The
main purpose of this project is to tell a story to children
and teach them new word. The new word in this
storybook is something that happened in their everyday
live. The combination between learning new word and
storybook is to make them more understand about the
flow of the story. Besides that, this project indicates sound
effect to make create character that is more realistic. It is
also indicates audio for each text so that children can hear
the correct pronunciation and they can as well follow
what the audio says.
VI.
DESIGN
User
(Children/Teacher/Parents)
Once the project is properly analyzed and defined, the
Design step is the next process. This phase can be known
as the early prototype phase. The basic design idea will be
the first look at your project’s possibilities. Design can be
categorized into two types which are conceptual and
physical design. It is an abstract description for system
architecture in system elements and its user interaction.
Storyboard structure illustration will be Fig.d in the
preliminary design. User interface is for user control
using this system. It contains all the design of input,
output and navigation. Input design describe as the user
interaction in the application. All the multimedia element
that use in this prototype can be define as output design
that contains the flow of the application.
Input
(mouse click)
Application of the prototype:
Main Menu
Storyline
Activity
Video
C. System Architecture
System architecture is a set of link between the
components of a system. System architecture will define
Output
(Display data on monitor)
4
International Conference on Active Learning (ICAL 2012)
15-0
ISBN No.: 978-967-0257-
Video – This module will be as an
entertainment for user where user can watch
video that is about singing. This video provides a
music video that summarizes the entire story in
one music video.
After listen to the story, they can do some exercise or
activity.
Fig.4: System architecture of the Learning
D. User Interface Design
User interface design is about the interface design
which player has through contact with and which they
interact to carry out those activities. Fig. 5 below shows
brief flow of this project.
Fig. 6 Interface story for Introduction Scene 2
Fig. 7 the introduction scene that is about the
characteristic of Anna that loves to read books. User can
click the object that glow and the description will appear
along with the sound of voice over.
After the user enters the main menu, they will go to the
first scene of the story. Each interface of the story has
three main buttons, which are activity, puzzle and
coloring book. All of these elements is relates with each
of the story content. The purpose of the 3 elements is to
participate children in the story to do some task or
activity. In the exercise page will be contained drag and
drop game that ask user to match word and object. Button
exit will provide in this page and same goes to puzzle and
coloring book page. If they click the exit button, they will
go back to the story scene. This structure is same with the
other two elements, which are puzzle and coloring book.
Start
Fig. 7 Interface story for Introduction Scene 2
What happened in Anna in Fig.8 is, she found a magic
book and her adventure start from there.
Main
Menu
Story
Story
Puzzle
Exercise
Video
Coloring
Book
Fig. 5 Interactive Storybook content- Reading for Fun
with Anna
Fig.8 Interface story for the beginning of book adventure
Fig. 6 shows interface of story module. The first scene
of the story is about the introduction of the character
named Anna. It contains story that include character
interactive where user can click the character or object.
Fig.9 shows the adventure of Anna inside the books
where she suddenly goes to another place where full with
weird looking animals. The main subject for this section
5
International Conference on Active Learning (ICAL 2012)
15-0
ISBN No.: 978-967-0257-
is for learning purpose for user to recognize different
types of animal.
Fig.12 shows interface about occupation. User can
learn different types of occupation by clicking the
selected people and the description will appear along with
the voice over.
Fig.9 Interface story for Animals
Fig.12 Interface story for Occupation
Fig.10 shows another subject about learning different
types of food. User can click at the food and the text
description will appear along with the voiceover.
Fig. 13 shows interface about planet. User can learn
different types of planet by clicking the selected planet
and the description will appear along with the voice over.
Fig.10 Interface story for Food
Fig. 13 Interface story for Planet
Fig.11 shows interface about transportation. User can
learn different types of transportation by clicking the
selected transport and the description will appear along
with the voice over.
Fig. 14 shows interface about the ending of the story
where the journey of Anna and the magic book end.
Fig.11 Interface story for Transportation
Fig. 14 Interface for End of the story
6
International Conference on Active Learning (ICAL 2012)
15-0
ISBN No.: 978-967-0257-
Fig. 15 shows interface about exercise for the first
scene of introduction where user has to drag the letters
over the box.
Fig. 18 shows interface about exercise for planet where
user has to drag the flag over the planet according to the
matching colors.
Fig. 15 Exercise Activity for Introduction Scene 1
Fig. 18 Exercise Activity for Planet
Fig.16 shows interface about exercise for the second
scene of introduction where user has to drag the word to
the correct object.
Fig. 19 shows interface about exercise for
transportation where user has to find the hidden word to
the correct transportation.
Fig. 19 Exercise Activity for Transportation
Fig. 20 shows interface about exercise for occupation
where user has to drag the characters to the correct box.
Fig.16 Exercise Activity for Introduction Scene 2
Fig. 17 shows interface about exercise for animals
where user has to match the animals.
Fig. 20 Exercise Activity for Occupation
Fig. 21 shows interface about exercise for food where
user has to Anna to ask her what she wants.
Fig. 17 Exercise Activity for Animals
7
International Conference on Active Learning (ICAL 2012)
15-0
ISBN No.: 978-967-0257-
Graph of functionality testing for alpha tester results
4.5
4
Level satisfcation
3.5
3
Mean Median
2.5
2
Mode
1.5
1
0.5
0
Q1
Fig. 21 Exercise Activity for Food
VII.
Graph of content testing for alpha tester results
4
Level satisfcation
Mean
Median
2
1.5
Mode
1
Q5
Q6
Fig. 23 the graph result for functionality testing for
alpha tester. For the first question, most of the testers
agree that they can use the application without any help.
For the second question, most of the testers agree that all
of the elements in the application are well integrated. For
the third question, most of the testers disagree that they
need to learn a lot of things before they using the
application. For the fourth question, most of the tester
disagrees that they need to spend about 20 to 30 minutes
to finish using the application. For the fifth question, most
of the tester agrees that they get a quick response when
they click the menu. For the last question, most of the
tester agrees that they think the application is easy to use.
4.5
3
Q4
Fig. 23 The Graph Functionality Testing for Alpha Tester
Results
Analysis testing is a process where all the data
information from the result will be combined as a graph
so that the data easier to analyze. The graph will be based
on user’s response and tested according to alpha and beta
testing.
2.5
Q3
Questions
ITESTING AND EVALUATION
3.5
Q2
0.5
0
Q1
Q2
Q3
Q4
Q5
Q6
Q7
Q8
Graph of interface testing for alpha tester results
Questions
6
Fig. 22 The Graph Content Testing for Alpha Tester
Results
Level satisfcation
5
Fig. 22 is the graph result for content testing for alpha
tester. Most of the testers agree that this storytelling
learning concept is more effective learning method. For
the second question, most of the testers agree that the
story is easy to understand. For the third question, most of
the testers agree that the animations in the application are
easy to follow and easy to understand. For the fourth
question, most of the testers agree that this courseware
really helps their English. For the fifth question, most of
the testers agree that they can answer the entire exercise.
For the seventh question, most of the testers agree that
they can finish reading the story without any difficulties.
For the seventh question, most of the testers agree that
this application is not complex for student. For the last
question, most of the testers disagree that they feel bored
when using the application.
4
Mean
3
Median
2
Mode
1
0
Q1
Q2
Q3
Q4
Q5
Q6
Questions
Fig. 24 The Graph Interface Testing for Alpha Tester
Results
Fig. 24 is the graph result for interface testing for alpha
tester. For the first question, the testers only satisfy that
they were learned about screen design when using the
application. For the second question, most of the tester
agrees that the sound makes the application more
interesting. For the third question, most of the tester
agrees that the fonts are easy to read and they are very
clear. For the fourth question, most of the tester strongly
8
International Conference on Active Learning (ICAL 2012)
15-0
ISBN No.: 978-967-0257-
agrees that the combinations of color are pleasant. For the
fifth question, most of the tester strongly agrees that the
navigations in the application are not complex. For the
last question, most of the tester strongly disagree that the
interface design are too crowded.
that they can use the application without any help. For the
second question, most of the testers agree that all of the
elements in the application are well integrated. For the
third question, most of the testers only satisfy that they
need to learn a lot of things before they using the
application. For the fourth question, most of the tester
satisfy that they need to spend about 20 to 30 minutes to
finish using the application. For the fifth question, most of
the tester agrees that they get a quick response when they
click the menu. For the last question, most of the tester
agrees that they think the application is easy to use.
Graph of content testing for beta tester results
6
4
Mean
3
Median
2
Graph of interface testing for beta tester results
Mode
1
5
4.5
4
Q8
Questions
Fig. 25 The Graph Content Testing for Beta Tester Results
0
Q3
Q4
Q5
Q5
Q6
Graph for pre & post question results
Q6
Questions
Pre-Question
60
40
Post-Question
20
0
S1
Fig. 26 The Graft Functionality Testing for Beta Tester
Results
Fig. 26 is the graph result for functionality testing for
beta tester. For the first question, most of the testers agree
80
Students
9
S10
Mode
Q2
Q4
100
Mark in percentage
Level satisfcation
120
Median
Q1
Q3
Fig. 27 is the graph result for interface testing for beta
tester. For the first question, the testers only satisfy that
they were learned about screen design when using the
application. For the second question, most of the tester
agrees that the sound makes the application more
interesting. For the third question, most of the tester
agrees that the fonts are easy to read and they are very
clear. For the fourth question, most of the tester agrees
that the combinations of color are pleasant. For the fifth
question, most of the tester agrees that the navigations in
the application are not complex. For the last question,
most of the tester strongly disagree that the interface
design are too crowded.
1.5
1
Q2
Fig. 27 The Graft Interface Testing for Beta Tester Results
Mean
0.5
Mode
1
Questions
4
2
2
1.5
Q1
Graph of functionality testing for beta tester results
3
Median
2.5
0
4.5
2.5
3
0.5
Fig. 25 are the graph content testing for beta tester. For
the first question, most of the tester strongly agreesthat
this courseware is more effective for learning method. For
the second question, most of the tester agrees that the
story is easy to understand. For the third question, most of
the testers agree that the animations in the application are
easy to follow and easy to understand. For the fourth
question, most of the testers agree that this courseware
really helps their English. For the fifth question, most of
the testers agree that they can answer the entire exercise.
For the seventh question, most of the testers agree that
they can finish reading the story without any difficulties.
For the seventh question, most of the testers agree that
this application is not complex for student. For the last
question, most of the testers strongly disagree that they
feel bored when using the application.
3.5
Mean
3.5
S9
Q7
S8
Q6
S7
Q5
S6
Q4
S5
Q3
S4
Q2
S3
Q1
Level satisfcation
0
S2
Level satisfcation
5
International Conference on Active Learning (ICAL 2012)
15-0
ISBN No.: 978-967-0257-
Fig. 28 The Graph for Pre Test and Post Test Results
Fig. 28 is the graph result for pre-post question. It is
obviously showed that students get lower mark before the
use the application than after they use the application.
This means that this application really helps them reading
and identify objects in English. Using a lot of picture than
text really helps student memorize what they see. Student
also feels happy and enjoys using the application because
the use of animation, sound and the combinations of color
that is pleasant. From the testing result, most of the tester
strongly agrees that this application system is more
effective for leaning method than the actual method.
VIII.
CONCLUSION
As a conclusion, this project can help children to learn
new vocabulary especially for children whom are just
starting to read. The main purpose of this project is to
make reading book as a fun thing to do among children
besides providing a story that is simple and easy to
understand with the activity that relates to the story. This
project also provides all the multimedia elements make
the interactive story more alive and interesting.
REFERENCES
Carolee Drake(2000). “Helping Readers Make the Grade”
from www.Orton-Gillingham.com
Bethany (2005). “Literacy in After School Program.”
Literature Review Journal.
Rujuta Borkar (2010). “Interactive Children's Books”
from www.buzzle.com
Linda Mitchell, Cathy Wylie, & Margaret Carr (2008).
“Outcomes of Early Childhood Education” from
www.educationcounts.govt.nz
Australian Gonvernment, Department Science (2005).
“Teaching Reading” Literature Review.
Robin McClure (2010). “Reading Activities Make It A
Joy For Kids” from www.about.com
Ira Greenberg (2007). Processing: Creative Coding and
Computational Art. Apress.
10
15-0
ISBN No.: 978-967-0257-
Implementation of 2D Animation for Interactive
Storybook “Reading for Fun with Anna”
Norasiken Bt Bakar
Wan Nur Liyana Wan Husain
Faculty of Information and Communication Technology
Universiti Teknikal Malaysia Melaka (UTeM)
Melaka, Malaysia
Faculty of Information and Communication Technology
Universiti Teknikal Malaysia Melaka (UTeM)
Melaka, Malaysia
norasiken@utem.edu.my
Norshahidatul Hasana Bt Ishak
Faculty of Information and Communication Technology
Universiti Teknikal Malaysia Melaka (UTeM)
Melaka, Malaysia
shahidatul87@gmail.com
teacher read without having two way conversation among
them. To overcome this problem, this project provides
interactive reading that is more interactive and effective
than just simply reading the book. Reading lessons that
contain daily listening and speaking activities can benefit
children that can develop their listening and speaking
skills in children to make them understand and to express
themselves to others. (Bentham, 2008).
Abstract—“Reading for Fun with Anna” is an interactive
storytelling learning method for children to develop their
vocabulary knowledge by exploring many things using their
imagination. This project is to unlock their creativity by
giving them various activities that relates to each stories.
These activities are good for children who are just starting to
read because children learn through examples and
participating. They are mostly good for reluctant readers,
who always run away when books are brought out.
II.
Keywords-component; Interactive storytelling
I.
PROBLEM STATEMENT
Children passion in reading books has become an issue
nowadays (Carolee Drake, 2000). In kindergarten, there
will be storytelling activity where teacher will read book
to their children. There is lack of student involvement at
kindergarten because when teacher read them a story, they
only hear and follow what teacher say. Children
involvement in classroom learning is connected by
classroom acknowledgement, ensuring relevancy for
educators and significance to children. A meaningful
student involvement is not a strategy for educators hence
it must be included during their daily activities and it
should be consists of service learning activity.
INTRODUCTION
Reading is very important for children to develop their
reading skills. It can be an interesting and imaginative
activity for children if they have the proper source of
reading books. For some children, they will naturally pick
up a book and read, while others need activities,
encouragement to attract them into the wonderful world
of books.
“Reading for Fun with Anna” is an interactive
storytelling learning method for children to develop their
vocabulary knowledge by exploring many things using
their imagination. This project is to unlock their creativity
by giving them various activities that relates to each
stories. These activities are good for children who are just
starting to read because children learn through examples
and participating. They are mostly good for reluctant
readers, who always run away when books are brought
out.
This problem will make children feel boring and do not
want to hear what teacher say in front of class. To avoid
this problem, this interactive storybook project, will bring
multimedia element to attract children to read book. The
uses of sound that will be used in this project are music
background, voice of storyteller and sound effect, which
can bring children the story mood. Besides that, this
interactive storybook also has graphics and animation to
bring imagination for children from the story as well as to
make children feel like they in the story.
Nowadays, children have difficult time learning
through traditional methods of teaching in class. There is
no children involvement in class especially in
kindergarten. This happened when teacher reading story
book to their student and the student only hear what the
Most children learn a new word every day, but not all
of them remember the new word unless it is included into
1
International Conference on Active Learning (ICAL 2012)
15-0
ISBN No.: 978-967-0257-
their communication with people. Mostly a child’s
vocabulary is influenced by the conversation they have at
home or in school. (Elizabeth Kennedy, 2011) Children
do learn a new word every day, however, not all of them
remember the new word. To overcome this problem, this
project will help student who are just starting to read.
Through this interactive storytelling, children will
recognize objects and this will indirectly help them to
develop their vocabulary knowledge. The use of words in
this storybook is objects that children will use in their
everyday live.
A children’s storybook with fancy drawings, animation
and sound can tell its story in various ways than ever
before. The story will become more alive by bringing the
entire multimedia element in one story. Storybook
developer should not be thinking on word and text on
paper. The technology have changed and the only way to
attract children to read books is by putting the story in
graphics, audio, video and imagination for children that
can bring readers feel the story.
III.
Language that will be using in this interactive
storybook is English because by teaching children English
at the young age, it is the first step for them to learn this
language so that they can easy to learn English for the
next level during school. Besides learning simple word,
they also can hear the voiceover how to pronounce the
word and follow what the voiceover say.
V.
OBJECTIVES
This interactive storybook is developed to accomplish
the objective, which are:
i.
ii.
iii.
A.
To develop interactive storybook that focus on
vocabulary - helps children recognize vocabulary
by giving them graphics to imagine.
To identify multimedia elements that can attract
children intention - encourage student interest in
reading by putting graphics, animation, sound
and picture.
To design a storybook using multimedia element
- attract children with animation, graphics, text,
sound and video.
IV.
LITERATURE REVIEW & PROJECT
METHODOLOGY
Existing System
The domain for this project is Education and Reading
Learning using interactive learning CD application. This
project is a 2D animation that contains interactivity
storytelling and vocabulary learning that suitable for
children who are around five to seven years old and also
can be used for children who just starting to read English.
This section is on the subject of the facts and findings that
have searched out after collecting all the data by
analyzing different type of resources that relates to this
project. The purpose of this section is to find the
comparison between other resources regarding teaching
so that it can know what is good and ban about other
resources to improve this project development.
SCOPE
Target user for this project is children who are around
five to seven year old and to children who are just starting
to read. This interactive storybook is good for them to
learn new word with graphics examples so that they can
easily imagine what the objects looks like and easy for
them to remember the words. They also will learn objects
that have animation and sound to attract their intention to
read.
Case Study 1: Ipad interactive storybook application:
Thomas and Friends
Apple Company has discovered the first steps in its
production for stepping into the world of digital
publishing. The interactive storybook in Ipad has been
popular among children. The reading practice will be
expectedly user satisfaction, using the already culturally
embedded motions of flicking, tapping and swiping to
turn pages, switch titles and adjust font size. Fig. 1 shows
the main interface for storybook application in iPad. The
story is based on children popular television called
Thomas and Friends. This application has two modules,
which are storytelling, and some fun exercise.One of the
The module scope for this project will be covered on
discovering objects, animals, food and occupation. This is
because all of these things are based on things that
happened in their everyday live. It is not just children can
learn new words, they also can recognize the object by
looking at the graphics, animation and sound effects.
2
International Conference on Active Learning (ICAL 2012)
15-0
ISBN No.: 978-967-0257-
activities that contains in this application is puzzle that
shown. This storybook application is a good reference for
this project because it uses all multimedia elements. The
interactive storybook that will develop supposed to be
similar to this application but this project will be more
interactive learning by providing more character
animation instead of static graphic. Besides that, there
also will be variety module of learning.
and noun. User need to understand what is different
between them.
Fig. 1 Ipad main interface in existing application
Case Study 2: Web based storybooks online.
This children’s storybookonline, magickeys.com, was
created in 1996. In this website, contains original stories
with color illustrations for three generation, which are for
young children, older children and young adults. This
websitelooks forward to make education and
entertainment as one combination to entertain and connect
children’s imagination.This web based storybooks online
will be used as a findings for this project analysis. Fig.2
shows the main interface of the website where user
choose any story that they want to read either by clicking
the book thumbnail or the link beside the thumbnail. User
can use whether they are young children, older children
and young adults.
Fig.3 Funbrain.com main interface
B. Comparison of the study cases
The purpose of comparison between existing systems
in this section is to tell what the theory is, how the
research was carried out and the gap that this research
tends to fill. Table 1 shows the comparison from 3 case
study cases above. The comparison will include the
functionality and convenience, and multimedia elements
that used in each method.
Table 1 The comparison of the study cases
Study
Cases
Ipad
Interactive
Storybook
(Thomas
and
Friends)
Web based
storybooks
online.
(magickeys
.com)
Web based
storybooks
online.
(funbrain.c
om)
Interactive
Storybook
:
Reading
for Fun
With Anna
Fig.2 Main interface in existing application
Case Study 3: Web based storybooks online.
Funbrain.com is an online web based that created for
kids at the age of preschool. It offers various interactive
learning games that can develop skills in math, reading,
and literacy. One main thing to discuss about in this
finding is the variety of books that provided in this
website. Fig.3 shows the main interface for Funbrain.com.
User can choose whether to read books or to do some
activities. The activity is about learning adjective, verb
3
Te
xt
Gra
phic
s
Animat
ion
(2D
Elemen
t)
Audio
Video
-
-
-
-
-
-
International Conference on Active Learning (ICAL 2012)
15-0
ISBN No.: 978-967-0257-
Most of the research findings do not have the
animation, which is 2D element in existing system.
However, they have other multimedia element to cover
the weaknesses in order to attract children intention such
as audio, graphics and text. Most of the activity that
provide in the existing system is not relate to the story. It
is just another section for children to learn new word,
solve mixing puzzle, mathematics and coloring book.
the design and content of the project. Basic flow of the
project will be Fig. and explained. Fig.4 below shows
system architecture of an interactive storybook – Reading
for Fun with Anna. There are 4 main menus in this
interactive storybook which are story, activity and video.
Story – This module will include 4 main
elements which are things, animals, food,
transportation and occupation. All of this
element is for each story scene and combining all
of them as a one story. There will be user
interaction between user and the character in the
story where user can click any available
character and it will give feedback such as audio
and animation. Each of the object character will
have text to describe the object. This is for
learning purpose to teach English among
children and kids whom just starting to read. The
story will be lots of animation in order to attract
children.
Activity – Activity that provide in this
project is relates to each story to make user
understand more about the story. There will be 3
activities which are word exercise, puzzle picture
and coloring book. Word exercise is a drag and
drop concept to match the word with the object.
This is to test users IQ about word recognition.
Puzzle picture will be based on picture for each
story where user needs to complete the missing
piece of the picture. Lastly is coloring book
where user can choose color to paint the picture.
Ipad Interactive storybook is a good comparison for
this research because the use of color is very attractive.
The unique thing about this application is the userfriendly screen touch. The structure of interface in this
application is well organized where user can easily
understand the concept of the structure flow. This
application still has its own weaknesses where it has lack
of using character animation in the story.
Interactive storybook, “Reading for Fun with Anna”
that will develop for this project will be based on the Ipad
storybook application. The concept is still the same but
there will be more animation involve in this project. The
main purpose of this project is to tell a story to children
and teach them new word. The new word in this
storybook is something that happened in their everyday
live. The combination between learning new word and
storybook is to make them more understand about the
flow of the story. Besides that, this project indicates sound
effect to make create character that is more realistic. It is
also indicates audio for each text so that children can hear
the correct pronunciation and they can as well follow
what the audio says.
VI.
DESIGN
User
(Children/Teacher/Parents)
Once the project is properly analyzed and defined, the
Design step is the next process. This phase can be known
as the early prototype phase. The basic design idea will be
the first look at your project’s possibilities. Design can be
categorized into two types which are conceptual and
physical design. It is an abstract description for system
architecture in system elements and its user interaction.
Storyboard structure illustration will be Fig.d in the
preliminary design. User interface is for user control
using this system. It contains all the design of input,
output and navigation. Input design describe as the user
interaction in the application. All the multimedia element
that use in this prototype can be define as output design
that contains the flow of the application.
Input
(mouse click)
Application of the prototype:
Main Menu
Storyline
Activity
Video
C. System Architecture
System architecture is a set of link between the
components of a system. System architecture will define
Output
(Display data on monitor)
4
International Conference on Active Learning (ICAL 2012)
15-0
ISBN No.: 978-967-0257-
Video – This module will be as an
entertainment for user where user can watch
video that is about singing. This video provides a
music video that summarizes the entire story in
one music video.
After listen to the story, they can do some exercise or
activity.
Fig.4: System architecture of the Learning
D. User Interface Design
User interface design is about the interface design
which player has through contact with and which they
interact to carry out those activities. Fig. 5 below shows
brief flow of this project.
Fig. 6 Interface story for Introduction Scene 2
Fig. 7 the introduction scene that is about the
characteristic of Anna that loves to read books. User can
click the object that glow and the description will appear
along with the sound of voice over.
After the user enters the main menu, they will go to the
first scene of the story. Each interface of the story has
three main buttons, which are activity, puzzle and
coloring book. All of these elements is relates with each
of the story content. The purpose of the 3 elements is to
participate children in the story to do some task or
activity. In the exercise page will be contained drag and
drop game that ask user to match word and object. Button
exit will provide in this page and same goes to puzzle and
coloring book page. If they click the exit button, they will
go back to the story scene. This structure is same with the
other two elements, which are puzzle and coloring book.
Start
Fig. 7 Interface story for Introduction Scene 2
What happened in Anna in Fig.8 is, she found a magic
book and her adventure start from there.
Main
Menu
Story
Story
Puzzle
Exercise
Video
Coloring
Book
Fig. 5 Interactive Storybook content- Reading for Fun
with Anna
Fig.8 Interface story for the beginning of book adventure
Fig. 6 shows interface of story module. The first scene
of the story is about the introduction of the character
named Anna. It contains story that include character
interactive where user can click the character or object.
Fig.9 shows the adventure of Anna inside the books
where she suddenly goes to another place where full with
weird looking animals. The main subject for this section
5
International Conference on Active Learning (ICAL 2012)
15-0
ISBN No.: 978-967-0257-
is for learning purpose for user to recognize different
types of animal.
Fig.12 shows interface about occupation. User can
learn different types of occupation by clicking the
selected people and the description will appear along with
the voice over.
Fig.9 Interface story for Animals
Fig.12 Interface story for Occupation
Fig.10 shows another subject about learning different
types of food. User can click at the food and the text
description will appear along with the voiceover.
Fig. 13 shows interface about planet. User can learn
different types of planet by clicking the selected planet
and the description will appear along with the voice over.
Fig.10 Interface story for Food
Fig. 13 Interface story for Planet
Fig.11 shows interface about transportation. User can
learn different types of transportation by clicking the
selected transport and the description will appear along
with the voice over.
Fig. 14 shows interface about the ending of the story
where the journey of Anna and the magic book end.
Fig.11 Interface story for Transportation
Fig. 14 Interface for End of the story
6
International Conference on Active Learning (ICAL 2012)
15-0
ISBN No.: 978-967-0257-
Fig. 15 shows interface about exercise for the first
scene of introduction where user has to drag the letters
over the box.
Fig. 18 shows interface about exercise for planet where
user has to drag the flag over the planet according to the
matching colors.
Fig. 15 Exercise Activity for Introduction Scene 1
Fig. 18 Exercise Activity for Planet
Fig.16 shows interface about exercise for the second
scene of introduction where user has to drag the word to
the correct object.
Fig. 19 shows interface about exercise for
transportation where user has to find the hidden word to
the correct transportation.
Fig. 19 Exercise Activity for Transportation
Fig. 20 shows interface about exercise for occupation
where user has to drag the characters to the correct box.
Fig.16 Exercise Activity for Introduction Scene 2
Fig. 17 shows interface about exercise for animals
where user has to match the animals.
Fig. 20 Exercise Activity for Occupation
Fig. 21 shows interface about exercise for food where
user has to Anna to ask her what she wants.
Fig. 17 Exercise Activity for Animals
7
International Conference on Active Learning (ICAL 2012)
15-0
ISBN No.: 978-967-0257-
Graph of functionality testing for alpha tester results
4.5
4
Level satisfcation
3.5
3
Mean Median
2.5
2
Mode
1.5
1
0.5
0
Q1
Fig. 21 Exercise Activity for Food
VII.
Graph of content testing for alpha tester results
4
Level satisfcation
Mean
Median
2
1.5
Mode
1
Q5
Q6
Fig. 23 the graph result for functionality testing for
alpha tester. For the first question, most of the testers
agree that they can use the application without any help.
For the second question, most of the testers agree that all
of the elements in the application are well integrated. For
the third question, most of the testers disagree that they
need to learn a lot of things before they using the
application. For the fourth question, most of the tester
disagrees that they need to spend about 20 to 30 minutes
to finish using the application. For the fifth question, most
of the tester agrees that they get a quick response when
they click the menu. For the last question, most of the
tester agrees that they think the application is easy to use.
4.5
3
Q4
Fig. 23 The Graph Functionality Testing for Alpha Tester
Results
Analysis testing is a process where all the data
information from the result will be combined as a graph
so that the data easier to analyze. The graph will be based
on user’s response and tested according to alpha and beta
testing.
2.5
Q3
Questions
ITESTING AND EVALUATION
3.5
Q2
0.5
0
Q1
Q2
Q3
Q4
Q5
Q6
Q7
Q8
Graph of interface testing for alpha tester results
Questions
6
Fig. 22 The Graph Content Testing for Alpha Tester
Results
Level satisfcation
5
Fig. 22 is the graph result for content testing for alpha
tester. Most of the testers agree that this storytelling
learning concept is more effective learning method. For
the second question, most of the testers agree that the
story is easy to understand. For the third question, most of
the testers agree that the animations in the application are
easy to follow and easy to understand. For the fourth
question, most of the testers agree that this courseware
really helps their English. For the fifth question, most of
the testers agree that they can answer the entire exercise.
For the seventh question, most of the testers agree that
they can finish reading the story without any difficulties.
For the seventh question, most of the testers agree that
this application is not complex for student. For the last
question, most of the testers disagree that they feel bored
when using the application.
4
Mean
3
Median
2
Mode
1
0
Q1
Q2
Q3
Q4
Q5
Q6
Questions
Fig. 24 The Graph Interface Testing for Alpha Tester
Results
Fig. 24 is the graph result for interface testing for alpha
tester. For the first question, the testers only satisfy that
they were learned about screen design when using the
application. For the second question, most of the tester
agrees that the sound makes the application more
interesting. For the third question, most of the tester
agrees that the fonts are easy to read and they are very
clear. For the fourth question, most of the tester strongly
8
International Conference on Active Learning (ICAL 2012)
15-0
ISBN No.: 978-967-0257-
agrees that the combinations of color are pleasant. For the
fifth question, most of the tester strongly agrees that the
navigations in the application are not complex. For the
last question, most of the tester strongly disagree that the
interface design are too crowded.
that they can use the application without any help. For the
second question, most of the testers agree that all of the
elements in the application are well integrated. For the
third question, most of the testers only satisfy that they
need to learn a lot of things before they using the
application. For the fourth question, most of the tester
satisfy that they need to spend about 20 to 30 minutes to
finish using the application. For the fifth question, most of
the tester agrees that they get a quick response when they
click the menu. For the last question, most of the tester
agrees that they think the application is easy to use.
Graph of content testing for beta tester results
6
4
Mean
3
Median
2
Graph of interface testing for beta tester results
Mode
1
5
4.5
4
Q8
Questions
Fig. 25 The Graph Content Testing for Beta Tester Results
0
Q3
Q4
Q5
Q5
Q6
Graph for pre & post question results
Q6
Questions
Pre-Question
60
40
Post-Question
20
0
S1
Fig. 26 The Graft Functionality Testing for Beta Tester
Results
Fig. 26 is the graph result for functionality testing for
beta tester. For the first question, most of the testers agree
80
Students
9
S10
Mode
Q2
Q4
100
Mark in percentage
Level satisfcation
120
Median
Q1
Q3
Fig. 27 is the graph result for interface testing for beta
tester. For the first question, the testers only satisfy that
they were learned about screen design when using the
application. For the second question, most of the tester
agrees that the sound makes the application more
interesting. For the third question, most of the tester
agrees that the fonts are easy to read and they are very
clear. For the fourth question, most of the tester agrees
that the combinations of color are pleasant. For the fifth
question, most of the tester agrees that the navigations in
the application are not complex. For the last question,
most of the tester strongly disagree that the interface
design are too crowded.
1.5
1
Q2
Fig. 27 The Graft Interface Testing for Beta Tester Results
Mean
0.5
Mode
1
Questions
4
2
2
1.5
Q1
Graph of functionality testing for beta tester results
3
Median
2.5
0
4.5
2.5
3
0.5
Fig. 25 are the graph content testing for beta tester. For
the first question, most of the tester strongly agreesthat
this courseware is more effective for learning method. For
the second question, most of the tester agrees that the
story is easy to understand. For the third question, most of
the testers agree that the animations in the application are
easy to follow and easy to understand. For the fourth
question, most of the testers agree that this courseware
really helps their English. For the fifth question, most of
the testers agree that they can answer the entire exercise.
For the seventh question, most of the testers agree that
they can finish reading the story without any difficulties.
For the seventh question, most of the testers agree that
this application is not complex for student. For the last
question, most of the testers strongly disagree that they
feel bored when using the application.
3.5
Mean
3.5
S9
Q7
S8
Q6
S7
Q5
S6
Q4
S5
Q3
S4
Q2
S3
Q1
Level satisfcation
0
S2
Level satisfcation
5
International Conference on Active Learning (ICAL 2012)
15-0
ISBN No.: 978-967-0257-
Fig. 28 The Graph for Pre Test and Post Test Results
Fig. 28 is the graph result for pre-post question. It is
obviously showed that students get lower mark before the
use the application than after they use the application.
This means that this application really helps them reading
and identify objects in English. Using a lot of picture than
text really helps student memorize what they see. Student
also feels happy and enjoys using the application because
the use of animation, sound and the combinations of color
that is pleasant. From the testing result, most of the tester
strongly agrees that this application system is more
effective for leaning method than the actual method.
VIII.
CONCLUSION
As a conclusion, this project can help children to learn
new vocabulary especially for children whom are just
starting to read. The main purpose of this project is to
make reading book as a fun thing to do among children
besides providing a story that is simple and easy to
understand with the activity that relates to the story. This
project also provides all the multimedia elements make
the interactive story more alive and interesting.
REFERENCES
Carolee Drake(2000). “Helping Readers Make the Grade”
from www.Orton-Gillingham.com
Bethany (2005). “Literacy in After School Program.”
Literature Review Journal.
Rujuta Borkar (2010). “Interactive Children's Books”
from www.buzzle.com
Linda Mitchell, Cathy Wylie, & Margaret Carr (2008).
“Outcomes of Early Childhood Education” from
www.educationcounts.govt.nz
Australian Gonvernment, Department Science (2005).
“Teaching Reading” Literature Review.
Robin McClure (2010). “Reading Activities Make It A
Joy For Kids” from www.about.com
Ira Greenberg (2007). Processing: Creative Coding and
Computational Art. Apress.
10