After the presentation today, I would consider storybook to have a horizontal slide. Instead of just sliding, it will have an arrow to go to the next page and instead of of a totally different scene, the background (- or any visual) is connected to the next slide. This, is very similar to parallax scrolling except that it uses arrow instead of scrolling.
Since, we should start experimenting already, I started on the character design. I tried drawing the girl in four different ways from different inspirations and this is what I get:
From here, I would pick 2 & 3. Hence my character style would be the body of 2 and the face of 3 since I think it would be cuter that way. Besides, drawing small kids like that would be easier to color.
For the color, I may consider physical watercolor painting while digital painting as an alternative. Before that, I would have to consider practicing my watercolor as it is not my forte in it. I will take this as a good opportunity and reason to learn this technique.
I'm finalizing on doing an interactive storybook with my own storyline. Since some of the seniors had done this, I would like to make it more interactive then the simple gif in it. Some I will have to research more and also based on what I had in mind.
The story board of the story…
- animated text
The following is broken down into pages.
1. There was a pretty young girl who is always seen in a white and pink dress. She is sweet and cheerful.
- Her hair and dress blows in the wind (gif)
2. Everyday, she is seen playing in the playground all by herself the whole day.
- tap on the playset to see her play
- animated background
3. Her favorite time of the day would be in the evening where the other children would play around in the playground. Every time, she would play hide and seek with them as it is one of her favorite game.
- Find the hiding children.
- When found, the children do a different pose.
4. When it is time to go, she would just wave goodbye to the kids. No one ever saw her leave the place ever since she has first seen here.
- The girl's hand wave (gif)
- moving side characters as they are going back home
5. As a young boy is walking with his mother, he told her that he had fun and made new friend. He talks about the girl and he was suddenly curious. He asked his mother, " Mom, why her mother is not there to pick her up?"
His mother just look at him and told her son, "That's because she can't go back home anymore".
- Background moves as if the character is walking (bg gif)
- characters move up and down
6. As the mother look back, it is revealed that the girl died a few days ago in a car accident near the playground.
- character turns to look back (gif)
-zoom out of the girl in the park to see the flowers outside the park.
One of the most interactive storybook, The Artifacts by Slap Happy Larry.
One of the feature that I like most and would like to implement it into my storybook is the ending part of it. Where reader swipe (wipe) the screen and it changes into another scene. However, I am still searching for it.
So, the idea that I have picked is the IDEA 4. It is about doing an interactive storybook with animated gif in it. However, I wouldn't be using the Little Match Girl's story but instead I created a story myself.
So, the story is….
There was a young girl, pretty and always seen in a beautiful white and pink dress. She was always in the nearby playground, playing by herself. Sometimes, when there are other kids come to the ground, she would play with them. One of her favorite is 'Hide and Seek'. However, whenever the children's parent came to pick them up, she could only say goodbye and was left alone again. A young boy told his mother about his 'new friend' and it is revealed that the girl died in an accident near the park not so long ago.
That is just the rough of the storyline but it would be something like that. The color theme I am thinking for this storyline is the faded color or watercolor effect. So it may seem soft and sad at the end.
In the playground seen, where the girl is playing by herself, I would like to add the interactive part such like if the reader tap on the swing, the girl will be playing on the swing. If the slide is tap, then she is playing with the slide and etc. Something similar to this: http://teacher.scholastic.com/clifford1/flash/story_4.htm , where reader can change according to what they like.
As for the hide and seek part, there will be a few kids hiding and reader need to 'find' them.
As planned as it may sound, there are a few changes I can make in the future regarding to what new technique I can implement on the storybook or what feature can I add in. But so far, this is what I have in mind.
In the previous one, there were too many parallax site ideas. Hence I was told to have more varies in the type of interactive web. So here are the new ideas;
IDEA 1
- Interactive journal-
From the first idea previously, I thought of doing the 'Little mermaid' but I was told the story is too cliche. So I keep thinking on how to twist the story and making it into a bad end.
Then, I came up with a better idea. Why not I write about Sirens instead? Siren is a mythical and beautiful creature that looks like half girl and half bird. They sang beautifully and they lured sailors with its melody. When the sailors fall asleep, that's when the siren kills the men of sea.
Instead of doing the typical 'storybook' on telling the story, I thought of it as a journal instead. That way, I can described the siren more detail and it gives more chill in about them. My thought of this is to make the usual flipping pages while the images having animation in it. Too simplify, it's like a journal with moving images.
The color theme for this would be dark and mysterious. The background can also be in pattern and texture - in other words, it's not the simple background but with pattern-.
In this idea, I thought of making the parallax scrolling of 'Humpty Dumpty'.
Humpty Dumpty sat on a wall, Humpty Dumpty had a great fall. All the king's horses and all the king's men, Couldn't put Humpty together again.
Using the lyrics of this nursery rhymes, Humpty Dumpty will be animated as the lyrics scrolls down and finally ended up with a twist. Instead of just the four rows of lyrics, the last two will be added by myself. However, the words are still undecided.
The color for this would be the light 'watercolor' effect of the fading colors.
IDEA 3
- Journey of a stray cat with choices-
As the title said, it is a journey of a stray cat from it was born until death. The way I want to put this is that it would be like an animation however it also needed the audience to decide. In each difficulties the cat have, the audience are given two choices; to help or not to help. Each answer will give the cat different life journey. In short, a view of life from a stray cat's point of view.
For example, if the audience keep refusing to help, the cat will die tragically in the roadside or something like that. Other wise, the cat would be living under shelter with love and food provided. In a way, it kind of act like an awareness site to adopt strays.
Thinking of making it interactive with the mobile, if possible.
- Where there have two different perspective of a child when people decided to help. So I got this concept idea as I think it was really something different than most awareness campaign.
IDEA 4
- Game and animation in a storybook-
A short story based on Hans Christian Anderson's 'The Little Match Girl'. It's about a girl who had to sell the fire matchstick or else she could go back home. Since she was feeling cold outside the winter season, she lit the match. Every time she lit the match, there were merry things such as a warm fireplace, delicious dinner and a huge christmas tree. However, it vanished after the the fire was out. When she lit another, her deceased grandmother appear. Wanting to be with the only person who loved her, she lit all so her grandmother wouldn't have to leave her. Soon, the lights becomes brighter and she followed her grandmother. From the view of the people passing by, they could see that the girl was froze to death and had a match lit to 'warm' herself up.
In every page of the story, will have something to drag and drop in order to play the next animation / next page. In some pages will have the animated gif, for example the snowfall and the lit fire of the match stick. In every lit match, there will be a short interactive game in it. For example, the first lit match is a warm and delicious dinner. Hence it would be like a catcher mechanic game where the girl have to 'catch' the good dinner.
In visual wise, it is a little dark and cold, also I would added in some pattern in it instead of the normal plain background, which include the clothing and other fabric material. I thought of adding a pattern shown in a website given by my lecturer : http://codepen.io/msurguy/pen/sbIio. From the same site, I can also explore more pattern to be added in the story.
If possible, I would like to make it more interactive in such way that the reader can lit the match by rotating their devices such as the reference in IDEA 3. However, it may seem to crash with the drag and drop concept.
Taken from the previous proposal since it is not a parallax and I think it's a good idea. There would be a poster of a model wearing beautiful clothes and one of it is made out of fur. Usually people would just admire the design and beautiful model. However in the augmented reality, it shows the horrible origin of that fur clothing and how the animal is brutally killed for it.
What am I going to do for my final? Well, first I would have to research on what I want to do and something that is different from my other classes. I am told by my lecturer that we have to come up with five ideas and after researching and brainstorming on what I want to do, so here goes:
IDEA 1 - A parallax scrolling storybook -
Here, I wanna make a parallax scrolling storybook containing fairy tales. However of which fairy tale, I haven't really thought yet but I may consider "Little Mermaid". I want to make the anchor points are divided by pattern of the waves or something like that, just like the reference (link at below), where it is separated by the clouds. While that, the main character will moves down following the scrolling page and each anchor point will have the a couple of paragraph of the storyline.
A simple and short comic that moves when the page is scroll in a certain spot. Got the inspiration from one of the seniors work. However, not entirely the same. Maybe add a few more pages and slighly longer storyline. Probably instead of going down, it scroll to the side making the comic linking more to each page.
IDEA 3 - Parallax scrolling -
This I shall called it "Anime VS Cartoon". It will be a page (using parallax scrolling) of explaining what's the different of both anime and cartoons, since most people can't differentiate it. So basically, half the page will be cartoonish while the other looked like anime. I love this idea but may seem a little hard for me but it worth the shoot.
IDEA 4 - Scrolling pages of fact-
A site where it explained of a certain fact in different pages and interactively. In this case, probably the facts of a cat or something similar. Also, from a page to another, there will be a link between each other.
IDEA 5 - Augmented Reality -
Still considering this technique since I'm lack of exposure on this. However, if I were to do this, I would do on a canvas / poster about something really beautiful. It looked nice but when scanned the code, the horrible way of how it is form. For example, fur that people use for fashion and for accessories and behind the scenes is where the fox / any other animal with fur is being tortured to get its fur. Basically it's more to protecting the animal by making the audience aware of this situation.
