Spotlight Navigation effect using AS3 and Tweenlite


/ Published in: ActionScript 3
Save to your folder(s)

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


Copy this code and paste it in your HTML
  1. import com.greensock.*;
  2. import com.greensock.easing.*;
  3.  
  4. var bounds:Object = {x:550,y:400}
  5. var spots:Array=new Array();
  6. var clickIndex:Number=0;
  7. var clickPoint:Object = {x:0,y:0}
  8.  
  9. attachMouseOvers([btn1,btn2,btn3]);
  10.  
  11. function attachMouseOvers(buttonArray:Array){
  12. for (var i in buttonArray){
  13. buttonArray[i].addEventListener(MouseEvent.MOUSE_OVER, over);
  14. buttonArray[i].addEventListener(MouseEvent.MOUSE_OUT, out);
  15. }
  16. }
  17.  
  18. //var fl_covers:Array = new Array();
  19.  
  20. // Create the container Sprite
  21. var container:Sprite = new Sprite();
  22. addChild(container);
  23.  
  24.  
  25. //addEventListener(Event.ENTER_FRAME, everyFrame);
  26.  
  27. function over(e:MouseEvent):void
  28. {
  29. clickIndex++;
  30. spots[clickIndex]=new Array();
  31. for(var i=0;i<3;i++){
  32. var fl_cover:cover = new cover();
  33. container.addChild(fl_cover);
  34. clickPoint.y=e.target.y;
  35. clickPoint.x=e.target.x;
  36. var startX = clickPoint.x + Math.random() *100-50;
  37. var startY = clickPoint.y + Math.random() *100-50;
  38. fl_cover.x = startX;
  39. fl_cover.y = startY;
  40. var size:Number = Math.random()*10 + 100;
  41. fl_cover.width = size;
  42. fl_cover.height = size;
  43. fl_cover.alpha=0;
  44. 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] });
  45. spots[clickIndex].push(fl_cover);
  46. }
  47. setChildIndex( e.target as MovieClip, numChildren - 1);
  48. }
  49. function out(e:MouseEvent):void
  50. {
  51. for(var i in spots[clickIndex]){
  52. var startX = clickPoint.x + Math.random() *100-50;
  53. var startY = clickPoint.y + Math.random() *100-50;
  54. TweenLite.to( spots[clickIndex][i], 0.5, {x:startX ,y:startY,alpha:0, onComplete:removeFromDisplayList, onCompleteParams:[spots[clickIndex][i]] });
  55. }
  56. }
  57.  
  58. function continueTween(obj){
  59. 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] });
  60. }
  61.  
  62. function removeFromDisplayList(child){
  63. var theParent = child.parent;
  64. theParent.removeChild(child);
  65. }

URL: http://www.adamcoulombe.info/lab/as3/spots_test.html

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.