天天看點

帶你讀《多媒體技術教程(原書第2版)》之二:走進多媒體第2章

點選檢視第一章 點選檢視第三章

第2章

走進多媒體

2.1 多媒體任務和關注點

在我們使用的軟體中,多媒體内容無處不在。我們不僅對與其相關的計算機科學和工程學理論感興趣,也對利用視訊編輯器制作互動式應用(或者示範)感興趣,比如我們先使用視訊編輯器Adobe Premiere、Cyberlink PowerDirector和靜态圖像編輯器Adobe Photoshop來編輯視訊和圖檔,然後利用Flash和Director這類程式設計工具将上一步得到的資源整合到互動式程式當中。

多媒體領域經常會有一些從計算機科學角度出發而産生的問題和思考。比如最近計算機視覺領域非常關注的一個話題——照相機智能地識别人臉,如今這個話題被當作是人工智能的一個分支:利用人工智能了解圖像内容。這個基礎問題已經在影響多媒體領域産品的方方面面。

計算機視覺方向的研究還鼓勵照相機使用者像計算機科學家一樣思考“圖像中發生了什麼”。一個較進階的問題是“這個圖像是在哪裡拍攝的”(場景識别)或者“這個圖像是否包含了某個特定的物體”(目标分類)。一個依然困難的問題是“感興趣的目标在哪兒”(目标檢測)。較低級的問題可能是“每一個像素屬于哪個對象”(圖像分割)。是以,不久之後我們發現自己完全投身于經典計算機視覺研究的層次結構中,從進階研究層次到圖像的較長的描述:層次結構的頂部是場景識别,底部是圖像分割。

在本書中,我們采取适當的難度級别,避開上述的複雜問題。然而,學習多媒體問題的基本原理确實富有成效,我們的目标是為讀者在工作環境中提供最終解決這些難題的方法和工具。

2.2 多媒體展示

本節簡要介紹在多媒體内容展示時需要牢記于心的一些準則,以及一些關于多媒體内容設計的指導方針[1,2]。

1.圖形風格

我們要仔細考慮展示中的配色方案和文字的視覺效果。很多展示都是針對商用投影顯示器,而非近距離的螢幕。此外,還要考慮人類視覺的動态性以決定展示的尺寸。這裡的大多數觀點都參考自Vetter等人的著作[3],如圖2.1所示。

2.色彩的原則和方針

某些配色方案和藝術風格與一些特定的主題或風格相比對能産生最好的效果。例如,對于室外場景,配色方案可以較為自然和鮮豔;在室内則應樸素一些。藝術風格的例子有油畫、水彩畫、彩色鉛筆畫或粉彩畫。

通常建議不要用太多的顔色,因為這會使人分心。盡量用色一緻,然後用顔色的變化來表示主題的改變。

3.字型

為了更好的視覺效果,大字型(18~36磅)是最佳選擇,每屏的行數不超過6~8行。如圖2.1所示,sans serif(無襯線)字型比serif(有襯線)字型效果更好(serif字型的筆畫兩端帶短襯線a)b)。圖2.1對兩幅螢幕投影進行了比較。

帶你讀《多媒體技術教程(原書第2版)》之二:走進多媒體第2章

圖2.1a中使用的顔色和字型非常合理,它使用了統一的配色方案,使用了較大的sans serif(Arial)字型。圖2.1b則效果不佳,因為它使用了太多的顔色,并且這些顔色搭配得不和諧,深色的serif(Times New Roman)字型也很難辨認。另外,右下角面闆的對比度不足,因為漂亮、柔和的顔色隻有當背景顔色與其有明顯不同時才能使用。

4.色彩對比程式

根據Vetter等人的研究成果,我們開發了一個VB程式來展示文本的顔色和背景顔色是26如何影響文本可讀性的。

在螢幕上建構理想的配色方案最簡單的方法是使用互補色原理來設定文字的背景顔色。對于在0~1(或者0~255)之間取值的顔色來說,如果文本的顔色是三元組(R、G、B),那麼比較合理的背景顔色可以用最大值減去這個顔色得到:

(R,G,B)

帶你讀《多媒體技術教程(原書第2版)》之二:走進多媒體第2章

(1-R,1-G,1-B)(2.1)

這樣的話,不僅僅顔色在某種程度上是“相反”或者說“相對”的(當然這和藝術家們所指的“相反”是不同的),而且背景和文本也如此,背景的顔色越深,則文本的顔色越淺,反之亦然。

在這個VB程式中,使用者可以通過滑動條來控制背景顔色的變化,同時文本的顔色也将根據互補色原理做相應的改變。使用者也可以通過單擊背景打開色彩選擇器來選擇色彩。

如果你認為可以有更好的色彩搭配,那麼單擊文本,打開和背景無關的色彩選擇器來挑選顔色(文本也可以被編輯)。稍做實驗你就會發現,某些顔色的搭配确實有更好的效果——例如,粉紅色背景和森林綠的前景,或者綠色背景和淡紫色前景。圖2.2是這個程式運作的截圖。

圖2.3是一個調色闆(color wheel),在這裡相對的顔色定義為(1-R,1-G,1-B)。藝術家的調色闆和這個調色闆有所不同,因為藝術家的調色闆更多是源于藝術感覺,而非某種算法。在傳統的藝術家調色闆中,黃色和品紅色相對,而非圖2.3中的藍色;藍色和橙色是相對的。

帶你讀《多媒體技術教程(原書第2版)》之二:走進多媒體第2章

5.分鏡動畫

動畫中經常使用分鏡(sprite)。例如,在Adobe Director(原名為Macromedia Director)中,分鏡是指任何資源的執行個體化。然而,分鏡動畫的基本思想非常簡單。假設我們已經創作了一個動畫圖,如圖2.4a所示,可以很容易地得到1位(黑白)的掩模M,如圖2.4b所示,并得到如圖2.4c所示的分鏡S。

帶你讀《多媒體技術教程(原書第2版)》之二:走進多媒體第2章

現在我們可以将這個分鏡覆寫在彩色的背景B上,如圖2.5a所示。我們要做的是先将B和M做“與”運算,然後将得到的結果和S做“或”運算,最終的結果如圖2.5e所示。将這些簡單操作的組合以一定的幀速率執行,就可以生成一個簡單的二維動畫。這個動畫可以移動分鏡,但并不改變它的外觀。

6.視訊的切換

視訊切換可以有效地表示與下一部分内容之間的變換。視訊切換是表示“場景變換”的語義手法,并經常帶有語義資訊。常用的切換類型包括:切變、擦除、溶解、淡入和淡出。

切變,顧名思義,是指兩個連續的視訊幀之間的圖像内容産生劇烈變化。這是最簡單也是最常用的切換方式。

擦除是用另一段視訊中的内容來代替可視區域的像素。如果兩個視訊的邊界在螢幕中緩慢移動,那麼第二段視訊将逐漸替代第一段視訊。擦除的方式有從左到右、從右到左、垂直、水準,類似于虹膜打開,或鐘表指針掠過的方式等。

帶你讀《多媒體技術教程(原書第2版)》之二:走進多媒體第2章

溶解是用兩段視訊的混合來代替原圖中的像素,以實作兩段視訊之間的漸變。淡出是使用黑(白)來代替視訊,淡入則相反。大多數的溶解可以歸為兩類,分别對應于Adobe Premiere視訊編輯軟體中的交叉溶解和抖動溶解。

在第一類(交叉溶解)中,像素是漸變的。它可以被定義為

D=(1-α(t))·A+α(t)·B(2.2) 

A和B是表示視訊A和B的三元顔色向量。α(t)是切換函數,通常和時間t呈線性關系:

α(t)=kt,ktmax≡1(2.3)  

第二類(抖動溶解)則完全不同。根據α(t),視訊A中的像素點将突然被視訊B所替代,這種變化是非連續的。變化的像素點的位置可以是随機的,也可以遵循一定的模式。

很明顯,淡入、淡出是第一類溶解方式的特例(視訊A或視訊B為黑色或白色),而擦除是第二類溶解方式的特例(采用某種幾何模式來改變像素)。

盡管很多數字視訊編輯器都有一組預設的切換方式,我們有時還是希望能夠按照自己的意圖定制。假設我們希望建立一種特殊的擦除模式——使用滑入、滑出的方式實作視訊的替換。常見的擦除方式沒有這種效果。通常情況下,每段視訊保持原位,切換線沿着“靜态”的視訊運動,對于從左到右的擦除而言,視區左邊的部分顯示左邊視訊的像素點,右邊部分顯示右邊視訊的像素點。

假設我們不希望每一個視訊幀位置都固定不變,而是漸漸地移入(移出)視區:我們希望VideoL從左邊滑入,并将VideoR推出。圖2.6顯示了這一過程。VideoL和VideoR有各自不同的RGB值。注意,R是幀中位置(x,y)和時間t的函數。由于這是視訊而不是不同大小的圖像集合,是以兩段視訊有相同的最大範圍xmax。(實際上,Premiere将所有視訊都規範為相同大小,即目前選中的區域,是以無須擔心大小不同。)

切換邊界的水準位置xT沿着視區從t=0時刻的xT=0向t=tmax時刻的xT=xmax運動。是以,對于随時間線性變化的切換來說,

帶你讀《多媒體技術教程(原書第2版)》之二:走進多媒體第2章

是以對于任意時刻t,情況如圖2.7a所示。視區有它自己的坐标系統,x軸的範圍是從0到xmax。我們将在視區内填入像素。對于每一個x(和y),我們必須确定從那段視訊中獲得的RGB值以及從什麼位置獲得像素值——也就是左邊視訊坐标系統中的x位置。根據視訊的特點,左邊視訊幀的圖像是不斷變化的。

帶你讀《多媒體技術教程(原書第2版)》之二:走進多媒體第2章
帶你讀《多媒體技術教程(原書第2版)》之二:走進多媒體第2章

假設對y的依賴性是隐式的。在任何事件中,我們使用和源視訊相同的y值。那麼對于紅色通道(藍色通道和綠色通道也是類似的),R=R(x,t)。假設我們确定像素值來自于VideoL,那麼非運動視訊中的x坐标xL=x+(xmax-xT),其中x是我們需要在視區中填充的位置,xT是切換邊界的位置,xmax是任意一幀中的最大像素的位置。

為了說明這一點,我們可以從圖2.7b中看到,可以使用距離x與xmax-xT的和來計算VideoL坐标系統中的位置xL。

帶你讀《多媒體技術教程(原書第2版)》之二:走進多媒體第2章

代入,我們可以得到如圖2.8所示的僞代碼。在圖2.8中,如果像素點來自VideoR而非VideoL,那麼也很容易得到公式中相應的變化。

帶你讀《多媒體技術教程(原書第2版)》之二:走進多媒體第2章

本章後面的練習包含對視訊切換的建議。作為一名計算機科學家或工程師,你應該能夠輕松建構自己的視訊切換方式,而不是依靠菜單中的可選項目。

投身于多媒體領域,解決有趣的、具有挑戰性的甚至前人無法解決的任務!

2.3 資料壓縮

使用多媒體的最明顯和最重要的挑戰之一是資料壓縮。表2.1顯示了标準清晰度和高清廣播視訊的值。顯然,我們需要更好和速度更快的資料壓縮方法,以避免在我們試圖分享資料或使用磁盤作為輸入輸出裝置時,由于資料太大導緻的存儲和網絡問題。

帶你讀《多媒體技術教程(原書第2版)》之二:走進多媒體第2章

究竟需要壓縮多少?實際上,這取決于應用程式、計算機的顯示能力,以及可用流(每秒位)的帶寬,并且還要檢視解壓縮的結果。

在常見的JPEG圖像壓縮标準中,壓縮量由Q值控制,範圍是0~100(詳見9.1節)。圖像的“品質”在Q=100時是最好的,在Q=0時是最差的。

圖2.9a顯示了可以捕獲全精度圖像的數位相機拍攝的原始未壓縮圖像,完全沒有資料壓縮。該圖像有364行和485列的像素資料(從2424減少3232,以更好地觀察Q的影響);是以在RGB像素值的每一個中都具有8位精度,總檔案大小為364×485×3=529620位元組(不包括檔案頭資訊,其存儲行和列的尺寸)。

帶你讀《多媒體技術教程(原書第2版)》之二:走進多媒體第2章

在表2.2中,我們使用JPEG壓縮中不同的品質因子來得到一系列結果。事實上,我們可以大幅地縮小檔案的大小,但是Q值越小,生成的圖像越差。

帶你讀《多媒體技術教程(原書第2版)》之二:走進多媒體第2章

如圖2.9所示,雖然Q=25的效果并不是那麼糟糕,但如果我們堅持将品質因子降低至Q=5,最終會得到不可用的圖像。這個示範向我們展示了一些有趣的東西:與黑白(即灰階)相反的顔色部分相對于高壓縮比(即壓縮後的資料量很少)可能沒那麼顯著。在第9章中,我們将看到顔色和灰階本質上的差別。

壓縮确實能縮短傳輸時間,但也要付出一定的代價。JPEG壓縮可以使壓縮比達到25∶1,品質損失很小。對于視訊壓縮,第11章中提出的MPEG視訊壓縮标準可以産生100∶1的壓縮比,同時保持合理的品質(見圖2.9)。

但是,讓我們來看看圖像和視訊處理在CPU方面的開銷是多少。假設我們有一個圖像,我們希望它能變暗2倍。以下代碼片段是這個操作的僞代碼:

帶你讀《多媒體技術教程(原書第2版)》之二:走進多媒體第2章

在RISC機器上,一個循環操作相當于一個增量、一個檢查和一個分支指令。除此之外,還需要三個取指、三個移位和三個存儲指令,操作每個像素共需要12條指令,每個像素有3位元組,是以每個位元組需要4條指令。對于标清視訊,每秒有28MB資料,即每秒28MB×4=112MB條指令。對于187MB/s的高清視訊,每秒更是需要748MB條指令。

這當然是可能的。然而,JPEG壓縮每像素需要執行約300條指令,換句話說,每個圖像位元組需要100條指令。在标準清晰度和高清晰度下每秒分别産生28億條指令和190億條指令,這是一個真正的瓶頸!顯然,需要提出更好的解決方案,我們将在後面的章節中講到這些技術。

嘗試與多個資料流進行互動會産生一些問題。例如,如果我們嘗試在新聞采訪的視訊上加上一些背景資訊的視訊以及附加資訊的資料流等資訊會發生什麼。将這些資訊合并(整合在一起),然後壓縮,這是最好的方法嗎?或者在接收端合成?多媒體往往會對計算機科學本身提出新的問題。在排程和資源管理方面,多個資料流為作業系統增加了新的負擔。

此外,新功能可能意味着新的需求:如果搖滾樂隊需要一起排練音樂,但是成員不在同一個地方(分布式音樂問題),該如何解決,即在對各種應用程式進行壓縮時我們可以接受多少延遲(時間延遲)?對于音樂排練,所有的樂隊成員都必須幾乎同時開始演奏!

2.4 多媒體制作

多媒體項目往往需要一組具有專業技能的人員參與。在本書中,我們更加專注于技術方面,但多媒體作品的制作通常不僅需要程式員,還需要藝術導演、圖形設計師、藝術指導、制片人、項目經理、編劇、使用者界面設計師、音效師、攝影師以及3D和2D動畫制作人員的共同參與。

在完成作品的前40%時,主要的工作一般隻涉及程式員;當完成65%~70%時,應該能夠得到作品的alpha版本(早期版本,不包含計劃内的所有功能和特征)。一般來說,設計過程由故事闆、流程圖、原型設計、使用者測試以及并行的媒體宣傳等階段構成。程式設計和調試階段将與市場營銷互相協調進行,之後便是産品的分銷階段。

故事闆通過一系列的草圖描述了多媒體作品的基本設想。這和視訊中的“關鍵幀”類似,故事将從這些“停止點”展開。流程圖通過插入導航資訊(多媒體概念結構和使用者互動)來組織故事闆。安排導航資訊最為可靠的方法是選擇傳統的資料結構。階層化的系統是一種最為簡單的組織政策。與其他示範不同,多媒體制作必須認真思考如何在新産品中組織不同“空間”之間的運動。例如,假設我們正行駛在非洲野生動物園,但我們也需要将标本帶回博物館進行仔細檢查,那麼如何才能有效地從一個場景轉到另一個場景?流程圖有助于設計出解決方案。

流程圖階段之後是詳細功能的開發。這是指對示範中的每個場景進行逐幀的走查,包括所有螢幕操作和使用者互動。例如,在滑鼠掠過某個角色時,它會做出反應,或者使用者單擊滑鼠時,角色會做出某種動作。

設計階段的最後部分是建構原型和測試。一些多媒體設計師在這個階段已經開始使用專業的多媒體制作工具,盡管這個中間的原型并不會用于最終的産品中或在另一個工具中使用。使用者測試是最終的開發階段前的一個極為重要的步驟。

2.5 多媒體共享和分發

多媒體内容制作完畢後,需要釋出并在使用者之間共享。近年來,傳統的存儲、分發媒體(如光學磁盤)已經在很大程度上被USB閃存驅動器或固态硬碟(SSD)所取代,或者被更快捷的網際網路所取代。

以網際網路上最流行的視訊分享網站YouTube為例,使用者可以輕松建立Google賬戶和頻道(因為YouTube現在屬于Google),然後上傳視訊,這些視訊将共享給所有使用者或所選擇的使用者。YouTube進一步啟用用于對視訊分類的标題和标簽,并将類似的視訊連結在一起(顯示為相關視訊的清單)。圖2.10顯示了從本地計算機上傳視訊到YouTube的網頁。視訊中是1905 Edison Fireside鵝型留聲機,正在播放圓筒唱片,可以在YouTube的首頁搜尋我們提供的标題和标簽“Edison Phonograph Multimedia Textbook”得到。

帶你讀《多媒體技術教程(原書第2版)》之二:走進多媒體第2章

圖2.11顯示了這個視訊的YouTube頁面。它還提供了YouTube推薦具有相似标題和标簽的視訊清單。理想情況下,我們期待它與其他有關Edison的留聲機或多媒體教材的視訊相關聯。圖2.11所示的結果不完全是我們所期望的,但它們确實有一定的聯系。注意,這裡隻有标題和标簽的文本用于關聯視訊,而不是視訊内容本身。事實上,多媒體内容檢索和推薦仍然相當困難,我們在第20章将回顧一些基本技術。

帶你讀《多媒體技術教程(原書第2版)》之二:走進多媒體第2章

就像我們将在第18章試驗的那樣,這個視訊的連結也可以放在諸如Facebook或Twitter這類能使之在短時間内傳遞到對此感興趣的使用者的社交網絡上。

網際網路也正在改變着傳統的電視廣播業。在英國,自2007年起,英國廣播公司(BBC)的播客已經能成功地向使用機頂盒的電視訂閱使用者和使用Adobe Flashplayer的公共網絡使用者播放高清電視節目。在美國,美國全國廣播公司财經頻道(CNBC)、彭博電視(Bloomberg Television)、真人秀(Showtime)都使用BitGravity公司的内容分發網絡(Content Distribution Network)提供的流媒體直播服務向訂閱使用者直播電視。中國是迄今為止使用者數最多(1260萬)的網際網路協定電視(IPTV)市場,可能是最具活力的市場,因為在中國,相關的技術互相競争激烈,并且中國擁有專門的IPTV網絡。

使用者的觀看習慣也在改變。有公信力的内容是任何IPTV推廣的核心基礎,如今仍然如此;同時,IPTV服務也正變得高度個性化、內建化、便攜化和按需化。大多數服務提供商在基本視訊産品基礎上向給使用者提供更豐富的使用者體驗的方向發展,比如支援跨電視、PC、平闆電腦和智能手機的多螢幕觀看。同時,3D、多視角、多視訊流的播放技術能夠把來自同一事件的多個視訊流傳送給使用者,使其能夠通過切換錄影機來切換觀看視角。這是服務提供商對全球家庭現狀的真實感覺:家庭除了使用傳統的機頂盒/電視機以外,同時在積極地使用流媒體高清視訊服務。

然而,多媒體内容分發的挑戰是巨大的[4]。為了把以MPEG-4(1.5Mbps)标準編碼的電視視訊傳送給1億觀衆,需要1.5Tbps的傳輸量。為了說明問題,以兩個大型網絡視訊直播場景為例:一個是2006年3月CBS播放的NCAA錦标賽,該錦标賽最高峰時有268000人同時觀看;另一個是2012年7月倫敦夏季奧運會開幕式,最高廣播觀衆達2710萬,其中920萬來自BBC的手機網站,

 230萬來自平闆電腦。即便是使用400kbps的低帶寬網際網路視訊播放流量,CBS/NCAA廣播也需要超過100Gbps的伺服器存儲和網絡帶寬;而在倫敦奧運會最繁忙的一天,英國廣播公司的網站需要傳遞2.8PB,高峰流量為700Gbps。這些場景很難靠單伺服器來處理。在後面的第16章和第19章,我們會看到一些有效的解決方案來應對這些挑戰,如點對點(P2P)技術、内容分發網絡(CDN)以及雲計算。

2.6 多媒體編輯和編著工具

本書重點關注多媒體的原理,即真正了解多媒體這一主題所需的基礎内容。然而,我們需要某種載體來展現對這一内容的了解,C++程式或Java都不是最佳的選擇。大多數多媒體導論課程都要求你至少能夠完成一些多媒體作品(參見練習10),是以我們需要一個“助推器”來幫助你學習“其他的軟體工具”,本節就将介紹這個“助推器”。

我們将介紹一些流行的編著工具。因為建立多媒體應用的第一個步驟是建立有趣的視訊片段,是以我們将首先了解一下視訊編輯工具。盡管這并不是真正的編著工具,但由于視訊創作的重要性,我們将對這類程式做一下簡單介紹。

我們将要介紹的工具包括:

●Premiere。

●Director。

●Flash。

這些工具常常用于開發多媒體内容,當然這裡并沒有列出所有可用的工具。

2.6.1 Adobe Premiere

Premiere的基礎知識

Adobe Premiere是一款非常簡單的視訊編緝程式,使用者可以通過組合和合并多媒體元件的方式來快速地建立簡單的數字視訊。它使用樂譜創作模式,在該模式下,所有的元件都被水準排放在時間軸視窗中。

通過“File→New Project”指令可以打開一個視窗,視窗中包含一系列預置資訊——包括幀的分辨率、壓縮方法和幀率。此外還有很多預置的選項,大多數遵循DV-NTSC或DV-PAL視訊标準、HDV、MPEG2等,取決于具體的安裝。

首先可以導入資源,如AVI(Audio Video Interleave,音頻視訊交叉)視訊檔案和WAV聲音檔案,并将它們從Project視窗中拖曳到軌道1或2上。(事實上,你最多可以使用99條視訊軌道和99條音頻軌道!)

Video 1實際上包含三條軌道:Video 1A(視訊1A)、Video 1B(視訊1B)和Transition(切換)。39Transition可以僅僅應用于Video 1。切換方式可以由Transition視窗拖曳到Transition軌道上,例如,用Video 1B漸漸替換Video 1A(溶解),棋盤中随機像素點的突然替換(抖動溶解),或一段視訊滑入替代另一段視訊(擦除)。程式中有許多可選的切換方式,你也可以使用Premiere的Transition Factory來設計獨創的切換方式。

可以通過将WAV聲音檔案拖拉到時間軸視窗中的Audio 1、Audio 2或者任何其他的聲音軌道來導入WAV聲音檔案。你可以通過右鍵單擊菜單來編輯聲音軌道的屬性。

圖2.12顯示了一個典型的Adobe Premiere界面。時間軸視窗頂部的黃色标尺表述了目前工作的時間軸——可以通過拖曳該标尺到達合适的時間位置。底部的1 Second下拉框表示目前的視訊幀率為每秒一幀。

帶你讀《多媒體技術教程(原書第2版)》之二:走進多媒體第2章

要對視訊進行“編譯”,使用“Seguence→Render Work Area”并将項目儲存為.ppj檔案,若要儲存,則點選“File→Export→Movie”。儲存檔案時你需要做一些選擇,包括如何以及用何種格式來儲存視訊。圖2.13顯示了項目的選項。包含編解碼方式的對話框是由編解碼生産商提供的,我們可以單擊Configure按鈕來得到。壓縮編解碼(壓縮解壓縮協定)通常位于視訊采集卡的硬體上。如果你選擇了需要硬體支援的編解碼算法,那麼别人的系統就可能無法播放你的數字視訊,40一切工作都是徒勞。

帶你讀《多媒體技術教程(原書第2版)》之二:走進多媒體第2章
帶你讀《多媒體技術教程(原書第2版)》之二:走進多媒體第2章

也可以将圖像插入到軌道中。我們可以選擇切換方式讓圖像在最終的視訊視窗中漸漸出現或漸漸消失。為了實作這一目的,我們需要建立一個“掩模”圖像,如圖2.14所示。這裡我們導入了Adobe Photoshop的層次圖像,它具有在Photoshop中建立的Alpha通道。

帶你讀《多媒體技術教程(原書第2版)》之二:走進多媒體第2章

接着,在Premiere中,我們單擊視訊軌道中的圖像,并使用“Clip→Video Options→Transparency”來設定Alpha通道的鍵(它将觸發透明性)。也可以使用“Clip→Video Options→Motion”來實作圖像在視訊幀中的飛入飛出。

在Photoshop中,我們通過以下步驟設定Alpha通道:

1) 使用你喜歡的圖像,如.JPG檔案。

2) 用單色作為背景,如白色。

3) 選擇“Image→Mode→RGB Color”。

4) 選擇背景區域(你希望在Premiere中保持不透明的區域),可以使用魔術棒工具來完成。

5) 選擇“Select→Save Selection...”。

6) 确定“Channel=New”。按下“OK”。

7) 選擇“Window→Show Channels”。輕按兩下新的通道,并将其重命名為Alpha。将其顔色設定為(0,0,0)。

8) 将其儲存為PSD檔案。

如果在Photoshop中建立的Alpha通道具有白色的背景色,那麼當你在Premiere中選擇Alpha時需要選擇Reverse Key。

Premiere有比較簡單的方法來為數字視訊建立标題(在需要榮譽的地方給予榮譽)。

Premiere另一個很不錯的特點是它可以很友善地捕捉視訊。為了從錄像帶或錄影機中得到一段數字視訊,選擇“File→Capture→Movie Capture”(視訊/音頻捕捉選項的菜單可以通過右鍵單擊捕捉視窗得到)。

2.6.2 Adobe Director

1. Director的視窗

Director是一個用來建立互動式“電影”的完整環境(見圖2.15)。它使用了電影模式,程式中的視窗就顯示了這一點。動作發生的主視窗稱為舞台(Stage)。顯式地打開舞台将自動關閉其他所有視窗——一種有用的快捷方式是Shift+Keypad-Enter(數字鍵盤邊上的Enter鍵,并非通常意義上的Enter鍵),這将清除舞台視窗之外的所有視窗,并開始電影的播放。

帶你讀《多媒體技術教程(原書第2版)》之二:走進多媒體第2章

另外兩個主要的視窗是Cast和Score。Cast中包含影片會用到的資源,如位圖、聲音、向量圖、Flash電影、數字視訊和腳本。Cast中的成員可以直接建立或從其他位置導入。通常,你可以建立多個Cast,以便更好地組織電影的不同部分。可以從Cast視窗中拖曳Cast成員,将其放在舞台上。因為一個Cast成員要用到多個執行個體,是以每個執行個體稱為一個分鏡。一般而言,Cast成員是原始媒體,而分鏡則是控制在舞台和影片中Cast成員在何時、何地以及如何出現的對象。

向分鏡中添加預定義或專門的“行為”(例如,讓分鏡跟蹤滑鼠)可以使其具有互動行為。行為位于Director的内部腳本語言中,這種語言稱為Lingo。Director是一種标準的事件驅動程式,可以友善地進行對象定位并向對象添加事件程式。Imaging Lingo是Lingo中一個非常有用的部分,它可以直接操作Director内部的圖像。也就是說,我們可以在代碼中執行圖像處理,進而實作基于代碼的視覺效果。

有許多預定義的事件集,其中包含滑鼠事件以及網絡事件等(後者的一個例子是測試Cast成員是否被成功下載下傳)。可行的控制方式是不斷循環部分示範直到視訊下載下傳完成為止,然後繼續或跳轉到另一幀。位圖可以用來作為按鈕,最常見的用途是在單擊按鈕後跳轉至另外一幀。

Score視窗由一組水準線(一條線對應一個分鏡)和垂直的幀組成。是以,Score視窗看起來和音樂的樂譜比較相似,也是按時間順序從左至右排列,但是它更像MIDI檔案中的事件連結清單(詳見第6章)。

預定義和使用者定義的行為類型均在Lingo中。調色闆庫提供了對所有預定義行為腳本的通路方式。你可以向一個分鏡中添加行為或向整個幀中添加行為。

如果行為中包含參數,43那麼就會出現一個對話框。例如,對于網頁浏覽行為,我們需要指定要跳轉的幀。你可以将同樣的行為附加給許多分鏡或幀,并為每個執行個體指定不同的參數。大多數行為都能響應簡單的事件,如在分鏡上的單擊或是在“播放頭”進入一幀時觸發的事件。大多數的基本功能(如聲音的播放)都被封裝在程式包中。開發自定義的Lingo腳本則能提供更多的靈活性。我們可以在Inspector視窗(包括Behavior Inspector和Property Inspector)中修改行為。

2.動畫

傳統的動畫的實作方式是按時間先後顯示稍有不同的圖像。在Director中,這一方法意味着在不同的幀中使用不同的Cast成員。為了便于控制這個過程,Director允許将多個成員合并為一個單獨的分鏡(如果要在樂譜上顯示,選擇所有需要合并的圖像,使用Cast To Time菜單項使它們顯示在目前的樂譜位置上)。一個有用的特點是,通過擴充這類動畫樂譜上的時間可以減緩每一幅圖像的播放時間,這樣整個動畫就可以按照規定的時間長度來完成播放。

另一種相對簡單的動畫方法是使用Director的漸變(tweening)功能。這裡,你需要在舞台上移動某幅圖像并保持原圖不變。“漸變”是初級動畫人員的工作,他們主要負責在髙級動畫人員創作的關鍵幀之間進行内容填充——這在Director中是自動完成的。

為了實作這種動畫,在舞台上确定漸變幀的路徑。你也可以确定一些關鍵幀以及關鍵幀之間的曲線變化。你還需要确定在運動的開頭和結尾處的圖像如何加速和減速(“緩入”和“緩出”)。圖2.16顯示了漸變的分鏡。

帶你讀《多媒體技術教程(原書第2版)》之二:走進多媒體第2章

另一類廣泛使用的簡單動畫形式稱為調色闆動畫(詳見3.1.7節)。如果圖像是8位的,那麼在顔色査找表中循環搜尋或系統地對查找表的條目進行替換可以得到非常有趣(或奇異)的效果。

Score視窗的重要特性包括通道、幀和播放頭。播放頭表示我們在樂譜中的位置,單擊樂譜中的任意位置将對播放頭重新定位。通道是樂譜中的行,可以包括可見媒體的分鏡執行個體。這些編号的通道又稱為分鏡通道。

在Score視窗的頂端是用來控制調色闆、速度、切換和聲音的特效通道。圖2.17顯示了Score視窗中的這些通道。在分鏡和特效通道中,幀被水準編号。和傳統電影一樣,幀是影片中的一個獨立單元。我們可以通過修改每秒的幀數來控制影片的播放速率。

帶你讀《多媒體技術教程(原書第2版)》之二:走進多媒體第2章

3.控制

你可以在任意幀中加入命名标記。最簡單的控制事件就是跳轉至特定的标記。在Director中,每個标記是一個場景的開始。觸發幀浏覽的事件是“Go To Frame”“Go To Marker”或者“Hold on Current Frame”,後者将使影片停止在目前幀的位置。幀的行為将在Score視窗的腳本通道中顯示。

按鈕就是附加了行為的位圖。你通常需要兩幅位圖,分别刻畫按鈕按下和放開時的狀态。内建的on mouseUp事件則産生跳轉。

4. Lingo腳本

Director使用四種類型的腳本:行為、Cast成員的附加腳本、電影腳本和父腳本。行為、電影腳本和父腳本在Cast視窗中都作為Cast成員出現。

“行為”是附加到分鏡或幀上的Lingo腳本。根據使用者是否單擊按鈕,你可以使用腳本來确定分鏡是否移動。一個非常有用的特點是腳本可以根據多媒體資源的下載下傳程度來控制其播放的開始時間。如果希望添加行為,可直接将其從一個Cast拖曳到Score或Stage中的一個分鏡或一幀上。

我們也使用電影腳本,它對于整個影片都是可用的。電影腳本可以控制電影開始、結束或暫停時的事件響應,還可以對諸如按鍵或滑鼠單擊這樣的事件進行響應。父腳本可以用來為一個對象建立多個執行個體,而無須向Score中添加Cast成員。

使用者自定義的Lingo腳本可以用來建立動畫或對典型事件(如使用者利用鍵盤和滑鼠産生的動作)進行響應。腳本同樣可以用來流化網上視訊、浏覽網頁以及格式化文本等。

Lingo腳本還可以在Score的基礎上對行為做進一步的拓展。采用連結清單這種最基礎的資料結構來存儲拓展的資料,在連結清單上可以進行數組操作,還可以進行數學運算和字元串操作。連結清單具有兩種類型:線性和屬性。

線性連結清單就是LISP中的連結清單,例如{12,32,43}。屬性連結清單是一個關聯連結清單,這種連結清單也和LISP中的連結清單類似:每個元素都包含兩個用冒号隔開的值。每個屬性前都有一個數字元号。例如,下面的語句産生了兩個規定分鏡坐标的屬性連結清單:

帶你讀《多媒體技術教程(原書第2版)》之二:走進多媒體第2章

Lingo具有很多對連結清單進行操作的函數。例如append可以在連結清單的結尾增加一個元素,deleteOne可以從連結清單中删除一個值。

5. Lingo規範

●函數the frame表示目前幀。

●特殊标記next或previous表示相鄰的标記(不是相鄰的幀)。

●函數maker(-1)傳回前一标記的辨別符。如果目前幀被标記并且有标記名,那麼maker(0)傳回目前幀的标記名;否則,它傳回前一标記的名稱。

●movie "Jaws"表示名為"Jaws"的全局電影的起始幀。通常它是另一個Director電影的名字。引用frame 100 of movie"Jaws"指向這部電影。這些細節詳見線上幫助的Lingo部分。

Lingo是一種标準的事件驅動程式語言。事件處理程式附加到特定的事件,如mouseDown消息。腳本中包括事件處理程式。你可以通過将腳本附加到對象來實作事件處理程式和對象的綁定。

6. 3D分鏡

Director新增的一項功能是在舞台中建立、導入和操縱3D對象。例如,可以将一個簡單的3D對象——3D文本加入到Director中。

7.屬性和參數

為Lingo行為定義行為參數可以增加建立時的靈活性。參數可以通過在行為建立時提供輸入來改變行為。如果沒有定義參數,那麼就會使用預設值。

8. Director對象

Director主要有兩類對象:一類在Lingo中建立,另一類是在Score中建立的。父腳本可以用來在Lingo中建立新對象。通過在屬性檢視器中改變腳本的類型,我們可以将行為轉化為一段父腳本。父腳本與其他行為不同,當在Lingo腳本中建立父腳本時,參數将傳遞給對象。

父腳本隻能在Lingo中建立和修改,而Score中的對象隻能被操縱。最常用的對象是Score中的分鏡。分鏡隻能和引用它們的Lingo腳本在同一段時間内使用。可以使用Sprite關鍵字加上分鏡通道号來指定引用分鏡的通道。

2.6.3 Adobe Flash

Flash是用來創作互動式電影的一個簡單的編著工具。Flash采用樂譜模式進行電影的創作和視窗的組織。在本節中,我們将簡單介紹Flash并提供一些有關其使用的例子。

1.視窗

電影是由一個或多個場景構成的,每一個場景都是電影中的一個獨立部分。利用“Insert > Scene”指令可以在目前的電影中建立一個新的場景。

在Flash中,構成電影的元件(圖像和聲音)稱為符号(symbol),我們可以通過把符号放置到舞台上來将其添加到電影中。舞台是位于螢幕中央視窗中的一個始終可見的白色矩形。Flash中另外三個重要的視窗是時間軸(Timeline)、庫(Library)和工具(Tools)。

2.庫視窗

庫視窗中顯示目前場景中的所有符号,并可以用“Window > Library”指令來切換這些符号。可以通過輕按兩下庫視窗中符号的名字來編輯,使其出現在舞台中。如果需要添加符号,隻需将其從庫中拖曳到舞台中。

3.時間軸視窗

時間軸視窗控制場景的層次和時間軸。時間軸視窗的左邊部分由舞台中的一層或多層組成,以便對舞台内容進行組織。庫中的符号可以被拖曳到舞台中的某個特定層上。例如,一個簡單的電影可以有背景和前景兩個層次。當選中背景層時,庫中的背景圖形可以被拖曳到舞台中。

對于層而言,另一個有用的功能是鎖定或隐藏層。點選層名稱旁邊的圓形按鈕,可以在層的隐藏/鎖定狀态間切換。當在另一個層中定位或編輯一個符号時,隐藏層非常有用。完成層的建構之後,可以鎖定該層以免其中的符号被意外修改。

時間軸視窗右側由場景中每一層使用的水準欄組成,和樂譜很相似。它表示影片經過的時間。時間軸由不同層的關鍵幀組成。啟動一個動畫或一個新符号的出現,這樣的事件必須在關鍵幀中設定。點選時間軸會改變目前編輯的影片的時間。

4.工具視窗

工具視窗主要用來進行圖像的建立和操作,它主要由四部分構成:工具(Tools)、視圖(Views)、色彩(Colors)和選項(Options)。工具中包括選擇工具——用于對現有的圖檔進行分割,此外還有一些簡單的繪圖工具,如鉛筆和油漆桶。視圖包括縮放工具和指針工具,可以用這些工具在舞台中浏覽。色彩工具則用于選取前景和背景色,并标記出需要操作的顔色。選項工具則用于在選中某種工具時提供附加選項。圖2.18顯示了基本的Flash界面。

帶你讀《多媒體技術教程(原書第2版)》之二:走進多媒體第2章

5.符号

符号可以由其他符号組成,或通過繪制和導入得到。Flash可以向符号庫中導入多種音頻、圖像或視訊格式。符号可以有以下三種行為:按鈕、圖形或電影。符号(例如一個按鈕)可以使用工具視窗來繪制。49

6.按鈕

為了建立一個簡單的按鈕,可以利用按鈕行為建立一個新符号。時間軸視窗應該具有四個關鍵幀:up、down、over和hit。這些關鍵幀顯示當特定動作發生時按鈕的不同外觀。隻有up關鍵幀是必需的,它也是預設的,其他關鍵幀都是可選的。可以按如下方法繪制按鈕:選擇工具視窗中的矩形工具,然後将一個矩形拖曳到舞台中。

為了使按鈕的外觀能夠在事件觸發時發生改變,我們可以通過單擊相應的關鍵幀來建立按鈕圖像。在至少定義一個關鍵幀之後,我們就完成了一個基本的按鈕,盡管此時尚未添加任何動作。動作将在下面的“動作腳本”部分加以讨論。

利用其他符号來建立符号和建立場景類似,也就是将所需的符号拖曳到舞台中。這将實作通過簡單符号來建立複雜符号。

7. Flash動畫

可以通過在符号的關鍵幀之間生成細微的差别來獲得動畫。在第一個關鍵幀中,我們可以把要産生的動畫符号從庫中拖曳到舞台上。然後插入另一個關鍵幀,使符号發生變化。這個過程可以不斷重複。盡管這個過程比較耗時,但比其他動畫技術具有更多的靈活性。Flash同樣支援以其他更簡單的方式建立特定的動畫。漸變可以生成簡單的動畫,這種方式可以自動完成關鍵幀之間的變化處理。

8.漸變

漸變有兩種形式:形狀漸變和運動漸變。形狀漸變可以用來建立一個形狀,該形狀會随着時間改變為其他形狀。運動漸變則允許你在舞台中的不同關鍵幀中的不同位置放置一個符号。Flash自動地在起始點和結束點之間填充關鍵幀。更進階的漸變可以對路徑和加速度進行控制。運動漸變和形狀漸變結合在一起可以獲得其他的效果。

掩模動畫涉及對掩模層的操作,掩模層是一個選擇性地覆寫其他層的一部分的圖層。例如,為了獲得爆炸效果,可以使用掩模來覆寫爆炸中心外的其他所有區域。形狀漸變可以擴大掩模,50這樣就可以看到整個爆炸效果了。圖2.19顯示了加入漸變效果前後的場景。

帶你讀《多媒體技術教程(原書第2版)》之二:走進多媒體第2章

9.動作腳本

動作腳本(ActionScripts)可以用于觸發事件,如移動到不同的關鍵幀或是讓影片停止播放等。動作腳本可以附加到關鍵幀或附加到關鍵幀的符号上。右鍵單擊符号并在清單中按下Actions可以修改符号的動作。類似地,通過右鍵單擊關鍵幀并在彈出部分按下Actions,就可以将動作應用到關鍵幀上。此時将會出現“Frame Actions”(幀動作)視窗,左邊是所有可用動作的清單,右邊是目前已被應用的動作标記。動作腳本可以分為6類:基本動作、動作、運算符、函數、屬性和對象。圖2.20顯示了幀的動作視窗。

帶你讀《多媒體技術教程(原書第2版)》之二:走進多媒體第2章

基本動作(Basic Actions)可以用于為影片添加一些簡單的動作。常見的動作包括:

●Go To,使影片前進到規定的關鍵幀處,并可以停止。停止動作通常用來讓使用者停止互動式電影的播放。

●Play,如果影片停止,繼續播放影片。

●Stop,如果影片正在播放,則停止播放影片。

●Tell Target,向Flash中的不同符号和關鍵幀發送消息。它通常用來開始或停止不同符号或關鍵幀上的動作。

動作(Actions)類型中包含很多程式結構,如Loops和Goto語句,此外還包括其他動作,與常用的事件驅動的進階程式設計語言(如Visual Basic)非常類似。運算符(Operators)類型則包括常量的比較和指派運算,使你可以在動作腳本中對變量進行運算。

函數(Functions)類型包括Flash中那些并非Flash對象專有的内置函數。屬性(Properties)部分則包括了Flash預定義的所有全局變量。例如,定義_currentframe來表示目前幀。對象(Objects)部分列出所有的對象,如影片片段或字元串以及它們相關的函數。

按鈕需要動作腳本(事件過程),這樣按下按鈕才會有某種效果。将一個動作(如重放Flash影片)直接附加給按鈕是很簡單的。

2.7 練習

1.多媒體還擅長表達哪類附加資訊?

(a) 有什麼内容是口頭文本可以表達而書面文本不能表達的?

(b) 在什麼情況下書面文本比口頭文本更為理想?

2.在你的實驗室中找到并學習Autodesk 3ds Max(前身是3D Studio Max),閱讀線上教程,掌握軟體的3D模組化技術。學習如何使用它進行紋理貼圖和動畫制作。最後制作一個3D模型。

3.用Adobe Dreamweaver設計一個互動式網頁。HTML 4中提供了類似于Adobe Photoshop中的層的功能。每一層表示一個HTML對象,如文本、圖像或一個簡單的HTML網頁(Adobe HTML 5 Pack是對Dreamweaver的擴充)。在Dreamweaver中,每一層都有一個與該層相關的符号。是以選中符号就可以選中整個層,然後就可以進一步處理。在Flash中,你可以添加按鈕和行為以便進行浏覽和控制。你還可以使用時間軸行為來建立動畫。

4.假設我們希望建立一個簡單動畫,如圖2.21所示。注意,這幅圖像是某動畫在某一時刻的靜态畫面,并非動畫表示魚的移動過程,在魚的移動過程中它是重複的。說明為了實作這個目的我們需要做什麼,并給出解決這個問題的僞代碼。假設我們已經有了一組表示魚的路徑的坐标(x,y),我們可以調用一個過程來将圖像定位在路徑位置上,并且運動是在視訊的頂部發生。

帶你讀《多媒體技術教程(原書第2版)》之二:走進多媒體第2章

5.對于圖2.8中的滑動切換,解釋我們如何得到非運動的右邊的視訊RR中x的表達式。

6.假設我們希望實作一種視訊切換方式:第二段視訊将第一段視訊覆寫,并通過一個擴散的圓圈慢慢顯現(類似于相機的光圈),如圖2.22所示。寫出公式,從兩段視訊中獲得正确的像素點以實作這種功能。隻需寫出紅色通道的答案即可。

帶你讀《多媒體技術教程(原書第2版)》之二:走進多媒體第2章

7.現在假設我們希望實作一種視訊切換方式,第二段視訊仍将第一段視訊覆寫,并通過一條運動的半徑慢慢顯現(如鐘表的指針),如圖2.23所示。寫出公式,從兩段視訊中獲得正确的像素點以實作這種功能。隻需寫出紅色通道的答案即可。

帶你讀《多媒體技術教程(原書第2版)》之二:走進多媒體第2章

8.假設你希望實作一種波動的效果,如圖2.24所示。用與x有一定偏移量的值來代替x處的值就可以得到這種效果。假設圖像的大小為160×120像素。

帶你讀《多媒體技術教程(原書第2版)》之二:走進多媒體第2章

(a) 使用浮點運算在像素點x的值上增加一個正弦分量,使得x的RGB值等于原圖中另一個像素點的值。x的最大切換值是16。

(b) 在Premiere以及其他軟體包中,隻提供了整數運算。像正弦這樣的函數都需要重新定義,它隻接受整數形式的參數并且傳回整數形式的值。sin函數的參數值必須是0~1024,而其值域為-512~512,即sin(0)傳回0,sin(256)傳回512,sin(512)傳回0,sin(768)傳回-512,sin(1024)傳回0。對于(a)問題,使用整數運算重寫表達式。

(c) 如果要使用波動與時間相關,如何修改答案?

9.如何建立圖2.3所示的圖像?編寫一個小程式用以建立這樣的圖像。提示:将R、G、B分别放置在圓的内接等邊三角形的頂點上。最好能對輸出對象的行和列進行檢查,而非簡單地将結果按照(x,y)的位置進行比對。

10.為了學習如何使用現有的軟體對圖像、視訊和音樂進行操作,制作一段時長1分鐘的數字視訊。通過這個練習,你将熟悉如何使用基于PC或蘋果的裝置以及如何使用視訊編輯器(如Adobe Premiere)、圖像編輯器(如Photoshop)、用于制作MIDI的音樂符号程式、Adobe Audition等數字音頻處理軟體和其他多媒體軟體。

(a) 捕獲(或尋找)至少三個視訊檔案。你可以使用錄影機,或從網上下載下傳,或使用靜态圖像相機、手機等的視訊設定(對于有趣的傳統視訊,可利用舊的模拟錄影機或VCR,通過Premiere或同等産品的視訊捕捉來制作自己的視訊——這是具有挑戰性和富有樂趣的)。

(b) 嘗試将其中一個視訊上傳到YouTube。檢查上傳視訊消耗的時間,并讨論其與視訊的品質和大小的關系。這個時間比視訊的總播放時間長或短嗎?

(c) 使用音樂操縱軟體撰寫(或編輯)一個小型MIDI檔案。

(d) 建立或尋找至少一個WAV檔案(或MP3),也可以自己創作或從網上下載下傳,通過諸如Audition、Audacity等軟體對這些數字音頻檔案進行編輯。

(e) 使用Photoshop建立标題和結尾。這個很容易實作,但是,你不能在沒有使用過Photoshop的情況下說你了解多媒體知識。

在Photoshop中需要了解的一個有用功能是如何建立Alpha通道:

●使用一幅你喜歡的圖像,如JPG。

●設定背景顔色為白色。

●確定是在Image > Mode > RGB Color中選擇的。

●選擇背景區域(你希望在Premiere中保持不透明):MagicWandTool。

●Select > Save Selection > Channel=New;OK。55

●Window > ShowChannels;輕按兩下新的通道并将其重命名為Alpha;設定顔色值(0,0,0)。

●将檔案另存為.PSD格式。

如果在Photoshop中建立的Alpha通道的背景顔色為白色,當你選擇Transparency > Alpha時,需要在Premiere中選擇ReverseKey。

(f) 将上面的各步結果組合起來,創作一段60秒左右的影片,包括标題、創作人員、配樂和至少三處切換。對你來說,你的視訊情節應該很有趣!

(g) 試驗不同的壓縮方法,最終版本最好使用MPEG。我們非常有興趣了解教科書中的概念如何轉化為實際視訊的制作。Adobe Premiere可以使用DivX編解碼器生成電影,輸出電影實際上可以在機器上播放,但嘗試各種編解碼器不是更有趣嗎?

(h) 以上部分構成了實驗的基本部分。你可以進一步地改進你的作品,不過千萬不要是以而廢寝忘食啊!

參考文獻

帶你讀《多媒體技術教程(原書第2版)》之二:走進多媒體第2章

繼續閱讀