水中气泡升腾的制作原理与方法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
{
setProperty("", _alpha, _alpha - _alpha / 50);
}
if (_x 550 || _y > 400 || _alpha
{
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
{
setProperty("", _alpha, _alpha - _alpha / 50);
}
if (_x 550 || _y > 400 || _alpha
{
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.16789.net/domName/hsb345/[**************]91.swf
全屏下载
祝你成功