当前位置: 首页 > 图文教程 > Flash动画 > ActionScript > Flash AS3.0 实例教程 喷泉动画特效

ActionScript
FLASH AS3与网页JS参数值传递的问题
Flash AS3的parameters对象处理网页参数
Flash教程 认识Flash ActionScript的环境
Flash ActionScript编程基础
Flash AS3代码实现鼠标跟随喷枪涂鸦效果
falsh 跨域调用配置
Flash AS3.0 实例教程 喷泉动画特效
AS3 Loader与URLLoader的比较
ColorTransform类调整显示对象的颜色值
Flash AS3 快速制作烟雾动画
Flash AS3 制作文字飞出动画
ActionScript 学习小心得
ActionScript3.0读取网页FlashVars中的参数的问题
通过实例学习AS3.0:案例三
通过实例学习Flash AS3.0:案例四
通过实例学习Flash AS3.0:案例五
通过实例学习Flash AS3.0:案例六
Flash教程:认识Flash ActionScript的环境
Flash as入门(1):认识AS面板
Flash as入门(3):AS基本语法

ActionScript 中的 Flash AS3.0 实例教程 喷泉动画特效


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-09-16   浏览: 108 ::
收藏到网摘: n/a

在这个实例教程中,我们将介绍利用速度向量和重置对象的技巧来实现喷泉效果。所谓向量就是有方向的量。比如一辆车从东向西以80公里每小时的速度行驶,那么我们就可以得到汽车的速度向量,它包括两个元素:速度,每小时80公里,方向,由东向西。
  下面我们来分析一下喷泉是怎样形成的。
  喷泉是若干个水珠向上喷射,然后又受重力影响掉回地面。这个过程的速度向量有哪些,具体又是怎么的呢?很容易发现至少的两个力,一个是使水珠向上喷射的外力,一个是使水珠掉回地面的重力。
  外力的速度向量:速度我设为10-20间的随机数,方向是向上的那就一定是y轴上的负数了。将这个速度向量加到水珠上就使水珠向上喷射了。
  具体做法是:在ENTER_FRAME事件中这水珠的y 值加上-10到-20间的一个随机数。
  重力的速度向量:速度就比较小了我设为0.5,方向则是y轴上的正值。同样加到ENTER_FRAME事件中,这样水珠在喷射后就会掉回地上。
  还有个问题,因为速度向量是加在ENTER_FRAME事件中的,水珠就可能一直按这些速度向量运动,面远离舞台,那喷泉就不知会喷到什么地方去了。
  要解决这个问题,就要将超出舞台边界的水珠重新定位到喷射口,这样就形成了不间断的喷射了。
  好了,上面分析了效果产生方法,下面就来制作。
  第一步是要画一个水珠,新建一个影片剪辑元件,用放射填充画一个椭圆,左色标为白色,透明度100%,右色标略带点灰色,透明度50%。在属性面板中设置椭圆在宽为2像素,高为5像素。在库中右击该元件,打开连接窗口,(cs4打开属性窗口),设置一个类名,我设的是 pall。
  接下来回到主场景,打开帧动作面板,我们来写代码。
  喷泉是由若干水珠形成的,多少呢?我整了500个:
  var count:int = 500;
  重力速度向量:
  var zl:Number = 0.5;
  将这500个水珠放到一个数组中:
  var balls:Array;
  balls = new Array();
  用一个for循环来将500个水珠放到数组中:
  for (var i:int = 0; i < count; i++) {
  var ball:pall = new pall();
  将水珠定位到水珠的喷射口:
  ball.x = 260;
  ball.y = 200;
  在x轴方向也设一个速度向量,使水珠在x轴的一定范围内,并将这个速度向量存到每个水珠的自定义属性vx中:
  ball["vx"]= Math.random() * 2 - 1;
  下面是y轴方向的速度向量,将它存在自定义属性vy中:
  ball["vy"] = Math.random() * -10 - 10;
  将水珠放到舞台上,并存到数组中:
  addChild(ball);
  balls.push(ball);
  接下来侦听ENTER_FRAME事件,实现喷泉效果:
  addEventListener(Event.ENTER_FRAME, onEnterFrame);
  onEnterFrame函数内容:
  通过一个for循环为数组中的水珠加上各个速度向量:
  for (var i:Number = 0; i < balls.length; i++) {
  var ball:pall = pall(balls);
  首选在喷射速度向量上加上重力速度向量,这样每一帧的时间就会加一次重力,而喷射力却没变,这样重力就会逐渐超过喷射力面使水珠下落:
  ball["vy"] += zl;
  将x,y轴速度向量加到水珠上:
  ball.x +=ball["vx"];
  ball.y +=ball["vy"];
  接下来的是看水珠是否超出了舞台,如果超出了舞台,则将水珠重新定位到喷射口,并将速度向量设为初始状态。
  if (ball.x - ball.width/2> stage.stageWidth ||
  ball.x + ball.width/2 < 0 ||
  ball.y - ball.width/2 > stage.stageHeight ||
  ball.y + ball.width/2 < 0) {
  ball.x = 260;
  ball.y = 200;
  ball["vx"]= Math.random() * 2 - 1;
  ball["vy"] = Math.random() * -10 - 10;
  完整代码: var count:int = 500; var zl:Number = 0.5;
var balls:Array;
balls = new Array();
for (var i:int = 0; i < count; i++) {
var ball:pall = new pall();
ball.x = 260;
ball.y = 200;
ball["vx"]= Math.random() * 2 - 1;
ball["vy"] = Math.random() * -10 - 10;
addChild(ball);
balls.push(ball);
}
addEventListener(Event.ENTER_FRAME, onEnterFrame);
function onEnterFrame(event:Event):void {
for (var i:Number = 0; i < balls.length; i++) {
var ball:pall = pall(balls[i]);
ball["vy"] += zl;
ball.x +=ball["vx"];
ball.y +=ball["vy"];
if (ball.x - ball.width/2> stage.stageWidth ||
ball.x + ball.width/2 < 0 ||
ball.y - ball.width/2 > stage.stageHeight ||
ball.y + ball.width/2 < 0) {
ball.x = 260;
ball.y = 200;
ball["vx"]= Math.random() * 2 - 1;
ball["vy"] = Math.random() * -10 - 10;
}
}
}