If there is one effect set that I need, it’s sci-fi user interface elements. In any movie or TV show that’s set in even a moderate future, there’s always a UI that’s filled to the edges with indecipherable widgets, graphs, meters, and apparently concentric circles. Oddly enough it’s not all that easy to come up with a unique sci-fi design in part because of what makes a UI “sci-fi” is pretty universally generic across all examples: blue, black, hard-edged shapes, sans-serif fonts, and unnecessary amount of animation.

These elements in the video are composed individually, and could be used in whatever project needs them. There’s a disabled button or box, an enabled button or box (with text and label), an inactive button or box, and an alert message.

Relevant Websites

If you do a Google image search for “sci fi interfaces” you’ll get what looks to be a single, massive image of a continuous UI, but they’re actually individual images. I landed on a Tumblr blog, of all places, for a UI that I really liked.

Relevant Resources

There’s no external resources here, although I did have to download the Acumin Pro Regular font from Adobe’s TypeKit repository for the text elements.

Technical Details

Update: No sooner had I closed AE, written this post, and went off to do something else, I was hit with a way to handle the dots. The fade is there and is good, but the animation now uses a mask on the singular line of dots. It’s precomposed, and the precomp now has Time Remapping applied. To that, I added the expression loopOut(type=”cycle”) which allows for the animation to just keep playing for the length of the render. I went with more of a jarring animation; the up and down was too smooth, but the restart-from-the-bottom works perfectly as an alert animation.

---

The standard frames were created in Photoshop and were imported into After Effects. I had re-made them in Illustrator, but for some reason the import to AE wasn’t working so I had to rely on the PS versions which were of different sizes but the same colors and design.

All frames are wiped in using a Linear Wipe effect at a 45-degree angle over 1 second. This worked better than the default 90-degree wipe because at 90-degrees, the vertical edges of the frame just “popped” into view. At 45-degrees, everything has a chance to look “drawn in”. The two corner squares are scaled up from 0 over 15 seconds, and then their opacity bounces from 0 to 100% for the next 10 seconds to give them that blinking-to-life effect.

For the frames with text, I returned to the Decoder Fade In text effect used in the Game Icon animation. I really like this effect for a sci-fi animation, and since the effect is just for the activation sequence, it happens pretty quickly (over 1 second).

The Warning animation gave me fits, though. In this case, the frame is revealed using the Iris – Square effect. This masks the layer to start, and then over time expands from the center to reveal the contents. A square iris worked well because the limited frame in this animation should be revealed from the center out, and in sync. The text, once again, uses Decoder Fade In.

The dots…well, I’m not completely happy with these, but I spent some time messing around with ideas and this is what I came up with. It started as a single 11px-stroke line. The Dashes property of the stroke was +’d twice to reveal more properties: Dash and Offset were set to 0.0, and Gap was set to 16.0. The Line Cap was set to Round Cap, and the sum of this turned a straight line into a series of identical dots stacked on top of one another.

The trick was to get them to fade out as they progressed from top to bottom. First, I precomp’d the dots and added a CC RepeTile effect to this precomp which duplicated the layer in any direction (in this case, to the right). I then added an adjustment layer and a bunch of effects:

• Gradient Ramp: This changed everything to black and white, but allowed me to fade the visible dots upward
• Colorama: A super-powerful effect…maybe too powerful. I had to mess around with it to get my dots back (disable the Modify Alpha in the Modify section, FYI) and then had to tweak some settings to get a red back. But the red was too dark, so…
• Curves: This allowed me to get the red back, and to darked the fade a little more via the alpha channel
• Levels: I needed to make the red a bit brighter, so adjusting the red levels was in order

Back in the main Warning composition, I added a Linear Wipe to the dots in the hope that it would allow them to reveal themselves one by one. Sadly, the wipe moves really, really fast, so what you see in the video is the best I could do before I was nodding off. I suppose adding time effects might help for speed, but the wipe itself doesn’t allow for pixel-perfect reveals. I also added a loop-and-reverse expression to the wipe. I figured a warning would want to get and keep your attention, so some constant motion would be in order. The issue, though, is that if this were to be used, I’d have to rework the comp, because I can’t just loop a segment of the animation. Maybe I could precomp the dots entirely, and add them as secondary elements to whatever the warning needs. That way, they could loop all they want and not have to worry about the rest of the warning panel composition’s animation.