exercises-style

Browser lacks capabilities required to play.

Upgrade or switch to another browser.

Loading…

<h1> Exercises in Style</h1> This activity is based on Matt Madden's book 99 Ways to Tell a Story: Exercises in Style, and also Stacey Mason + Mark Bernstein's On Links: Exercises in Style, and borrows [[text and images]] from Scott Mccloud's Understanding Comics. For each of the macros, expressions, CSS and HTML techniques below you'll find a an example to demonstrate and guide alternate ways of composing the scene linked above. Work individually or with a partner to select and combine these options to construct a version of the scene linked above. Use multiple passages and a variety of these different techniques in combination with [[the provided text and images|text and images]]. The goal of this activity is to work with these novel Twine-based storytelling tools to expand the expressive value of text and image alone. Note: you can add on to the provided text a bit as useful, but the primary focus should be getting familiar with these Twine methods. Access the coding/formatting directly -- Save this Twine --right-click, or ctrl-click to Save As -- import the downloaded HTML file into twinery.org to then copy/paste the code and then directly modify for your storytelling needs: <ul> <li>[[Cycle]]</li> <li>[[Cycle with Images]]</li> <li>[[Type]]</li> <li>[[Link Append]]</li> <li>[[Link Prepend]]</li> <li>[[Countdown Timer]]</li> <li>[[Timed]]</li> <li>[[Timed Replace]]</li> <li>[[GoTo Nested with Timed|GoTo]]</li> <li>[[Either]]</li> <li>[[Invisible]]</li> <li>[[Change Color of Select Words]]</li> <li>[[Mouseover interaction]]</li> </ul>

Use CYCLE to invite expressive choice from the reader. As Clara Fernandez-Vara suggests "This kind of choice doesn't really have consequences in the system, but it makes the players feel like they're in control and they can be themselves." Example: You're hungry. Visions of <<cycle "$answer" autoselect>> <<option "sandwiches">> <<option "ice cream">> <<option "granola bars">> <<option "salads">> <<option "pizza">> <</cycle>> dance in your head [[index]]

Either - Refresh browser tab to see other outcomes. Use EITHER to randomize outcomes for the reader. Example: I'll stop in the store to pick up some <<print either("ice cream", "dinner", "coffee", "soup", "cigarettes","lottery tickets", "bubblegum", "batteries", "an umbrella")>> [[index]]

<<set $seconds to 10>>\ The Store Closes Soon: $seconds seconds remaining!\ <<silently>> <<repeat 1s>> <<set $seconds to $seconds - 1>> <<if $seconds gt 0>> <<replace "#countdown">>$seconds seconds remaining<</replace>> <<else>> <<replace "#countdown">>Closed!<</replace>> <<stop>> <</if>> <</repeat>> <</silently>> [[index]]

Simulating a typewriter. One way of pacing arrival of text on the screen. Change the number next to "type" in milliseconds (ms). You can also add a delayed start <<type 40ms>> I walked across the street. <</type>> <<type 40ms start 2s>> I walked across the street, more slowly. <</type>> [[index]]

Link Append -- single use link adds text after keyword. Use this to invite/provoke further participation from reader to advance the story Example You look into the <<linkappend "street" t8n>>, cars zoom by you. <</linkappend>> [[index]]

goto macro goes to indicated passage as soon as Twine encounters it. Nesting a goto within a timed macro allows you to introduce a delay. In example below there is a 15 second delay before the goto macro is activated. I've added Counter for visual reference <<timed 15s>><<goto "index">><</timed>> <<set $seconds to 15>>\ The Store Closes Soon: $seconds seconds remaining!\ <<silently>> <<repeat 1s>> <<set $seconds to $seconds - 1>> <<if $seconds gt 0>> <<replace "#countdown">>$seconds seconds remaining<</replace>> <<else>> <<replace "#countdown">>Too Late<</replace>> <<stop>> <</if>> <</repeat>> <</silently>>

The following text [[is made invisible|index]] with changes in the Stylesheet (and tags)

Link Prepend -- single use link adds text before keyword. Use this reveal new insight into characters or circumstances Example: You <<linkprepend "love" t8n>> actually do not <</linkprepend>> when it rains! [[index]]

Delay display of text in 2 second intervals three times (at: 2s, 4s, 6s) <<timed 2s>>Oh No... <<next>>It's... <<next>>Raining! <<next>> You can also do this with images, use the Twine image formatting found on [[this page|text and images]] instead of text. <</timed>> [[index]]

Replace text after 7 seconds: I prefer rainy weather\ <<timed 7s>><<replace "#rainy">>[[sunny|index]] <</replace>><</timed>>

This HTML Span tag allows you to change the color of a specific part of a sentence: Example: The clerk gave me a creepy look [[index]]

Use CYCLE with images to introduce visual or hybrid visual/text-based modes of storytelling. Follow the option formatting to introduce text and/or image that can be cycled through. Conclude with a linked text or image if you want to advance to a new passage <<cycle "$answer" autoselect>> <<option "Heading home after work">> <<option "[img[https://clogosphere.neocities.org/if/mccloud/panel_1.png]]">> <<option "[img[https://clogosphere.neocities.org/if/mccloud/panel_4.png]]">> <<option "[img[https://clogosphere.neocities.org/if/mccloud/panel_3.png][index]]">> <</cycle>>

Below is the text and images to use for this Exercises in Style activity. Once you save this Twine and import it into twinery.org you'll see the formatting and URLs of the images. You can also select and copy the text. Return to [[index]] TEXT: <h2>I crossed the street to the convenience store. The rain soaked my boots. I found the last pint of chocolate chip in the freezer. The clerk tried to pick me up. I said, “No thanks." He gave me this creepy look. I went back to the apartment, and finished it all in one hour. Alone at last.</h2> IMAGES: [img[https://clogosphere.neocities.org/if/mccloud/panel_1.png]] [img[https://clogosphere.neocities.org/if/mccloud/panel_2.png]] [img[https://clogosphere.neocities.org/if/mccloud/panel_3.png]] [img[https://clogosphere.neocities.org/if/mccloud/panel_4.png]] [img[https://clogosphere.neocities.org/if/mccloud/panel_5.png]]

Mouseover interaction allows some fun alternative to a mouse click. When you roll your mouse over the text below you'll see it reveals text. Paired with a goto macro it will 'go to' another passage when you move the mouse away from the text. This is a Custom Macro designed by a Twine genius known as Chapel. To get this to work, it requires both what is behind-the-scenes below AND the javascript. To copy/paste the javascript code go to the Story Tab > Javascript then select copy that into the javascript tab on your own Twine. Note: the "destroy UIBar" that gets rid of the sidebar in Sugarcube is also in the Javascript Example <<mouseover>> <<link "hover the mouse over this">><</link>> <<onmousein>> <<replace '#tooltip'>>and now when you move the mouse away - it will go back to the index<</replace>> <<onmouseout>> <<replace '#tooltip'>><</replace>> <<goto "index">> <</mouseover>> @@#tooltip;@@ [[index]]