[[Open]] the time door\u2026<\/p>\n\n\n\n
[[Open the time door]]\u2026<\/p>\n\n\n\n
Open the [[time door]]\u2026<\/p>\n\n\n\n
Everything in brackets will be highlighted link [and the title of your next passage]<\/p>\n\n\n\n
However, you may also want to have the text shown on the page be different from the passage name. For example, you might have two ways to reach a passage, or you may not want to give away the name of the destination. In these cases, you can write this:<\/p>\n\n\n\n
- [[Open the time door | into the fire]] Open the time door will be the text URL (but the player will be taken to the fire passage…<\/li><\/ul>\n\n\n\n
\n\n\n\nAdding an Image<\/h3>\n\n\n\n
Once you know what your image’s URL<\/abbr> is, having it display in your story is as simple as entering the correct HTML<\/abbr> code to show up: You can upload images and audio files to your websites (or host them on google drive or dropb ox).<\/strong><\/p>\n\n\n\n
<img<\/a> src=\"the URL of your image\" width=\"500\" height=\"300\" alt=\"Two foxes\">
<img<\/a> src=\"the URL of your image\"alt=\"Two foxes\"><\/pre>\n\n\n\nThe width and height part of the code control the size of your image on the page.<\/strong> If you leave them off, then it will display the image in the dimensions as you saved it. This is good reducing size. However, if you increase size or alter the dimensions, the image may look distorted or pixelated. Do the MATH (ratios) to ensure that consistent dimensions if you enlarge or reduce image size.<\/strong><\/p>\n\n\n\n
Adding a Background Image for Entire Twine (Style Sheet Editor)<\/h3>\n\n\n\n
To add background image or animated .gif, make sure you select image of high quality\/large size. Go to CSS editor:<\/p>\n\n\n\n
\n\n\n\ntw-story { background-image:url(ENTER YOUR URL HERE); background-size:cover; }<\/strong><\/p>\n\n\n\n
example:<\/p>\n\n\n\n
tw-story { background-image:url(http:\/\/www.seriousplaylab.com\/twine20\/portal.jpg); background-size:cover; }<\/strong><\/p>\n\n\n\n
if example above does not work, try adding the “quotes” from around the URL (like this below). <\/p>\n\n\n\n
tw-story { background-image:url(“http:\/\/www.seriousplaylab.com\/twine20\/portal.jpg”); background-size:cover; }<\/strong><\/p>\n\n\n\n
Adding a Different Background Image for Different Passages<\/h3>\n\n\n\n
tw-story { background-image:url(“ENTER YOUR URL HERE”); background-size:cover; } Code with tag: – The tag here is the word “snow” tw-story[tags~=”snow”] { background-image:url(“ENTER YOUR URL HERE”); background-size:cover; }<\/p>\n\n\n\n
Example below: In the Style Sheet Editor I added this code. The tag (e.g., home or portal) is created on the passage page (very top there is create “tag” option). NOTE (make sure the “quotes” below are reformatted currently if you cut and paste this to the Twine). <\/strong><\/p>\n\n\n\n
tw-story[tags~=”home”] { background-image:url(http:\/\/www.seriousplaylab.com\/twine20\/portal.jpg); background-size:cover; }<\/strong><\/p>\n\n\n\n
<\/p>\n\n\n\n
tw-story[tags~=”portal”] { background-image:url(http:\/\/www.seriousplaylab.com\/twine20\/tt.gif); background-size:cover; }<\/strong><\/p>\n\n\n\n
Adding a Video<\/h3>\n\n\n\n
If you’d like to embed a video from a service like YouTube or Vimeo, check the page for an option to embed it. See YouTube’s help<\/a> and Vimeo’s help<\/a> for specific instructions on how to get the embed code and customize it. Once you have that code, enter it as-is into your passage to have it display. YouTube or Vimeo, check the page for a “share” option to embed it. E.g., on Youtube: you hit \u201cshare\u201d and select \u201cembed\u201d (cut & paste the hmtl code into your passage]\u2026<\/strong><\/p>\n\n\n\n
The code to enter for a video (that you are hosting) is similar to what you use for an image:<\/p>\n\n\n\n
<video src=”the URL of your video” width=”640″ height=”480″> <\/video><\/p>\n\n\n\n
There are a lot more options for customizing how your video appears \u2013 try this HTMl5Rocks article<\/a> for details.<\/p>\n\n\n\n
Adding Sound Effects and Music<\/h3>\n\n\n\n
The code to add a basic sound effect (Harlow, default) looks like this. This would go in the passage where you want the sound to start…<\/p>\n\n\n\n
<audio src=\"http:\/\/www.seriousplaylab.com\/twine20\/twinesound.mp3\" autoplay><\/pre>\n\n\n\n
The autoplay attribute causes it to play as soon as the passage it is in is displayed.<\/p>\n\n\n\n
However before you can make this work<\/strong>, you need to do some Java work: Go to the Edit Java Script editor.<\/strong> Add the following code, but substitute my audio URL for the audio URL you would like to use.<\/p>\n\n\n\n
var audio = document.createElement('audio');<\/strong>\naudio.scr = <\/strong>\n'http:\/\/www.seriousplaylab.com\/twine20\/twinesound.mp3';<\/strong>\naudio.loop = true;<\/strong>\naudio.play();<\/strong><\/pre>\n\n\n\n
\n\n\n\n\n\nFor multiple audio pieces with your Twine, see following example: \n<\/strong><\/pre>\n\n\n\n
\n\n\n\n{\nvar audio = document.createElement('audio');\naudio.scr = \n 'http:\/\/www.seriousplaylab.com\/twine20\/twinesound.mp3';\naudio.loop = true;\naudio.play();\n}\n\n{\nvar audio = document.createElement('audio');\naudio.scr = \n 'http:\/\/www.seriousplaylab.com\/twine20\/eurorack2.wav';\naudio.loop = true;\naudio.play();\n}\n<\/strong><\/pre>\n\n\n\nCreate\/Edit your Soundtrack or Sound Effects of Passage Voice-Work<\/strong><\/p>\n\n\n\n
I saved this file as an MP3 and uploaded to my site (or googledrive etc). Garage Band. <\/strong><\/p>\n\n\n\n
![\"\"](\"http:\/\/seriousplaylab.com\/courses\/3610b\/wp-content\/uploads\/2019\/10\/Screen-Shot-2019-10-23-at-4.12.00-PM-1024x640.png\")
<\/a><\/figure>\n\n\n\nI saved this file as an MP3 and uploaded to my site (or googledrive etc). Audacity<\/strong>.<\/p>\n\n\n\n
![\"\"](\"http:\/\/seriousplaylab.com\/courses\/3610b\/wp-content\/uploads\/2019\/10\/Screen-Shot-2019-10-23-at-4.13.56-PM-1024x594.png\")
<\/a><\/figure>\n\n\n\nHow to Format Text<\/h2>\n\n\n\n
You’ll notice that there aren’t buttons to add bold or italic styles to your text in Twine, like in a word processor. Instead, Twine story formats use special characters to convey style information. The special characters you type are changed into styles when you play or test your story.<\/p>\n\n\n\n
The fastest way to see how what you enter will be interpreted as a style is by using the Test From Here<\/strong> item in the passage menu<\/a>.<\/p>\n\n\n\n
The exact characters to enter depend on which story format you’re using. <\/strong> Harlowe<\/strong> (the default one) and Snowman<\/strong> both use Markdown<\/a>, a commonly-used set of formatting instructions. SugarCube<\/strong> instead uses a convention similar to what’s used on Wikipedia 1)<\/a><\/sup>.<\/p>\n\n\n\n
![\"\"](\"http:\/\/seriousplaylab.com\/courses\/3610b\/wp-content\/uploads\/2019\/10\/font.png\")
<\/a><\/figure>\n\n\n\n![\"\"](\"http:\/\/seriousplaylab.com\/courses\/3610b\/wp-content\/uploads\/2019\/10\/css.png\")
<\/a><\/figure>\n\n\n\n![\"\"](\"https:\/\/seriousplaylab.com\/courses\/edu5863\/wp-content\/uploads\/2021\/03\/cats-1024x1024.jpg\")
<\/a><\/figure>\n","protected":false},"excerpt":{"rendered":"