Flash AS2入门教程第七课：影片剪辑第6节使用遮罩

Flash AS2入门教程第七课：影片剪辑第6节使用遮罩
分类：flash入门教程
Flash AS入门教程第七课：影片剪辑第6节使用遮罩
第6节 使用遮罩
遮罩是flas*制作常使用的一种技术。它可形面一个空洞使被遮盖的对象能透过空洞成形为可见。在flash舞台上常使用遮罩层来实现这个技术。在AS中则常采用MC来实现遮罩。将遮罩对象和被遮罩对象均制作成MC，然后使用setMask（）方法即可实现遮罩效果。
setMask（）方法：
MC的setMask（）方法，可使一个MC成为自已的遮罩。
MC．setMask（另一个MC）；
练习：在舞台上画一个矩形，将其转换为MC，实例名称为：jx_mc.
再画一个小一点的园，将其转换为MC，实例名为yun_mc;
将园放到矩形上，打开动作面板，输入：
jx_mc.setMask(yun_mc);
yun_mc.onPress=function(){
this.startDrag(true);
}
yun_mc.onRelease=function(){
stopDrag();
}
测试影片，园已成了矩形的遮罩。
遮罩设备字体文本：
经常有人问，为什么我做的文本被罩后，点播放有遮罩效果，测试影片时，就什么都没有了呢？以前我们都教别人的做法是，将文本打散，因为文本打散后就是图象了，就可以有遮罩效果了。这样做是比较简单一些，但有个问题，打散后的文字有可能笔画会粘连在一起不好看。我们还是想为什么文本就不能被遮罩呢？这是因为你使用了设备字体。在flash中设备字体不能用遮罩层来遮罩，只能用MC来遮罩，也就是说只能用上面的方法实现。
练习：新建一MC，用文本工具输入一句话（使用设备字体）。回到主场景，将文本MC拖到舞台上。实例名称为：wb_mc.在文本的左边画一个无笔触，任一填充的矩形，高同文本，宽10象素左右。转换为MC，实例名称为：zz_mc.双击它，进入编辑状态，在第40帧插入关键帧，用变形工具将它拖成与文本一样长，遮住文本，创建补间动画。回到主场景，新建一层，打开动用面板，输入：
wb_mc.setMask(zz_mc);
测试影片，我们要要的遮罩效果出现了。
关于 Alpha 通道遮罩：
我们常常看到一种效果，有人把它叫模糊遮罩，有人把它叫羽化遮罩。一眼看上去，聪明如我的家伙们就知道这是一种遮罩效果。这无非就是遮罩层透明度降低一些，或使用模糊滤镜。于是信心满满地就开始做了，结果是可想而知的，失败！
Flash把这种遮罩叫做Alpha 通道遮罩，使用这种遮罩可以设置遮罩元件的透明度，也可以使用滤镜效果。但使用这种遮罩必须注意两点：1. Alpha 通道遮罩：不支持遮罩层的遮罩方式，只能使用MC来遮罩。2.遮罩MC和被遮罩MC都必须使用“运行时位图缓存”。
下面我们来做个练习，进一步掌握本节所介绍的内容。
效果：
1. 新建一flash文档，导入一张背景图片和一张观音图片。
2. 先制作元件，新建一MC，取名为观音，将观音图片拖入，调整大小，居中对齐。
3. 新建一MC,取名为遮罩观音，将观音元件拖入居中对齐，打开属性面板，实例名称为：img_mc,在“使用运行时缓存”前打钩。在200帧插入帧，上锁。新插入一图层画一个无笔触任一填充色的椭园，如下图：
将这个椭园转换为MC，实例名称为：zz_mc, 在“使用运行时缓存”前打钩。打开滤镜面板，为zz_mc添模糊滤镜，值为100.在第30 帧插入关键帧，回到第一帧，将椭园缩小到2像素，建立补间动画。在第90帧插入关键帧，在第120帧插入关键帧，将椭园缩小到2像素。在第200帧插入帧。上锁。新建一图层，取名为action，打开帧动作面板，输入：
img_mc.setMask(zz_mc);
4. 新建一MC,取名为“文本”，用文本工具输入，如下图的文字，使用设备字体。


5. 新建一MC，取名为“遮罩文本”，将文本元件拖入居中对齐，实例名称为：wb_mc, 在“使用运行时缓存”前打钩。在170帧插入帧，上锁。新插入一图层，画一无笔触线型填充色，左色标透明度为0，右色标透明度为100的矩型，矩型左边与文本右边对齐，如下图：


将矩型转换为MC，实例名称为zz2_mc, 在“使用运行时缓存”前打钩。在第30帧插入关键帧，将矩型右边与文本右边对齐，建立补间动画。在第60帧插入关键帧，在第90帧插入关键帧，将矩型的左边与文本的右边对齐，在第170帧插入帧，上锁。新建一层，取名为action，打开帧动作面板，输入：
wb_mc.setMask(zz2_mc);
6. 回到主场景，将背景图片拖入，打开对齐面板，相对于舞台，宽高匹配，居中对齐。在200帧插入帧。上锁。
7. 新建一层，将遮罩观音元件拖入，放于舞台中间上部，在200帧插入帧。
8. 新建一图层，在30帧插入关键帧，将遮罩文本拖入，放于舞台右边上部，在200帧插入帧。
OK，完成了。
本练习中的素材：


Flash教程：制作漂亮流动的图片效果
浏览：5 | 发布于：2009.02.11 | 分类：flash入门教程
Flash教程：制作漂亮流动的图片效果
现在开始制作：
1. 新建一flash文档,550x400。
2. 导入几张图片，几张就随你高兴罗，我这里是4张。
3. 将一张图片拉到舞台上，设置图片宽为1100,高为400。打对齐面板相对于舞台右对齐。

4. 第50帧插入关键帧，点击图片，打开对齐面板相对于舞台左对齐。建立补间动画。
5. 新插入一层，画一无笔触任一色矩形，大小为550x400，居中对齐。第50帧插入帧，右击该层，设为遮罩层。

6. 新插入一层，将同一图片从库中拖出，打开对齐面板，宽，高匹配（即550x400），居中对齐。第50帧插入
帧。

7. 新插入一层画一无笔触任一色的矩形，大小为550x400，居中对齐，用变形工具将注册点移到右边中间。在第50帧插入关键帧。回到第1帧，将矩形宽度缩小到5像素。建立补间动画。设为遮罩层。

这样流动的图片效果就做成了。
8. 你可以在第一帧的第51帧，插入空白关键帧，将第2张图拖入，这一次图片的宽度为550，而高度为800.在第100帧插入关键帧。第1帧相对舞台上对齐，第100帧下对齐，建立补间。
9. 第2层的第100帧插入帧。
10. 第三层第51帧插入空白关键帧，将相同图片拖入，大小匹配，居中对齐。
11. 第四层第51帧插入空白关键帧，画一无笔触任一色的矩形，大小为550x400，居中对齐，用变形工具将注册点移到上边中间。在第50帧插入关键帧。回到第1帧，将矩形高度缩小到5像素。建立补间动画。设为遮罩层。

12. 在第101帧做第三张图片，做法同上面两张图片，只是注意一点，第一层图片的运动方向跟第4层的遮罩运动方向刚好相反。
13. 你还要加几张图片就随你高兴了。
Flash AS2入门教程第七课综合练习：制作拼图游戏
浏览：5 | 发布于：2009.02.11 | 分类：flash入门教程
Flash AS入门教程第七课综合练习：制作拼图游戏
本练习通过一个拼图游戏制作，进一步熟悉MC的拖放与撞碰检测的应用。为了使碰撞检测的几种方式都能得到应用，我们将游戏分为高、中、低三个级别。现在我们来分析一下游戏的实现和级别找分依据。我们将一张图片撕碎以后，将碎片转换为MC，并复制一份，将其中一份拼回原图。碎片被点下鼠标时实现拖动，当拖到图片上时，放开鼠标，停止拖动，并检测碰撞，如果实现碰撞则自动将碎片与相应位置对齐。碰撞检测有两种方式，一种是碎片MC与原图MC进行碰撞检测，这种碰撞检测是检测两个MC的外框（矩形）是否发生碰撞，这个范围是很大的，当碎片被拖到原图上相应碎片附近时，即使两个图实际并没有发生交叉，但它们的外框已经相交了。那么这个定为初级。这种碰撞检测就比较简单，只要批碎片拖到原图附近就行了，大致差不多都行。另一种检测是碎片MC与原图中碎片MC的注册点进行检测，同时将参数中的布尔值设为true，那么碎片MC的实际图片部分与原图碎片的注册点相交才行。很显然这个难度增大了很多，位置必须准确才行。这个定为中级。第三种方式是不进行碰撞检测，碎片不会自动定位，你把它拖到哪，它就在哪，正不正确不知道。看起来这种方式应该是最难的。所以定为高级。
好，现在开始制作：
1． 新建一flash文档，导入一张图片，并放到舞台上的右半部，宽为舞台的一半的样子。如下图：

2． 点击“修改”>“分离”，将图片打散。用套索工具，在图上画一小块图形，这样这块图形被选中，然后点击：“修改“>“转换为元件”，转换为 MC.名称为tu1双击它，居中对齐。回到主场景，打开属性面板，实例名称为：tu1.将这块图形移开一定距离，移开的目的，是为了好画下一个。所以现在画下一个，一样的做法，只是实例名称是：tu2.直到将图片全部切碎。需要注意的是：碎片元件名称和实例名称都从tu1开始连续取名，如 tu2,tu3…..，不要重复，也不要漏掉，要连续。以下将这些碎片称为原图MC。
3． 将图片拼回去，位置在舞台的右半部，一定要拼好，因为这个是要作为标准的。可以将舞台放大，也可以在下面插入一层，将图片放进来，把透明度降低一点，然后比到拼，拼好后，再将这层删了就行。拼好的图层上锁。
4． 新插入一图层，将tu1元件从库中拖到舞台的左边稍上一点，下面留一点空间放按钮。打开属性面板，实例名称为：mc1。接下来拖tu2，实例名称为mc2…..，直到将碎片全部拖到舞台上。上锁。以下将这些碎片称为碎片MC。
5． 新插入一层，新建6个按钮元件，放到舞台相应位置。标签和实例名称分别为：
“重玩”-“cw_btn”
“看原图”-“yt_btn”
“隐藏“-””yc_btn”
“初级“-“cj_btn”
“中级”-“zj_btn”
“高级”-“gj_btn”
6．画一个无填充红色笔触的矩形，框住初级按钮，将它转换为元件，实例名称为xz_mc。
7．新插入一层，命名为：action,输入如下代码：
var dj = 1;
for (i=1;i<29;i++){
mymc_mc = this["mc"+i];
tumc_mc = this["tu"+i];
tumc_mc._visible=false;
td(mymc_mc,tumc_mc);
}
function td (my_mc,tu_mc){
mymc_mc.onPress = function(){
this.startDrag();
dx = this._x;
dy = this._y;
}
mymc_mc.onRelease = function(){
stopDrag();
if (dj==1){
if(this.hitTest(tu_mc)){
this._x = tu_mc._x;
this._y = tu_mc._y;
} else {
this._x=dx;
this._y = dy;
}
} else if (dj==2){
if(this.hitTest(tu_mc._x,tu_mc._y,true)){
this._x = tu_mc._x;
this._y = tu_mc._y;
} else {
this._x=dx;
this._y = dy;
}
}
}
}
cw_btn.onRelease=function(){
for(j=1;j<29;j++){
mymc_mc =eval("mc"+j);
mymc_mc._x = 50+random(150);
mymc_mc._y =50+random(200);
}
}
yt_btn.onRelease = function(){
for(k=1;k<29;k++){
tumc_mc = eval("tu"+k);
tumc_mc._visible=true;
}
}
yc_btn.onRelease = function(){
for(k=1;k<29;k++){
tumc_mc = eval("tu"+k);
tumc_mc._visible=false;
}
}
cj_btn.onRelease=function(){
dj = 1;
xz_mc._y = 323;
}
zj_btn.onRelease=function(){
dj = 2;
xz_mc._y = 349;
}
gj_btn.onRelease=function(){
dj = 3;
xz_mc._y = 380;
}
完成，测试影片，祝你成功！
下面我们来分析一下代码。
代码分析：
首先声明一个变量，用来保存用户的等级选择：
var dj = 1;
然后，使用一个循环分别以每一个原图MC：tu1,tu2…..和碎片MC:mc1,mc2……为参数调用一个叫td的函数，这个函数将实现拖动及碰撞检测。有多少个碎片就执行多少次，我的碎片是28个。你应该用你的碎片数量加1，替换下面的29。同时让原图MC不可见。
for (i=1;i<29;i++){
mymc_mc = this["mc"+i];
tumc_mc = this["tu"+i];
tumc_mc._visible=false;
td(mymc_mc,tumc_mc);
}
下面来创建这个td函数：
function td (my_mc,tu_mc){
当在碎片mc,(mc1,mc2…..)上点下鼠标时，碎片mc开始拖动，并记录下它的x,y位置。
mymc_mc.onPress = function(){
this.startDrag();
dx = this._x;
dy = this._y;
}
放开鼠标时，停止拖动：
mymc_mc.onRelease = function(){
stopDrag();
如果dj等于1，这时用户应该是点了初级按钮，那么检测碎片MC与相应原图MC是否发生碰撞，如果发生了碰撞，则将碎片MC定位到相应的原图MC上。如果没有发生碰撞，则碎片mc回到原位。
if (dj==1){
if(this.hitTest(tu_mc)){
this._x = tu_mc._x;
this._y = tu_mc._y;
} else {
this._x=dx;
this._y = dy;
}
如果dj等于2，这时用户应该是点了中级按钮，那么检测碎片MC与相应原图MC的注册点是否发生碰撞，如果发生了碰撞，则将碎片MC定位到相应的原图MC上。如果没有发生碰撞，则碎片mc回到原位。
else if (dj==2){
if(this.hitTest(tu_mc._x,tu_mc._y,true)){
this._x = tu_mc._x;
this._y = tu_mc._y;
} else {
this._x=dx;
this._y = dy;
}
下面是重玩按钮的代码，当点击时，使碎片MC堆到舞台的左面。
cw_btn.onRelease=function(){
for(j=1;j<29;j++){
mymc_mc =eval("mc"+j);
mymc_mc._x = 50+random(150);
mymc_mc._y =50+random(200);
}
}
原图按钮上的代码，使原图MC可见：
yt_btn.onRelease = function(){
for(k=1;k<29;k++){
tumc_mc = eval("tu"+k);
tumc_mc._visible=true;
}
}
隐藏MC上的代码，使原图MC不可见。
yc_btn.onRelease = function(){
for(k=1;k<29;k++){
tumc_mc = eval("tu"+k);
tumc_mc._visible=false;
}
}
初级按钮上的代码：使dj等于1，红框框住初级按钮。
cj_btn.onRelease=function(){
dj = 1;
xz_mc._y = this._y;
}
中级按钮：
zj_btn.onRelease=function(){
dj = 2;
xz_mc._y = this._y;
}
高级按钮：
gj_btn.onRelease=function(){
dj = 3;
xz_mc._y = this._y;
}