Advanced Interactive Design - Task 3 / Final Project

24.4.2024 - (Week 1 - Week )
Chong Hui Yi / 0363195
Advanced Interactive Design / BDCM

Task 3 / Final Project

---

Table of Contents

1. Instructions

2. Task 3

3. Feedback

4. Reflection

---

INSTRUCTIONS

<iframe src="https://drive.google.com/file/d/1MyQGWgV08rAY3uC0H5FnUs6N7kXAeZc1/preview" width="640" height="480" allow="autoplay"></iframe>

Task 3: Final Project

Requirement

"Students will synthesise the knowledge gained in task 1, 2 and 3 for

application in task 4. Students will create integrate visual asset and

refine the prototype into a complete working and functional product

experience."

1. Upload the website to a web server.
2. Record a video walkthrough.
3. Online posts in your E-portfolio as your reflective studies
4. Make sure to embed or provide a link to the website and the video from the blog post.

Progression

First, I created the transition from the homepage to the history page in Adobe Animate, using an oval on the homepage as a button to move to the next page (Fig. 1.0). However, based on Mr. Shamsul's feedback, this might be too direct, so I changed it to use one of the cats as the button. When you hover over it, it will enlarge and place its paws on the oval.

Fig. From the homepage to the history page - first attempt

Fig. 1.1 Make the cat into a button

After the improvement, I think it’s more engaging, but I'm concerned it might confuse users, so I added a text hint: 'Find the clickable cat' (Fig. 1.3).

Fig. 1.2 From the homepage to the history page - second attempt

Fig. 1.3 Add the text 'Find the clickable cat'

On the history page, I thought it would be nice to include some farm background sound. Since Adobe Animate only supports MP3, I needed to convert the WAV file to MP3. I encountered a problem because Adobe Animate cannot edit audio, so I couldn't adjust the volume. To avoid the audio suddenly disappearing when transitioning between pages, I used other software to apply a fade-in and fade-out effect to the volume. It was quite a hassle.

Fig. 1.4 Adding background sound effect

For some buttons that were too small and difficult to click, so I enlarged the hit area.

Fig. 1.5 Enlarged the arrow button's hit area

I think the temperament page is one of my favorites. When people hover over the Popcat, it opens its mouth, displays text, and plays the Popcat sound effect.

Fig. 1.6 Added different images & popcat sound effect in 'over' for an open mouth effect

Fig. 1.7 Temperament page

When I was designing, I suddenly found that my close button worked fine on the first click to go to the characteristic page, but it stopped working on the second click. I was quite confused until I realized that replacing "gotoAndPlay" with "gotoAndStop" in the ActionScript solved the issue (honestly, I’m not sure why).

Fig. 1.8 Clicking the 'close' button a second time has no effect

Fig. 1.9 Replace “gotoAndPlay” with “gotoAndStop” in the code

The guidelines in Adobe Animate are very useful. They help ensure that elements are aligned consistently across different pages.

Fig. 1.10 Guidelines

Additionally, I found that Adobe Animate’s text boxes cannot contain two different fonts, you must use separate text boxes.

Fig. 1.11 Different fonts cannot be used in the same text box

I went back to the characteristic page and added piano sounds for do, re, mi and fa to the four buttons (Fig. 1.12). I think this makes the site more fun, and I quite like it. I originally wanted to use cat meows, but I couldn't find suitable sound effects. (ಥ﹏ಥ) 

Fig. 1.12 Adding piano sound effects

For the transition from the characteristic page to the health problem page, I wanted something special, so I thought of a wave transition, where it looks like water filling the page from bottom to top. I use a motion tween with a curved path for the wave shape. Although the path looks unusual, the effect turned out surprisingly well (Fig. 1.14). Besides that, I found drawing in Adobe Animate quite challenging, the wave shape was created by starting with a rectangle and erasing parts of it.

Fig. 1.13 Process of creating a wave transition

Fig. 1.14 Final wave transition effect

The ActionScript for the Health Problem page was the most challenging for me because the left and right arrows need to link to different labels, which caused many issues. The purple rectangle in Fig. 1.15 is a mask, showing the text animation without the show masking.

Fig. 1.15 Health Problem page in Adobe Animate

From Fig. 1.16, you can see that I have many layers. Sometimes I have trouble keeping track of which is which, as I might use the same layer for different objects even after naming them. However, the layers with actions are always the first ones, which helps me find them easily.

Fig. 1.16 All layers

Final Project

Website Link: https://advfinal-chonghuiyi.netlify.app/

Fig. 2.0 Walkthrough video 

Walkthrough Video YouTube Link: https://youtu.be/eXUe-BfP5vA

---

FEEDBACK

Week 11:

• Ensure there is enough reading time or provide a "Next" button for navigation.
• The content must stay within the stage, we can't create a website that requires scrolling down.
• You can start using Adobe Animate now.

Week 13:

• The homepage button could be less obvious, perhaps turn one of the cats into a button.
• The history page doesn't need buttons to change the text, just ensure there is enough reading time.
• Animations are acceptable.
• Use the default loading bar.

---

REFLECTION

I think the final project is fun and interesting, and it allows me to apply the knowledge about Adobe Animate that was taught in class. During the 14 weeks, I I learned some of the features of Adobe Animate and got more familiar with the software, but I believe there are still many things I haven't discovered yet. 

I find it difficult to draw in Adobe Animate, and I often forget whether to use the rectangle tool or the rectangle primitive tool.  The pen tool is also hard to control, maybe because I am more used to using Adobe Illustrator. I feel that Adobe Animate is more complex than I imagined, and many animations that seem simple actually take time to complete. For instance, for common fade-in and fade-out animations, we need to adjust the alpha value, which is the animation I used most frequently on my website. What troubles me more is adding ActionScript. Even though "add using wizard" is convenient and simple, some strange bugs appear, and sometimes the webpage animations don't work as I want. 

Overall, I'm satisfied with the final outcome of my website. This is the first website I made using Adobe Animate, and the theme is something I am interested in, so I enjoyed the process of creating the website.