Courseware Development to Assist E-learning Submitted by

Courseware Development to Assist E-learning
Submitted by: LI LIMatriculation Number: U1420370F
Supervisor: Assoc Prof. MA Maode
School of Electrical & Electronic EngineeringA final year project report presented to the Nanyang Technological University
in partial fulfilment of the requirements of the degree of
Bachelor of Engineering
Table of Contents TOC o “1-3” h z u
Abstract PAGEREF _Toc524216013 h iAcknowledgements PAGEREF _Toc524216014 h iiList of Figures PAGEREF _Toc524216015 h iiiList of Tables PAGEREF _Toc524216016 h ivChapter 1Introduction PAGEREF _Toc524216017 h 11.1Background PAGEREF _Toc524216018 h 11.1.1E-Learning PAGEREF _Toc524216019 h 11.1.2Animation PAGEREF _Toc524216020 h 21.2Objectives and Scope PAGEREF _Toc524216021 h 31.3Organisations PAGEREF _Toc524216022 h 4Chapter 2Development Tools PAGEREF _Toc524216023 h 52.1Features of Adobe Animate CC 2017 PAGEREF _Toc524216024 h 52.2Main components of Animate CC 2017 PAGEREF _Toc524216025 h 72.2.1New document window PAGEREF _Toc524216026 h 72.2.2The main window PAGEREF _Toc524216027 h 82.2.3Stage PAGEREF _Toc524216028 h 82.2.4Timeline PAGEREF _Toc524216029 h 92.2.5Library PAGEREF _Toc524216030 h 102.2.6Components PAGEREF _Toc524216031 h 102.2.7ActionScript PAGEREF _Toc524216032 h 112.3Other components of Animate CC PAGEREF _Toc524216033 h 122.3.1Menu PAGEREF _Toc524216034 h 122.3.2Edit bar PAGEREF _Toc524216035 h 122.3.3Tools panel PAGEREF _Toc524216036 h 122.3.4Work area PAGEREF _Toc524216037 h 122.3.5Panel PAGEREF _Toc524216038 h 122.3.6Property panel PAGEREF _Toc524216039 h 122.4Free transform tool PAGEREF _Toc524216040 h 132.5Tween PAGEREF _Toc524216041 h 132.5.1Motion Tween PAGEREF _Toc524216042 h 132.5.2Shape Tween PAGEREF _Toc524216043 h 13Chapter 3Courseware Development PAGEREF _Toc524216044 h 173.1xxx PAGEREF _Toc524216045 h 173.2xxx PAGEREF _Toc524216046 h 17Chapter 4 PAGEREF _Toc524216047 h 18Chapter 5 PAGEREF _Toc524216048 h 18References PAGEREF _Toc524216049 h 19
AbstractE-learning is the new form of learning method employed with the help of technology, which allows learners to learn at their own pace and time without being in a classroom. This form of learning has been adopted into the mainstream of educational program by many universities. The Courseware Development to Assist E-learning is to develop a methodology of courseware to assist lecturers for Computer Networking course, utilizing computer animation tool Adobe Flash. The goal of this project is to make the content more illustrative to the students, which animations to aid in their understanding.

The latest version of Adobe Flash is Adobe Animate CC 2017, which is the software that I used to develop the courseware. This software allows the user to design vector graphics, animation, and publish the same for website, web applications and video games. In the near future, Adobe Flash will not be supported by Windows and other internet browser platform, it is extremely user-friendly for first-timers who has not use the software. The latest version includes a new function that convert flash files into HTML 5. HTML 5 is the fifth and the current major version of HTML standard. Hence, learning how to use flash can be beneficial to anyone.

We Will Write a Custom Essay Specifically
For You For Only $13.90/page!

order now

AcknowledgementsFirst of all, I would like to express my sincerest gratitude to my FYP supervisor, Assoc Prof. Ma Maode, a knowledgeable and responsible professor, who has provided to me so much help and valuable guidance in every stage of my final year project. Without his enlightening advice and patience, this project would not have been completed.

Secondly, I would like to thank to my parents for their encouragement and unconditional support throughout my years of study at university.
List of FiguresFigure 1 New document7
Figure 2 Main window8
Figure 3 Stage9
Figure 4 Timeline panel9
Figure 5 Library panel10
Figure 6 Components panel10
Figure 7 ActionScript11
Figure 8 Onion Skinning11
Figure 9 Onion Skinning 211
List of Tables TOC h z “TableCaption” c No table of figures entries found.In your document, select the words to include in the table of contents, and then on the Home tab, under Styles, click a heading style. Repeat for each heading that you want to include, and then insert the table of contents in your document. To manually create a table of contents, on the Document Elements tab, under Table of Contents, point to a style and then click the down arrow button. Click one of the styles under Manual Table of Contents, and then type the entries manually.

IntroductionBackgroundE-LearningIn recent years, with the advancement of technology, computer with integrated interface has become one of common household appliances. Now, educators are able to deliver full distance learning course to all students with the help of computer. E-Learning (Electronic Learning) is a new form of distant education. Of course, technology cannot replace teachers and lecturers, although it is a great tool to assist educators, and it can enhance the quality their teaching by reduce the time spent on administration.
Traditional way of teaching is giving a lecture with course notes display on the projector screen, the content and diagram on the notes could be complicated, and sometimes with the long lectures, the students can lose their concentration quickly. The moment when students lose their concentration, they will not understand and will not be able to remember what was taught.

E-Learning systems are much more convenient when compared to the traditional way of learning, and it provides more flexibility as students can learn remotely, and the learning materials can be stored in the form of media disc, or accessible through television or internet. Students have access to the courseware material anywhere as long as they have a computer with internet with them.

AnimationAnimation is commonly defined as rapid display of images that creates the illusion of movement. Animations are known to be eye-catching and have can change the contents to be interesting that would otherwise be boring to them.

The lecture notes from the course contain complex diagrams and theories sometimes can be very difficult to understand and visualize by the student. Therefore the Adobe Flash is used to create animation courseware to help the student understand the course material more easily.

Objectives and ScopeLearning is a very complex part of life, which can be daunting for students when they are overloaded with information required to study in school. To further improve our capability to learn, there are three major criteria that we can follow: Concentrate, Understand and Remember.

The objective of the project is to develop animation courseware which assist in E-learning for Computer Networking module. With the aid of the animation, students can understand complex ideas easily, and can beneficial for lecturer to explain their thoughts through visuals. Students tend to find animations more interesting than a wall of text, which helps to keep their concentration in check. Lecturers also can utilize the courseware as a teaching material to further elaborate on the concept for the module. This can greatly increase students’ likelihood of remembering things which they may not be easily done with texts.

It has been proven that most people are visual learners. Hence, people tend to remember pictures more easily than words itself. For example, history are rarely recalled since they were recorded by texts, but people can remember a movie scene which they watched few years ago clearly. Information that we pick up are fed into the brain, and the brain factors which is interesting, or not-interesting for us to process.

OrganisationsIn this report, the development of the courseware to assist E-Learning, and the implementation of the ActionScript to the Animate CC will be presented.

This report elaborates on the development of the courseware to assist E-Learning, and the implementation of ActionScript to Animate CC. It is broken down into 5 chapters, where each chapter further explains on its respective heading.

Chapter 1: Introduction
This chapter will briefly talk about the background of E-Learning and Animation, including their benefit in the learning process
Chapter 2: Development Tools
This chapter introduces the development tools, Adobe Animate CC 2017 and Free online Text To Speech (TTS) service, used in this project
Chapter 3: Courseware Development
This chapter presents process of the courseware development
Chapter 4: User Manual and Testing
This chapter run through instructions on using the courseware
Chapter 5: Conclusion and Recommendation
This chapter concludes the whole project and recommendations of using the courseware effectively to its full potential, and problems that may occurred, and how users can troubleshoot them should they arise, or to avoid them
Development ToolsFeatures of Adobe Animate CC 2017Adobe Animate CC 2017(formerly Adobe Flash Professional, Macromedia Flash) is a very powerful software for creating animation, game, multiple media and webpage etc. Animate CC 2017 allows user to define great details in design, with further updates pushed which allows sprites form to be generated. It is made to be compatible with other platform devices such as desktop, smartphones and tablets. It also supports latest version of Adobe Integrated Runtime (AIR).
Vector graphicsAnimate CC support vector graphics technique. The main difference of the vector graphics compare to the bitmap graphics is scaling. When enlarging a bitmap picture, it will affect its image quality. But for vector graphics, it can be scaled to any size with lose the quality.

HTML 5 is a revision of HTML and it can be support by many platforms. Animate CC is able to create interactive HTML 5 content or convert the existing FLASH files to HTML 5 format.

Animate CC is able to export ActionScript 3 (programming language used by Anime CC) to JavaScript to support HTML 5.

Testing and debugging via USB
Animate CC is allow user to test and debug the created content on mobile devices directly through computer via USB
WebGL for animation
Users are able to publish their animations to the WebGL format, so they can run the animations in modern browsers without needing Flash Player.

Import And export video
User can directly import the H.264 videos onto the timeline. Also, users are able to export their videos which created by animate CC into 4K UHD format video.

Virtual camera
User is able to use the built-in virtual camera, so user can easily stimulate the camera’s movement and gives the animation a more realistic view
UI enhancement
The new UI is at a glance. It enhance the performing and visual. It can speed up the workflow.

Main components of Animate CC 2017New document windowFirstly, when you want to create a new document, you need to choose the file type for your animation. As the animations that I created are SWF format, so I chose the ActionScript 3.0 as the file type. From the right hand side of window, there are other options that you can configure.

2163331208915Allowed user to decide the width and height of the stage
00Allowed user to decide the width and height of the stage
1271220184621File type
00File type
329755529324Higher the frame rate, the more smooth the animation
00Higher the frame rate, the more smooth the animation

Figure 1. New document
The main windowThis is the main window of Animate CC, it consists of several components, as shown in figure below. You can change various layout to suit your working style.

209550059055Edit bar
00Edit bar
right78740Property panel
00Property panel
4232987580Current scene
00Current scene


3329752197485Work Area
00Work Area


Figure 2. Main window
When the Flash authoring content, need to work in a Flash document file. Flash document file extension is fla (FLA). Flash document have the following main parts:
StageThe stage represents the main drawing area, it is the key component that to display animation contents such as graphics, video and buttons etc. Everything you create, modify and organize can directly view from the stage,

Figure 3. Stage
TimelineAdobe Animate CC allows its contents to be edited in chronological order, in terms of layers and frame, allowing it to be dissect like a movie film. Different images are stacked on top of each other, which made it look like a film when played.

Figure 4. Timeline panel
LibraryThe elements you created or any imported files such as music, video and pictures will be display inside the panel. You can reuse the elements on different scene by dragging it out of the panel.

Figure 5. Library panel
ComponentsSome useful components such as buttons, Text input can be found from components panel.

Figure 6. Components panel
ActionScript is the programming language used at the Animate CC. It is designed specifically for the animations. In order to achieve the required interactivity, the code of the ActionScript must insert to the frame of the top layer. To trigger some events, such as button click, the instance name of the object must be defined.

Figure 7. ActionScript
Other components of Animate CCMenuMenu bar displays options in dropdown menus, it contains File, Edit, View, Insert, Modify, Text, Commands, Control, Debug, Window and Help. User can access most of the features from these menus.

Edit barEdit bar is located below the menu bar. It displays the title of the current scene, the Edit Scene button, the Edit symbol button, the center stage button, the clip content outside, the stage button and the Zoom control.

Tools panelSome common tools will be display at the location such as selection tool, line tool, drawing tool and painting etc.

Work areaIt is located below the Edit bar. User is able to put the objects that not the part of the viewable stage or also can use it to achieve some animation effect such as the object move in and out of the stage.

PanelThe main function of the panel is allow user to view or change the properties of the selected object.

Property panelUser is able to view properties of the selected object. The properties include the positon, instance name
And size of the object.

Free transform tool
The free transform tool is a very useful tool that will be frequently use in most of time. User can use it to flip, move, rotate, scale or skew the object. It can transform more than one object at a time by hold down the left mouse button, and then drag the pointer over the objects that you want to transform.
TweenMotion TweenMotion tween is a flash-generated animation with creates optimally with different effects such as color, size, movement and rotational changes based on symbols. This can be done by inputting symbol, and points it to Flash to make the appropriate changes. With all that capability, users be able to create animation sequences to their desire.

Shape TweenBy drawing a vector at certain frame within the timeline, you’ll be able to achieve shape tweening, which allows you to change or draw a separate shape again, within another certain frame. With that said, animations can be created by interpolates with all the shapes with different frames in between them.
Layers allow users to organize illustration in such a way that, you can edit them individually without interfering objects on the other layers. If one of the layers is hollow or empty, you can see through the layer while viewing the other layer on top of it.

To modify a layer, user can go to the timeline and select a layer from there, using the pencil icon. Users can edit multiple layers at once, when they are active.

Further element and objects such as animations and illustration can be added to the layer.

Layers creation is only limited by the computer’s memory; you can get as creative as you want. Only objects placed in the layer takes up the size of the file.

Users can create layer folders, which makes organizing layers easier. Expand the folder for more details on the layers, or collapse to hide them, to avoid information overload on the layers. It is recommended to use different folders of layer for sound files, frame labels and annotation, and ActionScript separately. Users can search for them quickly and able to edit them without much hassle. Mask layer helps to illustrate a more detailed effects, while guidance layer makes editing easier and more comfortable.

Onion skinning
Onion skinning is located under the timeline, as shown in figure below.

Figure 8. Onion Skinning
The onion skinning can display two or more frames on the stage at once. This is very useful for creating a frame-by-frame animation. It is convenience to let user to compare the present frame contents to the past or future frame’s contents. The red color of playhead is indicated position of the current frame. The green color which is appear dimmed is represent the future frames. Blue color is represent the past frames.

Figure 9. Onion Skinning 2
Frame labels
Sound waveform
To use the audio in your animation, you need to import the audio files into the animate CC library. The imported file can be seen in the library panel, as shown in figure below. When the audio file is selected, you can see a graphical representation of waveform is display in the library preview window. You can click on the play button (the tiny triangle on the preview window) to test your audio file.

Figure 10. Audio files
Free online Text To Speech (TTS)
Text To Speech (TTS) is a page that provided text to speech online service for free. The webpage is able to convert text to voice in .mp3 audio format. There are many different kind of text-to-speech converter online but Text To Speech (TTS) is chosen because it is free and it is easy to use
Courseware Developmentxxxxxx
Chapter 4User Manual and Testing
Chapter 5Conclusion and Recommendation
References ADDIN EN.REFLIST 1R. Jordan and C. T. Abdallah, “Wireless communications and networking: An overview,” IEEE Antennas and Propagation Magazine, vol. 44, pp. 185-193, February, 2002.

2J. E. Padgett, C. G. Gunther, and T. Hattori, “Overview of wireless personal communications,” IEEE Communications Magazine, vol. 33, pp. 28-41, January, 1995.

3G. L. Stuber, Principles of Mobile Communication, 1st ed. New York: Springer, 1996.

4GSM Association, “Worldwide cellular connections exceeds 2 billion,”, 2005.

5The Portio Research Limited, Worldwide Mobile Market Forecasts 2006-2011, 1st ed. Market Study, UK, 2006.

6P. Chaudhury, W. Mohr, and S. Onoe, “The 3GPP proposal for IMT-2000,” IEEE Communications Magazine, vol. 37, pp. 72-81, December, 1999.

7A. Urie, M. Streeton, and C. Mourot, “An advanced TDMA mobile access system for UMTS,” IEEE Personal Communications, vol. 2, pp. 38-47, February, 1995.

8H. Holma and A. Toskala, WCDMA for UMTS: Radio Access for Third Generation Mobile Communications, 3rd ed. Chichester, West Sussex, UK: John Wiley ; Sons, 2004.

9H. H. Chen, C. X. Fan, and W. W. Lu, “China’s perspectives on 3G mobile communications and beyond: TD-SCDMA technology,” IEEE Wireless Communications, vol. 9, pp. 48-59, April, 2002.

10C. E. Perkins, Ad Hoc Networking, 1st ed. Boston MA, USA: Addison-Wesley, 2001.

11C.-Y. Chong and S. P. Kumar, “Sensor networks: Evolution, opportunities, and challenges,” Proceedings of The IEEE vol. 91, pp. 1247-1256, August, 2003.

12A. Bria, F. Gessler, O. Queseth, R. Stridh, M. Unbehaun, J. Wu, J. Zander, and M. Flament, “4th-generation wireless infrastructures: Scenarios and research challenges,” IEEE Personal Communications, vol. 8, pp. 25-31, December, 2001.

13S. Y. Hui and K. H. Yeung, “Challenges in the migration to 4G mobile systems,” IEEE Communications Magazine, vol. 41, pp. 54-59, December, 2003.

14A. K. Salkintzis, “Interworking techniques and architectures for WLAN/3G integration toward 4G mobile data networks,” IEEE Wireless Communications, vol. 11, pp. 50-61, June, 2004.