Jurnal Mantik, 6 (3) (2022), ISSN 2685-4236 (Online)

Published by:Institute of Computer Science (IOCS)

Jurnal Mantik
Journal homepage: www.iocscience.org/ejournal/index.php/mantik

Developing Learning Material for Animation 2D

Instruction in Vocational High Schools
Septian Rheno Widianto1*, Rahmatiah2, B. Syukroni Baso3 , Nana Citrawati Lestari4,
Arifin5
1*Universitas Bina Sarana Informatika, Indonesia
2Universitas Muhammadiyah Makassar, Indonesia
3Universitas Muhammadiyah Makassar, Indonesia
4STKIP PGRI Banjarmasin, Indonesia
5Universitas Borneo Tarakan, Indonesia

ARTICLE INFO ABSTRACT

Article history:
Changes in information and communication technology
Received Oct 7, 2022 necessitate rapid adaptation in the application of technology to
Revised Oct 26, 2022 the learning process in education. As participants in learning
Accepted Nov 9, 2022 activities, teachers are required to be able to develop engaging,
technology-based learning models, one of which is the use of
interactive multimedia learning resources. In vocational high
Keywords: school learning, there are 2D animation courses that teach the
Technology Adaptation in fundamentals of creating 2D animation. This subject is
Learning interesting because it can be a forum for students' creative skills;
Interactive Learning therefore, it is highly appropriate to use Interactive Learning
Interactive Multimedia media, which can reduce a static atmosphere and create an
Model Development Life Cycle effective, interesting, interactive, and enjoyable learning process.
In this study, interactive multimedia learning is implemented in
2D animation classes in vocational high schools by modifying the
2D animation learning curriculum. The approach of application
development employs the Multimedia Development Life Cycle
model, which comprises of the steps of concept, design, material
collecting, assembly, and testing. The concept of multimedia
design employs the notion of simplicity, which tries to make the
material's content not overly complex, concise, clear, instructive,
and convincing in order to pique students' interest. Testing the
program utilizing a blackbox technique that demonstrates the
application has functioned properly and is in compliance with
the user needs analysis.
This is an open access article under the CC BY-NC license.

Corresponding Author:
Septian Rheno Widianto,
Program Study of Information System
Universitas Bina Sarana Informatika Kampus Pontianak,
Abdul Rahman Saleh No.18 Street, Bangka Belitung Laut, Southeast Pontianak District, Pontianak
City, 78124, Indonesia
Email: [email protected]

1. INTRODUCTION

The development of the digital age is presently generating a new learning pattern, which is
also occurring in the sphere of education. The existence of changes in information and
communication technology encourages education to be able to adapt quickly to the

Journal homepage: www.iocscience.org/ejournal/index.php/mantik

Mantik ISSN 2685-4236 (Online)  3447

application of technology in the learning process (Paramansyah & SE, 2020), including at
the level of Vocational High School education, which is primarily intended to prepare
middle-level skilled workers to support the development of a sector of the national economy
(Pandansari & Gafur, 2016). Due to the ease with which internet facilities (Dewantara et
al., 2022) facilitate the transmission of knowledge and the application of technology-based
learning media (Aditya et al., 2020), it is crucial to develop a learning experience that is
both engaging and enjoyable. The instructors are the driving factor behind digital
learning5] (Arifin, 2021). This indicates that teachers have the necessary abilities and are
familiar with the use of digital-based media to research and acquire the necessary material
to support the learning process. Therefore, it is the responsibility of the instructor to be
able to construct enjoyable learning based on the needs of the students, including the
selection of fascinating learning models or approaches that are compatible with technology,
such as interactive multimedia learning material.
Interactive learning media will provide direct visualization of students so that they
can engage directly with the media; for instance, the media will deliver correct or incorrect
responses as students answer practice questions contained within the media (Bernarducci,
2017). Interactive multimedia is the combination of many media, such as mixing audio and
visual elements in a presentation that induces user interaction. There are 2D animation
classes at the vocational high school level that teach the fundamentals of creating 2D
animation. This is an intriguing subject because it allows pupils to express their creativity
(Arifin et al., 2022)(Kandouw et al., 2022). Because the 2D animation subject focuses on
the practice of students, the learning process does not rely solely on lecture techniques.
However, there are obstacles to adding material if only verbal, learning media in the form
of interactive multimedia, so that learning materials become interesting, interactive, and
enjoyable for students to comprehend. acquiring (De Vega & Arifin, 2022) from the
instructor through interactive multimedia (Walangadi & Pratama, 2020)(Arifin et al., n.d.).
This Interactive Learning Media may create a dynamic, engaging, interactive, and enjoyable
learning environment. In addition to the aforementioned uses, further uses of diverse
learning aids will generate variances in learning so as to prevent boredom among students
(Novita & Harahap, 2020).
Various forms of interactive multimedia learning media have been developed to aid
teachers and students in the learning process at the Vocational High School level (Suyitno,
2016)(Arif & Mukhaiyar, 2020)(Pandansari & Gafur, 2016), so the objective of this research
is to develop 2D animation learning media for the 2013 curriculum in Vocational High
Schools. As an alternative, interactive media can be presented in the form of two-
dimensional animation that can leave an engaging impact on pupils who view it. In
addition, learning materials can be made more engaging and simple to comprehend,
challenging content objectives become simple, and a stressful learning environment
becomes enjoyable.

2. RESEARCH METHOD

2.1. Interactive Multimedia

Multimedia is a combination of diverse media or file formats in the form of text, vector
or bitmap images, graphics, sound, animation, video, and interaction that have been
bundled into digital or computer files and used to communicate with the public (Chen,
2022). While interactive comprehension is related to two-way communication or more of
the communication components (Poborchaya et al., 2022), it is distinct from passive
comprehension. Based on the definitions of multimedia and interactive, interactive
multimedia is a multimedia display created by designers such that the appearance serves
the purpose of informing consumers of information and is interactive (Limbong &
Simarmata, 2020).

Septian Rheno Widianto, Developing Learning Material for Animation 2D Instruction in Vocational
High Schools
3448  ISSN 2685-4236 (Online)

2.2. The Method of Analysis

The method for developing multimedia uses a life cycle model for multimedia
production. Several stages, namely the concept stage, the design stage, the material
collection stage, the assembly stage, and the testing stage, were implemented in research
to adapt this model (Mustika et al., 2018). In practice, the sequence of stages can be
rearranged and tailored to the needs analysis in order to generate multimedia forms that
meet user requirements (Mustaqbal et al., 2015).

3. RESULTS AND DISCUSSIONS

3.1. Phases of the Concept of Interactive Multimedia

In presenting learning materials for interactive media in vocational high schools, the
fundamental notion of interactive media design emphasizes "simplicity". The concept of
simplicity is applied to content that is not overly complicated, brief, straightforward,
instructive, and compelling in order to pique students' interest. There is a primary menu
of 2D animation content, a task menu for assessing student comprehension, and a student
profile menu in interactive multimedia.

3.2. Phases of the Design of Interactive Multimedia

The design process begins with the creation of the interactive multimedia
application's navigation layout for 2D animation learning. Figure 1 is seen below.

Figure 1. 2D Animation Learning Interactive Multimedia Application Menu Flow

In this interactive multimedia design, the introduction containing the start button to
initiate the interactive media will be displayed initially. After pressing the start button, the
primary menu featuring materials, assignments, and profiles is displayed. If you click the
material button, an introduction will display allowing you to select from the four accessible
materials: what is two-dimensional animation, twelve animation principles, two-
dimensional animation approaches, and the practice of two-dimensional animation. If you
press the button labeled What is two-dimensional animation, an explanation of two-
dimensional animation will show. Then, if you press the button, you will see the twelve
animation principles, the twelve fundamental animation concepts that will be studied
alongside the relevant examples. When you click the Two-dimensional animation button.

3.3. Phases of the Material Collecting of Interactive Multimedia

At the stage of collecting material for the interactive multimedia application of 2D
animation, several materials are used, including character assets created by researchers,

Jurnal Mantik, Vol.6, No. 3, November 2022: pp 3446-3452

Mantik ISSN 2685-4236 (Online)  3449

learning videos obtained from the internet, Audio in the form of Sound Effects and
Backsound, which the author downloads from the youtube.com website and which is free
from copyright restrictions. As for the content of 2D animation learning materials based
on the 2013 curriculum syllabus for 2D animation subjects in vocational high
schools(Yordyansyah & Mariono, n.d.), there are 2D animation book references.

3.3. Phases of the Assembly of Interactive Multimedia

The assembly stage begins with analyzing software requirements to support the
creation of interactive multimedia. As a medium for creating a digital media piece, software
or applications play a crucial role. There are numerous sorts of software, each of which
can aid in the creation of suitable digital works. Using software, interactive 2D animation
instructional materials include:
a. Adobe Animate is used to create vector graphics and animations for television programs,
online videos, websites, and web apps.
b. Adobe Illustrator is a program for processing and altering vector pictures and drawings.
c. Adobe Premiere is a video-editing product included in the Adobe Creative Suite, a suite
developed by Adobe Systems for graphic design, video editing, and web application
development.
d. Adobe Audition is an application for processing multimedia data, namely audio/sound
files. Adobe Audition allows us to capture sound, enhance sound quality, add various
sound effects, and integrate many sound tracks into one.
e. Format Factory is a program for converting media file types such as photos, movies, and
audio files, among others. In addition to modifying media files, Format Factory may also
be used to shrink media file sizes.

The development of animated assets is a subsequent step in the assembly process.

Using Adobe Illustrator and Adobe Photoshop CS6, materials including backdrops,
character preparation, buttons for interactive media, application icons, and supporting
items are digitally illustrated. Six background shapes are used in the background creation
procedure. Figure 2 illustrates how the background was created.

Figure 2. Background Creation Process

The next step is to enter voice over and audio components. The author obtains audio
from the youtube.com website in the form of Sound Effects and Backsound, and the audio
is copyright-free. The author created the voiceover by writing the script, recording the
dubber's voice with a mobile device, then editing it with Adobe Audition to add it to video
lessons and characters.

Septian Rheno Widianto, Developing Learning Material for Animation 2D Instruction in Vocational
High Schools
3450  ISSN 2685-4236 (Online)

Figure 3. Sound Editing Process

Assembling the animated display of the interactive multimedia 2D animation
application follows the completion of the application's assets, background, and voice. The
animation preparation stage is adjusted to the navigation structure in Figure 1 at this
point. the material menu, task menu, and profile menu make up the application's main
menu structure. The content of the introduction material display, which includes the 2D
animation concepts and methods, is shown in Figure 3.

Figure 4. Material Display

3.4. Phases of the Testing of Interactive Multimedia
Blackbox testing is used throughout the application testing stage (Wahono et al.,
2020)(Tohirin & Widianto, 2020). The blackbox testing approach aims to identify which
items on each application menu can operate correctly and are as expected (Gondewa et al.,
2020)(Wiguna et al., 2021). The table below, Table 1, lists many blackbox testing situations.

Table 1. Blackbox Test Results

No Testing Scenario Result Description
1 App Initial Interface Success The buttons and animations function as planned.
2 Main Menu Interface Success The buttons and animations function as planned.
3 Material Menu Interface Success The buttons and animations function as planned.
4 Task Menu Interface Success The buttons and animations function as planned.
5 Profil Menu Interface Success The buttons and animations function as planned.
6 Intro Material Menu Interface Success The buttons and animations function as planned.
7 Accessing Materials Success The buttons and animations function as planned.

4. CONCLUSION

The study's conclusion is that interactive multimedia applications for 2D animation lessons
have been effectively developed in order to help teachers with teaching activities. These
applications were developed based on the adaption of the K13 syllabus for 2D animation
lessons. multimodal, interactive learning In order to promote knowledge and interaction in

Jurnal Mantik, Vol.6, No. 3, November 2022: pp 3446-3452

Mantik ISSN 2685-4236 (Online)  3451

the teaching and learning process, 2D animation employs the simplicity principle to
produce engaging and interactive technology-based learning for students. The interactive
multimedia application was created utilizing the Multimedia Development Life Cycle
approach, and after undergoing the application functionality testing stage using blackbox
testing, it was determined that the app was functioning properly and meeting the needs of
the user analysis.The study's conclusion is that interactive multimedia applications for 2D
animation lessons have been effectively developed in order to help teachers with teaching
activities. These applications were developed based on the adaption of the K13 syllabus for
2D animation lessons. multimodal, interactive learning In order to promote knowledge and
interaction in the teaching and learning process, 2D animation employs the simplicity
principle to produce engaging and interactive technology-based learning for students. The
interactive multimedia application was created utilizing the Multimedia Development Life
Cycle approach, and after undergoing the application functionality testing stage using
blackbox testing, it was determined that the app was functioning properly and meeting the
needs of the user analysis.

REFERENCES

Aditya, M. A., Mulyana, R. D., Eka, I. P., & Widianto, S. R. (2020). Penggabungan Teknologi Untuk
Analisa Data Berbasis Data Science. Seminar Nasional Teknologi Komputer & Sains (SAINTEKS),
1(1), 51–56.
Arif, A., & Mukhaiyar, R. (2020). Pengembangan Multimedia Interaktif pada Mata Pelajaran Dasar
Listrik dan Elektronika Kelas X Teknik Instalasi Tenaga Listrik di SMK Muhammadiyah 1
Padang. JTEV (Jurnal Teknik Elektro Dan Vokasional), 6(1), 114–119.
Arifin, A. (2021). PENDIDIKAN MULTIKULTURAL: IDEOLOGI PEMBELAJARAN DAN PENGAJARAN
DI SEKOLAH. Jurnal Borneo Humaniora, 4(2), 96–102.
Arifin, A., Haryanto, H., Basri, M., & Ansari, A. (n.d.). Multicultural Approach in Developing
Instructional Learning Material at Indonesian Senior High School. PROCEEDINGS OF THE 65th
TEFLIN INTERNATIONAL CONFERENCE, 65(02).
Arifin, A., Norain, S., & Ridwan, R. (2022). Esp Course Design: The Need Analysis On English For
Tourism Book For Travel Business Department Of Eleventh Grade Students At Smkn 1
Tarakan. Technium Education and Humanities, 2(2), 1–7.
Bernarducci, M. (2017). Multimedia for Learning: Methods and Development -Book Review. European
Journal of Education Studies.
Chen, P. (2022). Design and Construction of an Interactive Intelligent Learning System for English
Learners in Higher Education Institutions. Advances in Multimedia, 2022.
De Vega, N., & Arifin, A. (2022). Teachers’ Experiences of Implementing D-Learning. Proceedings of
the 4th International Conference on Vocational Education and Technology, IConVET 2021, 27
November 2021, Singaraja, Bali, Indonesia.
Dewantara, R., Cakranegara, P. A., Wahidin, A. J., Muditomo, A., & Sudipa, I. G. I. (2022).
Implementasi Metode Preference Selection Index Dalam Penentuan Jaringan Dan Pemanfaatan
Internet Pada Provinsi Indonesia. J-SAKTI (Jurnal Sains Komputer Dan Informatika), 6(2), 1226–
1238.
Gondewa, T., Utami, S. F., & Widianto, S. R. (2020). EVALUASI KUALITAS SISTEM IINFORMASI
MANAJEMEN RUMAH SAKIT MENGGUNAKAN METODE McCALL PADA RSU Dr. SLAMET
GARUT. Kurawal-Jurnal Teknologi, Informasi Dan Industri, 3(1), 58–65.
Kandouw, F. C., Kaparang, D. R., & Mewengkang, A. (2022). Implementasi aplikasi media
pembelajaran berbasis android pada mata pelajaran animasi 2D dan 3D di SMK. EduTIK:
Jurnal Pendidikan Teknologi Informasi Dan Komunikasi, 2(1), 77–89.
Limbong, T., & Simarmata, J. (2020). Media dan Multimedia Pembelajaran: Teori & Praktik. Yayasan
Kita Menulis.
Mustaqbal, M. S., Firdaus, R. F., & Rahmadi, H. (2015). Pengujian aplikasi menggunakan black box
testing boundary value analysis (studi kasus: Aplikasi prediksi kelulusan smnptn). Jurnal
Ilmiah Teknologi Infomasi Terapan, 1(3).
Mustika, M., Sugara, E. P. A., & Pratiwi, M. (2018). Pengembangan media pembelajaran interaktif
dengan menggunakan metode multimedia Development Life Cycle. Jurnal Online Informatika,
2(2), 121–126.

Septian Rheno Widianto, Developing Learning Material for Animation 2D Instruction in Vocational
High Schools
3452  ISSN 2685-4236 (Online)

Novita, R., & Harahap, S. Z. (2020). Pengembangan media pembelajaran interaktif pada mata
pelajaran sistem komputer di SMK. Informatika, 8(1), 36–44.
Pandansari, P., & Gafur, A. (2016). Pengembangan Multimedia Interaktif untuk Pembelajaran Desain
Busana di SMK. Jurnal Inovasi Teknologi Pendidikan, 3(2), 237–248.
Paramansyah, H. A., & SE, M. M. (2020). Manajemen Pendidikan Dalam Menghadapi Era Digital.
Arman Paramansyah.
Poborchaya, N. E., Kudryashova, A. Y., & Adzhemov, A. S. (2022). Communication Theory Teaching
Methods Using Multimedia Technologies and Application Packages. 2022 Systems of Signals
Generating and Processing in the Field of on Board Communications, 1–5.
Suyitno, S. (2016). Pengembangan multimedia interaktif pengukuran teknik untuk meningkatkan
hasil belajar siswa SMK. Jurnal Pendidikan Teknologi Dan Kejuruan, 23(1), 101–109.
Tohirin, T., & Widianto, S. R. (2020). Peran Trello dalam Adopsi Agile Scrum Pada Pengembagan
Sistem Informasi Kesehatan. Multinetics, 6(1), 32–39.
Wahono, P., Mugia, D., Rachman, B., & Widianto, S. R. (2020). Integrasi Data Kontak HP Berbasis
Kartu SIM Menggunakan Aplikasi atau Platform Lain. Seminar Nasional Teknologi Komputer &
Sains (SAINTEKS), 1(1), 44–50.
Walangadi, H., & Pratama, W. P. (2020). Meningkatkan Pemahaman Belajar Siswa Menggunakan
Media Video Animasi 2D. Aksara: Jurnal Ilmu Pendidikan Nonformal, 4(3), 201–208.
Wiguna, I. K. A. G., Dewi, D. P. D. K., & Sudipa, I. G. I. (2021). Implementasi OLAP pada Data Kerja
Praktik dan Tugas Akhir Menggunakan Framework Modular Cube JS. INFORMAL: Informatics
Journal, 6(3), 142–153. https://doi.org/https://doi.org/10.19184/isj.v6i3.27614
Yordyansyah, A.-H. A., & Mariono, A. (n.d.). Pengembangan Multimedia Interaktif Materi Prinsi-Prinsip
Dasar Animasi Mata Pelajaran Animasi 2 Dimensi Bagi Siswa Kelas XI Jurusan Multimedia Di
SMK Informatika Sumber Ilmu Tulangan Sidoarjo.

Jurnal Mantik, Vol.6, No. 3, November 2022: pp 3446-3452