Flash技巧之如何掌握遮罩效果动画

技巧

  问题1:遮罩层与被遮罩层是什么关系?

  解决思路

    了解遮罩层和被遮罩层的关系,对于我们掌握遮罩动画是非常关键的。遮罩动画在Flash技术里面起到了重要作用,一些非常优秀的效果就是通过遮罩动画来实现的。例如:著名的“水面涟漪”效果,就是通过遮罩完成的,非常逼真。下面我们就通过不同的制作方法了解遮罩的原理,在实践中领会遮罩的奥妙。

  具体步骤 

    1、运行Flash MX 2004,文档属性默认。 
    2、单击【文件】|【导入】|【导入到舞台】命令,导入一幅位图图片,并调整适当尺寸。 
    3、更改图层1为“闪吧桌面”,并锁定; 
    4、新建图层2命名为“遮罩层”,在遮罩层的第1帧单击文本工具键入“FLASH8.NET”,颜色黑色。 
    5、单击“遮罩层”选择右键菜单中的【遮罩层】命令,把这个普通图层转换为遮罩层。如图2.1.19所示。

2.1.4-1.fla

    注  意  ——如果用文字作遮罩层的话,尽量选用线条比较粗壮的字体,这样才能够更好的表现遮罩效果。 
    提  示  ——◎区分遮罩层和被遮罩层的标准就是你想要显现的形状的图层就是遮罩层。例如在上例中,想要显示的是    “FLASH8.NET”的字形,所以就把这个图层确定为遮罩层。
                ◎对于遮罩层的颜色对于最后的遮罩效果来说是没有作用的。 
    技  巧  ——除了利用移动渐变动画来作遮罩效果以外,我们还可以利用形状渐变动画来制作遮罩效果。 
    试一试  ——要想理解遮罩的原理,我们就要通过反复的实践来了解。朋友们不妨把上例中的遮罩层和被遮罩层换一下位置,看看有什么效果? 
     分  析——遮罩的原理很简单,但是往往初学的朋友对这个道理很难理解。我们不要先研究复杂的遮罩效果,从上例中我们就清晰地了解了遮罩的原理。综合利用这个原理,我们就可以制作出炫目的效果。

  特别提示 

    遮罩效果的实现最关键在于创作者要区分清楚遮罩层和被遮罩层的关系。弄不清遮罩层的关系,头脑中就不会有这方面的想象,从而使自己的创作源泉干涸。通过简单遮罩效果的反复实践,清楚这两者之间的关系,为我们以后的FLASH创作打好坚实的基础。 

  特别说明

    上例制作动态遮罩效果的时候把位图图片转换为图形元件的原因是,此图片是经过缩小的,所以如果不转为元件的话,做移动渐变动画就会有错误,这也是我们在制作过程中应该注意到的。除了文档可以作遮罩效果以外,我们还可以利用图形来制作这个效果。 
    相关问题
    ◎一个遮罩层可以遮罩两个或者更多的层吗? 
    对于这个问题的回答是肯定的。一个遮罩层是可以对两个或更多的图层进行遮罩的。如图2.1.21所示。

    图2.1.21     遮罩两个图层 

    此效果中就是遮罩了两个图层,一个图层从左向右移动,另一个图层由右向左移动。如图2.1.22所示。

    2.1.4-2.fla。 
    ◎可不可以把动画效果制作在遮罩层里面? 
    这个效果就是把移动动画效果制作在遮罩层里面的,如图2.1.23所示。

    2.1.4-3.fla。 
    ◎可以用影片剪辑制作遮罩层吗? 
    影片剪辑的特点是独立与时间线运行,这样的特性可以制作遮罩层吗?我们通过实践得知,影片剪辑是可以制作遮罩层的。如图2.1.24所示。

    图2.1.24     利用影片剪辑制作遮罩层 
    请参考源文件2.1.4-4.fla

  问题2:半透明的遮罩层遮罩图片以后可以实现半透明的遮罩效果吗?

  解决思路 

    这个问题问得非常好,因为根据遮罩层的特点,它是显示这个图层内形状的,对于这个形状里面的填充颜色它是不承认的,所以按照正常的制作思路是无法实现的。但是我们可以通过改变遮罩的另一个关键图层---被遮罩层的透明度来实现这个效果。

  具体步骤 

    1、运行Flash MX 2004,文档属性默认。 
    2、单击文本工具在舞台中键入“《专家门诊》—清华大学出版社”,并分离使之成为矢量图形,设置混色器颜色,线性填充,左边黑色透明100%,右边黑色透明0%。如图2.1.25所示。

    图2.1.27     半透明文字遮罩效果 
    请参考源文件2.1.4-5.fla  
    7、  如何制作出具有透明感的遮罩效果呢?我们把思维方式反过来,遮罩层的文字我们不进行改变,把被遮罩层的透明度进行调整,看看能否实现我们想要的效果。 
    8、  新建一个Flash  MX 2004文档,属性默认。 
    9、把图层1命名为“文字”,同样输入上述的文字,转化为图形元件。 
    10、新建图层2,命名为“透明渐变”。在这个图层里面绘制一个从左至右逐渐渐变的矩形,朋友们可以参考上面的步骤。 
    11、在文字层创建遮罩效果。如图2.1.28所示。

2.1.4-6.fla

    注  意  ——当遮罩层与被遮罩层不对应的时候,在场景中是看不到遮罩层的形状的。 
    提  示  ——因为遮罩层显露的是被遮罩层的内容,所以才可以实现这个效果。 
    试一试  ——上一例中制作的时候渐显的遮罩效果,朋友们可以把被遮罩层的矩形元件反转过来,制作一个逐渐消失的遮罩效果。 
     分  析——这种效果的实现其实和上一个问题的知识没有区别,只是增加了透明度,原理都是同样的。 

    特别提示 
    此例中的遮罩效果在Flash文字动画中经常可以看到,利用被遮罩层的速度、节奏的改变,在视觉上给人以冲击。从另一个角度来讲,这种效果也打破了文字渐显移动动画的局限性。

  特别说明

    图2.1.32      遮罩MC的效果 
    下面是把“遮罩mc”拖动到舞台中,并创建遮罩效果。如图2.1.33所示。

    图2.1.33     嵌套遮罩效果 
    最终显露的遮罩效果只是场景中的效果。请参考一下源文件2.1.4-8。

时间: 2024-12-30 23:28:58

Flash技巧之如何掌握遮罩效果动画的相关文章

如何掌握遮罩效果动画

问题1:遮罩层与被遮罩层是什么关系? 解决思路 了解遮罩层和被遮罩层的关系,对于我们掌握遮罩动画是非常关键的.遮罩动画在Flash技术里面起到了重要作用,一些非常优秀的效果就是通过遮罩动画来实现的.例如:著名的"水面涟漪"效果,就是通过遮罩完成的,非常逼真.下面我们就通过不同的制作方法了解遮罩的原理,在实践中领会遮罩的奥妙. 具体步骤 1.运行Flash MX 2004,文档属性默认. 2.单击[文件]|[导入]|[导入到舞台]命令,导入一幅位图图片,并调整适当尺寸. 3.更改图层1为

Flash制作精美美女遮罩效果动画

先看看演示效果:(文章最后提供了源代码) 制作步骤: 1.首先选一张美女图片 然后用photoshop把美女抽出来 调整边缘使其平滑 如果不会 这里有png原文件 2.新建一个FLASH文档 大小根据你的图片决定 我的是440*600 帧速为40. 3.新建MC1命名为渐变 做一个150*600的由浅灰色过渡到透明的矩形长条: 做好后在场景中删除. 4.新建一个"zhezhao1"mc,打开MC  把第一层命名为"mm1"层,画一个和美女轮廓一样的灰色图形 并转换为

Flash技巧之如何掌握形状渐变动画

技巧|渐变|形状 问题1:在做形状渐变的时候,为什么要把文本元件矢量化? 解决思路 形状渐变动画是Flash基本动画之一,在flash创作中应用范围较广.形状渐变动画是基于形状来完成的,所以我们必须要保证制作形状渐变动画的素材为图形.在Flash中有两种图形分类,一种是位图图形,另一种为矢量图形.只有矢量图形才以制作形状渐变动画.位图,文本,元件等都不可以进行制作此效果.我们只有通过"分离"来矢量化,才可以达到效果.下面我们就以文本为例,说明这个问题. 具体步骤: 1.运行FlashM

Flash制作美丽的蜻蜓飞舞效果动画

演示效果: 点击这里下载源文件 制作步骤: 1.新建立一个Flash文档,修改其属性如下图所示: 2.在主场景中把图层1改名为back,这是背景层,我们选择矩形工具绘制一个550*300的矩形正好和舞台重合,在这里要使用混色器面板,设置线性填充效果如下图: 3.之后我们新建一个元件,画一些草,为了让动画效果更好你可以让草也动起来,在这里我制作的是一个静止的图,如下图所示: 4.接下来我们制作蜻蜓动画,蜻蜓动画其实只是蜻蜓的四个翅膀在动,所以我的方法是先建立翅膀静止的元件,然后建立翅膀动的元件,然

Swishmax制作漂亮遮罩效果动画

先看看效果吧! 点击这里源文件下载 先搞个好看点的背景吧,不能随便画画了事,要对得起大家的眸子~~~ ^o^ 我swishmax钢笔工具用的不好,高手不要见笑~~ 然后导入外部图片 需要做遮罩的对象~ 图片导入以后,将图片转换成精灵(顺便再次对广大swishmax初学者说明,鼠标右键转换,说了不知道多少次了 晕~~)命名为 "mask",在"作为遮罩使用底部对象"前打上"对号!!!在"mask"下插入一个精灵,(精灵一定要放在图片的下面

Flash AS实现的一个水波效果动画

主要使用了遮罩和beginGradientFill来实现,对机器要求比较高,机器不是很好的朋友慎狂点... 点击查看Flash:http://www.alixixi.com/UploadPic/2007-7/200778135930565.swf 主要代码如下: var WaveArray:Array = new Array(); var rel_btn:MovieClip = this.loader.btn; this.createEmptyMovieClip("gradient_mc&quo

Flash制作的好看的图片效果动画

图片效果 看效果: 代码如下: var old:Number = 1; //记录上张显示的图片 var oldGo:Boolean; var oldpos:Number = 700; var picNum:Number = 9; //anliPath是用于加载外部图片的路径 //var anliPath:String = "works/1-"; for (i=1; i<=picNum; i++) {         btn_mc.attachMovie("btn&quo

Flash AS制作上升的水泡效果动画

效果演示: 点击这里下载源文件 如果一个一个的画,工作量繁重并且效果并不好.我们利用AS的复制语句来实现水泡的数量,利用设置属性来改变透明度,大小等.最后在影片剪辑中设置水泡的左右摆动.这样综合在一起,就可以实现水泡上升的效果了. 具体步骤 1,开MX新建一文档.并适当修改文档属性(400×300,蓝色背景) 2,建一个影片剪辑,命名为"h2o".进入编辑去以后,利用绘图工具,渐变填充绘制一个水泡.如图1所示. 图1   绘制水泡 3,回到主场景,把图层1命名为"h2o&qu

Flash制作环绕的立体图片效果动画

立体|图片效果 效果: 点击这里下载源文件 代码如下: var totalPhotoBL:Number = 7; //图片总张数: var angleBL:Number = 2*Math.PI/(totalPhotoBL-1); //角度值,用于平均分配所有图在360度里: var scaleBL:Number = 30; //缩放比例值: var speedBL:Number = Math.PI/180; // 声明一个速度值: for (var i = 0; i<totalPhotoBL;