The Conclusion

The experience of producing an experiential media

Throughout these experiment of creating the interactive storybook, what I enjoyed most was testing out different medium that I hardly use such as water color and poster color to do the visuals. I wasn't having much hard time learning the water color / poster color as I already know the very basic but to produce something out of it is entirely a different matter. Hence, I have to look through some tutorials and interestingly there are several videos of it. Surprisingly, there are quite a number of techniques of coloring in using these water based medium.

Sometimes getting what I want to do for my final is a little hard as there are not much example of these kind of interactive. I have a lot of hesitations along the way and totally clueless of what I want to do. I have to force myself to decide what I really wanted to do or else I will be wasting more time. Luckily enough, I can decide on something before a certain dateline for idea generation and color testing.

It also something different as I get to learn a whole new application without guide all the way. It can be hard but I can say that I only used logic and simple scripts. I wouldn't say that I fully explore the application but at least I managed to do something I wanted to do from the beginning of the semester. As I used the simple script a lot, I have to think logically in order to make the script functioning and I used many repeated scripts.

The pros /cons in developing design

I have to think of the consequences of the medium I used. I've thought about if I were to do in water color like what I have said before, I might have confusion on how to do the animation part. Hence, my character design changed from drawings to vector illustrated. However in a way if I were to do the watercolor based design, it will get a different feel and I think it wouldn't be bad at all. At least I get the experience of trying out the watercolor to be my main medium despite that I changed to digital vector.

When I decided to do on a vector illustrated, I didn't really create something different from what I always do. The only difference was I developed a cleaner design compare to my previous characters. Comparing from the watercolor based design with the vector design, I can do better and faster with the latter design. Other than that, I just did one for each item, for example the tree, using the same tree I can duplicate it into the storybook. Overall, at least I have my own character design rather than being influence by the Japanese animation.

As I did the visuals in separate image file, I can place it anywhere I like. However the stage seems wider than visuals that there are many gap in between my visual (if I were to follow the exact way I pictured it before). Hence I have to adjust the width of the characters and add a few more to fill of the space in between so that it doesn't look empty.

Below are my SWOT for during the progress of doing this experiential project:

Strength

I can finish the project before the dateline a few days earlier if I do spent the whole day doing it. In fact,  I managed to finish this project to how I proposed it and I'm glad that I even have the time to add on. If not, it will look very plain.

I like the time spend on the character designing so the characters turns out to be better than I thought (initially I was thinking of doing the characters based on the Japanese Animation style but I'm glad I didn't). I learn to experiment my own style of drawing or character design and I think it's a good experiment for me.

I still stick to my story despite having a lot of hesitation on my method of interaction I want to create the storybook. It's better than to change both at the same time, it would have taken more of my time if I do so.

I can use the script that I know to do different things / interaction but I need some time to think before I start scripting. This makes me use minimal scripts.

Threats

Threats? Well, one important thing is that I wasn't sure whether it will work in Edge for what I have proposed. I was unable to solve a few in the first prototype in term of scripting so I ended up a few project file and I even tried separating the scenes into different files. However in the end, I make the stage into a long one and put all scenes into one project file.

Opportunity / gain

Doing this project makes me think a lot of the outcome even before I started on the prototype. There are many things I want to try on but I stick to what I proposed but visual wise I did change it from watercolor to vector illustration.

I managed to independently make the project to complete according to what I wanted it to be. Though it looks kind of plain that I have to add more interactions and animated visuals. I have to refer many references which also gives me the inspirations in doing this project. I learned many techniques in coloring, character designing and I get to observe more visuals done by others.

Technical wise, I get to learn a whole new application and maybe someday in the future it can be useful too. I can see that some application works the same just some different scripting will do.

Weakness

Time management. Yes… I do realized that I have time management issue but I can't help being distracted into doing other things. I hardly follow the schedule I have done for myself in the early semester which I am disappointed at myself for that. It also results me in staying all night just to finish it in time.

Next would be hesitation. This probably leads to my time management problem too. I couldn't really decide which medium I want to pick or what kind of page (either a parallax scrolling, a circular scene or etc). I should learn to decide my choice firmly and strongly goes with what I have confirmed with myself earlier.

100% done

Since I have no idea what else to add in, I added the shadow of the character to make it look more real and more natural. I mean, who doesn't have a shadow when they are under the sun. Anyways, I just test out the final more including every single possible way of navigating and I tried to correct the errors. Finally I'm done with this experiential media. So here's the update of it,

I added this to emphasis the little girl saying goodbye as the children starts to go back home.

And… I put it there. It will blink so that it doesn't look still.

Meanwhile at the bottom is the scenes with the shadow on……

Check out my latest post for the conclusion of this project of the semester!

Almost there!

I added some extra "features"… I don't think that's what I could call it. Anyway, I added the hover for the navigation buttons. I also did the last scene in a shadow type to indicate that it's locked with a padlock in the middle (when hover it unlocks) but that page will not be revealed. I managed to fix the scene 3 children to go back to its original when the page is return, so the reader can play it again. A little more interaction or animation would be good for the story so I might add a little before I'm satisfied.

Here I created the shadow in Illustrator first before I import it into Edge.

This is how I rearrange it in Edge. I followed my previous proposal for the scene 6 and this is how it turned out to be.

To make it more "locked" I added in a padlock. I also did this in Illustrator and I added the yellow feather from Photoshop so that it will look more stable.

Locked

Unlock

Making all the arrows into symbol so that I can add in the hover color.

As usual, the overall of the latest tryout:

80% done!

I am finished for what I have proposed before and the interactive are working well already. Despite that, I felt that the interactive of the proposed story wasn't really good enough so the remaining 20% will be me searching for more ways to add it in. Other than that, the hide and seek for scene 3 only works once hence the audience wouldn't be able to play again that part. So, I will try to fix that so that the audience can play it anytime they enter the page.

And the final outcome is…..

Progression in tutorial class

In the class, I managed to continue where I last did the project from. I can do the scene 3 part which is when the reader read, it can change into different pose. This however, I couldn't do in the prototype before. 

So I currently have the problem with the scene 2, which it can't be continuous clicked. However, so far I just took out the girl whom is supposed to be at the scene before the user click on any play set.

A more detail prototype

So I stayed at all night to do this prototype that I have last left it. I added more of the remaining visuals and some of the button is functioning well already. I added most script and converting into symbols for the first scene and the second. The buttons in the second one was not functioning very well but it still works sometimes.

An extra piece of art for the navigating section.

I made the girl in scene 1 into a vector file by recreating it in Illustrator using the previous visual I have done before.

Scene 1

So here I added the title at the top and an arrow to navigate to the next scene.

I had the swing in three different part; the string, the metal piece and the girl.

Here I do the swing animation but it didn't turn out well and it is very obvious stretch in it.

The story in white and the instructions are in pinkish red. It is so that the reader can at least know what are they suppose to do in that particular scene.

So yeah, the buttons in the scene doesn't work very well yet and I'll try to fix that. For now this is how much it is added and scripted.

Prototype with visuals

So I added the visuals into the prototype to see how it will look like. It turned out that my visuals are smaller than I imagine in the final look. However, I did a little stretch (which I'm not supposed to) on the visuals so that it fits to the stage size. I do think it's better if it's a little stretch, if not it will be a lot of empty spaces.

scene 1

scene 2

                                                                           scene 3

scene 4

scene 1 updated

scene 2 updated

scene 3 updated

scene 4 updated

scene 5 updated

This is the code where I can play a symbol label from stage.

My current progress:

For the slide's button animation works but I would like to do more adjustment on that… It looks a little unnatural when the girl slides down….