CONCLUSION

First of all, this is the prototype of my whole pages.

EXPERIENCES

- Practice and improve more in digital drawing skills eventhough find difficulties in drawing human body structure.

- Learning Adobe Edge as software to create interactive ways and have many features similar with Adobe Flash and Adobe After Effect.

- Exploration of another tutorial video while previous tutorial can not be worked in parallax scrolling

- Experimenting several ways to import sound in Adobe Edge Animate 1.5.0 

- Learning that producing interactive web pages actually can be done with simple coding

PROS 

- Discover there is so many features could be used to improve interactive way in Adobe Edge Animate

- Learn to similiarize the references with my drawing style

- Realizing that myself could learn independently through online without many helps from lecturer    

CONS

- Unproper time management

- Not confident with my story and method that i will use

- Not consistent with character design and references. It came out not similar with references

MY STRENGTH

- Intentions to make character movement smoothly and details in visual

- Creating new and unique character but yet, still in normal human form

MY WEAKNESSES

- Slow in drawing and wasting much time in details

- Reckless time management

- Laziness in exploring another tutorial if once can not be worked

MY THREATS

- Time management

- Audio problem

MY OPPORTUNITY

- Learning another features in Adobe Edge as combination of basic After Effect, Flash, and Dreamweaver. They still have lots of features instead of creating parallax scrolling such as producing simple animation, game, web, etc.

pre-loader

As my lecturer gives me link about creating pre-loader with some codes in it. I tried it out. However, my page turned to be white and can not see my parallax scrolling visual.

Then, i found more simple tutorial about pre-loader without any codes. And my parallax still working well. But, i do not see any "loading" page before going to my parallax scrolling page. I assumed that my file size is not too big to use pre-loader page. I will try to see it in online ASAP.

Below is the tutorial of creating pre-loader.

And this is how my "loading" page is supposed to be looked like.

95% done...

I still have problem with music background as several tutorial can not be used to my parallax scrolling. Therefore, tomorrow will be continued with finding the way in solving my problem, otherwise i will do without sound effect.

Overall, my parallax scrolling works well as i still face difficulty in adjusting animation timing with scrolling down page in order to get the feeling of the story as "parallax scrolling" depended on how fast people scrolled down the mouse. If i made my animation timeline a bit longer, it will affected the picture can not be seen in full page as it has already being scrolled.

So, to avoid this, i try to shorten animation timeline in order to put character in whole screen. So, viewer could understand what the character actually do.

Cheers!

ADDING AUDIO IN EDGE ANIMATE 1.5.0 with HTML5

Here is some tutorial links from edgedocks.com which i would try soon

1. http://edgedocks.com/content/2013/12/using-audio-edge-animate-part-one
2. http://edgedocks.com/content/2013/12/using-audio-edge-animate-part-two
3. http://edgedocks.com/content/2013/12/using-audio-edge-animate-part-three

After following their steps which i followed from :

1. Edit the sound in Au with mp3 and ogg (export -> file) with same format as picture below.

2. Then, set mp3 file and ogg file in one folder

3. Next -> go to parallax scrolling file in adobe edge -> file -> publish settings -> publish -> "publish" folder will be directly inserted together with parallax scrolling An file 

4. Go to "publish" folder -> "web" folder -> COPY audio folder inside -> OPEN "parallaxscrolling.html" (mine) which is inside "web" folder in DREAMWEAVER

5. Once it is opened, under </div>, add more <audio> code like the picture below

6. Save dreamweaver file -> go to An file and preview in browser..

** It is supposed to be worked but in my case, it does not work at all eventhough those tutorials show it works really well...

ADDING BACKGROUND MUSIC TO PARALLAX SCROLLING

First trial -> failed! *again* ;;A;;

After watching this tutorial and see the trial works well, i decided to follow their step in my "parallax scrolling". However, it turns to be fail again eventhough i use the same code in "stage" action.

And this is my trial in parallax scrolling.

First, i let my "stop" action ON. Then, previewing in browser and see that music can not be heard. So, i locked "stop" action and preview again. Unfortunately, result is still the same.. i can not hear the music.

Then, using another way which i typed "music file location" from the beginning of the folder until reach where the music file is located. AND, it also did not work --.--

DRAG AND DROP TRIAL

Today, i planned to add interactive with drag and drop. However, it only "draggable" and can not be dropped properly eventhough the video has proofed that it works well.

I apply in my parallax scrolling prototype and ended up quite not interesting. So, i decided to replace it with "click" button since it is working well with my animation.

Below is the video tutorial for drag and drop.

ANDDDDD,, this is the result after trying in my parallax scrolling.

well, it is only able to be dragged without being dropped properly in certain object eventhough the video shows it works properly. 

FINDING SOLUTION for click button!

Okay, basically, there is misunderstanding before as i could do click button successfully in my last page! eventhough the interactive part i want to do is "drag and drop", but i ended up with click button as i have not found the solution to do with drag and drop.

After trying, i discovered that "object we want to be clicked" is compulsory to have this code !

Then, it is followed by another "object" which might give impact after "OBJECT with CODE" is clicked. In this case, i convert my "DAMAGED OBJECT" into symbol and name it as "mc_6girl1" which has animation of "DAMAGED OBJECT" inside.

It must be followed by "stop" action and label the timeline that we want to command in "OBJECT with CODE"

This is the example of what is inside the symbol of "DAMAGED OBJECT" -> mc_6girl1

Overall, click button works well. However, i still trying to find the way of repeating clicked for animation in order not to stuck with same images after it is being clicked. 

FAILURE in doing "click" button together with animation in parallax scrolling

Well, after watching tutorial of creating simple "play" and "stop" button with "click" mode, i decided to apply with my parallax scrolling. However, the outcome is not like what i want.

This is the link of "creating play and stop button" 

it is working BUT in simple file without parallax scrolling. 

After applying in my "parallax scrolling", it turns to be able clicked once and i can not clicked again. Also, the hand pointer cursor only appear once.

But, after several "preview", it can not be clicked anymore! D: So, i decided to continue my parallax scrolling with animation...

OBSTACLE that i FACE

Let's listed down what kind of obstacle i encountered during my journey in creating my "parallax scrolling"

FIRST, i have difficulty in set up every objects in order to fix the desktop browser eventhough i created the image in 1200 x 900 pixel whose belongs to mac. SO, the key is i have to set "WIDTH" in 100% for every objects after the object is applied in the layer with original size ( w: 1200 px, h: 900 px )

After that, all of my object can cover whole desktop browser properly :D

SECOND PROBLEM is about controlling the position of objects in order to get right timing for animation and makes the animation works well. 

SO, the solution is do not "convert to symbol" and let animation keyframe is set in regular timeline. After that, everything goes well eventhough i still need to adjust the length to get proper character movement when it is scrolled down.

### Do not forget to activate "stop" action at the end of timeline.

THIRD, i faced complexity in drawing my character! arghhhh, it is because i did bit of "rotoscoping" mode to create a "smooth" character movement. However, i still need time to cover this problem. 

As i felt my parallax scrolling is lack of interactive part, i decided to add "click" button in the 4th page and "drag and drop" button in page 5 as well as adding the background music to get the feeling of my story. 

Next part is about how i am going to do "click" button in my zoom-in object to change to another objects. 

To be continued... 

ILLUSTRATION ART

So far, it is the latest art of 4 pages scene which still to be continued...

second An progression

Video above is the 2nd progression of my prototype which i still face problem in making the "rectangle (rose)" zoom in back once it is scrolled back to the page. Overall, everything is done with animation and has less coding o.O

So far, here is the prototype of 4 pages and will move to 5th page.

CHARACTER DEVELOPMENT

So far, i started with the making of my character which consist of roses, fairy, and poor little girl.

rose

fairy

little girl

2nd try - animate the girl move from left ---> right

As i watched tutorials and tried to figure it out, it came out nothing. In the end, i asked Mr.Mozamir. He gives me some tips to increase my loading speed by download the edgeCommon.js and save in the same folder with my An file. It works after!

However, my placement of each object still not looked proper... So far, video below is how my trial looked like.

Finally, red ball is moving as i scroll down the page. The truth is we have to set the frame at the very beginning as my "stop" code is in the beginning. 

STORYBOARD AND CHARACTER DEVELOPMENT SKETCH

I don't know whether this one is considered as my rough or final sketch because i will be focus on my art in digital software later. I hope i could draw it well.

Hereby pictures below is about my sketch and has not been applied in digital form. I am still doing prototype to make sure my sketch is compatible.

First is sketch for character which is divided into a girl and fairy.

Below is storyboard. Page 2 will be compiled into 1 page as it only animate the girl. Overall is 9 pages. Hopefully, i could finish my first 5 pages clearly.

I will start the digital art once my prototype done.

1ST TRY ...

Finally! after watched lots of parallax scrolling tutorial and tried it out, i got these 2 videos which is really help me to do my "first page"...

ANDDDDD, this is my first outcome for page 1.. whose design still rough and mess up but i do not believe i could make it because i found some problems before... >.<

What i will do next is to show background of the city with the girl.. Will be updated soon.

1. Simple Understanding of animation with Parallax Scrolling

So far, i found some website which is "hopefully" useful for me because i have not tried yet. Will update it soon! 

First is how to animate the object from left to right using coding. The object will be moved once we scroll down the page. It is shown by the link below. 

http://www.youtube.com/watch?v=3BcjUoNaY7o

Then, it is followed by tutorial in converting the object into symbol and animate it inside. By doing so, center pivot needs to be arranged properly. 

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

Another story remake ---> "I MISS YOU"

Once we presented our ideas, we are not allowed to change it. However, as i tried to sketch my previous ideas, i felt really boring and does not follow what i want. I have not finished my sketch. Then, another ideas came and gives more spirit to sketch my new ideas.


Method : Parallax scrolling "vertical"

Software used : Adobe Edge Animate CC & Adobe Illustrator (PNG or SVG file), Adobe Photoshop (if necessary)

Title : I MISS YOU

Moral :

1. Always love our parents and respect them before it is too late to regret for.
2. Learning from our experience and failure help us to be a better person in the future.


SYNOPSIS :

There is a small family whose husband's job is a fisherman and lives near the seashore. Finally, his wife got pregnant and gave birth to their first child named "Picco". He is a spiritful kids and always play with his friends. He abandoned what his father always advise him to study. Until one day, his father has to sail away to another island and depart in the morning. Before his leaving, he gives Picco a glass bottle that he found when sailing through the sea. Picco always waits him to come back. Nonetheless, that was the last moment they were together, his father never come back... He kept waiting until he graduated and looking at the sea without his father appearance.

He is only able to regret of what he has done in his past life with ignoring every single words his father told him. Because of him, Picco is an undergraduate person now and he wants to show him that he can be a person like his father wants him to be.

However, it is too late to be regret. Then, he let his father's gift carried by the wave with his graduation photo inside and piece of letter which reads "Don't you want to see me now, dad?", the glass bottle follows the wave and goes further...


REFERENCES PARALLAX SCROLLING IDEAS : --- same with references below ---

STORY REFERENCES :

1. Hachiko
2. Before you grow up, you must fall in love ( http://9gag.com/gag/aVOQnX2/before-you-grow-up-you-must-fall-in-love )



CHARACTER DESIGN CONCEPT ART :

1. from Chinese poetry --> "But you didn't" http://www.chinasmack.com/2014/pictures/but-you-didnt-poem-translated-illustrated-by-chinese-netizen.html

2. https://www.behance.net/gallery/16279305/Tiny-Thief ---> for the shading

3. Christian short comic ---> for character design for kids ideas

ENVIRONMENT BACKGROUND

1. https://www.behance.net/gallery/Background-Design/290167

BEGINNER KNOWLEDGEMENT BASIC THEORY

First, link below is about my comprehension for Adobe Edge Animate which based on theory and introduction of Adobe Edge Animate CC before moves to technical skill...

http://helpx.adobe.com/edge-animate/tutorials/creating-new-edge-animate-project.html

short tutorial about PARALLAX SCROLLING HORIZONTAL

This link indicates how parallax scrolling is done in An. Nonetheless, the owner did not explain from the beginning and starts with animation part.

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

IDEAS PRESENTATION

After consult with Mr. Mozamir, he suggested me to listen a song called "across the universe" in order to get new ideas which never existed before. Based on what i heard, i started imagine a sorrowful story and ended up almost having similar story with my another fellows. 

Picture below is about my presentation slide and details explanation about what i will do to create my story. Whereas, storyline has already being given in the previous 2 articles. So, i only explained the storyline directly.

As for the next step, i have to deal with sketch of character and storyboarding before heading to technical part... xD 

REFERENCES ideas of using PARALLAX SCROLLING

Method i used is parallax scrolling as using interactive web comic is too mainstream.

Actually, my ideas coming from several parallax scrolling website such as :

http://www.flatvsrealism.com/

Another ideas appear when i looked into their illustration and how they do parallax scrolling. Animation story is successfully done as well as using parallax scrolling vertical and horizontal together. Then, little game is provided to entertain viewer.

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

From this website, i get the point of doing 3D form eventhough it is totally flat design.

http://makeyourmoneymatter.org/

I was amazed of how flat design could create unexpectable information story and their illustration give me new ideas to find which concept art style i should use to experiment with parallax scrolling.

http://www.drugtreatment.com/

This website shows how the same background from 1 layer moves to another layer smoothly. They only replace trees and small things. Next, button is given to see what is inside. By doing this, i get rough ideas in conveying the story through press the button.

http://diebeimdunkeln.de/

This website gives me inspiration of how soft color could be combined together eventhough the color is different (e.g. cream with blue)