flash制作红旗的教程.docx
《flash制作红旗的教程.docx》由会员分享，可在线阅读，更多相关《flash制作红旗的教程.docx（16页珍藏版）》请在冰豆网上搜索。
flash制作红旗的教程
两种方法
方法一：
本例综合利用形状补间、动作补间、引导路径、遮罩等多种动画形式，模拟制作出五星红旗飘动的效果。
1、创建Flash文档，场景设置保持默认。
2、执行“插入→新建元件”命令，做如图1所示设置：
3、用矩形工具绘制无笔触色，填充色为红色，宽、高比例为1：
1.5的矩形，如图2所示，并用选择工具将该矩形调成图3状：
4、复制该图形，并执行“修改→变形→垂直反转”命令，置于其右：
5、将该图4再次复制出一个，并通过对齐面板将其水平中齐和垂直中齐，如图5所示：
6、选择墨水瓶工具，笔触色任意，在该图形边缘点一下，将两边及底部的线条删除，选中上边的边线，右键—剪切，点选按钮，插入一引导线图层，选中该图层，在舞台任意处右键—粘贴到当前位置，用对齐面板将其“左对齐“和垂直中齐”，20帧处插入帧，如图6所示：
7、选中图层1的图形，右键—转换为元件，将其转换为名为“红旗”的图形元件，双击该元件，在其编辑区，用对齐面板，将其“水平中齐”和“垂直中齐”。
8、回到名为“旗帜”的影片剪辑元件编辑区，在第1帧处用任意变形工具将中心点移至元件的中心处，并将该图形元件的中心点吸附到引导线上，20帧插入关键帧，将其水平向右移动，如图7、图8所示：
9、选中引导线图层，插入图层3，在图层3第1帧，绘制一黄色五角星。
绘制方法：
选择多角星形工具，点击属性面板的选按钮，在弹出的对话框中做如图9的设置：
10、将拉出的五角星放置在如图10所示的位置：
11、右键该五角星，将其转换为图形元件，双击该元件，进入该元件编辑区，复制出一个星，将其改小，再复制出另外三个小星，摆放好位置，如图11所示：
12、回到影片剪辑“旗帜”编辑区，选中星元件，选择任意变形工具，将元件编辑中心置于左中处，如图12所示：
13、第1帧处根据旗帜形状调整星的角度和宽度，第7帧、第14帧和第20帧插入关键帧，分别在第7帧和第14帧处再将星的形状和宽度做适当调整，然后选中该图层，属性中创建补间动画，如图13、图14和图15所示
14、创建名为“遮罩红旗”的影片剪辑元件，在该编辑区，图层1的第1帧处从库中拖出名为“旗帜”的影片剪辑元件，用对齐面板将其左对齐和上对齐，40帧处插入帧。
15、插入图层2，用矩形工具绘制一无笔触色，填充色任意、宽是旗帜元件的二分之一，高度要高于“旗帜”元件的矩形，置于如图15所示的位置：
16、第1帧处用选择工具将该矩形形状做些改变，如图16所示：
17、20帧和40帧处插入关键帧，并在20帧处将矩形再次调整形状，如图17所示：
18、选中图层2，属性中创建形状补间动画，并右键图层2，选择“遮罩层”。
19、回到主场景，绘制一旗杆，从库中拖出影片剪辑元件“遮罩红旗”，置于旗杆上方，如图18所示：
OK！
测试，存盘！
方法二：
1、新建Flash文档，场景大小可根据需要设置，本例的宽、高均设置为
300像素。
帧聘设置为24像素。
2、执行“插入→新建元件”命令，创建名为“五星红旗”的影片剪辑元件。
进入该元件编辑区后，再插入三个图层，并做如图1的名更名：
3、选中底图图层的第1帧，用矩形工具，绘制一个无笔触色，填充色为红色，宽、高为250×170像素的矩形，对齐面板中设置“左对齐”和“上对齐”，如图2：
4、将该矩形复制、粘贴到“阴影”图层，并锁定该图层。
5、回到底图图层，用选择工具调整形状，分别在20帧和40帧插入关键帧，在20帧再次调整形状，如图3、图4所示：
5、选中该图层，属性中创建“形状补间”。
6、再次选中该图层，将鼠标放在被选中的时间帧上，右间“复制帧”，选中“遮罩层”图层的第1帧，右键“粘贴帧”，锁定这两个图层。
7、将“阴影”图层解锁，（为方便操作，可将底图和遮罩两个图层隐藏）打开混色器面板，填充色选择线性，做
8、右键该图，选择“转换为元件”，将其转换名为“阴影”的影片剪辑元件。
双击该元件，进入其编辑区，第1帧处用填充变形工具，将渐变色调整至如图7状：
9、在40处帧插入关键帧，并用填充变形工具将其调整至如图8状：
10、将播放头放在第1帧至40帧中间的任意处，属性中创建“形状补间”。
11、回到“五星红旗”元件编辑区，选中“阴影”元件，属性中将Alpha值改为20%。
12、选中“遮罩层”图层，右键，选择“遮罩层”。
13、将编辑好的三个图层锁定。
选中“五角星”图层的第1帧，用多角星形工具绘制无笔触色，填充色为黄色的五颗星，调整大小和角度（大星为56.5×53.9,小星为16.9×16.1）,摆放位置如图9所示:
14、在40帧处插入帧。
15、执行“插入→新建元件”命令，创建名为“红旗”的影片剪辑元件，进入该元件编辑区，图层1第1帧，选用矩形工具，绘制一个无填充色，笔触颜色为任意色，宽、高为275×240的矩形，并在混色器中将笔触颜色的Alpha值修改为0%。
对齐面板中选择“左对齐”和“上对齐”。
16、插入图层2，从库中拖出名为“五星红旗”的影片剪辑元件。
属性中将x坐标值修改为0，y坐标值修改为34。
17、创建名为“ramp”的影片剪辑元件，在该元件编辑区，用矩形工具绘制无笔触色，填充色做如图10设置，宽、高为275×240矩形，对齐面板中选择“上对齐”和“左对齐”，如图11：
18、创建名为“dis”的影片剪辑元件，在该元件编辑区，将名为“ramp”的影片剪辑元件拖入，属性中给该元件取实例名为ramp，并用对齐面板其“左对齐”和“上对齐”。
19、回到主场景，新插入三个图层，并分别更名为如图12所示：
20、在bg图层绘制或插入一个背景图。
21、在displace图层，从库中拖入名为“dis”的影片剪辑元件，放
在适当位置，并在属性中取实例名为displace_mc。
22、在flag图层从库中拖入名为“红旗”的影片剪辑元件，并在属性
中取实例名为flag_mc，放在和“displace_mc”相同位置。
23、选中actions图层第1帧，动作面板中输入如下语句：
Stage.scaleMode='noScale';
displace_mc.createEmptyMovieClip（"perlin",1）;
varramp:
MovieClip=displace_mc.ramp;
ramp.swapDepths
（2）;
varspeed=8;
varchannel=1;
varflapX=50;
varflapY=100;
varmode="clamp";
varoffset=newflash.geom.Point（0,0）;
vardisplaceBitmap:
flash.display.BitmapData=newflash.display.BitmapData（ramp._width,ramp._height）;
vardisplaceFilter:
flash.filters.DisplacementMapFilter=newflash.filters.DisplacementMapFilter（displaceBitmap,
offset,channel,channel,flapX,flapY,mode）;
varbaseX=80;
varbaseY=0;
varocts=1;
varseed=Math.floor（Math.random（）*50）;
varstitch=true;
varfractal=true;
vargray=false;
varnoiseBitmap:
flash.display.BitmapData=newflash.display.BitmapData（500,1）;
noiseBitmap.perlinNoise（baseX,baseY,octs,seed,stitch,fractal,channel,gray）;
varshift:
flash.geom.Matrix=newflash.geom.Matrix（）;
onEnterFrame=function（）{
shift.translate（speed,0）;
with（displace_mc.perlin）{
clear（）;
beginBitmapFill（noiseBitmap,shift）;
moveTo（0,0）;
lineTo（ramp._width,0）;
lineTo（ramp._width,ramp._height）;
lineTo（0,ramp._height）;
lineTo（0,0）;
endFill（）;
}
displaceBitmap.draw（displace_mc）;
flag_mc.filters=[displaceFilter];
};
onMouseDown=function（）{
displace_mc._visible=true;
flag_mc._visible=false;
};
onMouseUp=function（）{
制作飘动的五星红旗
displace_mc._visible=false;
flag_mc._visible=true;
};
onMouseUp（）;
测试，存盘
★为语句添加的注释：
本实例使用名为perlinnoise的方法，perlinnoise用于在一个做为
旗帜影片剪辑的置换图内创建数个随机波，即使用随机杂点的像素填充图
像，使该旗帜看上去就像真的在飘动一样。
注：
perlinnoise又叫做gradientnoise,是科学家Ken
Perlin在1983年独立研究出来的一种图象噪声（有的译作“柏
林噪音”，也有的译作“培林乱数”），即通过一组特定的点（例如
模型顶点,象素地址等）生成相应的随机变量。
//在displace_mc中创建一个实例名为perlin的空影片剪
辑，以绘制perlinnoise
displace_mc.createEmptyMovieClip（"perlin",1）;
//变量ramp（斜面）是已存在于displace_mc中的影片剪辑，
该影片剪辑用于设置旗帜由左至右perlinnoise的缓动效果
varramp:
MovieClip=displace_mc.ramp;
ramp.swapDepths
（2）;
//将ramp置于perlinnoise上
//*50%的红色在置换图内并非被置换了，当继续向右
//移动时ramp由50%到透明，使perlinnoise仍可看到
制作飘动的五星红旗
15//全局变量
varspeed=8;
//noise以此速度提升（引起飘动）
varchannel=1;
//红色-红色用于置换图素
//置换变量
varflapX=50;
//沿X轴置换图素的幂
varflapY=100;
//沿Y轴置换图素的幂
varmode="clamp";
//锁定图象，使源图不可见
//影片剪辑旗帜内有一不可见的边界，用于给定延伸超越旗
帜边界的范围
varoffset=newflash.geom.Point（0,0）;
//置换图偏移量
//为置换物创建包含置换斜面大小在内的位图数据对象，并
应用该对象的置换滤镜
vardisplaceBitmap:
flash.display.BitmapData=new
flash.display.BitmapData（ramp._width,ramp._height）;
var
displaceFilter:
flash.filters.DisplacementMapFilter=new
制作飘动的五星红旗
16flash.filters.DisplacementMapFilter（displaceBitmap,
offset,channel,channel,flapX,flapY,mode）;
//PERLINNOISE变量
varbaseX=80;
//x轴noise的大小
varbaseY=0;
//y轴noise的大小
varocts=1;
//用于noise的noise函数
varseed=Math.floor（Math.random（）*50）;
//用于noise的随机速度
varstitch=true;
//通过修正来遮蔽noise以使其易于循环
varfractal=true;
//使用不规则碎片形的noise
vargray=false;
//由于有红色通道而不使用灰色区域
//为noise创建位图数据对象并应用perlinNoise.由于是沿
y轴循环,因此只需1象素高.其长度取决于产生noise的变形.
借助于修正而开始梯度的填充,则可使noise作连续的环状运动.
varnoiseBitmap:
flash.display.BitmapData=new
flash.display.BitmapData（500,1）;
制作飘动的五星红旗
17noiseBitmap.perlinNoise（baseX,baseY,octs,seed,
stitch,fractal,channel,gray）;
//由于noise只被创建一次并仅仅为旗帜效果作环状运动而
使用了开始位图填充,变换的矩阵就可使noise连续地运动.
varshift:
flash.geom.Matrix=newflash.geom.Matrix（）;
//每一帧
onEnterFrame=function（）{
//通过沿x变换noise的速度移动矩阵
shift.translate（speed,0）;
//在perlin影片剪辑内绘制时,创建一个矩形.该矩形是随
变换的矩阵而产生的偏移量绘制出来的.
with（displace_mc.perlin）{
clear（）;
beginBitmapFill（noiseBitmap,shift）;
moveTo（0,0）;
lineTo（ramp._width,0）;
lineTo（ramp._width,ramp._height）;
lineTo（0,ramp._height）;
lineTo（0,0）;
endFill（）;
}
//在displaceBitmap内绘制displace_mc
制作飘动的五星红旗
18displaceBitmap.draw（displace_mc）;
//将displaceFilter应用于旗帜
flag_mc.filters=[displaceFilter];
};
//鼠标按下时,显示置换图，主图不可见
onMouseDown=function（）{
displace_mc._visible=true;
flag_mc._visible=false;
};
//释放鼠标时重新显示主图
onMouseUp=function（）{
displace_mc._visible=false;
flag_mc._visible=true;
};
//初始化
onMouseUp（）;
升级会员 