Monthly Archives: October 2014

Assignment 4

My mac had to die on me at such a random timing…  According to the service centre, the hard disk has to be replaced and all data will be lost. I’m relieved that all my school stuff are saved in Dropbox, including this assignment, if not… Oh well I should just save everything into Dropbox next time.

Anyway, I had to do the rest of the assignment using the computers in school. Unfortunately they didn’t have the font I used in my comic (and I can’t download them because the admin password is required), so I couldn’t really do much in terms of changing the visuals. I really wish I could have done the hover effect for the choices “Run away?” + “Apologise” and “Forget it!” + “I’ve had enough!” though (make the images change colour upon mouse hover).

Develop a multi-linear visual story in a form of web-based sequential art piece based on your Assignment 3.

1. In order to fold back the 2nd choice, 2nd option to the common ending (as seen in the image below), I put arrows to link the words “Hey Hey Hey Hey…” to have readers scroll back up. However, my classmates said that it looked weird.



Okay it does look quite weird.


2. Don’t know where to scroll towards due to the large panels


I originally put thought bubbles to indicate the 2 choices, but I thought it would be clearer and neater to have them in separate pages.


3. Somewhat confusing story line
So is the girl having a dream or not? Does the boy exist in real life? Do they suffer from some kind of memory problems? Are they mentally sound?

I have decided to leverage on this confusion since the title “Remembering/Forgetting” has a bit of ambiguity to it anyway.

Below are the screenshots of my final submission. It’s the entire web comic zoomed-out with all the panels to give you an overview:


The first page of the web comic leads to the first set of choices for the viewer


Choice 1, option 1: Run away


Choice 1, option 2: Apologise


Both options (“Run away?” or “Apologise?”) fold back to this page, where viewers are met with another choice.


Choice 2, option 2: “I’ve had enough!”


Choice 2, option 2: Forget it

Both options (“Forget it!” or “I’ve had enough!”) fold back to the same ending.

The comic was originally in a single page, but I separated them into several pages to ensure that the viewer will not face the problem of not knowing where to scroll to. Also, having several pages allows me to create suspense at the end of each page.


The viewer has to click on either “Run away?” or “Apologise?” to proceed.


The “Next” button turns from white to yellow upon mouse-hover


My story:
There are 2 characters in my story, a boy and a girl.

Part 1
The comic starts with the boy reminiscing about his past, remembering a time where he accidentally injured someone with his soccer ball. However, he has forgotten what he did at that time (viewers are to choose between “Run away?” or “Apologise?”). He also fails to remember who he injured because by the time he reached the place where the accident was, the victim (the girl) has disappeared.

Part 2
All the above scenes becomes a scene in the girl’s dream. The girl has also forgotten what happened after she was injured by the ball because she suffered from a concussion. Whether this dream is in fact a reality is up to the viewer’s interpretation. The ambiguity somehow relates to the assignment’s title “Remembering/Forgetting” doesn’t it =p

The comic progresses with the girl getting hit by a soccer ball yet again (how unlucky).  Viewers can help her choose between the options “Forget it?” or “I’ve had enough!”. Whatever option is chosen, the girl will eventually meet the boy.

The story concludes with the girl saying:

“Wait… This can’t be true. Aren’t you the man in my dreams?” *Deva ju* =p



Assignment 3

Create a linear visual story for display on a web browser and using Scott McCloud’s mad scientist approach to create a continuous flow of storytelling experience. The title, a lonely track (or trek?), can be interpreted literary or metaphorically, and you are constrained within 10-20 panels to tell a meaningful short story. Take advantage of the browser’s strength to enhance your audience immersive experience.

My web comic:

My comic talks about a boy and a girl who suffer from their own set of problems and feel unloved and lonely as a result.

I adopted a zig-zag approach (top-down -> left-right -> top-down -> left-right) to my web comic.

In this web comic, I attempt to establish a connection between the 2 main characters (the unloved boy and the unknown girl) by making use of:
1. Direction of the comic (downward-scrolling)
2. Words (“I’m just the kid that no one likes” vs “I’m just the kid that no one knows”)

The stories of both characters are told in a downward-scrolling direction so that there is a sense of coherence and relation between the two.

Screen Shot 2014-10-10 at 2.58.21 am

The comic starts off with a boy who feels that he is disliked by every one.

Screen Shot 2014-10-10 at 4.52.55 am

I later introduce another character, this time a girl who feels that she is unknown to the world.


I wanted to make a clear distinction between the boy and the girl’s stories, and this is done so by separating their stories (vertical scrolling) with a horizontal-scrolling set of panels.


This is the entire horizontal strip that the viewer is supposed to scroll through from left to right.


I showed my draft to several friends so that I can see how they scroll through the comic and whether they are able to scroll in the correct direction. My original draft had each panel filling up almost the whole page, and some did not manage to scroll in the correct direction as a result.


Screen Shot 2014-10-10 at 3.16.04 am

Some people did not know that they had to scroll rightwards. This problem was solved after I zoomed out the entire page such that part of the next frame could be seen. To ensure that the direction of the comic will be more obvious to the viewer, I decided to resize (smaller) all the images for my final draft.


Screen Shot 2014-10-10 at 2.58.45 am

Now that the images are smaller, it is more apparent to the viewers that they have to read and scroll rightwards.


I originally set all the frames to “relative position” in Dreamweaver because I wanted the frames to be centralised. However, I found out that due to the horizontal-scrolling frames, the vertical-scrolling frames will shift to incorrect positions (as seen in the gif below), so I changed the vertical-scrolling portion for the girl to “absolute position” instead.





While the title “A Lonely Trek” seems rather depressing, I decided to end off the story in a more positive note. As mentioned in my web comic, the rainbow always comes after a storm. It doesn’t hurt to be more hopeful. Don’t you agree? 🙂


Heres an image of my final web comic! Click to get an idea of how the web version might look like (it might take a while to load).

A Lonely Trek