Interactive Storytelling

Imagine you want to tell an interactive story. Perhaps an illustrated, interactive storybook where a visitor's choices have consequences. You know how to make illustrations but you don't have a clue on how to link worlds together and animate them. Without that, you've no choice but to create static pages in a book. Hypermedia conjures visions of cyberspace, but it's just a fancy way of connecting text or images together. And using the web, it's really easy to create interactive, animated virtual books. Weave complex stories, allow visitors to drift off and get lost in your web of imagination. Through this workshop we'll build a choose-your-own-adventure style story using simple techniques that you can use for your own stories. Even with zero coding experience.

Goals

• Understand the original potential of the web, hypertext and hypermedia through examples.
• Build a simple, visual website that contains multiple pages.
• Link pages together using image maps.
• Add simple animations that trigger when visitors hover or click.
• Upload your website to Netlify.

Requirements

• Ideally you're familiar with web design or have taken the Introduction to Web Design workshop. If not you might want to watch some introductory videos on web design first.
• All the tools we use are free. Go ahead and install Visual Studio Code and either Chrome or Firefox.
• Make an account at Netlify so that we can immediately put our website online.
• We'll provide some basic images and text to make a linked story, but ideally you can bring your own material (text, photos and videos) to make your interactive story.

Project

We'll make an interactive, choose-your-own-adventure style story where users can walk around and explore a landscape. We'll add animation and sound to set the mood. These techniques can be used to make more complex experiences or stories.

Next Steps

This course can stand on its own. If you only use it for interactive storytelling, great! Some suggestions to upgrade your skills:

• Follow the Web Interactivity if you want to add interactivity to your website.