Web标准网页设计原理与前端开发技术
上QQ阅读APP看书,第一时间看更新

3.2 制作缩放自如的文字

在“时间轴”面板中,可以在不同帧中设置不同的画面。这样,不同帧中的画面连续播放,即可产生动画效果。

例3-1】 利用时间轴制作缩放自如的文字。制作步骤如下:

(1)新建Flash文档。进入Flash后,在菜单栏中选择“文件”|“新建”命令。在弹出的“新建文档”对话框中选择“Flash文档”类型。然后单击“确定”按钮,即可新建Flash文档,并打开动画场景编辑区。

(2)设置Flash文档及动画场景的属性。在菜单栏中选择“修改”|“文档”命令,则会弹出“文档属性”对话框。如图3-2所示,在“文档属性”对话框中将动画场景的“尺寸”设置为800px(宽)×80px(高),设置动画场景的“背景颜色”,并将“帧频”设置为12fps。

(3)创建图形元件。在菜单栏中选择“插入”|“新建元件”命令。如图3-3所示,在弹出的“创建新元件”对话框中输入新元件的名称“欢迎文字”,并选择“图形”类型。然后,单击“确定”按钮,即可创建一个图形元件,并将该图形元件添加到Flash窗口右边的“库”面板中。同时,在Flash窗口的中间打开元件编辑区。

(4)添加文本。在“工具”面板的“工具”区域中选择“文本工具”,然后在元件编辑区中输入文本“网页设计与制作”。

图3-2 设置Flash文档及动画场景的属性

图3-3 创建新元件

(5)设置文本的属性。在“工具”面板的“工具”区域中选择“选择工具”可以选中“网页设计与制作”整个文本串。如图3-4所示,在“属性”面板中设置字体、字体大小、宽、高、X和Y等属性,使文本位于元件编辑区的正中央。

图3-4 设置文本的属性

(6)分离文字并设置单个文字的颜色。在菜单栏中选择“修改”|“分离”命令,即可将整个文本串分离成单个的文字。分别选中每个文字,通过“属性”面板设置单个文字的颜色。

(7)切换回动画场景编辑区。在Flash窗口上方有“时间轴”面板,在该面板的左上方选择“场景1”,可以从元件编辑区切换回动画场景编辑区。

(8)在场景中添加元件。从Flash窗口右边的“库”面板中,将“欢迎文字”元件拖曳到“场景1”编辑区,可以在场景中添加元件。

(9)在第1帧中设置元件的大小及其在场景中的位置。如图3-5所示,在“属性”面板中设置宽、高、X和Y等属性,使元件位于动画场景编辑区的正中央。此外,还可以设置元件的亮度。此时,该元件及其画面就出现在“场景1”的第1帧中。

图3-5 设置元件的大小及其在场景中的位置

(10)在关键帧中复制元件及其画面。在“时间轴”面板中右击第20帧,在弹出的快捷菜单中选择“插入关键帧”命令,即可将第1帧中的元件及其画面复制到第20帧中。

(11)在第20帧中设置元件的大小及其在场景中的位置。在“属性”面板中,将元件的宽、高、X和Y等属性分别设置为700、70、50和5。

(12)指定中间帧中画面的生成方式。在“时间轴”面板中选择第1帧,然后在“属性”面板中将“补间”设置为“动画”,选中“缩放”复选框,并将“旋转”设置为“自动”,如图3-6所示。这样,可以指定从第1帧到第20帧之间的每帧中画面的生成方式。

图3-6 “属性”面板

(13)观察动画效果。在菜单栏中选择“控制”|“测试影片”命令,可以观察从第1帧到第20帧每帧画面的连续播放效果。

(14)保存Flash文档。在菜单栏中选择“文件”|“保存”命令,在弹出的“另存为”对话框中选定相应的文件夹,将文档命名为3-1.fla。然后单击“保存”按钮,即可将动画设计结果保存在.fla格式的Flash文档中。

(15)生成.swf文件。在菜单栏中选择“文件”|“发布”命令,即可根据Flash文档生成同名的.swf文件。

(16)播放SWF动画。使用Macromedia Flash Player软件打开文件3-1.swf,即可播放SWF动画。

注意:

① 使用Flash,可以对.fla文件中的动画及其中的元件进行重新处理和加工,但不能对.swf文件进行重新处理和加工。此外,还可以使用其他的视频软件播放.swf文件中的动画,而且.swf文件有很好的动画效果。

② 比较.fla文件和.swf文件的大小,可以发现: .swf文件占用更少的存储空间。因此,在网络中传输.swf格式的动画文件所需的时间开销更小,可以使网站访问者体会到较快的浏览速度。