Our comic strives to put a twist on classic ghost stories by having two wildly different but unexpected endings.
Our main concept is that there is a guy who has, as the title suggests, "Just Moved In" to a house he got for surprisingly cheap. Soon we find out the reason for this. As in so many horror stories, there is a ghost living in the cheap old house, surprise surprise! But this ghost's intentions are not what you would usually expect, and we aim to take the viewer on a fun journey (two if they so choose, and we would highly recommend that) through the protagonist's (expectedly dumb) choices.
This is a comic with horror themes but it is also meant to be funny, and we tried to have a balance of that within our website and comic. This is also a choose your own adventure type of story, and we hope people will enjoy this interactivity and the different endings!
We began by meeting together and coming up with potential ideas. We consulted previous websites, threw out various suggestions, until we reached an idea that we like, ghosts. After that, we came up with an outline of how the comic would proceed, describing each panel. And then we decided upon the jobs that each of us would do
- Rhea and Maimuna : Working on Website Code (CSS, HTML and JavaScript)
- Moyo and Bhavicka: Designing Panels and Graphics
I used the concepts from Understanding Comics to create a wireframe for our comic. I turned the outline of the story discussed by the group ino individual scenes, and sourced background images for each scene. I added characters and dialogues to each scene. I had to edit the story outline by adding and removinf scene so the story could be more cohesive. I arranged the scenes sequentially, and added notes about animations and sound effects that had to be added. I also sepcfied the order of the decision scenes and how they should pan out. I then sent the wireframe to Bhavicka.
Using the wireframe Moyo had given as a guideline, I started off with editing and choosing from the background options I had been given. Finding the right app for this style of drawing was the hardest part- I cycled through many like Illustrator, Vectornator, Adobe Fresco and even my Notes app. Finally, I found that a combination of Canva on my laptop and Ibis Paint X on the iPad worked well for my purpose.
I had to shorten some dialogue and rearrange some panels but the wireframe was a very helpful reference point. For the animated parts, I drew the same frame multiple times with the to-be-animated object moved to different positions. I knew trying to make good consistent art wouldn't be my strong suit, so I just went for stick figures because hey, it's okay if stick figures look crappy. One thing I really wanted was for the ghost to look cute after the initial reveal that it is not actually scary, I hope I managed to achieve some semblance of that.
Maimuna's explanation for the template; I created a basic backbone template. It included a paralax header and few dummy images that fade in from left and right alternatively. The dummy images where then replaced by the comic strips. I used the AOS Javascript library to create the effect and also changed the fade in time so that it took sometime to slowly fade in and create a smooth transition.
I have also added the background objects moving animation by manipulating the values of keyframes between 0% and 100%. So, during a particular scene, it appears as if the objects are hovering around or moving to have a scary effect.
To add on, I included the scroll down arrow animation. I used keyframes here as well, and the values were between 0, 50 and 100. It also included animation-delay to show the change of color (downward movement). I refered one tutorial on YouTube for this effect. It was pretty confusing intially especially creating the arrow (changing the angles to create the arrow / and the colors scheme). After some trial and error I was able to figure out what matches the comic the most.
I then added a small footer at the end with our names while being careful not to trigger it while scrolling the comic.
We wanted to include an animation of the ghost moving a fork within the kitchen, and so I had to figure out how to add that animation using the images that were to be included. It took a while and a bit of trial and error, but I finally figured it out, using keystrokes as well as JavaScript to have the animation begin when the viewer scrolls to that section of the page.
In addtion, to add ineractivity to the page we decided to use two buttons, so that the viewer could decide if they wanted to investigate or ignore the ghost. And so I worked on adding buttons to the website as well as ensuring that each button led to the respective "adventure" and there was no overlap between the two respective sections. To see the alternative the webpage has to be reloaded. I tried using hidden and show first, but that prevented the transitions from happening. Opacity allowed the transitions to happen.
- Our major goal was to show interactivity using two different endings, one in which the ghost and the character become somewhat friends and another where the ghost accidentally frightens the character to death. And this is a goal we accomplished.
- Instead of simply showing panels in relation to objects moving, we also wanted to show an animation of the object or panels, and we accomplished this as well.
- Moreover, using a black and white color scheme helped to portray the concept of a horror, and keep the viewer in potential suspense. However, the contents of the panels themselves, such as what the character says helps to add to the humour
- Overall we would say that we accomplished our goals of creating a horror based comic webstrip
- Activate Animation on Scroll: https://stackoverflow.com/questions/30801588/start-animation-when-scrolled-to
- Fading Animation: http://css3.bradshawenterprises.com/cfimg/