您好!欢迎您光临马赛克切换相册的制作原理与方法_迎客松B站!

体育

I

交友

I

论坛

I

会员注册

I

本站搜索

I

收藏本站

当前位置:首页 >>>实例教程>>>马赛克切换相册的制作原理与方法
马赛克切换相册的制作原理与方法
发表日期:2012-9-19 10:36:00 出处:迎客松 作者:翠柏 发布人:hsb345 已被访问 2598

 马赛克切换相册的制作原理与方法

   

    教学目的:通过本节教学了解和掌握用as语句打造马赛克效果,并以此编辑制作成的无限循环的相册动画。

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

    教学要点:影片剪辑、动作面板、as语句。

 

 

    作前准备

    下载四张作相册的人物图片,经过制图软件(ps、fw)处理后,保存到指定的文件夹待用。

  制作步骤

    1.启动FLASH8 软件

    2.确立文档属性 设置动画尺寸为550*400,背景颜色随意,点击确定,进入场景1。 如图1所示:


图1

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

    4.创建按钮元件

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

    选择图层1第4帧(点击)插入空白关键帧,用矩形工具在舞台拖一个无边线的矩形,规格约550*400,颜色随意。全居中。如图2所示:

(一下示意图均为实例的50%)

图2

    5.创建影片剪辑元件

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

    (1)选择图层1第一帧,从库中中拖出“图片1”,设置其规格为550*400,全居中。如图3所示:


图3

    (2)同理同种方法完成影片剪辑“02-04”的操作,将图片2-图片4转换为影片剪辑元件。

    6.编辑制作场景

    返回场景1,添加四个图层,共五个图层。自下而上命名为图片、切换、按钮、边框、as。

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

图4

在第2-4帧插入空白关键帧,同理同种方法,分别依次在各帧上完成“02-04”影片剪辑元件在场景1的操作。上锁。

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

图5

在第2-4帧插入空白关键帧,同理同种方法,分别依次在各帧上完成“03、04、01”影片剪辑元件在场景1的操作。上锁。

    为该图层上的“02、03、04、01”影片剪辑添加指令语句:

    点击“02”实例,按f9,打开动作面板,在as编辑区输入,如下语句:

onClipEvent (load)
{
    function drawSquare(x, y)
    {
        with (_root.mask)
        {
            moveTo(x, y);
            beginFill(10);
            lineTo(x + 10, y);
            lineTo(x + 10, y + 10);
            lineTo(x, y + 10);
            endFill();
        }
    }
    numY = 56;
    numX = 70;
    numPerFrame = 60;
    currSquare = 0;
    choices = new Array();
    for (i = 0; i < numX * numY; i++)
    {
        choices.push(i);
    }
    _root.createEmptyMovieClip("mask", 0);
    this.setMask(_root.mask);
}
onClipEvent (enterFrame)
{
    if (currSquare < numX * numY)
    {
        for (i = 0; i < numPerFrame; i++)
        {
            j = random(choices.length);
            t = choices[j];
            choices[j] = choices[choices.length - 1];
            choices.pop();
            x = t % numX;
            y = Math.floor(t / numX);
            drawSquare(x * 10, y * 10);
        }
        currSquare = currSquare + numPerFrame;
        this._alpha = currSquare / (numX * numY) * 100;
    }
}

03、04、01影片剪辑元件上的语句同上。锁定该图层。

    注1.图片图层和切换图层的“01-04”影片剪辑元件在各图层和各帧的摆放顺序,如图6所示:

图6

    注2.如果你在制作中想多添加图片的话,这两个图层的摆放规律,如图7所示:

图7

其切换图层上的各实例添加的语句不变,仍然是上边的语句。

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

图8

点击该按钮,按f9,打开动作面板,在as编辑区输入,如下指令语句:

on (release) {
 play();
}

在第4帧插入帧。上锁。

   (4)选择边框图层第一帧,导入或制作一个边框,规格为550*400,全居中。在第4帧插入帧,上锁。如图9所示:

图9

   (5)选择as图层第一帧,按f9,打开动作面板,在as编辑区输入停止命令:stop(); 。右键该帧-复制帧,再分别依次在第2、3、4帧右键-粘贴帧。上锁。


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



图10

  8.测试存盘

 


    *说明: 

    (1)为了节省空间,本教程只用了四张图片来阐述其制作原理和方法,不知道表达清楚没有,还望朋友们理解。

    (2)如果不喜欢点击画面切换,你也单独可作一个切换按钮,该按钮的语句不变。

    (3)如果你想有选择地切换图片,你可用任意点选的按钮来切换,有兴趣的话就试试吧。

 

最终效果显示:


 


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

 

全屏下载

 

祝你成功!

 

进入更多教程


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



yaorao
(2010-7-27 0:29:00)

老师又出教材。晕了。我都赶不上了

 发表评论:共有 1 条评论

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

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

联系电话: 联系人:翠柏

琼icp备09005167