Interactive M-Learning Design Innovation using Android-Based Adobe Flash at WFH (Work From Home)

Purpose: The benefits of technology in education are among the essential factors in the Work From Home (WFH) period. One of these learning media innovations is the design of mobile-based interactive M-Learning. Interactive M-Learning is a dynamic learning technology where the learning process contains theory and questions and features animation, game interaction, and sound and video. Methods: The learning revolution from computers to mobile is an effective way because the mobility and network connections that have been presented on mobile devices make it easier for users to access information as proposed by Mushtaq. Interactive M-Learning applications are designed with UML (Unified Modeling Language) modeling by utilizing several diagrams such as Usecace, Activity, Sequence, Class Diagram to determine the actors involved in the description of the activities that occur in the use of the M-Learning system. Result: The design results are translated into an application using Adobe Flash and then implemented on Android mobile devices. Adobe Flash is software used to create images and animations. The results of M-Learning, which have become an application, provide convenience in the distance learning process with a concept. Novelty: It does not provide simple learning but is also attractively designed.


INTRODUCTION
The impact of the Covid-19 Pandemic has forced all activities to be carried out from home with activity aids, namely technology, and telecommunications media [1]. One thing that is affected is in the field of education. Namely, the learning process must be carried out online, and face-to-face learning activities are not allowed, both from elementary and tertiary institutions [1]. One way to carry out teaching and learning process activities is by utilizing technology [2]. With the development of technology, it can give birth to innovations in designing a new method or container as a tool to facilitate the teaching and learning process that is more modern and easily accepted and provides a feeling of boredom for students so that learning methods can be more lively and more creative [3]. By utilizing existing technology, it can support existing education. A handheld telephone or commonly referred to as a Smartphone, is a technology that cannot be separated from everyday life [4]. Besides being easy to access, cell phones are also easy to use anytime, anywhere and almost all people and students are now using this device as a medium of education [5]. At this time, there are many high-tech mobile telephones circulating in the community. Therefore, smartphones are a very effective learning medium for the current online learning process [5].
Mobile Learning (M-Learning) is learning or exercises carried out using mobile technology devices such as computers, PDAs, cell phones that allow learning to occur anywhere [6]. Meanwhile, Mobile Learning is what learning applies in places and locations that are not specified or learning that applies when students use mobile technology [7]. Many researchers provide a complex definition of Mobile Learning in which Mobile Learning can also provide education and practice using PDAs, palmtops, tablet computers, smartphones, and mobile phones [8]. Mobile Learning is learning using mobile devices such as Palms, iPads, PDAs and mobile phones. In addition, Mobile Learning is learning that applies when communication between individuals and other individuals applies wirelessly [9].
Mobile learning architecture can use the infrastructure provided by cellular operators, which in principle is a 3-tier application where there is a front-end layer, application server, and database server [10]. The mobile learning architecture can be seen in the Figure 1. Unified Modeling Language (UML) is a visual language for modeling and communicating about a system using diagrams and supporting texts [11]. UML only serves to perform object-oriented modeling following the demands of today's industry standards [12]. So, the use of UML is not limited because a standardized modeling language is used to analyze and design systems in a graphical way [13]. The development of UML usage depends on the level of abstraction of its use. So, it is not necessarily different views in the use of UML used and what things are visualized [14]. UML version 2.4 was released by the Object Management Group (OMG) in January 2011 and had 14 kinds of diagrams grouped into two categories [15]. The division of categories and kinds of diagrams can be seen in Figure 2   Adobe Flash is a multimedia software used to facilitate animation, videos, games, and other multimedia applications [16]. Adobe Flash CS6 is software specially designed by Adobe and a professional standard application authoring tool program to create attractive animations for interactive and dynamic website development purposes [17]. Flash is also used in making animation, but nowadays, flash is also widely used for other purposes, such as making games, presentations, building learning animations, and even making movies. Animation produced by flash is an animation in the form of a movie file [18]. The resulting movie can be in the form of graphics or text. The graphic referred to here is a vector-based graphic, so that when accessed via the internet, the animation will be displayed faster and look smoother [19]. In addition, Flash also can program graphics that provide reactivity between users in a learning management system [20]. Macromedia Flash has been produced in several versions. The latest version of Macromedia Flash is Macromedia Flash 8 [21]. And now Flash has switched vendors to Adobe. Adobe is a software vendor that buys Flash from a previous vendor, Macromedia. Since then, Macromedia Flash has changed its name to Adobe Flash. The making of mobile learning uses Adobe Flash CS6 [22]. The start page display for the first time opening Adobe Flash Professional CS6 can be seen in Figure 3. Here are some of the advantages of the Adobe Flash CS6 programming language: 1) Adobe Flash provides support for HTML 5.
2) Adobe Flash provides support for android and Ios with the latest adobe flash player.
3) Quick export of symbols and animation sequences resulting in sheet scripts for enhanced gaming experience, workflow, and performance. 4) Adobe Flash provides support for making applications that look attractive with 2-dimensional animation (moving images). 5) Adobe Flash can be used on a vast network.
The purpose of this research is to create a mobile-based learning application using Adobe Flash CS6 software by exploring the Flash facility so that it not only produces products in the form of images and animations but can also produce interactive applications for learning media.

METHODS
This M-Learning design method uses the SDLC (Software Development Life Cycle) discipline with the Waterfall method. The following is the research framework seen in Figure 4.

2) Design
The modeling process is carried out when the needs analysis process is complete. It is carried out by modeling the scheme using several UML models. The results of this design are an initial description of the M-Learning application that will be built before being translated into a programming language.

3) Implementation
The process of translating the design results in a programming language so as to produce an M-Learning application. At this stage, the concoction process is in the form of an application.

4) Verification
This stage is the stage where testing of applications that have been made is carried out in order to look for debugging or application defects.

5) Maintenance
At this stage, software maintenance and maintenance are carried out when the M-Learning software has been used.
Some UML diagrams are used in the design process of M-Learning applications to make it easier for Developers to code into an application.

1) Usecase Diagram
This diagram is an initial diagram used as a system analysis tool. The initial analysis determines what actors are involved with the system and what activities can be carried out by the actors.

2) Activity Diagram
This diagram is used to create a flow of system activities based on predetermined actors.

3) Sequence Diagram
This diagram is a breakdown of the activity diagram used to clarify the flow of all activities of one actor.

4) Deployment Diagram
It has entered the design stage, where this diagram is used to provide an overview of what software and hardware are used.

RESULT AND DISCUSSION
The results and discussion of M-Learning are described in use-case, activity, sequence, deployment, interface, and system testing.

Usecase Diagram
At the analysis stage, a use-case diagram in Figure 5 is needed as a tool. Two actors will be used in the system, namely the user and admin, and depicted the functions in the mobile learning application shown in Table 1. Users are application users who can access information about application update info, view application developer info, view competencies, view material, users can also practice understanding of the material with the evaluation menu, users can also listen to sounds, and send suggestions with the suggestion menu, Admin is an application manager that can update the system in both user applications, learning materials using web-based applications.

Activity Diagram
Activity diagrams of the analysis stages to describe the activities that can be carried out by actors in this M-Learning application. In Figure 6, we can see the user's activities, namely accessing the main menu, info, competencies, materials, evaluation, donations, and suggestions on the application.  The activity diagram for the exercise menu can be seen in Figure 8.

Sequence Diagram
Sequence diagrams are descriptions of object interactions arranged in time sequence. The following diagram is specifically associated with use-case. This sequence diagram shows step by step what must happen to produce a use case diagram. Figure 9 is a sequence diagram image for designing M-Learning applications.

Figure 9. Main Page Sequence Diagram
The sequence diagram of the material menu can be seen in Figure 10.

Deployment Diagram
This stage has entered into the design where this diagram shows the configuration of the components in the application execution process. This M-Learning application was built to be accessible via a mobile application specially made for installation on an Android-based mobile device, this mobile learning application has an application in the form of a web, and the application on the user will automatically process the application on the server. The deployment diagram is shown in Figure 12.

Interface Design
The interface is a concoction stage for an overview of the appearance of the application to be made. Material options will appear when the user selects the material menu. If the material is selected, the application will display a new page that contains a list of materials. The user can select the list of material about learning information technology in various fields by selecting the button to the new page in the form in Figure 13. The application material menu also provides a training menu to train users understanding in understanding the material. When the user selects the exercise menu, the application will display a new page in practice questions like Figure 14.

Testing Systems
Mobile Learning is built using Adobe Flash CS6. After the application design and installation is complete, the application launcher icon will be visible on the menu system of the mobile device. The main menu displays menus selected by the user, such as information, competence, evaluation, suggestions, and sound like Figure 15.  When the user selects the exercise menu, the application will display a new page in practice questions. The system in practice questions is that the user will not continue to the next question before the user correctly answers the questions. The assessment of the practice questions is in the form of a picture of the correct or wrong answer chosen by the user, like Figure 17. The application evaluation menu will display a new page, namely the exam form page. The following image displays the test form page for the user before conducting the evaluation test like Figure 18.

Test Results
The test result data from the application that has been developed is done through a questionnaire to 30 respondents, namely students of class VII who were randomly selected. The questionnaire is shown in Table  2. What is your assessment of this Android-based M-Learning? 2 What is your assessment about M-Learning that can interact with you? 3 What is your assessment of the visual appearance of M-Learning? 4 What is your assessment of the delivery of unique material accompanied by animation and sound? 5 What is your assessment of the practice questions that are displayed uniquely and interactively, like playing games? 6 What is your assessment of the ease of using this M-Learning application? 7 How do you rate the speed or inadequacy of the app interacting with you? 8 How do you evaluate the appearance of M-Learning which is still two-dimensional? 9 How do you rate all the features of this application? 10 How do you evaluate this kind of learning model?

CONCLUSION
The conclusion that can be obtained from applying the M-Learning application is a tool for system analysis and design using UML modeling by making use-case, activity, sequence, and deployment diagram design drawings. As an illustration of the system, an interface design is made to facilitate the design process using Flash CS6 software. The M-Learning application built using Flash CS6 has been successfully implemented on Android-based mobile devices. M-Learning is developed using 2-dimensional animation (moving image) visual, sound and animation to increase learning attractiveness. The level of excellent respondent satisfaction with the M-Learning application reaches 89% with an easy access mode only through student devices. The limit and time do not hinder that users can study anywhere and anytime using their mobile devices.