How to Create a Click-Through Interactive Using Twine

Hello everyone, my name is Val, and I created a click-through interactive using Twine for the first time, focusing on bringing awareness to executive dysfunction.

Twine is an open-source tool for creating non-linear stories, where code can be used but not required for something you want to be brought to life. Beginning this, I had very limited knowledge for how Twine worked, so a lot of my time was spent watching YouTube tutorials, searching up "how to _____ in Twine", and more. In terms of code, I had limited HTML/CSS/JavaScript knowledge, as well as some experience working in painting software (Medibang Paint in this case).

Below is my "tutorial" for how a Twine interactive can be made, but I formatted it as more of the steps I took to create my own interactive. It is also good to note that I work very nonlinearly and often had to go back to certain steps, information, etc. to make my project look more like what I aspired it to be.

These are the steps I took for my beginner project!!

Laptop

Twine (Browser Version/App Version)

Flexibility

Patience

What do I want each screen of the interactive to look like?

What does the code I need for the interactive look like / how is it implemented?

What other steps do I need to remember?

As you can probably tell, my prototype sketch of the screens was never fully completed, and I think that's totally okay. As you complete this step, you will realize that this is time-consuming and cut out aspects that you simply will not get to.

For me, I had to recognize my very LIMITED coding experience, making certain functions very hard to make, and adjusting to that.

(Images; Google searches, unfinished prototype sketches, running notes @ phone)

What visuals do I need to include in the interactive?

What is the order of the text / animations / storyline?

I based the interactive on the images in my head, so the visuals were made first...quite a few of them. Understanding how the images aligned next to one another helped me with other things later on, such as the order of the passages and so on.

(Images; example of list of visuals needed to be drawn, working screen @ Medibang paint, file folder for visuals)

How do I use Twine?

The best answer I can give you...spend time in the program. Click on each button in the workspace, Google it, click on it again and use it within a passage. If something doesn't work, delete it and try it a different way.

Half of my project was me taking a breather before things worked out. Have patience with yourself, stay flexible, and have fun.

(Images; starting workspace (2 hours into work), picture of testing screen, picture of passage in progress)

How do I keep going?

While you are working, put on music, put on a show, search up what you are confused about, because there is most likely an answer for your question somewhere. Take frequent breaks and don't give yourself a headache over a project that is supposed to be fun.

After I was done with the passages AKA the whole story, including inserting visuals, adding transitions, and aligned code, I figured out background sound by searching up multiple tutorials.

You are done with the project when you say you are done with the project. Well done!

(Images; Twine workspace (finished project version), Harlowe audio tutorial for Twine)

HAVE A GOOD DAY!