您好!欢迎您光临遮罩变换的制作原理与方法_迎客松B站!

体育

I

交友

I

论坛

I

会员注册

I

本站搜索

I

收藏本站

当前位置:首页 >>>实例教程>>>遮罩变换的制作原理与方法
遮罩变换的制作原理与方法
发表日期:2012/9/19 9:52:00 出处:迎客松 作者:翠柏 发布人:hsb345 已被访问 3885

 遮罩变换的制作原理与方法

   

    教学目的:通过本节教学了解和掌握通过遮罩的巧妙变换,打造实例若隐若现的动画效果,以增强你作品的观赏性与趣味性。

  教学对象:本教材是针对有一定动画制作基础和对属性面板、工具箱和其它面板有所了解的朋友们编制的,因此省略了一些步骤,还望谅解。

    教学要点:遮罩、滤镜。

 

    

    前言:这个作品,是我三年前根据一位老师的网上文字教程而进行的习作,有朋友看到我的作品后,一再问我是如何制作的?此教程现在找不到了,编写教程的老师是谁我也记不清。所以,我按我的习作编写了下边的教程。翠柏在此谢过那位尊师,并向他问好!

    作前准备

    下载六张猫咪图片,规格均为550*400,经过制图软件(ps、fw)处理后,放到指定的文件夹待用。

    制作步骤

    1.启动FLASH8 软件

    2.确立文档属性

    设置动画尺寸为550*400,背景颜色黑绿,其它默认,点击确定,进入场景1工作区。如图1所示:


图1

    3.首先将准备好的图片导入到库中,并将其转换为图形元件,分别命名为图片1-图片6(规格均为550*400)。待用。

    4.创建图形元件

    选择“插入-新建元件”,创建一个名为“椭圆框”的图形元件,点击确定,进入元件编辑区。就一个图层。

    选择图层1第1帧,用椭圆形工具在舞台拖一个笔触高度为5,笔触颜色为红色,规格为520*380的,无填充色的椭圆,全居中。如图2所示:

图2

    5.创建影片剪辑元件

    (1)选择“插入-新建元件”,创建一个名为“边框”的影片剪辑元件,点击确定,进入元件编辑区。就一个图层。

    选择图层1第1帧,用矩形工具在舞台拖一个规格为550*400的,无边线的黑色矩形(图3-1);全居中。在矩形外,用椭圆形工具拖一个规格为520*380的,无边线的红色椭圆(图3-2);全居中,和矩形重叠(图3-3);点击该椭圆,起麻点后删除(图3-4)。其流程,如图3所示:



图3

    (2)选择“插入-新建元件”,创建一个名为“矩形”的影片剪辑元件,点击确定,进入元件编辑区。就一个图层。

     选择图层1第一帧,用矩形工具在舞台拖一个规格为550*50的、无边线的矩形,颜色随意。全居中。用任意变形工具选中该实例,将其注册点移到上中,在第30、60帧插入关键帧。点击第30帧上的实例,改规格为550*1,创建这两个区域间的形状补间。如图4所示:

图4

    (3)选择“插入-新建元件”,创建一个名为“方形”的影片剪辑元件,点击确定,进入元件编辑区。就一个图层。

    选择图层1第一帧,用矩形工具在舞台拖一个规格为50*50的、无边线的矩形,颜色随意。全居中。用任意变形工具选中该实例,将其注册点移到左中,在第30、60帧插入关键帧。点击第30帧上的实例,改规格为1*50,创建这两个区域间的形状补间。如图5所示:



图5

    (4)选择“插入-新建元件”,创建一个名为“菱形”的影片剪辑元件,点击确定,进入元件编辑区。就一个图层。

    选择图层1第一帧,用矩形工具在舞台拖一个规格为50*50的、无边线的矩形,颜色随意。全居中。点击该实例,选择“修改-变形-顺时针旋转90°”,再用任意变形工具选中该实例,将其注册点移到左中,在第30、60帧插入关键帧。点击第30帧上的实例,改其宽为1,高度不变,创建这两个区域间的形状补间。如图6所示:

图6

    (5)选择“插入-新建元件”,创建一个名为“矩形遮罩”的影片剪辑元件,点击确定,进入元件编辑区。就一个图层。

    选择图层1第一帧,分别依次从库中拖出11个“矩形”影片剪辑元件到舞台,从上到下排列好,均水平中齐,彼此间无空隙。如图7所示:


图7

    (6)选择“插入-新建元件”,创建一个名为“方形遮罩”的影片剪辑元件,点击确定,进入元件编辑区。就一个图层。

    选择图层1第一帧,分别依次从库中拖出11个“方形”影片剪辑元件到舞台,从左到右排列好,垂直中齐,彼此间无空隙。如图8所示:

图8

点击第一帧,选中舞台所有实例,将其转换为影片剪辑元件。从库中拖出该元件将其放置在舞台第一个实例的下方,无空隙,水平中齐。点击该实例,选择“修改-变形-水平翻转”。如图9所示:

图9

在从库中拖出此元件,其放置在舞台第二个实例的下方,无空隙,水平中齐。如此再拖出8个这样的影片剪辑元件(此时舞台共有11个这样的影片剪辑元件),依次竖向排列好,每隔一个,水平翻转。最终舞台实例显示,如图10所示:

图10


    (7)选择“插入-新建元件”,创建一个名为“菱形遮罩”的影片剪辑元件,点击确定,进入元件编辑区。就一个图层。

    选择图层1第一帧,分别依次从库中拖出8个菱形影片剪辑元件到舞台,从左到右排列好,垂直中齐,相互衔接,彼此间无空隙。如图11所示:


图11

点击第一帧,选中舞台所有实例,将其转换为影片剪辑元件。从库中拖出该元件将其放置在如下图所示的位置,无空隙。如图12所示:


图12

在从库中拖出此元件,其放置在舞台第二个实例的下方,无空隙。如图13所示:

图13

如此再拖出13个这样的影片剪辑元件(此时舞台共有16个这样的影片剪辑元件),按照上述规律、方法依次竖向排列好。最终舞台实例显示,如图14所示:

图14

    6.编辑制作场景

    返回场景1,添加四个图层,共五个图层。自下而上命名为,图片2、图片1、遮罩、边框、椭圆。

    (1)选择图片2图层第一帧,从库中拖出图片2图形元件到舞台,全居中。如图15所示:



图15

在第61帧插入空白关键帧,从库中拖出图片3图形元件到舞台,全居中。同理同种方法在第121帧、181帧、241帧、301帧完成图片4、图片5、图片6、图片1图形元件的操作。在第360帧插入帧。上锁。

    (2)选择图片1图层第一帧,从库中拖出图片1图形元件到舞台,全居中。如图16所示:


图16

在第61帧插入空白关键帧,从库中拖出图片2图形元件到舞台,全居中。同理同种方法在第121帧、181帧、241帧、301帧完成图片3-图片6图形元件的操作。在第360帧插入帧。上锁。

    (3)选择遮罩图层第一帧,从库中拖出“矩形遮罩”影片剪辑元件到舞台,全居中。在如图17所示:

图17

在第61帧插入关键帧,点击该帧上的舞台实例,选择“修改-变形-顺时针选择90°”。如图18所示:

图18

在第121帧插入空白关键帧,从库中拖出“方形遮罩”影片剪辑元件到舞台,全居中。在如图19所示:

图19

在第181帧插入关键帧,点击该帧上的舞台实例,选择“修改-变形-顺时针选择90°”。如图20所示:



图20

在第241帧插入空白关键帧,从库中拖出“菱形遮罩”影片剪辑元件到舞台,全居中。在如图21所示:

图21

在第301帧插入关键帧,点击该帧上的舞台实例,选择“修改-变形-顺时针选择90°”。如图22所示:

图22

在第360帧插入帧。设置该图层为遮罩层


    (4)选择边框图层第一帧,从库中拖出“边框”影片剪辑元件到舞台,全居中。点击该实例,打开滤镜,设置其参数,如图23所示:



图23

在第360帧插入帧。上锁。

    (5)选择椭圆图层第一帧,从库中拖出“椭圆框”图形元件到舞台,全居中,在第360帧插入帧。上锁。如图24所示:


 图24


    7.本作业完成后的时间轴,如图25所示:


图25

    8.测试存盘。

 
    说明:
 
    图片2图层在第1、61、121、181、241、301帧上的图片依次是图片2、图片3、图片4、图片5、图片6、图片1;图片1图层在第1、61、121、181、241、301帧上的图片依次是图片1、图片2、图片3、图片4、图片5、图片6。
 
最终效果显示:


http://hsb345.16789.net/domName/hsb345/201055046550503.swf

 

全屏下载

 

祝你成功!

 

进入更多教程

双击自动滚屏 【打印本页】 【关闭窗口
 相关评论:



369627483
(2010/7/8 21:29:00) [60.165.117.]

天啊,我的方形遮罩怎么做了一天也是和距形的一样啊,问题在哪里呀?老师不是说教程改了吗?怎么照教程做不出来,请你百忙中指点!


雪儿
(2010/5/16 21:56:00) [117.83.19.]

老师好,请指教下,图做好后,为什么导出来的GIF格式的图片不显示若隐若现的动画效果,只是过一会会自动跳成另一张图片,该如何处理?


zfl16899
(2010/5/12 19:19:00)

老师您辛苦了.谢谢你!


hsb345
(2010/5/10 17:28:00)

谢谢冰点阳光朋友的纠正,你说的对,看来你真正认真领会教程了,我很高兴。教程我作了调整,问候!


冰点阳光
(2010/5/10 13:49:00) [218.200.140.]

老师您辛苦了。我按此教程制作,发现方形遮罩和矩形遮罩效果完全相同,可能是您忙中疏忽了一点:方形组合条水平翻转和“矩形”实质一样。后来我将“方形”每间隔一个垂直翻转才成功。

 发表评论:共有 6 条评论

身份选择:会员 游客(游客不需要输入密码)
用 户 名: 密 码:
评论内容:
(最多评论字数:500)

迎客松B站 | 设为首页 | 加入收藏 | 联系我们 | 进入管理 | 关于站长 | 本站搜索

联系电话: 联系人:翠柏

琼icp备09005167