10 February 2014 Documentation

Everything seems going wrong today. My hypercomic website suddenly cannot do parallax scrolling and the buttons to link every pages together also malfunction.

Luckily, there still got a bit times for me to fix the errors. As I not sure what happens to all of these errors, I try my codes on my own laptop and the school computers. Finally, which the help of one of my lecturers, I manage to get the clue for all of these sudden errors.

Apparently, my school computers do not allow my codes to import my external code library, which is Edge Common to from local disks, so the codes for parallax scrolling of my hypercomic malfunction. To fix this error, I further explore the possibilities of Edge Common on EdgeDocks and realize that I actually can use the external code library by using the linking my hypercomic pages to external link of the code library, which is the URL of the external code library.

In addition, I also manage to fix my button malfunction issues. From the video tutorial below, I realize that I actually using the wrong ways to code the functions of the buttons. I deleted all my previous buttons, and start all over again by following to the video tutorials shown below:

As shown in the video, the author actually use an ImageHolder to hold the images for different PNG image for normal state, mouse over state, and clicking state. Different from my own code previously, this method us much more easy and secure as I do not have to worried about calling wrong elements / attributes of the button, which is the mistake I made previously can cause my buttons to malfunction.

Last but not least, I also manage to centered my composition finally. I actually get my inspiration from this video:

From this video, it showed me the manual way to code my own css to make the composition align to center. After trying several time, I found the codes only functioning when I set my stage width to pixel, but malfunction when I set my stage width to 100%. From the situation I get here, I try using the Edge Common centering code, which is ES.centerStage (sym) by setting stage width to pixel, and it functioning perfectly!

However, to get the centering composition result, I have to scarify 100% width stage option, which is fullsceen background. The background currently only appear fullscreen in small screen monitor and laptop, but the users will able to see the blank white spaces on the both sides of the compositions when they view my hypercomic in wider and bigger monitor and laptop screen.

Thank God I able to fix all my codes, and finished my hypercomic on time, although still have some small bugs, I already very happy about what I have achieved so far.

References:

Cdn.edgecommons.org. n.d. EdgeCommons CDN Overview. [online] Available at: http://cdn.edgecommons.org/ [Accessed: 08 Feb 2014]. Annotation: I revisit this page again and try to explore how to link the code using external library URL. Finally manage to make my parallax scrolling of my website functioning again thanks to the help of this website.

Widjaja, S. 2013. Everything for Adobe Edge Animate, Edge Reflow and Edge Code | EdgeDocks.com. [online] Available at: http://www.edgedocks.com/ [Accessed: 8 Feb 2014]. Annotation: I revisit this website again today to look for ways to fix my errors of my hypercomic. Fortunately, I able to find the solution here.

YouTube. 2013. Adobe Edge Animate - Lesson 8 - Mouseover Image Button. [online] Available at: http://www.youtube.com/watch?v=EIDnE6Jzorw [Accessed: 10 Feb 2014]. Annotation: This tutorial show me the more easier and proper way to create a mouse over image button. It basically using a ImageHolder to hold the PNG images for different situation of the button. I able to make the buttons of my hypercomic functioning again after referring to this tutorial.

YouTube. 2013. How To Center Your Adobe Edge Animate Website. [online] Available at: http://www.youtube.com/watch?v=Cmogy0OZ74c [Accessed: 08 Feb 2014]. Annotation: Well, a very short video teaching me on how to center the composition in Edge Animate. I manage to do it when the stage width is set to pixel, but when convert into 100%, the code not functioning anymore. From this result, I try the edge common centering code with static pixel width stage, and the centering function of the code functioning again, with the lose of ability to make my hypercomic background fullscreen.

9 February 2014 Documentation

It's like the end of the world for me. I cant managed to put the composition to the center stage...

For Edge Animate, I am able to look for tutorials for parallax scrolling from youtube, which I just follow and the instruction and just using a line of code to make the parallax scrolling work for me.

In this tutorial, the author show steps to steps how to create the parallax scrolling event using Adobe Edge Animate by just using one line of simple code after importing the external library, the powerful Edge Common. I further read the documentation about this code library on EdgeDock to have a deeper understanding on how to use them properly. 

After some trial and error, I managed to do simple parallax scrolling hypercomic, but I another big problem I have face is I can't make my composition align to center when my stage width is set to 100%. The code introduce by Edge Common and even EdgeHero doesn't work for me and I can't manage to figure out what the problem behind this situation. 

I guess I just have to give up centering my composition.

What does the saying “Time is Gold” really meant?

People often use this saying to teach the young to seize the day and not to take time for granted.

Well, for me I truly feel the pain now!

First, I do not have gold. Secondly, even if I have 10K of gold now, this cannot buy me a few extra days in my life to do my project. 

I had been focusing a lot on the drawing. Being able to create your own comic is exiting and it gives me a big sense of accomplishment. I know that I need to balance the time allocated for both drawing and coding but the urge to complete the drawing triumph over the desire to do the coding most of the time. I guess this is the most painful lesson I have learnt from this few weeks of learning process.

References:
YouTube. 2013. Parallax Scrolling Made Easy (Adobe Edge Animate Online Week, Episode 9). [online] Available at: http://www.youtube.com/watch?v=ywbgHqc3C0M [Accessed: 07 Feb 2014]. Annotation: A very useful video teaching me how to do parallax scrolling in Edge Animate. I able to do it in the first try, but wonder why unable to do it again after I create second webpage. The video is a bit too long for me as I only want to know how to do the parallax scrolling.

Cdn.edgecommons.org. n.d. EdgeCommons CDN Overview. [online] Available at: http://cdn.edgecommons.org/ [Accessed: 08 Feb 2014]. Annotation: The Edge Common library found by me when looking for how to do the parallax scrolling in Adobe Edge Animate. A very powerful external .js to do parallax scrolling by using only single line of code.

Edgehero.com. 2013. Edgehero - Adobe edge Animate community. [online] Available at: http://www.edgehero.com/ [Accessed: 08 Feb 2014]. Annotation: An external library found by me when looking for ways to center my composition in Edge Animate. However, this is not very useful as the effect only applied on none animation object.

W3schools.com. 1999. CSS Tutorial. [online] Available at: http://www.w3schools.com/css/default.asp [Accessed: 08 Feb 2014]. Annotation: A website recommended by one of my lecturer. Consist of tons of tutorial about HTML and CSS coding. The main side I look for when I found external library unable to center the composition for me.

Widjaja, S. 2013. Everything for Adobe Edge Animate, Edge Reflow and Edge Code | EdgeDocks.com. [online] Available at: http://www.edgedocks.com/ [Accessed: 8 Feb 2014]. Annotation: The EdgeDock is the website to introduce the function and feature of edge common. I learn most of the tutorials about using edge common here.

7 February 2014 Documentation

There is no more extra time remaining for me to do final refinement on my storyboard, and thus, I just put some simple gradient to make the storyboard look better than previous version.

2 February 2013 Documentation

Is Chinese New Year holiday break now, but I don't even have any extra time to celebrate with my family. I have used all my Chinese New Year holiday break to look for the solution to fixed Adobe Muse parallax scrolling problem I have faced.

But sadly I can't found any solution, the only choices left for me is to switch to Adobe Edge Animate, which allow me to use timeline to control my comic panels animation. Here are the examples that I have found:

It's a big trouble for me to suddenly switch to Adobe Edge Animate as I do not have enough time to learn deeply about the Adobe Edge Animate. The remaining time doesn't allow me to explore more possibilities of Adobe Edge Animate, so when I found Adobe Edge Animate can do what I want to achieve, I have no choice but to switch from Muse to Edge Animate although Edge Animate looks so difficult for me.

References:
YouTube. 2013. Parallax effects and motion paths using Animate CC. [online] Available at: http://www.youtube.com/watch?v=W0-JYMh8SwM [Accessed: 07 Feb 2014]. Annotation: The very first example I found on youtube on using Edge Animate to create parallax scrolling. However the parallax scrolling show here do not synchronize with the timeline event.