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.