User Tools

Site Tools


twine2:add_an_image_movie_sound_effect_or_music

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revision Previous revision
Next revision
Previous revision
twine2:add_an_image_movie_sound_effect_or_music [2015/04/03 13:34]
nicolem
twine2:add_an_image_movie_sound_effect_or_music [2017/10/09 20:39] (current)
Line 1: Line 1:
-===== Twine 2: Add an Image, Movie, Sound Effect, or Music =====+===== Add an Image, Movie, Sound Effect, or Music =====
  
 +Twine 2 doesn'​t currently have the ability to embed multimedia into your story. If you'd like to create something that makes heavy use of images, sound, or movies, you may want to stick to Twine 1 for now. But that's not to say that you can't use these things in your story! For now, you'll need to store them elsewhere -- whether it's on a web site you control, or a service you use like Dropbox -- and put references to them in your story.
  
-==== How to add a movie or video====+<WRAP important>​ 
 +If you are using relative links for your multimedia, you will need to publish your story to the correct location on your computer so that the references point to the right place. If you have an image tag whose source property is "​myimage.jpeg",​ for example, then your published file must be placed in the same folder as the file myimage.jpeg. [[https://​developer.mozilla.org/​en-US/​Learn/​Understanding_URLs#​Absolute_URLs_vs_relative_URLs|Learn more about relative links]]
  
-These should work regardless of story format.+If you are using relative links, testing or playing your story inside Twine will unfortunately not work. 
 +</​WRAP>​
  
-Your video may fall into one of the following categories: +<WRAP info> 
-  - Self-hosted video: There is a video file on your computer ​or in a directory ​on a webserver+Hotlinking, or using a resource on someone else's server without their permission, ​is a bad idea. Not only is it freeloading ​on someone else's bandwidth, but the media could go away at any time -- or be replaced by an angry owner with something you weren'​t expecting! 
-  - Hosted ​video: YouTubeVimeo, ​etc. This is your easiest ​option+</​WRAP>​ 
-    - From [[https://​support.google.com/​youtube/​answer/​171780?hl=en|YouTube'​s help page]]+==== Adding an Image ==== 
-      - //Click the Share link under the video. + 
-      - Click the Embed link. +Once you know what your image'​s URL is, having it display ​in your story is as simple as entering the correct HTML code to show up: 
-      - Copy the code provided in the expanded box. + 
-      - Paste the code into your blog or website.//  +<code html> 
-    - From [[https://​vimeo.com/​help/​faq/​sharing-videos/​embedding-videos|Vimeo'​s help page]]: +<img src="​the URL of your image" width="​500"​ height="​300"​ alt="​Two foxes">​ 
-      ​- ​//Go to the video page and click the Share button ​that appears ​when you hover your mouse over the video player+</​code>​ 
-      In the pop-up windowyou'll see field containing embed code for the videoJust copy the magic code and paste it into your website or blogging softwareInstant hotness.// + 
-  ​[[http://www.glorioustrainwrecks.com/node/5475|Using Twine 1.x]], several authors have created stories that make use of hosted videos as soundtracks. Crafty! (If you have done this in Twine 2, please explain how for Sugarcube and Harlowe.)+The width and height part of the code control the size of your image on the page. If you leave them off, then it will display the image in the dimensions as you saved it
 +==== Adding a Video ==== 
 + 
 +The code to enter for a video is similar to what you use for an image: 
 + 
 +<code html> 
 +<video src="​the URL of your video" width="​640"​ height="​480">​ 
 +</​video>​ 
 +</​code>​ 
 + 
 +There are a lot more options for customizing how your video appears -- try this [[http://​www.html5rocks.com/​en/​tutorials/​video/​basics/​|HTMl5Rocks article]] for details. 
 + 
 +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 [[https://​support.google.com/​youtube/​answer/​171780|YouTube'​s help]] ​and [[https://​vimeo.com/​help/​faq/​sharing-videos/​embedding-videos|Vimeo'​s help]] ​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. 
 + 
 +==== Adding Sound Effects and Music ==== 
 + 
 +The code to add a basic sound effect looks like this
 + 
 +<​code>​ 
 +<audio src="​the URL of your sound effect"​ autoplay>​ 
 +</code> 
 + 
 +The autoplay attribute causes it to play as soon as the passage it is in is displayed. 
 + 
 +That said, SugarCube has features that make using audio much simpler, ​and also allow for music. If you use the code above, you'll find that any music ends as soon as the reader navigates to another passage, which is probably not what you'd like to have happen. There are two steps to using audio in SugarCube. First, you'll need to cache it. Caching it allows the browser to load your audio ahead of time, so that there isn't a delay when you ask it to be played. It also allows you to give each sound effect or piece of music a short name to make  
 + 
 +<​code>​ 
 +<<​cacheaudio "​door-opens"​ "the URL of your sound effect">>​ 
 +</​code>​ 
 + 
 +The best place to cache audio is right at the start of your storyOn a later passage, playing a sound effect is as simple as writing: 
 + 
 +<​code>​ 
 +<<​audio "door-opens">>​ 
 +</​code>​ 
 + 
 +There are many other options that let you fade in and out sounds, play multiple at the same timeand even move to another passage when sound effect finishes. For more information,​ see the [[http://​www.motoslave.net/​sugarcube/​docs/​macros.html#​macrocat-audio|Audio section of the SugarCube macro documentation]]. 
 + 
 +==== External Resources ==== 
 + 
 +  * DJ White created a library called Twine Audio for incorporating narration ​into Twine storiesIt only works on Chrome and Opera browsers, howeverThe original web site //twineaudio dot com// seems to currently point to spam sites. 
 +  ​* Dan Cox has published a [[https://www.youtube.com/watch?​v=zRxuFK2ukrw|tutorial video]] on adding images with the SugarCube story format.
twine2/add_an_image_movie_sound_effect_or_music.1428082477.txt.gz · Last modified: 2017/10/09 20:38 (external edit)