Here’s another in my series of tutorials of using the free version of Isadora (without additional downloads) to do some quick surtitle / dialogue projection! Imagine you’re in a workshop, and you just want to quickly put together some surtitling tests. You have the script. You have a free installation (without license) of Isadora on your laptop (or you can go download one right now). This should get you up and running to make some surtitling happen!

---

Script preparation

Once again, this involves preparing your script in a standardized format in a text file (.txt). In our example, it looks something like this:

[character name]: [the line]

It is important to make sure to eliminate line breaks to make sure the dialogue by the same character is on the same line. A line without a character name heading will not show up.

(it can be hard to tell what is just a line break because of the window size of the text editor, and what is a new line break/new sentence. You can try adjusting the window size to see if the line break moves. Or, you’ll find out soon enough once you get the text up on projection what line has been cut off)

If in your script, it’s something else instead of the colon (“:”) following the character name in each line, that’s all good too – I’ll tell you how to specify that later in this tutorial. But for now let’s move ahead with my example.

You’ll need to copy the path name of this text file soon. The way I find this that’s the easiest to me is to right click on the file and select “properties” (oh ya, I’m using a Windows computer, but I’m sure something similar applies to other OS):

You’ll need the location & file name soon.

---

Isadora setup

Launch Isadora!

Search for Read Text From File on the left hand search bar and drag that into your editor window.

• in “file path”, you’ll want to put in the file path you found earlier. In my example it’s C:\Users\howar\Desktop\test 2.txt.
• in “read mode” right click to select “line” as we are reading line by line
• “auto read” right click to select “on”
• now if you click on the space next the “start” and drag up and down you should see some text scrolling in the “text out” output

Now back to the left hand menu and search for Javascript to place to the right of Read Text From File.

In the Javascript actor:

• change inputs to 14
• chagne outputs to 5
• you should see the number of inputs and outputs updated

Double click the Javascript actor and a code editor window should pop out. Replace all content with this:

// iz_input 1 "input string"
// iz_input 2 "name 1"
// iz_input 3 "colour 1"
// iz_input 4 "horz pos 1"
// iz_input 5 "vert pos 1"
// iz_input 6 "name 2"
// iz_input 7 "colour 2"
// iz_input 8 "horz pos 2"
// iz_input 9 "vert pos 2"
// iz_input 10 "name 3"
// iz_input 11 "colour 3"
// iz_input 12 "horz pos 3"
// iz_input 13 "vert pos 3"
// iz_input 14 "splitter"
// iz_output 1 "character"
// iz_output 2 "line"
// iz_output 3 "horz pos"
// iz_output 4 "vert pos"
// iz_output 5 "colour"



function main()
{
	var inputText = arguments[0].toString();
	
	var char1 = [arguments[1].toString(), arguments[2], arguments[3], arguments[4]];
	var char2 = [arguments[5].toString(), arguments[6], arguments[7], arguments[8]];
	var char3 = [arguments[9].toString(), arguments[10], arguments[11], arguments[12]];
	
	// if splitter is specified - otherwise it's just ":"
	if (arguments[13].toString() == ''){
		var splitter = ":";
	} else {
		var splitter = arguments[13].toString();
	}
	
	// using ... rest operator and .join() later so it leaves the other occurences of this splitter in the rest of the line intact
	var [character, ...line] = inputText.split(splitter);	let pos = []
		switch (character) {
      case char1[0]:
    	  var textColour= char1[1];
    		pos.push(char1[2], char1[3]) ;
    		break;
  		case char2[0]:
    		var textColour= char2[1];
    		pos.push(char2[2], char2[3]) ;
    		break;
			case char3[0]:
    		var textColour= char1[1];
    		pos.push(char3[2], char3[3]) ;
    		break;
  		default:
   		 	var textColour= '000000'
			}

	return [character, line.join(splitter), pos[0], pos[1], textColour]
}

(View as as a Github Gist)

Hit OK. Your Javascript actor should now look like this, with the input/output labels updated:

(except that on the right side of this actor, on your screen the “colour” output should be at the bottom rather than in the middle. I updated the code to be that way so it’s easier to connect later, but the next few screenshots you’ll those are in the wrong order. Don’t worry about it yet.)

The slightly tedious thing about this Javascript actor is that these input/output are by default of Float types (so, numbers), which is great for times when you are using number but not great for when you want to see anything else. We have to force it the change by connecting it to an input/output of the type that we want.

In the left hand side bar, search for an User Input to bring to the left of this Javascript actor. Double click it to select the Data Type “String”

Now, connect the User Input to “name 1”, “name 2”, “name 3”, “splitter” of the Javascript Actor. Click the white dot to the right of User Input and connect it to the desired dots.

You made those inputs of String type! You can click on the lines to delete each of them. Now you can click directly on the input of those Javascript actors and write words.

Now go back to User Input:

• double click and change the type to Color (Integer).
• Connect it to “colour 1” “colour 2” “colour 3”.
• click on the rectangular field to open up the color picker.
• Make sure the Alpha slide all the way to the right is all the way so it’s solid rather than transparent! As well as the brightness slider next to it.
• Close and delete the connecting lines.

We’ve now changed the input types to what we want! You can delete User Input now – we don’t need it anymore.

Now for the outputs, let’s get a Text Draw actor and put it next to Javascript, and connect them as such:

• “line” to “text”
• “horz pos” to “horz pos”
• “vert pos” to “vert pos”
• “colour” to “font color”

And finally, put a Projector next to Text Draw, and connect “video” to “video”.

You’re all set up!

---

Now, let’s go back to thte Javascript actor. Let’s put SAMPSON in “name 1”, and GREGORY in “name 2, and pick a different colour for them.

Hit Ctrl+G (or Command + G on Mac) to open the stage preview. Then if you go back to Read Text From File and click and hold the “start” input number and drag up and down, it’ll scroll through the line and you should see the lines show up in their character corresponding colour!

You did it!!

Then, you may want to change the “horz pos” (horizontal position) and “vert pos” (vertical position) under the “name” so that different character’s lines show up at different places on the screen!

---

Word Wrap

If you’ve got big chunky lines, you may want to consider wrapping the line. You can do by adding the Text Wrapper actor, and insert it between the Javascript actor “line” output and Text Draw “text input”.

Here you can see the “max chars” is 38, so it breaks to a new line after 38 characters. You’ll notice here that under “horz pos 1” and “vert pos 1” I’ve moved Sampson’s lines to be in the upper left corner.

---

Keyboard Watcher

To make operating easier, you also may want to add Keyboard Watchers & Counters to help you operate / navigate through surtitles.

Let me explain what’s happening here… We’ll look from the right side of the screenshot and move left.

We want to control the number in the “start” input of Read Text From File as that determine which number line in the script we are displaying.

Let’s add a Counter actor and connect the output to start.

• you should also increase the “maximum” amount to more than the number of lines you have in the text file so you don’t run into issue.
• if “limit” is selected under the “mode” input, that means once you hit the maximum number it’ll just stay there; whereas “wrap” mode will send you back down to 0 / beginning if you add to the number after it hits maximum value.

You can click the “input” for “cur value” (current value) and quickly jump to the line number you want. I just personally like to connect an User Input to it so it looks easier to understand but totally optional (some might consider this unneccessary!)/

Add two Keyboard Watcher actors, one to the “add” input and the other to the “sub” (subtract) input. I chose letter “A” and “S” as they’re right next to each other but it can really be anything.

• to select which key in “key range”, you really just have to click and hold in the black rectangle input area and drag.
• Alternatively, click the dot next to that input and you’ll get a wheel that you can drag to scrub through letters.

Now you can use those keys to move forward and backward in surtitles!

---

Specify Splitter

Let’s say your script doesn’t have a colon after each character the name and you don’t want to go line by line to change that (that defeats the point of this whole quick Isadora demo!), I’ve written something in the code where you can specify the “splitter” character(s). In the below example, when I pulled this text from the internet, the format they’ve got is double space after the character name:

So what we’ll do is go to the Javascript actor, go to the “splitter” input (the last one at the bottom), and type in double space (it’ll look like nothing…because it’s just empty spaces. But you know what I mean right?)

And ta-da! That should do it! If you do not specify the character in the “splitter” input, the splitter by default is a colon (“:”).

---

Hopefully this is easy enough to get you started on playing in Isadora! Perhaps I’ll make a screen recording walkthrough if there’s demands for it (let me know in the comments, lol). Let me know if you have any questions!

See also: if you wanna do some teleprompting, here’s a tutorial for putting five lines at a time on the screen, also with each character having their own font colour.