Hello my friend, it seems you are curious about dynamic overlays.

I too was curious. In fact, I was so curious that I successfully created one from scratch myself!

streamScreen

If you are into live streaming, it is no doubt that you are always looking for ways to entertain your audience. A dynamic stream overlay is a great, automated way to add that value. Let’s take a look at what my overlay looks like, how I did it, and why it has improved my stream. You might get some ideas for your own stream too!

Why a Dynamic Overlay is Awesome

  1. More Engaged Viewers – Traditionally, you engage your viewers by talking to them as much as often. This can get tiresome after a couple hours, so having your stream “talk” and react to viewers will lighten the burden.
  2. Encourages Follows/Donations – Setting up systems to provide stats and fun animations “game-ifies” the action of following and donating. You should give recognition to new followers, since a lot of the time, new followers just want to be noticed. Donators should also be featured, so that it is more apparent that their contribution is going somewhere.
  3. Self Promotion Space – Banners let’s your viewers learn more about you and the work you do. You can customize the entire overlay to be unique to your style, instead of relying on the default overlays everyone else uses.
  4. Automated Entertainment Value – You set it up once, and viewers benefit from the neat animations/interactivity without any added work on your part.

I noticed the potential of dynamic overlays after seeing the “Lachhh and Friends” Twitch stream, which takes an awesome, adrenaline fueled approach to their overlay. I was amazed at how well integrated the stream was, as well as how Lachhh was able to make programming and game development look fun.

Introducing: Gold Stream 2.0

streamScreen4

Yes, I did have a version 1.0 that only handled simple music requests, but I felt like I could do way more. Instead of relying on generic TwitchAlerts animations, I implemented my own UI with a couple more features:

  • Transparent chat window from all chat sources
  • Intro and outro slides (with automatically updated stream info)
  • Status indicator (live, AFK, mic on)
  • Tip jar meter, with donation highscore ticker
  • Custom donation animation, that visually links to the tip jar
  • Custom song request animation, that visually links to “Current Song” ticker
  • Custom follow animation, that visually links to follow meter
  • Dynamic banners, for promoting other artists and encouraging follows.

Look and Feel

As I mentioned before, a huge benefit of custom overlays is setting the mood for what your stream is about. Before I upgraded the overlay, my stream was very generic. Although it was clean and modular, it only used plain black rectangles to frame the content.boringStreamOverlay

For the new overlay, I thought about what kind of vibe my live streams give off:

  • I regularly stream at night due to my regular job, so people are usually joining in the evenings.
  • Unlike high energy gaming streams, I have a gentler attitude and voice.
  • It’s an educational stream: I like to explain the art process and answer questions.
  • I decompress and relax with animation and art. I play chill music to help with this.

streamScreen2

All of these factors led me to choose a serene, night-time theme. I want viewers to feel cozy and comfortable enough to ask questions. My stream should be a familiar club house for people to hang out in after school or work.

How it was done (technical details)

The implementation for the stream was a giant mix of services, due to the wide range of capabilities I wanted to provide. I did a day or two of research to ensure that these interfaces could provide me with the data needed for my overlay.

goldStreamAPI

Technology stack overview. I hooked into these services via REST api calls and reading local text files generated by client apps:

  • OBS – My livestreaming broadcast application of choice.
  • Twitch API – A lot of the streaming and follower data comes from Twitch.
  • TwitchAlerts + TA Client App – Provides valuable data for donations and session info.
  • NightBot + NightBot Client App – Needed for reading song requests from the chat
  • Snip – Needed for reading my Spotify app’s currently playing song
  • Restream + Restream Chat App – Consolidates all 3 of my stream chats (Twitch, Youtube, Picarto) into one.
  • Flash + TweenMax – Main architecture to tie all the previous technologies together. Renders the display.

Main Application Architecture

I wrote it all in Flash AS3, because that’s what I know the best. With it, I can animate and render graphics, I can make REST calls, and I know how to read from local text files. I had to split up the overlay into 3 separate SWFs (windowed applications). This is because I needed to sandwich my video feed between 2 overlays to achieve a nice integrated effect. The third SWF acted as a control panel, not meant to be rendered in the final overlay.

GoldStream

Base Layer (background graphic)

This layer simply acted as a backdrop for the stream. It contains the fancy background art, banner animations, and the streamer status indicator. The base layer doesn’t contain much dynamic content or coding, so it is essentially a looping screensaver.

Overlay Layer (all the interactive cool stuff)

The overlay is where all the magic happens. This layer handles anything that moves above my video content, or contains calculated data (follows, new donations, song requests). There are 3 modes for the overlay:

  1. Intro mode – Displays my stream’s Twitch status on a title card.
  2. Live mode – Displays interactive overlay elements meant for the live stream.
  3. Outro mode – Displays end of stream stats.

streamScreen3

To display live data, I took advantage of TwitchAlert and Nightbot client apps. These apps update various local text files that I can read from my SWF. I poll for this data every half second. When an change is detected, my overlay app plays an appropriate animation.

  • Currently Playing Song – Nightbot app for user song requests. As a neat bonus feature, I fetch the requesting user’s profile avatar and display it alongside their request. If I’m using my own personal Spotify playlist, I use Snip to grab the album art and song info instead.

streamscreenSongreq streamscreenSongreq2

  • Custom Donations – Grabbed from TwitchAlert’s “session_donations” text file. It contains all the needed info to render a custom donation animation (name, amount, message). I really wanted to personalize the animation to appear as a gift. I want the donator to feel as if they are actually placing cash into my tip jar, instead of feeling like they’re paying a bill online. The donation animation also gives the person some notoriety, as larger amounts lead to a longer “coin flowing” animation.

streamScreen6

  • New Followers –  Also grabbed from TwitchAlert. I felt that my current, GIF based follow animations were getting stale. I decided to customize them a bit, by accompanying each follow with a new animal and sound effect.The Sunmoon character lightly guilt-trips new viewers to follow, increasing a counter until it reaches 10.

streamScreen5

A key point to this layer is that a majority of it renders a magenta background. This allows me to apply a chroma key filter within OBS, so that my video content replaces the magenta. In turn, all the non-magenta overlay content appears to float on top of my video.

streamScreen8

Control Panel

A third SWF app acts as a dashboard that lets status/modes to be switched and toggled.

controlPanel

Drawing the art

Drawing and animating the banners and background was very enjoyable. Doing graphics for a user interface was a new challenge. You want everything to be grouped in panels, yet also free flowing. Most of my time was spent animating and drawing the live banners that appear at the bottom of the overlay.

Inspiration for Animator of the Minute

Some of my banners feature animators and artists that I know from Hyun’s Dojo. They display their usernames, home countries, and some of their released projects. I even asked them all for a personal quote that they like, relating to art.

bartAnimator

The idea for these little spotlight features came from “fun facts” that I watched at my local movie theater long ago.

I fondly remember going to the Multiplex Cinema with my brothers. And whenever we grabbed our seats early, the projector would be displaying some fun Hollywood movie facts before the film. I distinctly remember the my pent up excitement, since I knew I was in for an awesome film in a couple minutes. While stocked up on candies, snacks and high quality good movie popcorn, these movie facts were a perfect lull in the anticipation for the film. This was before smartphones, so there was nothing to distract you. There weren’t any previews, or loud advertisements either.

movieTheater

The theater was always well air-conditioned and sound proofed. Other movie-goers were whispering, so all you heard was a gentle murmur as these movie facts popped up on screen. It was a cool, quiet auditorium in the middle of the summer. It was just so chill.

I aimed to replicate that memory in my new stream overlay.

Conclusion

Deconstructing how Lachhh did his dynamic stream was a fun puzzle. I feel like this was one of those rare projects where I knew how to do everything up front, and all I had to do was implement. There was very little troubleshooting or problems during development.

I’m very happy with the result, as it will last me awhile. I’ll still have to upgrade the overlay over time though, to keep things fresh. This thing took me a week of solid work (couple dozen hours). I’m playing around the idea of developing these overlays as a side-gig. Let me know if you’re interested in commissioning me to develop one for you! (2/24/17 edit: Based on my current projects, I cannot offer this kind of commission work right now).

Having a custom, dynamic overlay is great. I stream multiple times per week and I am exposing/expressing my brand the way I want to each time I do it. Streamers should make their channel their own thing.

It gives you some pride, and if you have the coding know how and art skills, you should invest in it.

(◙◙)

 

 

 

 

If you enjoyed this post, please check out my other animations and sign up for updates using the form below.

23 thoughts on “How I made my livestream’s Dynamic Overlay

  1. Pingback: How I FINISHED my livestream's Dynamic Overlay - Gildedguy

  2. is there a way to make a simple animated overlay that starts when the viewer taps or clicks on it and plays on top of a live stream??? any tutorial or link you could direct me?? thank you!!!!

    • is there a way to make a simple animated overlay that starts when the viewer taps or clicks on it and plays on top of a live stream??? any tutorial or link you could direct me?? thank you!!!!

  3. Hello! For the last couple days I’ve been tinkering and experimenting with doing something similar myself. I’m not a dev by any means so it’s been a bit tough lol. I originally started with AS3 and made some basic stuff, like panels displaying information pulled from the local text files from the TwitchAlerts app, as well as retrieving profile pictures from Twitch API. It all worked when I was testing it in Animate CC, however it refused to work in my browser 🙁 Some of the animations were playing, but the dynamic texts and API calls weren’t working…

    Someone said this was probably due to AS3’s compatibility with modern browsers so now I’ve switched to HTML5… except HTML5 doesn’t like reading from local text files (makes sense for security reasons I suppose), so reading in from TwitchAlerts doesn’t work D: I’ve been looking around at using APIs to retrieve the data instead. All I’m looking for is latest follow, sub, donator and cheerer, but Twitch offers the first two and not the last two 🙁 I poked around the Streamlabs API for some endpoints as well, but can only see donation-related stuff.

    I don’t know whether to continue trying to pursue HTML5 or maybe try and get the AS3 stuff to work… do you have any advice? It would be greatly appreciated. Another thing is, if I were to use AS3 + TA: you said you monitored the most recent follower text file every half a second for changes which then triggers an animation- is this done through the overlay layer itself or the control panel?

    Thanks so much for the post, it’s really informative and inspired me to experiment!

    • Heya!

      I bumped into the similar challenges, and I ended up taking the “not-optimal-but-it-works” option.

      None of my overlay apps work in the browser, they all run as local Flash Player windows on my desktop. I’m not sure if your setup requires you to render them in browser, but I’ve just been using OBS + window capture to get my custom overlay to appear. So since I’m all local, my API calls to the net and fetches to local textfile data both work. I poll for this data inthe Overlay app. My control panel doesn’t constantly poll for data.

      • Hey again!

        Many of the problems I originally had I’ve managed to work through! So I initially went down the window capture + chroma keying route however the chroma keying was unfortunately messing up any profile pictures that had any of the magenta/green in them which wasn’t great. I then tried embedding the SWF into a basic HTML file, which allowed me to make the background transparent (wmode=transparent). So this firstly removed the need for chroma key. But then the SWF still wasn’t working in browser or OBS. I downloaded the debugging standalone Flash player and it turns out it was due to security settings. I went into my computer’s Flash settings (for Windows 10 it’s now integrated into Control Panel) and added my main folder as a trusted folder. This allowed it to play it the Flash player. Next, I had to change Chrome’s Flash settings as apparently Chromium Flash has its own security settings. I went to the online Flash settings panel (it’s a webpage) and added the trusted folder again – and this is important – the ‘Add File’ and ‘Add Folder’ buttons don’t work. You have to paste in the file path manually. That screwed me over for a while. After doing this, the Flash files should work in the browser. But they still weren’t working in OBS. I spoke to PeekingBoo and it turns out you just have to repeat the same step (changing Flash security settings) in OBS itself (add the online Flash panel as a BrowserSource and interact with it) – this finally let me add the HTML file containing the SWF as a BrowserSource and played the animation perfectly, with no chroma keying required.

        Hopefully this helps whoever else stumbles on this post, as it took a lot of frustration and confusion!

        I am now in the process of making the follow alert, but I’ve instead gone down the webhook route. So far so good, I subscribed to the topic however now I’m trying to make it work with an animation which is another layer of complexity. If all else fails I’ll return to polling the Streamlabels files.

        Thanks again for your post, I’ve been learning so much 😀

          • No problem! Late last night I also managed to get the webhook working sending through follower details when the event happens which alleviates the polling and now I’m trying to make the animation for it (…which is not my strongest area). I may end up writing a blog post about in the future when it’s all worked out, but if anyone needs help with anything I’d also be happy to help out (whisper me at https://www.twitch.tv/thefyrewire ). And I’m actually building all this for a friendo, so if anyone wants to check out the end result, it’s over at https://www.twitch.tv/EnjiFTW ! (but as of yet not much has been implemented).

            Best of luck to everyone’s streams and happy creating!

  4. Thanks for all the great ideas . I’ve been able to improve the layout of my stream with the inspiration you’ve given me! Keep up the amazing work!

    I just have a quick question. I’ve managed to create a nifty ccs/html/js script for my stream that continuously reads the current_song.txt file and updates the now playing animation that plays every 90s (using a metatag refresh for now,working on getting it to display as soon as the song changes/current_song.txt is updated).

    Right now the left image next to the song title box is just some stock play button, but I would like to display the avatar of the user who requested the song like you have done.

    How did you go about doing this exactly?

      • Thanks! I was able to get this to work eventually. I wasted a lot of time browsing/using old resources before I looked at the newer 2016 Twitch API stuff , when I found a twitch blog post from a dev and was able to extract the ‘logo’ (luckily I only needed a client id and not Oauth with added scope) . It definitely helped me brush up on my coding and learn some java/html that I wouldn’t have otherwise learned.

        https://blog.twitch.tv/client-id-required-for-kraken-api-calls-afbb8e95f843 , here is some of the code for others to use, of course, you will need to register your app/script to get a client id then code the rest of your html/java script (w3schools proved a valuable resource for me). I’m sure there are other ways to do it, such as using php, but this is the method I used.

        I’m going to put a link to your blog in my “special thanks” panel and will definitely refer people to your blog/stream. I wish you the best and again thanks for the help!

  5. Hi I’m really interested in how to do this, but you don’t mention how you actually fetch the song meta data etc, do you have an tutorials on how to actually get the song data etc into the animation? That’s the bit I’m stuck on.

    • Getting the song meta data is straight forward if you can code something that can read text files. Almost all Twitch Stream-Helper Applications provide a generated text file that is automatically updated with the current song information. In my case, I use Ankhbot now, which places this “currentsong.txt” file in My Documents folder. OBS even lets you display text on your stream directly from these text files. So you’d provide a path to OBS that would like similar to “My Documents/currentsong.txt”, and OBS will display “Darude – Sandstorm” or something.

  6. That helped me a lot ! I’d like to do it myself but one question.. how do you code ? I’m an animator but I’m not good at coding and I hope you help me .. anyway good luck with your animation”Basement Busk” and keep streaming

    • If you can do basic math, I think you can code. You should try out a free game called “Coding Combat”, it teaches the basics of scripting/coding very well. Try it out and see if you like it!

  7. I found this by accident as I too run with a custom overlay using AS3, it’s such a great feeling!

    One thing I didn’t see mentioned here that can be a fun thing to do for giveaways is script a chat-controlled minigame.
    Ankhbot offers the potential to write to text files when a command is used allowing you to pass the input of selected contestants directly through to the overlay.

    Another good-but-bad thing is when things go completely wrong and chat capitalise on it haha. I have a cheer command that throws roses on the screen sort of like an audience at a stage production and when you get a couple of hundred being thrown per stream you very quickly realise when something has gone completely wrong.

    • Thanks for letting me know about Ankhbot! Chat interactivity already gives me a ton of ideas for the stream.

      Just checked out your channel: Damn, dude. All that gaming while standing and stomping?

      Huge props on maintaining a consistent schedule from all that physical work. And I thought animating was strenuous haha.

      • No problem, thanks for checking me out also, my reaction is pretty much the same to what you do frame-by-frame!
        Drives me nuts so I almost always resort to tweening or very quick 2-frame smears.

        But yeah Ankhbot has also allowed me to make a functioning subscription system via patreon and some additional use of Microsoft Excel combined with VBScript (basically importing my current list of subscribers from patreon, seeing how long they’ve been subscribed for, outputting a text file for that user if their subscription has ticked over another month and then whispering the contents of the text file to them when they enter the stream next).

        It’s such a powerful bot and I’m always excited to see what ideas myself and others come up with while using it.
        Looking forward to catching one of your streams soon 😀

Leave a Reply