flash制作红旗的教程.pdf

《flash制作红旗的教程.pdf》由会员分享，可在线阅读，更多相关《flash制作红旗的教程.pdf（16页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、两种方法 方法一：本例综合利用形状补间、动作补间、引导路径、遮罩 等多种动画形式，模拟制作出五星红旗飘动的效果。1、创建 Flash 文档，场景设置保持默认。2、执行“插入新建元件”命令，做如图 1 所示设置：3、用矩形工具绘制无笔触色，填充色为红色，宽、高比例为 1：1.5 的矩形，如图 2 所示，并用选择工具将该矩形调成图 3 状：4、复制该图形，并执行“修改变形垂直反转”命令，置于 其右：5、将该图 4 再次复制出一个，并通过对齐面板将其水平中齐和垂直中齐，如图 5 所示：6、选择墨水瓶工具，笔触色任意，在该图形边缘点一下，将 两边及底部的线条删除，选中上边的边线，右键剪切，点选 按钮，

2、插入一引导线图层，选中该图层，在舞台任意处右键粘贴到当前位 置，用对齐面板将其“左对齐“和垂直中齐”，20 帧处插入帧，如图 6 所示：7、选中图层 1 的图形，右键转换为元件，将其转换为名为“红 旗”的图形元件，双击该元件，在其编辑区，用对齐面板，将其“水 平中齐”和“垂直中齐”。8、回到名为“旗帜”的影片剪辑元件编辑区，在第 1 帧处用任 意变形工具将中心点移至元件的中心处，并将该图形元件的中心点吸 附到引导线上，20 帧插入关键帧，将其水平向右移动，如图 7、图 8 所示：9、选中引导线图层，插入图层 3，在图 层 3 第 1 帧，绘制一黄色五角星。绘制方法：选择多角星形工具，点击属性面

3、板的选按钮，在弹出的对话框中做如图 9 的设置：10、将拉出的五角星放置在如图 10 所示的位置：11、右键该五角星，将其转换为图形元件，双击该元件，进入 该元件编辑区，复制出一个星，将其改小，再复制出另外三个小星，摆放好位置，如图 11 所示：12、回到影片剪辑“旗帜”编辑区，选中星元件，选择任意变 形工具，将元件编辑中心置于左中处，如图 12 所示：13、第 1 帧处根据旗帜形状调整星的角度和宽度，第 7 帧、第 14 帧和第 20 帧插入关键帧，分别在第 7 帧和第 14 帧处再将星的形状和 宽度做适当调整，然后选中该图层，属性中创建补间动画，如图 13、图 14 和图 15 所示 14

4、、创建名为“遮罩红旗”的影片剪辑元件，在该编辑区，图 层 1 的第 1 帧处从库中拖出名为“旗帜”的影片剪辑元件，用对齐面板将其左对齐和上对齐，40 帧处插入帧。15、插入图层 2，用矩形工具绘制一无笔触色，填充色任意、宽 是旗帜元件的二分之一，高度要高于“旗帜”元件的矩形，置于如图 15 所示的位置：16、第 1 帧处用选择工具将该矩形形状做些改变，如图 16 所示：17、20 帧和 40 帧处插入关键帧，并在 20 帧处将矩形再次调 整形状，如图 17 所示：18、选中图层 2，属性中创建形状补间动画，并右键图层 2，选 择“遮罩层”。19、回到主场景，绘制一旗杆，从库中拖出影片剪辑元件“

5、遮 罩红旗”，置于旗杆上方，如图 18 所示：OK！测试，存盘！方法二：1、新建 Flash 文档，场景大小可根据需要设置，本例的宽、高均设置为 300 像素。帧聘设置为 24 像素。2、执行“插入新建元件”命令，创建名为“五星红旗”的影片剪辑元件。进入该元件编辑区后，再插入三个图层，并做如图 1 的名更名：3、选中底图图层的第 1 帧，用矩形工具，绘制一个无笔触色，填充色为红 色，宽、高为 250170 像素的矩形，对齐面板中设置“左对齐”和“上对齐”，如图 2：4、将该矩形复制、粘贴到“阴影”图层，并锁定该图层。5、回到底图图层，用选择工具调整形状，分别在 20 帧和 40 帧插入关键 帧

6、，在 20 帧再次调整形状，如图 3、图 4 所示：5、选中该图层，属性中创建“形状补间”。6、再次选中该图层，将鼠标放在被选中的时间帧上，右间“复制帧”，选 中“遮罩层”图层的第 1 帧，右键“粘贴帧”，锁定这两个图层。7、将“阴影”图层解锁，（为方便操作，可将底图和遮罩两个图层隐藏）打开混色器面板，填充色选择线性，做 8、右键该图，选择“转换为元件”，将其转换名为“阴影”的影片剪辑元 件。双击该元件，进入其编辑区，第 1 帧处用填充变形工具，将渐变色调整至 如图 7 状：9、在 40 处帧插入关键帧，并用填充变形工具将其调整至如图 8 状：10、将播放头放在第 1 帧至 40 帧中间的任意

7、处，属性中创建“形状补间”。11、回到“五星红旗”元件编辑区，选中“阴影”元件，属性中将 Alpha 值改为 20%。12、选中“遮罩层”图层，右键，选择“遮罩层”。13、将编辑好的三个图层锁定。选中“五角星”图层的第 1 帧，用多 角星形工具绘制无笔触色，填充色为黄色的五颗星，调整大小和角度（大 星为 56.553.9,小星为 16.916.1）,摆放位置如图 9 所示:14、在 40 帧处插入帧。15、执行“插入新建元件”命令，创建名为“红旗”的影片剪辑元 件，进入该元件编辑区，图层 1 第 1 帧，选用矩形工具，绘制一个无填充 色，笔触颜色为任意色，宽、高为 275240 的矩形，并在混

8、色器中将笔 触颜色的 Alpha 值修改为 0%。对齐面板中选择“左对齐”和“上对齐”。16、插入图层 2，从库中拖出名为“五星红旗”的影片剪辑元件。属 性中将 x 坐标值修改为 0，y 坐标值修改为 34。17、创建名为“ramp”的影片剪辑元 件，在该元件编辑区，用矩形工具绘制无笔 触色，填充色做如图 10 设置，宽、高为 275 240 矩形，对齐面板中选择“上对齐”和“左对齐”，如图 11：18、创建名为“dis”的影片剪辑元件，在该元件编辑区，将名为“ramp”的影片剪辑元件拖入，属性中给该元件取实例名为 ramp，并用对齐面板 其“左对齐”和“上对齐”。19、回到主场景，新插入三个

9、图层，并分别更名为如图 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);var ramp:MovieClip=d

10、isplace_mc.ramp;ramp.swapDepths(2);var speed=8;var channel=1;var flapX=50;var flapY=100;var mode=clamp;var offset=new flash.geom.Point(0,0);var displaceBitmap:flash.display.BitmapData=new flash.display.BitmapData(ramp._width,ramp._height);var displaceFilter:flash.filters.DisplacementMapFilter=new fl

11、ash.filters.DisplacementMapFilter(displaceBitmap,offset,channel,channel,flapX,flapY,mode);var baseX=80;var baseY=0;var octs=1;var seed=Math.floor(Math.random()*50);var stitch=true;var fractal=true;var gray=false;var noiseBitmap:flash.display.BitmapData=new flash.display.BitmapData(500,1);noiseBitmap

12、.perlinNoise(baseX,baseY,octs,seed,stitch,fractal,channel,gray);var shift:flash.geom.Matrix=new flash.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);li

13、neTo(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();测试，存盘 为语句添加的注释：本实例使用名为 perlin n

14、oise 的方法，perlin noise 用于在一个做为 旗帜影片剪辑的置换图内创建数个随机波，即使用随机杂点的像素填充图 像，使该旗帜看上去就像真的在飘动一样。注：perlin noise 又叫做 gradient noise,是科学家 Ken Perlin 在 1983 年独立研究出来的一种图象噪声（有的译作“柏 林噪音”，也有的译作“培林乱数”），即通过一组特定的点（例如 模型顶点,象素地址等)生成相应的随机变量。/在 displace_mc 中创建一个实例名为 perlin 的空影片剪 辑，以绘制 perlin noise displace_mc.createEmptyMovieCl

15、ip(perlin,1);/变量 ramp(斜面）是已存在于 displace_mc 中的影片剪辑，该影片剪辑用于设置旗帜由左至右 perlin noise 的缓动效果 var ramp:MovieClip=displace_mc.ramp;ramp.swapDepths(2);/将 ramp 置于 perlin noise 上 /*50%的红色在置换图内并非被置换了，当继续向右 /移动时 ramp 由 50%到透明，使 perlin noise 仍可看到 制作飘动的五星红旗 15/全局变量 var speed=8;/noise 以此速度提升（引起飘动）var channel=1;/红色-红色

16、用于置换图素 /置换变量 var flapX=50;/沿 X 轴置换图素的幂 var flapY=100;/沿 Y 轴置换图素的幂 var mode=clamp;/锁定图象，使源图不可见 /影片剪辑旗帜内有一不可见的边界，用于给定延伸超越旗 帜边界的范围 var offset=new flash.geom.Point(0,0);/置换图偏移量 /为置换物创建包含置换斜面大小在内的位图数据对象，并 应用该对象的置换滤镜 var displaceBitmap:flash.display.BitmapData=new flash.display.BitmapData(ramp._width,ramp

17、._height);var displaceFilter:flash.filters.DisplacementMapFilter=new 制作飘动的五星红旗 16 flash.filters.DisplacementMapFilter(displaceBitmap,offset,channel,channel,flapX,flapY,mode);/PERLINNOISE 变量 var baseX=80;/x轴 noise 的大小 var baseY=0;/y轴 noise 的大小 var octs=1;/用于 noise 的 noise 函数 var seed=Math.floor(Math.

18、random()*50);/用于 noise 的随机速度 var stitch=true;/通过修正来遮蔽 noise 以使其易于循环 var fractal=true;/使用不规则碎片形的 noise var gray=false;/由于有红色通道而不使用灰色区域 /为 noise 创建位图数据对象并应用 perlinNoise.由于是沿 y 轴循环,因此只需 1 象素高.其长度取决于产生 noise 的变形.借助于修正而开始梯度的填充,则可使 noise 作连续的环状运动.var noiseBitmap:flash.display.BitmapData=new flash.display.

19、BitmapData(500,1);制作飘动的五星红旗 17 noiseBitmap.perlinNoise(baseX,baseY,octs,seed,stitch,fractal,channel,gray);/由于 noise 只被创建一次并仅仅为旗帜效果作环状运动而 使用了开始位图填充,变换的矩阵就可使 noise 连续地运动.var shift:flash.geom.Matrix=new flash.geom.Matrix();/每一帧 onEnterFrame=function()/通过沿 x变换 noise 的速度移动矩阵 shift.translate(speed,0);/在 p

20、erlin 影片剪辑内绘制时,创建一个矩形.该矩形是随 变换的矩阵而产生的偏移量绘制出来的.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 制作飘动的五星红旗 18 displaceBitmap.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();