Advanced Search

Scribble Mouse Trail - Draw Bezier Curves using Greensock's Bezier Plugin

/ Published in: ActionScript 3
Save to your folder(s)
This creates a scribble mouse trail effect. More importantly, it illustrates how you can easily use the greensock bezier plugin for TweenMax to actually draw bezier curves.

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. //get these classes at http://www.greensock.com/tweenmax/
  2. import com.greensock.TweenMax;
  3. import com.greensock.plugins.BezierPlugin;
  4. import com.greensock.plugins.BezierThroughPlugin;
  5.  
  6. var xA:Array=new Array();
  7. var yA:Array=new Array();
  8.  
  9. xA.push(0);
  10. yA.push(0);
  11.  
  12. addEventListener(Event.ENTER_FRAME,loop);
  13. var container = new Sprite();
  14.  
  15.  
  16. addChild(container);
  17.  
  18. function loop(e){
  19. 	//trace(mouseX);
  20. 	xA.push(mouseX);
  21. 	yA.push(mouseY);
  22.  
  23. 	if(xA.length>3){
  24.  
  25. 		var bezierObj:Object=BezierPlugin.parseBeziers({x:xA,y:yA},true);
  26. 		trace(bezierObj["x"].length);
  27. 		container.graphics.clear();
  28. 		container.graphics.lineStyle(1);
  29. 		container.graphics.moveTo(xA[0],yA[0]);
  30. 		for( var i = 1; i<bezierObj["x"].length; i++){
  31. 				container.graphics.curveTo(bezierObj.x[i][1],bezierObj.y[i][1],bezierObj.x[i][2],bezierObj.y[i][2]);
  32. 		}
  33. 		if(xA.length>20){
  34. 			xA.shift();
  35. 			yA.shift();
  36. 		}
  37. 	}
  38.  
  39. }

URL: http://www.adamcoulombe.info/lab/as3/scribble-trail.html

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.