Create interactive stories for children using Twine | Two Tale Tellers | Skillshare

Create interactive stories for children using Twine

Two Tale Tellers, Using words and images to tell stories

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
10 Lessons (40m)
    • 1. Introduction

      2:21
    • 2. Thinking about the story

      4:45
    • 3. Brief introduction to Twine

      7:22
    • 4. Structuring the story — Act 1: Setup

      4:20
    • 5. Structuring the story — Act 2: Confrontation

      2:46
    • 6. Structuring the story — Act 3: Resolution

      3:00
    • 7. Adding basic content — Images, videos and music

      6:20
    • 8. Export and test the story

      2:02
    • 9. Some extra tricks to format your story

      6:34
    • 10. Farewell

      0:43

About This Class

Learn how to create interactive stories using Twine, to transmit messages or ideas through playful narrative experiences.

In this class you will learn to:

  • Write stories using the three-acts method.
  • Use the essential options of Twine, a free tool designed to create written interactive stories (game books).
  • Export your stories so that any reader can enjoy them in a browser.
  • Blend your narrative skills and technology to provide stories that transmit ideas and teach important concepts.

And it will be especially interesting for:

  • Writers who wish to deepen another way of telling stories.
  • People in charge of children —parents, grandparents, teachers, etc— who want to explore a different way of telling stories and transmitting knowledge.
  • Illustrators or artists who want to build interactive stories around their own work.
  • And, of course, any creative person wanting to learn new things.

It's proven that learning is better acquired by doing than by listening, by questioning more than accepting, by having fun instead of being bored. In short: by getting involved in it. This is why interactive tools are so good for transmitting messages and favoring learning, because they grant the student the possibility to participate, decide and analyze instead of simply accept and listen.

Twine is one of these tools. Multi-purpose and easy to learn and use. It can serve several purposes but for us, the most relevant one is to make it possible for children and adults to learn by playing.

So what we propose in this class is to try this way of communication if you haven't done it before. You will mix literary creation, images, music and technology so that your listeners can, not only hear the message you want to convey, but they can live it.

At the end of the class you will have created an interactive text-based story for children that you can read and play with them in any browser.

 

My name is María Carmen Latorre and I’m the 50% of Two Tale Tellers. My passion has always been to tell stories, so I’ve spent my whole life doing it in different areas and formats. From literary fiction writing stories, novels or game books, to storytelling and copywriting for advertising. I’ve also been the instructor of workshops focused on the therapeutic power of literary creation.

You can also find me on Instagram as @twotaletellers. Let's be connected there!

Music used in this class:

'Midnight Tale' by Kevin MacLeod (License CC BY) / via Filmmusic.io

Transcripts

1. Introduction: Have you ever tried to explain something to a child and you haven't been able to do it in a simple and enjoyable wait, let's try to do it through an interactive narrative. Interpretive stories attract Children, and through them we can communicate messages, explain subjects and tell stories in a fun and enjoyable way. Hello, I am Maria. I'm a storyteller. And some years ago I grow three game books, and I felt in love with all the possibilities that the interrogative stories can offer. In this class, we will explore one of them. We will create a funny, interactive text based a story with a clear message aimed to Children. First of all, we will think about the foundations off the story, the theme, which is the message that we want to communicate the Children, the characters off the story, the protagonists and agonies who are day, how their lives are under plot or defense that will confirm the story. Based on this information, we will think a structure on right or interactive narrative using trying ah free software especially designed for creating this kind of stories. Don't worry. If you have never used one before. It's a very easy and intuitive software and underscores I will give you the basics to use it. Final project. We're closest on creating your own Inter to the story and having ready for your future readers do. You don't need previous experience right in the stories or using time to take this class for this class. You will need a notebook or a word processor to develop the idea off your story, such as work or the one you prefer trying and some Buswell resources in cast. You will use it for your story as pictures, music and video if you are a creative person, opened Explorer different ways to tell the stories. This class may be interesting for you if this sounds good to you and see you in. 2. Thinking about the story: So let's think about the three pillars off our story. Lithium, the protagonist under plot. The first thing we need to do is choose the theme off our story. So let's think about what we want to transmit to Children in general. Or in particular, if you have something specific in mind, you can write down a list off interest, like respect for the nature of being kind to people helping friends and choose one. Or you can extract it from a situation that you have life or seen, or that someone told you before. For this class, I'm using a situation that a friend of mine told me about. My story will be based on the relationship between March and Charlie, my friends, nephews. They are seeks on three years old. They're brothers, and when they play together, everything ends up in tears. My friend thinks that Matt cannot stand Charlie because he pictures him as his enemy. So what we want to show man with our story is that his little brother could be his best adventure partner. Instead of giving them a talk, Thea, others have decided to show or part of you to Matt with an interactive and funny story in which the two brothers have to team up, make decisions together and overcome challenges. Yes, they will be the protagonist. Moreover, Children that age love being the protagonist of the story. In my case, these Children how to find the subject. But if you have to find it without having someone a specific toe home director story in mind, it's time for you to do so. It's important that you have someone in mind as profiled this possible because you won't treat the subject equally as a story for an eight year old child than for a teenager. Some possibilities to think about Children you know on how you tell them the story yourself as a child. Tell the story to your 20 years ago sale, creating a small file about the ideal child. You like to tell this story to right down, deliver on things such as age, family, environment tasters, Harvey's needs. Harry's a short example based on Met. In addition to their personal characteristics, you can also take into account their interest according to their age. If you added to your file, you have very useful information when deciding how you're going to deal with the topic and build in your story. You can find this information on a text file at the gullible resources area off the class. So now that we have the protagonist, Martin Charlie on the CME, the benefits off join forces and being a team along with your brother, let's think about the plot. At this point, we know that this will be an adventure story, but now we have to decide what kind of adventure they're going to live. This could be a space of Venter, one of the deep sea in the jungle, Many places and times so division that we make the right choice on the theme will be engaging for the gates. We have to choose one day low in this case there. Uncle told me that Matt is obsessed with medieval times. So we decided that our story will be based on the efforts off the two brothers to free a castle from the three off a terrible wizard. The kingdom needs them a. To this age, they love riddles. So we decide that the fight against the wizard will be an intelligence challenge. The wizard We provide the obstacles that they'll have to solve together to win. And now that you have a story and a purpose in mind, you need something that allows you to transform this into an interactive pace. This something is trying. So in the next video, we'll see the basics off the tool so you can to stop built in your interpretive a story right now, okay? 3. Brief introduction to Twine: think of this video as a very condensed trying tutorial. It's quite technical but necessary to create a project. So cheer up. By the way, if you already know trying, you can escape this video and go straight to be your number three. Trying is an open source, a storytelling toe for interactive fiction. It was created by Chris Climates and uses HTML CSS JavaScript and mark down codes to great stories. But don't worry. If you are not familiarized with this languages in this class, I will give you all the coat so you can copy and paste to use it them right away. Trying offers many possibilities, but in this class we won't explore all off them. We will use only the ones we need to make a basic book that effectively communicates the story on the message, which is that said below this video. You will find resources on tutorials to dip in more into the usage off this program. Just start using it. We will go to china. T dot r. We have the option to download the program for free or use an online version for this class . I will use an in stale Burson which allows to save progress locally after, in Stale in the software, a small tutorial with some basic informations appear. First, I'm going to change the language here. Let's see the Hump Options archive. It will compile on HTM and document with all the stories that you're working in. It will be named by default with the day and the hour off the saving, but you can change it if you want. Four months, it allows you change the former off your story. I recommend you to take one off the latest form. It's because not all off them support the same way JavaScript and CSS code, and we will need them to form of our story. Import from file to import an existing document. A sir an example. I'm going to import a story that I'm grating for this class. Inside the file. There's more than one story, so I select the right want to open it. This is how my story looks like with all its notes or passengers on the bottom left, we confined the CSS and JavaScript editors Thea option for renaming our story option for selecting all the notes or passages off the story at the same time. Story of statistics. The information about broken links is especially interesting. A quick find feel where we can write a word and trying will highlight in Jell O, the pastures where these words appears. Find under place. Option the Diesel Ization Options Way in the lower right menu. You'll find interesting buttons for previewing the story and to tested. In order to control how everything is working, you will have the same experience. The reader we have with this green button don't write. You can create an independent note or passage. You can switch from light to dark mode. Now we're going to create a new project. We will write a provisional title. You can change it later, and in the first screen the fierce passage off note off the story will appear. If we enter to check, this note will see that it has different fields. One for the name of the note. Another one toe attacks on one less to write the content off the note. Okay, after great in the text, we need to have the final possible decisions that the reader or listener must take to continue the story way need to add the links to the next passengers. So we do this right in they down into to a square. Brackets like this thesis are marked down symbols because in the passages or notes, we will use markdown. By doing that, trying will automatically create two new notes linked to this fierce one if they didn't exist before. If you want to change the title off a passage, a road with always in the passage in order to change it automatically in the rest off the passengers linking to it. Do you see the rocket? This is where your story begins for now, but you can change it later in case you need it. I noticed that the titles off this new passages are the text that you have writing inside the scar brackets. If you want another title to appear, you have two great down. Something like that. The text at the right will be the title off the next note, and in case that you want to link a passage that already exist, but you don't want to call it by its name, you can write this down. Checks on the left is what the reader will see. Under part on the right is a really link, another to know the basics off the tool. Let's create the story 4. Structuring the story — Act 1: Setup: the three actor structure is the most used to write the stories for Children because it's very effective. So this is the structure that we're going to use. Let's start with the first part off at one next position where we have to explain who are protagonists are where they are, on how the lights are. Matt and Charlie are princes off the prosperous mountain kingdom. They leave happily in the castle with older family. Now we're going to add the inciting incident that blows their happy life away. One day they were playing at the garden and something strange happened. A wall of darkness hovered over the castle and shot the family insight. They didn't know what was happening until dark shadow, a terrible desert appeared laughing like a madman, Huh? Gasol is mine. And you, Martin Charlie, will be, too. The wizard took their he's warned and pointed Charlie with it. Well, in this situation, what is not going to do now? Remember that trying allows you to create textural interactive stories so you can provide options to continue a generation, depending on your choices. The time for the first choices house come. Not can one run away to save his own life, to throw a stone to the wizard in the ice to destruct him so Charlie can escape. Three. He can put himself in front of Charlie in order to protect his leader brother. Good. If we put all this information in Tine, that's what we have. Our first note linked toe our 1st 3 possibilities way we're going to continue our history. Decided what will be the results off taking every decision if they take this issue one that we serve the witches Charlie and turns him into henchman power off the Wizard crows and spreads throughout the kingdom. Matt leaves all his life in a cave, trying not to be discovered and without seeing the sunlight again. This is the end if they take decision to Matt Lines of research for a few moments. Enough time for the two brothers to escape and find shelter in a near forest. But the wizard is very powerful and finds them month faces a desert and the Batman, impressed by the kits for Avery on defending his brother, the sites to give them an opportunity to safer lives and the kingdom either you to an intelligence challenge If you win, I will release the castle and leave the kingdom forever more. But if I win, I will take everything from this land, including the both of you. What are you going to do? Do you accept the fight or you prefer to die right now? If they take Decision three, my face is that we serve And the Batman impressed by the Kage bravery on defending his brother the sites to give them on opportunity to save their lives on their kingdom. I third Utahn intelligence challenge. If you win, I will release the Castle elite. The kingdom forever more. But if I win, I will take everything from this land, including the both of you. What are you going to do? Do you accept the fight or you prefer to die right now? Yes. Here they are the next options. A step by step. We're creating the story. If they decide not to fight the Wizard, they will find their own death on the end off the story. But if they accept the fight and that's what we are expecting, they do the story with a bends to the next level where the two brothers will have to overcome obstacles, find solutions on answer riddles in order to save their home on love ones through the confrontation or act to. They will see how important and funny is teamwork, instead off fighting each other. So now let's think and write the confrontation. 5. Structuring the story — Act 2: Confrontation: so the fight is about to begin. But what exactly will the story be like? It's time to the find a game. The wizard challenged them to an intelligence challenge. So we think that using tests and riddles that the brothers will have to answer enduring forces will be fine. Every answer will lead them to another question. Until the end of the story. About four or six notes would be a good number. The test can be off many types, for example, trivia questions about their family or things they share. Popular readers are some of specific ones about themselves. Like what is Charlie's poverty, animal finding objects or difference between objects or photos solving Buswell riddles like Macy's change. Get your information. For example, What is the number off fief off the two brothers together? Empirical exploration. They have to do something together. Toe. Have the solution to a problem on experiment. A small game messing decision options. They have to decide between two former options. If the answers are not correct, they will lead them to a note where they have to decide between even up so they lose the battle on the story ends or trying again to return to the previous option. If the answer is correct, it will get them to the next read. Oh, they will be answer in riddles on overcoming challenges until a plot point in the story arrives on Day will have to face a major enemy in our story. This will happen when the wizard, tired of being defeat again and again, loses his patients and putting to play his most powerful beast, the drug alone, to defeat this mythical enemy. They must work together. If they don't defeat the dragon, it will take them to a passage that will give them the option off except in their defeat and end the game or tried again. At this point, we can give them a maximum off atoms or not is your choice. When data feed the dragon, they earn it as an ally. They will need it to face what is coming Now. The resolution off the story 6. Structuring the story — Act 3: Resolution: But with fight is coming to an end, it's time for the resolution. With a dragon by the kids side, the wizard retires to the hurt off the castle in order to prepare the last confrontation or heroes much and Charlie go after him. The climax of the story is near. In this battle, the two brothers will have to release their family that mom Grandparent's on duck. But how? Okay, let's think about how they could do it. A state buster way Need. This bottle will be epic because it's the last one. And we have to make the theme especially relevant at this point. So the obstacles to overcome have to be more personal, more retailed to their love ones. That's it. They have to answer personal questions about their family questions that may be only one off them really knows. It's time to make it a little more difficult. If they give a ground answer, they lose a vitality potion, but they have the chance to answer again. The question. It's interesting at this point to give more than two options in response. If they give the right answer, the wizard will receive damage. They'll win of Italy portion and release their relative. After that, they will have the option to go and save the next person. When everybody is released, they will be directed to a note where they could find the final reader the most difficult of all. A reader about Charlie that Matt has to answer alone. He has the opportunity to demonstrate that knows his Avenger partner better than everybody thinks Right answer will get them to a note where they could find the end of the story. The princess, who had worked so well together as a team and saved the kingdom, are convict aerated as a hero's off their land, and they all will live happily forever after. 7. Adding basic content — Images, videos and music: Now it's time to add some resources to our story to make it more visually funny and attractive to Children. In this lesson, we're going to add images, video on backroom music to the passages using HTML coat. You have all the coats and links off all lessons in a text document attached to the down level contents off the scores before starting to calm privations. First mixture that you're using at least the Harlow 201 or 124 a story for months because if you use other options, maybe some of these actions will not work. Second, host all your content photos, videos and music online. Why? Well, to simplify and avoid broken links. No days we'll have Internet connection in our devices. And when we read our story, the images will be don't not perfectly from a place on the Web. But if you have all the content looking and you copy your game book to an external device or you decide toe uploaded to the Web, there will be broken links and problems. Some places where you can upload it are the public folder off your dropbox account. All the gallery of your block off free website. Once you have done it, you just have to call the images, writes in the specific coat and wrote directly at the body off the passage. For example, copy this piece of code. Go back to trying and paste it in the passage. Copy the link off the image that you have previously upload to your website, dropbox or any other service and paste it here. As you can see, the image is now visible in the story, but for the moment, it doesn't re scale as the text us use this code before called the image and the image will a lot on Driscoll are the Broza. Copy this piece of code, Go back to twine and paste it in the passage. Now, as you can see the image re skills perfectly. And if you like to put an external link to the image, it will be like this. Replace the link by the rial one. And now the image links to an external web off your choice at a video host on a network in services such a studio, you only have to copy telling that the service provides you something like this. Go to the video injury to click on the share button and then on the M but icon, you'll find a piece of code selected, copied. Don't go back to trying and paste it. Now you have a video embed in your story to call it from your website. You can use the same code but changing the address for the video on the with and hate values for the right ones. Let's see how to do it with an example. Here, you can find the week on hate values that you can change depending on your needs. Here's Joe Self Coast video aided to your story, and if you want to add a background mystery music or a creepy message, you have to go to edit a story, have a scrip and use this code. Let's see how to do it with an example. First of all, go find the music you want to use incompetent. That film music that I owe is a good place to find quality music. Under Creative Commons licenses, I upload the music file to your hosting. Once the music file is upload and working, copy its link and use it instead off the provide one as an example. Now copy the phone piece of code. Go back to Tine and access the edit. The story. Have a scrip option based it here. Test. If it has work, you'll have to export the story and test it in the browser. I noticed that the latest persons off some roses, like Google, Chrome or Firefox, will not allow out of play sound, and you will not be able to listen to music when you open the fire. The solution is to allow the permissions for how to play sound, close the browser and open it again. And that's all play and enjoy improving jury story. 8. Export and test the story: Let's see how to export and test your story. Once it's finished, click on the name off your story in the left down corner off the screen and select the option polish to file. Select where you want to save the file. As you know, it will be an each time a file that you can open in any ROSER. Open the certify in the browser off your choice and navigate through the whole story without leaving any link to test that everything is OK if you find some error right down to fix it later, once you have finished to check the story, go back to the original file, opened in twine, make changes on export and shake it again repeated until you are sure that everything is OK . Finally did it. Congratulations. Now just enjoy with your kids. Your fist. Interrogative the story in time 9. Some extra tricks to format your story: is a software that gives you a lot of possibilities in this class. We've seen the ones that were interesting for us. But in case that you want to go a little farther formatting the story here you have some extra tricks that I find interesting changed that the full phoned for a Google phoned. It's a good idea, especially if Children cannot read well, that the power feed that the parents by default on the screen. Or if you simply want to change the found first, go to the Google Fonts Page and choose the phone that you want to use. Select the phones, click a dim port up and copy the short code. Go back to twine and go to the left down menu. Select. Edit the story. Styx Shit. This is the C. S s editor and passed it here. Now that we have the route to the phone, we can specify in what kind off next. We want to use it in order to change. The general phoned off the story used this piece of code so select copy. Go back to the CSS editor into line and paste it Now. Copy the name off the phones and replace it on the editor. Here. You can see how the genital phones off. The story has changed. Now you might think you want to change the phone in some paragraphs. Copy this piece of coat. Go back to trying and paste it in the store. Write the name off the phone and then you have to at the paragraph. Tax on the passage takes. You want to change? Here, you can see how only apart off the text has changed. Way can repeat this process. Toe alter the hitter phoned. Copy the cold paced ease into trying. Editor, change the name off the phone on at the necessary. Either talk and this is the result. If you need to change the link colors, you can use this coat. I'm afraid I don't know how to change the color off the visited links for now, but I will tell you if I know how to do it in the future. To change the color in size After phoned, you can add disposables. The coat well look like this and this is the result. Now let's see how to change the background off this passengers to cover the background with a flat color used this code. In case that you want to use the X cold for colors, you can find them in webs like HTML color codes that come put a background image that is cost on the Web used isco to call it. Copy the link off the image that you have previously upload to your website, dropbox or any other service and paste it here. And if you need to adjust it, you can change these values. Finally, if you want to know more about go, you can find more HTML and CSS code options on the way and in a skill share. I recommend you the class foundations, the Beginner's Guide Toe HD email by Joe Memories. And if you want to continue investigating the possibilities off twine and adding improvements to your a story, I recommend you busy the duty of channel Digital exposure TV and visit Ellison Paris tutorial at the 20 dot arc page for more fantastic resources on telling the stories. I recommend you the skills, your class cost or Italian ones there. One character conflict contacts and craft by Daniel Castle there, and you can take a look to our class interesting character design to develop ideas for creating unconventional characters. Your teacher will be Row Hill, who created all administrations for our modern Charlie story in this class and now time for a fair will. 10. Farewell: Hey, you feel is a class. Now you have your first fantastic interactive history in your brochure. Congratulations. Please share your project so all of us can enjoy. We love to read it. I hope you enjoy all the process and found new ways and tools to expand your creativity. That will make me very happy. So many. Thanks for having taken this class and see you in the next one. Soon main Lots off. Good vibes and creativity be with you.