2020.12.15
2024.10.08
[Animation Teaching Material Production] How to Create e-Learning Materials ②
Continuing from the last time,
- ・I want to challenge myself with education through e-learning, but I don't know where to start.
- ・We want to create teaching materials in-house as much as possible
We will explain about educational material production for those who are interested.
In the first session, we explained the three formats of e-learning.
1. Animation (HTML5 format)
2. Video format
3. PowerPoint, PDF
This time, I will explain the educational materials in animation (HTML5 format).
Let's take a look at the features and production methods of educational materials that use animations, which are easy to remember and help solidify learning content.
Table of Contents
- 1. Features of Animation Teaching Materials
- 2. Benefits of Animation Materials
- 3. Disadvantages of Animation Teaching Materials
- 4. Themes Suitable for Animated Teaching Materials
- 5. How to Choose Animation Teaching Material Creation Tools
- 6. The Process of Creating Animated Teaching Materials and Required Skills
- 7. Benefits of Utilizing Animation Teaching Material Production Outsourcing Services
1. Features of Animation Teaching Materials
By adding animation effects within the screen, the following effects can be expected.
- ・Can display explanations in the order that learners should progress through them
- ・Can emphasize important points and elements that should be particularly noted
- ・Achieve high learning effectiveness by synchronizing with audio
- ・Memorable and conducive to retention of learning content
By displaying in order and adding movements to match the narration, you can control the learner's focus.
Additionally, you can add effects to emphasize and highlight key points, making it easier to convey the learning objectives.
Furthermore, by synchronizing the narration with the elements on the screen, you can create an effect as if the instructor or tutor is explaining directly.
Since the explanations are focused on key points within a learning screen composed of multiple elements, it becomes easier to remember and retain the learning content.
>How to Create e-Learning Materials ③ - Video Format Edition
>How to Create e-Learning Materials ④ - PowerPoint Edition
2. Benefits of Animation Materials
The major benefit is "clarity."
Especially in cases of complex learning content, when learners may not be highly motivated or lack sufficient prior knowledge, the material is explained step by step, making it easy to understand.
Even in cases that are difficult to reproduce in live action, such as responses during disasters, examples of compliance violations, and the movement of a car's engine while driving, it is possible to express them, allowing for learning with a concrete image in mind.
Furthermore, if the animated materials come with narration, it is possible to reduce the elements displayed on the screen, especially text, resulting in a concise and sophisticated appearance.
It is possible to learn through repeated practice until understanding is achieved, as well as through focused repetitive learning.
There are also benefits in terms of maintainability.
In the case of live-action footage, there are often situations where corrections and edits are insufficient, and if re-shooting is necessary, costs and production time tend to increase.
In that regard, using illustrations for animation allows for relatively easy revisions.
3. Disadvantages of Animation Teaching Materials
First, there are the costs of producing educational materials. The more types of materials that make up the educational content, such as animations and narrations, and the richer and more detailed the expressions are, the more the costs and development time tend to increase.
Of course, each process, such as creating illustration materials, producing animations, and creating narrations, requires specialized professionals, so personnel are also needed.
In addition, to create "highly effective" animated teaching materials, knowledge and skills in instructional design are essential. It is necessary to appropriately design the "presentation" and "expression" such as the order of learning and learner control of the materials according to the content to be learned.
Furthermore, since characters and backgrounds are inevitably stylized through illustration, it can be pointed out that conveying a realistic atmosphere is difficult.
Depending on the characteristics of the learners using the materials, having animations can sometimes be a disadvantage.
There may be cases where learners are highly motivated, already have a certain level of knowledge, have clear points they want to learn, and want to quickly understand the overall content.
In such cases, if the materials require waiting for the animation to finish before reaching the necessary sections, they may be perceived as inconvenient materials.
4. Themes Suitable for Animated Teaching Materials
When learning about the mechanisms of car engines, food chains, PDCA, and other topics that require a structured understanding of how things are formed and function, as well as the annual schedule and tasks of accounting operations, you can understand them step by step.
Additionally, even if something is difficult to capture in live-action, it can be reproduced schematically, allowing for explanations of harassment-related negative examples and mechanisms of machines that are not normally visible.
Additionally, it is also suitable for operation simulations, as it can reproduce the operations and movements of business systems and applications.
Even in cases such as accounting-related or application-related scenarios where practice cannot be done in the actual system, it can be utilized for learning and practicing operations.
5. How to Choose Animation Teaching Material Creation Tools
It is convenient to use tools (applications) when creating educational materials in HTML5 format.
The tools that we frequently use in our company are as follows.
- ・Adobe Animate CC
- ・Articulate Storyline
- ・Articulate Rise
- ・iSpring Suite
- ・Microsoft PowerPoint
Since there are various features and levels of difficulty, you can choose according to your budget, including the purchase cost, the skills of the person working, and the development period.
Among these, Adobe Animate CC is the successor application to Flash. With Adobe Animate CC, you can create HTML5 content using operations similar to those of traditional Flash.
Please note that Flash format files will no longer be available after the end of 2020. For more details, please see here.
Among the options mentioned, iSpring Suite is often recommended for customers who prefer an easy-to-handle solution that can be developed in-house.
With iSpring Suite, you can create dynamic content using the animation effects set in PowerPoint as they are. You can also synchronize and fine-tune the timing of animations and narration audio on the timeline.
Let me explain a bit more specifically. iSpring is used as a plugin software for PowerPoint. Once installed, a tab will be generated in PowerPoint.
The general steps are as follows.
- 1) Create slides in PowerPoint
- ・Application of Templates
- ・Slide Creation
- ・Addition of animation effects
- 2) Use the iSpring tab to finalize as teaching materials
- ・Synchronization of Animation and Narration
- Creating Quizzes
- ・Export in HTML5 format
Please note that iSpring Suite, Articulate Rise, and Articulate Storyline do not have a Japanese version released, so the interface is only available in English (as of November 2020).
Related Articles: What is iSpring Suite? Features, Pricing, and Benefits of Implementation
>Create Rich e-Learning Materials with Familiar PowerPoint - iSpring Implementation Support
Next, let me introduce Vyond.
Vyond is an animation tool used by millions of people worldwide, featuring an easy-to-use interface similar to PowerPoint, requiring no special skills or experience.
The animations you create can not only be published as they are but can also be imported into other tools like PowerPoint, iSpring, and Articulate Storyline to be used as part of e-learning content.
With over 1,900 backgrounds, more than 1,300 characters, over 14,000 prop illustrations, and more than 2,400 actions (character expressions and movements) readily available, you can create animations simply by combining them.
Related Articles: A Comprehensive Guide to Features and Pricing of Vyond Plans! What is the Difference Between Direct Purchase and Agents?
>Vyond (Animation Production) Sales
6. The Process of Creating Animated Teaching Materials and Required Skills
The standard process for completing animation-based e-learning materials is as follows.
Step 1. Planning and Design
This is the process of finalizing the specifications of the teaching materials, such as functions, structural design, and delivery methods.
By carrying out this process thoroughly and without contradictions, each stage will proceed smoothly and efficiently.
At this stage, we will decide on the UI (user interface), design, structural plan, and how to track learning history for the teaching materials.
Step 2. Manuscript Creation
We create the manuscript while considering what to show and what to explain on the screen.
As shown in the figure above, the manuscript is also a blueprint for the teaching materials.
The necessary elements of the manuscript are as follows:
●Narration text (only if there is narration)
●Scenario (necessary materials and production ideas)
●Elements on the screen (screen images including text, illustrations, photos)
Tools that are convenient for creating manuscripts include PowerPoint or Excel.
In PowerPoint, it is easy to handle illustrations and shapes, and you can freely layout on the slides.
In addition to screen images, narration and direction instructions are also included.
In Excel, you can create scenarios that make it easy to follow the flow over time. You can arrange screen images, narration, and direction instructions in columns, and list scenes in each row.
The writer of the manuscript should be someone who is familiar with the content of the teaching materials.
However, there may be cases where the person in charge within the company must create materials based on documents prepared by experts or external instructors. In such cases, it is advisable to conduct interviews with experts, instructors, or system designers about the materials before starting to write, or to request a review of the written manuscript, in order to create an accurate document.
Whether to create materials with narration or without narration significantly impacts not only the manuscript writing but also the subsequent processes, so it is recommended to consider this carefully.
When It Is Better to Have Narration
・Teaching materials that explain complex content
・Teaching materials with a high level of difficulty
By visually confirming the correlation diagrams and operational procedures on the screen while listening to explanations that match the content on the screen, it becomes easier to understand and deepens comprehension. Without narration, one must learn by reading the explanatory text while looking at the diagrams and operation flows, which requires going back and forth or repeatedly viewing both.
When It Is Better to Have No Narration
・Teaching materials used like dictionaries or manuals
・Teaching materials with simple content
・Teaching materials for quickly disseminating rules or changes by year
・When there are restrictions on budget, development time, or delivery environment
If there is a strong need to quickly access necessary information rather than listening to narration, having no narration may be more suitable.
In cases where the material is used like a dictionary or reference, or when the content does not require narration for explanation, it may be determined that there is no need to spend time and money.
Additionally, there may be cases where there are high-priority elements, such as wanting to quickly disseminate known rules or changes in regulations.
Furthermore, since having no narration places less burden on budget, development time, and delivery environment, there may be cases where the decision for no narration is made depending on the development situation.
Step 3. Preparation of Visual Materials (Illustrations and Photos)
We create diagrams using PowerPoint's drawing features and prepare visual materials such as illustrations from free resources.
Free resources can be purchased from specialized vendors like pixta and Afro, or downloaded from websites that offer free illustration materials.
By enhancing the visual aspects of e-learning materials, they become easier to understand and communicate. Even topics that are difficult to convey with words alone become clear when illustrated.
For example, the following is a diagram explaining the principles of trade management.
From the Kinki Bureau of Economy, Trade and Industry website
https://www.kansai.meti.go.jp/E_Kansai/page/201511/01.html
It can be challenging to explain this concept in writing so that anyone can understand, but by visualizing it like this, it becomes easier to grasp.
Furthermore, with e-learning materials, you can add animation effects to match the explanations. You can emphasize the parts being explained or have illustrations move along the flow of the content, making it even easier to understand.
Additionally, by creatively designing the visual elements, various effects can be expected.
・In educational materials for learning system operations, explanations are provided while showing actual screens and printed reports.
・In educational materials for learning machine operations, photos of the actual machine's control panel are used to ensure that learners can operate it without confusion after completing the training.
Moreover, regarding the visual materials, the higher the specialization and complexity of the educational materials, the higher the quality required.
If you need technical illustrations that accurately depict machinery or illustrations that detail the use of safety equipment, please consider hiring external professionals.
Step 4. Narration Recording
If there is narration, we will conduct narration recording.
There are two main methods for recording.
●Synthetic voice
●Human reading
Synthetic voices are created using dedicated applications. HOYA Corporation's product "ReadSpeaker (formerly known as VOICE TEXT)" is well-known.
You can redo it as many times as you want with just the cost of purchasing the application, but when it comes to specialized terminology, adjustments to pronunciation and other fine-tuning may be necessary.
When it comes to human reading, consider whether to hire a professional narrator. If you do not hire a professional, it may be possible for the instructor of a group training or an employee from the training department to take on this role.
With a computer and a microphone, recording can be done within the office or in a conference room, but there are issues with sound quality and noise.
If you record in a rental studio, you will receive audio with noise and NG takes removed. Specialized equipment and knowledge are not required, but rental fees for the studio will be necessary.
When requesting a pro narrator, we will negotiate the performance fee and schedule.
Currently, there are services available not only for studio recordings but also for so-called "home recordings" where the narrator records in their own environment, as well as the option for the client to record online while communicating with the studio where the narrator is located without having to go to the studio.
Step 5. Effectuation (Editing)
So far, we have gathered the materials such as the manuscript, visual elements, and narration. In this stage, we will combine these materials to create the educational content.
The tools selected initially (such as Adobe Animate CC, Articulate Storyline, iSpring Suite, etc.) will be used here.
Based on the manuscript, we will create animations using the prepared materials.
If there is narration, we will synchronize the timing of the animation and the narration (this is called "synchronization").
If necessary, we will also handle sound effects and background music in this process.
Once the animation creation and audio synchronization are complete, we will export it in HTML5 format.
If tests are to be included in the materials, they will be created in this process.
Depending on the tools used, templates for tests may be available. By using those features, it is possible to create systems for questions, grading, explanations, and more without any special knowledge.
Step 6. Delivery, Learning Management and Operations
Once the completed materials are registered in the LMS, it is finished.
If you are not using the LMS, preparations and notifications will be made according to the delivery method.
7. Benefits of Utilizing Animation Teaching Material Production Outsourcing Services
Animation materials offer many benefits, but creating them requires various skills and tools.
Therefore, how about considering the use of our educational material production outsourcing service?
Even when there is no in-house know-how or resources are lacking, by communicating your requests, we can complete the animated teaching materials within the necessary deadline.
Our human science animation educational material production service has produced approximately 2,800 e-learning materials since the service began in 2000.
We have a proven track record in both projects that take a few weeks to complete and large-scale developments that require several months, and we are well-regarded for our project management, including progress management.
In addition, we support translations in over 50 languages. We can handle both the localization of materials created overseas into Japanese and the expansion of Japanese materials into multiple languages.
Of course, we also support narration recording in each language.
Consultants, designers, writers, engineers, and other professionals necessary for educational material development are on staff, providing solid support to our clients based on their extensive experience.
Including translation, we can handle everything from development to LMS integration in a seamless manner, which not only optimizes labor and costs but also reduces the burden on our clients.
Additionally, it is possible to consult on outsourcing only the necessary parts, such as creating the scenario in-house and outsourcing only the animation, illustrations, or narration text.
If you are interested in our services, please feel free to contact us.
>Creation of Animation e-Learning Materials
>Vyond Animation Production Support
>Implementation of iSpring Products
Author:
Shizuko Sase
Education Solutions Department Production Group Writer
After joining Human Science, worked as a technical writer,
gaining experience in the design and writing of product manuals and business manuals.
Subsequently engaged in writing and production direction of e-learning materials.
Involved in the production of approximately 200 educational materials so far.
Contact Information:
Phone Number: 03-5321-3111
hsweb_inquiry@science.co.jp
Understand the features and usage of iSpring Suite / iSpring MAX!Complete Guide to iSpring

This section introduces the overview and usage of the animation teaching material production tool "iSpring."
This book provides a complete understanding of iSpring. You will also have an image of the teaching material production after implementation.
【Contents】
- What is iSpring Suite / iSpring Suite MAX
- How to create teaching materials using iSpring Suite / iSpring Suite MAX
- Overview and Utilization of iSpring Suite (MAX)
- Features of iSpring Suite (MAX)
- Specific Usage of iSpring Suite (MAX)
- iSpring Suite (MAX) Certified Reseller
- Introduction to Human Science