编写多媒体网页的精灵-DREAMWEAVE

编写多媒体网页的精灵Dreamweaver

在网页编写软件层出不穷的今天，Macromedia公司毅然推出

Dreamweaver,其中必定有不同凡响之处。Macromedia公司在多媒体方面有相

当的影响，大名鼎鼎的Freehand、Director.Autherware便诞生在这个公司。

Dreamweaver最精彩之处便是强大的多媒体处理功能，在设计DHTML(Dynamic

HTML)和CSS(CascadingStyleSheets)方面表现得极为出色，它利用JavaScript

和DHTMI语言代码轻松地实现网页元素的动作和交互操作，可谓独出心裁。在

这方面超过了Frontpage98、Hotdog、Homesite等著名网页编写软件。和

Macromedia公司其他软件的完美协作也是Dreamweaver的一大特色。

Dreamweaver是一种WYSIWYGHTML编辑器，它可以用于基本页面元素的插入

和生成工作。Dreamweave，还可以对内部的HTML编辑器和任何第三方的HTML

编辑器进行方便、实时的访问。

Dreamweaver是一种小型灵活的网页编写工具，程序使用一些浮动窗口，

设计人员可以用鼠标单击的方式插入图像、表格、表单、APPLET.脚本语言等

各种对象，这方面延续了所见即所得的编写方式，同时程序也提供对代码的编辑,

包括样式表和JavaScript脚本。

Dreamweaver提供行为和时线两种控件来进行动画处理和产生交互式响应，

这也是这个软件的优势所在。行为空间提供交互式操作，时线控件使设计人员像

制作视频一样来编辑网页。这两种控件分别通过行为面板和时线面板来设置，这

方面是本文的重点。

目录

初级篇

L工具栏简介

2.图片

3.表格

4袋单

5.帧

中级篇

1.层

2.行为

3.CSS

高级篇

L时线的应用

2.时线制作例子

工具栏简介

我们可以编辑新的网页，也可以直接从网上获得。对一般网页元素的控

制可以通过工具条完成。图一是一般元素，图三是表单工具，图

三是不可见命令。

000

图一中各工具分别是：A插入图片，B插入表格，C插入横

线，D设置层，E插入APPLET,F插入ACTIVEX控件，G插入

插件，H插入FlashMovieJ插入shockWaveDirectoro后两项

都是Macromedia开发的网际媒体。对整个页面的设置要调出

Modify菜单中的PageProperty对话框，这里是基本的设置，

如网页的标题、背景颜色、背景图片、超链接文字的颜色和网

___页使用的文字，这一项应选中SimplifiedChinese(GB2312),因为

Dreamweaver在处理中文这样的双字节语言的时候用的是两个

字符的组合，这一点和Netscape一样，所以如果语言使用西文(Western)的

话在用ie浏览的时候将出现乱码。接下来我们利用属性面板对页面进行详细的

设置，这个面板可以通过Window的Properties选项打开，也可以双击页面元素,

属性面板自动弹出。不同的组件有不同的属性，并且这个面板可以展开。这种方

法受可视化程序设计启发，使用起来十分方便，而且直接，整个布局十分清晰，

因为有用的属性在选中的时候才显现出来。当我们点击空白页面时，属性面板显

示的是页面文字的属性。利用这个属性面板我们可以轻松F为页面文字设置各

种属性，如颜色字体字型、对齐方式和浅进等。我们还可以简单地制作超链接和

列表。

下一节我们将介绍图片的应用。

图片的应用

首先我们插入一幅图片。点击图片工具，选择图片，图四是当前图片属

性展开时的属性面板情形。图片的属性总是在属性面板的左上角，显示图片的缩

略图、图片的大小等文件信息。

0

在这个面板里可以设置图片的长和宽、图片来源、超链接、缺省注释、

对齐方式、水平和垂直的空域、低分辨率图片来源及边框。其中对齐方式中出了

一般的还有AbsoluteMiddle和AbsoluteBottom,是HTML的扩展语句，分别

是中间固定和底边固定。凡是带有文件夹标志的选项都表明有浏览选择功能。通

过刷新（RefreshImage按钮）可以看到最新的图片特征。属性面板中有图像地

图（Map按钮）（如图五）功能，

0

使用户简单地设置图像地图，其他专门制作图像地图的软件便显得多余了，

Macromedia果然周到。下面我们来看图像地图。图五是制作图像地图的对话框,

左边的按钮是图像地图的形状，圆、矩形、不规则图形，对话框下部是为图像地

图的每一区域设置超链接、链接目标及缺省注释。选中的区域反显，便于观察，

图五中显示的是选中的一矩形区域，可以选择各个划定的区域设置或修改其属

性。整个过程简单明了，操作十分方便。

下一节我们将为您介绍表格的应用。

表格的制作

表格功能也很有特色。点击插入表格工具会提示输入表格的行和列及表

格的宽度C完成以后需要用属性面板来调节表格的属性。当点击表格四周的边框

时表格区域变成黑色，属性面板显示表格属性。请看图六，当

0

属性面板左上角显示的是一个表格时，表明属性面板的当前状态是表格属

性。在属性面板中可以简单地设置表格的名称、行列数、表格的宽和边框，以及

对齐方式元素外围空白大小。值得注意的是属性面板下面的一行，左面的四个小

按钮分别是：使表格的长度最小、使表格的宽度最小、表格宽度按像素记、表格

宽度按百分比记。当你的表格比较复杂，每一元素的大小都不同时通过这些工具

可以很快地恢复原来状态。在属性面板的下一行还有表格四周的空白区大小和设

置边框和背景的颜色，边框由基本色、高光和阴影组成。凡是在文字域有灰色方

框就表明有颜色表可供选取。当我们点击表格内部区域时，属性面板显示表格元

素的属性，你可以为表格设置其文本属性，包括文字的格式、颜色、对齐方式、

超链接及超链接的目标等属性，通过面板下一行的选项我们可以针对表格的行列

或元素做具体的设置。值得注意的是右下角的四个小按钮，分别是将纵向的两个

元素合并成一个、将横向的两个元素合并成一个、将纵向的一个元素分成两个、

将横向的一个元素分成两个。进行元素拆分的时候只是针对以前合并的对像。图

七是有四个按钮和表格的例子。

下一吊我们将为您介绍表单的制作。

表单的制作

下面我介绍一下表单(form)的制作。表单是委供交互式操作的重要手

段，用户可以通过表单输入相关信息，使网页动态地处理用户要求或与服务器进

行交流。在Dreamweaver中表单的制作简单明了，功能强大。调出表单工具条。

可以把相关的表单项，如checkbox、RadiobottomsSelectform等建在一^个表

(form)中，当增加一个表时会出现一个红色的虚线框。并且你可以选择表单的

传递方式。第二个工具是文字域，一共有三种属性，请看属性面板(图八)，

□

整个文本域都归结在这一工具中，为了处理的方便需要为文本域取一个名

字，在TextField下方的区域内。右边的CharWidth是文本区显示的字符宽度，

当文字内容长于设置的宽度时可以用滚动条或键盘来读取，本例可以显示20个

字符。下面的NumLines是文本域的行数，本例是4行。再右边是选择文本区的

模式，是一行、多行还密码输入方式。如果我们看一下HTML代码，当使用单行

或密码方式时，都是使用＜INPUT＞＜/INPIJT＞方法，只不过类型(Typfi)不同罢

了。而使用多行文本域使用的是＜TEXTAREA＞v/TEXTAREA＞方法。当然我们没有

必要关心具体的HTML代码，我想说的是Dreamweaver有很好的灵活性和智能

化。我们可以通过属性面板右下方的InitVai区设置文本区的初始值，选单行或

密码方式时初始区也为一行，本例是多行的情况。Dreamweaver的文本区工

具有一个缺点，在多行情况下不能设置回车方式(软回车还是硬回车)，需要自

己在HTML代码区内加上。按钮(botton)、选择框(checkbox)、无线钮(Radio

botton)的设置比较简单。对选项菜单(ChoiceMenu)的设置是这样的，在

Dreamweaver中选项菜单分成列表(list)和菜单(Menu)两种。

0

0

请看图九，当选择Menu方式，右侧的Height和Selections选项不可选。

选项内容选右侧的ListValues按钮，弹出如图十的对话框，左边的加减号的按钮

是增加或减少选项和相应的值。右侧的两个按钮可以调整选项的位置，本例是将

第一个选项调到第三个的情况。当选List选项时可以选列表的高度和是否允许多

选。

下一节我们将为您介绍帧的制作。

帧的制作

在Dreamweaver中分栏(frame)十分简便。并且程序允许用户对整个

页面进行编辑。将网页分栏可以使用Modify菜单中的Frameset命令，并选择分

栏方式，如左侧分栏、右侧分栏、上侧分栏、下侧分栏,分好以后对每一栏的设

置要通过属性面板，如图十一，图十一的上部是Frameset的属性，下部是每一

栏的属性。对每一栏

0

可以设顶栏的HTML文件，有无滚动条，可不可以改变栏的大小及栏的边。

然后我们可以分别对每一栏进行编辑，就像编辑不分栏的页面一样。这样我们既

可以看到整个页面的情况，也可以方便地对单个栏进行编辑，十分方便直观。有

时我们需要撤消已分好了的栏，但我们在Modify菜单中找不到撤消的命令，在

属性面板中也没有关于栏数的设置，怎么办呢？其实对栏的撤消更简单，这和改

变栏的大小一样，只需要拖动栏的边界，当我们看不到要撤消的栏的时候，栏就

被撤消了，这时如果我们注意一下属性面板的话，会发现栏数改变了。我们也可

以调出Frames浮动面板来监视栏的编辑，便于查看整体布局和快速选择要编辑

的栏。Frames浮动面板在Window菜单中。如图十二是先左右分栏，再将右

侧的栏上下分栏的情况。

0

下一篇我们将为您介绍Dreamweave的中级功能层和行为的应用。

层的应用

Dreamweaver在编辑动态HTML方面别具特色，程序利用层叠样式表

和JavaSript脚本语言进行编辑。一般的用户不必关心具体的实现方法或具体的

代码，而是像进行影像编辑一样一帧一帧的设计，所以使用的时候有点不像编写

网页而是在进行多媒体设计。如果你用过AdobePremiere的话，就会很快熟悉

这种编辑方法。再具体的实现上分为行为(Behavior)和时线(timeline)行为用来

对外界的情况进行响应,产生交互式的操作,这些响应是基于HTML和JavaScript

语言并与具体的浏览器有关。而时线则根据页面元素的位置、大小、内容的变化

来实现。其中引入层是实现网页精美动画的关键°

层是建立动态HTML的基础。我们可以在insert菜单或直接在工具条中找到

层工具，就是这个小图标。选中后就可以在网页上划定一个矩形区域表示建立一

个新的层,选中一个层后这个层边界用细框线表示出来,左上角有一个小的标记。

我们可以在这个划定的矩形区域内编辑任何内容，就像编辑一般的网页一样。我

们看下面这个例子，图A一先后建立了三个层，第一层是包含一副风景画的图层,

第二个层是包含汽车的层，

最上面的第三层是海鸥。其中第三层是一张GIF89A的图片，所以我们可以

通过第三层看到下面的前两个层。层的大小可以是任意的，但不能小于层中的元

素。也就是说我们不能通过改变层的大小来改变层中元素的大小，这个例子中要

改变第三层中海鸥的大小只能通过对海鸥这幅图的属性来改变。在上一期介绍插

入图片的段落中有相关内容。当我们选中一个层进行操作时(注意是对层的内容

进行编辑，而不是对层本身)，这时该层的边框由灰色变为黑色，我们就可以在

这个层中插入或修改各种元素。并且选中以后活动层的左上角出现一个小方块

的标志。上面的例子是单云这个小方块后的情况，这时层的边界出现八个小方块

点，我们可以通过用鼠标拉动这些点来改变层的大小。为了对层进行更好的管理

还需调出层控制面板(选window中的layer命令)。图A二是针对上一个例子

的层面板。面板上标出了三个层的情况。层面板一共有三个选项供选择，有眼睛

标记的选项是显示或隐藏层。当点最上面的眼睛标记时可以对所有层进行显示和

隐藏操作。在下面还有三个眼睛标记，上面的两个是睁开的眼睛，表示本层可见,

下面一个是一个闭合的眼睛，表示本层，也就是层一是隐藏的，为了更好地说明

层面板的使用方法，层面板没有和例图完全对应，例图中的第一层是显示的。我

们可以为每个层指定名称，缺省时名称按层建立的先后命名为layerl、Iayer2……

层面板中Z项指的是Z-order,层的顺序，Z值越小表明该层的位置越靠下。还

有另一种简单的方法来改变层的顺序是：点住要改变层次顺序的层的名字拖动到

适当的位置，就像Photoshop中的层管理一样。

下一节我们将介绍行为的应用。

行为的应用

如果想要使网页更“聪明”的话，就要使用行为来感知外界的信息并做

出相应的响应。这些外界信息包括鼠标的活动，如页面的调用与关闭、鼠标移动

到页面元素上点击元素或移开元素，以及焦点的改变和键盘的情况等各种变化，

对不同的页面内容有不同的事件，另外能够响应的事件也和浏览器有关，一般说

来，3。的浏览器能够响应的事件要少于4.0浏览器，而IE4能够响应的事件要多

于Netscape4.0浏览器，我们可以根据不同的浏览器进行不同的设置。

图A三是一个简单的例子，这个页面有两项内容，一部分是上面的文字

"Clickhereformoreinfocmation"并成为一个超链接，下面是一个汽水瓶的图

片。现在想要产生这样的效果，当浏览者将鼠标移到超链接的文字之上的时候发

出一段开启汽水瓶的声音，这段声音是已有的资源。我们可以这样做。将超链接

设置成工作的焦点，可以用鼠标在这行文字上点一下。这时调出行为浮动面板

（window菜单的behavio「命令），如图A四这个浮动面板一共有两部分组成。

左边是事件，右边是对事件的响应。我们可以看到浮动面板的事件栏中显示了

Events,表明现在是对刚才选中的超链接所产生的各种可能的事件。在这一栏

中我们可以选择浏览器的类型，例子中是选择IE4作为目标浏览器，我们点击加

号会弹出一个菜单，菜单中列出各种可能产生的事件。我们选择事件，当鼠标移

动到目标元素上的时候就会产生事件信息，选中以后这一事件被加入事件栏中，

一个页面元素可以激发许多事件。当一个事件有响应的时候这个事件才是有价值

的事件，因为即使没有选事件也是存在的，也是会在适当的时候被激发，只是没

有响应所以对页面没有任何影响。用同样的方法我们点击行为浮动面板右侧的响

应栏中的加号按钮，这里也列出了所有可能的响应，包括改变属性、检查插件、

声音控制、浏览器状态条显示何种信息，跳到指定的地址上，打开新的浏览器窗

口。弹出消息以及层的变化等等。我们选择声音控制（controlsound）一项，

这时会自动弹出对话框提示我们开始和结束声音。图A五就是弹出的对话框，选

择合适的声音文件后（注意，要选择网页允许的声音文件格式）整个有关本例的

事件及响应的设置就完成了。我们没有编写一句代码就完成了较为复杂的交互式

操作，这足以表明Dreamweaver在编写高级网页时的优越性。

0

我们可以用这种方法编写出十分精彩的网贞，比如：当我们开启一个网员的

时候先奏一段音乐（这里用到对onLoad事件的响应），当浏览者将鼠标移动到

网页的各个项目上时，这一项目闪烁并响起音乐且状态条显示项目的说明（这里

用到对onMouseOver事件的响应，响应为图片来源控制、声音控制和状态条信

息的设置），当浏览者随超链接进入新的页面并点击页面的MOV格式的电影时

检查浏览器是否有quicktime插件，如果有就播放这段电影（对onClick事件响

应，响应为检查插件），我们可以将一幅图片作为一超链接，当浏览者点击或按

下任意键时显示目标页（用到对onKeyPress和onMouseOver事件的响应），

如果是商业或教育网页我们还可以对onHelp和onError等事件产生响应。我们

还可以对整个页面进行控制（用到对。nReadyStateChange事件的响应），如果

浏览者结束浏览时说一些感谢的话或传达一些信息或打开相关网页就要用到对

onClose事件的响应等等，还有许多更精彩的事件和不同寻常的响应事件留给广

大读者去发现吧。

下一节我们将为您介绍CSS的应用。

css的应用

Dreamweaver具有强大的编辑层叠样式表(CSS)能力，对层叠样式表

的编辑能力要远远强于Frontpage980虽然Dreamweaver并没有声明对CSS2的

支持，但程序本身对层叠样式表的扩展已基本具备了CSS2的基本规范，这一点

是其他网页编写软件所不及的。如果不具备这样强大的层叠样式表编辑功能，

Dreamweaver在编写DHTML方面的能力会大打折扣，看一看网页的源代码就会

知道几乎每一个精彩的动画都要靠CSS的参与。当然，要得到理想的显示效果

还要有新的浏览器，我在IE4.01下观看Dreamweaver的例页才得到正确的显示

结果。我向大家推荐使用(0的浏览器，特别是IE。

0

0

0

要编辑或管理层叠样式表首先要从window菜单调出样式浮动面板。如图A

六所示。这个浮动面板一共显示了三个自定义的样式：stylel,style2和style3。浮

动面板上显示的样式都不是HTML关键字。改变HTML关键字是隐含的不直接显

示在这个浮动面板上。对每一种样式我们都可以进行编辑删除、施加于页面元素

等操作。可以通过右击样式的名称来实现上述操作。在将样式施加到页面元素时

可以选中样式再向页面加入新的内容或点中所要施加样式的内容，一行或一段，

再点中样式。所以如果要进行一般的编辑一定要选中(none)一项。如果我们

点样式浮动面板下面的''StyleSheet……”按钮就可以对样式进行编辑。这时弹

出一个对话框。如图A七所示。这个对话框列出了增加或改变的所有样式。“p”

和“pre”的属性更改后在样式浮动面板中不显示而在这个对话框中将列出来。

在这个对话框下部的“Stlyledefinition”栏中显示选中洋式的设置情况，如果设

置内容过多将显示不出来,这个对话框中的“Link”一项指明要设置的样式的外

部链接，即一个css文件。如果我们要定义一个新的样式就点“new”键，这时

弹出"newstyle”对话框，如图A八所示。

00

通过这个对话框我们可以选择自定义的样式、HTML关键字或CSS选择器提

供的各种样式，例图中自定义了一个名为''Styler,的新样式。确定以后会自动

弹出新的对话框使用户对选定样式进行编辑。这个对话框如图九所示，左边一栏

是新样式的各种属性，右面是属性的细节。例图是“type”属性的各种参数.带

星号的参数都是扩展的样式属性，现有的浏览器可能不支持。如图A中的

“type"属性的参数，我们可以设置字体、字的颜色、字间距、字型及附加线等

各种参数值“图A十是以上例子在IE下的显示情况。有关样式表的具体细节十

分庞杂，这里不可能作过多的介绍，有兴趣的读者可以参阅有关资料。

Dreamweaver中精彩的时线功能在下一章介绍。

时线的应用

我想时线应该是Dreamweaver中最精彩的内容了。因为它在实现网页

动画时没有用到ActiveX、以及任何插件或JavaappletsDreamweaver通过改变

层和页面图片在不同时间上的属性来制作动画。也是因为这个原因，用

Dreamweaver编辑的带有层动画的网页必须用4.0或更新的浏览器浏览。用时线

制作动画可以改变的属性有层的位置、大小、透明度或改变各层的上下位置关系。

用时线还可以对页面的各种行为进行设置。也就是说,将行为也纳入时线的编辑,

这使得我们所编辑的网页更富于变化、更精彩。比如我们可以用时线改变一幅不

属于某一个层的图片的文件源（这是制作动画最基本的方法），然后在某一个特

定的帧上执行一个行为。

0下面我们来看一下时线浮动面板。

时线面板负责改变层或图片在整个时

间上的属性。如果要打开这个面板可以

选Window菜单中的timelines命令。下

面我们看这个面板的具体内容。请看图B一。面板上最上一栏是控制项。下面标

有大写B（Behavior）的栏是行为栏，中间是时间标尺，标尺上有一个红色的小

块是监视块，这个小方块表明了当前的显示状况。最下面是各个项目，图中有两

个项目，一个是层项目，一个是图片项目。下面我来介绍时线面板的具体用法。

选择栏中包含对时线名称的选择和修改，当我们建立多个时线时可以用这个选择

项快速地在各时线间穿插，在网页比较复杂时建立多个时线可以更好的编辑或组

织。图中显示的时线是“tmelinel”。接下来的几个按钮是监视位置的选择，最

左边一个是将监视块调到最左边。倒退按钮是将监视块向左移动一小格，播放按

钮是将监视块向右移动一小格，如果当前位置上没有任何项目则使用播放按钮监

视块不会向前滑动，而使用倒退按钮则立即回到项目的尾端（最右端）。这几个

按钮中间是监视块所在的具体位置。可以通过这个框确定监视块的详细位置。

“Fps”框允许作者指定动画每秒的帧数，缺省值为15,这是一个平均数，每秒

15帧在大多数情况下可以达到较好的显示效果。如果浏览者的机器更好的话我

们还可以增加每秒的帧数，这样显示效果更加平滑。这一栏右面的“Autoplay”

检查框是设置动画的播放方式。选中时会弹出对话框告诉用户这一项已选中，当

网页被开启的时候会自动播放动画。如果我们选中“Loop”检查框，也会弹出

对话框告诉用户这一项已选中，动画会循环播放。一般情况下这些项都可以选中，

除非我们为了使网页更灵活而设定在浏览者执行某种动作时播放动画。比如当传

输速度十分有限时，我们可以先使用一幅静止的图片，当浏览者点击这幅图片时

播放动画。这样既分散了等待的时间，使浏览者不至于因为长时间看不到网页而

放弃浏览，又兼顾了网页的质量。我们可以随时点击带有问号的按钮来获得帮助,

就像其它浮动面板上的问号按钮一样。

时线面板中的行为栏功能不凡。我们可以在任意位置上噌加相应的行为以噌

强对页面的控制和对外界的适应。图一中的时间栏中有两个方块，一个黑色，另

一个是中间有黑色减号标志的淡紫色方块,黑色的一个在我们点中行为栏上某个

区域后出现表明已选中这个区域，可以在这个时间上设置行为，选中的同时监视

块也滑到选中的时间上，这样作者可以看到执行行为时页面的状态。另一个表明

在此时线上已设置了行为,我们可以用下面简单的方法设置行为。对已设置行为

的区域双击行为栏上的小方块会弹出行为浮动面板，并显示已设置的行为。关于

行为的设置和修改方法可以参阅上一篇文章。对没有设置行为的区域可以先选中

这个区域，再点击右键弹出菜单（也可以不选，直接点右键，不过这样不容易确

定行为施加的具体时间），选择uAddBehavior"命令以后的情形和上一种完

全一样。我们可以用鼠标点住行为栏中的小方块进行拖动，以改变行为生效的时

间。当我们选择循环执行动画的时候会自动增加一个行为。点击这个行为可以看

到激发这个行为的事件是“onFramexx"，与这个事件相应的是“GoT。Frame

xx”，所以如果这个滑块设置在项目的内部，项目不会得到完整的执行，而滑块放

在项目的外部，在项目完后会有一段停顿。一般我们应该将这个滑块放在项目刚

好结束的位置上，这样以生成无停顿的动画。

一般的用户只需要了解怎样在时线上设置和修改项目就可以完成不错的动

画了。图B—中有两个项目，分列于两栏，表明这两个项目是同步的。如果想要

一个项目在另一个项目执行完指挥执行，简单的方法是将项目用鼠标拖动到另一

个的后方，当然也可以用同样的方法将一个项目拖动到另一个的下方使之与另一

个并列。项目条是淡紫色的，选择整个项目后项目条会变成灰紫色。选整个项目

的时候不要点项目条上的圆点，这些圆点是项目的关键帧，我们可以设置关键帧

来完成整个动画。要改变关键帧的位置，可以用鼠标直接拖动这些圆点。要使整

个项目执行的时间长一些就要向右拖动最后一个圆点，这时整个关键帧的位置都

会改变。如果需要还要对各关键帧的位置重新调整。另一种定量改变项目长度的

方法是点击右键选择“AddFrame**来增加项目长度，选“RemoveFrame”来

缩短项目长度。如果要改变一个项目开始的位置可以拖动这个项目的第一个关键

帧，这时项目会缩短，如果不想改变项目的长度可以点生整个项目拖动到合适的

位置。并且选中整个项目时改变层的属性作用于整个项目。如果要增加或删除项

目，可以选择右键弹出的菜单中的“AddObject""RemoveObject"命令。

所有这些命令都可以在“Modify”菜单中找到。

下一节我们将结合实例对时线进行进一步的讲解。

时线制作的简单的例子

下面我通过一个简单的例子展示用时线编辑动画的具体步骤。为了使动

画更生动，我选择了一幅GIF动画（当然也可以用时线一帧一帧地做图片动画，

这里选择了一幅现成的图片，另外用时线面板做的