Over the last couple months I’ve been developing some digital signage kiosk software for shopping malls in Southern California. One requirement of this software is that it should cycle content (advertisements, coupons, videos, etc) and provide touchscreen features (print coupons, signup for mall events) on-demand without ever being interrupted.
The kiosks should NEVER be instructed to navigate to an external website or URL because this would break the automated content cycle.
As we progressed through several development phases, what initially seemed easy – keeping the kiosk cycle running 24/7 – soon became a difficult task. We also had the problem of getting people to actually use the kiosks. Who wants to be sucked into an advertising loop anyhow? So we started adding more features in order to bring awareness and attention to the usefulness of the kiosks.
By now we had live traffic reports from Google Maps, movie trailers and funny videos provided by YouTube, up-to-the-minute news from Yahoo, etc. Super nifty stuff…but we had one underlying problem. The SWF movies that were being embedded from Google/YouTube contained links, logos and popup ads that someone could actually click and force the kiosk to navigate to an external website or URL. This was very bad news for the kiosks; it meant we would have to block these internal SWF links entirely or stop using our new features.
What I found was pretty elegant. With modern CSS we can overlay an invisible div element directly on top of the SWF object using “position:absolute” and “z-index”. Now whenever a user touched/clicked on the SWF, they weren’t actually interacting with the SWF movie at all, rather they were poking at an invisible overlay div!
Something like this:
<div id="container_div"> <object width="800" height="530" type="application/x-shockwave-flash" id="my_swf" style="position:absolute;"><param name="allowScriptAccess" value="always"><param name="wmode" value="transparent"></object> <div id="internal_div" style="z-index: 3; position: absolute; width: 800px; height: 530px;" onclick="return false;"></div> </div>
Note the following:
- Both the swf object and internal div are wrapped in a container div.
- Both the swf object and internal div are set to absolute position.
- Both the swf object and internal div are sized to 800×530 pixels.
- The internal div has a higher z-index than the swf object so it gets placed “on top” of the swf object.
- The swf object has the wmode parameter set to “transparent” which allows other html elements to sit “on top” of the swf movie. Otherwise an swf is by nature “on top” of every other html element.
You might also be able to accomplish this technique similarly by using a transparent swf movie instead of the internal div.