注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

清风的博客

我为人人,人人为我。

 
 
 

日志

 
 

as2碎片遮罩切换的制作  

2014-01-31 00:05:19|  分类: 【flash教程】 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
作前准备

    准备一张规格为260*325的图片,经过制图软件(ps、fw)处理后,放到指定的文件夹待用。

  制作步骤

    1.启动FLASH8 软件。

    2.确立文档属性 设置动画尺寸为260*325,背景颜色深绿,帧频80,其它默认,点击确定,进入场景1。 如图1所示:

 as2碎片遮罩切换的制作 - 清风 - 清风的博客   

图1

    3.首先将准备好的图片导入库中,待用。

    4.创建影片剪辑元件

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

    选择图层1第1帧,从库中拖出素材图形到舞台,设置其规格为260*325,左对齐-上对齐。如图3所示:

as2碎片遮罩切换的制作 - 清风 - 清风的博客 

图3

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

    选择图层1第1帧,用矩形工具在舞台拖一个规格为10*10的,无边线的白色矩形,左对齐-上对齐。如图4所示:

 as2碎片遮罩切换的制作 - 清风 - 清风的博客  

图4

打开库,右键库中的该影片剪辑图标,展开其链接属性面板,填写其标识符为:fk 。其它参数设定,如图5所示:

as2碎片遮罩切换的制作 - 清风 - 清风的博客 

图5

*URL处可随便输入一个网页地址。

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

    选择图层1第1帧,用矩形工具在舞台拖一个规格为10*10的,无边线的灰色矩形,左对齐-上对齐。如图6所示:

 as2碎片遮罩切换的制作 - 清风 - 清风的博客   

图6

右键库中的该影片剪辑图标,展开其链接属性面板,填写其标识符为:fk 。其它参数设定,如图7所示:

 as2碎片遮罩切换的制作 - 清风 - 清风的博客

图7

*URL处可随便输入一个网页地址。

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

    A.选择图图层1第1帧,按f9,打开动作面板,在as编辑区输入,如下帧语句:

 for (i = 1; i <= 1800; i++)
{
    attachMovie("fk", "fk" + i, i);
    x1 = (i + 25) % 26 * 10;
    y1 = (Math.ceil(i / 26) - 1) * 10;
    setProperty("fk" + i, _x, x1);
    setProperty("fk" + i, _y, y1);
}
stop (); 

在第2帧插入空白关键帧,按f9,打开动作面板,在as编辑区输入,如下帧语句:

a = 1;
onEnterFrame = function ()
{
    removeMovieClip ("fk" + a);
    ++a;
    if (a > 1800)
    {
        delete onEnterFrame;
        gotoAndPlay(1);
        _root.an.enabled = tuer;
    }
};

在第3帧插入空白关键帧,按f9,打开动作面板,在as编辑区输入,如下帧停止命令:stop ();

    B.本环节完成后的时间轴,如图8所示:

as2碎片遮罩切换的制作 - 清风 - 清风的博客 

图8

    5.创建按钮元件

    选择“插入-新建元件”,建立一个名为“隐钮”的按钮元件,点击确定,进入元件编辑区。就一个图层。

    选择图层1第4帧(点击),用矩形工具在舞台拖一个规格、颜色随意的,无边线的矩形,全居中。如图9所示:

as2碎片遮罩切换的制作 - 清风 - 清风的博客 

图9

      6.编辑制作场景

    返回场景1,添加六个图层,共七个图层。自下而上命名为黑白、彩图、碎片、遮罩、按钮、文本、as。

    (1)选择黑白图层第一帧,从库中拖出“mm”影片剪辑元件到舞台,规格不变,全居中。如图10所示:

as2碎片遮罩切换的制作 - 清风 - 清风的博客 

图10

选中该实例,点击“修改-变形-水平翻转”。再打开属性面板中的滤镜,点开+号,选择“调整颜色”,在调整颜色面板设置其参数,如图11所示:

as2碎片遮罩切换的制作 - 清风 - 清风的博客 

图11

完成后的舞台实例变化,如图12所示:

as2碎片遮罩切换的制作 - 清风 - 清风的博客 

在第2帧插入帧,上锁。

    (2)选择彩图图层第一帧,从库中拖出“mm”影片剪辑元件到舞台,规格不变,全居中。如图12所示:

as2碎片遮罩切换的制作 - 清风 - 清风的博客

图12

在第2帧插入帧,上锁。

    (3)选择碎片图层第一帧,从库中拖出“灰方”影片剪辑元件到舞台,规格不变,下对齐-水平中齐。如图13所示:

as2碎片遮罩切换的制作 - 清风 - 清风的博客 

图13

点击该实例,在属性面板填写其实例名称为:sp 。如图14所示:

as2碎片遮罩切换的制作 - 清风 - 清风的博客 

图14

点击该实例,按f9,点开动作面板,在as编辑区输入,如下该影片剪辑指令语句:

onClipEvent (enterFrame)
{
    this._y = this._y + random(5);
    if (this._y > 335)
    {
        removeMovieClip (this);
    }
}

在第2帧插入帧,上锁。

    (4)选择遮罩图层第一帧,从库中拖出“as”影片剪辑元件到舞台,左对齐-水平中齐。如图15所示:

as2碎片遮罩切换的制作 - 清风 - 清风的博客 

图15

点击该实例,在属性面板填写其实例名称为:vv 。如图16所示:

as2碎片遮罩切换的制作 - 清风 - 清风的博客  

图16

在第2帧插入帧。设置该图层为遮罩层。再用鼠标将彩图图层推到碎片图层之上,然后再拉到碎片图层之下。完成一罩管二之功能。


    (5)选择按钮图层第一帧,从库中拖出“隐钮”按钮元件到舞台,全居中。如图17所示:

as2碎片遮罩切换的制作 - 清风 - 清风的博客 

图17

点击该实例,在属性面板填写其实例名称为:an 。如图18所示:

as2碎片遮罩切换的制作 - 清风 - 清风的博客 

图18

再点击该实例,按f9,点开动作面板,在as编辑区为该按钮添加,如下指令语句:

on (release)
{
    _root.vv.gotoAndPlay(2);
    _root.gotoAndPlay(2);
    this.enabled = false;
}

在第2帧插入帧,上锁。

    (6)选择文本图层第一帧,用文本工具在舞台的右下角输入:“点击画面”,字体、规格、颜色自定,调整好位置。如图19所示:

as2碎片遮罩切换的制作 - 清风 - 清风的博客 

图19

在第2帧插入帧,上锁。

    (7)选择as图层第一帧,按f9,打开动作面板,在as编辑区输入,如下帧停止命令:

stop ();

在第2帧插入空白关键帧,按f9,打开动作面板,在as编辑区输入,如下帧语句:

b = 1;
onEnterFrame = function ()
{
    x2 = (b + 25) % 26 * 10;
    y2 = (Math.ceil(b / 26) - 1) * 10;
    sp.duplicateMovieClip("sp" + b, b + 2000);
    setProperty("sp" + b, _x, x2 + 0);
    setProperty("sp" + b, _y, y2 + 15);
    ++b;
    if (b > 1800)
    {
        delete onEnterFrame;
    }
};

锁定该上锁。

    7.本作业完成后时间轴显示如图20所示:

          as2碎片遮罩切换的制作 - 清风 - 清风的博客         

图20

  8.测试存盘

 

    *说明:

    白方影片剪辑元件没有进入场景,它是通过其链接属性和as影片剪辑脚本发挥其遮罩的功能作用的。

 

最终效果显示:

/Article/UploadFiles/201203/2012031611055559.swf

 

全屏下载

 

  评论这张
 
阅读(16)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017