- Supported Bit Versions
-
- 32-bit
- 64-bit
- Minimum OBS Studio Version
- 26.0.0
- Supported Platforms
-
- Windows
A pack of animated onscreen captions for streaming. Starter kit includes lower third, locator, attribution and header. To customise the content and control in and out animation a control board is available.
How to use
1. Download and unzip the archive and save all the files in one folder of your choice.
2. Open OBS Studio and add a gfx control board to the OBS Docks panel. To do that go to the top menu=>View=>Docks=>Custom Browser Docks. In the Dock Name field give it a name (e.g. Onscreen GFX), in the URL field past and path to the controls.html file which you saved on the previous step (e.g. C:\myFolder\mySubfolder\controls.html).
3. Add the graphics pack from the unpacked archive to your Sources OBS panel. To achieve this right-click in the Source panel=>Add=>Browser, name it the way you want (e.g. myCaptions). In the Properties dialogue window check the "Local file" box, click the "Browse" button and navigate to your indexOBS.html file, unpacked from the archive. Put width and height to 1920 and 1080 respectively. Clean the Custom CSS field. Click "OK".
4. Try adding your text in the control board and click "Animate IN" button, you should see your animation in the OBS Preview panel (the left one). To see it on the Program screen click the OBS "transition" button. To take the caption off the screen click "Animate OUT" in the gfx control board.
You can add more than one item of the same type and create a sort of a rundown using "+" and "-" in the gfx control board.
Preview function
1. To activate the preview function add indexOBS_preview.html file to the OBS Sources panel the same way as you did with the main gfx pack earlier. Switch off the visibility of this layer.
2. Right-click on this source layer and select "Interact" and it'll open a new window, so far empty.
3. Enter your text for the selected caption and click "Preview" in the gfx control board. Your animation will be played in the Interact window. Use this function if you want to preview your graphics in advance before playing on air.
Server version where you don't need to download and install anything is coming shortly.
How to use
1. Download and unzip the archive and save all the files in one folder of your choice.
2. Open OBS Studio and add a gfx control board to the OBS Docks panel. To do that go to the top menu=>View=>Docks=>Custom Browser Docks. In the Dock Name field give it a name (e.g. Onscreen GFX), in the URL field past and path to the controls.html file which you saved on the previous step (e.g. C:\myFolder\mySubfolder\controls.html).
3. Add the graphics pack from the unpacked archive to your Sources OBS panel. To achieve this right-click in the Source panel=>Add=>Browser, name it the way you want (e.g. myCaptions). In the Properties dialogue window check the "Local file" box, click the "Browse" button and navigate to your indexOBS.html file, unpacked from the archive. Put width and height to 1920 and 1080 respectively. Clean the Custom CSS field. Click "OK".
4. Try adding your text in the control board and click "Animate IN" button, you should see your animation in the OBS Preview panel (the left one). To see it on the Program screen click the OBS "transition" button. To take the caption off the screen click "Animate OUT" in the gfx control board.
You can add more than one item of the same type and create a sort of a rundown using "+" and "-" in the gfx control board.
Preview function
1. To activate the preview function add indexOBS_preview.html file to the OBS Sources panel the same way as you did with the main gfx pack earlier. Switch off the visibility of this layer.
2. Right-click on this source layer and select "Interact" and it'll open a new window, so far empty.
3. Enter your text for the selected caption and click "Preview" in the gfx control board. Your animation will be played in the Interact window. Use this function if you want to preview your graphics in advance before playing on air.
Server version where you don't need to download and install anything is coming shortly.
