Exercise 03/ DST60804 / Advanced Interactive Design

-

 

Exercise 03/ DST60804 / Advanced Interactive Design

-


28.05.2026 -14.06.2026 (week 6 - week 8) 
Low Xin Er / 0374596 / Bachelor of Design in Creative Media

Advanced Interactive Design / Exercise 03 - Netlify

Module Information

Submission
Adobe Animate file：drive link
Netlify：link


Instructions
For exercise 3 submission, you are required to:
  • Upload the file to netlify;
  • In order to make it work, you need to rename the html file as index.html (You know the drill).
  • Upload the entire folder that contains the html file, js file and images folder. Please do not upload the .fla file to netlify.
You will also required to upload the .fla file into your Google Drive. Update your e-portfolio with all the processes. 

Submit your e-portfolio link for submission

Progress

For Exercise 3, the main goal was to create an interactive layout using four buttons in Adobe Animate. To fully get the hang of it, I spent some time going back and rewatching our previous online class tutorials on Microsoft Teams. That really helped me grasp the core principles of action scripts and figure out how the logic works. Once I understood the workflow, I configured the four buttons in the .fla file and made sure they were set up to trigger at the exact right frame numbers on the timeline. To make the interaction feel more polished, I also added some simple transitions so that when a user clicks a button, the content flows smoothly rather than just cutting abruptly.




Submission
Adobe Animate file：drive link
Netlify：link


Reflection

This exercise was a great hands-on lesson in shifting from static layouts to user-driven interaction. The trickiest part was definitely ensuring that the action codes were placed on the exact right keyframes so the navigation worked flawlessly without any glitches.

Through this process, I realized how much small details—like adding subtle animations to button transitions—can completely elevate the user experience. It turns a rigid technical exercise into something that feels natural and intuitive. Overall, mastering these timeline actions gives me a much more solid foundation for designing interactive digital media in the future.

Comments

Post a Comment

Popular posts from this blog

Typography - Task 3: Type Design and Communication

-
Image
  Jun, 9 ,2025 TYPOGRAPHY｜Task 3:Type Design and Communication ||    0 9 /06/25 – 28/06/25 (Week 8-Week 10)  ||    Low Xin Er , 0374596 ||   Typography ||   Type Design & Communication TABLE OF CONTENTS 1.0 Instruction 2.0 Lecturers 3.0  Progress of Work 3.1 Research and ideation 3.2 Exploration & Sketch 3.3 Digitalize  & Final 3.4 Layout explore  3.5 Adjustment 3.6 Final Design 4.0 Feedback 5.0 Reflection 6.0 Futher Reading 1.0 Instruction 2.0 Lecturers The complete notes can be viewed at  Task1 Blog 3.0 Progress of Work Progress Sketches Fig3.1.sketches of a,b,g,t ( 09/06/2025 week 8) Fig.3.2.  4 types designs （11/6/2025 week 8） Fig.3.3. sketches of final design series (16/6/2025 week 9) Fig.3.4.detail dissection of the letters (16/6/2025 week 9) Observation: Since font designs have a certain balance and symmetry, the circles or lines used in the ins...
Read more

Illustration & Visual Narrative -Task4 Final Project

-
Image
30 June 10, 2025 Illustration & Visual Narrative ||      Low Xin Er (0374596)  ||      Week 11-Week 14  ( 30/6/25 - 21/7/25 ) ________________________________________________________________________________ Table of Contents 1.0 Lectures 1.1 3Acts structure 1.2 Transition 2.0 Tutorials 2 .1  Final Task  Briefing 3.0 Pratical 3.1 Quote 3.2 Moodboard/Storyboard 3.3 Process 3.4 Outcome 3.5 Documentation 4.0 Reflection ________________________________________________________________________________ 1.Lectures 1.1 3Acts Structure 1.2 Transition  Hieronymus BOSCH Continuity Participation of the reader Scott McLoud’s transitions 01 Moment to Moment 02 Action to Action 03 Subject to Subject 04 Scene to Scene 05 Aspect to Aspect Point of View ________________________________________________________________________________ 2.Tutorials 2.1 Briefing   1. For the  Final Project  of this course, you are required to create a poe...
Read more

DIGITAL PHOTOGRAPHY AND IMAGING -WEEK12

-
Image
07 July ,2025 DIGIT.PHOTO & IMAG. | WEEK 12:  FINAL PROJECT ||   07 /07/25 – 13/07/25 (Week 12)  ||   Low Xin Er , 0374596 ||   Digital Photography & Imaging ||    Week 12: Magic Lock Screen Animation Upload 1.Lectures - 2.Tutorials Project Consultation 3.Pratical Upload outcome lock screen animation on YouTube Youtube link:  https://youtube.com/shorts/fcsrgfFlwK0?feature=share 4.Reflection This work has finally come to an end. Looking back at how I completed the work step by step, I have gained a lot. Designing a thematic mobile phone dynamic wallpaper is a very fresh experience. It took a lot of time from conception to completion of the video, and I also learned a lot of skills in operating Adobe Photoshop.
Read more