Create A Movie-Style Credits Clip For Shotcut

Create a movie-style credits clip for Shotcut
By Ken Puckett
https://www.facebook.com/ken.puckett
Last updated: October 13, 2017
After finding that Microsoft stopped supporting Windows Movie Maker in early 2017, I hunted for a
replacement free video editor. The one that best suits my needs is Shotcut, available at
https://www.shotcut.org/. It is a free product that one can use for any purpose (meaning it is not limited
in its license). Shotcut has many features for putting together photos, audio and video clips, including
transitions, to make interesting short videos that can then be uploaded to YouTube or for whatever
purpose you have. (Does anybody burn home movies to DVD anymore??)
Shotcut has basic capabilities for adding text to videos, but if you are looking to add movie-style end
credits to your video, there is no built-in “scrolling text” capability to do that. But, we can use a simple
HTML file played in Chrome to scroll some text using the Marquee tag and then record that using desktop
recording software such as OBS Studio, https://obsproject.com/. Using the built-in “green screen”
features in Shotcut, we can even have our credits overlaid on top of the video we are creating.
The following is a tutorial on how to create the credits HTML file, how to play it using Google Chrome,
how to record it using OBS Studio, and how to add it to a video project in Shotcut.
NOTE 1: Shotcut has an “Overlay HTML” filter that can use the same HTML file with the Marquee tag but
it has problems “playing” the scrolling text smoothly, plus the point in time when Shotcut “plays” the
scrolling text can be inconsistent. Therefore, I came up with this workaround of recording Chrome playing
the same HTML file using OBS Studio and then using that clip within Shotcut.
NOTE 2: I have seen other solutions that include the use of a free tool called Blender, available at
https://www.blender.org/, to create a clip of a “camera” panning over a two-dimensional object that has
the credits text. Blender is a very powerful tool used for creation of 3-D images and animation, and I did
not want to get too deep into learning how to use Blender at this time. Other than the creation of the
HTML file, which of course you can just copy and paste from this very article, I think the tutorial presented
here is a lot simpler and faster.
1) Using a text editor such as Notepad, create the HTML file that has the credits you wish to
display, like the following (The line numbers you see are here for reference only):
1. <body bgcolor="green">
2. <marquee
3. behavior="scroll"
4. loop=1
5. direction="up"
6. scrollamount=8
7. width=100%
8. height=100%>
9. <p style="
10. text-align:center;
11. font-size:40px;
12. font-family:'Comic Sans MS';
13. font-weight:900;
14. text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black,
15. -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black;
16. color:red"
17. >
18. Directed by Joe Director 
19. Filmed by Sally Filmer 
20. Edited by Bobby CutAndPaste 
21. 
22. Professor Plum: George Clooney 
23. Miss Scarlet: Jennifer Lawrence 
24. Cat: "Sugar" 
25. 
26. Camera: Apple iPhone 6 
27. Screen Capture: OBS 
28. Editor: Shotcut
29. </marquee>
30. </body>
a. Line 1: In the Body tag we are setting the background color to Green. Technically, you
can set it to any color you want to (as long as it’s not one of the colors used for your
credits text) but green is typical for “green screen” video editing. Later, when we add
the recording of the HTML into Shotcut, we will apply a Chroma Key filter to the clip and
use its dropper tool to identify the color that should be transparent. Note that if you do
not want the text to appear on top of the video and would rather have a black
background, then set this value to “black”.
b. Line 2: We are using the Marquee tag to scroll the text. Technically this is a depreciated
HTML tag but who cares. As long as Chrome will do what we want it to, that’s what’s
important!
c. Line 3: The Marquee tag has different ways to display the text but we want the “scroll”
behavior.
d. Line 4: We only need to have the web browser scroll the text once.
e. Line 5: We want to scroll the text from bottom to top.
f. Line 6: This is used to speed up or slow down the rate of scroll, so you may want to
experiment with this value.
g. Lines 7 and 8: We want to show the text using the full real estate within the browser.
h. Line 9: The Paragraph tag is used here inside of the Marquee tag so that we can do
some text formatting.
i. Line 10: We are centering the text in the middle of the screen.
j. Line 11: This is the font size, in pixels. You may need to go for a larger or smaller number
depending on how much text you have per line.
k. Line 12: This is the font to use. The important thing here is you need to specify a font by
its name, based on what is installed on your PC. To look at the fonts installed and to get
its specific name go to the Windows Control Panel and go to “Fonts”.
l. Line 13: The font-weight setting is used to identify how bold the text should be.
“Normal” is 400. Maximum bold setting is 900.
m. Lines 14 and 15: We can use the font-shadow setting to create an outline (in this case, a
black outline) around the letters in the text. Because I wanted an outline that was two
pixels in width, I first had to specify a set of numbers (on line 14) that represents the
black outline at the one pixel mark around the letters, and then a second set of numbers
to specify the same thing at the two pixel mark around the letters. If you did not want
an outline at all, just remove these two lines.
n. Line 16: The text color. Note that there are different ways to specify colors, including
the RGB code for the color you want. Just do a search on “CSS color codes” to get an
idea on what to put here.
o. Lines 18 through 28: This is the text. A line break (“br”) tag is used to specify when text
should appear on the next line and can also be used to specify blank lines.
2) Drag the HTML file on top of Chrome, and you should see the scrolling text:
3) If you need to make edits to the HTML file, you can do so using whatever text editor you are
using, then once saved, just refresh Chrome (the hotkey is F5) to see the results.
4) While viewing the HTML file in Chrome and making edits in the text editor, you should view the
web page in full-screen mode (the hotkey to toggle in and out of full-screen mode is F11). When
it’s time to record the web page using OBS, you will be recording the text scroll in full-screen
mode. You may find that you may need to make the font larger or smaller, as well as other
changes.
5) Start OBS Studio, then choose (or create) a scene that uses “Display Capture” as its only source.
Configure the source to not capture the mouse cursor.
6) By default, OBS captures desktop sounds as well as sounds from the microphone. Mute both of
these. (If you forget to do this, no big deal…we can mute the audio for this clip within Shotcut.)
7) In OBS Studio, click “Start Recording”.
8) Switch to Chrome, go to full-screen mode if not already there (F11), then refresh (F5).
9) Once the credits have finished scrolling to the top, go back to OBS Studio and click “Stop
Recording”. You can then close OBS Studio.
10) Start Shotcut if not already running. Open your project that you wish to use the clip in, and add
the credits clip to the Playlist.
11) If you do not already have a second video track in your timeline that you can add your clip to,
create it now by right-clicking on your existing video track and click “Add Video Track” (hotkey is
Ctrl-Y). Note that this video track needs to be above the “main” video track, since we are putting
text on top of the main video.
12) Put the credits clip into the second (top) video track, and move it temporarily to a spot on the
timeline so that it does not overlap with the other video tracks.
13) Edit out the parts of the clip at the beginning and end so that it contains only the scrolling text
and not other programs such as the OBS window.
14) Add the “Chroma Key: Simple” filter to the clip. By default, the key color is already set to a
particular shade of green but we want it to match the exact shade of green (or whatever color
you used …see line 1 in your HTML file) as was recorded in the background of the clip, so in the
playback window, go to a time in the clip where you can see the background, then use the
dropper tool, , in the filter to click on the background color.

15) Reposition the clip on the timeline based on where you want it to appear. During playback, you
should see the text scrolling on top of whatever is in your main (bottom) video track.
16) If you didn’t want the text on top of some part of the action in the video but wanted an
interesting but static background to display the text on, consider putting in a still photo on the
timeline in your main (bottom) video track that appears for the length of time that is needed to
show the credits, then have the credits clip in your second (top) video track play on top of that
still photo. If you configured the Chroma Key filter correctly, you should see the text scroll on
top of the still photo.
a. Yes, you can also have the HTML file specify a background image and do it that way, but
by putting the still image in Shotcut instead, you can switch out the images shown while
the text scrolls!
Sample HTML code (for those that want to copy and paste):
<body bgcolor="green">
<marquee
behavior="scroll"
loop=1
direction="up"
scrollamount=8
width=100%
height=100%>
<p style="
text-align:center;
font-size:40px;
font-family:'Comic Sans MS';
font-weight:900;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black,
-2px 0 black, 0 2px black, 2px 0 black, 0 -2px black;
color:red"
>
Directed by Joe Director 
Filmed by Sally Filmer 
Edited by Bobby CutAndPaste 
 
Professor Plum: George Clooney 
Miss Scarlet: Jennifer Lawrence 
Cat: "Sugar" 
 
Camera: Apple iPhone 6 
Screen Capture: OBS 
Editor: Shotcut

</marquee>
</body>

Create A Movie-Style Credits Clip For Shotcut

Uploaded by

Copyright:

Available Formats

Create A Movie-Style Credits Clip For Shotcut

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Create A Movie-Style Credits Clip For Shotcut

Uploaded by

Copyright:

Available Formats

Create a movie-style credits clip for Shotcut

Last updated: October 13, 2017

dropper tool, , in the filter to click on the background color.

You might also like