TWINE
“Twine is an open-source tool for telling interactive, non-linear stories.”-Twinery.org
Getting Started
Finding/Downloading
The Twine program is already available on all UPJ computers. It can be found on computers in the Mac Lab (Blackington) by searching the word “twine” or finding it in the applications folder.
In all other labs:
go to “files,” select “this PC” from the left hand column, under “devices and drives” select and open “OSDisc(C:)”, find and open the file “Program Files (x86)”, find and open file “Twine 2”, left click and select “send to” and “Desktop (create shortcut)” for ease of access while you’re working (it will stay on your desktop until the computers are “wiped”)
If you would like to have twine on your personal computer there is good news, it’s free! Simply go to Twinery.org and you will see the option to download. Here you can pick the option for whichever type of device you have (Windows, macOS, Linux). You should be able to follow your computer’s download prompts and take it from here.
Opening/ Getting Familiar
When you open up the program, if the prompt appears, you can choose “get started.”
From here, choose the green button which reads “+Story” to begin your project. You will be prompted to name your project. You can name it anything. If you are just messing around, I’d call it “Practice.”
When you create a new story, it automatically creates a new “passage” for you. The passage is the white box in the middle of the screen. This passage is what is basically acts as a digital page in your story/poem. 
Before we begin, we need to select the story format we want to use. To do this, click the triangle at the bottom of the screen next to the title of our project(in this case “Practice”). Next, select “Change Story Format.” Select, “Sugarcube 2.18.0
To start creating your poem, click on the passage to open it up. Change the title to something like “Homepage.” Entering in the text is an opportunity to get creative. Copy and Paste the entire body of text into this first passage. (example: A Road Not Taken by Robert Frost)
This is what it will look like.
(Save Progress by clicking the triangle by the title and selecting “Publish to File”)
From here, we will link to new passages. To do this, pick a word or words in each stanza which you want to highlight. Put two brackets around the word or words like this: [[yellow]]
This will create and link a new passage named “yellow”
It will look like this:
We can copy the first stanza and paste it into the passage named “yellow.” 
We can repeat this pattern for each of the stanzas.
This is just one example of how to creatively add links. Feel free to change it up and add your creative spin here.
Edit Story Stylesheet/ CSS
To edit the style of the font, background, colors, etc. you can enter in CSS code into the story stylesheet. To find this you click on the triangle next to the title and select “Edit Story Stylesheet.”
I will include code below. There are many ways you can alter this to make the look fit your poem. To find examples of code to change color or text, I suggest checking out the CSS page on W3Schools.com.
body{
background-color: #ffffff;
color:#000000;
font-family: "Courier New", Courier, monospace;
font-size: 125%;
font-weight: bold;}
#ui-bar{
color:#FFFFFF; }
#ui-dialog{
color:#FFFFFF; }
Inserting Images
To insert images into your story, you should first make a folder. Put it somewhere it is easy to find (like on your desktop maybe). You should keep the name simple, so it’s easier for you to turn it into a webpage. Names like, “twine” or “road” are good.
(Move your twine html file inside this folder.)
Within that folder create a folder named, “images.”
This is where you will save all of the images you want to include in your project. When you place your photos in there you should also give them easy to type names.
This is an example of code you can use to insert an image.
<img src="images/name.jpg" alt="name" width="70%" height="70%" />
You type it onto the passage which you wish to see it.
Remember to edit it so that the name of your image file is in place of “name.”
Inserting Audio
To insert audio, create another folder within that “twine” folder named “audio.” This is where you will save your audio file.
Insert this code into the passage where you want your audio to play:
<audio src= "audio/name.wav" autoplay/>
Remember to change the name of the file to match your file name.
Website
No comments:
Post a Comment