您好!欢迎您光临as打造百叶窗切换相册的制作原理与方法_迎客松B站!

体育

I

交友

I

论坛

I

会员注册

I

本站搜索

I

收藏本站

当前位置:首页 >>>进阶教程>>>as打造百叶窗切换相册的制作原理与方法
as打造百叶窗切换相册的制作原理与方法
发表日期:2013/1/25 6:48:00 出处:迎客松 作者:翠柏 发布人:hsb345 已被访问 696

 

as打造百叶窗切换相册的制作原理与方法

 

   

    教学目的:通过本节教学了解和掌握影片剪辑及其实例名称创建应用,影片剪辑链接属性以及动作面板as语句并用,通过巧妙的设计和精心创作,进而实现百叶窗切换相册之动画效果。

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

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

 

 

  作前准备

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

  制作步骤

    1.启动FLASH8 软件

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


图1

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

    4.创建影片剪辑元件 

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

    A,选择图层1第1幀,从库中拖出素材图片1到舞台,规格270*365,全居中。如图2所示:


图2

将其打散,用墨水瓶工具,在属性面板选择其参数,如图3所示:



图3

在舞台实例的边缘点一下,完成后的舞台实例,如图4所示:


图4

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

    选择图层1第1幀,从库中拖出素材图片2到舞台,规格270*365,全居中。如图5所示:

图5

    C.同理同种方法,依次创建“03-12”影片剪辑元件,完成素材图片3-12的操作。

    (2)选择“插入-新建元件”,建立一个名为“矩形”的影片剪辑元件,点击确定,进入元件编辑区。添加一个图层,共两个图层。自下而上命名为矩形、as。

    A.选择矩形图层第1幀,用矩形工具在舞台拖一个,规格约为500*30的,无边线的矩形,颜色随意,全居中。如图6所示:

图6

将其打散,在第20幀插入关键帧,在点击第1幀,将该幀舞台实例规格改为500*1,全居中。创建本区域间的形状补间。上锁。如图7所示:

图7

    B.选择as图层第20幀插入空白关键帧,点击该幀,按f9,打开动作面板,在as编辑区输入,如下停止命令语句:stop (); 。上锁。


    C.右键库中的该影片剪辑元件的图标-链接,打开其链接属性面板,填写其标识符为:m 。其它参数设置,如图8所示:


图8

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



图9

    (3)选择“插入-新建元件”,建立一个名为“序号1”的影片剪辑元件,点击确定,进入元件编辑区。添加两个图层,共三个图层。自下而上命名为底板、号码、as。

    A.选择底板图层第1幀,用矩形工具在舞台拖一个笔触高度为1的,无填充色的,规格为32*32的矩形,将其打散。全居中。如图10所示:


图10

在第2幀插入关键幀,将舞台实例填充为橙色。上锁。如图11所示:


图11

    B.选择号码图层第1幀,用文本工具在舞台输入:1,字体、规格、颜色自定,全居中。如图12所示:


图12

在第2幀插入幀,上锁。该幀舞台实例,如图13所示:

图13

同理同种方法,依次创建“序号2-12”影片剪辑元件,完成上述相关操作。


    C.选择as图层第一帧,按f9,打开动作面板,在as编辑区输入,如下停止命令语句:stop(); 在第2幀插入幀,上锁。

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


图14

    5.编辑制作场景

    返回场景1,添加四个图层,共五个图层。自下而上命名为背景、图片、序号、文本、as。

   (1)选择背景图层第一帧,导入或制作一个适合于作品的背景到舞台,规格550*400,全居中。上锁。如图15所示:



图15

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


图16

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

图17

同理同种方法,分别依次从库中拖出“02-12”影片剪辑到舞台,其实例名称依次为:mc2mc12 。上锁。完成后的舞台实例,如图18所示:

图18

其实例名称为:mc12 。如图19所示:

图19


    (3)选择序号图层第一帧,分别依次从库中拖出“序号1-序号12”,规格不变,将其分为两列,放置在图片的右侧适当位置。如图20所示:

图20

点击序号1实例,在属性面板填写其实例名称为:xh1 。如图21所示:


图21

同理同种方法,分别依次完成“序号2-序号12”影片剪辑实例名称的填写,其实例名称依次为:xh2xh12 。上锁。

    (4)选择文本图层第一帧,用文本工具在图片实例的左侧依次输入:作品的题目和相关说明,规格、字体、颜色自定。调整好位置。上锁。如图22所示:


图22

     (4)选择as图层第一帧,按f9,打开动作面板,在as编辑区输入,如下帧语句:

function aa()
{
    onEnterFrame = function ()
    {
        i <= n * t ? (i++) : (i = 1);
        for (k = 1; k <= n; k++)
        {
        bb((k - 1) * t, (k - 1) * t + 1, this["mc" + k], this["xh" + k]);
        }
    };
}
function bb(a, b, mc, xh)
{
    if (i > a && i <= a + t)
    {
        if (i == b)
        {
            for (k = 1; k <= 24; k++)
            {
            mm.attachMovie("m", "m" + k, k);
            mm["m" + k]._y = 2.450000E+001 * (12 - k);
            mm["m" + k].gotoAndPlay(1);
            }
            mm._x = Stage.width / 2;
            mm._y = Stage.height / 2;
            mm._rotation = random(360);
            for (k = 1; k <= n; k++)
            {
            this["xh" + k].gotoAndStop(1);
            }
        }
        xh.gotoAndStop(2);
        mc.setMask(mm);
        mx.behaviors.DepthControl.bringToFront(mc);
    }
}
function cc(xh, c)
{
    xh.onRollOver = function ()
    {
    this.gotoAndStop(2);
    };
    xh.onRollOut = function ()
    {
    this.gotoAndStop(1);
    };
    xh.onPress = function ()
    {
    i = c;
    };
}
i = 0;
n = 12;
t = 50;
this.createEmptyMovieClip("mm", 0);
aa();
for (k = 1; k <= n; k++)
{
    this["mc" + k].onRollOver = function ()
    {
        _root.onEnterFrame = null;
    };
    this["mc" + k].onRollOut = function ()
    {
        aa();
    };
    cc(this["xh" + k], (k - 1) * t);
}

锁定该图层。

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


图23

  7.测试存盘

 

    *说明:

    1.作为遮罩的矩形影片剪辑元件没有进入场景1,它效果是通过其链接属性来实现的。

    2.图片“01-12”影片剪辑如果在场景依次分12个图层放置更好,更便于对齐修改调整。

 

最终效果显示:


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

 

全屏下载

 

祝你成功!

 

进入更多教程

 

 

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

没有相关评论

 发表评论:

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

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

联系电话: 联系人:翠柏