When you create a stack of overlays in a DPS article, which overlays take precedent over others? While the answer is complicated, it’s also logical. Before I go into which overlays win out in a stack, first I need to explain the concept of “inactive” vs. “active” overlays.
Inactive and Active Overlays
When we’re teaching the concept of interactive overlays, we like to explain that non-interactive content is added to the background image of the page while interactive overlays appear on top of this background image, which is why they’re called “overlays.” While that’s accurate, it doesn’t tell the whole story. It fails to take into account that some overlays can be active or inactive.
Let’s take a look at Colin’s image sequence of the Fremont Bridge in Seattle. You can experiment with this example in the Advanced Overlays issue of DPS Tips, or you can watch this quick 10-second video.
Notice what happens to the red arrow and the image sequence overlay. Tapping the image sequence hides the red arrow, which is part of the background image, and double-tapping the image sequence exposes the red arrow again. Why?
Inactive overlays do not appear on the overlay level. In this example, the image sequence overlay has not been activated, so the simple non-interactive red arrow appears above it in the stacking order. Only the button and sound overlays, which are active, appear on the overlay level, as shown in this image.
When you tap to play the image sequence, the overlay is activated and appears to pop in front of the static red arrow, as shown in the next image.
Then when you double-tap the image sequence to deactivate it, the image sequence appears to pop back behind the red arrow. That’s because the red arrow is in front of the image sequence poster in the z-order.
The Z-Order of Objects
On each level—background and overlay—the z-order of the objects determines which item appears in front. Use the Layers panel or Object > Arrange commands to change the z-order of objects.
If we moved the “Bridge Image Sequence” above the “Red Arrow” object in the Layers panel, the image sequence would always cover the red arrow, regardless of whether it’s active or inactive.
What if you wanted the red arrow object to stay on top of the image sequence? Simple. Make it a two-state slideshow that auto-plays one time, and it move up to the overlay level. This two-state slideshow is called a “dummy overlay” or a “super overlay”; it’s a common technique used to mask parts of videos and make scrollable frames appear to go in front of some objects and behind others.
Stacking Order and Overlay Types
Here are a few other factors to consider with stacked overlays:
- Overlays that can be activated and deactivated include image sequences, inline videos, and pan & zoom images.
- Buttons, hyperlinks, audio clips, and scrollable frames are always active (unless they’re in an inactive MSO state).
- Once slideshow and web content overlays become active, they cannot be deactivated. (Use the Hide Before Playing option to make a slideshow initially inactive.)
- When you interact with overlapping overlays, the topmost overlay wins out, but you can still interact with an image sequence that’s partially covered by a slideshow, for example, by swiping an area of the overlay that isn’t covered.
- You can interact with buttons even when they’re covered by another overlay. If a button is behind an image sequence, for example, tapping the area of the image sequence where the button appears can trigger the button action. In this example, the image sequence couldn’t have “Tap to Play” enabled, or tapping that area would affect the image sequence, not the button, because the image sequence is higher in the stack order. As I said, it’s complicated but logical.
Summary
There are three factors that determine the stacking order of overlays:
(1) the z-order of objects
(2) whether an overlay is active or inactive
(3) the type of overlay.
