Schedule

This is a rough schedule on what I will (if remember) going to do. For the last few weeks I purposely I left it blank just in case I couldn't accomplished what I had to do before.

For now,

Character design (checked)

Storyboard (checked)

Start tutorial!

Since I am not very familiar with Adobe Edge, I thought maybe I should start again with the very basic step. Coincidently it have the click function I wanted to added it in.

I used back the character for my game design in the previous semester. 

Basically, I learn to control the next animation by adding a trigger (sym.stop();) and start play again in the action of the button (image to be click). That way, when I clicked on the princess, the text will animate into the screen.

A recording on how it turned out to be. I'm not really sure how to share the file here without using the html, wanted to export it as a movie file but I not sure if its possible. Will try to check it out again. For now, I could find it yet.

Tutorial from:

Starting from 12.52

http://www.youtube.com/watch?v=Jaq5OEp4-cE

Character design & page layout

Since I'm doing on the horizontal scrolling, I did the sketches of my pages on how I want it to look like in the final outcome. I sketched it in a horizontal script with dividers to indicate the different scene. It would look like the parallax scrolling but it is just more to animation to the next page with a button.

Try doing different poses for the girl using the character design I picked from the previous sketch. Yesterday we were told to try to localize our story if possible, though it was not my intention but I can try. Since my story is more to general so it is not possible to localize it, just change the clothing and the hair color should be okay.

I wrote down what I have to do while using the drawing reference from the previous sketch. In every divider, I try to make it link to the next scene so that it doesn't seem to be cut to the next page. In some poses the kids make and the playground scene uses some reference I found through google. Despite the reference, I am planning to use the park near my house as reference since the park I am doing is similar.  Thus, I will take the photo reference soon when I have the time.

The kids drawn outside the storyboard is the children's hiding pose and the pose after is found. For one of the kids (the boy nearest to the screen), I want to use his found pose as a link to the next page of the scene 3. The one in triangle will be the one animated (not sure if it's obvious as I draw the shape in a light stroke)

http://image.shutterstock.com/display_pic_with_logo/1031614/128748893/stock-photo-the-funfair-playground-illustration-for-the-children-128748893.jpg

I got the reference for the background of the park scene where I will add in the trees especially for the first scene.

http://www.illustrationsof.com/royalty-free-playground-clipart-illustration-1138936.jpg

Here I used the flowers and the kids pose for the kids after they are found in the hide and seek scene. The cheerful environment is very suitable especially when it involve children playing. Usually when we are found while playing hide and seek, we will feel satisfied and want to play again. So this is why I make the kids happy when found. I did thought of using a lower brightness / opacity on the kids while they are still hiding. Not sure if I should do a short animation when they are found, that is still in thought.

http://comps.canstockphoto.com/can-stock-photo_csp14795187.jpg

I wasn't sure how I wanted to do scene 4 as what I imagine was different. However I had to change before of the link of scene 3 & 4. So I searched for reference and I found this and I used this though it is a little different.

http://www.directoryofillustration.com/images/artistimages/images/6247_92842.jpg

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjND7nfQVYVfNPaPvt6fvli7iYnahF2d_34ZBoI-VDQ6eCowsfU3yZFxfkfwskz2MVKLcvuHZGpowLIbYrzrP11BjZE_mWmLLmxK4se5rwtlTouWogS2f5vrpqUOX1aAvtmKbEeeRBfo0o/s400/Mai+S+Kemble+watercolor+illustraion+5.jpg

Illustrations that might be helpful in terms for the color scheme and technique in using water color. The first image is shown water color mixed with color pencils, so I thought maybe it is worth the try.

Starting experiment!

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.

Examples of horizontal parallax and scrolling :

http://www.reverenddanger.com

http://www.gavincastleton.com/index2.htm

http://www.drugtreatment.com/#next

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.

Finalized idea

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.

Character References: 

http://blaine.org/jules/ramos_monca_55_lr..jpg

http://whattoreadtoyourkids.files.wordpress.com/2013/10/sophiessquashinset.jpg?w=300&h=187

http://blaine.org/jules/Spot%20172dpi1.jpg

http://www.awn.com/sites/default/files/image/featured/2918-little-matchgirl-matchless-watercolor-experiment_0.jpg

https://img1.etsystatic.com/014/0/7607560/il_340x270.436713979_mcpq.jpg

Overall reference:

http://www.axure.com/forum/6-x-tips-tricks-examples/4595-interactive-kids-storybook-worm-story-animation.html

http://www.wanderfulstorybooks.com/Storybook_Sampler

What inspires me most:

http://oakleighss.edublogs.org/2012/11/12/the-artifacts-new-interactive-storybook-app/

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.

Proposal Conclusion

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.

Introduction to Metaio

Finally, we learned how to use Metaio Creator using its basic steps. Learning was kind of fun in a way especially when the augmented reality works. However, there are some I couldn't do it due to some technical error. I couldn't sign in but I already registered though.

We begin by picking a marker. We are to pick a marker (image printed on a piece of paper) and download a pdf file. From the pdf, we are to pick the image same as the one we pick on the paper. From the image, we added a 3D model sample given by the file in it. 

So after we adjust on how we want it to look like, we previous it. This is the preview of how it would looked like in the outcome. Basically, we need to held the image marker properly so that it can read the marker.

.

And more other models tryouts… 

Also, we are introduced with Metaio toolbox. Where instead of just using the given model examples, we can also trace the 3D object such as hats, bottles, mouse and etc. 

New Idea Proposal

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-.

Reference:

http://www.draculacomic.co.uk

http://www.dead-on-arrival.co.uk


IDEA 2

- Parallax scrolling nursery rhyme-

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.

Reference:

http://unahistoriaquedalavuelta.com/en/

- 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.

Reference:

http://apps4moms.net/2012/01/bizzy-bear-on-the-farm-interactive-storybook-game-app/

                                         http://www.youtube.com/watch?v=E5YOcNFIFZE

http://www.youtube.com/watch?v=HpuYAgus1cY

                                          

http://www.youtube.com/watch?v=bI20_tlErZY

IDEA 5

- Augmented Reality-

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.

Ideas Proposal

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.

reference: http://www.exsus.com/highway-one-roadtrip/


IDEA 2

- parallax scrolling short comic -

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.

                                      

Reference: http://www.flatvsrealism.com


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.

                                       

Reference: http://neomam.com/interactive/13reasons/


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.

               

Muse introduction ~

Today we learned for the first time to use Adobe Muse and also was shown a few sites regarding muse.

We begin by inserting a new site where we created a page like we used to in Dreamweaver before. It has a homepage and about, gallery, contact us.

In the master A (which is for all the page in it),we added in the page title and navigation bar in it.  

While in separate (in the gallery page), we added the light box image where we added our own image in it.

In the about page however, we learned to do parallax scrolling using muse. Honestly it is easier than in edge but for now I think it is less animated (as in more to changing page in a scrolling method). So here we used pin and anchor. We anchored a part of the page and then we added button to navigate to the anchor point. To keep the button following the page, we pin it from the top middle point.

This will be the for the phone. We just added in another page especially for the phone. So here, we just need to copy from the desktop and rearranged it into a phone page.

Here is another page where we learned more about parallax scrolling.

This is done based on our understanding during the lesson and it is done after the lesson. 

Amazing reference sites

I thought parallax scrolling were really interesting and fascinating so I decided to find more reference in parallax. Then, I found a few interesting sites that are really eye catching.

- http://makeyourmoneymatter.org

- http://lostworldsfairs.com/atlantis/

- http://discover.store.sony.com/be-moved/

- http://boy-coy.com/#contact

- http://www.numero10.ch/fr/home

Edge Skills upgrade!

There are three exercise done today in just three hours! Anyhow, the skill learned are basic but it was cool. We learned button, parallax scrolling and drag&drop.

In the button exercise, we learn by making three button and we separated them by pages; page 1, page 2 and page 3. To navigate, we added three circles, each represent one page.

We begin by adding the text, circles and rename most of the layer for a more organize arrangement.

I rearranged the circles as we are free to do so. For each buttons, we turned on its display mode and add in the keyframe. We switched off for the part where we didn't want to display.

the button and the page:

red - page 1

yellow - page 2

green - page 3

After that, I added in the background color.

Next is the parallax scrolling. To me, this is the most interesting one and I may consider to use this method for the assignment outcome. Maybe it would be a storybook in a parallax scrolling form. - Still considering and while reconfirm again after the other applications' tutorials. 

Adding some coding into the stage.

Here we can scroll the page while the text's opacity changed as I scroll more than half.

Add in image to make it more cool? Well, it certainly looked better than just plain text.

Trying it in fullscreen. Tried making the content to be centered but this is what I got. It's not as center as it seems…..

Lastly, drag and drop in a web using Edge.

Separated all the images in Illustrator and saved them in SVG (Scalable Vector Graphics) file. That way, the images can be edited in Edge and can be arranged.

After resizing them, I separated them in this manner.

This is how it looked online.

The coding to make the drag and drop mechanic.