Flash AS2入门教程第七课：影片剪辑第10节用AS绘图

Flash AS2入门教程第七课：影片剪辑第10节用AS绘图
分类：flash入门教程
Flash AS入门教程第七课：影片剪辑第10节用AS绘图
用AS绘图
AS2.0这我们提供了一些绘图方法，利用这些方法，我们可以绘制一些图形。下面来认识一下这些方法。首先是画直线，要画线应先确定线的类型等，AS提供的是：
lineStyle() 方法：该方法确定线条的类型。
常用格式：MC.lineStyle(粗细，颜色，透明度)。该方法还有其它一些参数，本文就不介绍了。
比如：my_mc. lineStyle(1,0xff0000,100)
这就指明了线条粗细为1，颜色是红色，透明度为100%。
有了线条样式后就可以画直线了，首先将画笔移到要开始画直线的起始点上，AS提供了：
moveTo（）方法：该方法将画笔移到起画点上。
用法：MC.moveTo(x,y);
起画点有了，就可以画线了，AS提供了：
lineTo()方法： 该方法将从起画点到终点画一条直线，并将起画点移到终点。
用法：MC.lineTo(x,y)
有了上面的三个方法就可以画直线了，下面就画一条：
this.lineStyle(1,0xff0000,100);
this.moveTo(0,0);
this.lineTo(200,200);
测试影片，上面的代码画了一条从（0，0）到（200，200）的红色直线。
下面扩展一下，画个三角形：
this.lineStyle(1,0xff0000,100);
this.moveTo(200,200);
this.lineTo(300,200);
this.lineTo(250,300);
this.lineTo(200,200);
我想我们绘画，肯定不会甘心只画一些线条，还想画一些形状，下面的方法对我们这种愿望提供了可能。
beginFill()方法：该方法从字面上就能理解，开始填充。
用法：MC.beginFill(颜色，透明度)
endFill()方法：用beginFill()中的颜色填充图形。
比如将上面的三角形填上蓝色：
this.lineStyle(1,0xff0000,100);
this.beginFill(0x0000ff,100);
this.moveTo(200,200);
this.lineTo(300,200);
this.lineTo(250,300);
this.lineTo(200,200);
ebdFill();
测试影片，会看到一个红色笔触蓝色填充的三角形。
如果想要无笔触的三角形，那么上面第一句不要就行了。
看起来到目前为止，我们已经自认为已学会了用AS绘图了，很想跃跃欲试画点什么玩意儿，好吧，就满足你吧，下面我们来画一个五星吧^_^
用矩形工具画一个与舞始一样大的黑色矩形。为什么要画这个？很简单，黑色背景下红五星要好看些。为什么不直接将文档的背景色设为黑色？因为很多网站插入的swf文件默认是透明的，比如我们论坛。当然你完全可以连这个黑色矩形都用AS来完成。
将下列代码输入到帧动作面板中：
this.createEmptyMovieClip("wx_mc",this.getNextHighestDepth());
wx_mc._x = Stage.width/2;
wx_mc._y = Stage.height/2;
wx_mc.beginFill(0xFF0000,100);
wx_mc.moveTo(0,0);
wx_mc.lineTo(0,-100);
wx_mc.lineTo(25,-30);
wx_mc.lineTo(0,0);
wx_mc.endFill();
wx_mc.beginFill(0xee0202,100);
wx_mc.moveTo(0,0);
wx_mc.lineTo(0,-100);
wx_mc.lineTo(-25,-30);
wx_mc.lineTo(0,0);
wx_mc.endFill();
for(i=0;i<5;i++){
wx_mc.duplicateMovieClip("wx1"+i,this.getNextHighestDepth());
wx1 = eval("wx1"+i);
wx1._rotation = i*72;
}
this.createEmptyMovieClip("xg_mc",this.getNextHighestDepth());
xg_mc._x = Stage.width/2;
xg_mc._y= Stage.height/2;
xg_mc.lineStyle(1,0xeed600,100);
xg_mc.moveTo(0,-120);
xg_mc.lineTo(0,-140);
xg_mc.moveTo(10,-160);
xg_mc.lineTo(10,-180);
for(j=0;j<37;j++){
xg_mc.duplicateMovieClip("xg"+j,this.getNextHighestDepth());
xg1_mc = eval("xg"+j);
xg1_mc._rotation = j*10;
}
测试影片，效果出来了。
代码分析：
首先创建一个空的MC“wx_mc”用来绘制五星。并将wx_mc放到舞中央。
this.createEmptyMovieClip("wx_mc",this.getNextHighestDepth());
wx_mc._x = Stage.width/2;
wx_mc._y = Stage.height/2;
接下来画一个红色三角形，从下面的代码中可以看到，三角形的右下角在wx_mc的注册点上，即舞台中央，这一点很重要，因为我们后面要旋转这个三角形。
wx_mc.beginFill(0xFF0000,100);
wx_mc.moveTo(0,0);
wx_mc.lineTo(0,-100);
wx_mc.lineTo(25,-30);
wx_mc.lineTo(0,0);
wx_mc.endFill();
接下来，继续画图又画了一个三角形，这个三角形与第一个三角形刚好水平相反，这样就组成了五星的一只角，而这个三角形的颜色比第一个三角形略深，这样就形成了立体感。
wx_mc.beginFill(0xee0202,100);
wx_mc.moveTo(0,0);
wx_mc.lineTo(0,-100);
wx_mc.lineTo(-25,-30);
wx_mc.lineTo(0,0);
wx_mc.endFill();
有了一只角了，要形成五星就简单了，复制5份，然后每份旋转360/5x份数，五星就绘成了。
for(i=0;i<5;i++){
wx_mc.duplicateMovieClip("wx1"+i,this.getNextHighestDepth());
wx1 = eval("wx1"+i);
wx1._rotation = i*72;
}
五星画好了，还想加些光辉，那又新建一个MC，用来画光辉，就在五星外围画一条直线，然后复制直线36份，每10度放一份就行了。用同样的方法画第二层光辉。
this.createEmptyMovieClip("xg_mc",this.getNextHighestDepth());
xg_mc._x = Stage.width/2;
xg_mc._y= Stage.height/2;
xg_mc.lineStyle(1,0xeed600,100);
xg_mc.moveTo(0,-120);
xg_mc.lineTo(0,-140);
xg_mc.moveTo(10,-160);
xg_mc.lineTo(10,-180);
for(j=0;j<37;j++){
xg_mc.duplicateMovieClip("xg"+j,this.getNextHighestDepth());
xg1_mc = eval("xg"+j);
xg1_mc._rotation = j*10;
}
上面画的图形全部是直线的，这时我们又想画点花儿什么的，需要用到曲线，有画曲线的方法吗？有，下面就来学习
curveTo() 方法：该方法画一条由起画点经控制点到终点的一条曲线。
用法：MC. curveTo(控制点x,控制点y,终点x,终点y);
有了画曲线的方法那就画个花儿吧。
代码：
this.createEmptyMovieClip("mh_mc",this.getNextHighestDepth());
mh_mc._x = Stage.width /2;
mh_mc._y = Stage.height/2;
mh_mc.beginFill(0xff0000,100);
mh_mc.moveTo(0,0);
mh_mc.curveTo(-20,-25,-10,-45);
mh_mc.curveTo(0,-60,10,-45);
mh_mc.curveTo(20,-25,0,0);
mh_mc.endFill();
for(i=0;i<5;i++){
mh_mc.duplicateMovieClip("mh"+i,this.getNextHighestDepth());
mh1_mc = eval("mh"+i);
mh1_mc._rotation= i*72;
}
实际上这个花的画法跟五星差不多，只是这个是曲线的而已。
现在问题又来了，这花的颜色不理想，是纯色的，在flash创作工具中还有个叫什么渐变填充的家伙，可以搞出些更好的效果，在AS中同样有这家伙。
beginGradientFill（）方法：该方法可实现渐变填充。
参数：fillType: ― 线性渐变用"linear"，放射渐变用"radial"。
colors: ― 用于渐变色的 RGB 十六进制颜色值的数组；例如，红色为 0xFF0000，蓝色为 0x0000FF。可以至多指定 15 种颜色。对于每种颜色，请确保在 alphas 和 ratios 参数中指定对应值。
alphas: ― colors 数组中对应颜色的 Alpha 值数组；有效值为 0 到 100。如果值小于 0，则 Flash 使用 0。如果值大于 100，则 Flash 使用 100。
ratios: ― 颜色分布比例数组；有效值为 0 到 255。即渐变中每种颜色的比例值，可以理解为颜色面板中，渐变色的滑块的位置。比如在colors参数为：[0xFF0000,0x0000FF],本参数为：[250,255]，那么就相当于在混色器中的这种情况：
matrix: ― 一个转换矩阵：
flash.geom.Matrix 类包括 createGradientBox() 方法，通过该方法可以方便地设置矩阵，以便用于 MovieClip 类的 beginGradientFill() 方法。
用法：首先需要导入flash.geom.Matrix类
import flash.geom.*
然后，创建一个flash.geom.Matrix类的实例，再调用createGradientBox方法：
matrix = new Matrix();
matrix.createGradientBox（渐变范围的宽，渐变范围的高，旋转， x轴方向的偏移量，y轴方向的偏移量）;
x轴方向的偏移量：一般为要填充的形状的x减去渐变范围的宽。
y轴方向的偏移量：一般为要填充的形状的y减去渐变范围的高。
根据形状可调。
这里边的4个参数想一下渐变填充工具就清楚了。
focalPointRatio: [可选] ― 在 Flash Player 8 中添加。一个数字，控制渐变焦点的位置。值 0 表示焦点位于中心。值 1 表示焦点位于渐变圆的一条边界上。值 -1 表示焦点位于渐变圆的另一条边界上。小于 -1 或大于 1 的值将被舍入为 -1 或 1。
有了这个方法我们就想把那朵花搞成桃花了，使用由红色到粉红色的放射填充。
效果：
代码：
import flash.geom.*;
this.createEmptyMovieClip("mh_mc",this.getNextHighestDepth());
mh_mc._x = Stage.width /2;
mh_mc._y = Stage.height/2;
var color:Array = [0xFF0000,0xfee7f8];
var alph:Array= [100,100];
var rotio:Array = [0,255];
var matrix = new Matrix();
matrix.createGradientBox(40,100,Math.PI,-20,-40);//这里要填充的形状注册点是（0，0）这样就算出了-20，和-40（调整后的）
mh_mc.beginGradientFill("radial",color,alph,rotio,matrix);
mh_mc.moveTo(0,0);
mh_mc.curveTo(-20,-25,-10,-45);
mh_mc.curveTo(0,-60,10,-45);
mh_mc.curveTo(20,-25,0,0);
mh_mc.endFill();
for(i=0;i<5;i++){
mh_mc.duplicateMovieClip("mh"+i,this.getNextHighestDepth());
mh1_mc = eval("mh"+i);
mh1_mc._rotation= i*72;
}
this.createEmptyMovieClip("hz_mc",0);
hz_mc._x =Stage.width/2;
hz_mc._y = Stage.height/2;
hz_mc.lineStyle(6,663333,100);
hz_mc.moveTo(0,0);
hz_mc.curveTo(-5,110,0,160);
this.createEmptyMovieClip("hy_mc",this.getNextHighestDepth());
hy_mc._x =Stage.width/2;
hy_mc._y = Stage.height/2;
color = [0x0e730d,0x06db2b];
matrix.createGradientBox(60,20,Math.PI,10,50);
hy_mc.beginGradientFill("radial",color,alph,rotio,matrix);
hy_mc.moveTo(0,70);
hy_mc.curveTo(35,40,70,50);
hy_mc.curveTo(35,90,0,70);
hy_mc.endFill();
hy_mc.duplicateMovieClip("hy1_mc",this.getNextHighestDepth());
hy1_mc._xscale = -100;
hy1_mc._x =hy_mc._x -6;
hy1_mc._y =hy_mc._y +10;
差不多了，再做两个练习，一个是涂鸦板的制作，一个是动态引导线的效果。
涂雅板的制作:
效果如下，在左边选择颜色和粗细后，可在右边绘图。
按下图画好图形,并将每个图形转换为MC.
实例名称:
黑色-hs_mc;
红色-hongs_mc;
橙色-cs_mc;
黄色-huans_mc;
绿色-lus_mc;
蓝色_nans_mc;
紫色-zs_mc;
大园-m6_mc;
二园-m4_mc;
三园_m3_mc;
幺园-m1_mc;
新插入一层,打开帧动作面板,输入:
var color = 0x000000;
var dx =1;
var h:Boolean = true;
hs_mc.onRelease = function (){
color = 0x000000;
}
hongs_mc.onRelease = function (){
color = 0xFF0000;
}
cs_mc.onRelease = function (){
color = 0xFF9900;
}
huans_mc.onRelease = function (){
color = 0xFFFF00;
}
lus_mc.onRelease = function (){
color = 0x00FF00;
}
nans_mc.onRelease = function (){
color = 0x0000FF;
}
zs_mc.onRelease = function (){
color = 0xFF00FF;
}
m1_mc.onRelease = function(){
dx = 1;
}
m3_mc.onRelease = function(){
dx = 3;
}
m4_mc.onRelease = function(){
dx = 4;
}
m6_mc.onRelease = function(){
dx = 6;
}
onMouseDown = function(){
if(_xmouse >170){
h=true;
}
lineStyle(dx,color,100);
moveTo(_xmouse,_ymouse);
}
onMouseMove = function(){
if(_xmouse <170){
h=false;
}
if(h){
lineTo(_xmouse,_ymouse);
}
}
onMouseUp= function(){
h=false;;
}
鼠绘引导线:
效果如下:用鼠标画一条引导线,小球将按引导线运动.
画一个球,或者你喜欢的任何玩意儿，转换为MC,实例名称为:ball_mc.
然后在帧动作面板中输入:
var a:Array;
this.onMouseDown = function() {
this.lineStyle(1, 0x0000ff, 100);
a = new Array();
a.push(_xmouse, _ymouse);
this.moveTo(_xmouse, _ymouse);
this.onMouseMove = function() {
a.push(_xmouse, _ymouse);
this.lineTo(_xmouse, _ymouse);
};
};
this.onMouseUp = function() {
delete this.onMouseMove;
var z:Number = new Number();
this.onEnterFrame = function() {
ball_mc._x = a[z++];
ball_mc._y = a[z++];
if(z>a.length){
delete onEnterFrame;
this.clear();
};
}
};
Flash cs4教程：CS4新特性之全新的动画理念Ⅱ
浏览：0 | 发布于：2009.02.10 | 分类：flash入门教程
Flash cs4教程：CS4新特性之全新的动画理念Ⅱ
动画预设
Flash cs4新增加动画预设功能，这可以把一些做好的补间动画保存为模板，并将它应用到其它对象上。在Flash cs4中元件和文本对象可以应用动画预设。在Flash cs3中已为我们保存了一些补间动画，我们可以直接将这些补间动画应用到我们自已的对象上。现在就来看看，都有些什么样的效果。点击“窗口”>“动画预设”，这样就打开了动画预设面板：
   
从上面左图中可以看到，这里一共有32项动画效果，它们都放在默认预设中，点击默认预设旁边的小三角形，文件夹将打开，点击其中任一一个动画，在上面的小窗口中将出现相应的动画效果。如上面右图。
下面来试一个效果，我想试一下烟雾效果。我将文档的背景变成了黑色，然后画了下面的形状，用放射填充，左右色标均为白色，透明度是60%和30%。

然后，我将它转换成了MC，因为只有元件和文本才能应用预设动画。现在打开预设动画面板，找到烟雾效果，然后点击“应用”。

接下来，新建一图层，在第50帧插入关键帧，从库中将刚做的元件拖到舞台上，同样给它应用烟雾动画预设。
可以肯定的说，仅仅是这32种动画效果不能满足你的全部需要，怎么办呢？简单得很，你自已做啊。但你又说，我只想做一次，以后用的时候也象这个一样套用就行了。“啊！盗版”（Adobe）说：这也是可以的，你可以将你自已的动画预存。
我导入了一张图片，将它做面MC，然后在舞台上，制作了一段旋转缩放的动画。然后在时间轴上点右键，点击“另存为动画预设”：

这时会弹出一个对话框，要求输入预设动画的名称：我的名称是：“旋转缩放”

确定后，打开预设动画面板，可以看到，在自定义预设文件夹中已有“旋转缩放”动画。它的用法与默认预设是一样的。

但有个问题，当你点击旋转缩放动画时，却看不到预览效果。Flash 会将预设另存为 XML 文件。这些文件存储在以下目录中： Do***ents and Settings\<用户>\Local Settings\Application Data\Adobe\Flash CS4\<语言>\Configuration\Motion Presets\中。你将这个动画导出成swf文件，取相同的名字，也放到这个目录中，就可以看看到预览了。
还有一和情况就是，当看到别人的动画效果，想借来用一下，这也是可以的，但你要有那个预存的 xml 文件才行。当然你可以从原文件中将其另存为动画预设来获得。有了xml文件，你就可以在动画预设面板中导入这个动画预设，作为已用，点动画预设面板右上角的倒三角，将打开一个菜单，点击“导入”即可导入动画预色。

从上图可以看到，同样有“导出”菜单项，也就是说你可以将你的动画预设导出为xml文件。
Flash初级教程：制作水滴滴落动画效果
浏览：4 | 发布于：2009.02.09 | 分类：flash入门教程
Flash初级教程：制作水滴滴落动画效果
第一步：打开FLASH8软件，新建FLASH文档。新建4个图层，分别取名为：水滴、水滴声音、溅起水、海水。见下图：

第二步：新建4个图层后，请点水滴图层的第一帧。绘制水滴，然后同时绘制水滴落下的画面，见下图：

第三步：画完水滴后，点海水图层的第一帧，在舞台上画一个蓝色长方体无边框，设置它的大小，并把它转换成图形元件，设置透明度。为了让海水透明不破坏水滴下来的效果，为了让海水有流动效果，将海水图形稍微往右拉点，为的是后面，见下图：

第四步：设置好海水相应的设置后，在合适的帧处插入关键帧，并在中间创建形状动画。见下图：

第五步：制作好海水图层后，现在请点溅起水的图层。在第10帧插入空白关键帧，然后在空白关键帧处绘制溅起水的动画。见下图：

以上就是简单的几个步骤。自己的一点小心意，希望大家喜欢。