Advanced Interactive Design-Final Project

23.06.2024-03.08.2024 / Week 9-Week 15

Kor Qian Qian / 0359496

Advanced Interactive Design / Bachelor of Design (Hons) in Creative Media

Final Project

---

INSTRUCTIONS

---

Final Project - Completed Thematic Interactive Website

In tasks 1 and 2, we have fully expressed our ideas and plans. In this final project, we will transform our prototype into a real webpage using Adobe Animate. All animations must be completed in Adobe Animate. We will integrate visual assets and refine the prototype into a complete, working, and functional product experience.

Process

Preloader page

At first, I created the layout in Adobe Illustrator and then imported it into Adobe Animate. However, because the layer arrangement in Illustrator was crucial, I had difficulty grouping the layers correctly. Ultimately, I decided to create the layout directly in Adobe Animate. For the preloader page, I created a new file specifically for it and, after completing the animation, exported it as a GIF for easy use when publishing later.

Main page

Since my main page is static, I only used one frame and added a stop action on frame 1. I separated all the buttons into their own layers to avoid button conflicts. I added hover animations to each button to enhance the interactivity of the page. Almost every element on the main page has a hover animation

• The navigation bar will have a border when the mouse hovers over it.

• There is also a hover sound effect attach to the navigation bar button, when mouse overing, there will have a sound effect play.

• The product image will scale up slightly.

• There is a sound effect attach to the product image when user click on the button.

• The background text will have a sliding animation.

Product page

I effectively used stop actions and "go to and play from frame label" actions to complete the button animations on the page. I have a total of three product pages. By repeating these actions and using different label names for each product, I successfully created the animations for all three pages.

• There is a sound effect attach to the back button when mouse overing.

Scent Test page

This page is designed to provide user interaction and help users choose their preferred scent. When users select an option, the background colour changes based on their choice. Users can also change their selection until they confirm by pressing the next button.

I added an action to each colour option, and when clicked, there is a scale-down animation applied to the option.

---

Final submission

Netlify link: https://advinteractive-final-korqianqian.netlify.app/

Walkthrough video link: https://youtu.be/mW33JCCzYEo

---

Reflection

Working on this project has been a significant learning experience for me. As I progressed from initial concepts to the final product, I gained a deeper understanding of Adobe Animate and its capabilities. Initially, I faced challenges with layer management and animation timing, but these obstacles taught me the importance of meticulous planning and organization. Integrating interactive elements and animations enhanced my skills in creating engaging user experiences. Overall, this project has improved my technical abilities and boosted my confidence in executing complex design tasks.