搜狐首页 - 新闻 - 体育 - 娱乐 - 财经 - IT - 汽车 - 房产 - 女人 - 短信 - 彩信 - 校友录 - 邮件 - 搜索 - BBS - 搜狗 
搜狐首页 >> IT频道首页 >> 网狐教程 >> 网站制作 >> Flash
第六节:Flash 的图层应用二
2001-12-27 15:49  作者: 小雷  转自: 赛迪网
页面功能 【我来说两句】【我要“揪”错】【推荐】【字体: 】【打印】 【关闭
lass="content">

除了导引层,Flash 还有很多其他图层应用方法,下面我们再谈谈 Flash 的图层遮罩问题。

一.Flash 遮罩基础:

从前面学到的知识我们知道:层是透明的,最上面的层的空白处可以透露出下面层的内容,Flash 的遮照跟这个原理正好相反,遮罩层的内容完全覆盖在被遮罩的层上面,只有遮罩层内有内容的地区可以显示下层图像信息。

提示:不知大家看到过探照灯似的 Flash 没有,黑色的背景上,只有一个探照灯,灯光打到什么地方就显示出该处的内容。而这种技术的制作思路正是脱胎于 Flash 遮罩的。探照灯与灯光是遮罩层,要显示的信息是被遮罩层,当遮罩层的内容即灯光打到某个位置,被遮罩的下层信息则显示出来。(制作步骤详见实例二)

二.Flash 遮罩实例一:

最终结果请见 Resource 文件夹中的 Mask-1 文件,ABCD 四个字从左向右移动,移动的地方会透露出下层的红叶背景。重点在第 8 点。

1.File(文件)/Import(输入),找到 Resource 文件夹中的 Redflower.gif 文件并将其输入到 Flash 中,然后按 Ctrl+L 键打开库窗口(Library)。如图一:


图一

2.将输入的组件 Redflower 拖入到第一帧的工作区中,并调整大小,最好该图片能够布满全层,以保证遮罩层的文字无论移动到哪里都有下层信息透露出来。

提示:Flash 可以处理矢量图与位图,矢量图的优点在于,不论如何调整它的大小,文件本身的体积不会改变;位图则不行,重新调整位图的大小会改变图像的像素排布,因此,位图图像变大则文件体积变大,位图图像缩小则文件体积变小。

提示:在 Flash 中,请尽可能地使用矢量图,而且在做成组件时请尽可能地变小,因为在应用到时可以将其变大而不会增加整个动画的体积。做为一个制作常识,大家应该予以掌握。

3.新建一个图片类型(Graphic)的组件,并输入 "ABCD" 四个字。如图二:


图二

4.新建一个层(Layer 2)并将新建的 "ABCD" 组件拖进去。因为要让字体体从左移到右,所以请把该组件放到工作区外靠左边界处。如图三:


图三

提示:放到工作区外的组件在动画开始时是看不见的,如果它移动到工作区内则变得可见。

5.我们要让整个动画延续 20 帧,因此在第 20 帧处插入一关键帧,并把 "ABCD" 组件拖到工作区右边边界外,如图四:


图四

6.现在为 Layer 2 层创建动作。由于只涉及到位移变化,因此可以直接在第 1 帧的鼠标右键中选择 Creat Motion Tweening (创建移动渐变),当然也可以在 Frame(帧)面板中选 Motion(移动)类型来决定动作。完成后时间轴如图五:


图五

7.第一层(Layer 1)到目前只有一帧有内容,我们要保证整个动画(共 20 帧)都要有 Redflower 背景,因此选中第一帧,并在第 20 帧处插入普通帧(Insert/Frame),此时的时间轴窗口如图六:


图六

8.现在是关键的一步,即让 Layer 2 成为 Layer 1 的遮照层!选中 Layer 2(层二),并在右键弹出菜单中选择 "Mask(遮罩)",完成后层窗口如图七:


图七

提示:工作区内变成一片空白了吧?这是因为遮罩层第一帧的内容在工作区外,所以下层内容不能透露出来。

9.好了,制作已经完成,现在按 Ctrl+Enter 键进行测试吧。

三.Flash 遮罩实例二:

最终结果请见 Resource 文件夹中的 Light-mask 文件。摄影机投射出光束,光束照射的地方显示出文字信息,没有灯光的地方则漆黑一片。重点在于遮罩的思路,以及第 7 点即"旋转点"的改变。

制作思路:可以在最底层摆放文字,第二层放灯光,灯光要能转动。第二层作为遮照层,也就是说第二层灯光打到的地方才能显示第一层的文字;由于在整个动画中摄影机图标始终可见,我们可以再建一个新层即第三层来放摄影机图标。摄影机也要能够转动,而且还要能够与第二层的光束转动同步。

1.先制作组件,本例中用到三个组件,字体组件、光束组件、摄影机组件。如图八:


图八

提示:字体组件,随便输入些字就行了,但要保证灯光打到的方有字显示,所以多输入点内容;而且,由于是黑色的背景,字体最好采用白色,这样更有灯光效果;光束组件,可以先画个比较窄的矩形,然后用箭头工具(Arrow Tool)选中矩形下端的一个端点并向外拖动,完成后再拖动另外一个端点,你会发现矩形变成了梯形,而这正是我们所需要的形状;摄影机图标,可以直接从 Resource 文件夹中输入,文件名为 light.gif 。

2.组件制作完毕,现在把它们放到场景中。在第一层(Layer 1)放文字组件,如图九:


图九

3.新建一层(Layer 2),准备将此层作为遮罩层。然后将光束组件放进去。如图十:


图十

4.新建一层(Layer 3),用来放置摄影机。如图十一:


图十一

5.调整和旋转摄影机的位置,由于灯光与摄影机同步的,因此也请将灯光组件作相应的调整与旋转。如图十二:


图十二

6.现在来制作摄影机的旋转动作:在第 20 帧处插入关键帧(Keyframe),然后将摄影机旋转到合适位置,如图十三:


图十三

7.现在来调整光束的旋转动作。正如上面所说,光束的旋转必须与摄影机同步,因此有必要改变光束的旋转点,标准说法是组件的"注册点"(Register Position)。如图十四:


图十四

当我们选中一个组件时,会在组件正中出现一个"+"符号,而这个符号正代表该组件的注册点,当对这个组件进行有比例的大小缩放或者进行旋转时,就是以这个注册点为中心点进行的。我们要让光束的旋转跟摄影机旋转同步,则需将光束的旋转点与摄影机的旋转点重合,这样才能做到旋转同步。

选中光束组件,使用菜单中"Modify(修改)/Transform(变形)/Edit Center(编辑中心)"命令,结果如图十五:


图十五

用鼠标拖动注册点跟摄影机的注册点重合,如图十六:


图十六

8.注册点移到合适位置了,现在在第 20 帧插入关键帧,并将光束旋转到与摄影机同步的合适位置,如图十七:


图十七

9.现在为光束与摄影机指定动作类型,选中它们所在的层的第一帧,并在右键弹出菜单中选择 "Creat Motion Tweening(创建移动渐变)",完成后的时间轴如图十八:


图十八

10.在层窗口中选中第二层并在右键菜单中选择"Mask(遮罩)",使第一层(Layer 1)成为被遮罩的对象;最后将第一层的文字背景延续到第 20 帧去。如图十九:


图十九

11.现在制作完毕,按 Ctrl+Enter 键,是不是成功了呢?

四.Flash 遮罩实例三:

最终结果请见 Resource 文件中的 Mask-3 文件。本例中,文字成为遮罩层,而被遮罩的风景图片通过文字反映出来,同时从左向右移动。

制作思路:文字成为遮照,那么文字的尺寸必须大点才能显示出比较连续的下层图片信息;文字不能移动,那么风景图片就得移动,我们可以把一组图片输入到 Flash 中并由这一组图片共同组成一个组件,最后给风景图片做个位移动画,并将文字层设为遮罩层就行了。

1.首先将四张风景图片输入 Flash ,它们全部在 Resource 文件夹中,名字分别为 Flashmask-1.jpg、Flashmask-2.jpg、Flashmask-3.jpg、Flashmask-4.jpg 。然后打开库窗口,如图二十:


图二十

2.现在把输入的四张图片共同组成一个图片组件以便调用。新建组件,然后分别将图片拖入工作区,注意图片与图片之间不要出现缝隙。如图二十一:


图二十一

3.再新建一个组件来放字体 Flash ,字写大点,采用黑体。调整字体的大小及其他属性,可以在 Flash 的 Character(字符) 面板上进行。字体大小我们将其定为 150 。如图二十二:


图二十二

提示:字体大小设置最大才 96 呀,如何设为 150 ?呵呵,不管它旁边的竖拉条,直接输入 150 ,再按回车键就行了。如图二十三:


图二十三

4.所有组件制作完毕,现在将它们放进场景中。在第一层(Layer 1)放图片组件,第二层(Layer 2)放文字组件,请注意它们的位置,其中,图片组件的右边缘与 "Flash" 组件右边缘对齐。由于我们要让第二层的字从动画开始就一直可见,所以不能如实例一那样把被遮罩的对象放到工作区外,也不能放到文字能显示的范围外。如图二十四:


图二十四

提示:为什么不能?大家在完成本例后可以试着将被遮罩对象放到工作区外,看一下会产生什么问题。

5.回到第一层,在第 20 帧处插入关键帧(Keyframe),并将本层上的图片组件进行位移,左边界与 "Flash" 左边界对齐。如图二十五:


图二十五

6.第一层由第 1 帧向第 20 帧定制位移动作。

7.第二层在第 20 帧处插入过渡帧(Frame),让不动的文字延续整整 20 帧。

8.最后将第二层(Layer 2)设为遮罩层,此时的时间轴窗口如图二十六:


图二十六

9.按 Ctrl+Enter 键进行测试,有问题没有?

2003十大“IT风云人物”
页面功能 【我来说两句】【我要“揪”错】【推荐】【字体: 】【打印】 【关闭





ChinaRen - 繁体版 - 搜狐招聘 - 网站登录 - 帮助中心 - 设置首页 - 广告服务 - 联系方式 - 保护隐私权 - About SOHU - 公司介绍
Copyright © 2004 Sohu.com Inc. All rights reserved. 搜狐公司 版权所有

相关连接

 ■ 我来说两句
用  户:        匿名发出:
请各位遵纪守法并注意语言文明。
 
*经营许可证编号:京ICP00000008号
*《互联网电子公告服务管理规定》
*《全国人大常委会关于维护互联网安全的规定》
短信内容:
手 机
自写包月5分钱/条 更多>>
搜狐天气为你抢先报! 魔力占卜姻缘一线牵!
金币不是赚的是抢的! 爱情玄机任由你游戏!
猪八戒这样泡到紫霞! 帅哥一定要看的宝典!
你受哪颗星星的庇护? 萨达姆最新关押照片!
精彩彩信
[和弦]欧若拉 一生有你
沧海一声笑
[音效]挪威的森林
爆铃 MP3 G点图 动画
[和弦]童话 你到底爱谁
[原唱]一千年以后 断点
[爆笑音效]赚钱拉 野花
[串烧]张韶涵 潘玮柏
精彩短信
[和弦]小薇 好心分手
[音效]当当当当 忘记


搜狐商城
·家电|品牌风扇新品热销
·音乐|秦海璐幸福回味
·图书|《眼镜蛇事件》
更多...