作前准备
下载规格约为550*400的海底水族图片一张,经过制图软件(ps、fw)处理后,保存到指定的文件夹,待用。
制作过程
1.启动flash8软件。
2.确立文档属性 设置动画尺寸为550*400,背景颜色深绿,幀频12,其它默认,点击确定,进入场景1。如图1所示:
![](http://image81.360doc.com/DownloadImg/2015/01/2120/49330975_1.jpg)
图1
3.首先将准备好的素材图片导入库中,待用。
![](http://image81.360doc.com/DownloadImg/2015/01/2120/49330975_2.jpg)
(素材图)
4.创建影片剪辑元件
(1)选择“插入-新建元件”,建立一个名为“背景”的影片剪辑元件,点击确定,进入元件编辑区。就一个图层。
选择图层1第1帧,从库中拖出素材位图到舞台,规格550*400,全居中。如图2所示:
![](http://image81.360doc.com/DownloadImg/2015/01/2120/49330975_2.jpg)
图2
(2)选择“插入-新建元件”,建立一个名为“气泡1”的影片剪辑元件,点击确定,进入元件编辑区。就一个图层。
选择图层1第1帧,用椭圆工具在舞台拖一个,规格为16*16的,无边线的正圆,水平中齐-上对齐。如图3所示:
![](http://image81.360doc.com/DownloadImg/2015/01/2120/49330975_3.jpg)
图3
(此图放大一倍)
点击该实例,打开混色器,设置其参数,如图4所示:
![](http://image81.360doc.com/DownloadImg/2015/01/2120/49330975_4.jpg)
图4
然后,用充分变形工具 对其色阶调整。完成后的舞台实例,如图5所示:
![](http://image81.360doc.com/DownloadImg/2015/01/2120/49330975_6.jpg)
图5
(此图放大一倍)
(3)选择“插入-新建元件”,建立一个名为“气泡2”的影片剪辑元件,点击确定,进入元件编辑区。就一个图层。
选择图层1第1帧,从库中拖出“气泡1”影片剪辑元件到舞台,规格不变,水平中齐-上对齐。如图6所示:
![](http://image81.360doc.com/DownloadImg/2015/01/2120/49330975_6.jpg)
图6
点击该实例,在属性面板填写其实例名称为:qp 。如图7所示:
![](http://image81.360doc.com/DownloadImg/2015/01/2120/49330975_7.jpg)
图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所示:
![](http://image81.360doc.com/DownloadImg/2015/01/2120/49330975_2.jpg)
图8
点击该实例,在属性面板填写其实例名称为:bj 。上锁。如图9所示:
![](http://pubimage.360doc.com/wz/default.gif)
图9
(2)选择气泡图层第1帧,从库中拖出“气泡1”影片剪辑元件到舞台,规格不变,将其放置在背景下方右侧适当位置。点击该实例,在属性面板填写其实例名称为:qp 。如图10所示:
![](http://pubimage.360doc.com/wz/default.gif)
图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所示:
![](http://pubimage.360doc.com/wz/default.gif)
图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所示:
![](http://pubimage.360doc.com/wz/default.gif)
图12
7.测试存盘
说明:
1.运用此原理方法,可制作吹肥皂泡、上浮的音符等生动有趣的动画。
2.本教程之所以气泡图层分别放入气泡1和气泡2两个不同的影片剪辑元件,则因为,在场景1中完成气泡和在影片剪辑元件中完成气泡,在拿到场景1,两者的姿态和颜色是不一样的。你注意到了吗?!
3.制作中如果发现教程有误,望及时告知与我,以便及时纠正。谢谢您的合作!
最终效果显示:
http://hsb345./domName/hsb345/20136241494075291.swf
全屏下载
祝你成功
|