Category: JH Moon

Link: https://imanas.shanghai.nyu.edu/~cc5581/week09/video-project/welcome.html

Partners: Chloe Hannah

Main idea:

Our video project focus on the topic of freedom. We want to create a documentary project which includes the history of freedom based our research and a number of interviews with our peers. The start page will first show the beginning montage that illustrates the common concept of freedom and the development of the idea over history. After the short montage ended, the interview clips will show on the screen in random positions. When the user clicks on the video, the window will pop up and the counter will add on one. The video window can be closed at any time and once the number of clips reached 7, the page will jump to the ending video. In this way, we want each user can take away different things from the project and also avoid a long time watching and getting bored.

 
Process:

We brainstormed on the idea and Chloe come up with the idea of freedom, we all think a documentary video is very unique and the freedom topic is interesting to discuss and think over. I’m responsible for the editing of opening montage and half of the interviews. Hannah is responsible for the ending video and the other half of the interviews and Chloe did the coding part and we three shoot the interview together.

When I was researching the montage sources, I basically searched from two aspects of physical freedom and spiritual freedom in human society and download the suitable video from YouTube. I choose a few seconds from each source and fit them with the background music, which takes me a lot of time.

To explore different angles and shooting environments, we tried a lot of different spots on the campus. During the interview recording, at first, we encountered some technical problems. The Tascam didn’t work at first so we lost few audio sources and the first few interview record did not focus on the interviewees and the light is too dark. We learned to test all the equipment first and fixed these issues in the following recording.

When Hannah and I edited the interview clips, we discussed a lot to make sure all the layout and format are consistent with each other, for example, the subtitle content, font, and the transition. We think this is necessary for the documentary interview videos and will increase positive user experience. Since we use two cameras to record and change angles during the process, I switch between different angles and some focus shot on the interviewees’ subtle movements. 

We shot 14 interviews in all and we want the user to choose the video clips by themselves. So Chloe designs the webpage and wrote the random position code. We also want to avoid an overly long project so we set a limitation on the number of videos that the users can watch.

Reflection:

During the user test, we received a lot of useful feedback. Some people suggested us to change the button on the web page to make it more clear (delete the next button before the user choose the last interview and change the size). They also suggested some revision on the montage video, for example, it would be better to put our names in the ending video rather than the beginning video. We improved our project according to these suggestions and also improved the layouts.

In brief, since our project is a documentary video which is quite different with other videos that have a storyline and certain characters, it is important for us to integrate everything and make them unified and organized. I think we can improve the animation effects of the web page elements for further improvement. Also, we may want to expand our interviewees to people outside the campus. But overall I’m satisfied with our project and I think it’s really thoughtful and meaningful.

Link: http://imanas.shanghai.nyu.edu/~jh5231/VideoProject/

This actually went even better than expected. Hard to believe, right? Originally we went through a few ideas, such as a cooking show where the user chooses the ingredients, or even the first conception of our final product where each of the videos (Expectation and Reality) would be played as continuous, 2-3 minute long videos which you could switch back and forth between. But the concept we finally went with has proved to be far more interesting and effective. I’m not gonna explain it in detail here – take a look for yourself!

In terms of the work that went into it, we divided up our work according to our individual abilities. Murray was in charge of the videography, Allie did all the video editing, and I coded the website. Murray and I are also the main actors, along with several friends. All three of us were, so to speak, directors – we collaborated to create the storyboard and overall project concepts, and decided together on the direction that the project ended up taking.

Filming was a lot of fun. Murray filmed using his own camera as well as a tripod he borrowed from a friend, and we also recorded additional audio for several scenes (such as dialogue, the WeChat ringtone, and the electric guitar) using a condenser microphone I happen to own. We took multiple usable takes (not including all the bad, unusable ones! Which were actually very important as they helped us refine the actions and dialogue we ended up using) for every shot of every scene. We decided on different camerawork and film techniques for many of the scenes – for instance, the shot where I’m doing homework and invited to go to a bar is just one long shot that pans around the room, while other scenes used cuts between multiple different angles.

The video editing I can’t speak much on – that’s Allie’s domain. I’ll just say that the editing was excellent and really brought the scenes to life in ways I hadn’t envisioned when filming, and the myriad of interesting soundtracks used only bolstered this impression. Props to Allie for the effective editing.

For the website, I made sure that the functionality worked 100% first, then implemented styling and designs, with an NYU Violet theme. The entire website is located in index.html, and we move between different sets of scenes using Javascript. I also found online a way to add a cool gradient effect to the webpage’s buttons; I credited the original example in a comment in script.js.

That’s just about everything. Hope you enjoy our piece!

For the video project, I worked with Milly and Oona.

My first impression of this project was that it would be a lot of work, and it was a bunch of work. All three of us didn’t have a lot of time to work together because of conflicting schedules and also all of us getting sick, but I am so extremely proud of us for pulling this through.

We first did most of the recording with the tidbits of time we had between our schedule, and it was really fun. Video recording wasn’t very hard, the hard part was the acting and trying not to laugh.

Milly and Oona did a lot of the video editing, and I was mainly just the person making sure the videos correlated afterwards. I worked on the website. We all wrote the script together and actually free-styled most of it.

Making the website interactive wasn’t hard this time because I’ve learnt how to use hover pretty well, and also flexbox is no problem for me anymore. Trying to make it look nice was probably the harder part, but that’s something that you can’t learn about, it’s something that you experience.

Some example coding:

Overall, I loved this project, Milly and Oona were great partners, I was extremely happy with the product we came out with.

Link:  CLICK ON THIS TO WATCH

Link: http://imanas.shanghai.nyu.edu/~sk7383/videoProject/coding/default.ht

(The layout may be distorted depending on the screen resolution)

Description:

The project delivers the story of Mr. and Mrs.box planning their anniversary date. It is a silent video; therefore, their facial expression and the background music play a crucial role. Users will be offered with 5 options in total (2 by Mr. box and 3 by Mrs.box), and in the end, they can choose the date for them.

Process:

In terms of division of labor, Tenielle contributed by coming up with the idea, storyboard, and directing during the film process. Daisy was responsible for overall shooting and editing videos and I was in charge of coding. Even though we had a distinct role each, our group collaboratively worked throughout the project. As I was working for the coding, I focused mainly on the way of interaction that users can experience and how can the webpage help the videos to be effectively presented. The first idea that I came up with is making a separate loading-like page, instead of starting the video right away. When the progress bar reaches the end,  the heart bubble will appear and it will lead to the next page once the user clicks it. Also, when the pointer is on the bubble, the pointer changes its style into a smiling face.

Then, I tried to link HTML and let the video to be automatically played. However, I found that when I use the “autoplay” attribute, it worked in Safari, but not in Chrome. After asking the professor, I realized that the autoplay attribute will be disappeared due to the automatically appearing spam pop-up windows that can negatively affect the users. Therefore, I tried to think of how can users access the videos without control bars, but more in an interesting way.  The idea popped up was to let the mouse pointer to be altered depending on where it is positioned. 

At last, I decided the page to link instantly after one video is finished and let the user click once to continue the video.

Also, during the user test, I received that the instruction for interaction was not clear enough. Before, the bulb was enlarged only if the mouse pointer was on the image. However, afterward, I added an animation that infinitely changes the scale of the image in order to catch users’ attention and instantly make them click the image.

Another small effect that I added can be shown in the following images. Once the user hover on the image, it will expand like a book. For this effect, I used “::before” and “::after” tag in CSS. I worked on it based on the example that I found online and adjusted ‘background-position’, ‘border-radius’, and etc.  

Regarding the layout and background of the page, those were also revised after the user test. Before, it had a plain light colored background with boxes aligned diagonally. In order to continue the overall cute ambiance of the video, I found an image with a notebook on a wooden desk and made the dating options as pictures inside the book. For me, it felt like photos of possible memories that Mr.box and Mrs.box might include to their album, so I personally really liked the overall theme.

Reflection:

Unsurprisingly, coding for this time also let me encounter a lot of troubles, especially when dealing with ‘localStorage’ and ordering of HTML when linking them all. Nonetheless, I myself was also surprised of so many things that can be done by coding and therefore am satisfied with the final work. However, if we had more time, I would have definitely worked on adding facial expressions by video editing, not by attaching the paper to the boxes. Also, before when the user clicks to play the video, I  wanted the pointer to have animation so that can give them a clear instruction. However, since I changed the cursor style on javascript, I did not have an object to grab in CSS or javascript. Therefore, I was not able to make the cursor animation on javascript. Those two are the things that I want to improve in a future project.

Link:  http://imanas.shanghai.nyu.edu/~sk7383/videoProject/coding/default.html

Description:

So, our project is basically two boxes “Mr. & Mrs. Box” that are on their anniversary. Through a silent film, and selective dramatic background music, you will see them both having differing thoughts as to what their perfect date would be like! However, they both can’t communicate their feelings so at the very end of the film it is up to the user to pick their anniversary date! (And special endings for each one!) 

Process:

In the beginning, Ruby Daisy and I were a little confused as to what we would do for our project. We looked at past year’s video projects, searched through youtube videos, and we just couldn’t find inspiration. After a while, I expressed that I thought we should do stop motion animation, and the other two were up for it too. We were trying to think of what object we could use, however we were a little stuck. We then went back to our original idea of filming real people and stick to a storyline and script. I mentioned that maybe we should try a more creative angle (since many others were following the same idea) and use objects instead. It would be a fun challenge! 

I came up with the idea to use a box, and there were other ideas thrown out as to what the other character would be such as maybe a pencil and eraser together. We all then came to the agreement that a box would be much better because how would we move the pencils as easily as the box? Afterwards, I also came up with the idea to maybe have a “Mr. & Mrs. Box” and film different scenarios of them going on dates. This became our final project idea. 

Division of Work: 

Out of all my groups, I thought this one was the most cooperative! I thought we all worked really well together, and helped out one another when needed. My part in this whole process, was making the storyboard and storyline of the content for our project. I also led most of the directing in the films, and visualized what each “shot” should look like, for example: drawing out each scene and wether it should be a side-angle shot, a front or back shot, etc.  However, we all collaborated well and changed things up as the filming came in order to make it look as polished and fun as it is now! We make a great team. 

Reflection: 

As I said before, I thought this was the most collaborative group that worked out well for me. We all had strong opinions as to what specific things should be throughout the project, and we made sure to respect everyone’s ideas yet come to a common solution as to how to move forward. I think that mindset is very important to have, especially when working in groups! We all stayed positive and strong, because we filmed almost everyday for a week, and also communicated well as to when to meet and to get what done by what time. Overall, I think my goal of the video project was met! Daisy did an awesome job taking charge of filming and video editing, while Ruby did a fantastic job coding away and piecing together our project 🙂 I am very satisfied with the ending, especially since I made up the storyline, scenarios and shots, the outcome was everything I originally had in mind! It’s weird, because it’s really like a dream coming to life. This was a great experience and I hope to work with them sometime in the future!

Enlarge