I am in the process of coming up with a unified set of live streaming alerts for use with StreamLabs and needed a kinetic widget for the alert display. I’m still following my high-tech motif, and high-tech UI generally have a lot of moving elements: rotating circles, oscillating waves, and cycling numbers.

I had a bit of an issue with this one because the text doesn’t play well in After Effects the way that other graphics do. Fortunately, I managed to accidentally find one property which allowed me to randomly cycle through ASCII characters to get an extremely fast number cycle.

Please pardon the resolution; I was pressed for time and hadn’t had an opportunity to make the font larger for the render.

Relevant Websites

I spent a lot of time on the Adobe HelpX website for After Effects after locating the Text Animator – Character Value property. I also used the site to read up on randomization expressions.

Relevant Resources

There were no external resources used for this test.

Technical Details

My original thought was to cycle symbols, like some kind of alien display, but thought it would be better to keep everything in English and use numbers simply because I couldn’t find suitable ASCII characters that could stand in for an alien alphabet that didn’t look like Wingdings. I opted for a 7 number composite, but the biggest problem was how to get the values to cycle. Even then, how could I get the animation to keep going for the length of the alert?

I found part of the answer accidentally.

I clicked the ANIMATE button (upper right) which added some text animation properties, including the Character Alignment, Range, and Value properties. Just by happenstance I was fiddling with the numbers under Character Value and realized that this “value” was the ASCII value of the text displayed. Seizing on this, I removed the default Expression set for the property and changed it to

random(48,57);

Which sets the property value to a “random number” between 48 and 57, which is the ASCII range for numbers 0-9. Each frame we get a different random value, so the number display will update with that ASCII representation.

Two issues, though. The first is that while this is great, I tried precomping a single character which I duplicated six other times to make my readout. When the animation ran, each value was exactly the same. Obviously, this is because the precomp isn’t just a template, but a hard template. My random number value was being set (in a manner of speaking) at the template level, and each instance was just showing that value. Instead, I copied the contents of the precomp into seven different layers, and then precomped those together. As distinct layers, each animation used its own random number, and the values were different. The second issue is that the values are cranking out at the animation’s FPS, which on some level is fine because it’s really there to just give a kinetic flavor to the scene, but if I could slow it down just a bit, it would be better off. I’m not sure how to accomplish that, exactly.

Live stream alerts are one-shot animations; they do something, then they leave. But sometimes during their stay, I want to have actively animating elements which might stop before the on-screen animation is complete (streaming alerts are governed by an external timer of the streamer’s choosing and is independent of the run-time of the animation). I would like to loop this text cycling, but the traditional loopOut() cannot be used for text. I suspect the easiest option is to render this as a movie, re-import it, and use looping features in that regard. Really, the cycling would only need to stay visible for maybe 5 seconds? So maybe it can all be done in the same animation. I haven’t actually gotten that far in the process to say for sure.