how to create a filmstrip flash video project · how to create a filmstrip flash video project with...

40
a step-by-step practical guide eBook Mobile Ready Alexis Aronis DigiOpti.net © 2016 How to Create a FilmStrip Flash Video Project an Instructional Design material a brief Elearning Course

Upload: others

Post on 19-Aug-2020

5 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: How to Create a FilmStrip Flash Video Project · How to Create a FilmStrip Flash Video Project with Camtasia Studio and PowerPoint 13 Step 1.2. Create a PowerPoint file (presentation)

a step-by-step

practical guide eBook Mobile Ready

Alexis Aronis

DigiOpti.net

© 2016

How to Create a FilmStrip

Flash Video Project

an Instructional Design material a brief Elearning Course

Page 2: How to Create a FilmStrip Flash Video Project · How to Create a FilmStrip Flash Video Project with Camtasia Studio and PowerPoint 13 Step 1.2. Create a PowerPoint file (presentation)

How to Create a FilmStrip

Flash Video Project with

Camtasia Studio and

Power Point

Alexis Aronis

Page 3: How to Create a FilmStrip Flash Video Project · How to Create a FilmStrip Flash Video Project with Camtasia Studio and PowerPoint 13 Step 1.2. Create a PowerPoint file (presentation)

How to Create a FilmStrip Flash Video Project with Camtasia Studio and PowerPoint

The implementation of this FilmStrip Flash

Video Project is presented in the form of the Web

App 'World Capitals‘ as a Worked-Out Example at:

http://www.digiopti.net/images/WorldCap

itals/WorldCapitals.html

Copyright © 2016 Alexis Aronis

All rights reserved.

Page 4: How to Create a FilmStrip Flash Video Project · How to Create a FilmStrip Flash Video Project with Camtasia Studio and PowerPoint 13 Step 1.2. Create a PowerPoint file (presentation)

People Learn Better When Multimedia Messages

Are Designed In Ways That Are Consistent With How

The Human Mind Works And With Research-Based

Principles.

MULTIMEDIA LEARNING - RICHARD E. MAYER

A Mobile Ready eBook

Page 5: How to Create a FilmStrip Flash Video Project · How to Create a FilmStrip Flash Video Project with Camtasia Studio and PowerPoint 13 Step 1.2. Create a PowerPoint file (presentation)

5

How to Create a FilmStrip Flash Video Project with Camtasia Studio and PowerPoint

An Instructional Design material - a brief Elearning Course

Case Study: FilmStrip Flash Video Project 'World Capitals'

Flexible example adaptable to Corporate Learning

Suitable Material for Mobile Learning

email address: [email protected]

Page 6: How to Create a FilmStrip Flash Video Project · How to Create a FilmStrip Flash Video Project with Camtasia Studio and PowerPoint 13 Step 1.2. Create a PowerPoint file (presentation)

6

Alexis Aronis

Content Introduction .............................................................................................. 9

What advantages offers this Video Project? ........................................ 9

Description ........................................................................................... 9

Web App 'World Capitals' as Worked-Out Example .......................... 10

Free Software Tools ............................................................................ 10

Learning Scenario & Problem Formulation ........................................ 10

Project Requirements ......................................................................... 10

Requisites ........................................................................................... 11

Part 1. Preparing the Graphic Elements of Video Project ...................... 12

Steps: .................................................................................................. 12

Step 1.1. Choose the Topic (Theme) of your interest ............ 12

Step 1.2. Create a PowerPoint file (presentation) .................. 13

Step 1.3. Prepare the needed Multimedia Elements.............. 13

Step 1.4. Design in PowerPoint the FilmStrip ......................... 13

Step 1.5. Design in PowerPoint the Action Icons ................... 14

Step 1.6. Select an image as background ............................... 15

Step 1.8. Create and adjust a text-image for each module ... 17

Step 1.9. Select and adjust a Video for each module ............ 18

Step 1.10. Complete the Start Page of the Project ................ 19

Page 7: How to Create a FilmStrip Flash Video Project · How to Create a FilmStrip Flash Video Project with Camtasia Studio and PowerPoint 13 Step 1.2. Create a PowerPoint file (presentation)

7

How to Create a FilmStrip Flash Video Project with Camtasia Studio and PowerPoint

Part 2. Preparing the FilmStrip Video Project in Camtasia ..................... 20

Steps: .................................................................................................. 20

Step 2.1. Create a new project 'World Capitals' ............................. 20

Step 2.2. Import Media in the Clip Bin ........................................... 20

Step 2.3. Adjust the Canvas in Camtasia Studio ............................. 21

Step 2.4. Adjust images ‘Duration’ ................................................. 21

Step 2.5. Insert Markers ................................................................. 22

Step 2.6. Add ‘hotspot transparent’ Callouts ................................. 22

Step 2.7. Add to library and to all clips the ‘Close’ button ............. 23

Step 2.8. Complete the Adjustments in Timeline ........................... 23

Step 2.9. Check the Adjustments in Timeline ................................. 24

Part 3. Camtasia’s Flash/HTML5 output as Web App ............................. 25

Steps: .................................................................................................. 25

Step 3.1. Production Wizard: 'Custom Production Settings' .......... 25

Step 3.2. Production Wizard: ‘Flash / HTML5' ................................ 26

Step 3.3. Production Wizard: ‘Controller Theme: Silver' ................ 27

Step 3.4. Production Wizard: ‘Embed video into HTML’ ................ 28

Step 3.5. Production Wizard: ‘Table of Contents (TOC) options’ ... 29

Step 3.6. Production Wizard: ‘Production name / Finish’ .............. 30

Management of Camtasia’s Flash/HTML5 output production ........... 31

■ Output Folder .............................................................................. 31

■ Start Screen ................................................................................. 32

Appearance of Flash Video 'World Capitals’ as Web App .................. 33

■ Appearance on the web browser ‘Google Chrome’ .................... 33

■ Appearance on the web browser ‘Internet Explorer’ ................. 34

Page 8: How to Create a FilmStrip Flash Video Project · How to Create a FilmStrip Flash Video Project with Camtasia Studio and PowerPoint 13 Step 1.2. Create a PowerPoint file (presentation)

8

Alexis Aronis

Appendices ............................................................................................. 35

Appendix 1. Web App and Mobile Learning on Mobile Devices ........ 35

■ Appearance on Tablets ............................................................... 35

(I). Android (Google’s Operating System for Mobile Devices) ....... 35

(II). iOS (Apple’s Operating System for Mobile Devices) ................ 36

■ Appearance on Smartphones ...................................................... 37

(I). Android (Google’s Operating System for Mobile Devices) ....... 37

(II). iOS (Apple’s Operating System for Mobile Devices) ................ 37

Optimization of image on Mobile Phones using Scroll Bars ........... 38

Appendix 2. Short Glossary - Learn More .......................................... 39

Glossary of Video and Graphics-Related Terminology ................... 39

Learn More … ................................................................................. 39

Page 9: How to Create a FilmStrip Flash Video Project · How to Create a FilmStrip Flash Video Project with Camtasia Studio and PowerPoint 13 Step 1.2. Create a PowerPoint file (presentation)

9

How to Create a FilmStrip Flash Video Project with Camtasia Studio and PowerPoint

Introduction

What advantages offers this Video Project?

• Increased Student Motivation & Engagement

• Implementation of ‘Active Learning’ & ‘Learning by Doing’

• Efficient E-learning Course / Self-Learning Packet

• Suitability for Mobile Learning

• Flexibility: Adaptability to Corporate Learning

Description

The subtitle of this Instructional Design material, from the

perspective of the result, could be "How to create an Interactive

Multimedia Micro Application (Web App). The FilmStrip Flash Video

Project 'World Capitals' 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) Applications (Web Apps).

The purpose of this project is the Presentation and Study of some

'World Capitals' based on Interactivity and Multimedia Elements (Photo,

Text and Video Clip) in a Digital Environment. The multimedia elements

used (Photos, Texts, Videos, etc) are from Wikipedia and YouTube. In

this project we know the Topic: 'World Capitals', and also that for this

topic we have four Modules: Rome, Tokyo, Washington, Wellington.

As a Sample or a Worked-Out Example, the Project enables the

readers, to create with the same manner, other larger and more

complex projects which produce multi-component and multi-functional

Web Apps.

Page 10: How to Create a FilmStrip Flash Video Project · How to Create a FilmStrip Flash Video Project with Camtasia Studio and PowerPoint 13 Step 1.2. Create a PowerPoint file (presentation)

10

Alexis Aronis

Web App 'World Capitals' as Worked-Out Example

The implementation of the FilmStrip Flash Video Project 'World

Capitals' is presented as a Web App or as a ‘Worked-Out Example’ at:

http://www.digiopti.net/images/WorldCapitals/WorldCapitals.html

Free Software Tools

a. Tools for Design of the Interface of the Application

For the interface, we will employ Microsoft Office PowerPoint

Version 10 or later (a free 60-day trial is available) as a (free) basic tool

(creating pages, images, icons, and editing graphics).

b. Tools for Design, Development and Production of Application

For the video, we will employ TechSmith Camtasia Studio

Version: 7 or later (a free 30-day trial is available) as the basic tool

(screen capture, multimedia processing, and final production). Other

additional (free) applications (software tools), are FastStone ‘Image

Viewer’ and Wonderwebware ‘Screen Ruler’.

Learning Scenario & Problem Formulation

The research conducted in a school, demonstrated that students

showed weaknesses in the knowledge that they had regarding world

capitals. To overcome this problem, the administration of the school

decided that the students ought to develop a relevant project and apply

the educational slogan 'Learning by Doing”. Through the World Capitals'

project, they must present the basic information that the educational

program considers is necessary for a student to know to have a

comprehensive view about a given capital.

Project Requirements

We define the specifications of the interface of the Web App

Page 11: How to Create a FilmStrip Flash Video Project · How to Create a FilmStrip Flash Video Project with Camtasia Studio and PowerPoint 13 Step 1.2. Create a PowerPoint file (presentation)

11

How to Create a FilmStrip Flash Video Project with Camtasia Studio and PowerPoint

'World Capitals' based on the following two basic conditions, which

should be satisfied:

• The video must be high-definition (HD)

• The video must be Flash (Flash format)

With regard to these two conditions, we are primarily interested

in the operational dimension of the results produced by these

conditions, in their practical implementation in the design of the

interface.

We are not interested in the theory associated with the

requirements but how these conditions affect the practical requirements

of the user interface in the proposed application 'World Capitals'.

The selection of the conditions (requirements) that must satisfy

the specifications of an interface is dependent on the level of

equipment, hardware and software, which is assumed for the majority

of the users of our micro application or Web App.

With the rapid development of Information and Communications

Technology (I.C.T.) and the Internet and with continuous increasing

processing capabilities and information display of computers, the two

conditions tend to be the rule for the interface specification

requirements.

Requisites

[Dimensions] YouTube HD Video Image Size: 1280x720 px

[Flash/HTML5] Camtasia’s output for Web & Mobile Devices

[Mobile – Friendly] Operating Systems: Windows, Android, iOS

[Suitability] Suitability for E-learning and M-learning

Page 12: How to Create a FilmStrip Flash Video Project · How to Create a FilmStrip Flash Video Project with Camtasia Studio and PowerPoint 13 Step 1.2. Create a PowerPoint file (presentation)

12

Alexis Aronis

Part 1. Preparing the Graphic Elements of

Video Project

Steps:

Step 1.1. Choose the Topic (Theme) of your interest

Choose the Topic of your interest and (at least) some relevant Modules. To complete this task, you should think about a topic (or an issue or a theme), for which there is reason (or need) to present it in (Flash) Video, and share it with your friends.

• The “topic” is the “issue / theme” which you choose, because you decide that it deserves to create an (micro) application for it, e. g. “World Capitals”.

• In this topic, the “modules” are the “units” (or the “parts”) which constitute the topic (you choose the number of relevant modules that you think is necessary to identify the topic of your interest) e. g. ‘World Capitals’ has 4 modules: Rome, Tokyo, Washington, and Wellington. Another topic “Wild Animals” may have 5 modules: Elephant, Lion, Zebra, Crocodile, and Rhinoceros, etc. Other topics may be: models of airplanes, categories of submarines, etc.

• This approach of the project is ease to be implemented and it has the advantage that after finishing it as a construction (Web App), may continue the comparative analysis of the data obtained (e.g. demographic analysis, etc) and the creation / presentation of the corresponding diagrams (e.g. using Excel).

Page 13: How to Create a FilmStrip Flash Video Project · How to Create a FilmStrip Flash Video Project with Camtasia Studio and PowerPoint 13 Step 1.2. Create a PowerPoint file (presentation)

13

How to Create a FilmStrip Flash Video Project with Camtasia Studio and PowerPoint

Step 1.2. Create a PowerPoint file (presentation)

Create a PowerPoint file (presentation) with Standard High Definition (HD) dimensions 1280x720 pixels (px) or 41.6 x 23.4 centimeters (cm). In PowerPoint select the menu Design>Page Setup.

Step 1.3. Prepare the needed Multimedia Elements

Search, find, choose, and prepare to fit in HD dimensions, suitable to the topic multimedia elements for each module: Photo, Text, and Video, for placement on FilmStrip frames (see the figure below for the FilmStrip). Each Multimedia Element has its normal size for the video and the thumbnail size for the FilmStrip frames.

Step 1.4. Design in PowerPoint the FilmStrip

Design the FilmStrip 1280x480 px (41.6x15.6 cm). On the FilmStrip frames you will view as thumbnails the above mentioned multimedia elements (photo, text, video). Click on image to enlarge it.

Figure 1.4. Design in PowerPoint the FilmStrip

Page 14: How to Create a FilmStrip Flash Video Project · How to Create a FilmStrip Flash Video Project with Camtasia Studio and PowerPoint 13 Step 1.2. Create a PowerPoint file (presentation)

14

Alexis Aronis

Step 1.5. Design in PowerPoint the Action Icons

Design in PowerPoint the Action Icons (approximately) 125x125 px. To design the icons, use Shapes from the menu Insert, selecting the suitable shape each time and formatting it in the manner you like.

You need the Action Icons to control the Video Application you are creating. In other words, when you (the user) click on one of the Action Icons, it means that you want to implement some action (or effect) upon the multimedia element which has embedded the specific icon, such as: play, next, back and close. The reason that all the 4 icons are created in the beginning of the process, is to have them all ready from the beginning. So, you will not be obligated to create the icons one by one, every time you want to use them. Also, the quality and uniformity of the Action Icons are better when they are created all together at the beginning. Click on each icon to enlarge it.

play next back close

Figure 1.5. Design in PowerPoint the Action Icons

Page 15: How to Create a FilmStrip Flash Video Project · How to Create a FilmStrip Flash Video Project with Camtasia Studio and PowerPoint 13 Step 1.2. Create a PowerPoint file (presentation)

15

How to Create a FilmStrip Flash Video Project with Camtasia Studio and PowerPoint

Step 1.6. Select an image as background

Select an image (or picture - or photo) as background in HD dimensions 1280x720 px. You should use backgrounds that are as simple as possible. Chose colours and format from the same theme. Click on image to enlarge it.

Figure 1.6. Select an image as background

Page 16: How to Create a FilmStrip Flash Video Project · How to Create a FilmStrip Flash Video Project with Camtasia Studio and PowerPoint 13 Step 1.2. Create a PowerPoint file (presentation)

16

Alexis Aronis

Step 1.7. Select and adjust a photo for each module

Select and adjust a photo with HD dimensions 1280x720 px for the first module Rome from Wikipedia. For example, in the Web App 'World Capitals' was chosen and adjusted the photo below. In the same manner chose and adjust suitable relevant photos for the other modules. Click on image to enlarge it.

Figure 1.7. Select and adjust a photo for the first module Rome

Page 17: How to Create a FilmStrip Flash Video Project · How to Create a FilmStrip Flash Video Project with Camtasia Studio and PowerPoint 13 Step 1.2. Create a PowerPoint file (presentation)

17

How to Create a FilmStrip Flash Video Project with Camtasia Studio and PowerPoint

Step 1.8. Create and adjust a text-image for each

module

Create and adjust a text-image with HD dimensions 1280x720 px for the first module Rome from Wikipedia. For example, in the Web App 'World Capitals' was chosen and adjusted the text-image below. In the same manner chose and adjust suitable relevant text-images for the other modules. Click on image to enlarge it.

Figure 1.8. Create and adjust a text image for the first module Rome

Page 18: How to Create a FilmStrip Flash Video Project · How to Create a FilmStrip Flash Video Project with Camtasia Studio and PowerPoint 13 Step 1.2. Create a PowerPoint file (presentation)

18

Alexis Aronis

Step 1.9. Select and adjust a Video for each module

Select and adjust a relevant Video for the first module Rome from YouTube. For example, in the Web App 'World Capitals' was chosen the video ‘Rome - City Video Guide – Expedia’ at https://www.youtube.com/watch?v=s0eu9g_RH04. In the same manner chose and adjust suitable relevant Videos for the other modules. Click on image to enlarge it.

Figure 1.9. Select and adjust a relevant Video for the first module Rome

Page 19: How to Create a FilmStrip Flash Video Project · How to Create a FilmStrip Flash Video Project with Camtasia Studio and PowerPoint 13 Step 1.2. Create a PowerPoint file (presentation)

19

How to Create a FilmStrip Flash Video Project with Camtasia Studio and PowerPoint

Step 1.10. Complete the Start Page of the Project

Complete (finish making) the Start (Basic) Page (and all the other pages of the other Modules). The Start Page of the "FilmStrip Flash Video Project", will look approximately as the figure below. Click on image to enlarge it.

Figure 1.10. Complete the Start (Basic) Page of the project 'World Capitals'

Page 20: How to Create a FilmStrip Flash Video Project · How to Create a FilmStrip Flash Video Project with Camtasia Studio and PowerPoint 13 Step 1.2. Create a PowerPoint file (presentation)

20

Alexis Aronis

Part 2. Preparing the FilmStrip Video Project

in Camtasia

Steps:

Step 2.1. Create a new project 'World Capitals'

Create the (new) project (file) ‘WorldCapitals’ in Camtasia Studio.

The new project that you created in Camtasia Studio must be saved as

WorldCapitals.camproj in a known folder.

Step 2.2. Import Media in the Clip Bin

Import all the Media (Images and Videos) in the Clip Bin. The Clip

Bin will look approximately as the image in the figure below. Add all the

Media (Images and Videos) to Timeline.

Figure 2.2. Import Media in the Clip Bin

Page 21: How to Create a FilmStrip Flash Video Project · How to Create a FilmStrip Flash Video Project with Camtasia Studio and PowerPoint 13 Step 1.2. Create a PowerPoint file (presentation)

21

How to Create a FilmStrip Flash Video Project with Camtasia Studio and PowerPoint

Step 2.3. Adjust the Canvas in Camtasia Studio

Adjust the Canvas in Camtasia Studio file (project) WorldCapitals.

The Canvas will look approximately as the image in the figure below.

Figure 2.3. Adjust the Canvas in Camtasia Studio’s project WorldCapitals

Step 2.4. Adjust images ‘Duration’

Adjust with a right click the parameter ‘Duration’ of all the images

(pages) of WorldCapitals Project: ‘Duration’ must be changed from 5 sec

to 2 sec.

Figure 2.4. Adjust the parameter ‘Duration’ of all the images

Page 22: How to Create a FilmStrip Flash Video Project · How to Create a FilmStrip Flash Video Project with Camtasia Studio and PowerPoint 13 Step 1.2. Create a PowerPoint file (presentation)

22

Alexis Aronis

Step 2.5. Insert Markers

Insert the Markers: see the name of each marker in section 3 in

the step “Step 3.5. Production Wizard: ‘Table of Contents (TOC)

options’”. These markers will define the Table of Contents (TOC) of the

project.

Figure 2.5. Insert Markers in Camtasia Studio’s project WorldCapitals

Step 2.6. Add ‘hotspot transparent’ Callouts

Add ‘hotspot transparent’ Callouts with 1 sec duration to the

‘Basic Page’ (figure below) and to all the other pages of Camtasia

Studio’s project WorldCapitals.

Figure 2. The selected ‘hotspot transparent’ Callout of Info

Page 23: How to Create a FilmStrip Flash Video Project · How to Create a FilmStrip Flash Video Project with Camtasia Studio and PowerPoint 13 Step 1.2. Create a PowerPoint file (presentation)

23

How to Create a FilmStrip Flash Video Project with Camtasia Studio and PowerPoint

Step 2.7. Add to library and to all clips the ‘Close’ button

Add to library the ‘Close_Icon125x125’ button and then from the

Library add to all the images and the Videos (up and right) this button as

a hotspot. The Close button will control the playing Video.

Figure 2.7. Add to library and all clips the ‘Close’ button

Step 2.8. Complete the Adjustments in Timeline

Complete the Adjustments in Timeline’s Tracks of 'World Capitals'

Project. The view of all the Tracks will be approximately as presented on

the image below.

Figure 2.8. Complete the Adjustments in Timeline

Page 24: How to Create a FilmStrip Flash Video Project · How to Create a FilmStrip Flash Video Project with Camtasia Studio and PowerPoint 13 Step 1.2. Create a PowerPoint file (presentation)

24

Alexis Aronis

Step 2.9. Check the Adjustments in Timeline

Check the Adjustments in Timeline’s Tracks of 'World Capitals'

Project. The view of all the Tracks will be approximately as presented on

the image below.

Figure 2.9. Check the Adjustments in Timeline

Page 25: How to Create a FilmStrip Flash Video Project · How to Create a FilmStrip Flash Video Project with Camtasia Studio and PowerPoint 13 Step 1.2. Create a PowerPoint file (presentation)

25

How to Create a FilmStrip Flash Video Project with Camtasia Studio and PowerPoint

Part 3. Camtasia’s Flash/HTML5 output as

Web App

Steps:

Step 3.1. Production Wizard: 'Custom Production Settings'

To ‘Produce and Share’ the Project in Camtasia Studio as a Micro

Web App, you begin the production process of FilmStrip-Project, by

clicking 'Produce and Share'. After so doing, the guide 'Production

Wizard' appears from which you choose 'Custom Production Settings'

(figure below).

Figure 3.1. The guide 'Production Wizard' and the 'Custom Production Settings'

Page 26: How to Create a FilmStrip Flash Video Project · How to Create a FilmStrip Flash Video Project with Camtasia Studio and PowerPoint 13 Step 1.2. Create a PowerPoint file (presentation)

26

Alexis Aronis

Step 3.2. Production Wizard: ‘Flash / HTML5'

By continuing the Production Wizard, the next page appears with

'How would you like to produce your Video?' Under 'Recommended' is

checked by default 'MP4 – Smart Player (Flash / HTML5)'. Because this

option is what we want, you do not change anything but go to the next

page (figure below).

Figure 3.2. Selection of the 'Recommended': 'MP4 – Smart Player (Flash / HTML5)'

Page 27: How to Create a FilmStrip Flash Video Project · How to Create a FilmStrip Flash Video Project with Camtasia Studio and PowerPoint 13 Step 1.2. Create a PowerPoint file (presentation)

27

How to Create a FilmStrip Flash Video Project with Camtasia Studio and PowerPoint

Step 3.3. Production Wizard: ‘Controller Theme: Silver'

By continuing the Production Wizard, appears the next page

‘Smart Player Options’. We select Controller Theme: Silver and nothing

else (see figure below).

Figure 3.3. The 'Production Wizard' guide in which we select Controller Theme: Silver

Page 28: How to Create a FilmStrip Flash Video Project · How to Create a FilmStrip Flash Video Project with Camtasia Studio and PowerPoint 13 Step 1.2. Create a PowerPoint file (presentation)

28

Alexis Aronis

Step 3.4. Production Wizard: ‘Embed video into HTML’

By continuing the Production Wizard, you see the default choice

‘Embed video into HTML and continue.

Figure 3.4. The implementation of the default choice ‘Embed video into HTML’

Page 29: How to Create a FilmStrip Flash Video Project · How to Create a FilmStrip Flash Video Project with Camtasia Studio and PowerPoint 13 Step 1.2. Create a PowerPoint file (presentation)

29

How to Create a FilmStrip Flash Video Project with Camtasia Studio and PowerPoint

Step 3.5. Production Wizard: ‘Table of Contents (TOC)

options’

By continuing the Production Wizard, appears the next page

‘Marker options’ where we select the Table of Contents (TOC) options

(see figure below).

Figure 3.5. The 'Production Wizard' and the selected Table of Contents (TOC) options

Page 30: How to Create a FilmStrip Flash Video Project · How to Create a FilmStrip Flash Video Project with Camtasia Studio and PowerPoint 13 Step 1.2. Create a PowerPoint file (presentation)

30

Alexis Aronis

Step 3.6. Production Wizard: ‘Production name / Finish’

In the last step of production are presented the ‘Production

name’ and some other significant characteristics of the output file. Save

the output with ‘Production name’ WorldCapitals and click ‘Finish’.

Figure 3.6. The 'Production Wizard' and the selected Production name / Finish

Page 31: How to Create a FilmStrip Flash Video Project · How to Create a FilmStrip Flash Video Project with Camtasia Studio and PowerPoint 13 Step 1.2. Create a PowerPoint file (presentation)

31

How to Create a FilmStrip Flash Video Project with Camtasia Studio and PowerPoint

Management of Camtasia’s Flash/HTML5 output

production

■ 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]

Page 32: How to Create a FilmStrip Flash Video Project · How to Create a FilmStrip Flash Video Project with Camtasia Studio and PowerPoint 13 Step 1.2. Create a PowerPoint file (presentation)

32

Alexis Aronis

■ 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) 'World Capitals’".

Figure 8. Starting the "Interactive Multimedia Micro Application (Web App)"

Page 33: How to Create a FilmStrip Flash Video Project · How to Create a FilmStrip Flash Video Project with Camtasia Studio and PowerPoint 13 Step 1.2. Create a PowerPoint file (presentation)

33

How to Create a FilmStrip Flash Video Project with Camtasia Studio and PowerPoint

Appearance of Flash Video 'World Capitals’ as Web

App

Follows the presentation of the appearance of the result of the

FilmStrip Flash Video Project (of the Web App), in the cases of using the

Operating System ‘Microsoft Windows’ and the ‘Adobe Flash Player’, on

the random selected browsers ‘Google Chrome’ and ‘Microsoft Internet

Explorer’.

In this case of the Web App, the output is produced by Camtasia

Studio in Flash/HTML5. The main positive characteristic in this case 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 computers with (online) access to Web.

■ Appearance on the web browser ‘Google Chrome’

Figure 9. Appearance of the Flash Video as Web App on ‘Chrome’

Page 34: How to Create a FilmStrip Flash Video Project · How to Create a FilmStrip Flash Video Project with Camtasia Studio and PowerPoint 13 Step 1.2. Create a PowerPoint file (presentation)

34

Alexis Aronis

■ Appearance on the web browser ‘Internet Explorer’

Figure 10. Appearance of the Flash Video as Web App on ‘Internet Explorer’

An Instructional Design material - a brief Elearning Course

Case Study: FilmStrip Flash Video Project 'World Capitals'

Flexible example adaptable to Corporate Learning

Suitable Material for Mobile Learning

© Alexis Aronis 2016

Page 35: How to Create a FilmStrip Flash Video Project · How to Create a FilmStrip Flash Video Project with Camtasia Studio and PowerPoint 13 Step 1.2. Create a PowerPoint file (presentation)

35

How to Create a FilmStrip Flash Video Project with Camtasia Studio and PowerPoint

Appendices

Appendix 1. Web App and Mobile Learning on

Mobile Devices

■ Appearance on Tablets

Presentation of the appearance of the Web Page 'World Capitals'

(Camtasia’s Output on Flash/HTML5), on Tablets as Mobile Devices for

different Operating Systems and different Mobile Devices models.

(I). Android (Google’s Operating System for Mobile

Devices)

Figure A1-1. Google Nexus 7 emulator [Tablet, Operating System: Android 4.1].

Page 36: How to Create a FilmStrip Flash Video Project · How to Create a FilmStrip Flash Video Project with Camtasia Studio and PowerPoint 13 Step 1.2. Create a PowerPoint file (presentation)

36

Alexis Aronis

(II). iOS (Apple’s Operating System for Mobile Devices)

Figure A1-2. Apple iPad mini emulator [Tablet, Operating System: iOS 6.0]

Page 37: How to Create a FilmStrip Flash Video Project · How to Create a FilmStrip Flash Video Project with Camtasia Studio and PowerPoint 13 Step 1.2. Create a PowerPoint file (presentation)

37

How to Create a FilmStrip Flash Video Project with Camtasia Studio and PowerPoint

■ Appearance on Smartphones

Presentation of the appearance of the Web Page 'World Capitals'

(Camtasia’s Output on Flash/HTML5), on Smartphones as Mobile

Devices for different Operating Systems and different Mobile Devices

models.

(I). Android (Google’s Operating System for Mobile

Devices)

Figure A1-3. Two models: XTC One X and Samsung Galaxy Note (Google’s Android)

(II). iOS (Apple’s Operating System for Mobile Devices)

Figure A1-4. Two models: IPhone 3G and IPhone 4s (Apple’s iOS)

Page 38: How to Create a FilmStrip Flash Video Project · How to Create a FilmStrip Flash Video Project with Camtasia Studio and PowerPoint 13 Step 1.2. Create a PowerPoint file (presentation)

38

Alexis Aronis

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 A1-5. Optimization of image on Smartphones using Scroll Bars

Page 39: How to Create a FilmStrip Flash Video Project · How to Create a FilmStrip Flash Video Project with Camtasia Studio and PowerPoint 13 Step 1.2. Create a PowerPoint file (presentation)

39

How to Create a FilmStrip Flash Video Project with Camtasia Studio and PowerPoint

Appendix 2. Short Glossary - Learn More

Glossary of Video and Graphics-Related Terminology

http://foldoc.org/

FOLDOC is a computing dictionary. It includes definitions of acronyms,

jargon, programming languages, tools, architecture, operating

systems, networking, theory, standards, mathematics, telecoms,

electronics, institutions and companies, projects, history, in fact any of

the vocabulary you might expect to find in a computer dictionary.

application program

(programming, operating system) (Or "application", "app") A

complete, self-contained program that performs a specific

function directly for the user. This is in contrast to system

software such as the operating system.

digital

(data) A description of data which is stored or transmitted as a

sequence of discrete symbols from a finite set, most commonly

this means binary data represented using electronic or

electromagnetic signals. The opposite is analogue.

graphics

(graphics) Any kind of visible output

including text, images, movies, line art and digital

photographs; stored in bitmap or vector graphic form.

Learn More …

Page 40: How to Create a FilmStrip Flash Video Project · How to Create a FilmStrip Flash Video Project with Camtasia Studio and PowerPoint 13 Step 1.2. Create a PowerPoint file (presentation)

40

Alexis Aronis

multimedia

(multimedia) Any collection of data including text, graphics,

images, audio and video, or any system for processing or

interacting with such data. Often also includes concepts from

hypertext.

operating system

(operating system) (OS) The low-level software which handles

the interface to peripheral hardware, schedules tasks,

allocates storage, and presents a default interface to the user

when no application program is running.

video

(graphics) Moving images presented as a sequence of static

images (called "frames") representing snapshots of the scene,

taken at regularly spaced time intervals, e.g. 50 frames per

second. Apart from the frame rate, other important properties

of a video are the resolution and colour depth of the individual

images.

World-Wide Web

(web, networking, hypertext) (WWW, W3, The Web)

An Internet client-server hypertext distributed information

retrieval system. Basically, the web consists of documents

or web pages in HTML format (a kind of hypertext), each of

which has a unique URL or "web address". Links in a page are

URLs of other pages which may be part of the same website or

a page on another site on a different web server anywhere on

the Internet.