Discussion. The information of the paper encourages the reader to use the Camtasia s Flash/HTML5 Video in E-learning and Instructional Design.

Transcription

1 Suitability of Camtasia s Flash/HTML5 output for M-learning on Mobile Devices Demonstrating and Evidencing Suitability - A Brief Review 2016 Abstract Objective. The purpose of this paper is to demonstrate that, the Web App 'World Capitals' created by the FilmStrip Flash Video Project and produced by Camtasia Studio in Flash/HTML5 format, is a suitable for M-learning micro application that allows users to play and view interactive Flash Videos on all Mobile Devices independently from the Operating System they use (Windows, Android, ios). Background. The demonstration of this article is directly related to the material used in the book (First Project) of the author entitled Develop Your Own Multimedia Application! How to Create Interactive Video Applications in Flash Format (2014, Paperback & Kindle editions on Amazon.com and retail outlets). The micro Web App 'World Capitals' created by the FilmStrip Flash Video Project, is the result obtained by the practical implementation of the scenario and the requisites described in the project How to Create a Simple FilmStrip Video Project with Camtasia Studio and PowerPoint. Methods. The methods used to conduct this review were the investigation and the presentation of Demonstrative Evidence related to the suitability of Camtasia s Flash/HTML5 output for M-learning on Mobile Devices. There was held a visual assessment of the appearance of the Web App on different Mobile Devices (Notebooks/Laptop, Tablets and Phones) according to different Operating Systems and different models of devices. Discussion. The information of the paper encourages the reader to use the Camtasia s Flash/HTML5 Video in E-learning and Instructional Design. Conclusion. The evidence-based investigation confirms the suitability of Camtasia s Flash/HTML5 output for M-learning on Mobile Devices. Key words. M-learning, Mobile Devices, Camtasia s Flash/HTML5 output, Web App, Flash Video

2 Contents Introduction... 3 a. Mobile Learning and Mobile Devices... 3 b. Camtasia s Flash/HTML5 Output... 3 c. FilmStrip Flash Video Project 'World Capitals'... 3 Materials and Methods The process of production of Camtasia s Flash/HTML5 output Describing the production according to Camtasia s Production Wizard Describing the management of Camtasia s Flash/HTML5 output Production Appearance of Flash Video as Web App Appearance of Flash Video as Web App on different browsers Appearance of Flash Video (Web App) on Mobile Devices (Free) URLs to test webpages for being Mobile-Friendly Adjustments of HTML Page for being friendly on Mobile Devices Optimization of image on Mobile Phones using Scroll Bars Results Part 1. Demonstrating & Evidencing suitability: Notebooks/Laptops Assessing the Webpage 'World Capitals' at Google Mobile-Friendly Test Testing for being Mobile-Friendly on Netbook (screen size 10 inch) Part 2. Demonstrating & Evidencing suitability: Tablets Testing for being Mobile-Friendly on Tablets with different Operating Systems (I). Android (Google s Operating System for Mobile Devices) (II). ios (Apple s Operating System for Mobile Devices) Part 3. Demonstrating & Evidencing suitability: Smartphones Testing for being Mobile-Friendly on Smartphones with different Operating Systems 15 (III). Android (Google s Operating System for Mobile Devices) (IV). ios (Apple s Operating System for Mobile Devices) Discussion Conclusion Future directions for research Notes References Appendix 'World Capitals' as Desktop Application

3 Introduction a. Mobile Learning and Mobile Devices Mobile Learning (M-learning) is defined as learning across multiple contexts, through social and content interactions, using personal electronic devices (Crompton, 2013). Mobile learning is becoming an increasingly popular way to convey information and enhance the learning process in numerous fields. Rather than being restricted to a specific location at a desktop computer or fixed module, the learner is able to access information from an array of mobile devices, including laptops, tablets, smartphones, and phones (Floro, 2011). b. Camtasia s Flash/HTML5 Output The Camtasia s Flash/HTML5 Output, as a Cross-Platform and Cross-Device Software, is the solution which presents Camtasia Studio, for the problem of notsupporting of Flash Video format, from different platforms. The Flash Video format, was and is, a great format for developing Quality Applications for Desktop Platforms. But, after the Steve Jobs letter Thoughts on Flash * (Steve Jobs, April, 2010), began a period characterised by a reduced desire in using Flash Video format, mainly on some Operating Systems for Mobile Devices, and on some Web Browsers too. In the described above framework, it is important to practically show and give Demonstrative Evidence, by Demonstrating and Evidencing the Suitability of Camtasia s Flash/HTML5 output for M-learning on Mobile Devices based on different: Operating Systems, Browser Platforms, Device Models, etc. Mainly, this relates to small screen devices: Notebooks & Laptops, Tablets, and Smartphones. * c. FilmStrip Flash Video Project 'World Capitals' The FilmStrip Flash Video World Capitals is at the same time: An instructional stand-alone micro Web App about some Capitals of the World, An implementation of the educational project (e-learning Course) How to Create a FilmStrip Flash Video Project with Camtasia Studio and PowerPoint. The main reason for mentioning in this article the Flash Video 'World Capitals, is related to the manner of its production - as a Web App - it is a Camtasia Studio s Flash/HTML5 Output. In other words, from the perspective of the result of the implementation of the project, the Flash Video 'World Capitals is an Interactive Multimedia Micro Application (Web App) produced in Flash/HTML5 format. The "FilmStrip Flash Video Project" is a small (Sample) Project based on a simple, interactive, engaging - but Real World Scenario. It is intended for persons who like to create projects using Camtasia Studio and Power Point and who want to create (Micro) Web Apps. The purpose of this project is the Presentation and Study of some Capitals of the World based on Interactivity and Multimedia Elements (Photo, Text and Video Clip) in a Digital Environment (Cross-Platform and Cross- Device Software). As a Sample or a Worked-Out Example, the Project enables the readers (users), to create with the same manner, other larger and more complex projects which produce multi-component and multi-functional Web Apps. 3

4 Materials and Methods 1. The process of production of Camtasia s Flash/HTML5 output 1.1. Describing the production according to Camtasia s Production Wizard Step 1. To produce the Web App you start by clicking the command Produce and Share on the menu. After so doing, the guide 'Production Wizard' appears from which you choose 'Custom Production Settings'. Figure 1. The guide 'Production Wizard' and the 'Custom Production Settings' Step 2. By continuing the Production Wizard, the next page appears with the question 'How would you like to produce your Video?' Under 'Recommended' is checked by default 'MP4 Smart Player (Flash / HTML5)'. Because this option is what you want, you do not change anything but go to the next page. Figure 2. Selection of the 'Recommended': 'MP4 Smart Player (Flash / HTML5)' 4

5 Step 3. By continuing the Production Wizard, appears the next page Smart Player Options. You select Controller Theme: Silver and (do) nothing else. Figure 3. The 'Production Wizard' guide in which you select Controller Theme: Silver Step 4. By continuing the Production Wizard, you see the default choice Embed video into HTML and continue. Figure 4. The implementation of the default choice Embed video into HTML 5

6 Step 5. By continuing the Production Wizard, appears the next page Marker options where you select the Table of Contents (TOC) options. Figure 5. The 'Production Wizard' and the selected Table of Contents (TOC) options Step 6. In the last step of production are presented the Production name and some other significant characteristics of the output file. Figure 6. Last step of the process of production of Camtasia s Flash/HTML5 output 6

7 1.2. Describing the management of Camtasia s Flash/HTML5 output Production In the last step of the Production Wizard was produced the Camtasia s Flash/HTML5 output folder which has all the files (and two subfolders) that are necessary to run the Web App. The file WorldCapitals.html activates the Web App World Capitals. Output Folder. The Production Wizard, in the last page, after the click on Finish, produces the video. The folder of output files seems approximately like the picture below. The file which activates the "Interactive Multimedia Micro Application (Web App)" is the selected WorldCapitals.html (see figure below). Figure 7. The folder of output files with the selected 'World Capitals [.html] Start Screen. The Production Wizard produces the video with the Start Screen as is shown in the figure below. The user clicks on the center to play the "Interactive Multimedia Micro Application (Web App)". Figure 8. Starting the "Interactive Multimedia Micro Application (Web App)" 7

8 2. Appearance of Flash Video as Web App 2.1. Appearance of Flash Video as Web App on different browsers Bellow follow the presentations of the appearance of the result of the FilmStrip Flash Video Project, namely of the Web App as Camtasia s Output in Flash/HTML5, in the cases of using the Operating System Microsoft Windows and the Adobe Flash Player, on the browsers Google Chrome, Microsoft Internet Explorer, Mozilla Firefox and Opera. In all these cases of the Web App appearance, the output produced by Camtasia Studio in Flash/HTML5 and looks & feels the same. The main positive characteristic in these cases is the ability to present the Web App on Internet. In other words, the ability to present the Web App for viewing and playing all around the world on all computers with (online) access to Web. Figure 9. Appearance of the Flash Video as Web App on Chrome Figure 10. Appearance of the Flash Video as Web App on Internet Explorer 8

9 Follows the presentation of the appearance of the Flash Video as Web App on the browsers Mozilla Firefox and Opera. Figure 11. Appearance of the Flash Video as Web App on Mozilla Firefox Figure 12. Appearance of the Flash Video as Web App on Opera 9

10 2.2. Appearance of Flash Video (Web App) on Mobile Devices M-learning is a form of distance education, in which m-learners use mobile device educational technology at their time convenience. The mobile device educational technology includes handheld computers (notebooks and laptops), tablets and mobile phones. Currently, Flash Video is not supported on either Android or ios mobile devices. So, with the ever-growing demand for M-learning, it is necessary to create applications based on Flash Video that allow users to play interactive videos on all Mobile Devices. In other words, the relatively small screen on Mobile Devices must definitively guarantee a normal appearance of Flash Video (Web App) on them (Free) URLs to test webpages for being Mobile-Friendly Because the percentage of all web usage that comes from mobile devices is growing, and it won t be long before mobile internet users will overtake desktop and laptop users in terms of web traffic, it is important to have the mobile users in mind developing a Web App (webpage). One of the most important things you can do to make a Web App (webpage) mobile-friendly is to test it on multiple platforms of mobile devices. To do this, a Web App (webpage), must be checked on mobile emulators that make easy the testing process. The mobile emulator lets you check the responsiveness and functionality of the Web App (webpage) across different mobile platforms without actually having the devices in hand. Mobile emulators can help you discover problems and issues with the Web App (webpage) and allow you to take corrective measures to make the website visually appealing and functional on mobile devices. Google Mobile-Friendly Test Screenfly - Test Your Website at Different Screen Resolutions MobileTest.me - Test your mobile sites and responsive web designs Mobile Emulator - Test Your Website On Mobile - brick&mobile Responsinator Responsive Web Design Testing Tool Screenshots as a Service for real time website screenshots 10

11 2.4. Adjustments of HTML Page for being friendly on Mobile Devices The Flash/HTML5 output of Camtasia Studio is an Output Folder, which needs to be published whole and as it is. So, it cannot be published on websites such as YouTube or Vimeo, either, it cannot be published on storage spaces like Google Drive or Drop Box. The only way the Output Folder can be published, is on a Real Website which is supported by a Web Server. Therefore, it is an ideal tool in the cases of School/ Organization/ Individual Websites, where the webmaster can embed it in any page of the particular Website. Nevertheless, the Website Page in which the Output Folder (namely the Web App) will be published needs to be adjusted for good appearance (Mobile-Friendly) on Mobile Devices. So, below follows the line (yellow color) which must be added in the head of the (html) Website Webpage. <html> <head> <meta name=viewport content="width=device-width, initial-scale=1"> Figure 13. The yellow line which must be added in the <head> of Webpage 2.5. Optimization of image on Mobile Phones using Scroll Bars To optimize the image on Smartphone Mobile Devices with small dimensions of output screen, users have at their disposal the Scroll Bars (see figure below for the case of BlackBerry 9700 Smartphone). Figure 14. Optimization of image on Smartphones using Scroll Bars 11

12 Results Part 1. Demonstrating & Evidencing suitability: Notebooks/Laptops Assessing the Webpage 'World Capitals' at Google Mobile-Friendly Test After the publication of the Output Folder of the Flash/HTML5 by Camtasia Studio, it is a Good Practice to check if the Web App (more precisely the Site Page on which the Output Folder is placed), appears Mobile-Friendly. Below follows the presentation of the appearance of the FilmStrip Flash Video Project on Mobile Devices for different Mobile Devices and different Operating Systems. Basically, the Flash Video is shown on Mobile Devices with different size such as Tablets and Smartphones and different Operating Systems such as Android and ios Mobile Devices. One (very) common tool in this direction is Google Mobile-Friendly Test which when the test results positive after the analysis answers Awesome! This page is mobile-friendly (see figure below). Figure 15. The positive result of Google Mobile-Friendly Test for the FilmStrip Flash Video 'World Capitals' Testing for being Mobile-Friendly on Netbook (screen size 10 inch) One of the notebooks with relatively small screen is the Netbook with screen size of 10 inch (figure below). Figure 16. Testing successfully Web Page 'World Capitals' on the Netbook (screen size 10 inch) for being Mobile-Friendly 12

13 Part 2. Demonstrating & Evidencing suitability: Tablets Testing for being Mobile-Friendly on Tablets with different Operating Systems Below follows the presentation of the appearance of the Web Page 'World Capitals' (Camtasia s Output on Flash/HTML5), on Tablets as Mobile Devices for different Mobile Devices models and different Operating Systems. (I). Android (Google s Operating System for Mobile Devices) Figure 17. Google Nexus 7 emulator [Tablet, Operating System: Android 4.1]. Figure 18. Kindle Fire HD 8.9'' emulator [Tablet, Operating System: Android] 13

14 (II). ios (Apple s Operating System for Mobile Devices) Figure 19. Apple ipad mini emulator [Tablet, Operating System: ios 6.0] Figure 20. Apple ipad (All) emulator [Tablet, Operating System: ios] 14

15 Part 3. Demonstrating & Evidencing suitability: Smartphones Testing for being Mobile-Friendly on Smartphones with different Operating Systems Below follows the presentation of the appearance of the Web Page 'World Capitals' (Camtasia s Output on Flash/HTML5), on Smartphones as Mobile Devices for different Mobile Devices models and different Operating Systems. (III). Android (Google s Operating System for Mobile Devices) Figure 21. The two models XTC One X and Samsung Galaxy Note (Google s Android) (IV). ios (Apple s Operating System for Mobile Devices) Figure 22. The two models IPhone 3G and IPhone 4s (Apple s ios) 15

16 Discussion The power and ubiquity of mobile devices grows at an unrelenting pace (Brandon Hall Group Research Team, November 2015). Nevertheless Findings indicate that regardless of the screen size of a mobile phone, students tended to have a positive overall opinion of m-learning and watching the video significantly increased their knowledge of the subject area. However, if an m-learning environment that relies heavily on video based material is displayed on a mobile device with a small screen, such as an average mobile phone, then the effectiveness of the learning experience may be inhibited (Maniar et al. 2008). Thus, the creation of such (simple) samples of instructional projects as this one presented here, and mainly the presentation of its implementation in practice, are not only (generally) Worked-Out Examples of educational problems, but are Calls to Action and also encouragement, towards other ICT Educators, Teachers and Instructors. Conclusion The objective of this paper was the demonstration that, the Web App 'World Capitals' created by the FilmStrip Flash Video Project and produced by Camtasia Studio in Flash/HTML5 format, is a suitable for M-learning micro application that allows users to play and view interactive Flash Videos on all Mobile Devices independently from the Operating System they use (Windows, Android, ios). Using the methods of demonstrating, of evidencing and of the visual assessment of the appearance of the Web App, the above mentioned suitability was confirmed. Future directions for research The video files used in this project are all in Mp4 format, and are selected ready (prepared) from YouTube. So, remains for the future the challenge to exploit and to utilize video files created by Screen Recording using Camtasia Studio. Notes In the last section Appendix 'World Capitals' as Desktop Application, Camtasia s Output (Flash Video) is obtained only in Flash using Camtasia Studio Version 7. In Version 8 this option does not exist, but exists only the option Flash/HTML5. In other web browsers than Chrome (Internet Explorer, Mozilla Firefox, Opera) must previously be installed the plugin Adobe Flash Player system plug-in to be able the user to use the Flash Player for viewing and playing the Flash Video Web App 'World Capitals' at 16

17 References URL of FilmStrip Flash Video Project 'World Capitals' (Web App): Crompton, H. (2013). A historical overview of mobile learning: Toward learner-centered education. In Z. L. Berge & L. Y. Muilenburg (Eds.), Handbook of mobile learning (pp. 3 14). Florence, KY: Routledge. Retrieved from 6.pdf Floro, Nick (2011). Mobile Learning. Published by the American Society for Training & Development infoline.astd.org. October 2011 l Vol. 28 l Issue Retrieved from gfloro.html LMS Trends 2015: Is It Time for Something Different? Brandon Hall Group Research Team, November 2015 Retrieved from Maniar, N., Bennett, E., Hand, S., & Allan, G. (2008). The effect of mobile phone screen size on video based learning. Journal of Software, 3(4), Retrieved from 74 Suitability of Camtasia s Flash/HTML5 output for M-learning on Mobile Devices Demonstrating and Evidencing Suitability - A Brief Review

18 Appendix 'World Capitals' as Desktop Application Appearance of the result of FilmStrip Flash Video Project 'World Capitals' the case of Camtasia s Output (Flash) as Desktop Application Follows the presentation of the appearance of the result of the FilmStrip Flash Video Project (of the Micro Desktop Application), using the Operating System Microsoft Windows and the Adobe Flash Player in two cases. Case 1. In this case the output is produced by Camtasia Studio only in Flash SWF (one file). The main negative characteristic is the small size (in time) of the video and the great size of the file (figure below). Also, is negative the small image size of production. Figure A1. Interactive Flash (SWF) Video as Desktop Application (Start Page) Case 2. In this case the output is produced by Camtasia Studio in Flash with MP4. The main positive characteristics are the high quality of multimedia elements (images, voice, etc) and the stability of the application. Also, the Table of Contents appears all the time and helps the user (figure below). Figure A2. Interactive Flash (MP4) Video as Desktop Application (Basic Page) 18