繁體中文当前位置: 首页 > 图文教程 > Flash动画 > ActionScript > AS3实例教程:结合基本的动画和AS3绘图API
- ActionScript
- FLASH 3D相册之利用BitmapData类制作
- Flash 脚本游戏开发教程 第一课
- Flash 脚本游戏开发教程第二课
- Flash 脚本游戏开发教程第三课
- Flash 脚本游戏开发教程第四课
- Flash 脚本游戏开发教程第五课
- Flash 脚本游戏开发教程第六课
- Flash 脚本游戏开发教程第七课
- Flash 脚本游戏开发教程第八课
- Flash AS实现的蝌蚪摆尾动画的教程
- 从基础开始深入学Flash AS3教程(4)(译文)
- 从基础开始深入学Flash AS3教程(5)(译文)
- 从基础开始深入Flash AS3教程(2)(译文)
- 从基础开始深入学Flash AS3教程(3)(译文)
- Flash AS3对单个图片进行角色动作化处理
- 从基础开始深入Flash AS3教程(1)(译文)
- Flash教程:if条件语句的用法
- Flash AS教程:_visible属性的详细讲解
- Flash AS教程:图片环绕旋转效
- Flash教程:trace()的使用
ActionScript 中的 AS3实例教程:结合基本的动画和AS3绘图API
出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2010-03-20 浏览: 80 ::
收藏到网摘: n/a
这是一个粒子效果实例教程，学习如何结合基本的动画和 ActionScript 3 绘图API。
演示：
1、新建Flash文件，设置属性：宽、高默认为550*400 ，保存，名称任意。图1：
2、用椭圆工具画一个 10 × 10 大小的球，颜色任意。
3、把球转换成影片剪辑，命名 "Particle "，注册点居中。图2：
4、把球从舞台上删除。
5、打开库面板，右键单击Particle影片剪辑，选择属性。在属性面板中的链接项，为ActionScript导出的复选框打勾。在类的文本输入框中输入" Particle " 。图3：
6、新建一个ActionScript文件，命名为 " Particle "，保存在fla文件相同的目录下。图4：
在编译器中输入代码：
package {
import flash.display.MovieClip;
public class Particle extends MovieClip {
//We need different speeds for different particles.
//These variables can be accessed from the main movie, because they are public.
public var speedX:Number;
public var speedY:Number;
function Particle ():void {
}
}
}
//We need few imports for the filters
import fl.motion.Color;
import flash.geom.ColorTransform;
//Create an array for the particles for later use
var numberOfParticles:Number = 30;
var particlesArray:Array = new Array();
//This loop creates 30 particles that are positioned randomly on the stage.
//We also add some effects to the particles
for (var i=0; i < numberOfParticles; i++) {
var particle:Particle = new Particle();
//Give random x and y speed to the particle.
//Math.random returns a random number n, where 0 <= n < 1.
particle.speedX = 2 + Math.random();
particle.speedY = 2 + Math.random();
//Set the starting position
particle.y = Math.random() * stage.stageHeight;
particle.x = Math.random() * stage.stageWidth;
//Set a random tint to the particle, so they will have different colors.
var ct:Color = new Color();
ct.setTint (0xFFFFFF * Math.random(), 0.5);
particle.transform.colorTransform = ct;
//Set random size to the particles, so the particles will differ in size
particle.scaleX = 0.5 + Math.random();
particle.scaleY = particle.scaleX;
//This array is used to store all of the filters
var particleFilters:Array = new Array();
//Create a different blur effect in each particle
var tempBlurAmount = Math.random()*4;
var blur:BlurFilter = new BlurFilter(tempBlurAmount, tempBlurAmount, 1);
particleFilters.push (blur);
//Create a glow effect in each particle
var color:Number = 0x000000;
var alphaValue:Number = 0.5;
var blurX:Number = 20;
var blurY:Number = 20;
var strength:Number = 5;
var glow:GlowFilter = new GlowFilter(color,
alphaValue,
blurX,
blurY,
strength);
particleFilters.push (glow);
//Apply the created filters to the particle (blur & glow)
particle.filters = particleFilters;
//Add the particle to the stage and push it into an array for later use
addChild (particle);
particlesArray.push (particle);
}
8、注册Event.ENTER_FRAME事件，随机地移动粒子。接上面输入代码：
addEventListener (Event.ENTER_FRAME, enterFrameHandler);
//This function is responsible for animation
function enterFrameHandler (e:Event):void {
//Let’s loop through the particles
for (i=0; i < particlesArray.length; i++) {
var particleOne:Particle = particlesArray[i];
//Move the particle to a new location
particleOne.x += particleOne.speedX;
particleOne.y += particleOne.speedY;
//Check the boundaries.
//If a hit occurs, multiply the speed by (-1) to reverse the speed.
//Right edge
if (particleOne.x > stage.stageWidth) {
particleOne.x = stage.stageWidth - particleOne.width/2;
particleOne.speedX *= -1;
}
//Left edge
else if (particleOne.x < 0) {
particleOne.x = particleOne.width/2;
particleOne.speedX *= -1;
}
//Bottom
if (particleOne.y > stage.stageHeight) {
particleOne.y = stage.stageHeight - particleOne.width/2;
particleOne.speedY *= -1;
}
//Top
else if (particleOne.y < 0) {
particleOne.y = particleOne.width/2;
particleOne.speedY *= -1;
}
}
}
9、为粒子加入连线，修改 enterFrameHandler，代码如下：
function enterFrameHandler (e:Event):void {
//Clear the previous lines
graphics.clear();
//Let’s loop through the particles
for (i=0; i < particlesArray.length; i++) {
var particleOne:Particle = particlesArray[i];
//Move the particle to a new location
particleOne.x += particleOne.speedX;
particleOne.y += particleOne.speedY;
//Check the boundaries
if (particleOne.x > stage.stageWidth) {
particleOne.x = stage.stageWidth - particleOne.width/2;
particleOne.speedX *= -1;
}
else if (particleOne.x < 0) {
particleOne.x = particleOne.width/2;
particleOne.speedX *= -1;
}
if (particleOne.y > stage.stageHeight) {
particleOne.y = stage.stageHeight - particleOne.width/2;
particleOne.speedY *= -1;
}
else if (particleOne.y < 0) {
particleOne.y = particleOne.width/2;
particleOne.speedY *= -1;
}
//Go through the other particles to check the distance with the first particle
for (var j:uint = i + 1; j < particlesArray.length; j++) {
var particleTwo:Particle = particlesArray[j];
var distanceX:Number = particleOne.x - particleTwo.x;
var distanceY:Number = particleOne.y - particleTwo.y;
//Use Pythagorean theorem (a^2 + b^2 = c^2) to calculate the distance
var distance:Number = Math.sqrt(distanceX * distanceX + distanceY * distanceY);
//If the distance is smaller than 80px, draw a line between the particles
if (distance < 80) {
drawLine (particleOne, particleTwo);
}
}
}
}
在 enterFrameHandler 之后添加方法drawLine实现画线功能。
//This function draws a black line between two particles
function drawLine (particleOne:Particle, particleTwo:Particle):void {
graphics.lineStyle (1, 0x000000);//线为白色，如黑色背景改为0xffffff
graphics.moveTo (particleOne.x, particleOne.y);
graphics.lineTo (particleTwo.x, particleTwo.y);
}
完整主类代码：
//We need few imports for the filters
import fl.motion.Color;
import flash.geom.ColorTransform;
//Create an array for the particles for later use
var numberOfParticles:Number = 30;
var particlesArray:Array = new Array();
//This loop creates 30 particles that are positioned randomly on the stage.
//We also add some effects to the particles
for (var i=0; i < numberOfParticles; i++) {
var particle:Particle = new Particle();
//Give random x and y speed to the particle.
//Math.random returns a random number n, where 0 <= n < 1.
particle.speedX = 2 + Math.random();
particle.speedY = 2 + Math.random();
//Set the starting position
particle.y = Math.random() * stage.stageHeight;
particle.x = Math.random() * stage.stageWidth;
//Set a random tint to the particle, so they will have different colors.
var ct:Color = new Color();
ct.setTint (0xFFFFFF * Math.random(), 0.5);
particle.transform.colorTransform = ct;
//Set random size to the particles, so the particles will differ in size
particle.scaleX = 0.5 + Math.random();
particle.scaleY = particle.scaleX;
//This array is used to store all of the filters
var particleFilters:Array = new Array();
//Create a different blur effect in each particle
var tempBlurAmount = Math.random()*4;
var blur:BlurFilter = new BlurFilter(tempBlurAmount, tempBlurAmount, 1);
particleFilters.push (blur);
//Create a glow effect in each particle
var color:Number = 0x000000;
var alphaValue:Number = 0.5;
var blurX:Number = 20;
var blurY:Number = 20;
var strength:Number = 5;
var glow:GlowFilter = new GlowFilter(color,
alphaValue,
blurX,
blurY,
strength);
particleFilters.push (glow);
//Apply the created filters to the particle (blur & glow)
particle.filters = particleFilters;
//Add the particle to the stage and push it into an array for later use
addChild (particle);
particlesArray.push (particle);
}
addEventListener (Event.ENTER_FRAME, enterFrameHandler);
//This function is responsible for animation
function enterFrameHandler (e:Event):void {
//Clear the previous lines
graphics.clear();
//Let’s loop through the particles
for (i=0; i < particlesArray.length; i++) {
var particleOne:Particle = particlesArray[i];
//Move the particle to a new location
particleOne.x += particleOne.speedX;
particleOne.y += particleOne.speedY;
//Check the boundaries
if (particleOne.x > stage.stageWidth) {
particleOne.x = stage.stageWidth - particleOne.width/2;
particleOne.speedX *= -1;
}
else if (particleOne.x < 0) {
particleOne.x = particleOne.width/2;
particleOne.speedX *= -1;
}
if (particleOne.y > stage.stageHeight) {
particleOne.y = stage.stageHeight - particleOne.width/2;
particleOne.speedY *= -1;
}
else if (particleOne.y < 0) {
particleOne.y = particleOne.width/2;
particleOne.speedY *= -1;
}
//Go through the other particles to check the distance with the first particle
for (var j:uint = i + 1; j < particlesArray.length; j++) {
var particleTwo:Particle = particlesArray[j];
var distanceX:Number = particleOne.x - particleTwo.x;
var distanceY:Number = particleOne.y - particleTwo.y;
//Use Pythagorean theorem (a^2 + b^2 = c^2) to calculate the distance
var distance:Number = Math.sqrt(distanceX * distanceX + distanceY * distanceY);
//If the distance is smaller than 80px, draw a line between the particles
if (distance < 80) {
drawLine (particleOne, particleTwo);
}
}
}
}
//This function draws a black line between two particles
function drawLine (particleOne:Particle, particleTwo:Particle):void {
graphics.lineStyle (1, 0x000000);
graphics.moveTo (particleOne.x, particleOne.y);
graphics.lineTo (particleTwo.x, particleTwo.y);
}
评论 (0) All
