首页 论坛 江湖 活动 专题 求职

搜索

  •  

悬赏专题

专题导航

在Web页面中添加视频

出自9RIA.com WIKI

跳转到: 导航, 搜索

原文:http://www.adobe.com/devnet/dreamweaver/articles/add_video.html

作者:David Gassner 翻译:rainfly 更新于:2009年2月25日

点击此处查看或参与本主题讨论吧^_^：点击此处查看或参与讨论吧^_^

目录

说明

本教程将教给你如何把FLV格式的视频发布到Web页中。本教程中需要用到Adobe Media Encoder, Adobe Dreamweaver CS4和Adobe Flash CS4 Professional。

你用摄像机拍摄的(或者是从亲戚、朋友、同事那收到的)视频的最初文件格式是由摄像机或视频编辑软件(如Adobe Premiere Pro CS4)决定的。这些原始视频文件并不适合在互联网上传播。它们太大了，因为它们本来是设计成通过DVD或其他介质传播的。要想在互联网上发行，这些文件必须转换成用户容易下载和观看的格式。Flash和Dreamweaver可以完成这些工作，再加上几乎所有的网民都装了Flash Player，使用这个软件就可以观看视频。

通过本教程你将学会如何完成在web站点上创建和发布视频的两个关键任务：

  • 使用Adobe Media Encoder把原始视频转换成FLV格式的文件，这是一种压缩的格式，因此适用于网络传输。
  • 然后使用Dreamweaver把处理后的视频文件添加到Web页中。

当然，你也可以使用Flash创建一个更好的视频界面。你可以先创建一个标题画面，然后使用一个过渡效果从标题画面切换到视频画面。最后，把这个影片文件跟支持全屏显示的HTML页面一同发布出来，再把结果整合到Dreamweaver中的web页面里就可以了。

需求

要完成本教程演示的任务，你需要下列软件和文件：

Dreamweaver CS4
Flash CS4 Professional
示例文件

前提知识

本教程是针对那些使用Dreamweaver管理过web站点的人，包括新建站点和配置它然后把文件传到服务器上。更多关于这方面的知识，请查看使用Dreamweaver的站点。

你不需要有使用Flash和Adobe Media Encoder的经验。本教程用到一个使用Adobe Premiere Pro CS4生成的示例视频文件，当然，这里你不需要了解该产品如何使用。

安装示例文件

在开始学习之前，下载并解压homewebsite.zip。这个文档里有一个名字是homewebsite的文件夹，它里面包含下面这些资源:

  • 网站入口文件，包括两个已经预留了显示视频位置的页面。
  • AtTheWaterPark.avi，我们将把它转换成在web站上传播的文件。

使用Adobe Media Encoder生成一个FLV文件

Adobe Media Encoder使用一个叫做编码的过程把原始视频文件压缩成适用于互联网传播的格式。下面你将学会如何完成如下工作：

  • 打开Adobe Media Encoder
  • 选择你想要编码的视频文件
  • 配置并完成编码过程，生成用于发布的FLV文件

使用Adobe Meida Encoder

可以通过Windows系统的开始菜单或者通过Mac OS X的应用程序文件夹打开Adobe Media Encoder。

说明：你也可以通过Creative Suite软件打开Adobe Media Encoder，包括Flash和Aodbe Premiere Pro。

对视频文件编码需要花费些时间。总的需求时间取决于视频文件的大小、你要编码的格式和你电脑的可用资源。Adobe Media Encoder允许把多种格式的视频源文件添加到待编码队列中，可以针对每个编码任务进行配置，然后再开始编码。接下来，编码任务就会一个接一个的执行直到全部完成。

按照下面的步骤把原始视频文件添加到待编码队列中：

  1. 选择File > Add in Adobe Media Encoder。
  2. 找到示例视频文件夹
  3. 选择文件AtTheWaterPark.avi

说明：你也可以从Windows资源管理器(Windows平台)或者查找(Mac OS X)把视频文件拖到队列中。

这样视频文件就添加到编码队列中了。

选择输出格式

把视频文件添加到队列中后，接下来就要选择输出格式。Adobe Media Encoder允许你按下列格式输出视频(如图一)：

  • 用于Adobe Flash Player的Adobe FLV | F4V
  • 用于Apple iPod，3GPP移动手机，Sony PSP及其他设备的H.264

fig01.jpg

图1.选择一种输出格式

如果你安装了Adobe Premiere Pro,你也可以选择下面的格式：

  • H.264 Blu-ray
  • 针对CD的MPEG-1(仅限Windows系统)
  • 针对DVD的MPEG-2(仅限Windows系统)
  • Windows媒体文件(仅限Windows系统)
  • Apple QuickTime(Windows用户必须安装了QuickTime播放器才能把把视频编码成QuickTime格式。)

接下来选择能够适于Flash Player的输出格式：

  1. 点击Format列的按钮
  2. 选择FLV | F4V

Adobe Media Encoder提供了多种被称为预置的预先定义好的配置文件，这些文件包含按次序组合起来的多种配置。按下列步骤选择一种预置：

  1. 点击Preset列的按钮
  2. 选择FLV-Web Medium(Flash 8 and Higher),如图二所示。

fig02.jpg

图2.选择一种预置

当你选择Web Medium配置时，那么视频的默认尺寸是360像素宽 X 264像素高。其他默认尺寸包括：

  • Web Large(640像素 X 480像素)
  • Web Small(328像素 X 240像素)
  • Web Modem(164像素 X 120像素)

使用自定义的导出设置

选择了预置之后，你可以自定义设置。按照下面的步骤打开导出设置对话框：

  1. 点击待编码序列并选中AtTheWaterPark.avi
  2. 选择Edit > Export Settings.

    3. 当显示出导出设置对话框时，它只是显示当前选择的预置内容，包括输出文件名和一些已经设定的信息汇总。如果你仅仅看到这些信息，那么你应该展开更多可用设置。

  3. 点击高级模式按钮(图3)

fig03.jpg

图3.点击高级模式按钮显示自定义编码选项

导出设置对话框在高级模式下有5个选项：

  • Filters
  • Format
  • Video
  • Audio
  • Others

本文主要描述那些影响最终视频文件大小和应该使用哪个版本的Flash Player观看视频。对于所有可以自定义的配置的描述，请查看Adobe Meida Encoder 在线帮助.

选择输出格式

如图4所示，在Format选项卡，把Multiplexing项设置成FLV或者F4V。(Multiplexing的意思是编码过程把视频和音频通道整合到一个流中。)

fig04.jpg

图4.选择一种Multiplexing选项

根据你选择的编解码器(将在后面介绍)，FLV文件需要Flash Player 7或更高，或者 Flash Player 8或更高版本。F4V文件，就是H.264视频，需要Flash Player 9,0,115或更高。

了解不同Flash Player版本的大概使用情况(安装了特定或更高版本的播放器的用户占的百分率)对决定你的视频使用哪个版本的Flash Player是很有帮助的。更多信息，请查看Adobe网站上的Flash Player Version Penetration。

例如，截至到2008年9月(也就是离本文最近的一次调查)，美国和加拿大大约90%的电脑用户安装了9,0,115及更高版本的Flash Player，因此，要观看F4V文件不需要安装附加软件了。与此相对的是，超过99%的用户安装了7或更高的Flash Player，超过98%的用户安装了8 或更高版本的Flash Player。在本教程中，将创建一个需要Flash Player 8或更高版本的视频文件，这样将使比按新的视频标准更多的观众可以观看视频。

按下列步骤重新选择格式：

  1. 点击Format选项卡。
  2. 把Multiplexing设置成FLV。

设定视频选项

Video选项卡中的选项将影响最终视频文件的大小和品质。首先选择一种编解码器，如图5所示。

fig05.jpg

图5.选择一个编解码器

编解码器是用来对视频文件进行编码和解码的软件。Adobe Media Encoder包含如下用来生成FLV的编解码器：

  • Sorenson Spark生成比较大和低品质的FLV文件，但是可以使用Flash Player 7观看。
  • On2 VP6 生成的视频可以用Flash Player 8或更高版本的播放器观看。这些文件品质更高且文件占用空间更小。用这个编解码器生成的复合视频也支持alpha通道，比如使用绿屏或者其他中性颜色背景制作的视频，可以发布成透明背景的。

说明当你选择F4V格式时，Adobe Media Encoder使用MainConcep H.264视频编解码器。

按照下列步骤选择一个编解码器：

  1. 点击Video选项卡
  2. 选中On2 VP6

视频的显示尺寸直接影响到最终文件的大小：小的显示尺寸的视频文件占用空间更小，大的显示尺寸的视频文件占用的空间更大。你可以自己设定显示尺寸，但是应该保持视频的宽高比率。

视频的比特率对品质和大小也有影响。高的比特率会有更高的品质，同时也导致更大的文件。

按下列步骤自定义视频尺寸和比特率:

  1. 选择 Resize Video
  2. 选择Constrain Width/Height (看图5).
  3. 点击Frame Width[Pixels]旁边的带下划线的数字，并把它改成400，然后按下Tab键。你会看到Frame Height[Pixels]自动变成了293.
  4. 找到比特率设置部分。这里比特率设置成呢个默认的600，估计文件大小(显示在Cancel和OK按钮附近)为1MB。

设定音频选项

如图6所示，音频选项卡中的选项可以选择音频编解码器并设置相关选项。

fig06.jpg

图6.设定音频选项

使用Sorenson Spark或者On2 VP6生成的FLV文件总是使用MPEG Layer 3(MP3)音频编解码器。MP3编解码器有如下音频编码选项：

  • 输出通道可以设置成Mono或Stereo。如果你的音频使用单通道(比如，使用单个麦克风录制的声音)，选择Mono可以减少文件大小。如果声音是立体声录制的，那么保持这个设置会得到更好的音频体验。
  • 比特率决定音频品质。同视频比特率一样，更高的音频比特率的结果是文件更大和更好的品质。如果你的音频是有人声组成，或是其他非音乐声音，你可以降低比特率(比如降到48kbps)而不会对品质造成太大影响；如果包含高品质音乐，需要更高的比特率。

按照下列步骤配置你的音频设置：

  1. 点击Audio选项卡
  2. 把Output Channels设置成Stereo
  3. 把Bitrate[kpbs]设置成96
  4. 点击OK来关闭导出设置对话框

生成视频文件

设置好你的视频输出配置后，按下列步骤选择本地位置和最终视频文件名称：

  1. 点击Output File列中的文件名
  2. 确保保存为文本框中的值是AtTheWaterPark.flv，并且Location文本框的值是示例视频文件夹的值
  3. 点击保存
  4. 点击开始队列生成新的视频文件

生成视频的总时间取决于视频的显示尺寸和其他设置。你的电脑的处理速度和其他资源都会影响完成编码任务的时间。

Status列显示队列中的每个视频的当前状态。当文件被编码时会显示"Encoding",当处理完成时会显示一个对号(查看图7)。

fig07.jpg

图7.一个完成的编码任务

编码完成后，你可以选定该编码任务，然后点击Duplicate来修改或重用你的设置，或者如果你不需要做其他处理，就点击Remove。

按下列步骤从队列中移除编码任务：

  1. 选择队列中的AtTheWaterPark.avi
  2. 点击Remove移除队列中的任务
  3. 在弹出的让你确认是否移除队列中的视频任务的对话框中点击Yes
  4. 关闭Adobe Media Encoder。

在Adobe Media Player中预览视频

你可以使用Adobe Media Player预览生成的视频文件。Adobe Meida Player会同任意版的Creative Suite 4一起安装，也可以从Adobe网站下载后单独安装.

Adobe Media Player 可以播放许多格式的视频，包括FLV文件。这个软件会在安装时同扩展名为.flv的文件关联起来，因此当你双击或尝试打开FLV文件时会自动打开Adobe Meida Player.

按下列步骤打开并预览你生成的视频文件：

  1. 打开资源管理器(Windows)或者搜索者(Mac OS X)
  2. 找到示例目录并定位AtTheWaterPark.flv文件
  3. 双击以打开它。

    4. 这个视频应该被Adobe Media Player打开并自动播放(如图8)

    fig08.jpg

    图8.Adobe Media Player

  4. 关闭Adobe Meida Player

使用Dreamweaver CS4把视频添加到Web页中

Dreamweaver CS4有把FLV文件整合到已经存在的Web页中的功能。你需要的只是一个按照Web页尺寸设定了显示宽和高的FLV文件。

在这部分，你需要完成下列工作:

  • 创建一个Dreamweaver站点来管理网站资源(web页面，CSS，JavaScript文件和视频)
  • 生成把FLV文件整合到已经存在的web页中需要的HTML和JavaScript代码
  • 把资源上传到远程服务器，这样你网站的用户才能观看视频

创建一个Dreamweaver站点

把视频添加到web页面中之前，你应该先定义好一个用来管理网站资源的Dreamweaver站点。如果你已经熟悉了在Dreamweaver中定义站点的流程，那么你会发现添加视频的步骤没什么特别的。你需要在站点定义中设置这些类别和选项：

  • 本地信息
    • 磁盘上的位置
    • 应用程序服务器设置
    • 关于如何管理本地文件的其他设置
  • 遮盖(防止一些文件被上传到远程服务器上)
    • 将会被自动遮盖的文件的扩展名

在本教中将不会配置远程信息，但是你可以简单配置这些信息以指示文件如何上传到远程服务器上。关于配置远程站点的知识，请查看Dreamweaver在线帮助的设立一个远程文件夹

按照下列步骤在Dreamweaver中定义一个站点:

  1. 打开Dreamweaver CS4
  2. 选择站点 > 新建站点
  3. 在站点定义对话框中，点击高级选项卡(如图9)

    4. fig09.jpg

    图9.定义一个Dreamweaver站点

  4. 输入Home Website with Video作为站点名称
  5. 把本地根文件夹设成示例文件的根目录。在Windows下，这个文件夹可能是C:/sites/homewebsite;Mac OS X上可能是/Users/[username]/Sites/homewebsite
  6. 选择分类列表中的遮盖
  7. 选择[遮盖具有以下扩展名的文件]选项(看图10)。可以看到.fla文件扩展名已经被列出来了。

    8. fig10.jpg

    图10.遮盖项设置

  8. 在文件扩展名里添加.avi
  9. 点击确定，保存对新站点的定义

    10. 你会看到网站文件显示在文件面板中

  10. 双击文件面板里的videopage1.htm文件
  11. 选则视图 > 设计，查看它的可视化界面。

如图11所示，这个页面包含一个标题，一个左侧的导航和提示视频应该插入到什么位置的文字。

fig11.jpg

图11.设计视图中的原始页面

渐进式下载与视频流

Dreamweaver有两种不同的发布视频的方式：渐进式下载和视频流。

渐进式下载的意思是Flash Player从web服务器下载FLV文件，同时浏览器下载一个影片文件。当用户浏览嵌入了视频的页面时，Flash Player开始从服务器下载视频文件。当下载了足够多的视频文件后，它便开始播放——播放的同时，会在后台继续下载视频的其余部分。

渐进式下载的优点是简单：

  • 服务器上不需要安装除了提供web服务(比如Apache或IIS)以外的软件。
  • 只要跟其他web资源一样，把视频传到远程服务器上就可以了。

渐进式下载的缺点有：

  • 无法认证用户，不能管理和报告视频被下载的总量，也不能降低单个用户的可用带宽
  • 视频文件会被web浏览器缓存到用户电脑上。这样，用户就可以找到缓存里的视频文件，并另存。这样，就很难限制视频文件的传播

视频流的意思是Flash Player连接到流服务器。视频以流的形式传播。当收到信息后，会显示出来，然后就从内存中消除，它从不保存到用户磁盘上。

视频流的优点是:

  • 可以即时回放视频，而不需要等下载了一定多的量之后才能放
  • 可以验证用户，只有授予权限的用户才能访问视频
  • 可以根据用户和视频文件分配带宽
  • 视频文件不会被浏览器缓存，所以能够控制传播

如果你计划用视频流方式发布的视频很多，那么你可以用Adobe Flash Media Streaming Server管理你自己的流服务器。该软件为Flash Player，Adobe Media Player和安装了Adobe Flash Lite 3的移动电话提供平滑的流。如果你不想创建自己的流服务器，那么可以从提供共享流账户的地方定义流服务(就像ISP提供的共享网站帐号)。访问Adobe网站查看Flash Video Streaming Service(FVSS)提供者

本教程使用渐进式下载的方式发布视频

把视频文件添加到web页面中

当把视频文件添加到web页中时，Dreamweaver在页面中添加一个Flash影片控制下载和播放(叫做视频播放器)。页面中需要有足够的空间显示视频和视频播放器。本教程示例页面中的显示区域(一个id为mainContent的<div>元素)的宽足有450像素。因为你生成的FLV文件的宽是400像素，因此足够显示。

按下列步骤把视频添加到Web页中：

  1. 在设计视图中，选中文字"Place Video Here."
  2. 按Delete键删除选中的文字
  3. 选择插入 > 媒体 > FLV
  4. 在插入FLV对话框中，把视频类型设置成渐进式下载(如图12)

    5. fig12.jpg

    图12.插入FLV文件

  5. 点浏览
  6. 在选择FLV对话框中，找到Video文件夹
  7. 选择AtTheWaterPark.flv
  8. 检查URL设置成了video/AtTheWaterPark.flv，相对于设置成了文档。
  9. 点击确定
  10. 把皮肤设置成Halo Skin 3.
  11. 点击“检测尺寸”按钮。Dreamweaver应该检测到视频的显示尺寸是400 × 293，并把加上皮肤的总尺寸设置成 422 × 344。
  12. 勾选自动播放，这样当在浏览器中显示这个Web页的时候视频会自动播放。
  13. 勾选自动回滚，这样视频播放完之后会自动回到开始。
  14. 点击确定把视频添加到页面中。
  15. 保存对页面的更改。
  16. 当你保存页面时，Dreamweaver显示一个对话框告诉你把文件添加到站点中以支持视频下载和显示。当提示复制相关文件时点击确定。为了保证视频正常播放，下列文件必须上传到服务器上：
    • 用户播放视频的FLVPlayer_Progressive.swf(如果你使用流视频模式，这个文件的名字会是FLVPlayer_Streaming.swf)
    • 一个决定视频播放器外观和功能的皮肤文件。Halo Skin 3对应的文件名是Halo_Skin_3.swf
    • Scripts/expressInstall.swf负责让用户把播放器升级到需要的版本。前提是用户至少安装了Flash Player 6,0,65
    • Scripts/swfobject_modified.js包含用于加载Flash Player的JavaScript代码

使用实时查看预览视频

Dreamweaver CS4包含一个叫做实时查看的新功能，通过它就可以看页面的效果而不需要打开外部浏览器

按下列步骤使用实时查看预览视频：

  1. 确认你当前正在使用设计视图。视频区域是一个带有蓝色边框和"FLVPlayer"标签的灰色矩形。
  2. 选择视图 > 实时查看(或者点击文档工具栏中的实时查看按钮)来预览页面(如图13)。视频应该立即开始播放。

    3. fig13.jpg

    图13.使用实时查看预览视频

  3. 再次选择 视图 > 实时查看 返回到设计视图。

这样就完成了——已经生成了适用于互联网发行的视频并把它添加到了web页面中。下面的步骤是可选的，但是它会告诉你如何把视频放到一个Flash影片中以及添加很棒的效果来增强视频体验。

使用Flash生成一个高级视频影片

你可以使用Flash创建一个由视频、标题字幕、过渡及其他视觉效果和交互功能组成的高级影片。Flash也可以生成支持视频全屏的HTML代码。

在本部分，你将要完成下列任务:

  • 新建一个Flash文档
  • 把视频文件添加到Flash文档中
  • 添加用于在视频出现之前显示的标题字幕
  • 在标题画面和视频画面之间创建一个过渡效果
  • 按支持视频全屏的设置发布Flash内容
  • 把做完的Flash内容添加到Dreamweaver里的web页面中

创建一个Flash文档

第一步是创建一个Flash文档。Flash文档源文件的扩展名总是.fla。发布之后，将生成一个扩展名是.swf的文件。

按下列步骤新建一个Flash文档：

  1. 打开Flash CS4 Professional
  2. 选择窗口 > 工作区 > 设计者。你应该看到时间轴位于顶部，工具和属性面板位于左侧，库、对齐、颜色面板在右侧。
  3. 选择文件 > 新建
  4. 如图14所示，在新建文档对话框中，选择Flash文件(ActionScript 3.0)，然后点确定

    5. fig14.jpg

    图14.新建一个Flash文档

  5. 选择文件 > 另存为
  6. 在弹出的对话框中，找到你网站的根目录
  7. 把文件名设为waterparkvideo.fla，然后点保存

把视频添加到Flash文档中

Flash文档使用图层管理可视化元素。一个新的Flash文档有一个名为图层1的默认图层。我们将使用这个默认图层显示视频，然后创建其它图层显示标题，添加ActionScript代码。

按下列步骤重命名默认图层，然后在这个图层的第一帧添加一个视频播放器组件：

  1. 定位到时间轴面板。如果你没看到时间轴，选择窗口 > 时间轴。
  2. 双击图层1的标签。会显示一个文字输入控件，用它就能重命名这个图层。
  3. 输入video然后按回车(Windows)或者Return(Mac OS X)。
  4. 选择图层video的第一帧(看图15)

    5. fig15.jpg

    图15.选中新图层的第一帧

  5. 选择 文件 > 导入 > 导入视频
  6. 如图16，在导入视频向导的第一步，点击浏览

    7. fig16.jpg

    图16.选择一个视频文件

  7. 找到网站根目录下的Video文件夹
  8. 选择AtTheWaterPark.flv，点打开
  9. 点击下一步(Windows)或者Continue(Mac OS X)
  10. 如图17所示，选择SkinUnderPlayerStopSeekFullVol.swf作为皮肤文件

    11. fig17.jpg

    图17.选择一个皮肤

  11. 点击颜色选择器，选择颜色#47ABCB
  12. 点击下一步(Windows)或者Continue(Mac OS X)
  13. 阅读最后画面上的信息，然后点击完成。

导入完视频后，在画面中间会显示一个视频播放器组件。

接下来，你要重设Flash文档的尺寸来显示这个组件：

  1. 选择 修改 > 文档
  2. 把匹配项设置成内容(图18)

    3. fig18.jpg

    图18.让文档匹配内容的尺寸

  3. 点击确定

    4. 说明：当Flash文档尺寸匹配它的内容时，新的尺寸匹配视频回放组件，但是并不包含播放控制组件。在后面步骤中将修正这一点。

  4. 按Ctrl + Enter(Windows)或者 Cmd + Return(Mac OS X)测试影片

你应该看到了播放的视频，但是播放控制并没有显示出来。

  1. 关闭Flash Player返回到开发环境
  2. 选择修改 > 文档
  3. 把文档高度从293改成333，添加的40像素用于显示视频播放控制
  4. 点击确定
  5. 再次测试影片。这次你应该看到视频播放器组件和它的控件都正常显示出来了。
  6. 保存修改。

添加标题画面

Flash允许你整合多个可视化元素。在本部分，你将要在Flash影片的开始添加一个标题，并过渡到视频。

  1. 点击时间轴上的video图层
  2. 使用插入 > 时间轴 > 图层 来添加新图层
  3. 双击新图层的名字，图层2，改成titlescreen
  4. 右键/Ctrl-click 新图层，然后选择锁定其他。这样确保只能在没有锁定的图层上添加内容。
  5. 选择titlescreen图层的第一帧
  6. 点击工具面板上的四边形工具(图19)

    7. fig19.jpg

    图19.工具面板

  7. 在属性面板中，把笔触颜色设成无，填充色设成黑色。

    8. 提示：如果没有看到属性面板，选择窗口 > 属性

  8. 从左上到右下拖一个矩形出来
  9. 点击工具面板里的选择工具
  10. 双击新图形的任意部分选中它
  11. 设置属性面板中的位置和大小属性
    • X : 0
    • Y : 0
    • 宽 : 400
    • 高 : 333
  12. 按Esc取消选择
  13. 点击工具面板中的文本工具
  14. 设置属性面板中字符字段里的下列属性：
    • 类型 : 静态文本
    • 字体 : Georgia
    • 样式 : Regular
    • 字号 : 72pt
    • 字符间距 : 0.0
    • 颜色 : 白色
    • 自动调整 : 选中
    • 消除锯齿 : 可读性消除锯齿
  15. 在属性面板的段落部分设置下列属性：
    1. 格式 : 居中
    2. 间距 : 水平:0.0,垂直:2.0
  16. 点击文档任意位置生成一个文本对象
  17. 输入文字At the然后按回车(Windows)或Return(Mac OS X)
  18. 输入Water Park
  19. 按ESC完成输入，但是让文本对象保持选中状态
  20. 转到对齐面板

    21. 提示:如果你没看到对齐面板，选择窗口 > 对齐

    fig20.jpg

    图20.对齐面板

  21. 确认选中了“相对于舞台”
  22. 点击水平居中
  23. 点击垂直居中

这时你应该看到文本对象水平方向和垂直方向都是居中的

为了更容易实现过渡效果，我们把背景矩形和文字组合成一个对象，就是通常说的库元件。这样就能让它们一起淡出了。

  1. 按Ctrl+A(Windows)或Cmd+A(Mac OS X)选中当前图层的所有对象
  2. 选择修改 > 转化成元件，创建一个包含当前图层对象的库元件
  3. 在转换成元件对话框的名字文字框中输入mcTitle,并确认类型设置的是MovieClip(图21)

    4. fig21.jpg

    图21.把可视元素转换成元件

  4. 点击确定。新的元件就添加到库里了。舞台上选中的矩形和文本对象现在成为一个叫做元件实例的对象了
  5. 保存修改

如果你现在测试影片(打开你电脑的声音)，你会听到影片在播放，但是你看不到它。这是因为标题挡住了视频。接下来，添加一个从标题到视频的过渡效果。

添加过渡效果

在Flash里，你可以使用动作补间在一个图层上添加动画。动作补间是在一段时间内改变元件实例的位置、大小及其他可视化特征。

更多信息，请看帮助里的动作补间

按照下列步骤创建一个3秒的从标题到视频的过渡：

  1. 选择titlescreen图层的第一帧
  2. 选择插入 > 动作补间。就会创建一个跨度是24帧(1秒)的动作补间。
  3. 点击titlescreen图层的第95帧

    4. 说明：你可能需要向右滚动时间轴才能看到第95帧

  4. 选择插入 > 时间轴 > 帧，把动作补间扩展到4秒内。

    5. 说明：你也可以把动作补间的最后一帧拖动到第95帧达到同样的效果

  5. 确认titlescreen层的第95帧处于选中状态
  6. 按下V键以使用选择工具
  7. 点击title card实例
  8. 在属性面板的色彩效果部分，把样式设置成呢个Alpha(图22)

    9. fig22.jpg

    图22.选择alpha属性

  9. 把影响不透明度的alpha属性值设成0(完全透明)

    10. 说明：当你选择alpha的时候，有可能会看到它的值自动设成0

  10. 点击titlescreen层的第72帧
  11. 点击title card实例再次选中它
  12. 在属性面板，把Alpha属性设置成100%

    13. titlescreen层的第72帧上的一个点表示在这一帧上的元件发生了变化。现在标题将完全显示3秒(直到第72帧)，然后从72帧到95帧逐渐消失(1秒以内)

  13. 点击video层的第96帧
  14. 选择插入 > 时间轴 > 帧，把video层扩展到最后

    15. 说明：在第96帧，标题已经不存在了，但是视频依然显示，允许用户使用视频播放器的回放控件。

  15. 保存并测试影片

标题画面会在3秒后淡出，但是影片会回到开始并循环播放。另外，从影片一开始视频就开始播放了，而不是等过渡结束后再播放。在后面将修正这些问题。

控制时间轴和视频播放

现在当影片加载后视频自动播放，且影片自身循环播放。按下列步骤阻止视频在影片一开始就播放：

  1. 在video层上右键/Ctrl-click，然后选择锁定其他层
  2. 在video层上右键/Ctrl-click，然后选择隐藏其他层
  3. 选择video层的第一帧
  4. 点击以选中视频播放组件
  5. 选择窗口 > 组件检查器 查看组件的属性
  6. 在组件检查器面板中把组件的自动播放属性设置成False(图23)

    7. fig23.jpg

    图23.组件检查器面板

  7. 关闭组件检查器面板

需要使用一点ActionScript 3的代码，然后不让影片循环播放，让视频在过渡效果完成后才开始播放。ActionScript 3是一种基于ECMAScript标准的编程语言。请访问Adobe网站的Adobe ActionScript 3.0编程，以了解更多关于ActionScript 3的知识。

最佳做法是把Flash文档中的ActionScript代码放到通常被叫做actions的图层上。首先为你想用ActionScript代码控制的对象(比如视频播放器组件)起一个名字。然后创建一个关键帧(表示发生动作或事件的标记)，并添加想要在这一帧运行的代码。

按下列步骤在影片的最后一帧添加ActionScript代码：

  1. 再次选中视频组件
  2. 如图24所示，在属性面板中，点击<实例名称>文本控件
  3. 输入videoplayer

    4. fig24.jpg

    图24.设置视频播放器组件的实例名

  4. 点击时间轴的titlescreen层
  5. 选择插入 > 时间轴 > 图层
  6. 把新图层改名为actions
  7. 点击actions图层的第96帧
  8. 选择插入 > 时间轴 > 关键帧，添加一个新关键帧
  9. 选择 窗口 > 动作,打开动作面板
  10. 在动作面板里添加如下代码:
    11. stop();
videoplayer.play();

    说明：stop()命令停止时间轴回到第1帧。代码的第二行让视频开始播放

  11. 关闭动作面板并保存更改
  12. 再次测试影片

这次你应该看到影片不会循环播放了，视频也是从时间轴的最后一帧开始播放

发布影片

Flash CS4允许你生成支持视频全屏显示的HTML代码。全屏需要Flash Player 9,0,28或更高版本，因此最好配置你的影片能够检查用户的浏览器环境以确保他们安装了需要的软件。

按下列步骤配置你的Flash文档，并发布影片和HTML页面。

  1. 选择文件 > 发布设置
  2. 点击Flash选项卡，如图25

    3. fig25.jpg

    图25.Flash 发布设置

  3. 把Flash Player项设成Flash Player 9
  4. 点击HTML选项卡，如图26

    5. fig26.jpg

    图26.HTML 发布设置

  5. 把模板设成仅 Flash - 允许全屏
  6. 勾选检测Flash版本
  7. 把需要的版本设置成9,0,28(注意每个数值输入到对应的文本框里)
  8. 按图26设置其它项
  9. 点击发布生成Flash影片和它的支持文件
  10. 点击确定关闭发布设置对话框
  11. 保存你做的更改
  12. 选择文件 > 发布预览 > HTML，在浏览器中预览影片
  13. 当视频开始播放时，点击视频播放器组件上的全屏按钮(图27)。视频应该会全屏显示

    14. fig27.jpg

    图27.视频播放器的全屏按钮

  14. 按Esc键返回到浏览器模式
  15. 关闭浏览器

把Flash影片添加到已存在的Web页面中

当你发布影片的时候，Flash会在站点根目录生成下列文件：

  • waterparkvideo.swf:完整的Flash影片
  • waterparkvideo.html:支持视频全屏显示的HTML文件
  • SkinUnderPlayStopSeekFullVol.swf:决定视频播放器组件显示界面的皮肤文件

这些文件同FLV文件一起，必须上传到你的网站上，用户才能看到。

下面，将会把Flash影片整合到一个已经存在的Web页面中。你需要使用HTML的<iframe>元素把一个页面嵌入到另一个页面中。这样，就不需要做很多复制粘贴的工作，就能直接使用Flash生成的那个HTML代码了。

按下列步骤把Flash影片添加到web页面中：

  1. 在Dreamweaver中，在设计视图下打开videopage2.htm
  2. 选中文字"Place Video Here"，并按Delete
  3. 选择插入 > HTML > 框架 > 浮动框架

    4. 你应该看到Dreamweaver变成了分割的视图来显示新插入的HTML代码

  4. 在代码中，把<iframe>代码改成：
    5. <iframe src="waterparkvideo.html" 
height="353" 
width="420" 
frameborder="0" 
scrolling="0"></iframe>
  5. 保存做的更改

    6. 接下来，在外部浏览器中预览视频的全屏显示

  6. 选择文件 > 在浏览器中预览
  7. 选择一个web浏览器
  8. 当这个页面在外部浏览器中显示出来，视频也开始播放了之后，点击全屏按钮。
  9. 按Esc返回
  10. 关闭浏览器

恭喜！你已经成功的创建了一个高级的视频影片，并添加到了你的web页面中。

接下来做什么

还有许多关于针对web创建并整合视频的资源。比如，有些人遇到了配置服务器的问题。如果你把站点部署到自己安装的服务器上，通常会没有对FLV设置正确的MIME类型，造成了视频不能播放。可以从在IIS中添加.FLV MIME类型中找到这个问题的一个解决方案。

如果对生成自己的视频感兴趣，查看Adobe Creative Suite 4 Production Premium,它包括Adobe Premiere Pro,After Effects, Soundbooth及其他能够使你很容易生成有趣视频的产品。

取自"http://wiki.9ria.com/%E5%9C%A8Web%E9%A1%B5%E9%9D%A2%E4%B8%AD%E6%B7%BB%E5%8A%A0%E8%A7%86%E9%A2%91"
本页面已经被浏览5,628次。
Adobe Community Champion

全球最大的RIA开发者社区
Adobe官方认证社区冠军

9RIA.com 天地会 京ICP备11007422号-2