带你读《多媒体技术教程(原书第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对两幅屏幕投影进行了比较。

image.png

图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)image.png(1-R,1-G,1-B)(2.1)
这样的话,不仅仅颜色在某种程度上是“相反”或者说“相对”的(当然这和艺术家们所指的“相反”是不同的),而且背景和文本也如此,背景的颜色越深,则文本的颜色越浅,反之亦然。
在这个VB程序中,用户可以通过滑动条来控制背景颜色的变化,同时文本的颜色也将根据互补色原理做相应的改变。用户也可以通过单击背景打开色彩选择器来选择色彩。
如果你认为可以有更好的色彩搭配,那么单击文本,打开和背景无关的色彩选择器来挑选颜色(文本也可以被编辑)。稍做实验你就会发现,某些颜色的搭配确实有更好的效果——例如,粉红色背景和森林绿的前景,或者绿色背景和淡紫色前景。图2.2是这个程序运行的截图。
图2.3是一个调色板(color wheel),在这里相对的颜色定义为(1-R,1-G,1-B)。艺术家的调色板和这个调色板有所不同,因为艺术家的调色板更多是源于艺术感觉,而非某种算法。在传统的艺术家调色板中,黄色和品红色相对,而非图2.3中的蓝色;蓝色和橙色是相对的。

image.png

5.分镜动画
动画中经常使用分镜(sprite)。例如,在Adobe Director(原名为Macromedia Director)中,分镜是指任何资源的实例化。然而,分镜动画的基本思想非常简单。假设我们已经创作了一个动画图,如图2.4a所示,可以很容易地得到1位(黑白)的掩模M,如图2.4b所示,并得到如图2.4c所示的分镜S。

image.png

现在我们可以将这个分镜覆盖在彩色的背景B上,如图2.5a所示。我们要做的是先将B和M做“与”运算,然后将得到的结果和S做“或”运算,最终的结果如图2.5e所示。将这些简单操作的组合以一定的帧速率执行,就可以生成一个简单的二维动画。这个动画可以移动分镜,但并不改变它的外观。
6.视频的切换
视频切换可以有效地表示与下一部分内容之间的变换。视频切换是表示“场景变换”的语义手法,并经常带有语义信息。常用的切换类型包括:切变、擦除、溶解、淡入和淡出。
切变,顾名思义,是指两个连续的视频帧之间的图像内容产生剧烈变化。这是最简单也是最常用的切换方式。
擦除是用另一段视频中的内容来代替可视区域的像素。如果两个视频的边界在屏幕中缓慢移动,那么第二段视频将逐渐替代第一段视频。擦除的方式有从左到右、从右到左、垂直、水平,类似于虹膜打开,或钟表指针掠过的方式等。

image.png

溶解是用两段视频的混合来代替原图中的像素,以实现两段视频之间的渐变。淡出是使用黑(白)来代替视频,淡入则相反。大多数的溶解可以归为两类,分别对应于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运动。所以,对于随时间线性变化的切换来说,image.png
所以对于任意时刻t,情况如图2.7a所示。视区有它自己的坐标系统,x轴的范围是从0到xmax。我们将在视区内填入像素。对于每一个x(和y),我们必须确定从那段视频中获得的RGB值以及从什么位置获得像素值——也就是左边视频坐标系统中的x位置。根据视频的特点,左边视频帧的图像是不断变化的。

image.png


image.png

假设对y的依赖性是隐式的。在任何事件中,我们使用和源视频相同的y值。那么对于红色通道(蓝色通道和绿色通道也是类似的),R=R(x,t)。假设我们确定像素值来自于VideoL,那么非运动视频中的x坐标xL=x+(xmax-xT),其中x是我们需要在视区中填充的位置,xT是切换边界的位置,xmax是任意一帧中的最大像素的位置。
为了说明这一点,我们可以从图2.7b中看到,可以使用距离x与xmax-xT的和来计算VideoL坐标系统中的位置xL。
image.png代入,我们可以得到如图2.8所示的伪代码。在图2.8中,如果像素点来自VideoR而非VideoL,那么也很容易得到公式中相应的变化。

image.png

本章后面的练习包含对视频切换的建议。作为一名计算机科学家或工程师,你应该能够轻松构建自己的视频切换方式,而不是依靠菜单中的可选项目。
投身于多媒体领域,解决有趣的、具有挑战性的甚至前人无法解决的任务!

2.3 数据压缩

使用多媒体的最明显和最重要的挑战之一是数据压缩。表2.1显示了标准清晰度和高清广播视频的值。显然,我们需要更好和速度更快的数据压缩方法,以避免在我们试图分享数据或使用磁盘作为输入输出设备时,由于数据太大导致的存储和网络问题。

image.png

究竟需要压缩多少?实际上,这取决于应用程序、计算机的显示能力,以及可用流(每秒位)的带宽,并且还要查看解压缩的结果。
在常见的JPEG图像压缩标准中,压缩量由Q值控制,范围是0~100(详见9.1节)。图像的“质量”在Q=100时是最好的,在Q=0时是最差的。
图2.9a显示了可以捕获全精度图像的数码相机拍摄的原始未压缩图像,完全没有数据压缩。该图像有364行和485列的像素数据(从2424减少3232,以更好地观察Q的影响);所以在RGB像素值的每一个中都具有8位精度,总文件大小为364×485×3=529620字节(不包括文件头信息,其存储行和列的尺寸)。

image.png

在表2.2中,我们使用JPEG压缩中不同的质量因子来得到一系列结果。事实上,我们可以大幅地缩小文件的大小,但是Q值越小,生成的图像越差。

image.png

如图2.9所示,虽然Q=25的效果并不是那么糟糕,但如果我们坚持将质量因子降低至Q=5,最终会得到不可用的图像。这个演示向我们展示了一些有趣的东西:与黑白(即灰度)相反的颜色部分相对于高压缩比(即压缩后的数据量很少)可能没那么显著。在第9章中,我们将看到颜色和灰度本质上的区别。
压缩确实能缩短传输时间,但也要付出一定的代价。JPEG压缩可以使压缩比达到25∶1,质量损失很小。对于视频压缩,第11章中提出的MPEG视频压缩标准可以产生100∶1的压缩比,同时保持合理的质量(见图2.9)。
但是,让我们来看看图像和视频处理在CPU方面的开销是多少。假设我们有一个图像,我们希望它能变暗2倍。以下代码片段是这个操作的伪代码:

image.png

在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”得到。

image.png

图2.11显示了这个视频的YouTube页面。它还提供了YouTube推荐具有相似标题和标签的视频列表。理想情况下,我们期待它与其他有关Edison的留声机或多媒体教材的视频相关联。图2.11所示的结果不完全是我们所期望的,但它们确实有一定的联系。注意,这里只有标题和标签的文本用于关联视频,而不是视频内容本身。事实上,多媒体内容检索和推荐仍然相当困难,我们在第20章将回顾一些基本技术。

image.png

就像我们将在第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下拉框表示目前的视频帧率为每秒一帧。

image.png

要对视频进行“编译”,使用“Seguence→Render Work Area”并将项目保存为.ppj文件,若要保存,则点击“File→Export→Movie”。保存文件时你需要做一些选择,包括如何以及用何种格式来保存视频。图2.13显示了项目的选项。包含编解码方式的对话框是由编解码生产商提供的,我们可以单击Configure按钮来得到。压缩编解码(压缩解压缩协议)通常位于视频采集卡的硬件上。如果你选择了需要硬件支持的编解码算法,那么别人的系统就可能无法播放你的数字视频,40一切工作都是徒劳。

image.png
image.png

也可以将图像插入到轨道中。我们可以选择切换方式让图像在最终的视频窗口中渐渐出现或渐渐消失。为了实现这一目的,我们需要建立一个“掩模”图像,如图2.14所示。这里我们导入了Adobe Photoshop的层次图像,它具有在Photoshop中创建的Alpha通道。

image.png

接着,在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(数字键盘边上的回车键,并非通常意义上的回车键),这将清除舞台窗口之外的所有窗口,并开始电影的播放。

image.png

另外两个主要的窗口是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显示了渐变的分镜。

image.png

另一类广泛使用的简单动画形式称为调色板动画(详见3.1.7节)。如果图像是8位的,那么在颜色査找表中循环搜索或系统地对查找表的条目进行替换可以得到非常有趣(或奇异)的效果。
Score窗口的重要特性包括通道、帧和播放头。播放头表示我们在乐谱中的位置,单击乐谱中的任意位置将对播放头重新定位。通道是乐谱中的行,可以包括可见媒体的分镜实例。这些编号的通道又称为分镜通道。
在Score窗口的顶端是用来控制调色板、速度、切换和声音的特效通道。图2.17显示了Score窗口中的这些通道。在分镜和特效通道中,帧被水平编号。和传统电影一样,帧是影片中的一个独立单元。我们可以通过修改每秒的帧数来控制影片的播放速率。

image.png

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中的链表类似:每个元素都包含两个用冒号隔开的值。每个属性前都有一个数字符号。例如,下面的语句产生了两个规定分镜坐标的属性链表:

image.png

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界面。

image.png

5.符号
符号可以由其他符号组成,或通过绘制和导入得到。Flash可以向符号库中导入多种音频、图像或视频格式。符号可以有以下三种行为:按钮、图形或电影。符号(例如一个按钮)可以使用工具窗口来绘制。49
6.按钮
为了创建一个简单的按钮,可以利用按钮行为创建一个新符号。时间轴窗口应该具有四个关键帧:up、down、over和hit。这些关键帧显示当特定动作发生时按钮的不同外观。只有up关键帧是必需的,它也是默认的,其他关键帧都是可选的。可以按如下方法绘制按钮:选择工具窗口中的矩形工具,然后将一个矩形拖曳到舞台中。
为了使按钮的外观能够在事件触发时发生改变,我们可以通过单击相应的关键帧来创建按钮图像。在至少定义一个关键帧之后,我们就完成了一个基本的按钮,尽管此时尚未添加任何动作。动作将在下面的“动作脚本”部分加以讨论。
利用其他符号来创建符号和创建场景类似,也就是将所需的符号拖曳到舞台中。这将实现通过简单符号来创建复杂符号。
7. Flash动画
可以通过在符号的关键帧之间生成细微的差别来获得动画。在第一个关键帧中,我们可以把要产生的动画符号从库中拖曳到舞台上。然后插入另一个关键帧,使符号发生变化。这个过程可以不断重复。尽管这个过程比较耗时,但比其他动画技术具有更多的灵活性。Flash同样支持以其他更简单的方式创建特定的动画。渐变可以生成简单的动画,这种方式可以自动完成关键帧之间的变化处理。
8.渐变
渐变有两种形式:形状渐变和运动渐变。形状渐变可以用来创建一个形状,该形状会随着时间改变为其他形状。运动渐变则允许你在舞台中的不同关键帧中的不同位置放置一个符号。Flash自动地在起始点和结束点之间填充关键帧。更高级的渐变可以对路径和加速度进行控制。运动渐变和形状渐变结合在一起可以获得其他的效果。
掩模动画涉及对掩模层的操作,掩模层是一个选择性地覆盖其他层的一部分的图层。例如,为了获得爆炸效果,可以使用掩模来覆盖爆炸中心外的其他所有区域。形状渐变可以扩大掩模,50这样就可以看到整个爆炸效果了。图2.19显示了加入渐变效果前后的场景。

image.png

9.动作脚本
动作脚本(ActionScripts)可以用于触发事件,如移动到不同的关键帧或是让影片停止播放等。动作脚本可以附加到关键帧或附加到关键帧的符号上。右键单击符号并在列表中按下Actions可以修改符号的动作。类似地,通过右键单击关键帧并在弹出部分按下Actions,就可以将动作应用到关键帧上。此时将会出现“Frame Actions”(帧动作)窗口,左边是所有可用动作的列表,右边是当前已被应用的动作标记。动作脚本可以分为6类:基本动作、动作、运算符、函数、属性和对象。图2.20显示了帧的动作窗口。

image.png

基本动作(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),我们可以调用一个过程来将图像定位在路径位置上,并且运动是在视频的顶部发生。

image.png

5.对于图2.8中的滑动切换,解释我们如何得到非运动的右边的视频RR中x的表达式。
6.假设我们希望实现一种视频切换方式:第二段视频将第一段视频覆盖,并通过一个扩散的圆圈慢慢显现(类似于相机的光圈),如图2.22所示。写出公式,从两段视频中获得正确的像素点以实现这种功能。只需写出红色通道的答案即可。

image.png

7.现在假设我们希望实现一种视频切换方式,第二段视频仍将第一段视频覆盖,并通过一条运动的半径慢慢显现(如钟表的指针),如图2.23所示。写出公式,从两段视频中获得正确的像素点以实现这种功能。只需写出红色通道的答案即可。

image.png

8.假设你希望实现一种波动的效果,如图2.24所示。用与x有一定偏移量的值来代替x处的值就可以得到这种效果。假设图像的大小为160×120像素。

image.png

(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) 以上部分构成了实验的基本部分。你可以进一步地改进你的作品,不过千万不要因此而废寝忘食啊!

参考文献

image.png

相关实践学习
Serverless极速搭建Hexo博客
本场景介绍如何使用阿里云函数计算服务命令行工具快速搭建一个Hexo博客。
相关文章
|
7月前
|
编解码 监控 C++
C++音视频编程探秘
C++音视频编程探秘
237 1
|
Web App开发 编解码 安全
音视频绕不开的话题之WebRTC
闲来无事,我们今天探讨下音视频绕不开的一个话题:WebRTC。WebRTC之于音视频行业,无异于FFMpeg,可以说WebRTC的开源,让音视频行业大跨步进入发展快车道。
190 0
|
1月前
|
前端开发 JavaScript 数据处理
前端界的宝藏技术:掌握这些,让你的网页秒变交互神器!
【10月更文挑战第31天】前端开发藏有众多宝藏技术,如JavaScript异步编程和Web Components。异步编程通过Promise、async/await实现复杂的网络请求,提高代码可读性;Web Components则允许创建可重用、封装良好的自定义组件,提升代码复用性和独立性。此外,CSS动画、SVG绘图等技术也极大丰富了网页的视觉和交互体验。不断学习和实践,让网页秒变交互神器。
28 2
|
7月前
|
存储 编解码 算法
【软件设计师备考 专题 】媒体系统基础知识,多媒体设备的性能特性,常用多媒体文件格式
【软件设计师备考 专题 】媒体系统基础知识,多媒体设备的性能特性,常用多媒体文件格式
148 0
|
4月前
|
开发者 图形学 API
从零起步,深度揭秘:运用Unity引擎及网络编程技术,一步步搭建属于你的实时多人在线对战游戏平台——详尽指南与实战代码解析,带你轻松掌握网络化游戏开发的核心要领与最佳实践路径
【8月更文挑战第31天】构建实时多人对战平台是技术与创意的结合。本文使用成熟的Unity游戏开发引擎,从零开始指导读者搭建简单的实时对战平台。内容涵盖网络架构设计、Unity网络API应用及客户端与服务器通信。首先,创建新项目并选择适合多人游戏的模板,使用推荐的网络传输层。接着,定义基本玩法,如2D多人射击游戏,创建角色预制件并添加Rigidbody2D组件。然后,引入网络身份组件以同步对象状态。通过示例代码展示玩家控制逻辑,包括移动和发射子弹功能。最后,设置服务器端逻辑,处理客户端连接和断开。本文帮助读者掌握构建Unity多人对战平台的核心知识,为进一步开发打下基础。
142 0
|
Web App开发 编解码 小程序
即时通讯技术文集(第24期):音视频WebRTC好文合集 [共20篇]
为了更好地分类阅读 52im.net 总计1000多篇精编文章,我将在每周三推送新的一期技术文集,本次是第 24 期。
78 0
|
移动开发 开发框架 前端开发
即时通讯技术文集(第13期):Web端即时通讯技术精华合集 [共15篇]
为了更好地分类阅读52im.net 总计1000多篇精编文章,我将在每周三推送新的一期技术文集,本次是第13 期。
136 0
|
5G 程序员 定位技术
IM开发者的零基础通信技术入门(十):零基础,史上最强5G技术扫盲
那么作为IM开发者,或者移动端开发者来说,提前了解5G技术显然是很有必要的。那么什么是5G技术?技术原理是怎么样的?5G技术将带来哪些技术革新?本文将以零基础的应用程序开发者为阅读对象,帮你找到这些问题的答案。
138 0
IM开发者的零基础通信技术入门(十):零基础,史上最强5G技术扫盲
|
Web App开发 移动开发 编解码
多媒体前端技术入门指南
随着B站、抖音、快手、淘宝直播等直播视频平台的快速崛起,前端衍生出了多媒体技术方向,各公司的传统前端团队里陆续出现了一支新军:Web多媒体团队。光看团队Title,这应该是一个拥有前端×多媒体交叉领域稀有技能的群体。阿里巴巴内部也存在众多Web多媒体团队,在内部我们针对新人整理了一份多媒体前端技术入门指南,今天将这份入门指南也对外分享出来,让大家了解我们近几年在该领域有哪些方向的工作,有哪些实践和落地,本文将从以下几个方面带着大家一窥究竟:
多媒体前端技术入门指南
|
存储 弹性计算 监控
阿里云多媒体解决方案:让多媒体创作变得简单|学习笔记
快速学习 阿里云多媒体解决方案:让多媒体创作变得简单
174 0