Assignment: Interactive comic project
Professor: Ann Chen
Date: 10/13/2018
Link: http://imanas.shanghai.nyu.edu/~xg679/Commlab/comicproject/
Story idea & synopsis:
Instead of making an entertaining comic, Emily and me wanted to make our comic meaningful and let people really connect to it. Therefore, we chose the topic of gay love.
The comic story is based on time line, and will demonstrate the story of two boys who are from the same neighborhood. The story begins with the boys meeting at the backyard, becoming best friends and feeling naturally connected. When they grow older, they go to school together with the relationship which is criticized a lot by people. They has faced a lot of challenges but get through them together. Finally both them and other people embrace their identities.
We think this experience may represent the experience of many gay people, and we hope this story will help people understand more about the community.
Process:
In order to make the comic easy to understand and really get people connected, we decided to make the layout as simple as possible. We wanted to have: 1) single linear story line 2) simple but clear drawing & interaction 3) minimum texts. I prepared and drew all the comic assets
(thanks to Frank for his iPad). It took almost a week to finish all the drawings.
With all the assets prepared, we started the structuring and coding. The initial plan included:
- scroll to change the panels
- insert two interactions which are: 1) on the panel with crowds, users will click to see what they are saying (bubbles with texts); 2) swap to get rid of the depressive thoughts (messy clouds)
In the process of coding, we meet several challenges and made a series of change.
- For the scrolling effect, considering users reading habits, we were concerned that people might not get informed that there is an interaction on “this” panel, thus may miss the interaction. To make the interaction, we decided to let users click to change the panel instead of scrolling. Here we referred tothe example of slideshow effect from W3 schools. Jingyi helped us to make it happen.
- For the interaction of swapping away the clouds, we found out if we wanted to have the effect of erasing, we would have to apply the canvas of P5 which has not been covered in class yet. So we made an adjustment that instead to swapping, we will let the users to click on the clouds and make it disappear by changing its opacity. To make it more clear, we attached an image if duster to the mouse pointer, and to do that we adopted an example from stack overflow. We put an button to the panel to let people pick up the duster and then clean the clouds. With the clouds disappearing, the image laying behind will show up in which they are helping each other. Another student from lap (who I don’t know his name) and Konrad helped with this part.
- For the interaction of click to see bubbles. In the first place, we used a button by clicking on which the bubbles will show up.However, after talking to some fellows, we got feedbacks that the button may seems to be unnecessary for the consistency of story. So we found a better plan : there will be blank bubbles showing at the first place and when users are clicking on the bubbles, the texts in them will reveal. To do so we referred to the examples about rotate-photos we learned in class. Frank and Jingyi helped us to implement the coding.
- We have a lot of panels for the comic which made the comic a little bit long, So we deleted or combined some of the panels to make the story more effective.
Future improvement:
- We want to add background music to the comic, and make it change regarding to the story.
- We want to make the swapping interaction happen.
- We may want to add more interactions and narratives to comic to make it more attractive.