1. PUBLISHING CAPTIVATE INSTRUCTIONAL VIDEOS FOR MOBILE DELIVERY BY RENÉE LESAGE AND MATTHEW BACZ, MA ED. TECH. Information Technology Services Training McGill University

2. ABSTRACT Matthew Bacz, M.A. Ed. Tech. Instructional Designer / Multimedia Training Developer Information Technology Services McGill University Canada matthew.bacz@mcgill.ca An increasing number of learners in higher education and in the corporate setting are accessing instructional material via mobile devices such as iPads and Android tablets. The market for instructional content is rapidly growing. However, the question that arises is: how can an organization convert existing captivate content to the new online format without losing the PC/Mac desktop flash-based quality graphics, learners have grown accustomed to. This session will demonstrate how our training team was able to convert captivate demonstration projects to a mobile friendly format in the context of creating “How-to” instructional videos for McGill’s new Learning Management System. Best practices with regards to this process will be discussed: optimal encoding codecs, recommended video resolutions and so forth. Association for the Advancement of Computing in Education (AACE) e-Learn 2012 – October 11 th 2012 – Montreal, Qc – Matthew Bacz, MA Ed. Tech., McGill University

3. CONTEXT New LMS at McGill University– implementation started in April 2012 Training needed for:  Instructors  Students Type of training  Workshops  One-on one consultation or small group training  Step by step videos for the desktop and mobile devices  Self-serve documentation Association for the Advancement of Computing in Education (AACE) e-Learn 2012 – October 11 th 2012 – Montreal, Qc - Renée Lesage, McGill University

4. Purpose of the instructional videos:  To demonstrate ‘how-to’ procedures to perform various tasks Videos developed for the desktop:  15 videos for instructors  8 videos for students  2 to 7 minutes long CONTEXT Association for the Advancement of Computing in Education (AACE) e-Learn 2012 – October 11 th 2012 – Montreal, Qc - Renée Lesage, McGill University

5. Software used:  Adobe Captivate 4 Features  Resolution: 1000 x 720 px (if planning to deliver on mobile as well)  Narration  Published as a Flash file CONTEXT Association for the Advancement of Computing in Education (AACE) e-Learn 2012 – October 11 th 2012 – Montreal, Qc - Renée Lesage, McGill University

6. MOBILE DELIVERY Challenges:  Lack of Flash support for iPad and some mobile devices  Maintaining high video quality  Synchronization of audio Association for the Advancement of Computing in Education (AACE) e-Learn 2012 – October 11 th 2012 – Montreal, Qc - Renée Lesage, McGill University

7. AGENDA  iPad demo  Development prerequisites: xvid codec | Camtasia studio | YouTube  Conversion to mobile 5-step process:  Captivate to SWF  Real-Time Camtasia record  Camtasia publish to AVI (configure xvid codec)  Upload to YouTube  Launching video via Javascript  Q & A (time permitting) Association for the Advancement of Computing in Education (AACE) e-Learn 2012 – October 11 th 2012 – Montreal, Qc – Matthew Bacz, MA Ed. Tech., McGill University

8. On your iPad 3:  Go to: http://www.mcgill.ca/it http://www.mcgill.ca/it  Type in “4190” in the “Search the IT knowledge base” box  Or: Type in the direct link to the KB article: http://kb.mcgill.ca/it/easylink/article.html?id=4190 http://kb.mcgill.ca/it/easylink/article.html?id=4190  Click on one of the mobile links in the table to view the videos in full-screen YouTube HD (720p) mode (custom JavaScript). MOBILE VIDEO DEMO Association for the Advancement of Computing in Education (AACE) e-Learn 2012 – October 11 th 2012 – Montreal, Qc – Matthew Bacz, MA Ed. Tech., McGill University

9. What is needed to convert the Captivate SWF videos to a mobile iPad3 friendly format? Some suggestions:  Download and install the free open source xvid codec for windows (http://www.xvid.org)http://www.xvid.org  Download and install Camtasia studio (a 30 day fully functional demo is available form www.techsmith.com)www.techsmith.com  A valid YouTube account (www.youtube.com )www.youtube.com DEVELOPMENT PREREQUISITES (ASSUMING CAPTIVATE FLASH DEMOS HAVE PREVIOUSLY BEEN PUBLISHED TO SWF FORMAT) Association for the Advancement of Computing in Education (AACE) e-Learn 2012 – October 11 th 2012 – Montreal, Qc – Matthew Bacz, MA Ed. Tech., McGill University

10. CONVERSION TO MOBILE PROCESS MAP start end Publishing Captivate to Flash format. (SWF) Recording video live (“in real time)” using Camtasia studio (camrec) Publishing Camtasia source file to AVI format using xvid open source codec Uploading AVI file to YouTube HD (YouTube format) Launching video on iPad from McGill KB (Javascript) << Content update << 1 2 3 4 5 6 Codec settings 3i Association for the Advancement of Computing in Education (AACE) e-Learn 2012 – October 11 th 2012 – Montreal, Qc – Matthew Bacz, MA Ed. Tech., McGill University

11. PUBLISHING CAPTIVATE DEMOS TO SWF Publishing Captivate to Flash format. (SWF) 1  Externalize the Captivate skin  Set publish option to “No tooltips at runtime” as we will be recapturing the Flash video in real time using Camtasia studio in step 2.  Remove Fade in and Fade out from first and last slides  Use High Quality publish settings (creates a large file but maintains quality) Association for the Advancement of Computing in Education (AACE) e-Learn 2012 – October 11 th 2012 – Montreal, Qc – Matthew Bacz, MA Ed. Tech., McGill University

12. RECORDING SWF VIDEO IN REAL TIME (1/4)  Double-click “index.htm” (SWF video HTML wrapper file) to start video in your default web browser  Pause video at the very beginning  Open Camtasia Recorder: Recording video live (“in real time)” using Camtasia studio (camrec) 2 Association for the Advancement of Computing in Education (AACE) e-Learn 2012 – October 11 th 2012 – Montreal, Qc – Matthew Bacz, MA Ed. Tech., McGill University

13. RECORDING SWF VIDEO IN REAL TIME (2/4)  Use the following settings: a) Main window (set recording resolution to 1000x720):  Audio settings (Audio on -> Click on arrow): Recording video live (“in real time)” using Camtasia studio (camrec) 2 Association for the Advancement of Computing in Education (AACE) e-Learn 2012 – October 11 th 2012 – Montreal, Qc – Matthew Bacz, MA Ed. Tech., McGill University

14. RECORDING SWF VIDEO IN REAL TIME (3/4) More settings:  Disable screensaver during capture  Record to camrec format (native Camtasia format) Recording video live (“in real time)” using Camtasia studio (camrec) 2 Association for the Advancement of Computing in Education (AACE) e-Learn 2012 – October 11 th 2012 – Montreal, Qc – Matthew Bacz, MA Ed. Tech., McGill University

15. RECORDING SWF VIDEO IN REAL TIME (4/4) IMPORTANT:  Position recording area over appropriate area of the screen  Click on the Camtasia RECORD button  Once recording countdown goes down to “0”, start the SWF video  When SWF video has stopped playing, click Camtasia STOP button  Click “Save and Edit”  Save recording file in desired location on your computer (ex: Desktop) Recording video live (“in real time)” using Camtasia Studio (camrec) 2 Association for the Advancement of Computing in Education (AACE) e-Learn 2012 – October 11 th 2012 – Montreal, Qc – Matthew Bacz, MA Ed. Tech., McGill University

16. XVID CODEC SETTINGS (I/IV) FOR CODEC VERSIONS 1.3.1 / 1.3.2  Open Configure Encoder (Xvid > Configure Encoder) : Publishing Camtasia source file to AVI format using xdiv open source codec 3i Association for the Advancement of Computing in Education (AACE) e-Learn 2012 – October 11 th 2012 – Montreal, Qc – Matthew Bacz, MA Ed. Tech., McGill University

17. XVID CODEC SETTINGS (II/IV) FOR CODEC VERSIONS 1.3.1 / 1.3.2 Use the following settings:  Set quality to Maximum Publishing Camtasia source file to AVI format using xdiv open source codec 3i Association for the Advancement of Computing in Education (AACE) e-Learn 2012 – October 11 th 2012 – Montreal, Qc – Matthew Bacz, MA Ed. Tech., McGill University

18. XVID CODEC SETTINGS (III/IV) FOR CODEC VERSIONS 1.3.1 / 1.3.2  Calc.. button options: Publishing Camtasia source file to AVI format using xdiv open source codec 3i Association for the Advancement of Computing in Education (AACE) e-Learn 2012 – October 11 th 2012 – Montreal, Qc – Matthew Bacz, MA Ed. Tech., McGill University MP3-CBR

19. XVID CODEC SETTINGS (IV/IV) FOR CODEC VERSIONS 1.3.1 / 1.3.2 Important additional setting (on Windows XP):  Uncheck Display encoding status Publishing Camtasia source file to AVI format using xdiv open source codec 3i Association for the Advancement of Computing in Education (AACE) e-Learn 2012 – October 11 th 2012 – Montreal, Qc – Matthew Bacz, MA Ed. Tech., McGill University

20. PUBLISHING TO AVI (XVID CODEC) (1/7)  Set editing dimensions to Recording Dimensions (1000x720): Publishing Camtasia source file to AVI format using xdiv open source codec 3 Association for the Advancement of Computing in Education (AACE) e-Learn 2012 – October 11 th 2012 – Montreal, Qc – Matthew Bacz, MA Ed. Tech., McGill University

21. PUBLISHING TO AVI (XVID CODEC) (2/7)  Go through the “wizard” screens:  Use custom production settings:  Click on Next Publishing Camtasia source file to AVI format using xdiv open source codec 3 Association for the Advancement of Computing in Education (AACE) e-Learn 2012 – October 11 th 2012 – Montreal, Qc – Matthew Bacz, MA Ed. Tech., McGill University

22. PUBLISHING TO AVI (XVID CODEC) (3/7)  Select AVI:  Click on Next Publishing Camtasia source file to AVI format using xdiv open source codec 3 Association for the Advancement of Computing in Education (AACE) e-Learn 2012 – October 11 th 2012 – Montreal, Qc – Matthew Bacz, MA Ed. Tech., McGill University

23. PUBLISHING TO AVI (XVID CODEC) (4/7)  Use “True Color” and 30 frames per second (Xvid MPEG-4 codec) and click on Next: Publishing Camtasia source file to AVI format using xdiv open source codec 3 Association for the Advancement of Computing in Education (AACE) e-Learn 2012 – October 11 th 2012 – Montreal, Qc – Matthew Bacz, MA Ed. Tech., McGill University

24. PUBLISHING TO AVI (XVID CODEC) (5/7)  Use custom size then click on Next three times (1000x720): Publishing Camtasia source file to AVI format using xdiv open source codec 3 Association for the Advancement of Computing in Education (AACE) e-Learn 2012 – October 11 th 2012 – Montreal, Qc – Matthew Bacz, MA Ed. Tech., McGill University

25. PUBLISHING TO AVI (XVID CODEC) (6/7)  Specify a production name, publish location and click on Finish : Publishing Camtasia source file to AVI format using xdiv open source codec 3 Association for the Advancement of Computing in Education (AACE) e-Learn 2012 – October 11 th 2012 – Montreal, Qc – Matthew Bacz, MA Ed. Tech., McGill University

26. PUBLISHING TO AVI (XVID CODEC) (7/7)  The following dialog box will appear: (conversion in progress..)  Click Open Production Folder to see your video  You have now successfully converted the video to a YouTube compatible AVI format. Publishing Camtasia source file to AVI format using xdiv open source codec 3 Association for the Advancement of Computing in Education (AACE) e-Learn 2012 – October 11 th 2012 – Montreal, Qc – Matthew Bacz, MA Ed. Tech., McGill University

27. UPLOADING AVI TO YOUTUBE HD  The file can now be uploaded to YouTube using a strait forward standard upload process  IMPORTANT: Make sure the uploaded file is classified by YouTube as being HD.  Add relevant meta-data information for the videos keeping consistency and accuracy in mind. Uploading AVI file to YouTube HD (YouTube format) 4 Association for the Advancement of Computing in Education (AACE) e-Learn 2012 – October 11 th 2012 – Montreal, Qc – Matthew Bacz, MA Ed. Tech., McGill University

28. CREATING CUSTOM JAVASCRIPT LINK  A custom JavaScript link can be created which will allow the YouTube video to be displayed in HD and Full-Screen mode on an iPad:  Recommended YouTube link structure: http://www.youtube.com/v/YouTubeID  Note: The YouTube ID is the unique number which YouTube assigned to an uploaded video.  Access to YouTube Analytics (if videos are made public on YouTube) Launching video on iPad from McGill KB (Javascript) 5 Association for the Advancement of Computing in Education (AACE) e-Learn 2012 – October 11 th 2012 – Montreal, Qc – Matthew Bacz, MA Ed. Tech., McGill University

29. CONVERSION TO MOBILE PROCESS MAP start end Publishing Captivate to Flash format. (SWF) Recording video live (“in real time)” using Camtasia studio (camrec) Publishing Camtasia source file to AVI format using xvid open source codec Uploading AVI file to YouTube HD (YouTube format) Launching video on iPad from McGill KB (Javascript) << Content update << 1 2 3 4 5 6 Codec settings 3i Association for the Advancement of Computing in Education (AACE) e-Learn 2012 – October 11 th 2012 – Montreal, Qc – Matthew Bacz, MA Ed. Tech., McGill University

30. PUBLISHING CAPTIVATE INSTRUCTIONAL VIDEOS FOR MOBILE DELIVERY BY RENÉE LESAGE AND MATTHEW BACZ, MA ED. TECH. Information Technology Services Training McGill University