第2章 網絡互動媒介

2.1 網絡交互設計

2.1.1 多元化的Animate CC

Animate CC由原Adobe Flash Professional CC更名得來。2015年12月2日，Adobe宣布Flash Professional更名為Animate CC，并把在2016年1月份發布的版本正式更名為Adobe Animate CC，縮寫為An。這不是一次簡單的改名，而是一次全新的升級，Animate CC將擁有大量的新特性，特別是在繼續支持Flash SWF、AIR格式的同時，還會支持HTML5 Canvas、WebGL，并能通過可擴展架構去支持包括SVG在內的幾乎任何動畫格式。如圖2-1所示，Flash程序版本幾經變遷，其最初的開發者是喬納森·蓋伊（Jonathan Gay,1967—）。

圖2-1 Flash開發者與版本變遷

1993年，喬納森·蓋伊成立了FutureWave Software公司，致力于圖像的研究。1995年，正是互聯網的Web應用蓬勃興起的時期，那時人們已經在單臺計算機上實現了聲音和動畫，在互聯網上，尤其是Web上人們對圖像和動畫的需求逐漸變得強烈。

在此背景下，喬納森·蓋伊公司動畫播放的第一方案問世了，然而它所采用是當時成熟的Java嵌入式播放器，由于Java速度太慢，動畫效果并不令人十分滿意，所以喬納森·蓋伊就再一次投入對FutureWave Software開發和研究，試圖找到一個更方便的動畫制作。最后，Netscape瀏覽器采用了FutureWave效率較好的plug-in API播放方案。在這個動畫軟件SmartSketch Animator正式發行的時候，喬納森·蓋伊又動起了腦筋：SmartSketch這個名字實在沒有什么商業價值，新名字應該重在動畫，而不是繪圖。于是，他把名字改為CelAnimator。又經過長期的深思熟慮后，正式定名為FutureSplash Animator，這也就是現在Flash真正的前身了，當時FutureSplash最大的兩個客戶據說是微軟和迪斯尼。1996年11月份FutureSplash正式賣給Macromedia公司，改名為Flash 1.0。2005年在推出到Flash 8以后，Macromedia又被Adobe公司收購。

隨著網頁設計過去將近20年的歷史演進，有些技術也慢慢地退出市場。智能型行動裝置普及，令透過智能型行動裝置瀏覽網頁的人口也隨之大幅增加，曾經一度幾乎占領全世界所有桌面計算機的網頁互動技術日漸式微。例如，用來觀看SWF格式網頁動畫的瀏覽器外掛播放器Flash Player，因為蘋果公司不愿將其安裝于iPhone、iPad等裝置，以及Adobe公司于2012年8月15日宣布決定不再支持Android裝置的Flash Player，導致Flash Player在智能型行動裝置的市場占有率急速萎縮。而JavaScript這項始于1995年的瀏覽器腳本語言，因為跨平臺、跨裝置及跨瀏覽器的特性，又重回到交互式網站前臺技術的主導地位。

2016年，官方將新版Adobe Flash Professional CC更名為Animate CC，增加了HTML5平臺的Canvas和JavaScript功能，Animate CC為新媒體網頁設計提供了多元化的開發平臺。

Flash不僅僅是通常認識上的動畫制作工具，更是早期網絡互動媒體藝術經常采用的創作媒體。從20世紀90年代末，以Flash為媒體創作平臺的網絡互聯時代，誕生了一批網絡藝術家。像國內的閃客王波和荷蘭視覺藝術家漢·霍格布魯格（Han Hoogerbrugge），都是利用Flash網絡交互平臺進行藝術創作的典范。

王波，網名皮三，他是國內少有的多面手閃客，他在2001年孟京輝的影片《像雞毛一樣飛》、2004年賈樟柯的《世界》中創作了動畫場面，并于2002年在網絡上創作了《連環夢》《Play Me》系列Flash作品。從王波的作品中觀者可以看到思考，看到一種純粹的藝術，可以感覺到一種不同于二維視頻的運動，這正是Flash的獨特魅力。

《動畫無極限》（Animation Unlimited）一書有專門介紹過霍格布魯格，這位視覺藝術家1963年生于荷蘭鹿特丹，并在這所城市的藝術學院學習繪畫。畢業后，霍格布魯格進行了一系列嘗試性的工作，在繪畫、插畫、雕塑等不同媒介中進行探索。1996年，在接觸到互聯網后，他逐漸熟悉了超文本語言和基本的操作流程，他意識到互聯網并不是靜態連環漫畫的最佳媒介。在創作了《公路奔跑者》（Road Runner）和《巴維斯與巴特海德》（Beavis and Butthead）兩部作品時，霍格布魯格開始了這門學科的實驗性探索，1998年應荷蘭電視公司Vprode的邀請，他開始致力于創作系列影片《神經病》（Neurotica,1998—2001），這部網絡版的動畫，運用了實拍形象轉為簡單的GIF的Rotoscope圖像轉描技術，之后轉為使用Flash制作。霍格布魯格還創建了一個在線交互式Flash動畫作品《流動》（Flow）、《酒店》（Hotel）、《指甲》（Nails）。從他的作品我們可以感受到他對這個時代富有生命力的元素的探索。正如他的自述：“通過我所塑造的角色形象化地展現這個時代的精神內涵，而實現這一切的最佳途徑不是語言，而是圖像。”霍格布魯格的Flash交互作品利用一個小胡子中年人的形象，從其肢體語言和生活故事中展現出現代人荒誕的內心世界，如圖2-2所示。

圖2-2 Flash網絡交互藝術家代表人物皮三與霍格布魯格

Flash與漫畫結合，就派生出了hypercomics與webcomics這類網絡超鏈接漫畫的藝術形式。例如，e-merl.com網站上的《鴨子冒險記》（A Duck Has An Adventure）、《空虛的王國》（The Empty Kingdom）等一系列小巧精悍的卡片鏈接式敘事漫畫，以及帕特里克·法利（Patrick Farley）創作的《第一個字》（The First Word, http://www.electricsheepcomix.com/delta/firstword/），都是利用Flash制作視差滾動特效，生成動態漫畫的新穎界面和視覺語言，成功烘托出宏大的主題，如圖2-3所示。

圖2-3 網絡超鏈接漫畫的藝術形式：hypercomics與webcomics

Flash要制作交互作品，就需要用到其腳本語言ActionScript（簡稱AS）。AS語言是Flash 5之后版本里的內置腳本語言，目前已發布的AS共有3個版本。Flash 5和Flash MX內的AS版本為1.0, Flash MX 2004和Flash 8內的AS版本為2.0, Flash CS3 Professional內采用的是AS 3.0。為了保持軟件兼容性，Animate CC以前的版本都可以正常打開并運行老版本的Flash文件。AS 1.0和AS 2.0的區別不是很大，因為AS 1.0內的編程命令在AS 2.0內都可以正常使用，AS 2.0雖說引進了新的編程思想，但也可以理解成對AS 1.0功能上的擴展。之后推出的AS 3.0版本跟前者具有根本性的變化，除了對功能上的擴展以外，還對語言架構做了重大調整，要注意在Animate CC中只支持AS 3.0版本，很多用AS 1.0和AS 2.0命令編寫的Flash案例工程，到了AS 3.0里不能兼容，需要手動轉換程序代碼。此外，在Animate CC中提供了Flash AS 3.0轉換成HTML5的功能，也需要手動轉換代碼。

下面我們創建一個Animate CC AS 3.0工程，講解Flash模塊的常用功能。首先要單擊File→Import to Library命令，將圖像聲音等素材導入資源庫。Flash模塊中動畫幀常用快捷鍵如下：F5增加幀，F6轉為關鍵幀，F7轉為空白關鍵幀。我們在時間線上設置圖片的兩個關鍵幀動作，右擊，在彈出的菜單中執行Create Classic Tween命令，創建經典的補間動畫，并且可以激活時間線下的Onion Skin（洋蔥皮功能），預覽運動元件的幻影，如圖2-4所示。

圖2-4 在Animate CC中使用Flash洋蔥皮功能查看補間動畫

Animate CC的另一個常用功能就是遮罩，它可以在工具欄使用Rectangle Tool（矩形繪制工具），自定義一塊圖形區域，將遮罩層與動畫圖形層以父子級的方式排列，并右擊激活Mask（遮罩功能），同時要注意鎖定遮罩層與動畫圖形層，才能看到運動圖像在遮罩范圍顯示的效果，如圖2-5所示。

圖2-5 Animate CC中使用Mask遮罩功能

由于Adobe Animate CC中采用的是Action Script 3.0版本的代碼，我們不能照搬以前版本的編程語句，不過思路是可以借鑒的。單擊F9鍵，進入Actions動作設置窗口，可以打開編程輔助工具Code Snippets代碼片段調用器。此案例中，我們創建按鈕和幀標簽，通過編寫觸發事件的代碼，控制動畫在時間線上的跳轉，以及場景的切換。AS 3.0代碼舉例如下：

      this.yellow_btn.addEventListener（MouseEvent.MOUSE_OVER, gotoBoard）;
      function gotoBoard（ev: MouseEvent）: void {
      gotoAndPlay（“board”, “Scene 1”）;
      }
      //表示當鼠標經過名為yellow的按鈕時，執行函數gotoBoard，即時間軸跳轉到第一場的標簽名為board的幀，進行動畫播放

具體的AS 3.0代碼可以掃描圖2-6中的二維碼，在本書配套資料對應章節中下載工程文件Narative_Journey2Mordern_AS3_example.fla進行參考。

圖2-6 在Animate CC中使用AS 3.0代碼設置按鈕控制時間幀跳轉

在Adobe Animate CC中如果需要從Flash AS 3.0項目切換到HTML5時，我們可以調用菜單欄Commands命令中的Convert To Other Document Formats轉換文檔類型。AS 3.0項目切換到HTML5類型后，需要手動的調整代碼類型，例如AS 3.0中使用的Stop（），命令到了HTML5中就換成了this. Stop（）；語句。具體代碼可參考配套資料對應章節中的Narative_Journey2Mordern_Canvas_example. fla文件。文檔設置完成后，可以執行File→Publish命令，進行作品發布，如圖2-7所示。

圖2-7 在Adobe Animate CC中將Flash AS 3.0文檔類型切換到HTML5類型

2.1.2 異軍突起的HTML5

HTML的歷史可以追溯到1991年，蒂姆·伯納斯·李（Tim Berners-Lee）編寫了一份叫作“HTML標簽”的文檔，內里包括了大約20個用來標記網頁的HTML標簽。1993年，HTML首次以互聯網草案的形式發布。20世紀90年代的人見證了HTML的大幅發展，從2.0版，到3.2版和4.0版（一年出了兩個版本），再到1999年的4.01版。

隨著HTML的發展，W3C（萬維網聯盟）掌握了對HTML規范的控制權。然而，在快速發布了這四個版本之后，業界普遍認為HTML已經到了窮途末路，對Web標準的焦點也開始轉移到了XML和XHTML上，HTML被放在了次要位置。不過在此期間，HTML體現了頑強的生命力，主要的網站內容還是基于HTML的。

2004年，Opera的伊恩·希克森（Ian Hickson）發起在HTML根本上進行擴展以適應新的Web應用，該發起遭到W3C的拒絕。為了能讓HTML支持新的Web應用，同時克服現有缺點，HTML迫切需要添加新功能，制定新規范。于是Ian Hickson自發構造創建了超文本應用技術工作組，便是WHATWG（Web Hypertext Application Technology Working Group）。WHATWG開始專門針對Web應用開發新功能，這被WHATWG認為是HTML中最薄弱的環節。Web 2.0這個新詞也正是在那個時候被發明的。Web 2.0實至名歸，開創了Web的第二個時代。舊的靜態網站逐漸讓位于需要更多特性的動態網站和社交網站，這其中的新功能真的是數不勝數。

2006年，W3C又重新介入HTML，并于2008年發布了HTML5的工作草案。2009年，XHTML2開發組停止工作。因為HTML5能解決非常實際的問題，所以在規范還未定稿的情況下，各大瀏覽器廠家就已經按捺不住了，開始對旗下產品進行升級以支持HTML5的新功能。這樣，得益于瀏覽器的實驗性反饋，HTML5規范也得到了持續的完善，HTML5以這種方式迅速融入到了對Web平臺的實質性改進中，如圖2-8所示。

圖2-8 HTML5技術發展時間線與主要特性

在眾多HTML5圖形化開發工具中，有Adobe推出的Edge Animate，通過HTML5、JavaScript、jQuery和CSS3制作跨平臺、跨瀏覽器的網頁動畫，其生成的基于HTML5的互動媒體能方便地通過互聯網，特別是兼容移動互聯網進行傳輸。還有一款名為Adobe Muse的輕應用。Muse支持最新的Web標準，包括HTML5和CSS3，其基于AIR平臺，目的是讓設計師把精力放在設計上，讓那些不懂代碼的設計師也可以制作、發布網站。Muse主要包括四大功能：網站規劃、設計、互動性以及網站的發布。除了電腦端安裝版的HTML5開發工具之外，現階段在國內還出現了在線式HTML5設計平臺。例如，基于云計算的HTML5動畫云平臺Mugeda，以及在線編輯互動工具iH5，如圖2-9所示。

圖2-9 HTML5交互設計開發工具

現階段以HTML5為平臺的交互引擎也逐漸增多，新版的Unity 5和Unreal 4引擎都加入了HTML5發布模塊。迷你游戲《圍住神經貓》在微信朋友圈瘋傳，讓即點即玩的HTML5游戲深入人心。此游戲借助于白鷺時代開發的Egret Engine，白鷺引擎是一個開源的、跨平臺的移動交互開發引擎，遵循HTML5標準，解決了HTML5性能問題及碎片化問題。白鷺引擎的動畫模塊具有智能骨骼綁定功能DragonBones Pro。DragonBones誕生于2012年10月，最初是由Adobe公司主導開發設計的一款專用于游戲中骨骼動畫制作的插件，是全球業界公認的最早的骨骼動畫工作流解決方案，并且受到大量游戲開發者、動畫師和設計者的追捧。而在此后，白鷺時代作為HTML5移動游戲新生代企業，接過了DragonBones維護、運營和更新迭代的任務，并在2014年正式將其納入白鷺時代Egret產品序列。

2015年7月，白鷺時代又推出一款全新的免費游戲創作工具Lakeshore，此工具無須編程，全程采用可視化操作。在Lakeshore中，游戲開發者可以實時預覽素材在場景中的布局，使用鼠標單擊、拖曳、拉伸即可完成圖像、聲音等素材的編輯。縮短游戲開發的過程，讓游戲開發省時高效。下面我們介紹一下Lakeshore的熱區鏈接與鼠標跟隨的使用方法。后在動畫元件SpaceMonkey屬性面板中的節點移動，將移動速度設置為200像素/秒，如圖2-14所示。運行Lakeshore，在瀏覽器中可以測試動畫元件在鼠標拖動到新的目標點之后，進行了節點路徑的查找，實現了鼠標跟隨效果。同時我們會發現，當動畫元件到達目標點位置后，跟隨效果會失效，因此需要我們設置一下跟隨的最近處的有效距離。設置為全局實例，然而在Lakeshore2.0.1版本開始，要移除精靈元件Aim的全局實例屬性。在掌握了鼠標跟隨和場景跳轉的技巧之后，我們可以此類推，制作出主場景與其他場景之間的跳轉，如圖2-20所示。

圖2-14 在Lakeshore事件表中設置動畫元件跟隨鼠標移動

圖2-20 在Lakeshore中設置場景之間的跳轉

Step 01 進入Lakeshore1.2.1版本的界面，啟動欄中可以先參看官方的6個經典案例，然后我們在“文件”菜單中選中“新建項目”，并將路徑指定到工程目錄，如圖2-10所示。

圖2-10 在Lakeshore中新建項目工程

Step 02 在Lakeshore的組件面板，分別創建精靈與動畫元件，并將其分別命名為Aim和SpaceMonkey。對于動畫元件，可在序列幀面板加載關鍵幀，并播放觀察動畫狀態，如圖2-11所示。

圖2-11 在Lakeshore中創建精靈與動畫元件

Step 03 在場景中選擇剛才創建的精靈元件，在屬性中添加自定義變量h和v，代表horizontal（橫向）與vertical（縱向）上位移，并在數據類型中選擇number（數字型）；其他兩個類型，string代表字符串，boolean代表布爾型邏輯變量，如圖2-12所示。

圖2-12 在Lakeshore場景中創建自定義變量

Step 04 選擇場景中的精靈元件，在屬性中添加行為。在行為列表中，選中“常用行為”中的“拖曳”，在方向下拉菜單中選擇“任意”，如圖2-13所示。運行Lakeshore，在火狐瀏覽器中查看鼠標拖曳精靈元件的效果。

圖2-13 選擇精靈元件添加拖曳行為

Step 05 在上一步的基礎上，制作角色跟隨鼠標移動。進入MainSceneEventSheet事件表，選擇精靈元件Aim將條件設置為當拖曳結束時，使用添加動作命令，選擇精靈元件Aim設置實例自定義變量h = Aim.x和v = Aim.y，使用添加動作命令，選擇動畫元件SpaceMonkey設置節點移動集為：（Aim.h, Aim.v）。然后在動畫元件SpaceMonkey屬性面板中的節點移動，將移動速度設置為200像素/ 秒，如圖2-14所示。運行Lakeshore，在瀏覽器中可以測試動畫元件在鼠標拖動到新的目標點之后，進行了節點路徑的查找，實現了鼠標跟隨效果。同時我們會發現，當動畫元件到達目標點位置后，跟隨效果會失效，因此需要我們設置一下跟隨的最近處的有效距離。

Step 06 為了設置動畫元件跟隨的有效距離，我們需要添加新的事件，并選擇動畫元件SpaceMonkey，在“選擇條件目標”中選擇“比較到指定點距離”，參數設置中將動畫元件與精靈元件Aim的橫縱坐標的距離設置為小于50像素就觸發事件。當小于兩者距離小于50像素，動畫元件的節點移動速度為0像素/秒，讓兩者保持適當距離，避免跟隨失效；而當鼠標重新拖曳時，動畫元件的節點移動速度指定為200像素/秒，動畫元件開始進行目標跟隨，如圖2-15所示。

圖2-15 在Lakeshore中設置動畫元件跟隨的有效距離

Step 07 可以指定動畫元件默認的，以及到達跟隨目標點之后的自身行進狀態。往前行進可以選擇動畫元件，在屬性面板行為列表中，添加子彈飛行的行為，并設置速度數值，如圖2-16所示，預覽Lakeshore觀察效果。

圖2-16 為動畫元件設置子彈飛行

Step 08 創建新的精靈元件，通過判斷動畫元件與其距離，進行場景或網頁的跳轉。新建場景Earth，并在新建的精靈元件上添加圖片與文字。再在主場景新建一個與動畫元件比較距離的精靈元件AiEarth，并指定圖片。在MainSceneEventSheet事件表中添加條件，條件目標選擇動畫元件，條件列表選擇“比較到指定點距離”，在其參數中，設置動畫元件與精靈元件AiEarth橫縱軸之間的距離小于25像素時執行動作。添加動作，在System系統類型中選擇“跳轉指定場景”（Earth），如圖2-17所示。

圖2-17 通過判斷元件距離跳轉場景

Step 09 要讓場景Earth跳轉回主場景，可以通過定時器和按鈕單擊兩種方法。場景Earth的精靈元件ScEarth屬性中，在行為列表中創建計時器，在EarthEventSheet事件表中設置當場景初始化完成時，精靈元件ScEarth開啟2秒的定時。然后指定新的事件，當精靈元件計時器Timer到達2秒后，跳轉回主場景，如圖2-18所示。

圖2-18 通過設置定時器跳轉回主場景

Step 10 在場景Earth中創建新的按鈕元件Btn_Earth，并在EarthEventSheet事件表中設置，當對象彈起時，跳轉回主場景MainScene，如圖2-19所示。

圖2-19 通過創建按鈕跳轉回主場景

Step 11 提醒一下，在Lakeshore的元件實例屬性中有全局實例的設置。這是一個比較特殊使用方法，假如有三個場景，第三個場景把某個實例設置為全局實例了，而第一個場景進去的時候，也會把第三個場景的全局實例加載進來的。要注意此案例中鼠標拖曳的精靈元件Aim，在Lakeshore1.2.1版本中要在屬性中

對Lakeshore或者Edge Animate這類HTML5平臺設計軟件而言，在電腦端設計完成網頁內容之后，可以選用國內的西部數碼、新網、主機屋等域名和服務器供應商，購買域名與空間。然后使用LeapFTP的這類站點內容上傳工具，或者專業網站設計工具Dreamweaver，將計算機上的網頁站點與媒體信息發送到服務器空間上，建立起自己的網站，如圖2-21所示。采用HTML5制作的頁面，能夠跨平臺播放，在計算機、手機、平板電腦上利用微信等社交媒體進行新型網絡媒體的傳播。

圖2-21 創建域名與空間用FTP的方式上傳網絡站點

2.1.3 交互視頻Interlude

交互視頻，是指通過各種技術手段，將交互體驗融入到線性的視頻的新型視頻。交互視頻風靡于2005年，早期的交互視頻，主要采用Flash技術制作和傳播。隨著寬帶接入速度的提升和多媒體播放及HTML5網絡技術的成熟，交互視頻技術產生革新。如今已經誕生了各種專門設計制作交互視頻的工具，例如本次案例用到的Interlude（https://interlude.fm/），甚至在YouTube上個人也可以很方便地制作交互視頻。

對交互視頻的研究可以追溯到敘事性理論和敘事學，以亞里士多德《詩學》中的敘事學為源頭，借鑒弗萊塔克金字塔學說（Freytag's Pyramid）從故事與情節角度，分析戲劇、小說、影視等文藝創作中普遍的敘事結構和布局模式。交互視頻在敘事修辭上引入了“不可靠的敘述者”（Unreliable Narrator）的概念，打破平鋪直敘，增加未知因素，讓觀眾在迷離的情節線索中，被交互的敘事吸引，產生對交互視頻的不同觀影理解。漫畫家格蘭特·斯奈德（Grant Snider）的作品《過山車的故事》（The Story Coaster）展示了故事如同過山車，環繞跌宕的情節線索構成復雜的故事結構（見圖2-22）。

圖2-22 敘事情節方法圖解

2012年，紅辣椒樂隊（The Red Hot Chili Peppers）推出的MV單曲《環顧四周》（Look Around）使用了交互手法，令當時演藝界和科技領域都為之一震。可以一邊聽歌，一邊拖動鼠標，在滑動頁面中選擇觀看四名樂隊成員在不同場景里的表演，通過單擊場景里的家具，還能觀看樂隊成員拍攝MV時的現場照片。每次觀看《環顧四周》交互MV都會有不同敘述順序和體驗，可以掃描圖2-23中的二維碼在PC平臺上體驗《環顧四周》交互MV。

圖2-23 紅辣椒樂隊的MV單曲《環顧四周》

交互視頻平臺讓用戶和視頻互動起來，用戶在觀看到視頻的某個節點時，可以選擇不同的路線、不同的可能，甚至還能決定視頻有不同的結局。如圖2-24所示，在登錄并且使用諸如Verse（https://verse.com）、Wyzowl（https://www.wyzowl.com）、Vidzor（http://vidzor.com）、Wirewax（http://www.wirewax.com）、Raptmedia（http://www.raptmedia.com），以及本節主要介紹的Interlude這類全球主流交互視頻制作平臺時，通過流媒體視頻+HTML5界面，開發者會安排在某些節點上需要用戶參與的環節，例如單擊屏幕上某些巧妙設置的選項，讓視頻看上去更像是一個可以操作的游戲，將原本的線性結構內容按照樹狀圖的形式展開。總的說來，就是讓一個單線程的內容，變成有開放式結局的多個故事線。

圖2-24 全球主流交互視頻制作平臺

當鮑勃·迪倫1965年發行《像一塊滾石》（Like a Rolling Stone）專輯的時候，他或許不會想到在50年之后，觀眾能夠以一種有趣的方式體驗這首歌。2013年11月，在美國有這樣一段視頻被廣泛傳播：在一個用戶能夠通過單擊選擇不同頻道的電視界面里，屏幕上的主播和其他演員，例如對話中的男女主人公、進行獨白的卡通小貓以及蓄著長胡子的歷史學教授都在以自己的方式唱著《像一塊滾石》。無論聲音還是口型都很合拍，巨大的反差為這組視頻帶來了有趣的滑稽感。這一互動視頻不僅被分享到Facebook、Twitter等各類社交平臺上，也被媒體廣泛報道。該交互視頻由來自以色列的創業公司Interlude制作完成。事實上，它并非僅供娛樂，而是為哥倫比亞唱片公司近來發行的鮑勃·迪倫的完整唱片收藏第一輯進行促銷。Interlude提供的互動視頻展示了一種獨特、有趣、高度參與的體驗。2016年7月，Interlude在Faceboook上宣布之前的Treehouse（樹屋）已升級為ekostudio平臺（見圖2-25）。

圖2-25 在線交互視頻制作平臺Interlude

Interlude的靈感來自創始人Yoni Bloch現實生活中的體驗。在2010年這家公司誕生之前，他已經是以色列知名的吉他手和歌手。當他決定為自己的新曲制作MV的時候，便想到能否讓用戶參與進來，而不僅僅是被動觀看。Interlude可以讓使用者制造視頻“羅生門”，創始人Yoni Bloch談到開發Interlude的靈感時說：“我們想做的就是讓人們一遍一遍地播放，總感覺自己錯過了什么，每個人講述這個故事時都會有所不同，這會令他們覺得自己參與了部分創作過程。Interlude制作的Coldplay樂隊的《幽靈故事2014現場版》（Ghost Stories Live 2014）的動畫版本，采用交互敘事講述了一段感人的愛情故事（見圖2-26）。

圖2-26 Interlude代表作Coldplay樂隊的《幽靈故事2014現場版》

下面具體講解一下Interlude平臺的制作要點。本次案例所使用的的動畫視頻素材源于原創動畫短片《海螺之城》（Conch City）（見圖2-27）。《海螺之城》的創作背景植根于筆者的出生地青島，在這座城市三十年的生活中，筆者感受著青島這座城市老城區的發展與變遷。記憶中的特色街道和富有時代感的城市符號，漸漸隨著那個時代遠去。這座“海螺之城”更像是動畫創作中的主人公，見證著市井的變化與時間的流逝。之所以稱青島為海螺之城，是因為當地起伏的地勢和拐彎抹角的老巷，還有像波螺油子這樣螺旋攀升的石板老路，以及海邊望火樓中盤旋的階梯等讓人感覺到仿佛生活在一個巨大的海螺殼之中。

圖2-27 動畫短片《海螺之城》

以上諸多因素，激發了筆者從2011年起歷時四年創作動畫《海螺之城》。片中的背景音樂，參考了那首耳熟能詳的《大海啊，故鄉》中的旋律，融入了布魯斯曲風吉他和口琴。故事情節描述了主人公波螺油子，從小時無憂無慮地在海螺之城玩耍，到三十而立成人后在城市新區生活的生存狀態。片中角色造型使用了海洋生物的特征，例如魚頭、章魚發須等。片中使用吊車、地鐵燈箱廣告、拆遷中的螺城等元素反映了隨著城市的發展，兒時記憶中的生活符號的變遷；動畫意在回味海螺之城所蘊含的美好情節與記憶。城市見證著歷史的變遷，隨著時代的洪流，記憶中的事與物，很多還沒有來得及紀錄，便已經淡出了人們的視野。面對曾經的人與境，用動畫的形式來再現腦海中難忘的經典情景，無疑是一種絕佳的手段。《海螺之城》的動畫創作立足當下的城市與人的現狀，進行了“未來考古學”式的紀錄與反思。在動畫影片的觀摩與創作中，可以逐漸體悟到，城市其實才是影片中最大的主角。從人文關懷的角度，用動畫的手法再現記憶中的人與境。本次案例中將《海螺之城》的情節通過Interlude在線平臺，重新組織編排，以交互敘事的方式加以呈現。

Step 01 在制作交互視頻前，可以采用思維導圖的形式，借助iMindMap這類用可視化節點導圖的工具，輔助進行敘述情節與故事脈絡的結構分析與搭建（見圖2-28）。

圖2-28 使用iMindMap構思交互情節與敘事結構

Step 02 可以使用Interlude平臺提供的Treehouse（樹屋）上傳工具，將視頻素材在串接剪輯前上傳到Interlude的Library素材庫中（見圖2-29）。

圖2-29 使用Treehouse上傳視頻素材

Step 03 在Interlude中對用于情節交互跳轉的按鈕，可在其Elements（元素）的Style（風格）面板選擇Image Button（圖片按鈕）放置到畫面中，并使用Library（素材庫）中圖片替換原圖。選擇圖片按鈕在Actions（動作面板）中設置按鈕單擊后，跳轉的視頻節點或瀏覽的網頁地址（見圖2-30）。

圖2-30 在Interlude中創建圖片按鈕

Step 04 在Interlude中選擇工具面板中的節點類型，除了普通的Node節點，Interlude還提供了Parallel Node（平行節點）（見圖2-31），專門提供在時間上并行發生的事件之間的跳轉（平行節點的作用是切換同時進行的事件）。

圖2-31 在Interlude中創建敘事節點設置情節脈絡

Step 05 如果想在Interlude直接利用視頻里的某些造型元素作為熱區進行單擊鏈接，可以先在Photoshop這類平面軟件中畫出帶有Alpha透明通道的線框圖形，導入Library（素材庫），然后在Elements（元素）欄單擊Add Button（添加按鈕），并在其Style（風格）面板選擇Image Button（圖片按鈕）放置到畫面中，并使用帶有Alpha透明通道的線框圖形替換原圖。在按鈕的動作（Actions）面板，設置跳轉的場景節點（見圖2-32）。

圖2-32 在Interlude中導入Photoshop制作的透明線框用于顯示選區

Step 06 2016年7月，Interlude團隊將原先的Treehouse升級為ekostudio創作平臺，對于原先的Treehouse的項目，用戶可以在線進行升級轉換。當完成自己的Interlude交互視頻制作后，可以選擇PREVIEW（預覽）后，再單擊PUBLISH MANAGER（發布管理器）中的“PUBLISH PROJECT”按鈕，進行項目發布（見圖2-33）。

圖2-33 Interlude新版的ekostudio平臺升級與作品發布