Wednesday

Final Project - Developmental Process (Sleeping Beauty)

The final group project was really draining all of us out. Nonetheless, here's the developmental process for the project!

BRAINSTORMING FOR OUR STORY

Initially we had the idea of using the fairytale 'Three Little Pigs' and alter the ending such that the wolf catapults himself into the chimney of the third pig's house (adapted from the game 'Angry Birds') and then have the three pigs all ready and prepared to play pranks on the wolf by setting up lots of traps in the house (inspired by the movie 'Home Alone'). Another idea was to have the wolf catapults into a wrong house (over shoots himself) and to enter a house that is of modern era. And have the family either keeps him as pet or slaughter him up. Then we thought of including the storyline of 'Little Red Riding Hood' as well to have the wolf disguising as the grandmother of the three pigs.

Eventually, we thought that these ideas were not as fresh and exciting because they were mainly inspired and adapted. Also, because 'Three Little Pigs' seemed a little too mainstream and might be too common. Thus, we decided to change our story by the second/third discussion to 'Sleeping Beauty'. Some ideas for the altered ending were firstly, to have the princess not wake up upon the prince's kiss. Then we thought we could have the prince kissing her continuously till her lips swelled (at the same time, we could ass interactivity at this part to get the audience to click on the image to make them kiss), and then carry her to the nearby hospital, which should be a Korean hospital. We wanted to make it a Korean hospital because we wanted to let Sleeping Beauty undergo cosmetic surgery to get her lips treated. We thought of ending our story with a wrong operation, which led to a gender change surgery instead. The wrong surgery was due to the miscommunication between the prince and the princess.

1. Some peers pointed out that our story is too fictional and doesn't make much sense, especially when Sleeping Beauty was in the forest and suddenly she was brought to a NEARBY Korean hospital. The jump in country makes no sense. 
Our take: Our group decided that, ya, it was indeed quite abrupt, hence, we tweaked our storyline a bit. We decided to let the princess wake up and then fly to Korea for cosmetic surgery. With the travelling, the change in country starts to make more sense.
2. Gender change to be completed within one operation sounds very fake too.
Our take: I do agree that it sounded fake, but since we have the "real" part (which is the infograph) incorporated into our story already, we thought the story could be a little fake here to explore more creative and humorous and unexpected ending. Also, I believe that since it is supposed to be an extension from a fairytale, I believe by fairytale, we wouldn't expect something realistic ya? Which is why we kept the gender change idea. However, we removed it eventually due to time constraints plus the fact that it has more conflicting opinions about this ending. Nonetheless, it was a great idea that if given much time, I believe it would have been an added value to our story.
CONFIRMED STORY
So, our confirmed story (as included in our design document) goes like this, briefly:

Sleeping Beauty (SB) sleeps on and there came a prince with thick lips, who fell in love with her.
He then starts kissing her to try and wake her up, which he successfully did.
But because of his thick lips, SB enjoys the kissing so much that she pretended to be asleep still, so that she could get more kisses.
The continual kissing got her lips swollen and the prince was disgusted by it and he left. (Breaks off to 2 paths here)

Path 1: Prince's path
Left SB and left her room. Ponders deeply about his action and his love for the princess. Eventually realizes that he really loved the princess and should look beyond her looks. Therefore, he returns to find SB missing already! He looked at the computer and found out that she went to Korea for cosmetic surgery! He rushed to the airport immediately but her flight has already left. All he could do was to wait and look around for her.

Path 2: Sleeping Beauty's path
After prince left, SB woke up and was shocked to see her swollen lips! She immediately went to search online for help and found out that Korea has the best cosmetic surgery and she flew there immediately to get her lips treated. When she reached there, she realised that she could not communicate with the Korean doctors as they do not understand English! So she has to make a decision. (Breaks into another 2 paths)

Decision path 1: Reject surgery and fly back
SB decided not to go for the surgery since she could not communicate with the doctors and she doesn't want to risk doing the surgery. So she flew back and she met the prince in the airport! Then, they got together and lived happily ever after. :)

Decision path 2: Go ahead with the surgery
Assuming that the doctors understood her, she went ahead with the surgery which gave her even fuller and thicker lips (since most people visit cosmetic surgeons for a fuller lips). In this part, a new path branches out to lead readers to our infograph which contained information about various types of lip surgery. This path then ends off with SB with thick lips and viewers can choose to re-visit other paths and options again.

DIFFICULTIES MET WHEN CREATING THE PROTOTYPE
The whole process of the prototype was really............... hard.

Firstly, our group decided that the drawings should be of a standardized style, hence, Kai En was in charge of churning out ALL the images. He was busy with school work as well and the images took a long time, which was very taxing for him. Nonetheless, the pictures came out MARVELOUS and I thought we really had him to thank!

Next, using dreamweaver drove all of us crazy. With none of us having any computing background, we were truly at a disadvantage. We had great ideas but executing them was hard.

Initially, we used this single-framed approach to present our story. However, we thought that the arrows were ugly and we did not know how to change it. There were also problems with scrolling up. For some unknown reasons, we could not get the thing to scroll back up. Also, for the sake of better presentation of our multipaths, we decided to change our presentation style to a scrolling, mad scientist approach. That would avoid all those unsolvable problems as well.

This is our final product with mad scientist scrolling approach. Though problems regarding returning to previous panels were solved, there were many alignment problems. 


We've used tables on dreamweaver to create the whole html, however, arranging the pictures which were of different sizes (some were longer, some were bigger, etc) within the tables was crazy! There were gaps for some pictures (circled in red on the right picture) but none in some (left picture). After spending one whole afternoon trying to resolve this problem, we still couldn't!! Very demoralizing! Eventually, we could only do our best to align them as best as we could so as not to affect readibility. Couldn't really find out the real problem and solve it. 

Also, the image size was a concern as well! 

The image on the left was the initial prototype. As you can see, the panel took up most of the screen and the different paths couldn't be seen clearly. Comparing to the one on the right, our final prototype, the paths are clearly seen on the screen and the image size is comfortable to eye. Standardizing the size of the images all over again was a tedious job as well.

The above 2 gif images were used to generate interactivity as well. We wanted to allow viewers to click endlessly to make them kiss in picture on the left, and to remove the bandage for picture on the right. Because we couldn't find the code for actual click-to-play, we had to make do with gif images. Our solution was to place a static image that is clickable, and on click, it changes to the gif image. It works as well! Interactivity remains and effect was what we wanted.

We wanted to allow readers to fly the plane themselves by mousing over and lead the plane to the next path. However, the code crashed on the day of submission and hence, I created a gif plane image as a back up. Just in case the code still doesn't work. 

Eventually, my group mate managed to fix it and it worked again! YAY! :D couldn't place the link here so just show a screenshot! Viewers can move the mouse along the trajectory drawn out and then it will lead the plane to Korea. :D

PROBLEMS WITH DESIGN DOCUMENTATION
Design documentation was fine but we just felt that there were too much overlaps between different parts. Like when we talk about interactivity, we mentioned some tools and codes used as well, so in that sense, the last part on "Tools" became very repetitive. So yup, that's the only problem we had. Other than that, it was fine. :)

WORKING WITH MY GROUP
I am very glad I get to work with Jie Ying, Kai En and Heng Wee for this project because even though we had no background in coding and scripting, everyone was really helpful and very positive as we try all means to search for solutions or alternatives. Everyone contributed equally and yup, it was really great working with all of them! :D

Reflection
This project was truly a little beyond our abilities but I'm really glad we overcame it, as a group. Sometimes when it's not possible to solve something, approaching your friends for help might guide you to the light instantaneously. Though it was a tough process going through all the dreamweaver, fireworks, illustrator and photoshop, I learnt many many things that were not taught in class. For example, I learnt how to create an gif image through this project, how to grab codes from online sources and substitute the images with what we have and also to manipulate the codes and make it work our way. It was not easy deciphering and interpreting the foreign language (the scripts) but I'm sure we all learnt some stuff along the way. And I thought these skills are indeed useful as compared to learning theories. Haha. Just voicing out my opinions ya! :)

Also, even though I found the researching part a little redundant (because we are a research university), I did learn some stuff along the way too. E.g. how a lip surgery works and its costs, how to make sure you have a perfect face abiding the golden ratio and the rule of symmetry, etc. You can download the mask and overlay it with your face to see how much your face fits the golden ratio! :D

Other than that, I learnt that sometimes, we just have to make use of what we have and create things around it. For example, the gif images were used to generate interactivity now even though we didn't plan to use gif at all initially. It was kind of cheating but as long as it still works the way we wanted and it is effective, it is good. :)

Overall, it was a great experience though really stressful. Am really grateful for the extension of deadline. If not, we would definitely have been so dead. Haha. 

Thanks for the wonderful module! :D

No comments:

Post a Comment