Wednesday, 2 July 2014

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.


Tuesday, 1 July 2014

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!

Monday, 30 June 2014

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




Sunday, 29 June 2014

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.