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.

28 January 2014 Documentation

Time is limited now, luckily I manage to digitize all my storyboard on time. Here are the remaining storyboard:

21 January 2014 Documentation

It's lesson 10, which is the week for my artefact alpha testing.

My progress so far is able to digitize until the 6th pages of my storyboard.

I also manage to do simple parallax animation by using the storyboard I have digitized so far.The first problem I have found is the masking of the panel. I do not want my panels visible to the audience before they entering the canvas. Luckily I found another tutorial on how to do this easily with using the scroll effect of the elements which is set the scrolling of the an image to horizontal 0px and vertical 0px to make it as the mask to hide the panels before they entering the canvas.

Here are the result of my alpha test:

At this moment, I discovered a big issue, which is I am not able to stop my panel at certain pixel by using Adobe Muse. One of my lecturer actually suggest me to switch to Adobe Edge Animate since Adobe Muse had this limitation and I am not able to search for any solutions.

Reference:
YouTube. 2014. Adobe Muse CC Parallax Scrolling Tutorial | Scrolling Image Masks. [online] Available at: http://www.youtube.com/watch?v=8m2Lg241e3A [Accessed: 21 Jan 2014]. Annotation: The tutorial I found on Youtube on how to use static image to mask the unwanted area of the stage of my browser. Very useful for me as I don’t want readers to see my comic panels before they entering the stage / canvas.

13 January 2014 Documentation

From the lesson I have learnt last week, I have forced myself to start digitizing the as mush sketches as possible to show on today Work In Progress Presentation.

Before I start digitizing, I have looked for some tutorial and found one of them which is very useful to me:

I found this tutorial very useful because it is very comprehensive and able to create the sense of overlapping line by intersecting multiple brush together and delete the part that I don't need after expanding the brush stroke. It basically using Live Paint tool to cut the brush stroke into pieces, and then when you expand the live paint, you will be able to delete the part that you do not need by using direct selection tool. By using this method, I also able to save the line inking in one layer and do the live paint colouring on another copy layer so that when I need to modify the colour in the future, I will not accidentally modified the line inking.

By using these simple method, I have manage to create my digital artefact easily and finish digitizing 2 of the storyboard in just one week times. So here are the sketches that I have digitized:

I have divided the character into body and head to make them reusable for my future digitizing.

For the storyboard, I have manage to finish the the first page of it:

For Adobe Muse testing, I have found how to do basic parallax scrolling event by learning from this video:

This video basically teach me how to show different object parallax scrolling in different speed by adjusting the key position in the scroll effect of the element. However, I still think that using key position to do the parallax scrolling is a bit complicated for me.

References:
YouTube. 2013. Adobe Muse CC Parallax Scrolling Tutorial | Understanding Key Position. [online] Available at: http://www.youtube.com/watch?v=5OOLEztI-so [Accessed: 16 Jan 2014]. Annotation: The very first video I found on Youtube teaching me how to do parallax scrolling with understanding the scroll effect and key position of the element you want to apply the scroll event on.


YouTube. 2012. Ultimate Inking and Coloring Tutorial for Adobe Illustrator CS5 (short version). [online] Available at: http://www.youtube.com/watch?v=R5wW_65iAiU [Accessed: 01 Jan 2014]. Annotation: A very nice tutorial that teach me how to ink and color my pencil sketches faster and easier by using brush tool, expand the appearance, convert into live paint, expand the live paint and delete unwanted part with direct selection tools.

7 January 2014 Documentation

So, today is the week 8 for my project production and I am sure that I already fall apart from my Gantt Chart schedule. Today, I had an interesting consultation with one of my lecturers.

Actually, she want to check my progress of project, so when I show her my completed storyboard, she was quite happy about it because I have finally finished the storyboard. However, when she refer to my Gantt Chart, she notice that I am totally fall behind from my Gantt Chart schedule, so she want to know why I can't catch up with the Gantt Chart that I have created.

After the consultation, she finally help me to analyse my problems. The main factor that make me to stop proceeding to digitize the pencil sketches is because I am afraid of error and imperfect. I always feel that the character poses of my storyboard are not perfect and need refinement, and thus keep delaying my progress of digitize the pencil sketches. In addition, I have quite a hard moment drawing the pencil sketches, so when it come to digitize them, I feel that digitize is much more harder than pencil sketches, causing me to scare and refuse to proceed unconsciously.

I feel very fortunate that I have such a good lecturer to help me figure out what my main problem is. If I remain this problem unsolved, I may face more difficulties in the future if I decided to be an designer. So, with her help, I start to analyse what I should do to overcome my problem. First and foremost, I should start digitize the sketches instead of continue thinking how difficult it is. Never try never know. I need to learn from trial and error to improve myself. Moreover, digitizing the sketches doesn't mean I can't modify the artwork any more. I can actually finish digitizing the sketches then only start modifying them when there are free times. Furthermore, my lecturer also advised me that I can do a college standard artefact first, and from the experience I have gain, slowly improve to professional level in the future. The most important thing is I must take the first step, then only can proceed to the second and following steps.

Stop thinking and start doing when I am stuck, this is the most valuable lesson I have learnt so far during my project production.

1 January 2014 Documentation

It's a Happy New Year! Well, I still need to continue my project though...

In this few days, I have forced myself very hard to complete the entire storyboard so that I have extra time to do the amendment if needed before going back to school. So, here are the storyboard that I have drawn with all my efforts:

So, basically here are all my storyboard sketches. To be honest, I decided to create a hypercomic artefact because I personally like to read Japanese comic, also known as "Manga", since I was a child. Doraemon was the first manga I have read and from that experience, I am addicted to reading comic and hope that someday I might able to draw my own comic. When I know that the assignment for STI part B can be any topic and any artefact, the first idea that struck into my mind is comic! However, I am a interactive media design student, so normal comic will not suite my study, so I decided to create an interactive digital comic, which is also known as hypercomic for my STI part B assignment.

However, after doing so many researches and sketching, I only realize that drawing a comic is not as easy as I thought earlier. Great drawing skills is not the only requirement to be a successful comic author. To be a successful comic author, one also needs to have insight to create his/her own style which I am lack of now. I think this is the very essential factor to attract comic fans because based on my understanding, successful comic authors such as Eiichiro Oda and Mashashi Kishimoto have their own style of comic drawing that hard to be copied by other people.

When creating my storyboard, I also facing problems on drawing characters' poses. The poses I have drawn look awkward and thus I have to look for some examples done by some expert from the internet:

So here are some references for me to draw my character poses. I have learnt from my previous lesson that do not confuse myself with tons of tutorials, so I just pick a few of them that suite my storyboard and start practice on them to avoid myself falling into dilemma again.

References:
Chilord.deviantart.com. n.d. Male Action Poses 01 by Chilord on deviantART. [online] Available at: http://chilord.deviantart.com/art/Male-Action-Poses-01-74264467 [Accessed: 1 Jan 2014]. Annotation: One of the most useful character posing I found on deviantart. Some of y character posing actually referring to this tutorial.

Kingsketches.blogspot.com. 2008. Kingston Art works ( 2D 3D SketchBoard ): November 2008. [online] Available at: http://kingsketches.blogspot.com/2008_11_01_archive.html [Accessed: 1 Jan 2014]. Annotation: This author has drawn so many character posing and has give me tons of references on diffenrent character posing. However, most of his posing art style is very hard for me to implicate into "Chibi" character posing, maybe my drawing skills still not good enough to do so.