Assignment 10

Click for resources here

Interactive Story Assignment (Parts 1 & 2)

Due Dates:

• Part 1:

  • Monday Labs: 5/5

  • Wednesday Labs: 5/7

  • Thursday Labs: 5/8

• Part 2:

  • Monday Labs: 5/12

  • Wednesday Labs: 5/14

  • Thursday Labs: 5/15

Overview:

Create a web-based, non-linear story with multiple story paths. This project builds on everything you’ve learned so far and counts as two homework assignments. Use photography, illustration, montage, or text to create your narrative.

• 80% of the imagery and all of the text must be your original work.

• There must be at least two possible endings and multiple ways to reach each one.

Part 1 Instructions (Story Mapping & Planning):

1. Watch These Tutorials:

   • From LinkedIn Learning “Illustrator 2024 Essential Training”:

     • Chapter 19: Generative Content

     • Chapter 21: Artboards

   • Generate Entire AI Images in Photoshop with Adobe Firefly

2. Plan Your Narrative:

   • Map it out: Use Adobe Illustrator or pen and paper to outline your story. Show the different decision paths and how they lead to the endings.

   • Describe Your Story: Write a one-paragraph summary of your story, including:

     • The premise.

     • Characters.

     • Setting.

     • The types of choices the user will make.

3. Develop Visuals:

   • Create one sample image of a scene or location from your story.

4. Submit Part 1:

   • Your submission must include:

     • A story map showing the forking paths.

     • The story summary paragraph.

     • One sample image from your story.

Part 2 Instructions (Build Your Interactive Story):

1. Create Your Story Folder:

   • In your MEDP150 folder, create a new folder named story. Inside this folder:

     • Create an images folder.

     • Save your HTML file (e.g., index.html) in the story folder.

     • If using external styles, include a .css file in the folder.

2. Prepare Your Images:

   • Images should be:

     • File type: JPG

     • Resolution: 72 ppi

     • Size: No larger than 5” x 6”

     • Optimized for fast loading.

3. Build Your Website:

   • Use HTML to create the interactive story.

   • Include:

     • Hyperlinks for users to make choices and navigate the story paths.

     • Link hotspots on images (use HTML Image Map for help).

4. Ensure Functionality:

   • Your site must have:

     • At least two endings.

     • Multiple pathways to reach each ending.

     • Fully functioning links.

5. Submit Part 2:

   • Post your project to the web.

   • Provide the URL to your Lab Instructor.

Tips for Story Ideas:

• Consider a location-based story:

  • Choose an interesting NYC location and document it with photographs.

  • Write a story related to the location (e.g., something that happened there or something fantastical).

  • Give users choices to explore the location and change the story based on their decisions.