Landing Screen – the part where audience first see before interacting or pass by
I have decided to use video as the background and added an interactive feature of a firefly simulation following the movement input of flashlight. The feature adds liveness and gives user the feeling of them having the control over. In the landing screen, it is a scene of forest in a more distance angle, slightly like peeking thru the woods with the installation logo at the center. A little tent and camp fire was featured to guide user’s imagination with the narrative as well. At the bottom, a slow blinking sentence “Press to Begin” was there to let users know how to start/next step.
//embedr.flickr.com/assets/client-code.js
Navigation Guide – instructions shown after user “Press to Begin”, part where before interaction begins
I want the guide to be as simple as possible, so I’ve only use 1 sentence to describe each step together with an looping animation. It is exported as a video file. The animation also helps the guide to be more attracting, because the “tutorial” parts are always the part that users like to skip, and yeah i dont feature a skip button in it because the navigation guide is super duper important. Similarly, user “Press to proceed” – interaction begins after this, flashlight simulation triggered.
//embedr.flickr.com/assets/client-code.js
Closing Screen – when user found all 4 animals
A closing screen will be shown when user found all 4 animals, congratulating them and allow them to rewatch the motion graphics of each animals. They just need to click on the animals, then that animal’s motion graphic will be played. After motion graphic finish playing, it will go back the the closing screen with 4 choices. But if its idle/users did not make any selection after 25 secs, it will automatically go back the the Landing screen.
//embedr.flickr.com/assets/client-code.js
Night in the Woods 