Run-time Shearing

Comments

The Flash authoring tool allows you to shear a shape, but the Flash player does not have this capability built in. However, you can achieve shearing (also called skewing) by a combination of rotations and scalings of nested movie clips.

Code


/***************************************************************************\
  Code to shear the visible content of a movie clip.  The movie clip mc must 
  have its visible content nested two levels deep, in movieclip mc.a.b.

  © Michael Kantor 2004.  You may modify, use, and adapt this code in
  any way you want.  Credit, and a link to FlashGizmo.com, are appreciated
  but not required.
\***************************************************************************/


function shearBy(mc, angle) {
	var len = 1 / Math.cos(angle); 	// first vertical stretch
	var sf = Math.tan(angle / 2 + Math.PI / 4); // tilted vertical stretch
	mc.a.b._yscale = len * 100;
	mc.a.b._rotation = -45;
	mc.a._yscale = sf * 100;
	mc.a._rotation = Math.atan(sf) * 180 / Math.PI;
	mc._xscale = mc._yscale = 100 * Math.sqrt( 2 / (1 + sf * sf));
}

Animation

The following animation shows the steps involved in producing a shear by combining scaling and rotation. Choose your desired shear angle, and set it in action!


©2004–05 Michael Kantor FlashGizmo.com