Implementation of 2D Animation for Interactive
Storybook “Reading for Fun with Anna”
Norasiken Bt Bakar
Faculty of Information and Communication Technology Universiti Teknikal Malaysia Melaka (UTeM)
Melaka, Malaysia
[email protected]
Wan Nur Liyana Wan Husain
Faculty of Information and Communication Technology Universiti Teknikal Malaysia Melaka (UTeM)
Melaka, Malaysia
Norshahidatul Hasana Bt Ishak
Faculty of Information and Communication Technology Universiti Teknikal Malaysia Melaka (UTeM)
Melaka, Malaysia [email protected]
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.Keywords-component; Interactive storytelling
I. 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.
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
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).
II. 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.
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.
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. OBJECTIVES
This interactive storybook is developed to accomplish the objective, which are:
i. To develop interactive storybook that focus on vocabulary - helps children recognize vocabulary by giving them graphics to imagine.
ii. To identify multimedia elements that can attract children intention - encourage student interest in reading by putting graphics, animation, sound and picture.
iii. To design a storybook using multimedia element - attract children with animation, graphics, text, sound and video.
IV. 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.
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.
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. LITERATURE REVIEW & PROJECT METHODOLOGY
A. 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.
Case Study 1: Ipad interactive storybook application: Thomas and Friends
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.
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.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
and noun. User need to understand what is different between them.
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
User 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.
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 user-friendly 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
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.
C. System Architecture
System architecture is a set of link between the components of a system. System architecture will define
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.
Start
Main Menu
Story
Exercise Coloring Book Puzzle
Story Video
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.
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.
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.
Fig. 5 Interactive Storybook content- Reading for Fun with Anna
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.
After listen to the story, they can do some exercise or activity.
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.
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.
Fig.8 Interface story for the beginning of book adventure
is for learning purpose for user to recognize different types of animal.
Fig.9 Interface story for Animals
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.10 Interface story for Food
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.11 Interface story for Transportation
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.12 Interface story for Occupation
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. 13 Interface story for Planet
Fig. 14 shows interface about the ending of the story where the journey of Anna and the magic book end.
Fig. 15 shows interface about exercise for the first scene of introduction where user has to drag the letters over the box.
Fig. 15 Exercise Activity for Introduction Scene 1
Fig.16 shows interface about exercise for the second scene of introduction where user has to drag the word to the correct object.
Fig.16 Exercise Activity for Introduction Scene 2
Fig. 17 shows interface about exercise for animals where user has to match the animals.
Fig. 17 Exercise Activity for Animals
Fig. 18 shows interface about exercise for planet where user has to drag the flag over the planet according to the matching colors.
Fig. 18 Exercise Activity for Planet
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. 20 Exercise Activity for Occupation
Fig. 21 Exercise Activity for Food
VII. ITESTING AND EVALUATION
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.
Graph of content testing for alpha tester results
Mean
Fig. 22 The Graph Content Testing for Alpha Tester Results
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.
Graph of functionality testing for alpha tester results
Mean Median
Fig. 23 The Graph Functionality Testing for Alpha Tester Results
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.
Q1 Q2 Q3 Q4 Q5 Q6
Graph of interface testing for alpha tester results
Mean
Fig. 24 The Graph Interface Testing for Alpha Tester Results
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.
Q1 Q2 Q3 Q4 Q5 Q6 Q7 Q8
Graph of content testing for beta tester results
Mean
Fig. 25 The Graph Content Testing for Beta Tester Results
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.
Q1 Q2 Q3 Q4 Q5 Q6
Graph of functionality testing for beta tester results
Mean
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
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.
Q1 Q2 Q3 Q4 Q5 Q6
Graph of interface testing for beta tester results
Mean
Fig. 27 The Graft Interface Testing for Beta Tester Results
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,
Graph for pre & post question results
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
