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.