視頻教學課件的制作技巧

摘 要：本文主要介紹基于Flash Professional 8和Camtasia studio 4平臺研制多媒體輔助視頻教學課件的技巧，其中包括整合文件時路徑問題的解決、自定義視頻播放器、FLV視頻文件添加注釋、設置文本顯示格式、課件中顯示時間等。

關鍵詞：視頻播放器；提示點；FLV；Camtasia studio；教學課件

中圖分類號：G434 文獻標識碼：B 文章編號：1673-8454(2008)10-0048-03

一、視頻教學課件介紹

1.課件功能

筆者主持的科研項目“多媒體課程輔助教學課件的研制”，其中一個主要的成果是基于PhotoShop實例教程（該教程也是項目的一個成果）開發學習PhotoShop CS 3軟件的視頻教學課件，包括書中典型實例的課件和基礎知識的課件，最終的作品形式是一張DVD光盤。光盤首頁文件Index.swf是一個導航，點擊導航按鈕可以分別進入“實例視頻課件”、“基礎知識視頻課件”、“素材文件夾”、“作品賞析”、“快捷鍵”頁面，如圖1所示課件的導航頁面。如圖2所示“飾品”教學課件的界面，在首頁中依次點擊“實例課件|色彩模式|飾品”，開始播放制作“飾品”實例的教學課件，圖中所示是需要進行解釋的部分通過圖形進行強調，并在界面的底部進行“配音”。

2.課件研制平臺

在Microsoft PowerPoint、Autorware、Director、Flash、方正奧思等諸多的多媒體課件制作軟件中，本項目采用多個軟件同時運用，各取所長。Camtasia studio 4進行“實例教學過程”的錄制、編輯和導出文件， Flash professional 8對錄制的視頻進行編輯和合成，形成最后的課件系統。

（1）Camtasia studio 4軟件

Camtasia Studio 4是一款功能強大的視頻處理軟件，包括Recorder、AudioEditor、Theater、Menumaker、Player等組件，提供從屏幕錄制、視頻編輯到視頻輸出整套工具；能在任何顏色模式下記錄屏幕動作、解說聲音、Camera video等；能添加各種形式的注釋；可對視頻片段進行剪接、添加轉場效果；能輸出多種文件格式，包括AVI、GIF、SWF/FLV、RM、WMV、MP3、MOV甚至iPod/iTunes等。

在項目中， 首先用Recorder組件錄制在PhotoShop CS 3環境中制作實例的過程。然后，在Camtasiastudio 4編輯環境中，對錄制好的視頻進行編輯處理。比如，使用“title clips”在播放實例制作視頻之前顯示實例效果圖；使用“callouts…”給視頻添加各種注釋，比如步驟說明，快捷鍵說明，需要重點突出的地方等；使用“zoom-n-pan”放大視頻局部的畫面，以突出重點的參數；使用“transitions”在時間線的片段之間添加過渡效果等等。最后，使用“produce video as…”導出編輯好的視頻為.swf格式或者FLV格式，以備Flash進行整合。圖3是recorder界面，可以選擇錄制的屏幕區域。圖4是Camtasia studio 4編輯環境。

（2）Flash Professional 8

Flash是一款矢量動畫軟件，任意縮放不變形；可以生成高壓縮比的

.swf文件格式，且文件體積小，播放流暢；Flash作品可以打包成一個環保的.exe可執行文件，容易移植；引入了“元件”的概念，同時修改多處內容變得比較容易等等，已經有越來越多的人使用Flash制作動畫課件。

從Flash MX版本開始，Flash對視頻提供了支持。加上流媒體技術的盛行，應用Flash制作視頻課件也越來越流行。本文就是充分利用Flash對視頻的支持，加上Flash軟件中FLV Playback組件的使用，以Flash professional 8作為整個教學課件的整合平臺，生成了體積比較小的視頻教學課件。

3.課件系統結構

圖5是課件系統結構圖。從圖中可以看到，該課件既可以作為教學型也可以作為學生自學型的課件。

二、解決路徑問題

Camtasia Studio 4和Flash 8相結合可以有多種方式制作視頻教學課件。本項目中一種解決方法，利用Camtasia Studio 4錄制成AVI格式、進行編輯之后導出.swf格式的視頻文件，再使用Flash的LoadMovie()函數調用外部.swf影片來整合所有的視頻文件。

Camtasia studio4提供了Camtasia MenuMaker及Camtasia Theater工具來制作菜單，以把所有的.swf文件組織起來，但是本項目中使用Flash作為整合平臺，以便充分的利用Flash的優點，以更自由的空間來整合.swf文件。以jxshp5-3.camrec源文件為例，介紹整個的整合過程。

1.導出.swf格式文件

在Camtasia編輯環境里，點擊“produce video as…”，彈出“Production Wizard”窗口，根據向導進行設置，采用默認生成的文件名為jxshp5-3，保存路徑為e:\\cam。在這里建議勾選“organize produced files into sub-folder”，這樣可以把jxshp5-3.camrec導出時生成的所有文件（包括jxshp5-3.xml、jxshp5-3.js、jxshp5-3.css、jxshp5-3.swf、jxshp5-3_controller.swf等）都包括在jxshp5-3子目錄中。Camtasia中導出的.swf文件是帶有播放器的。每一個實例教學課件或基礎知識教學課件，導出成.swf格式時統一保存在目錄cam下的一個子目錄里，方便組織和管理。

2.Flash平臺整合作品

主文件shilikuangjia14.swf使用Loadmovie函數載入需要的.swf文件到主場景中。假設shilikuangjia14.swf和cam在同一目錄里，使用語句“LoadMovie(”cam/jxshp5-3/ jxshp5-3_controller.swf”，this.myclip)”載入教學實例代替主場景中的實例名稱myclip的影片剪輯。這時候，測試影片卻發現不能如期的調用教學視頻文件進行播放，提示找不到jxshp5-3.swf文件。可見整合的關鍵問題是錯誤的文件鏈接。

解決方法是：把jxshp5-2子目錄中的jxshp5-2_config.xml文件移動到e盤根目錄下，然后用記事本打開jxshp5-2.xml文件，找到“jxshp5-2.swf”，修改為“cam\\jxshp5-2\\jxshp5-2.swf ”，然后再進行測試。Camtasia導出文件以后，生成的文件夾里還包括設置樣式的FlashTemplate.css文件，這樣就可以在導出文件之后繼續修改相關的樣式而不需要再次在cam中編輯并導出。

三、自制視頻播放器

本項目中的另一種解決方法是利用Camtasia Studio 4錄制并導出為FLV格式的視頻文件，再使用Flash對FLV進行編輯、導出為.swf文件。

錄制生成的.avi格式文件可以通過Flash 8 Video Encoder生成FLV格式的文件，但是在Camtasia中可以進行編輯以后再導出，所以本項目采用后一種方法。

1.制作播放器

雖然Camtasia導出的FLV文件可以包含播放器，在Flash中導入視頻的時候可以添加預置的播放器，但這里主要介紹如何自制視頻播放器。

FLV Playback 是 Flash Professional 8 的新增組件，用于查看視頻的顯示區域，包括查看 FLV 文件以及對該文件進行操作的控件。

FLV Playback Custom UI組件包括 FLV 回放自定義用戶界面組件，提供控制按鈕和機制，包括播放、停止、暫停 FLV 文件以及對該文件進行其它控制。FLV Playback 組件和 FLV 回放自定義用戶界面控件顯示在Flash軟件的“組件”面板中。

制作過程如下：

將 FLV Playback 組件拖到舞臺上，并為其實例命名為my_FLVPlybk。

選中舞臺上的 FLVPlayback 組件，在“組件”檢查器的“參數”選項卡上找到 contentPath 參數的 Value 單元格，并輸入FLV文件的路徑。

在“組件”面板中，將Play PauseButtonForwardButtonBackButton、SeekBar拖到舞臺上，然后將它們置于 FLVPlayback 實例上，并水平排列在下面。在“屬性”檢查器中為每個按鈕提供一個實例名稱（如myppbutton、myfbutton、mybbutton、mysbar）。

在時間軸第 1 幀的“動作”面板上，為 video 類添加一條 import 語句，并且將按鈕和搜索欄名稱分配給相應的 FLVPlayback 屬性，代碼如下：

import mx.video.*;

my_FLVPlybk.playPauseButton = myppbutton;

my_FLVPlybk.forwardButton = myfbutton;

my_FLVPlybk.backButton = mybbutton;

my_FLVPlybk.seekBar = mysbar;

2.添加注釋

播放FLV文件的過程中，如果需要在一些特定的時刻（FLV文件的一些關鍵幀）顯示注釋信息，需要借助于提示點（cuePoint）來完成。

提示點是一個點，在播放 FLV 文件時，視頻播放器在該點處調度一個 cuePoint 事件。有三種類型的提示點：導航、事件和 ActionScript。ActionScript 提示點是一種外部提示點，可以通過組件的“Flash 視頻提示點”對話框或通過 FLVPlayback.addASCuePoint() 方法添加。項目中就是使用ActionScript提示點在FLV文件播放到某一個時刻的時候在視頻組件外的文本框中顯示相應的提示信息，步驟如下：

/** 舞臺上的 FLVPlayback 組件具有實例名稱 my_FLVPlybk，TextArea 組件具有實例名稱 my_ta */

import mx.video.*;

// 創建提示點對象并添加提示點

var cuePt:Object = new Object();

cuePt.time = 2.55;

cuePt.name = \"elapsed_time\";

cuePt.type = \"actionscript\";

my_FLVPlybk.addASCuePoint(cuePt);

// 使用 time 和 name 參數添加AS 提示點

my_FLVPlybk.addASCuePoint(7.8， \"elapsed_time2\");

var listenerObject:Object = new Object();//播放到了提示點，在動態文本框中顯示相應的操作提示

listenerObject.cuePoint = function(eventObject:Object) {

switch (eventObject.info.time) {

case 2.55:my_ta.text = \"現在播放到了2.55秒 \" ;break;

case 7.8:my_ta.text = \"現在播放到了7.8秒 \" ;break;

default:my_ta.text=\"此處顯示教學視頻的提示信息\";break;

}}

my_FLVPlybk.addEventListener(\"cuePoint\"， listenerObject);

另外，在舞臺上可以通過下面的方式設置文本的顯示格式，代碼如下所示：

var my_ta:mx.controls.TextArea;

_global.styles.TextInput.setStyle(\"fontWeight\"， \"bold\");

_global.styles.TextInput.setStyle(\"backgroundColor\"， 0x00004b);

_global.styles.TextInput.setStyle(\"marginLeft\"， 15);

_global.styles.TextInput.setStyle(\"marginRight\"， 20);

_global.styles.TextInput.setStyle(\"color\"， 0x07f1f4);

_global.styles.TextInput.setStyle(\"fontSize\"， 18);

_global.styles.TextInput.setStyle(\"borderStyle\"， \"none\");

在課件中顯示時間的代碼如下，所示：

var dayOfWeek_array:Array = new Array(\"星期天\"， \"星期一\"， \"星期二\"， \"星期三\"， \"星期四\"， \"星期五\"， \"星期六\");

var today_date:Date = new Date();

var date_str:String =

(

\" 北京時間 \"+dayOfWeek_array[today_date.getDay()]+\" \"

+today_date.getHours()+\":\" +today_date.getMinutes()

);

my_ta.text=date_str;

四、結語

Camtasia軟件是一個使用起來很方便的視頻編輯軟件。教學中，在講授某一個實例或是整個的教學過程需要不斷重復講解的時候，可以使用Camtasia錄制下來，制作成視頻課件。在播放的同時，老師還可以在學生中間進行輔導講解，充分的利用課堂時間。

參考文獻:

[1]吳有林.計算機輔助教學技術[M].北京：清華大學出版社. 2006.

[2]方其桂.Flash mx課件制作方法與技巧[M].北京：人民郵電出版社.2004.

[3]劉亞平.郝謙.計算機輔助教學與多媒體課件制作[M]. 湖北：華中師范大學出版社，2005.

[4]林筑英.多媒體教學應用原理與開發技術[M].北京：電子工業出版社.2005.

[5]馬克·蓋勒（著）司大宇.數字圖像處理技巧[M].浙江：浙江攝影出版社.2002.

[6] Gary David Bouton（美）.Inside PhotoShop完全攻略[M].北京：海洋出版社.2002.