第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平台升级与作品发布