Digitize Progress (Chapter 3)

External Guest Feedback - Stuart Godwin

Today, our class has a special guest from the industry to give reviews on our final project.  It was my pleasure to have Stuart Godwin from Cheil Malaysia to give feedbacks on my final year project.

As promised, I have shown one chapter with full interaction to the special guest. As I am very behind from my Gantt chart schedule so I have explained a rough story to Stuart. He was quite confused on my story at the beginning, but he was amazed by the graphics and the interaction. He said I was doing a good job of exploring new software such as Adobe Edge. He suggested I should fully utilize the technology, it would be more interesting to merge up the graphics together and form nicely transtition instead of putting them into one static panel. He has nothing more comments, but the font size in the story is too small to read. Other than that, he has highlighted the social elements in this project. I have explained that my website will display through website, social share buttons such as Facebook, Twitter, LinkedIn and Google Plus would put after the final chapter to let user to share this project of social media so that this project has gained more exposure.

I am glad to have this positive feedbacks and suggestion from Stuart. It keeps motivated to continue working on this project. Therefore, what should I do from today and the coming two weeks study break, to adjust the font size in my story, to try my best to complete all the graphics and coding so that I am able to show my full narrative to the next special guest and get ready for my alpha test.

Production day

Spending few days to animate my scenes in Adobe Edge. I have chosen the best font. 

I have downloaded several of free fonts in Dafont.com . I choose Dersu font because it fits into Japanese style.

I have separate the image that I want to animate in Adobe Edge. It's very simple and easy to execute to animate. I only spent few hours to animate the all the panels.

Putting audio in Adobe Edge

I search for some technical part on how to apply audio in Adobe Edge. I found several video tutorials.

Source from: https://www.youtube.com/watch?v=dQRAKg1xl5Q

The tutorial video above teach how to put in audio by using the BUZZ plugin. I found it has too much of procedure and the code require online which I try to avoid in my project. So I move to another tutorial.

I found this tutorial from adobe.com was quite useful. The article provided important codes and instruction on adding audio in Adobe Edge Animate. I have tried to follow the steps and export it into oam. file to import it into Adobe Muse to test whether the audio works or not. After tried in Adobe Muse the audio is working and I could also put mouse interaction to trigger the sound play.

Link : http://www.adobe.com/inspire/2014/02/edge-animate-audio.html

Error of viewing HTML in Google Chrome

I having this issue when I export my artwork from Adobe Muse to HTML and view it in Google Chrome. I am worried because I can't use Google Chrome to view most of my artwork and I found out the similar problem in Adobe Forums as people has mentioned the same error. The browser returns error  after integrated the "oam" file from Adobe Edge and exported the site in Html.

Adobe forum: https://forums.adobe.com/thread/1414787

Therefore, I'm thinking another way to solve out this problems, I might consider to redo all parrallex scrolling by using Adobe Dreamweaver if it come to the worse case. As our class having special guest to give feedback to our project, I will use another browser to display my artwork for temporary. I found Internet Explorer is the best platform to display from now.

Sem AB: Week 6 consulation

Consultation 6 (Tuesday, 9/12/14)

Tutor: Chuan Zui

I have shown the completed interaction page , the cat clay and lady with fan. I also found few background music for chapter 2 the first dream and second dream. Zui commented the code is okay and might consider to start to craft the instruction, make sure it is matched with the narrative. For background music, he suggested me to put several different music to represent different moods in the scenes.
His other advice is to speed up the progress and check on the timeline.

Besides, Zui has taught me how to achieve the nervous effects from the reference below.

Zui showed me how to achieve the effect by using Photoshop. After that I try to achieve my own and put it in the panel. It works well.

Cat clay interaction

Sem AB: Week 5 consultation

Consultation 5 (Friday, 5/12/14)

Tutor: Kelvin

I have asked Kelvin for suggestion on how to use mousewheel scroll to trigger the animations in panels. Kelvin said it is very hard to execute it in Adobe Dreamweaver, he suggested I should use Adobe Muse since it is the similar thing that I want to achieve in Dreamweaver. Otherwise I can try to use GIF image. Besides, Kelvin also help me to fix the Lady with fan interaction page, to cover the fan with container in Adobe Dreamweaver.

Next execution is I will be looking for the tutorial videos for intergrate Adobe Edge to Adobe Muse. I will start to animate once I have the confidence of everything works fine in Adobe Muse. 

Lady and fan interaction video

I have screen captured how the interaction part works in lady and the fan.

This is the first time I achieve the effect using the free source file. I separate the facial feature and the lady background and put the facial feature at the top of the layer. I adjust it the facial feature background from white to transparent and reposition it into the face.

After that I apply the trigger code, when user erase the facial feature until a certain percentage, the page will jump into a new page. I can replace jumping the page into animation.

Instead of putting timer, I use other animation to represent as "time" to gain the tension of playing it. The fan will cover the lady's face and it will trigger to the next animation. 

Lady and fan interaction

As what Chuan Zui suggested instead of letting user to click on button to wipe off the face feature, it will be more interesting to let user to drag to erase the face feature. I was trying to search for the code for very long time and finally I found this easelJS that helps ! 

Link: https://github.com/CreateJS/EaselJS

I get free demo files through the provided github link. After figuring out the code I start to explore the codes by put it in the images.

The demo files that provided.

After several times on changing the code here and there and making adjustments, finally I achieved it . The facial feature can be erased. I feel very lucky that the free sources provided the percentage code. When erases the facial feature the number of percentage will increase. By using this percentage, I can set once the user after erasing it , it will trigger the next animation or to the next page.

I start to put in the fan, and putting animation. When user erase the facial feature, the percentage will count to 69% and the fan will stop. 

I still haven't figure out how to put the fan into a container , because now the fan expose at outside of the panel. I might need to arrange a tutorial with Kelvin in the coming friday.

Background Sound

I found some background sounds that might use in my final year project.



This sound will be use in the Kabuki Theater hall when showing the performer dancing. 



The duration of this soundtrack is quite long, I will use Daylight by Kokin Gumi (23:22) in the start of my first chapter.



This music will be use in chapter 2 in the first dream when in the night market and the last chapter before Baku was trying to enter Yoshi's dream.

This music will be use in Chapter 3, when Baku was entering to the Yoshi's dream.

These two musics will be use in Chapter 3, to bring out a different mood when Baku was entering to the Yoshi's dream.

All background music will be edit in using Adobe Audition to trim and raise up the quality.

Sem AB: Week 4 Consultation

Consultation 4 (25/11/14)

Tutor: Chuan Zui

Showed my digitize scenes and the parallex scrolling code. Zui suggested I should play with some animation in the panels, for example the light in the 1st panel of my chapter 2, make it swing or dim. He suggested animation can try to use GIF or PNG file and try to separate the layers to animate. Other commend is to brighten the scenes. Some other graphic elements that can be reused and background are reusable so to cut down the time for me to redraw . He suggested I put 2 to 3 panels in one page and start to find some sound effect and background sound.

Next execution, I will try to animate the elements by using Adobe Edge to speed up my digitize process, find some sound effects, plan on which element that I should animate and continue the technical part on interaction page.

Dreamweaver scrolling panels

This is the tested code from using Mousewheel.js. I found out it's quite smooth and easy to code.

The demo

My tested code

Digitize progress (2)

I kind of jump around to digitize my storyboard. Due to the time limitation, I planned to manage from Mon - Thurs to digitize my scenes. I will digitize 3 panels per day. Other time I will use for other project and to try out the code in this project.

undone