Can you believe it? You go through the pain of creating a custom cursor in Flash, and then when the user does something pesky like roll the mouse outside the Flash area, your custom cursor (which is really nothing more than a MovieClip that follows your cursor in disguise) stays in its last-known position - wedged somewhere near one of the outer boundaries of your stage, but definitely not looking right, since the “real” mouse is now happily tracking (or whatever it is real mice do) somewhere else on the screen. Two cursors, one big egg in your beer.

After doing some research, it seems the most advanced thinking on the subject (other than those crackpots who tell you to look to external JavaScript to solve the problem - which is bogus) is to use a first-order predictor (velocity) to “guess” (well, “predict” to be precise) where the mouse would be during the next poll. Well, I tried to implement that and I found that the results left somewhat to be desired. Considerably somewhat.

The way this “first-order prediction” business works is: once the mouse leaves the stage, _root.xmouse and _root.ymouse no longer give us meaningful information, because Flash is unable to track the mouse position outside of its own “domain”. So if you’re relying on, say a test to see whether _root.xmouse > 0 to detect whether your cursor has exited stage left, you’re SOL - _root.xmouse will still be reading 4, or 10 or wherever your mouse was LAST time it checked. So what we want to do is to predict where the mouse will be next time, based on where it was last time. In other words: velocity. That’s your “first-order predictor”. And boy does it look good. At first.
As you may or may not remember from your grade X Physics class (I actually didn’t remember - I was too busy oogling my teachers emphatic retort to Newton’s law of gravity - yeah, you Centennial CVI boys know what I’m talking about) velocity can be measured as the change in distance (”delta”) between two points over time. Now since we’re not really dealing with time per se as much as mouse movement over a frame, the equation is simplified quite a bit. As in vx = x2 - x1. So now, if you want to see whether the mouse will be off to the left of the stage, you can just add the velocity into your test to see whether _root.xmouse + vx > 0. Following me? Of course you are.

But, just so I can be clear for myself: if the first time we checked the xmouse was at, say 5 (near the left of the stage) and the second time (now) it’s at 2, x2 - x1 = 2 - 5 = -3. So now we check to see where it will be next time: _xmouse + vs = 2 + (-3) = 2 - 3 = -1 < 0. Great. So the mouse is off the stage. Roll drums, toot horns.

The problem occurs when you “flick” the mouse rapidly off the stage. What’s happening is that now our velocity is changing rapidly, which means that our prediction underestimates where the next position will be, and usually undershoots the mark. If you think about it, you’re not moving the mouse, then all of a sudden you flick it to the left. But, since the mouse is a physical object, it’s subject to the laws of physics, as are you, and so the mouse doesn’t really go from 0 - 60 in an instant. Like a car, it accelerates. Which means that the velocity is increasing over time - so our wonderful first-order prediction is hokey because it’s basing its calculation on a constant velocity.

So I took it one step further and used acceleration in the calculation, rather than velocity. Or rather, in the second poll I still use velocity (because you need three coordinates to calculate acceleration, and at the second poll we only have two points), but in the third poll I discard the velocity predictor for my second-order predictor and get much more accurate results.

Enough mumb-jumbo. Give us the code already, right?
(more…)

So I came across the most baffling bug the other day that locked me up for a good three hours. I thought maybe I’d just put down what I discovered here on the outer reaches of the blogosphere in case anyone else happens to hit that magical combination of Google keywords and a link to this page comes up.

To describe the problem succinctly: when you’re trying to create a horizontal menu using unordered lists (<ul> and inline <li>), for some reason, in Firefox (2 - I don’t know about 3 which just came out last week), if there is any whitespace between a closing </li> tag and the opening <li> tag of the next item, that whitespace actually displays. At first it looks like a margin spacing issue, but after some tests it’s clearly not. In fact, what baffles me is that ANY text between the closing </li> and the opening <li>, that text actually gets displayed inline! Which makes no sense, because I didn’t think that the <ul> element could have a text node as a direct child. Apparently it can, in Firefox at any rate.

The solution, as I have discovered is to set your <ul>’s display attribute to “table”. I don’t believe IE7 and certainly not IE6 understand display:table, so this is a non-IE fix, but then again, IE wasn’t exhibiting the whitespace behaviour. Here’s some sample code.

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>Untitled Document</title>

<style type="text/css">

    *    { margin:0; padding:0; }

    ul {

        list-style-type:none;

        list-style-position:inside;

        margin:0px; padding:0px;

        display:table; /* This is used for firefox */

	/* to avoid the horizontal whitespace bug */

    }

    li {

        border:1px solid black;

        display:inline;

        margin:0px; padding:0px;

        border-collapse:collapse;

    }

    a {

    }

</style>

</head>

<body>

    <ul>

        <li><a href="#">Line 1</a></li>

        <li><a href="#">Line 2</a></li>

        <li><a href="#">Line 3</a></li>

    </ul>

    <p>Other stuff....</p>

</body>

</html>

So here’s a real doozie that came from a question someone asked on ExpertsExchange: he had two separate Flash Projectors (EXEs) - that needed to be able to intercommunicate (the first projector needed to know when the second projector had actually finished loading). Since we’re dealing with external projector files that have no dependencies (rather than using the movieClipLoader to load an external SWF into the parent movie), the only thing I could think of that would work reliably was local SharedObjects.

As I put together a solution for this brave soul, I encountered a few interesting challenges, and a few frustrations. Thought I’d document it here because I couldn’t find anyone else who had addresses the intricacies of having two SWF share a SharedObject and monitor the status of that shared SharedObject so they could respond to a change in status.

Here’s the basic principle:

• Application 1 creates a local SharedObject and sets an initial status
• Application 1 also registers an enterFrame event listener that listens for a status change on the SO
• Application 2 accesses the same SO and at some point, changes the status
• Application 1’s enterFrame handler detects the status change, and responds to the event.

As I write this, I see there’s an opportunity for a custom event class that does all this, but I’m going to leave that to the real gurus. I don’t pretend to have that intimate a knowledge of ActionScript to be able to pull that off. I should also point out at this time that the original EE user’s question was for AS2, so this solution is only tested in AS2, though since the issues I was running into were related to variable scope, I would only imaging that an AS3 implementation would be easier, if anything.

Here are the challenges I encountered:

• how to launch one EXE Projector from another EXE Projector
• how to share a SharedObject between two Flash movies (SWFs)
• how to continuously monitor the value of a shared SharedObject

(more…)