Week 5: Interactive Comics (Moon)

After five iterations, the final version is all set. Check it out at the link below!

http://imanas.shanghai.nyu.edu/~zz1444/comlab/interactive-comics/v-final/

Sequence:

At the very beginning of the comics i.e. when the user press enter for the comics web address, user will see the figure below. It is going to wiggle left to right. I chose to display it first rather than the comics itself for two reasons: one artistic, one technical.

Artistic reason is to give viewers a hold before he or she see the real deal. This increases the expectation a little bit at the same time I guess.. Technical reason is that to avoid all the extra trouble and difficulties come when viewers may use different browsers with different sizes, and discourage the viewer to resize the window, when the viewer click on the suspicious figure, it pops up a new window which contains the content of the comics. In this way, when developing the comics, more efforts can be contributed to the layout design that is going to work as expected.

Though from others comments, I learnt that maybe the idea of presenting the main content with a pop-up window should be carefully examined before implementation in the future.

Thank you little wiggling man for your hard work haha!

Below is the real beginning of our interactive comics. In the opening scenes, the interaction mechanisms is scrolling down, where animations and plot lines are going to take place along the way. The man is going to wiggle towards the edge of the cliff, simulating a walking man.

And here is some real “comics” stuff happening when the little man fall of the cliff. I used Javascript to create the new images, giving each of them different IDs. The positioning of this elements, as well as everything you are going to see below took a lot of time and energy. It is basically a very long design process, just try to make everything looks as expected.

You may see the source code of my wiggle effect below. I searched the Internet for a while to get the inspiration (falling effect), though the implementation seems trivial.

The translate function is the hero here, it makes the image shiver, to simulate the motion when something is interfered by air resistance when experiencing free-falling.

And here you will see the main title of our comics. As the falling man falls down, “WHO”, “I”, “AM” is going to consecutively moving from left to right, emphasizing the theme of our comics – finding the lost memories and fulfill oneself with experiences.

As the gradient becomes black, the falling man will disappear automatically. This is a transition I tried to make so that the viewer can go with the plot line.

And after the man disappeared, the viewer will see the following blurred text. After he/she click on it, it will gradually reveal. I used the filter: blur() css property here to make the animation.

Tech

Up until now, everything is included in a giant function named as “opening” as you may see below. The reason why I chose this approach is that everything happens in sequence and the trigger of each different events is the different ypos values, representing how much the viewer scrolled. I spent a significant amount of time considering other approaches such as using window.onload = init; , etc. But I turned to this one because of its feasibility and agile nature – I came up with this idea myself and utilized it all the way through development.

One problem I met using this approach is that sometimes the viewer may skip some ypos values if he/she scroll too quickly. If I use constant ypos values to trigger events, a lot of the times the viewer will miss the event. So Everything above is based on a range, except the last play_bgm snippet, as we can be sure that the viewer is going to reach this ypos value. However, this approach is not perfect because events may be executed multiple times if ypos stays in certain range. This could be a really dangerous thing, but I deal with the problem by giving the objects created a same className instead of id, which helps me manipulate with all of the objects I created.

Get back to sequence, at the end of the falling, our “hero” will appear in his house. The logic here is indicated in the blurred text. And in his room there are in total six triggers that would help our hero recall his lost memories. The background image was processed by a popular Chinese image-processing app called Meituxiuxiu. Although people mainly use the app to make themselves look better in selfies, it turned out that it could also be used to make normal pictures look cool. I really felt the power of graphics processing softwares when I see the beautiful sketchy style.

As the viewer hovers the cursor around, he/she will notice that certain objects will glow when the cursor is on it. This is a interaction I did to draw the viewer’s attention and encourage them to click on the objects. Users have been educated a long time ago that such animation indicates interaction, so I believe that this will make it intuitive for viewers to click on the glowing objects, thus pushing the plot line. The glow effect is done by displaying the pre-processed glowing pictures. At first I changed from display: none to display: block, but somehow it doesn’t work. So I turned to opacity. By turning the value from 0 to 1, I managed to realize the animation.

What happens when the viewer click on an object? I made separate web pages for each object, combining a recalling animation to them. The viewer is going to see a colorful mosaic page before the actual memory reveals. I learnt this animation from one of our IMA fellow Jiwon‘s weekly workshop. It was really lucky for me that I can incorporate this little animation into my interactive comics.

Below is the colorful mosaic animation JavaScript code. Basically the blocks are created using random colors, and the total number of divs is manually set by calculation.

And here is one of the memories. After the ringing sound when the user click on the cross, and the recalling mosaic effect finished, the user will see the image below.

As the viewer go through all the memories, the man will be more and more filled with color. We made this animation to symbolize that the man is finding the true self, and become the person who he was before.

After the viewer finished clicking all the triggers, the drawer will be colorized automatically. And when the user click on it, the following image with some interesting colored ribbon effects will show up. I also learnt this effect from the weekly workshop by Jiwon, thank you~~

And this is the ending of our comics. The hero found his precious memories, and asked the viewer some questions for thoughts. I found the comic bubbles from the Internet, and used some matching fonts for our project.

 

 

Below is some Photoshop work I did for the materials. I am responsible for all the coding part, but I still did some photoshop work.

I met most of my initial goals for this interactive comics, such as various ways of user interaction and creative story telling. But I could definitely work more and improve the aesthetics, making the pictures “come from a same world”. I am happy that in limited time, I could try my best and produce a work like this, and from what I learnt from class create something new. I look forward to more interesting projects in the future!

 

You may check the previous versions at the links below.

Templink(v1)

http://imanas.shanghai.nyu.edu/~zz1444/interactive-comics/v1/

Templink(v2)

http://imanas.shanghai.nyu.edu/~zz1444/interactive-comics/v2/

Templink(v3)

http://imanas.shanghai.nyu.edu/~zz1444/interactive-comics/v3/

Templink(v4)

http://imanas.shanghai.nyu.edu/~zz1444/interactive-comics/v4/

Templink(v5)

http://imanas.shanghai.nyu.edu/~zz1444/interactive-comics/v5/

And here are some additional notes I made during the development process.

interactive comics documentation

memory transition: mosaic  in class

ending animation: loops and array weekly workshop

superscrollrama – external libraries: jquery & greensock

cool, but hard to understand, and would be an overkill since the scroll effects are only need for the opening scenes

<iframe><\iframe> does work, but not elegant at all

want to practice what I learnt from class (html, css, js)

leap motion – abandoned, since there is no ready-to-use apis

glow effect – done by changing opacity of glowing images

storyline – for Ariel

memory triggered by clicking on triggers, open new window, first recalling effects, than memory itself

come back, the hero becomes more filled

drawer is the last trigger

walking & falling effects:

https://www.w3schools.com/howto/howto_css_shake_image.asp

bubble:

dreamstime

https://www.dreamstime.com/royalty-free-stock-images-comic-speech-bubbles-vector-illustration-bubble-template-cartoon-illustrator-eps-image38798589

fonts:

badaboom: words

and fun sized: title

https://www.dafont.com/theme.php?cat=102

One thought on “Week 5: Interactive Comics (Moon)

  1. […] The press&hold&flashback motion is a bit tricky, and I also used some interesting tricks to avoid redundant codes by switching the boolean value of variable played. You may also find that in the init() function, I’ve realized that the interactive field position&size will stick strictly to the browser size. So, the user can play with their browser whatever they want without running into trouble experiencing our project. I personally regard this as a huge step towards, since I avoided such problem by using popup windows in the Interactive Comics project. […]

Leave a Reply