Animation – Problems and Solutions

The first time I animated my storyboard, I used Adobe Flash to execute and exported it into mp4. However, even though I separated the 11 scenes into separate Flash files, problems still occurred and it could not be exported.

I’ve wasted quite a lot of time animating the scenes in Flash before problems began to rise. But after a few attempts, I’ve decided to solve this problem completely by switching to After Effects instead.

animation-screenshot

This made things much easier for me in terms of exporting the video. Although it may be slightly more troublesome in terms of animation (I have to separate the visuals into individual layers in order to animate them), it was not as lag as Flash and it was generally easier to use.

Technology: Vid Slider

The main technology that runs in the interactive music video is a HTML5 before-after comparison slider, which I found on codepen.io.

As mentioned before in my previous blog post, I took away the phone input due to its complexity with Node.js after testing on a prototype. Besides that, many have mentioned that using the phone distracts them from the actual animation.

Thus, removing the phone and focusing on the web interaction seemed like the best option that I had. It was a tough decision at first because I proposed to turn my project into a cross-platform interactive music video, but there were unseen circumstances which prompted me to make this decision.

Thankfully, by using this slide interaction, users are able to see and compare the two scenarios (which was originally meant to be controlled with the phone) on the screen instead. This way, they can put full concentration on the interaction and watch the music video as well.

W8: change in execution method

To be frank, I have been struggling with the tech part of my project for the longest time. Due to the complications with cross-platform technology such as Node.js, it was a real challenge for me to overcome. I didn’t want to waste my time any further as I’m already in week 8; with only about a month left to submission. I had to make a decision.

I decided to take away the mobile input of the project and just stick with the web execution method. Meaning, whatever interactions will only happen on the screen. This way, I can focus more on the visuals of the project and not get too caught up figuring out the technical errors that are constantly occurring.

This change in execution method slightly affects the perspective of the whole project direction in general. But the foundation still remains – to allow users to experience a story from various perspective, which grew from the roots of remix and exquisite corpse.

I truly hope that in the span of 1 month, I’ll be able to perfect this project and provide a well-finished interactive music video that is able to touch my viewers emotionally.

We’re almost there!

Tech research + more refinements

After looking at multiple ways to execute this multiplayer project using Socket.io and Node.js, I’ve learnt that it would be easier for both players to be looking at the same graphics appearing on screen rather than having commands like “pick a route” while the other player waits. It avoids confusion for the other player waiting for their friend to “make a decision”. So here are some further adjustments I’ve made in order to fit with a more realistic execution plan:

  1. Both players will be looking at the same screen.
  2. They will use their phones to control the graphics appearing on screen. (eg. colors, scenery, actions).
  3. The visuals remain as a split screen so they can see how the “exquisite corpse” method forms when two players pick different scenes.

IF only one player is connected to the server, then he/she is only able to switch the scenes for the first panel:

plan1

Pretty much like what we see in Jeff Buckley’s interactive music video, but instead of clicking on the panels, users will be using their phones to switch scenes in the panels. This allows them to see the different scenarios that could happen at one place such as the image below:

rs-233850-Jeff-Buckley-Just-Like-a-Woman

The underlying technology behind this mainly consists of Node.js and Socket.io. This tutorial: https://modernweb.com/2013/09/30/building-multiplayer-games-with-node-js-and-socket-io/ teaches us how to build a game using these technologies and the 3 platforms which I will be using (2 phones, 1 PC).

The architecture:

According to several researches, there are two types of multiplayer functions.

Client – Server – Client (which is what we’ll be doing)

or

Client – Client (this is rather straightforward and it does not require a feedback from the server)

architecture

The image above was taken from the tutorial website. It shows us how the architectural framework and the roles of Socket.io, Node.js and Express.js in this multiplayer project.

I’ll be researching more on the technology and try to code a prototype before executing the actual project.