使用AS3和Tweenlite的聚光灯导航效果

Posted 2021-02-26

Spotlight Navigation effect using AS3 and Tweenlite
Demo: http://www.adamcoulombe.info/lab/as3/spots_test.html
FLA: http://www.adamcoulombe.info/lab/as3/spots_test.fla

import com.greensock.*;
import com.greensock.easing.*;
 
var bounds:Object = {x:550,y:400}
var spots:Array=new Array();
var clickIndex:Number=0;
var clickPoint:Object = {x:0,y:0}
 
attachMouseOvers([btn1,btn2,btn3]);
 
function attachMouseOvers(buttonArray:Array){
	for (var i in buttonArray){
		buttonArray[i].addEventListener(MouseEvent.MOUSE_OVER, over);
		buttonArray[i].addEventListener(MouseEvent.MOUSE_OUT, out);
	}
}
 
//var fl_covers:Array = new Array();
 
// Create the container Sprite
var container:Sprite = new Sprite();
addChild(container);
 
 
//addEventListener(Event.ENTER_FRAME, everyFrame);
 
function over(e:MouseEvent):void
{
	clickIndex++;
	spots[clickIndex]=new Array();
	for(var i=0;i<3;i++){
		var fl_cover:cover = new cover();
		container.addChild(fl_cover);
		clickPoint.y=e.target.y;
		clickPoint.x=e.target.x;
		var startX = clickPoint.x + Math.random() *100-50;
		var startY = clickPoint.y + Math.random() *100-50;
		fl_cover.x = startX;
		fl_cover.y = startY;
		var size:Number = Math.random()*10 + 100;
		fl_cover.width = size;
		fl_cover.height = size;
		fl_cover.alpha=0;
		TweenLite.to(fl_cover, 0.5, {width:size, alpha:0.3, height:size,x:clickPoint.x + Math.random() *16-8 ,y:clickPoint.y+ Math.random() *16-8, ease:Strong.easeOut, onComplete:continueTween, onCompleteParams:[fl_cover]  });
		spots[clickIndex].push(fl_cover);
	}
	setChildIndex( e.target as MovieClip, numChildren - 1);
}
function out(e:MouseEvent):void
{
	for(var i in spots[clickIndex]){
		var startX = clickPoint.x + Math.random() *100-50;
		var startY = clickPoint.y + Math.random() *100-50;
		TweenLite.to( spots[clickIndex][i], 0.5, {x:startX ,y:startY,alpha:0, onComplete:removeFromDisplayList, onCompleteParams:[spots[clickIndex][i]] });
	}
}
 
function continueTween(obj){
	TweenLite.to(obj, 2, {x:clickPoint.x + Math.random() *16-8 ,y:clickPoint.y+ Math.random() *16-8,ease:Sine.easeInOut, onComplete:continueTween, onCompleteParams:[obj] });
}
 
function removeFromDisplayList(child){
	var theParent = child.parent;
	theParent.removeChild(child);
}