Sunday, 18 August 2013

Mouse sparkle effect in Actionscript 3

The mouse sparkle effect will generate particles randomly with different scales and colours as the mouse moves. The particles will also gradually fade over time and move randomly. I have used a five point start as my particle, but this effect will work for any kind of particle. I have two examples below. The first example uses TweenLite to create the mouse move effect, and the second uses pure Actionscript 3 code. Both examples assume a movie clip is in the library with key frames of different colours.

import com.greensock.TweenLite;

stage.addEventListener(MouseEvent.MOUSE_MOVE, moveHandler); 

function moveHandler(e:MouseEvent):void
{

 var star:Star = new Star();
 star.x = mouseX,
 star.y = mouseY,
 star.gotoAndStop( int(Math.random() * star.totalFrames) + 1);
 star.scaleX = star.scaleY = getRandom(0.3, 1); 
 addChild(star);
 
 TweenLite.to(star, 0.5, {alpha:0,
     rotation: getRandom(0, 360),
     x:mouseX + getRandom(-60, 60),
     y:mouseY + getRandom(-60, 60),
     onComplete:function(){
     removeChild(star);
    }});
 
 
}

function getRandom(min:Number, max:Number):Number {
 return min + (Math.random() * (max - min));
}

It would appear that placing the TweenLite code inside a mouse move event listener would cause multiple instances to be fired, resulting in performance and memory issues. However, the author of TweenLite has spent a great deal of time coding the class intelligently so it knows to clean up after itself. The tween instances get automatically garbage collected after each tween. Therefore no issues should be caused by placing the TweenLite in a mouse listener.

The pure Actionscript 3 version is shown below. I have used two event listeners. The mouse move listener creates the particles and the event frame listener moves and removes the particles.

var numParticles:uint = 30;
var particlesArray:Array = [];
 
addEventListener(Event.ENTER_FRAME, ef);
stage.addEventListener(MouseEvent.MOUSE_MOVE, moveHandler);
 
function moveHandler(e:MouseEvent):void
{
 if(particlesArray.length < numParticles)
 {
  var star:Star = new Star();
  star.x = mouseX;
  star.y = mouseY;
  star.gotoAndStop( int(Math.random() * star.totalFrames) + 1);
  star.alpha = getRandom(0.5,0.9);
  star.scaleX = star.scaleY = getRandom(0.5,0.9);
  star.rotation = getRandom(0,360);
  star.xVel = getRandom(-4,4);
  star.yVel = getRandom(-4,4);
  addChild(star);
  particlesArray.push(star);
 }
}

function ef(e:Event):void
{
 for(var i:int = 0; i < particlesArray.length; i++){
    
  var particle:Star = particlesArray[i];
  particle.x += particle.xVel;
  particle.y += particle.yVel;
  particle.alpha -= 0.06;
  
  if(particle.alpha <= 0){
   particlesArray.splice(i, 1);
   removeChild(particle);
  }
 }
}


function getRandom(min:Number, max:Number):Number {
 return min + (Math.random() * (max - min));
}

1 comments:

AV Collaboration 18 August 2014 at 21:07  

You are a legend! Thank you so much for sharing your code. I'm relatively new to Flash but I already love it. I can't imagine getting as familiar with AS3 as you are so I'm really grateful for your fantastic website.

  COPYRIGHT © 2014 · ILIKE2FLASH · Theme by Ourblogtemplates

Back to TOP