I’ve been asked a few times how to create effects that require multiple instances of the Flash Player on a page to remain ‘in sync’, even with user interaction. Reading and writing to cookies frequently is inefficient and resource heavy. Also, when you have more than 2 SWFs, deciding which SWF updates who becomes tricky – especially if someone decides to change or remove an instance, or an instance which you picked as ‘master’ is not loaded, for some reason.
So, I came up with this solution, using LocalConnection with a twist, which works pretty well. But, if anyone has a better method, drop it in a comment below 🙂
For those that want to have a play with it, I tried to resurrect the Flash version using the Ruffle/WebAssembly emulator. On desktop it almost looks perfect. On mobile the cars may go invisible :/
So, here’s a video of the banner running…
How it works
The line dynamics itself is rather basic Hooke’s law physics stuff. But it took some experimentation to get a smooth curve drawn from end to end. Basically, it is a bezier curve and the ‘control points’ of the previous and next control points need to be in line.
The cars follow one of the line’s points with differing elasticity and damping. But the real pain in the backside was drawing the dashed line via code and ‘moving’ the dashes, in crummy early ActionScript (which had no API for programmatic dashed stroke drawing at the time). Luckily, I’m very persistent!