AS3.0粒子效果实例(1)
作者:cao4811 类型:原创 来源:中国教程网论坛
这是一个粒子效果实例教程,将学习如何创建粒子并产生一个连锁反应。
演示:
1、新建Flash文档,设置:宽、高为 400 × 400 ,保存。
2、用椭圆工具在舞台上画一个 20 × 20 大小的圆。 (你能选择任意的颜色)
3、右键单击圆形,把它转换成影片剪辑,注册点居中。
4、在ActionScript导出的复选框中打勾 ,做类链接,类名为" Particle " 。图1:
5、把圆形从舞台删除,新建ActionScript 3.0文件。图2:
6、我们编写一个外部的Particle类。在编译器中输入代码:
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;
public var partOfExplosion:Boolean = false;
function Particle ():void {
}
}
}7、保存在fla文件的同一目录下,名为 " Particle " 。图3:
8、切换到我们的fla主文档。首先我们在舞台上生成粒子实例。在第一帧输入代码:
//We need few imports for the color
import fl.motion.Color;
import flash.geom.ColorTransform;
/*We want 20 particles at the start
particlesArray is used when we animate each particle */
var numberOfParticles:Number = 20;
var particlesArray:Array = new Array();
//Each time a hit occurs, we want to create 10 new particles
var numberOfExplosionParticles:uint = 10;
//This loop creates the first particles and gives them speed and coordinates
for (var i=0; i < numberOfParticles; i++) {
var particle:Particle = new Particle();
//We want the particles to stay at their original position
particle.speedX = 0;
particle.speedY = 0;
//Set the starting position
particle.y = Math.random() * stage.stageHeight;
particle.x = Math.random() * stage.stageWidth;
//Add the particle to the stage and push it to array for later use.
addChild (particle);
particlesArray.push (particle);
}
/*This function checks whether two particles have collided*/
function checkForHit (particleOne:Particle, particleTwo:Particle):void {
/*Let’s make sure we only check those particles, where one is moving and the other
is stationary. We don’t want two moving particles to explode. */
if ((particleOne.partOfExplosion == false && particleTwo.partOfExplosion == true) ||
particleOne.partOfExplosion == true && particleTwo.partOfExplosion == false ) {
//Calculate the distance using Pythagorean theorem
var distanceX:Number = particleOne.x - particleTwo.x;
var distanceY:Number = particleOne.y - particleTwo.y;
var distance:Number = Math.sqrt(distanceX*distanceX + distanceY*distanceY);
/* If the distance is smaller than particle’s width, we have a hit.
Note: if the particles were of different size, the calculation would be:
distance < ((particleOne.width / 2) + (particleTwo.width / 2))
*/
if (distance < particleOne.width) {
//Set a random tint to the particles that explode
var ct:Color = new Color();
ct.setTint (0xFFFFFF * Math.random(),1);
//Create 10 new particles because of an explosion
for (var i=0; i < numberOfExplosionParticles; i++) {
var particle:Particle = new Particle();
particle.speedX = Math.random()*10 - 5 ;
particle.speedY = Math.random()*10 - 5;
//Apply tint
particle.transform.colorTransform = ct;
//Set the starting position
particle.y = particleOne.y;
particle.x = particleOne.x;
particle.partOfExplosion = true;
//Add the particle to the stage and push it to array for later use.
addChild (particle);
particlesArray.push (particle);
}
/* Check which of the two particles was stationary.
We’ll remove the one that was stationary.
*/
if (particleOne.partOfExplosion == false) {
var temp1 = particlesArray.indexOf(particleOne);
particlesArray.splice (temp1,1);
removeChild (particleOne);
}
else {
var temp2 = particlesArray.indexOf(particleTwo);
particlesArray.splice (temp2,1);
removeChild (particleTwo);
}
}
}
}13、代码全部完成,测试你的影片。也可以设置不同背景的舞台,画任意的图形。
最后完整的代码:
附件下载:
Particle.rar
粒子.rar
演示:
1、新建Flash文档,设置:宽、高为 400 × 400 ,保存。
2、用椭圆工具在舞台上画一个 20 × 20 大小的圆。 (你能选择任意的颜色)
3、右键单击圆形,把它转换成影片剪辑,注册点居中。
4、在ActionScript导出的复选框中打勾 ,做类链接,类名为" Particle " 。图1:
5、把圆形从舞台删除,新建ActionScript 3.0文件。图2:
6、我们编写一个外部的Particle类。在编译器中输入代码:
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;
public var partOfExplosion:Boolean = false;
function Particle ():void {
}
}
}
8、切换到我们的fla主文档。首先我们在舞台上生成粒子实例。在第一帧输入代码:
//We need few imports for the color
import fl.motion.Color;
import flash.geom.ColorTransform;
/*We want 20 particles at the start
particlesArray is used when we animate each particle */
var numberOfParticles:Number = 20;
var particlesArray:Array = new Array();
//Each time a hit occurs, we want to create 10 new particles
var numberOfExplosionParticles:uint = 10;
//This loop creates the first particles and gives them speed and coordinates
for (var i=0; i < numberOfParticles; i++) {
var particle:Particle = new Particle();
//We want the particles to stay at their original position
particle.speedX = 0;
particle.speedY = 0;
//Set the starting position
particle.y = Math.random() * stage.stageHeight;
particle.x = Math.random() * stage.stageWidth;
//Add the particle to the stage and push it to array for later use.
addChild (particle);
particlesArray.push (particle);
}
9、测试你的影片,效果如图。图4:
10、随机地选择一个粒子产生爆炸效果。爆炸后,生成新的粒子。最后,删除舞台上爆炸的粒子。把下列代码块加入到动作面板: |
//Call for the first explosion
startExplosions ();
/*This function makes a random particle to explode.
From here, the chain reaction begins.*/
function startExplosions ():void {
//Select a random particle from an array
var index = Math.round(Math.random() * (particlesArray.length-1));
var firstParticle:Particle = particlesArray[index];
//Set a random tint
var ct:Color = new Color();
ct.setTint (0xFFFFFF * Math.random(),1);
//Create 10 new particles because of explosion
for (var i=0; i < numberOfExplosionParticles; 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 = Math.random()*10 - 5 ;
particle.speedY = Math.random()*10 - 5;
//Apply the randomly selected tint to each particle
particle.transform.colorTransform = ct;
//Set the starting position
particle.y = firstParticle.y;
particle.x = firstParticle.x;
//Particle is part of an explosion
particle.partOfExplosion = true;
//Add the particle to the stage and push it to array for later use.
addChild (particle);
particlesArray.push (particle);
}
//Let’s remove the particle that exploded (remove from stage and from the array)
removeChild (firstParticle);
particlesArray.splice (index,1);
addEventListener (Event.ENTER_FRAME, enterFrameHandler);
}
11、添加方法 enterFrameHandler,更新粒子坐标,使粒子动起来。输入下列代码:startExplosions ();
/*This function makes a random particle to explode.
From here, the chain reaction begins.*/
function startExplosions ():void {
//Select a random particle from an array
var index = Math.round(Math.random() * (particlesArray.length-1));
var firstParticle:Particle = particlesArray[index];
//Set a random tint
var ct:Color = new Color();
ct.setTint (0xFFFFFF * Math.random(),1);
//Create 10 new particles because of explosion
for (var i=0; i < numberOfExplosionParticles; 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 = Math.random()*10 - 5 ;
particle.speedY = Math.random()*10 - 5;
//Apply the randomly selected tint to each particle
particle.transform.colorTransform = ct;
//Set the starting position
particle.y = firstParticle.y;
particle.x = firstParticle.x;
//Particle is part of an explosion
particle.partOfExplosion = true;
//Add the particle to the stage and push it to array for later use.
addChild (particle);
particlesArray.push (particle);
}
//Let’s remove the particle that exploded (remove from stage and from the array)
removeChild (firstParticle);
particlesArray.splice (index,1);
addEventListener (Event.ENTER_FRAME, enterFrameHandler);
}
//This function is responsible for the animation
function enterFrameHandler (e:Event):void {
//Loop through every particle
for (var i=0; i < particlesArray.length; i++) {
var particleOne:Particle = particlesArray[i];
//Update the particle’s coordinates
particleOne.y += particleOne.speedY;
particleOne.x += particleOne.speedX;
/*This loop calls a checkForHit function to find if the two particles are colliding*/
for (var j:uint = i + 1; j < particlesArray.length; j++) {
var particleTwo:Particle = particlesArray[j];
/*Make sure the particles are on stage, only then check for hits*/
if (contains(particleOne) && contains(particleTwo)) {
checkForHit (particleOne, particleTwo);
}
}
}
}
12、方法 " checkForHit" 是最难的部份,碰撞检测。输入代码:
function enterFrameHandler (e:Event):void {
//Loop through every particle
for (var i=0; i < particlesArray.length; i++) {
var particleOne:Particle = particlesArray[i];
//Update the particle’s coordinates
particleOne.y += particleOne.speedY;
particleOne.x += particleOne.speedX;
/*This loop calls a checkForHit function to find if the two particles are colliding*/
for (var j:uint = i + 1; j < particlesArray.length; j++) {
var particleTwo:Particle = particlesArray[j];
/*Make sure the particles are on stage, only then check for hits*/
if (contains(particleOne) && contains(particleTwo)) {
checkForHit (particleOne, particleTwo);
}
}
}
}
/*This function checks whether two particles have collided*/
function checkForHit (particleOne:Particle, particleTwo:Particle):void {
/*Let’s make sure we only check those particles, where one is moving and the other
is stationary. We don’t want two moving particles to explode. */
if ((particleOne.partOfExplosion == false && particleTwo.partOfExplosion == true) ||
particleOne.partOfExplosion == true && particleTwo.partOfExplosion == false ) {
//Calculate the distance using Pythagorean theorem
var distanceX:Number = particleOne.x - particleTwo.x;
var distanceY:Number = particleOne.y - particleTwo.y;
var distance:Number = Math.sqrt(distanceX*distanceX + distanceY*distanceY);
/* If the distance is smaller than particle’s width, we have a hit.
Note: if the particles were of different size, the calculation would be:
distance < ((particleOne.width / 2) + (particleTwo.width / 2))
*/
if (distance < particleOne.width) {
//Set a random tint to the particles that explode
var ct:Color = new Color();
ct.setTint (0xFFFFFF * Math.random(),1);
//Create 10 new particles because of an explosion
for (var i=0; i < numberOfExplosionParticles; i++) {
var particle:Particle = new Particle();
particle.speedX = Math.random()*10 - 5 ;
particle.speedY = Math.random()*10 - 5;
//Apply tint
particle.transform.colorTransform = ct;
//Set the starting position
particle.y = particleOne.y;
particle.x = particleOne.x;
particle.partOfExplosion = true;
//Add the particle to the stage and push it to array for later use.
addChild (particle);
particlesArray.push (particle);
}
/* Check which of the two particles was stationary.
We’ll remove the one that was stationary.
*/
if (particleOne.partOfExplosion == false) {
var temp1 = particlesArray.indexOf(particleOne);
particlesArray.splice (temp1,1);
removeChild (particleOne);
}
else {
var temp2 = particlesArray.indexOf(particleTwo);
particlesArray.splice (temp2,1);
removeChild (particleTwo);
}
}
}
}
最后完整的代码:
//We need few imports for the color
import fl.motion.Color;
import flash.geom.ColorTransform;
/*We want 20 particles at the start
particlesArray is used when we animate each particle */
var numberOfParticles:Number = 20;
var particlesArray:Array = new Array();
//Each time a hit occurs, we want to create 10 new particles
var numberOfExplosionParticles:uint = 10;
//This loop creates the first particles and gives them speed and coordinates
for (var i=0; i < numberOfParticles; i++) {
var particle:Particle = new Particle();
//We want the particles to stay at their original position
particle.speedX = 0;
particle.speedY = 0;
//Set the starting position
particle.y = Math.random() * stage.stageHeight;
particle.x = Math.random() * stage.stageWidth;
//Add the particle to the stage and push it to array for later use.
addChild (particle);
particlesArray.push (particle);
}
//Call for the first explosion
startExplosions ();
/*This function makes a random particle to explode.
From here, the chain reaction begins.*/
function startExplosions ():void {
//Select a random particle from an array
var index = Math.round(Math.random() * (particlesArray.length-1));
var firstParticle:Particle = particlesArray[index];
//Set a random tint
var ct:Color = new Color();
ct.setTint (0xFFFFFF * Math.random(),1);
//Create 10 new particles because of explosion
for (var i=0; i < numberOfExplosionParticles; 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 = Math.random()*10 - 5 ;
particle.speedY = Math.random()*10 - 5;
//Apply the randomly selected tint to each particle
particle.transform.colorTransform = ct;
//Set the starting position
particle.y = firstParticle.y;
particle.x = firstParticle.x;
//Particle is part of an explosion
particle.partOfExplosion = true;
//Add the particle to the stage and push it to array for later use.
addChild (particle);
particlesArray.push (particle);
}
//Let’s remove the particle that exploded (remove from stage and from the array)
removeChild (firstParticle);
particlesArray.splice (index,1);
addEventListener (Event.ENTER_FRAME, enterFrameHandler);
}
//This function is responsible for the animation
function enterFrameHandler (e:Event):void {
//Loop through every particle
for (var i=0; i < particlesArray.length; i++) {
var particleOne:Particle = particlesArray[i];
//Update the particle’s coordinates
particleOne.y += particleOne.speedY;
particleOne.x += particleOne.speedX;
/*This loop calls a checkForHit function to find if the two particles are colliding*/
for (var j:uint = i + 1; j < particlesArray.length; j++) {
var particleTwo:Particle = particlesArray[j];
/*Make sure the particles are on stage, only then check for hits*/
if (contains(particleOne) && contains(particleTwo)) {
checkForHit (particleOne, particleTwo);
}
}
}
}
/*This function checks whether two particles have collided*/
function checkForHit (particleOne:Particle, particleTwo:Particle):void {
/*Let’s make sure we only check those particles, where one is moving and the other
is stationary. We don’t want two moving particles to explode. */
if ((particleOne.partOfExplosion == false && particleTwo.partOfExplosion == true) ||
particleOne.partOfExplosion == true && particleTwo.partOfExplosion == false ) {
//Calculate the distance using Pythagorean theorem
var distanceX:Number = particleOne.x - particleTwo.x;
var distanceY:Number = particleOne.y - particleTwo.y;
var distance:Number = Math.sqrt(distanceX*distanceX + distanceY*distanceY);
/* If the distance is smaller than particle’s width, we have a hit.
Note: if the particles were of different size, the calculation would be:
distance < ((particleOne.width / 2) + (particleTwo.width / 2))
*/
if (distance < particleOne.width) {
//Set a random tint to the particles that explode
var ct:Color = new Color();
ct.setTint (0xFFFFFF * Math.random(),1);
//Create 10 new particles because of an explosion
for (var i=0; i < numberOfExplosionParticles; i++) {
var particle:Particle = new Particle();
particle.speedX = Math.random()*10 - 5 ;
particle.speedY = Math.random()*10 - 5;
//Apply tint
particle.transform.colorTransform = ct;
//Set the starting position
particle.y = particleOne.y;
&nbs,p; particle.x = particleOne.x;
&nbs,p; particle.partOfExplosion = true;
//Add the particle to the stage and push it to array for later use.
addChild (particle);
particlesArray.push (particle);
}
/* Check which of the two particles was stationary.
We’ll remove the one that was stationary.
*/
if (particleOne.partOfExplosion == false) {
var temp1 = particlesArray.indexOf(particleOne);
particlesArray.splice (temp1,1);
removeChild (particleOne);
}
else {
var temp2 = particlesArray.indexOf(particleTwo);
particlesArray.splice (temp2,1);
removeChild (particleTwo);
}
}
}
}
import fl.motion.Color;
import flash.geom.ColorTransform;
/*We want 20 particles at the start
particlesArray is used when we animate each particle */
var numberOfParticles:Number = 20;
var particlesArray:Array = new Array();
//Each time a hit occurs, we want to create 10 new particles
var numberOfExplosionParticles:uint = 10;
//This loop creates the first particles and gives them speed and coordinates
for (var i=0; i < numberOfParticles; i++) {
var particle:Particle = new Particle();
//We want the particles to stay at their original position
particle.speedX = 0;
particle.speedY = 0;
//Set the starting position
particle.y = Math.random() * stage.stageHeight;
particle.x = Math.random() * stage.stageWidth;
//Add the particle to the stage and push it to array for later use.
addChild (particle);
particlesArray.push (particle);
}
//Call for the first explosion
startExplosions ();
/*This function makes a random particle to explode.
From here, the chain reaction begins.*/
function startExplosions ():void {
//Select a random particle from an array
var index = Math.round(Math.random() * (particlesArray.length-1));
var firstParticle:Particle = particlesArray[index];
//Set a random tint
var ct:Color = new Color();
ct.setTint (0xFFFFFF * Math.random(),1);
//Create 10 new particles because of explosion
for (var i=0; i < numberOfExplosionParticles; 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 = Math.random()*10 - 5 ;
particle.speedY = Math.random()*10 - 5;
//Apply the randomly selected tint to each particle
particle.transform.colorTransform = ct;
//Set the starting position
particle.y = firstParticle.y;
particle.x = firstParticle.x;
//Particle is part of an explosion
particle.partOfExplosion = true;
//Add the particle to the stage and push it to array for later use.
addChild (particle);
particlesArray.push (particle);
}
//Let’s remove the particle that exploded (remove from stage and from the array)
removeChild (firstParticle);
particlesArray.splice (index,1);
addEventListener (Event.ENTER_FRAME, enterFrameHandler);
}
//This function is responsible for the animation
function enterFrameHandler (e:Event):void {
//Loop through every particle
for (var i=0; i < particlesArray.length; i++) {
var particleOne:Particle = particlesArray[i];
//Update the particle’s coordinates
particleOne.y += particleOne.speedY;
particleOne.x += particleOne.speedX;
/*This loop calls a checkForHit function to find if the two particles are colliding*/
for (var j:uint = i + 1; j < particlesArray.length; j++) {
var particleTwo:Particle = particlesArray[j];
/*Make sure the particles are on stage, only then check for hits*/
if (contains(particleOne) && contains(particleTwo)) {
checkForHit (particleOne, particleTwo);
}
}
}
}
/*This function checks whether two particles have collided*/
function checkForHit (particleOne:Particle, particleTwo:Particle):void {
/*Let’s make sure we only check those particles, where one is moving and the other
is stationary. We don’t want two moving particles to explode. */
if ((particleOne.partOfExplosion == false && particleTwo.partOfExplosion == true) ||
particleOne.partOfExplosion == true && particleTwo.partOfExplosion == false ) {
//Calculate the distance using Pythagorean theorem
var distanceX:Number = particleOne.x - particleTwo.x;
var distanceY:Number = particleOne.y - particleTwo.y;
var distance:Number = Math.sqrt(distanceX*distanceX + distanceY*distanceY);
/* If the distance is smaller than particle’s width, we have a hit.
Note: if the particles were of different size, the calculation would be:
distance < ((particleOne.width / 2) + (particleTwo.width / 2))
*/
if (distance < particleOne.width) {
//Set a random tint to the particles that explode
var ct:Color = new Color();
ct.setTint (0xFFFFFF * Math.random(),1);
//Create 10 new particles because of an explosion
for (var i=0; i < numberOfExplosionParticles; i++) {
var particle:Particle = new Particle();
particle.speedX = Math.random()*10 - 5 ;
particle.speedY = Math.random()*10 - 5;
//Apply tint
particle.transform.colorTransform = ct;
//Set the starting position
particle.y = particleOne.y;
&nbs,p; particle.x = particleOne.x;
&nbs,p; particle.partOfExplosion = true;
//Add the particle to the stage and push it to array for later use.
addChild (particle);
particlesArray.push (particle);
}
/* Check which of the two particles was stationary.
We’ll remove the one that was stationary.
*/
if (particleOne.partOfExplosion == false) {
var temp1 = particlesArray.indexOf(particleOne);
particlesArray.splice (temp1,1);
removeChild (particleOne);
}
else {
var temp2 = particlesArray.indexOf(particleTwo);
particlesArray.splice (temp2,1);
removeChild (particleTwo);
}
}
}
}
附件下载:
Particle.rar
粒子.rar
- 上一篇:
- Photoshop实例:制作一只可爱的吉祥虎
- 下一篇:
- 巧用Maya制作卡通材质
- 没有相关教材
- 最近更新
