ADVANCED INTERACTIVE DESIGN - TASK 3 FINAL PROJECT

This week focused on a practical exercise using GSAP. During the session, Mr Shamsul demonstrated the basic techniques and workflow of GSAP through a guided example. We followed the steps together to understand how animations are structured and controlled. After the demonstration, we were required to complete a similar exercise independently by applying GSAP to a large pixel-based image.

Figure 2.1 GSAP practice / Week 9

This outcome reflects my GSAP practice. The interface includes navigation buttons located in the lower-left corner, allowing users to move to specific sections and display corresponding images. The interaction functions successfully; however, the lecturer suggested improving the overall experience by adjusting the easing of the animations.

Figure 2.1 Practice on our own / Week 9

TASK 3: FINAL PROJECT: COMPLETED THEMATIC INTERACTIVE WEBSITE

Requirements

Students are expected to integrate the knowledge and skills developed in Tasks 1 and 2 into Task 3. This task requires the creation of cohesive visual assets and the refinement of the prototype into a fully functional and complete product experience, consisting of at least five working pages.

The final website must be deployed using Netlify or GitHub, and the live link should be included in the student’s blog (e-portfolio). In addition, the complete project folder should be uploaded to Google Drive as a backup, with the sharing settings configured for public access. A video walkthrough is not required for this submission.

Adobe Animate Process

Figure 3.1 Site introductions / Week 9

Figure 3.1 illustrates the initial loading screen of the website, which begins with an animated sequence inspired by Ariana Grande. This animation serves as an engaging visual introduction and sets the overall mood and theme of the website. The use of animation at the loading stage helps capture users’ attention, create a strong first impression, and smoothly transition users into the main content of the site.

Figure 3.2 Site homepage / Week 10

After completing the loading and landing pages, I proceeded with the development of the home page (index page) and the history section, which is integrated within the same page. At this stage, the primary focus was on establishing a clear layout and navigation structure before implementing any animations.

This approach ensured that the user experience and content hierarchy were well-defined prior to adding interactive and animated elements.

Figure 3.3 Action Layer / Week 10

At the action level, I implemented action scripts to control playback, redirect users to different pages, and navigate to specific frame labels. These actions were applied consistently across all pages of the website to ensure smooth interaction, controlled transitions, and a coherent user experience.

Figure 3.4 Tour page / Week 10

Animating the planets was one of the most challenging parts of this project, as it involved a large number of elements. In addition to animating their movement and positioning, it was also necessary to update the accompanying text to ensure consistency and clarity. Managing multiple animated objects while maintaining visual balance and readability required careful planning and repeated adjustments.

Figure 3.5 store page / Week 12

In addition, I aimed to create an interaction where images change when the user hovers over them. To achieve this effect, the images were converted into buttons and used specifically for mouse-over interactions. This approach enhanced interactivity and provided visual feedback to users during navigation.

Figure 3.6 button sound / Week 13

I also encountered issues with the audio implementation. Initially, it did not work as expected, but after several attempts and troubleshooting, I was able to identify the errors and successfully resolve them. This process improved my understanding of integrating sound within interactive projects and reinforced problem-solving skills.

Figure 3.7 Sound / Week 13

Figure 3.8 Publish settings / Week 13

Final Link

Final Link: https://arianagrandetour.netlify.app/

Google Drive: https://drive.google.com/drive/folders/1LwlrxlGBd0od5JZIiC_fKtG_T245SjDS?usp=sharing

REFLECTIONS

Experience

Working on this interactive website was a valuable learning experience. The process was not extremely difficult, but it was also not simple, as it required both technical skills and creative thinking. Through this project, I learned how to create a website using animation as a key design element. I became more confident in using Adobe Animate, especially in creating animations, working with movie clips, and building interactive pages.

One of the main challenges I faced was working with buttons and interactivity. At times, the buttons did not function consistently, which required repeated testing and troubleshooting. Despite this, the process helped me better understand how interactivity works in Adobe Animate. The lectures conducted by Mr Shamsul were engaging and practical, and the in-class exercises allowed me to continuously practise and improve my skills. These activities significantly supported my progress and prepared me well for the Final Project.

Observations

Throughout the project, I observed that planning the layout and navigation before adding animations is essential for creating a functional and user-friendly website. When the structure and user flow were clear, it became easier to implement animations effectively. I also noticed that small details, such as animation timing, button responsiveness, and hover effects, had a strong impact on the overall user experience.

Additionally, I observed that interactive elements require careful testing, as even small errors can affect functionality. Consistent testing helped ensure that the website remained responsive and easy to use.

Findings

This project highlighted the importance of patience, iteration, and problem-solving in interactive design. Resolving issues related to buttons, animations, and audio taught me to anticipate technical challenges and approach them systematically. I also learned that combining animation, sound, and interaction can greatly enhance user engagement when applied thoughtfully.

Overall, the project reinforced the value of integrating technical skills with user-centred design thinking. The experience strengthened my confidence in Adobe Animate and improved my ability to create polished, interactive digital experiences. This course played an important role in developing my skills and will be highly beneficial for my future design projects.

Search This Blog

Aidina Begimbaeva (0380489)