Tutorials, extensions, and source files for ActionScript, Flash, and other Adobe products.

 

senocular.com ActionScript Library

skew.as

Name: skew() - Skews a clip based on horizontal and vertical angles
Author: senocular: www.senocular.com
Date: 1899-12-31T00:29:56.800
Documentation:
Movieclip SKEW: skews a movieclip within a container movieclip
(which is what this code is for, the container clip) based on
given values
 
Arguments:
- _xskew: vertical skew of movieclip in degrees
- _yskew: horizontal skew of movieclip in degrees
- base_xscale: (optional) base _xscale of clip to be skewed. Default 100.
- base_yscale: (optional) base _yscale of clip to be skewed. Default 100.
 
Setup:
- This operates through using 2 movieclips.  The first movieclip is the movieclip you
want to be skewed. This movieclip is then placed within a new movieclip used as a container
for that movieclip.  This container is what this prototype is used with. Note: if more than
one movieclip exists in the container clip, only one will be skewed correctly; others will
be skewed abnormally.
 
Warnings:
- Because of the method of skewing used, there comes a time in the operations when values
become too hard or long for Flash to correctly decipher.  This occurs when the scales are
computed for rediculously small numbers from sine and cosine.  These occur when
(_xskew + _yskew) approaches 90 or -90 or that angular equivalent.  Be aware distortion may
occur at these values.

Example:
_root.myClip.skew(90,0); // skews myClip to /_/
_root.myClip.skew(-90,0); // skews myClip to \_\
_root.myClip.skew(45,45); // rotates myClip 45 degrees
_root.myClip.skew(270,0, 50, 50); // skews myClip to \_\ at 50% scale
trace(_root.myClip._xskew); // traces "270"

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
MovieClip.prototype.skew = function(_xskew, _yskew, base_xscale, base_yscale) {
	this._xskew = _xskew; // add properties to movieclip
	this._yskew = _yskew;
	if (arguments.length == 2){ // if no base scale passed, set to be 100
		var base_xscale = 100;
		var base_yscale = 100;
	}
	if (!this.inner_mc){ // defines inner_mc clip needed to skew
		for (var clips in this) if (typeof(this[clips]) == "movieclip"){
			this.inner_mc = this[clips]; // finds first movieclip and uses it to skew
			break;
		}
		if (!this.inner_mc){ return trace("No interior clip for skewing found in "+this._name+"."); // error if inner not found
		}else this.inner_mc._rotation = -45; // assure clip is rotated -45 degrees
	}
	var toRads = Math.PI/180; // converts degrees to radians
	var xr = _xskew*toRads; // skew in radians
	var yr = _yskew*toRads;
	var cosxr = Math.cos(xr); // cosine of skew
	var cosyr = Math.cos(yr);
	this._rotation = 45+(_xskew + _yskew)/2; // rotate this clip accordingly
	var div = Math.sin(this._rotation*toRads)*.707106781186547; //div: divisor - sin rotation *sin 45 degrees;
	if (!div) div = .0000001; // prevents dividing by 0 which you just... cant... do
	this._xscale = 100 *(Math.sin(yr)+cosxr)/div; // scaling for skew
	this._yscale = 100 *(Math.sin(xr)+cosyr)/div;
	this.inner_mc._xscale = base_xscale*.5/cosyr; // scaling inner to maintain width/height
	this.inner_mc._yscale = base_yscale*.5/cosxr;
}