Advanced Interactive Design // Final Project - Completed Thematic Interactive Website

23.11.2024-07.01.2024 / Week 9-Week 15 

Angel Tan Xin Kei / 0356117 

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

Final Project / Completed Thematic Interactive Website 

---

⋆ ˚｡⋆୨୧˚ Index ˚୨୧⋆｡˚ ⋆

• Instruction
• Task 1: Thematic Interactive Website Proposal
• Task 2 : Interaction Design Planning and Prototype
• Task 3 : Completed Thematic Interactive Website 
• Feedback 
• Reflection

---

⋆ ˚｡⋆୨୧˚ Instruction ˚୨୧⋆｡˚ ⋆

Module Information Booklet

Requirement:

• Students need to synthesise the knowledge gained in tasks 1 and 2 for application in task 3. 
• Students will create integrated visual assets and refine the prototype into a complete working and functional product experience.

---

⋆ ˚｡⋆୨୧˚ Final Completed Thematic Interactive Website˚୨୧⋆｡˚ ⋆

A. Remodification of Artwork

Since we could not have the scrolling effect on Adobe Animate, thus I reworked on my images in Adobe Illustrator, simplifying them further to match my bubbly theme and create a more cohesive and playful look.

Fig.1.1 Refined Work in AI

As I need to revise my animation by using buttons then I will need some patterns and animations within the pages to make them simpler and more efficient.  

Fig.1.2 Refined Element and Animation in AI

B. Design Process in Adobe Animate

I also added tween effects to most of the elements, creating smooth and visually appealing movements throughout the project. To enhance the animation flow, I applied a quad ease-out effect, which gives a natural and polished transition, making the overall experience more engaging and fluid.

Fig 3.1 Applying Tween Effect on Elements

For my cake page, I applied a sliding technique that allows the content to slide up, left, and right, giving it a smooth presentation-style animation. To ensure a seamless experience, I carefully measured and adjusted the necessary weight and height and X and Y positions.

Fig 3.2 Measuring Position of Elements

I incorporated a hovering effect for the buttons, which includes different states like up, down, over, and hit. I modified the over and hit states to enlarge the button slightly when the cursor hovers over it, adding a dynamic feel. Additionally, I included a click sound effect to make the interaction more engaging.

Fig 3.3.1 Implementing Hovering Effect on Buttons

Fig 3.3.2 Implementing "Click" Sound Effect on Buttons

Fig 3.3.3 Importing "Click" Sound Effect on Stage

After completing all the animations and effects, I organized all the project files into proper folders for better structure and management. Finally, I uploaded the entire project to Netlify, ensuring that the website is live and accessible online. This step marked the final milestone of the project, and seeing everything come together was both exciting and rewarding.

Fig 3.4 Uploading to Netlify

Final Project - Completed Thematic Interactive Website Link: 

https://angeltan-insidescoop.netlify.app/

Final Project Video Presentation:

https://youtu.be/XL8oPA7G7Iw?si=ZCK94LD2Dj5nBSqw

Video Presentation

---

⋆ ˚｡⋆୨୧˚ Feedback ˚୨୧⋆｡˚ ⋆

Week 12

Mr. Shamsul pointed out that scrolling can be quite challenging for Adobe Animate to handle, so I will revise my animation by using buttons instead. Thus, I need to modify some patterns and animations within the pages to make them simpler and more efficient.  

Week 13

Mr. Shamsul advised me to enhance interactivity by adding music when the buttons are clicked. I also included a fun cartoon jump sound effect to make the experience more engaging.

Week 15

Mr Shamsul commented that the overall design looks great, with a simplicity and adorable theme.

---

⋆ ˚｡⋆୨୧˚ Reflection ˚୨୧⋆｡˚ ⋆

This project was a truly challenging yet rewarding experience. As it was my first time using Adobe Animate, I faced many difficulties in understanding its tools and functions. However, with Mr. Shamsul’s guidance and patience, I was able to gradually learn the required techniques and improve my skills. His support throughout the process was invaluable, helping me stay motivated despite the challenges.

I incorporated various effects, such as button hovering with up, down, over, and hit states, adding an enlarging effect and a click sound for a more interactive experience. Additionally, I used sliding techniques for my cake page, ensuring smooth transitions that resemble presentation-style animations. I also modified the images using Adobe Illustrator, simplifying them to better match my bubbly theme. To enhance the visual appeal, I applied tween effects with quad ease-out transitions, resulting in smooth, polished movements.

After completing the animations, I organized all the files into folders and deployed the website on Netlify. Seeing the final product live was an incredibly fulfilling moment. This project not only pushed me out of my comfort zone but also gave me a deeper understanding of animation, design, and web deployment. Overall, I feel proud of the outcome and grateful for the opportunity to learn and grow through this experience

---