Advanced Interactive Design: Task 3 Final Project

on

12.12.25 - 11.01.26

Celine Christabelle Patricia / 0374872 

Advanced Interactive Design / Bachelors of Design (Hons) in Creative Media / The Design School

Task 3 - Final Project

Table Contents

  1. Lectures
  2. Instructions
  3. Final Task
  4. Feedback
  5. Reflection

Lectures

Making Website 2.0

Fig 1.0 - Action Layer

Action layer can be used to link buttons or frames

  • add stop action for like so the the animation stops

  • Button must have an instance name so we can add action

  • add frame labels to redirect to a certain frame

Here is the result:
Fig 1.1 - Dummy Website


About GSAP

Gsap is a minfied javascript, it can be used to simplify certain actions.

How to include external codes: 

Fig 1.2 - Step 1

Fig 1.3 - Step 2

Using Gsap - How to add code using snippets:

Fig 1.4 - Step 1


Fig 1.5 - Step 2

For this task, we were asked to make the buttons pressed accordingly with the color of the screens. We need to measure the rectangles evenly, and remember the X axis to put it in the action layer later on. Here is the result:

Fig 1.6 - Gsap Result


Instructions



Final task

Progress

Fig 2.0 - Loading Page

First, I make the loading page using shape tween. By drawing a rectangle and a circle, then tweak it accordingly to the cup shape, make it look quite fluid to be more natural as well. Then after drawing the shapes, I add shape tween for each frames. I also create a gif of this loading page to be the pre-loader on every of my files. 
Fig 2.1 - Pre-loader Gif


After making the loading and landing page, I proceed in making the home page (index page), as well as the history page (same page as the homepage).  Here, I prioritize in making the layout and navigation first before proceeding in making the animation. 

Fig 2.2 - Action Layer

In the action layer, I added wizard to stop action, redirect to a different page, as well as to go to a certain frame label. This applies in every of my other pages, which are the about page, brewing page, and latte art page. 

Fig 2.3 - About Page

For the other transitions, I used classic tween by converting these images and objects into graphics/movie clips, accordingly to my needs. I use movie clips for objects that need to move continuously or that consumes too much frames without wasting too much frames. Though for this page, no movie clips were needed. I specifically used the Ease Out - Quart. 

Fig 2.5 - Adding BGM

Adding music was a serious challenge to me, because I need to reconstruct the javascript and match it with my current one, having it to play seamlessly in all pages. I search a non-copyright music for this BGM. 


Fig 2.6 - Adding Click sound.

I add the click sound audio when the button is down, so it produces a mouse click when users press the buttons, creating a more satisfying and better interactivity towards the website. 

Fig 2.7  - Publish settings

Fig 2.8 - Pre-loader

For the publish settings, I check-listed the center stage and making it responsive, also include the pre-loader by adding the GIF I made. Especially for the pre-loader, I proceed to Dreamweaver to adjust the css of the loading page, making sure that it can be seen properly when the website is still loading its assets. 


Results

Feedback

Week 11
Add animations for the about page, the overall flow from loading page to home page is already okay.

Week 12
Add back button for history page, Welcome back in the landing page would be better to be changed to Welcome to my website. Include pre-loader in publish settings for the loading assets. 

Reflection

During this project, I encountered several challenges while working with Adobe Animate, as it was a software that required both technical precision and careful planning. At the beginning, I struggled to fully understand how timelines, symbols, and layers interacted with one another, which made the animation process slower than expected. However, instead of stopping at these difficulties, I actively explored different approaches to solve them by experimenting with features, revisiting tutorials, and refining my workflow through practice. I spent time testing animations repeatedly, adjusting keyframes, and reorganising assets to ensure smoother transitions and better control over the visuals. This process allowed me to gradually gain familiarity with the software while maintaining clarity in my creative direction.

As the project progressed, I became more confident in navigating Adobe Animate and making informed decisions to improve my work. I learned to work more systematically by planning animations beforehand, structuring my layers properly, and troubleshooting issues independently when interactions did not function as intended. Although the process involved trial and error, each challenge contributed to a deeper understanding of how animation and interactivity are built within the software. This experience not only strengthened my technical skills but also improved my patience, adaptability, and problem-solving mindset. Overall, the struggle with Adobe Animate became a valuable learning experience that pushed me to grow creatively and technically, resulting in a more polished and thoughtful outcome.

Comments

Post a Comment