Case Studies

Case Study: West Marches Breakscreen in HTML5 CMS

west-f

We’re in the middle of moving things on itmeJP channel over to HTML5, and eventually use NodeJS, Socket.io and NodgeCG to really bring the production value up once again. JP asked me a few days ago if I couldn’t create a intermission screen, where he could edit the text in Photoshop. I thought that it would be better to do it with HTML5 (HTML5 is the word for HTML/CSS/JavaScript combined), that way JP could update the text on the fly and not have to worry about having to have Photoshop open.

This won’t be a step by step guide. What I want to show is that it’s possible to easily set something like this up even with limited knowledge. Almost everything is already out there for you to grab already. I know HTML/CSS however I’m very limited in JavaScript and knew nothing about different CMS systems before I started this project. However if I never started doing it I would never have learned it and I would only still be sitting not knowing. That should be the takeaway, it’s better to do than to sit and do nothing and never figure out what works and what don’t.

Lets start the show!

We’ve been talking about having different break screens for all the different shows that JP puts on, so this is just the first of many, this was more me testing if it was possible and after seeing how it went with the intermission screen I felt that doing it with the West Marches breakscreen would be possible.

Get your files in order

Bootstrap via Initilizr.com

Bootstrap via Initilizr.com

First we need all of hour assets ready to go. Luckily with West Marches I had already created the overlay in a non-destructive manner. That meant that I easily could remove everything from the overlay and only leave the background image. Working non-destructive is something that I really believe strongly in, from using shapes instead of pixels and using layer masks instead of the erase tool. Might sound like small things but when you need to do certain changes down the line that also means that you don’t need to recreate something.

Besides our image assets, and photos that I grabbed from Twitter. I also needed a CMS and a HTML framework, a HTML frame work isn’t a necessity but I like to have a grid system already in place so I don’t need to worry too much about that.

  • When everything was collected these are the files I ended up with.
  • West Marches background image
  • West Marches logo (transparent .png)
  • Two smoke images (transparent .png)
  • Cast photos (any size, grabbed mine from Twitter)
  • Bootstrap/Initilizer (HTML framework)
  • CMS Made Simple (the CMS and dashboard that we will use to easily update things)
  • Web Host

Working with the HTML framework

Bootstrap grid system

Bootstrap grid system

I’ve worked with Bootstrap in the past, so working with it again was pretty straight forward. If you’re not familiar with what a framwork can do for you I urge you to look at the different components and the grid system that it uses. To explain, the components are different CSS elements you can call on from your HTML file. For instance Bootstrap already have coded in a dropdown menu, navigation bar, buttons etc. and all you need to do is add a line of text in your div class and you get that styled component. That’s good, but not the real reason why we want to use it. We want to use their grid system.

What’s the grid system? It’s pretty easy. Imagine that a website is cut into 12 columns, and endless amount of rows (defined by you), you can with Bootstrap use their already built system to place text, images and different elements on the page. For instance I could put a 8 wide column and a 4 wide column next to it, and all I would need to do is add a class name, defined by Bootstrap, and you would be able to fill those to spaces.

I wanted this so I easily could place text on one side in a 8 wide column and then place the cast members in the 4 wide column. Boostrap isn’t the only framework out there, but it’s the one that I’m used to.

Placing our image assets

Three separate images

Three separate images

The first thing I set was the background image, that was the easiest of them all, since it all falls under the body tag in the CSS file. When it came to the logo and the moving smoke however there’s a few more steps. First of all they need to be layered over each other, that means they need to occupy the same space, I did this by placing them absolute in three different divs as background images and then setting them with different z-space values. That way we have one smoke behind, the logo div and another smoke layer above the logo div. These smoke images isn’t just long images, that’s the reason why we put them as background images, we can add a repeat-y and that will repeat the smoke horizontally.

We add the animation by using the CSS3 feature of keyframes and having it move across the screen. The two smoke divs are moving at different speed, the back one at a slower speed (300s) and the foreground one at (250s), this will add the the overall effect. This also means we don’t need to use a gif to add any animation, and the PNG file is att full resolution so the smoke looks really clear. As a quick side note, if you want to create a repeating background image you can use Photoshop. All you need to do is go into Filter -> Other -> Offset…, there you’ll be able to offset the image so sides line up and all you need to do is fill in the middle and you have a repeatable horizontal background.

Lastly we have the images for the cast. This is done in part with CMS Made Simple and Bootstrap. We apply the media object div class. That puts an image right of the content, that’s exactly what we want so no need to change the CSS. Well I did need to change one thing, and that was the width to 100%, if not the horizontal break line would not stretch longer than the text content.

JavaScript Countdown

For the JavaScript countdown I found one online that was simple to set. It’s set by adding a date inside of the HTML/JavaScript code. Now that might sound difficult, but we will solve this easily with CMS Made Simple later. You can easily add whatever JavaScript, be it in script tags or linked, into the DOM. In this case all that was needed was a countdown. But there’s a bunch of other things that are possible. For instance I recently created a Instagram slider that either pulls from a hashtag or from your account and displays it scrolling horizontally.

HTML to CMS

I know I’m probably skipping a long step if you’re unfamiliar with HTML, but the only thing that’s left with the HTML is paragraph tags and usage of the Bootstrap grid system. When you start to get familiar with Bootstrap you can easily grab code from there and fill it with whatever text that will fit you need. What I can see is that you should lock the width and height to 1080/1920, that way you will always get the correct look of the page even if your browser window is smaller.

CMS Made Simple

This is the first time I use this CMS. In the past I’ve used WordPress and have created my own WordPress theme as well. The reason why I picked CMS Made Simple (CMS MS) is since it has some really easy features to create input and content input windows. It also has a WYSIWYG editor so anyone can add text without having to know any HTML.

CMS MS isn’t super fancy but during my search for a simple CMS system that didn’t need much work to extend beyond having 1 theme, CMS MS checked almost all of the boxes. That it’s simple is in the name, and that’s not a bad thing, that doesn’t mean what we do with it have to be simple. We can do some very advanced stuff with PHP down the line and still maintain the exact same look, but with new features. What is simple is how it’s easy to setup and how easy it is to add/remove/replace content.

Easy to add cast from the CMS database

Easy to add cast from the database

There are however a few steps to get it working before you can easily add and remove things. One of the easiest things is to add the entire HTML file into a CMS MS template. Fairly easy and the only extra set is that you have to put everything that isn’t HTML or linked (like off-site CSS and JS) inside of literal tags. Then you also need to remove all the content, that’s the headline, text under the headline and the entire media object block. We want to put int content tags there instead, we can then tell CMSMS that we want them to be fields instead of editing blocks, we keep the headliner and show description as regular edit boxes.

To do this we need to create code snippets that CMS MS calls Global Content Blocks (GCB). What this means is that we’re going to take the HTML content that we want to be able to add, in this case the different cast members, and add those as GCB. We can then easily call on those by only adding 1 string of text into a input box, that way we can easily add, remove and re-arrange however you want. Now it’s also possible to add as many more cast member as we cant, or add whatever might fit with that episode of the show, this can even be changed during broadcast and updated. All without having to open Photoshop and replacing assets.

Final thoughts

Still image of how it looks.

Still image of how it looks.

There’s a bunch of things you can do with CMS MS, I’ve only starched the surface and I’m sure that this breakscreen will evolve as I create more of these for other shows and overlays. It does need a host that have FTP and a database, even better is if it’s a server, either a dedicated or virtual. You can do a lot more things with that. I do have access to one thanks to BeyondHosting (not sponsored in anyway) but since they’ve helped me with a lot of things, installing bots, scripts etc. I feel a shutout here is at least something I can throw back their way.

I don’t think static/gif/PSD overlays are going away only because we’re seeing more and more of these custom setups. I think there’s always going to be a need for keeping it simple, however for the streamer that don’t want to open Photoshop there is value in these solutions. When a streamer easily can add something with the click of button, adding a name or something equally simple they don’t need to spend time in Photshop and focus on their content. I work to solve problems and this was a problem, so I solved it, there’s more solutions and I’m not done.


Tomorrow I’m posting my interview with GameWisp, for the LiveSpace Twitch Podcast, some really interesting stuff and we talk a bit about how I think they might be able to improve their service, yay for helping out. I’ll probably record a episode with only me, there are a few things that I want to expand on that just works better in audio form than text. Or at least I think so, it’s a test to see if I can hold a episode on my own. Also I’m preparing for TwitchCon, so probably going to talk about that as well.

Hey! If you want more insight, more content and more me, then follow me on Twittter @visiblespeech and/or subscribe to the LiveSpace Twitch Podcast on iTune or you favorite Android podcast app (mine is Podcast Addict).

 

About the author

Daniel

Daniel

Do you need Twitch branding done the right way? I've work with both partnered and non-partnered Twitch streamers and done so for over 4 years. For me this is full time and I'm dedicated to my clients and my craft. I do both branding, visual branding and brainstorming based on understanding you, your community and your channel. If that sounds interesting to you then you should check out my Twitch services/portfolio/client list and contact me right away. twitch.livespace.se

Leave a Comment

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close