Moving a DropShadow with the Mouse
If you would like to move a DropShadow, or just about anything else for that matter, as the user moves the Mouse around then try something like this: ( download FLA )
The code in the FLA is very well commented. Here’s the gist of what’s going on:
1 – Start by creating a dynamic DropShadow
1 2 3 | import flash.filters.DropShadowFilter;<br /> var ds:DropShadowFilter = new DropShadowFilter(15, 0, 0x000000, 0.8, 5, 5, 1, 3, false, false, false);<br /> myText.filters = [ ds ]; //<br /> |
This last line is a bit of a cheat because we are passing ds as an array and not pushing it on to the myText.filters collection. We can do this because we only have one filter that we’re using here.
2 – Create a Mouse Listener
1 2 3 4 | import mx.utils.Delegate;<br /> var mouseList:Object = new Object();<br /> mouseList.onMouseMove = Delegate.create( this, updateShadow );<br /> Mouse.addListener( mouseList ); |
This should look familiar if you’ve created Mouse Listeners before. What might be a little different is the use of the Delegate class. It’s an amazing class that allows you to run functions in a specified scope. Otherwise the listener would be running in the scope of the mouseList object which is pretty useless. Delegate allows us to keep the scope as this so that we can still access functions on our frame here.
Delegate shines even more when you use it with classes. Once you start using it you’ll love it. You can read a bit more about it on polyGeek.com.
3 – Create a function that is called whenever the Mouse is moved
1 2 3 4 5 6 | function updateShadow():Void {<br /> var angle:Number = getAngleBetweenPoints();<br /> angle = (angle * 180) / Math.PI;<br /> ds = new DropShadowFilter(15, angle, 0x000000, 0.8, 5, 5, 1, 3, false, false, false);<br /> myText.filters = [ ds ];<br /> } |
This function is called every time the Mouse moves.
4 – Create a function that returns the angle between two points. If you don’t pass any points then it will use the position of the Mouse and the center of the Stage as the two reference points.
1 2 3 4 5 6 7 8 9 10 11 12 | function getAngleBetweenPoints( x1:Number, y1:Number, x2:Number, y2:Number ):Number {<br /> if( x1 == undefined ) {<br /> x1 = _xmouse;<br /> y1 = _ymouse;<br /> x2 = Stage.width / 2;<br /> y2 = Stage.height / 2;<br /> }<br /> var dx:Number = y2 - x1;<br /> var dy:Number = x2 - y1;<br /> var angle:Number = Math.atan2( dy, dx );<br /> return angle;<br /> } |
You have to love atan2. For more about this read Keith Peter’s Making Things Move, page 55.
If something here has proved valuable to you then feel free to drop a couple of bucks in the tip-jar.
