how to create a filmstrip flash video project · how to create a filmstrip flash video project with...
TRANSCRIPT
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
How to Create a FilmStrip
Flash Video Project with
Camtasia Studio and
Power Point
Alexis Aronis
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.
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
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]
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
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
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
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.
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
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
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).
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
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
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
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
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
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
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'
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
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
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
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
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
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'
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)'
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
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’
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
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
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]
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)"
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’
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
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].
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]
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)
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
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 …
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.