Scroll-responsive Webpage test

Update on my digital storytelling project: I wanted the story to come to life on the webpage. As the user scrolls down the page, elements transition onto the page. This makes the website more interactive and dynamic. Currently, I’ve only applied this to a simple webpage as a test, but I plan on using shapes and images to really bring a story to life in the webpage.

In a sense, elements of the page are queued to respond as the user scrolls over certain points of the page. This means that text, images and hopefully audio can be triggered accordingly, in a sequence that works in conjunction to the story.

 

These web-motion-graphics can be used for  interactive-fixed-storytelling. This means a fixed-event that moves and changes as the user reads (scrolls). This is opposed with using static pictures (comics and books) or dynamic, but not interactive images (television and film), these graphics are activated and move with user input.

 

https://www.youtube.com/watch?v=4DPtLwz-_Zk&feature=youtu.be

Experimenting in a New Concept

https://youtu.be/ez1ruPa2TbY

Using Learn HTML and CSS: Design and Build Websites by John Ducker, I’m relearning basics of coding. Currently, as I read through the guide, I’m implementing new (old) techniques as I go. The result is a  narrative is generated by the development of a website. Beginning in simple HTML, the website will progressively become more interactive and the story will become more complicated as the user delves deeper into it.

Digital Artist: Chris Milk

Image result for johnny cash project
Still from The Johnny Cash Project page.

Chris milk is an innovative digital artist. He is the  technical and artistic mind behind digital collaborations such as The Johnny Cash Project and Arcade Fire’s interactive and nostalgic music video, The Wilderness Downtown. The Wilderness Downtown project is a prime example of potential in HTML5 as an artistic platform, rather than a generic and passive webpage. Milk’s abstract use of HTML5 depicts the power and innovation of the updated platform.. It enables complex systems of browser windows to open.

 

 

 

 

 

Image result for the wilderness downtown write letter
Multiple open windows displaying The wilderness Downtown

These windows are coordinated and timed to pop-up-open, then closed in sequence. Some windows allow the user to interact with the multimedia within them using the cursor (one prompts the user to write a letter to their past-self!). Particular windows contain multimedia that uses data from Google Maps. The interface asks the user to enter their childhood home address information at the  start of the sequence. It inputs that information into Google Maps software, extracts data back from the Google Maps software and reinterprets it. This reinterpretation of the information is displayed as a personalised video of a character running through the streets and roads of the user’s childhood address. Using Google Maps and Street View, combined with film and visual effects, bound together with complex coding, Milk creates an interactive nostalgia-inducing augmentation of Arcade Fire’s first UK single, “We Used to  Wait”. 

A deeper inspection into his other artistic feats can be viewed here.

Digital Fiction Writing

Taken from the Reading Digital Fiction website competition page:

“The AHRC-funded Reading Digital Fiction project, in conjunction with Bangor University (Wales) and Sheffield Hallam University (England), is launching a new competition to discover the best “popular” digital fiction: digital fiction that appeals to mainstream audiences.

Digital fiction is fiction that is written to be read/played on digital devices. Importantly, digital fictions are different to e-books. Rather than existing as a digital version of a print novel, digital fictions are what are known as “born digital” – that is, they would lose something of their form and/or meaning if they were removed from the digital medium. For example, they may contain hyperlinks, moving images, mini-games or sound effects. In many digital fictions, the reader has a role in constructing the narrative, either by selecting hyperlinks or by controlling a character’s journey through the story-world. Digital fictions therefore require that the reader interacts with the narrative throughout the reading experience. Hypertexts, text-adventure games, multimedia stories, interactive video, literary games, and some mobile apps are all examples of types of digital fiction.”

Using this competition as a brief, I plan on researching HTML5 and Javascript (from the books of John Duckett) to create and interactive storytelling experience, which will likely be based in a web browser. Using this as a platform, I should be able incorporate other types of media (i.e. animation, music and more) appropriately to enhance the immersion of the story.

In terms of the actual story and narrative, it’s important to not get lost in the theoretical/ story aspect, while not focusing on the technical aspects and limitations, and vice-versa. Because of this I will do my best to build the story in conjunction with the technical aspects of the product, ensuring neither end gets left behind in the production.

 

Branching structures

Carolyn Handler Miller  (in her book,  Digital Storytelling) mentions one fundamental model in early interactive projects names the branching structures.In my example of a story website,  the model would use user interactivity (i.e. hyperlinks) to allow the user to forge their own narrative through the story. This is useful for creating unique user experience. It gives the user a sensation of ownership in relation to the story. When compared to older forms of linear-reading, theoretically, branching should give the user a semantic experience, as the choices they make are personal.

As choices expand, so do resolutions. This leads to many (potentially too many) outcomes. There are methods to combat this. “Faux choice” gives the use the illusion of choice, meaning which ever decision they make, the outcome will be the same. This is a method the writer can implement to direct the narrative and story. The “Cul-de-sac” method allow for many outcomes, but eventually loops the user onto the intended path. This lets the user explore multiple paths, therefore exploring the story world, while eventually directing then back onto main pathway.

Barriers can be used to block a user’s path. These can be puzzles that must be solved before continuing the story path, for example. These puzzles are like mini-games or meta-stories (stories within a story) that can are used to broaden the experience and create more depth to the world.

 

My theoretical idea is dubbed: sneaky-“looping”. It would occur when the user does something (i.e. clicks a hyperlink) to unlock a new path/webpage, but it seems like the user has gone back to an old path/old webpage.  The new path is similar to the old path but there is a new option/route/hyperlink available. This simple, but effective design can be implemented to apply depth to the story, making it seem more adaptive to user input.

 

Early idea

Inspired by a video made for ISAS by Andy McKay and Ronald Fowler. I wanted to encapsulate and simulate the feeling of entrapment that a survivor would’ve experienced in a metaphorical sense, and present it to a subject/ audience in the hopes that they may be able to sympathise. The idea was relatively simple. Using a headset (potentially VR), simulate the sense of entrapment by placing the wearer in a virtual hallway. This hallway represents the life of a victim/survivor of abuse. Behind each door in the hallway is something that gradually gets more scary or frightening. The aim is to make the wearer believe that there is something horrifying behind the last door, when in fact the twist is that the last “exit” door leads to a happy place of escape. This was linked to how survivors often found that looking for help, or escaping, seemed like the scariest thing to do, but it was more often than not found that there was light at the end of the hallway, metaphorically.

Screenshots of early storyboards:

IMG_0677 IMG_0678 IMG_0679

 

Though the concept may be understandable with some explanation, I feared that in this type of practice, users may struggle to grasp the aim of the project. It would also be sensitive subject, meaning that some may be offended by the concept of the content, even if the intentions were noble. It is because of this sensitive nature of this topic and the potential obscurity of the projects intentions, that I have decided to not follow up with this concept.