RudiYardley.com » Flash http://blog.rudiyardley.com Technical tidbits on Flash, Flex, Application Development, MODx, Silverstripe and Freelancing Tue, 31 Jan 2012 04:31:03 +0000 en hourly 1 How to calculate the intersection of two circles mathematically in Actionscript. http://blog.rudiyardley.com/2010/01/how-to-calculate-the-intersection-of-two-circles-mathematically-in-actionscript/ http://blog.rudiyardley.com/2010/01/how-to-calculate-the-intersection-of-two-circles-mathematically-in-actionscript/#comments Tue, 19 Jan 2010 11:20:58 +0000 rudi http://blog.rudestar.net/?p=279 A client of mine wanted to create an interactive teacher animation that pointed to a point on a chart that could be calculated as the result of a user quiz. They were stuck though as creating a realistic elbow movement that points to the desired point from a programmatic perspective is actually harder than it seems as most teachers arms tend to have elbows. The solution took some time to come up with although simple enough in the end after a bit of geometric research. The first step to creating the animation was to calculate mathematically the intersections of two circles.

Finding the intersection of two circles appears complicated although in actual fact it is just a matter of unraveling Pythagoras’ Theorem a few times. Pythagoras’ Theorem states that the sum of square of the both straight sides of any right angled triangle is equal to the square of the diagonal.

ie. a2=b2+c2

Here is how you use it to find the intersection points of a circle with Actionscript:

1) Start by creating a couple of draggable circles and some hidden dots that will be used to indicate where the intersections are:

  1. package

  2. {

  3. 	import flash.display.Sprite;

  4. 	import flash.geom.Point;

  5. 	import flash.events.Event;

  6. 	import flash.events.MouseEvent;

  7. 

  8. 	public class FindIntersection extends Sprite

  9. 	{

  10. 		public var circle1Radius:Number = 40;

  11. 		public var circle2Radius:Number = 70;

  12. 		public var circle1:Sprite = drawCircle(circle1Radius);

  13. 		public var circle2:Sprite = drawCircle(circle2Radius);

  14. 		public var dot1:Sprite = drawDot();

  15. 		public var dot2:Sprite = drawDot();

  16. 

  17. 		function FindIntersection()

  18. 		{

  19. 			var origin:Point = new Point(stage.stageWidth/2, stage.stageHeight/2);

  20. 			circle1Radius = 40;

  21. 			circle2Radius = 70;

  22. 			circle1 = drawCircle(circle1Radius);

  23. 			circle2 = drawCircle(circle2Radius);

  24. 			dot1 = drawDot();

  25. 			dot2 = drawDot();

  26. 			circle1.x = origin.x - 10;

  27. 			circle1.y = origin.y;

  28. 			circle2.x = origin.x + 10;

  29. 			circle2.y = origin.y;

  30. 			addChild(circle1);

  31. 			addChild(circle2);

  32. 			addChild(dot1);

  33. 			addChild(dot2);

  34. 		}

  35. 

  36. 		function drawCircle(rad:Number):Sprite

  37. 		{

  38. 			var c:Sprite = new Sprite();

  39. 			c.graphics.lineStyle(1,0x000000);

  40. 			c.graphics.beginFill(0xBBBBBB,.1);

  41. 			c.graphics.drawCircle(0,0,rad);

  42. 			c.graphics.endFill();

  43. 			c.graphics.moveTo(-5,0);

  44. 			c.graphics.lineTo(5,0);

  45. 			c.graphics.moveTo(0,-5);

  46. 			c.graphics.lineTo(0,5);

  47. 			c.addEventListener(MouseEvent.MOUSE_DOWN, onDown);

  48. 			c.addEventListener(MouseEvent.MOUSE_UP, onUp);

  49. 			return c;

  50. 		}

  51. 

  52. 		function drawDot()

  53. 		{

  54. 			var d:Sprite = new Sprite();

  55. 			d.graphics.beginFill(0xFF0000);

  56. 			d.graphics.drawCircle(0,0,2);

  57. 			d.graphics.endFill();

  58. 			d.visible = false;

  59. 			return d;

  60. 		}

  61. 

  62. 		function onDown(e:Event):void

  63. 		{

  64. 			var circle:Sprite = e.target  as  Sprite;

  65. 			circle.startDrag();

  66. 		}

  67. 

  68. 		function onUp(e:Event):void

  69. 		{

  70. 			var circle:Sprite = e.target  as  Sprite;

  71. 			circle.stopDrag();

  72. 		}

  73. 

  74. 	}

  75. }

2) Next add an enterframe handler that checks for a collision by calculating the distance between the two circles. If the distance is greater than the sum of the radiae of both circles there is no intersection. Also if the distance is less than the absolute difference between the radiae then there is no solution as one circle is contained within the other.
  1. function enterFrameHandler(e:Event):void
  2. {
  3. 	// Set up variables
  4. 	var r0:Number = circle1Radius;
  5. 	var r1:Number = circle2Radius;
  6.  
  7. 	// Point x and y coords
  8. 	var p0x:Number = circle1.x;
  9. 	var p0y:Number = circle1.y;
  10. 	var p1x:Number = circle2.x;
  11. 	var p1y:Number = circle2.y;
  12.  
  13. 	//First calculate the distance d between the center of the circles. d = ||P1 - P0||.
  14. 	var dx:Number = p0x - p1x;
  15. 	var dy:Number = p0y - p1y;
  16. 	var d:Number = Math.sqrt(dx*dx + dy*dy);
  17.  
  18. 	//If d > r0 + r1 then there are no solutions, the circles are separate.
  19. 	//If d < |r0 - r1| then there are no solutions because one circle is contained within the other. 	if ((d > r0 + r1) ||
  20. 	(d < Math.abs(r0 - r1)))
  21. 	{
  22. 		dot1.visible = false;
  23. 		dot2.visible = false;
  24. 		return;
  25. 	}
  26. }

CircleIntersection1

The way we calculate distance is by using Pythagoras’ formula by determining distance as a hypotenuse of a right angled triangle calculated as the square root of the square of the x-difference plus the square of the y-difference. ie.

d=√( dx2+dy2 )

3) Now comes something slightly trickier. Consider the following diagram:

CircleIntersection

Again using Pythagoras we can say that:

a2+ h2= r02 is true for the red triangle and b2+ h2= r12 is true for the green triangle.

Now knowing that d = a + b we can then use a bit of algebra to solve for a in terms of r0, r1 and d (I can show the working here if you want just leave a comment or send me a message):

a = (r02 – r12 + d2 ) / (2 d)

Which we can write in actionscript as:

  1. var a:Number = ( r0*r0 - r1*r1 + d*d ) / (2*d);

Have a look at the following diagram:

CircleIntersection2

Now since P2 is along the line distance d and the x and y coordinates are relative to a/d therefore:

  1. var p2x:Number = p0x + a * ( p1x - p0x ) / d;
  2. var p2y:Number = p0y + a * ( p1y - p0y ) / d;

Since we know that r02 = h2+ a2 and now that we have the value of a we can get h using pythagoras yet again:
  1. var h:Number = Math.sqrt(r0*r0 - a*a);

Now all that is left to do is project the positive h point and the negative h point:
  1. 	var d1x:Number = p2x + h * ( p1y - p0y ) / d;
  2. 	var d1y:Number = p2y - h * ( p1x - p0x ) / d;
  3. 	var d2x:Number = p2x - h * ( p1y - p0y ) / d;
  4. 	var d2y:Number = p2y + h * ( p1x - p0x ) / d;

Now we have the points of intersection, our file should look something like this:

The Flash plugin is required to view this object.

Here is the source code.

Soon I plan to write about how to make an actual arm move based on this code but that is for another article.

]]> http://blog.rudiyardley.com/2010/01/how-to-calculate-the-intersection-of-two-circles-mathematically-in-actionscript/feed/ 1 What is Flex? http://blog.rudiyardley.com/2010/01/what-is-flex/ http://blog.rudiyardley.com/2010/01/what-is-flex/#comments Mon, 18 Jan 2010 12:52:56 +0000 rudi http://blog.rudestar.net/?p=351 I suppose sometimes as a Flex or Flash developer you are so immersed in the whole SWF ecosystem that occasionally you get asked a question that should be easy to answer but becomes difficult to explain to someone without a technical perspective.

The other day I was preparing a spec and getting a colleague to double check my correspondence. They brought up that the client likely did not know what Flex was and that I should be prepared to explain it to the client in the meeting we were tabled to have. My first reaction was fine until it dawned upon me that finding the words to describe flex for someone who only really understands flash as a scripting and animation technology may actually be a little difficult so thought I would share with you what I came up with as well as ask for opinions on the matter.

Here are a few possible answers:

  1. Flex is a collection of compilers that output SWF bitecode
  2. Flex is a framework that is based on MXML as a meta-language for forming SWF bytecode
  3. The Flex framework uses both MXML and a bunch of custom Actionscript classes to define the various visual and non-visual elements of Rich Applications
  4. Flex makes building Rich applications with Flash faster by leveraging the use of standard user interface components and layout method

Any other thoughts?

]]> http://blog.rudiyardley.com/2010/01/what-is-flex/feed/ 0 Introduction to collision detection & 2D physics http://blog.rudiyardley.com/2009/11/introduction-to-collision-detection-2d-physics/ http://blog.rudiyardley.com/2009/11/introduction-to-collision-detection-2d-physics/#comments Mon, 09 Nov 2009 05:44:55 +0000 rudi http://blog.rudestar.net/?p=147 This is an introductory tutorial on collision detection and physics. Creating 2D physics is often daunting to the beginner flash programmer but as you will soon see it is really not that hard so long as you break everything down into small steps. Here we are going to create a world and populate it with a realistic bouncing ball:

The Flash plugin is required to view this object.

The concepts required here may look daunting but all that needs to be required are the following:

  • Velocity
  • Wall Collision Detection
  • Friction
  • Gravity

Defining the world

Lets start off by defining our bounds and our world as a class like so:

  1. package
  2. {
  3. 	import flash.display.Sprite;
  4. 	import flash.events.Event;
  5. 	import flash.geom.Rectangle;
  6.  
  7. 	[SWF(width="530", height="397", frameRate="30", backgroundColor="#EEEEEE")]
  8. 	public class BallWorld extends Sprite
  9. 	{
  10. 		public function BallWorld()
  11. 		{
  12. 			var world:World = new World(530,397);
  13. 			addChild(world);
  14. 		}
  15. 	}
  16. }
  17.  
  18. import flash.display.Sprite;
  19. import flash.events.Event;
  20. import flash.geom.Rectangle;
  21. import flash.events.MouseEvent;
  22.  
  23. class World extends Sprite
  24. {
  25.  
  26. 	public function World(w:Number, h:Number)
  27. 	{
  28. 		var backing:Sprite;
  29. 		backing = new Sprite();
  30. 		backing.graphics.lineStyle(1,0xAAAAAA);
  31. 		backing.graphics.beginFill(0xFFFFFF);
  32. 		backing.graphics.drawRect(0,0,400,300);
  33. 		backing.x = w/2 - backing.width/2;
  34. 		backing.y = h/2 - backing.height/2;
  35. 		addChild(backing);
  36.  
  37. 		var ball:Ball;
  38. 		ball = new Ball(20);
  39. 		ball.x = w/2;
  40. 		ball.y = h/2;
  41. 		addChild(ball);
  42.  
  43. 	}
  44. }
  45.  
  46. class Ball extends Sprite
  47. {
  48. 	public var radius:Number = 20;	//	circle radius
  49.  
  50. 	public function Ball(rad:Number)
  51. 	{
  52. 		//	Apply params
  53. 		radius = rad;
  54.  
  55. 		//	Draw Ball
  56. 		graphics.lineStyle(1,0xAAAAAA);
  57. 		graphics.beginFill(0xA9C065);
  58. 		graphics.drawCircle(0,0,radius);
  59. 		graphics.endFill();
  60.  
  61. 	}
  62. }

The Flash plugin is required to view this object.

Here we start with a World class that contains a backing sprite and a Ball Sprite which we have placed in the middle of the bounds. This tute is all about creating some realistic movement based on basic physics so lets get the ball to move.

Velocity

Within the physical world moving objects have a velocity which represents a distance moved over time. In Actionscript, we have a frame ticker which represents time so once every frame we can add the velocity to the coordinate position of our sprite to give the appearance of movement. Velocity in physics is given as a vector but in Actionscript we can provide it as two separate values for each coordinate. Lets add velocity to our ball:

  1. class Ball extends Sprite
  2. {
  3. 	public var vx:Number = 0;		//	velocity x
  4. 	public var vy:Number = 0;		//	velocity y
  5. 	public var radius:Number = 20;	//	circle radius
  6.  
  7. 	public function Ball(rad:Number)
  8. 	{
  9. 		//	Apply params
  10. 		radius = rad;
  11.  
  12. 		//	Draw Ball
  13. 		graphics.lineStyle(1,0xAAAAAA);
  14. 		graphics.beginFill(0xA9C065);
  15. 		graphics.drawCircle(0,0,radius);
  16. 		graphics.endFill();
  17.  
  18. 		//	Add Listeners
  19. 		addEventListener(Event.ENTER_FRAME, onFrame);
  20. 	}
  21.  
  22. 	private function onFrame(e:Event):void
  23. 	{
  24. 		//	Apply Velocity to Position
  25. 		x += vx;
  26. 		y += vy;
  27.  
  28. 	}
  29. }

Notice nothing much has happened. Our Ball is still sitting in the center of the stage and not moving. The reason it isn’t moving is because we have given it an initial velocity of 0 for both the x and y directions. Lets give this a number value of lets say 5. Add the following to our World class:
  1. ...
  2. var ball:Ball;
  3. ball = new Ball(20);
  4. ball.x = w/2;
  5. ball.y = h/2;
  6.  
  7. //	Initial Velocity
  8. ball.vx = 5;
  9. ball.vy = 5;
  10. ...

Which gives us this:

The Flash plugin is required to view this object.

Bingo! the ball is moving but it is hardly realistic. Firstly the ball leaves the bounds almost immediately so we need to provide some collision detection and to constrain it to the given bounds.

Wall Collision Detection

Let’s add the following handler and variable to our Ball class:

  1. private var bounds:Rectangle;
  2. ...
  3. public function Ball(rad:Number)
  4. {
  5. ...
  6. 	//	Add Listeners
  7. 	addEventListener(Event.ENTER_FRAME, onFrame);
  8. 	addEventListener(Event.ADDED, onAdded);
  9. }
  10. ...
  11. private function onAdded(e:Event):void
  12. {
  13. 	world = parent as World;
  14. 	bounds = world.bounds;
  15. }

This is going to listen for when we add our ball to the world and at that instance get the properties of our world and apply them to the ball animation.

now add the following to our frame routine:

  1. private function onFrame(e:Event):void
  2. {
  3. 	//	Use a temp var for x and y to increase performance
  4. 	var tx:Number = x;
  5. 	var ty:Number = y;
  6.  
  7. 	//	Collision Detection with right wall
  8. 	if(tx + vx &gt; bounds.right - radius)
  9. 	{
  10. 		tx = bounds.right - radius;
  11. 		vx *= -1;
  12. 	}
  13.  
  14. 	//	Collision Detection with left wall
  15. 	if(tx + vx &lt; bounds.left + radius) 	{
  16.  		tx = bounds.left + radius;
  17.  		vx *= -1;
  18. 	}
  19.  
  20.   	//	Collision Detection with floor
  21. 	if(ty + vy &gt; bounds.bottom - radius)
  22. 	{
  23. 		ty = bounds.bottom - radius;
  24. 		vy *= -1;
  25. 	}
  26.  
  27. 	//	Collision Detection with ceiling
  28. 	if(ty + vy &lt; bounds.top + radius)
  29. 	{
  30. 		ty = bounds.top + radius;
  31. 		vy *= -1;
  32. 	}
  33.  
  34. 	//	Apply Velocity to tx and ty
  35. 	tx += vx;
  36. 	ty += vy;
  37.  
  38. 	//	Render the change
  39. 	x = tx;
  40. 	y = ty;
  41.  
  42. }

Lastly we need to alter our World class to provide us with the bounds property containing the bounds to constrict the ball to. So lets move our backing instance to become a private instance variable and access its getBounds method for the bounds of the world.
  1. class World extends Sprite
  2. {
  3. ...
  4. 	private var backing:Sprite;
  5. ...
  6. 	public function get bounds():Rectangle
  7. 	{
  8. 		return backing.getBounds(this);
  9. 	}
  10. }

Within the frame script we are now checking to see if the object has moved beyond the boundary given by the bounds Rectangle. If the bounds have been exceeded for any given direction the direction is reversed based on the boundary exceeded.

Here we also use a temporary variable to make it so that x is only set at the end of the frame script and is only necessary for performance reasons but is a good habit to get into since it is good to keep data and render separate.

The Flash plugin is required to view this object.

So now we have our ball flying away within our bounding box but the movement doesn’t look particularly real as we haven’t added any of the common physical forces to our object such as friction or gravity.

Adding Friction

To add air friction we simply need to multiply the velocity by a given amount between 0 and 1 every frame ie:

  1. //	Air Dampening
  2. vx *= .99;
  3. vy *= .99;

This leaves us with something that looks like the following:

The Flash plugin is required to view this object.

Gravity

The last thing to do is add gravity to simulate the natural pull towards the ground by simply adding to the downward velocity every frame:

  1. //	Air Dampening
  2. vx *= .99;
  3. vy *= .99;	
  4.  
  5. //	Gravity
  6. vy += 1;	
  7.  
  8. //	Apply Velocity to tx and ty
  9. tx += vx;
  10. ty += vy;
  11.  
  12. //	Render the change
  13. x = tx;
  14. y = ty;

After moving the gravity and friction properties to belong to the World we are left with the following full source code:
  1. package
  2. {
  3. 	import flash.display.Sprite;
  4. 	import flash.events.Event;
  5. 	import flash.geom.Rectangle;
  6.  
  7. 	[SWF(width="530", height="397", frameRate="30", backgroundColor="#EEEEEE")]
  8. 	public class BallWorld extends Sprite
  9. 	{
  10. 		public function BallWorld()
  11. 		{
  12. 			var world:World = new World(530,397);
  13. 			addChild(world);
  14. 		}
  15. 	}
  16. }
  17.  
  18. import flash.display.Sprite;
  19. import flash.events.Event;
  20. import flash.geom.Rectangle;
  21. import flash.events.MouseEvent;
  22.  
  23. class World extends Sprite
  24. {
  25. 	private var backing:Sprite;
  26. 	public var friction:Number;
  27. 	public var gravity:Number;
  28.  
  29. 	public function World(w:Number, h:Number)
  30. 	{
  31. 		friction = 0.95;
  32. 		gravity = 1;
  33.  
  34. 		backing = new Sprite();
  35. 		backing.graphics.lineStyle(1,0xAAAAAA);
  36. 		backing.graphics.beginFill(0xFFFFFF);
  37. 		backing.graphics.drawRect(0,0,400,300);
  38. 		backing.x = w/2 - backing.width/2;
  39. 		backing.y = h/2 - backing.height/2;
  40. 		addChild(backing);
  41.  
  42. 		var ball:Ball;
  43. 		ball = new Ball(20);
  44. 		ball.x = w/2;
  45. 		ball.y = h/2;
  46.  
  47. 		//	Initial Velocity
  48. 		ball.vx = 5;
  49. 		ball.vy = 5;
  50.  
  51. 		addChild(ball);
  52.  
  53. 	}
  54.  
  55. 	public function get bounds():Rectangle
  56. 	{
  57. 		return backing.getBounds(this);
  58. 	}
  59. }
  60.  
  61. class Ball extends Sprite
  62. {
  63. 	public var vx:Number = 0;		//	velocity x
  64. 	public var vy:Number = 0;		//	velocity y
  65. 	public var radius:Number = 20;	//	circle radius
  66. 	private var bounds:Rectangle;
  67. 	private var friction:Number;
  68. 	private var gravity:Number;
  69.  
  70. 	public function Ball(rad:Number)
  71. 	{
  72. 		//	Apply params
  73. 		radius = rad;
  74.  
  75. 		//	Draw Ball
  76. 		graphics.lineStyle(1,0xAAAAAA);
  77. 		graphics.beginFill(0xA9C065);
  78. 		graphics.drawCircle(0,0,radius);
  79. 		graphics.endFill();
  80.  
  81. 		//	Add Listeners
  82. 		addEventListener(Event.ENTER_FRAME, onFrame);
  83. 		addEventListener(Event.ADDED, onAdded);
  84. 	}
  85.  
  86. 	private function onAdded(e:Event):void
  87. 	{
  88. 		var world:World = parent as World;
  89. 		bounds = world.bounds;
  90. 		friction = world.friction;
  91. 		gravity = world.gravity;
  92. 	}
  93.  
  94. 	private function onFrame(e:Event):void
  95. 	{
  96. 		//	Use a temp var for x and y to increase performance
  97. 		var tx:Number = x;
  98. 		var ty:Number = y;
  99.  
  100. 		//	Collision Detection with right wall
  101. 		if(tx + vx &gt; bounds.right - radius)
  102. 		{
  103. 			tx = bounds.right - radius;
  104. 			vx *= -1;
  105. 		}
  106.  
  107. 		//	Collision Detection with left wall
  108. 		if(tx + vx &lt; bounds.left + radius) 		{ 			tx = bounds.left + radius; 			vx *= -1; 		} 		 		//	Collision Detection with floor 		if(ty + vy &gt; bounds.bottom - radius)
  109. 		{
  110. 			ty = bounds.bottom - radius;
  111. 			vy *= -1;
  112. 		}
  113.  
  114. 		//	Collision Detection with ceiling
  115. 		if(ty + vy &lt; bounds.top + radius)
  116. 		{
  117. 			ty = bounds.top + radius;
  118. 			vy *= -1;
  119. 		}
  120.  
  121. 		//	Air Dampening
  122. 		vx *= friction;
  123. 		vy *= friction;	
  124.  
  125. 		vy += gravity;
  126.  
  127. 		//	Apply Velocity to tx and ty
  128. 		tx += vx;
  129. 		ty += vy;
  130.  
  131. 		//	Render the change
  132. 		x = tx;
  133. 		y = ty;
  134.  
  135. 	}
  136. }

As you can see by adding gravity we substantially increase the reality factor of the motion.

The Flash plugin is required to view this object.

 ]]> http://blog.rudiyardley.com/2009/11/introduction-to-collision-detection-2d-physics/feed/ 0 SEO and Flash http://blog.rudiyardley.com/2009/07/seo-and-flash/ http://blog.rudiyardley.com/2009/07/seo-and-flash/#comments Wed, 01 Jul 2009 21:19:13 +0000 rudi http://blog.rudestar.net/?p=98

I have been doing a bit of research on the subject of SEO accessibility and full flash websites and have put together a few responses on common queries or concerns regarding the subject:

  1. Flash can not be indexed by google using flash is bad for SEO.
  2. Users cannot click the back button in a flash site
  3. Users cannot directly link into a content page on a flash only site

In response I have put together a couple of guidelines:

  1. Prepare a CMS serving content to two different output templates one for flash one for html. Serve flash using SWFObject within every html page of content into the div that contains the html content. Representatives from Google have said that whilst this method can draw attention since it is open to being exploited, so long as the content is identical to the site content should not be considered as cloaking and should not be penalised.
  2. Serving the Flash on every page is done so that should a user click a link in google the website will load up the web page should inject a flash var to the swf as well so that the swf can redirect to the correct content.
  3. Deeplinking can be accomplished by writing an anchor to the url that is relavent to the page or by using SWFAddress
  4. Another way of creating permanent links to content is to have a link to this page link which displays the link url (cf google maps). This method is considered a little safer appending an anchor esp due to bugs within ie although browser history will be compromised.
  5. A last homebrew method for creating browser history is to add an iframe to the page and mirror page changes with the iframe this is the method that Flex uses withi its history template.
]]> http://blog.rudiyardley.com/2009/07/seo-and-flash/feed/ 0