Week 9: Interactive Video Project (Leon & Nimrah)

Project Group: Saloman Ruiz and Kaitlin
Description: Following several changes to our original idea, our group finally agreed upon basing our project around the message of pursuing one’s dreams despite the obstacles and discouragement, especially from those close to you. We decided on the main character to be a painter who has always been disapproved and prevented from pursuing art. Tayla, the main character is struggling as she deals with constant prevention from achieving her goal of attending her dream art university. From the beginning, she is trying to complete her art piece for her portfolio application submission and throughout the process, she recalls all the hurtful and discouraging moments she had struggled with prior to her decision to apply. She recalls scenes with her parents, best friend, and counselor through each object she comes across while she paints. The first scene is followed by the paint brush dropped and shows the flashback of an outburst of her parents catching her privately painting when she was to be studying and snatching away her equipment. Following this first scene, the video then returns back to the main video of Tayla in the process of still painting her submission piece but it then proceeds to the next scene with her best friend as she gets water on the photo frame with her best friend. The second scene is her best friend telling Tayla that she only wants the best for her as she proceeds to tell Tayla that an art university is impractical. In the final scene as a hall pass falls out as she holds up her sketchbook, she recalls the time she visits her school advisor to discuss her future plans.
Initially, our group decided to go with the idea of revealing the negative effects of ethnic stereotyping. Following the recent TED talk video, “The Danger of a Single Story,” we wanted to show that we should abstain from settling for the single story of individuals as we show the negative effects through two perspectives, the labelers and the victim. However, throughout the first week of brainstorming, we made several changes to our idea and finally settled with the idea of basing our project on theme of achieving one’s goals despite the hardships throughout the process of pursuing it.
To start off, we created a storyboard, as we learned from class that utilizing a storyboard would make for a smooth shooting. Our group decided to divide the storyboard sketches as Kaitlin was in charge of the parent scene, Salomon did the counselor, and I did the best friend. For my storyboard, I initially had sketched the scenes for our original idea of the effects of stereotyping but Kaitlin improvised during filming as we changed our entire idea as well as the filming location.
As for the website design, I started off by creating a basic set up for our website and then Salomon and I proceeded to do the actual code for javascript. We planned to pause the video at each moment she comes across each object in the videos, and to make it so that the object’s border would be highlighted and glowing to indicate that it is clickable. So we screenshot the last second of the video in order to create a photoshopped image of the object’s border glowing so that the user would be able to click it in order to proceed to the flashback scenes. As for the photoshop images, I really only mainly used the paint brush tool to create a border around the objects and also utilized the opacity tool to create a glowing look for the objects. Then, we added borders to the videos and instead of using pop up windows as our original plan, we decided to make it so that it would be within the same tab. We changed our codes and changed the background to a splashed paint image in order for it to fit more to the idea of the project, added a cool paint style font for our title(with the help of Jiwon), and included tape to each corner of our video for aesthetic purposes. Additionally, we added a black background for the center video since the video initially didn’t fill in as there were small gaps in between. Below, I will show our original code, final code, rough draft website photo, and final website photo.
Summarize– Challenges/Lessons/Improvements: The challenges we definitely faced as a group was the main idea for our story as we struggled for a few days really deciding on the whole idea development. We struggled to plan out an idea so that it would be interactive. In terms of the code, we struggled with trying to figure out how to make the object’s border to glow. Initially we were trying to make the video to be paused midway in order for the users to click on the object and resume that same video to continue but we did not know how to so we settled on using the simpler method of just using a poster attribute. Prior to the final method however, we did at one point use the overlay method over the video but that was a complete fail. Moreover, the day before the project presentations, our group members learned some new CSS properties from Jiwon when we went to go visit her for help during recitation time. We learned how to add our own downloaded fonts from an external website as well as adding tape to the corners of the video to make them slanted and transparent. In conclusion, as our guest commentators mentioned, I would include additional scenes and choices for the user in order to make it a bit more interactive as I do agree that our project could have been a bit more interactive. I would also like to make the objects that are clickable to make glow when the mouse is hovered over to make it more user friendly instead of just an already photoshopped image.

Leave a Reply