多语言展示
当前在线:1007今日阅读:155今日分享:35

flashCS6基础教程-17-动画篇5(遮罩续1)

关于遮罩,我这里共有4到5个小案例,效果不错。我的本意是在一节课中介绍2到3个案例(我的计划是遮罩用3节课讲完),但是,在创作过程中发现,要将所有的细节都呈现出来(防止大家对照着学习时由于疏忽一些小细节而导致做不出效果),篇幅就比较的长,花费的精力也成倍增多。所以,写完一个案例之后,就没有精力继续写第二个了,只好挪入下一节课再讲述,结果忘记修改标题了,所以,标题起的有点混乱,好在是连续的几节课都是遮罩动画的讲解,大家多担待哈。后面还有1到2个遮罩的案例了,所以,标题就用 续1 续2来表示==============================本节课讲解的遮罩案例是:非常酷的卷轴特效乃是我在网络上偶然间发现的,效果超级棒,反编译成fla文件之后,经过反复研究,终于弄明白其制作思路,特共享与此。
工具/原料

flashCS6

一、建立文档并设置舞台
1

1、本例对于AS的版本无要求,故可任意设为AS2或AS32、本例需要一张图片当做画卷,因此,需要一张宽度比高度大得多的图片,我用的图片见下图3、将图片导入flash的舞台上,用选择工具选中它,在属性面板内可以看到其 宽高,也就是图片的分辨率。本图片的分辨率是800×300的,我们需要将flash舞台的宽高也设为这个分辨率

2

4、用选择工具单击舞台空白处(取消对于图片的选中状态),在属性面板内可以设置舞台的 “大小”,分别填入 800 和 3005、为了让动画看起来更加的细腻,我们将FPS后面的数值24修改为306、因为后面会绘制一个白色半透明的轴,为了能看到它,必须将舞台的背景色设为与白色反差最大的颜色,故此,将背景色设为黑色如下图1所示7、为了让图片完整的呈现在整个舞台上,我们将图片的xy坐标都设为0【见下图2】如此一来,图片就完整的铺满整个flash舞台

二、静态绘制
1

1、将图片转换成影片剪辑用选择工具单击舞台上的图片之后,按F8键,会弹出一个对话框,如下图所示,选择为影片剪辑元件,将名称修改为图片(不是必须的,这里的名称对于作品的效果无影响。修改名称的唯一好处是,方便制作者弄清楚库内的元件到底是啥)因为我们需要对图片模糊处理,就必须用滤镜。滤镜的作用对象仅有三类:文本、影片剪辑、按钮并不包含图片,所以必须将图片转为元件,虽然按钮也可以加滤镜,但是按钮是用于人机交互的,鼠标移动到按钮上时鼠标会变成小手模样,很显然与本例相悖,故此,本例的图片只有一种选择,那就是被转换为影片剪辑元件。操作后,库面板如下图2所示,有两个对象,一个是图片素材,另一个就是转换成的影片剪辑元件,我们已经将其名称给修改为了 图片

2

2、给图片加模糊滤镜我们要实现如下的特效:一开始看到的是一个模糊的图片,然后通过动画,让图片逐渐变清晰。所以,模糊的图片应该在最底层,清晰的图片放在上层。换言之,需要两个图片。为了步骤尽量简单,我们如下操作:<1>先复制一个图层<2>将图层1复制关闭显示(见下图1)<3>单击舞台上的图片,在属性面板内设置模糊滤镜(见下图2)<4>将图层1复制 图层开启显示(见下图3)<5>为了弄清各图层的关系,我们给图层重命名:下面的命名为 模糊图片 ,上面的 命名为 清晰图片(见下图4)

3

3、绘制 遮罩层 用于显示清晰的图片<1>单击 清晰图层之后,新建图层(这样新建的图层就位于最上层),并重命名为“灰色遮罩层”,<2>使用矩形工具,在舞台上绘制一个无边框、填充色任意(这里设为灰色)的长方形。<3>该长方形的大小以能覆盖住两倍图片宽度为宜,故此,先简单的绘制一个长方形,然后用选择工具单击它,在属性面板内直接修改宽高【务必将下图所示的那个锁单击一下解开,如此一来就不会按照宽高比来彼此影响】<4>马上按F8键,转为图形元件,名称设为灰色遮罩<5>用选择工具单击选中这个元件,将其移动位置,使其的最右端和图片的最左端对齐(见下图2),可以使用键盘上的方向键对 对象 进行微调。

4

4、绘制 轴<1>新建一个图层,重命名为 轴<2>使用矩形工具,去掉边框,填充色设为白色,在舞台上绘制一个长方形,其高度要超过舞台的高度,宽度就视喜好而定,比如说做成下图的模样<3>使用选择工具单击这个长方形,按F8键,转为图形元件,名称设为 轴<4>见图2按照数码顺序操作:我们在库面板内,双击 轴 的图标①,就可以进入其内部进行编辑,先用选择工具②单击舞台上的长方形③,然后打开 颜色 面板④,单击⑤那里(表示接下来要设置填充色),然后在⑥那里列表中选择 线性渐变,此时⑦附近有两个滑块,但是我们共需要四个滑块,故在⑦处单击一下鼠标,发现添加了一个新的滑块,同理添加第四个滑块。然后需要设置四个滑块的Alpha属性(在⑧那里设置,图示的是滑块2的Alpha值,我给设置为5%),设置的方法是:先单击滑块,然后再直接在⑧那里A:后面单击数字后输入新的值即可。四个滑块的A值从左到右依次设置为 40 、5、  5、 40设置完毕后,用选择工具单击舞台空白处,就可以看到效果了(见图3),万一你的效果和我的不一样,请单击工具箱内的颜料桶工具(快捷键K),然后在长方形上从左向右拖动鼠标(见图4),拖动时一定注意,必须完全控制在长方形的内部,不能超出长方形的范围,否则无效(可以适当的放大舞台)单击场景1 即可进入主场景(见图5)

三、本节课小结
1

1、没想到篇幅会如此的长,我已经到极限了,所以,本节课的核心内容只能放到下一节再阐述了,非常抱歉。请将当前制作的成果保存起来执行菜单栏中的  文件 >保存将文件名设为 17.时尚转轴动画.fla

2

2、本节课新介绍了 颜色面板,只不过一带而过(为防冲淡重点),我会在后续教程中专门阐述。3、本节课还介绍了以假乱真的半透明圆柱体的绘制方法,请大家仔细体会。4、本节课还介绍了属性面板内的 滤镜,后续教程会进行深一步的讨论。特别注意:滤镜是从flash8开始引入的,如果你用的flashIDE版本号低于8,将没有这个效果。而且,flash8版本的滤镜不在属性面板内,而是一个单独的面板。因此,为了能与本教程高度统一,请大家务必使用flashCS6版本对照学习

推荐信息