分享

水中气泡升腾的制作原理与方法02

 强龙399 2015-01-21

水中气泡升腾的制作原理与方法02

 

 

    教学目的:通过本节教学了解和熟悉影片剪辑及其实例名称的创建,动作面板、as语句的运用,通过巧妙的设计创作,进而实现气泡水中升腾之动画效果。

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

    教学重点:影片剪辑、实例名称、混色器、动作面板、as语句。

     

 

    作前准备

    下载规格约为550*400的海底水族图片一张,经过制图软件(ps、fw)处理后,保存到指定的文件夹,待用。

    制作过程

    1.启动flash8软件。

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

图1

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


(素材图)

    4.创建影片剪辑元件

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

    选择图层1第1帧,从库中拖出素材位图到舞台,规格550*400,全居中。如图2所示:


图2

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

    选择图层1第1帧,用椭圆工具在舞台拖一个,规格为16*16的,无边线的正圆,水平中齐-上对齐。如图3所示:


图3

(此图放大一倍)

点击该实例,打开混色器,设置其参数,如图4所示:


图4

然后,用充分变形工具对其色阶调整。完成后的舞台实例,如图5所示:


图5

(此图放大一倍)

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

    选择图层1第1帧,从库中拖出“气泡1”影片剪辑元件到舞台,规格不变,水平中齐-上对齐。如图6所示:

图6

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

图7

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

onClipEvent (load)
{
    k = 0;
    s = random(6) - 4;
    x0 = random(11) - 5;
    y0 = random(7) - 25;
    a = random(360);
}
onClipEvent (enterFrame)
{
    if (_name != "qp")
    {
        setProperty("", _x, _x + (x0 + random(3) - 1));
        setProperty("", _y, _y + (y0 + random(3) - 1));
        setProperty("", _rotation, a);
        setProperty("", _yscale, 100 + s * k++);
        setProperty("", _xscale, 100 + s * k++);
        if (s < 0)
        {
            setProperty("", _alpha, _alpha - _alpha / 50);
        }
        if (_x < 0 || _x > 550 || _y > 400 || _alpha < 0)
        {
            removeMovieClip (this);
        }
    }
    else
    {
        i >= 16 ? (i = 0) : (i++);
        this.duplicateMovieClip("qp" + i, i);
        mycolor = new Color(_root["qp" + i]);
        myobj = new Object();
        myobj = {ra: random(100), ga: random(100), ba: random(100), rb: random(128) + 128, gb: random(128) + 128, bb: random(128) + 128};
        mycolor.setTransform(myobj);
    }
}


    5.编辑组织场景

    进入场景1,添加两个图层,共三个图层。自下而上命名为背景、气泡、as。

    (1)选择背景图层第1帧,从库中拖出“背景”影片剪辑元件到舞台,规格等比放大宽度为560(高度随机变化),全居中。如图8所示:


图8

点击该实例,在属性面板填写其实例名称为:bj 。上锁。如图9所示:

图9

    (2)选择气泡图层第1帧,从库中拖出“气泡1”影片剪辑元件到舞台,规格不变,将其放置在背景下方右侧适当位置。点击该实例,在属性面板填写其实例名称为:qp 。如图10所示:

图10

再点击该实例,打开动作面板,在as编辑区输入,如下语句:

onClipEvent (load)
{
    k = 0;
    s = random(6) - 4;
    x0 = random(11) - 5;
    y0 = random(7) - 25;
    a = random(360);
}
onClipEvent (enterFrame)
{
    if (_name != "qp")
    {
        setProperty("", _x, _x + (x0 + random(3) - 1));
        setProperty("", _y, _y + (y0 + random(3) - 1));
        setProperty("", _rotation, a);
        setProperty("", _yscale, 100 + s * k++);
        setProperty("", _xscale, 100 + s * k++);
        if (s < 0)
        {
            setProperty("", _alpha, _alpha - _alpha / 50);
        }
        if (_x < 0 || _x > 550 || _y > 400 || _alpha < 0)
        {
            removeMovieClip (this);
        }
    }
    else
    {
        i >= 16 ? (i = 0) : (i++);
        this.duplicateMovieClip("qp" + i, i);
        mycolor = new Color(_root["qp" + i]);
        myobj = new Object();
        myobj = {ra: random(100), ga: random(100), ba: random(100), rb: random(128) + 128, gb: random(128) + 128, bb: random(128) + 128};
        mycolor.setTransform(myobj);
    }
}

再从库中拖出“气泡2”影片剪辑元件到舞台,规格不变,将其放置在背景下方左侧适当位置。上锁。如图11所示:



图11

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

Stage.scaleMode = "noScale";
var baseX = 100;
var baseY = 100;
var nOctaves = 1;
var randomSeed = Math.random() * 10;
var bStitch = false;
var bFractalNoise = true;
var nChannels = 1;
var bGreyScale = false;
var p1 = new flash.geom.Point(45, 35);
var p2 = new flash.geom.Point(50, 60);
perlinOffset = new Array(p1, p2);
bmp = new flash.display.BitmapData(650, 400, true, 0);
onEnterFrame = function ()
{
perlinOffset[0].y = perlinOffset[0].y - 5;
perlinOffset[0].x = perlinOffset[0].x - 5;
perlinOffset[1].x = perlinOffset[1].x + 1;
perlinOffset[1].y = perlinOffset[1].y + 1;
bmp.perlinNoise(baseX, baseY, nOctaves, randomSeed, bStitch, bFractalNoise, nChannels, bGreyScale, perlinOffset);
dmf = new flash.filters.DisplacementMapFilter(bmp, new flash.geom.Point(0, 0), 1, 1, 20, 20, "color");
bj.filters = [dmf];
};

锁定该图层。

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



图12

    7.测试存盘

 

    说明:

    1.运用此原理方法,可制作吹肥皂泡、上浮的音符等生动有趣的动画。

    2.本教程之所以气泡图层分别放入气泡1和气泡2两个不同的影片剪辑元件,则因为,在场景1中完成气泡和在影片剪辑元件中完成气泡,在拿到场景1,两者的姿态和颜色是不一样的。你注意到了吗?!

    3.制作中如果发现教程有误,望及时告知与我,以便及时纠正。谢谢您的合作!

 

最终效果显示:


http://hsb345./domName/hsb345/20136241494075291.swf

 

全屏下载

 

祝你成功

 

    本站是提供个人知识管理的网络存储空间,所有内容均由用户发布,不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息,谨防诈骗。如发现有害或侵权内容,请点击一键举报。
    转藏 分享 献花(0

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多