Final Interactive Comic Project Link: (By Angel, April, and Ploy)
http://imanas.shanghai.nyu.edu/~zy1193/project1/project.html
Description
Our comic is about the journey of the four characters – rabbit, dog, pig, and panda – in the haunted house, seeking to find the magic crystal ball that will grant them a wish. Initially, we want it to end with their realization that there was no magic crystal ball and realized that all it matters is each other. However, if we stick to that plot, the storyline would be much more complex as we need to think of experiences that will bond them together to the point where they see the importance of each other greatly. Therefore, we changed the concept to be simpler by ending with the grant of their wish.
structure
For the storyline to flow, we created 5 pages in total. The first page is the main page with a link to the outside the door, first floor, second floor, and the third floor. We introduced the background information of the story on the first page. Then outside the door page, we introduced each of our characters. Into our first page, our characters faced their first challenge to find the way through the maze. The second page is their second obstacle to cross the water with the boat. Finally, the last page is the point where they found the magic crystal ball which is hidden in the treasure box.
Discussion of Process
We simultaneously create both the drawings and the codings together. We chose to draw on the iPad since it is easier to manage.
First off, I start to draw a lot of images, however, when we think about our main task of incorporating these images into the website through HTML, CSS, and JS we decide to change a lot of the drawings. For instance, since we decide to create buttons to move between images, we decide to make the characters move by changing the position of each thing. For example, when they crossed the river, I changed the position of the boat in each drawing. Therefore, when we click the button the boat would move from one position to the other until it reaches the other side. By using Ipad, it wasn’t so hard since it is similar to photoshop in ways that we can draw on different layers and then we can transform the layers accordingly, by not affecting the background.
My role in this project is to create the script, draw the images, and code on the last two pages. The coding on the last two pages wasn’t that hard since it is similar to each other. However, there are parts that are really challenging. I started out creating the easy part, such as the button and the caption and placing in the images. I find the most challenging part to be in the javascript when we need to define var and then the if-conditions statement so that the images would move at each state. In addition, when we revise the project, we decide that we want the image to flow continuously without always pressing the button. Therefore, we use the timeout function to let the code flow through many images in one press of the button. The time is used to indicate when the image should be changed. This also causes mistakes that make our code invalid. We later found out that the timeout should be placed after the changed in button. I initially placed the timeout of all the functions together at the top of the javascript page. Lastly, there were a lot of careless mistakes such as misspelling and not closing the brackets at the end of the functions. These small mistakes also prevent the code from working.
Post-Mortem
Overall, I think our project was pretty good. It is what I expected. It might be because we worked on the drawings at the same time as the coding. Therefore, we know what to change to these drawings to make a better understanding of the comic, keeping in mind the job behind the codes. I’m really proud of the first IMA project. It was a lot of work, but I’m really happy to see this successful outcome after many trials and errors.