Interactive Movie Poster
CLASS PROJECT • INTERACTIVE MEDIA • HIGH-FIDELITY PROTOTYPING
Movie posters where you can chat with the cast to learn more about them.
Prototype developed for the upcoming Super Mario Bros. movie.
Focus:
Functionality
Date:
October 2022
Tools:
P5js
GIMP
Audacity
Level:
High Fidelity
As part of a class assignment for visual media, I was tasked with creating an interactive poster. I scoped my focus to movie posters. The concept is to take the standard movie poster and make it an interactive and narrative piece that can evolve as new information and trailers are revealed about the upcoming movie.
In this instance, the user can talk to characters that will show up in the movie. More characters can gradually be added over time, adding to the anticipation of the audience.
Design Goal
Original Concept: combine a movie poster with movie trailer elements. Thinking to create hotspots and interactions that link to moments in the trailer and possibly change visual elements of the poster itself.
Final Concept: allow the users to get a feel for the characters in the upcoming movie and the actors who portray them. Users can talk to the characters using trigger words.
Inspired by the fanmade poster on the left, I took the block and made a similar background and then added a pipe from the games as an entry point for the characters.
Interaction
Method: Speech
Speak clearly and decisively or it won’t pick up your words.
-
Say [character name] Character Enters
-
Say "Bye" Character Leaves
The idea is to have each character have their own unique interactions and trigger words. For now, each has one trigger word.
Current characters and their Trigger Words:
-
Mario: “It’s a me”
-
Toad: “Mushrooms”
-
Bowser: “Do you yield?”
Known bug: letting the interaction with mario play out will have the speech program get overloaded and not take any more input because the computer picks up the words spoken from the audio clips. The suggested bandaid is to have the user wear headphones.
Animation
Wanting to do animations to give the characters more liveliness. However, good animations take time. So in the interest of that time, I looked for a simpler method of animating.
This method also allowed me to use renders of the game characters from different games. This in hand allows me to showcase their art styles for the characters.
Paper Mario Inspired
Took inspiration from the Nintendo series “Paper Mario”. In particular, I utilized the flipping effect to make these simple animations.
These flips, or rotations along the y-axis, are done using the createGraphics function in javascript that allowed me to draw the animations to a separate canvas, have them flip, and then combine it all together.
Improvements
Animations
-
Cleaner images for smoother transitions.
-
Fix visual issues like Bowser landing properly.
Audio
-
Adjust the sound quality of audio clips.
-
Fix the issue with overloading speech recognition as it picks up the audio clips.
More Characters,
More Interactions
-
Add other identified cast members like Peach and Luigi.
-
Add more trigger words.
Revisit
Original Idea
-
Have this meet-the-cast poster be a secondary poster that you arrive at through hyperlinks or a hotspot on the original poster.