Advanced Interactive Design-Task 3
27.06.2025 - 27.07.2025
Guan Wee Lun/0364012
Experiential Design/Bachelor of Design in Creative MediaProject 3
Table of Content
Project 3
Instruction
Students will 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, a minimum of 5 working pages.
Deploy the final website to Netlify or GitHub. Add the link to your blog (e-portfolio). As a backup plan, upload the
project folder to Google Drive as well. Make sure that the Google Drive
link is set to public. No video walk-through is required for this submission.
Progress
Prototype
Before starting to animate it into functional website in animate, I have made
a prototype in figma that show some of it how will it be as interactable
website
first edition
figure 1.1 animate first edition
Action code
Button layer that away from page layer to show consistent even with different
pages and make it fixed on top that let user to navigate even when the pages
scroll down
In Adobe Animate, Iam applying button inside, make the webpage navigate
through button and make it scrollable vertically for each page
In figure 1.1, the progress can be seen as I make different pages into
different layer to organise clearly
then I put it as different frame for it, 1:30:60:90:120 to code it in action layer
then I put it as different frame for it, 1:30:60:90:120 to code it in action layer
I put different instant to let animate know which page I am referring to
In the action layer,
In the action layer,
To make it scrollable I will need to apply it in the action code and make
all page into movie clip to let animate to know as one object that its
height can be scrollable
The button navigate each page instantly, I am planning to make edition 2
to apply transition effect inside it
Edition 2
Figure 1.2 animate second edition
Action code
So for this edition, I make it into one layer and arrange it by
vertical, to make it can navigate vertically but not by navigate going
frame
At first I navigate successfully in this but it's lack of animation
between it, so I use GSAP for easy coding web animation using JS code
After adding GSAP code, it have simple transition for each pages that
connect each pages.
To make it more advanced I use scroll trigger to make it can be scrollable to navigate to other pages
To make it more advanced I use scroll trigger to make it can be scrollable to navigate to other pages
When the pages scroll to the bottom vertically, it can be navigate to
next page through mouse scroll horizontally. Then, I make it like a
loop, when user navigate to the last page, it can scroll down to the
homepages
Figure 1.3 GSAP Scroll Trigger
Submission
Functional Website
Working folder
Reflection
Experience
My experience with this project was a deep dive into the practicalities of translating static design into dynamic web content. It involved hands-on work with two distinct software environments, Figma for design and Adobe Animate for development. It's quite a interesting experience although is quite hard to handle with
My first expectation is with fancy transition and animation to website, but after doing with figma prototype, I reduce a lot of transition as it's quite hard to archive if I want to make that a functional website
The hardest part is when I intergrate figma prototype to adobe animate, Animate have a lot of problem including lagging, crash, not structured layout such as illustrator etc. All of my planning from heads gone because of unfamiliar with using adobe animate to make interactable website, it's using java script for it, but it's harder then using visual studio to script it, as if I use VSS to code it, it will show where is the error and there is AI plug in to suggest for fixing it, In animate coding, it's typically like writing code in a physical blank paper. And if I want to intergrate some code from GSAP it is harder and need to think more solution to it, and most of the solution will decrease the effect of it. As animate can be code wil java only, it couldn't put HTML or CSS inside, some of the code from gsap include setting in HTML and CSS that link to animate using Java, it's annoying when using animate to make website, I would rather learn Java scrip to make the website
My first expectation is with fancy transition and animation to website, but after doing with figma prototype, I reduce a lot of transition as it's quite hard to archive if I want to make that a functional website
The hardest part is when I intergrate figma prototype to adobe animate, Animate have a lot of problem including lagging, crash, not structured layout such as illustrator etc. All of my planning from heads gone because of unfamiliar with using adobe animate to make interactable website, it's using java script for it, but it's harder then using visual studio to script it, as if I use VSS to code it, it will show where is the error and there is AI plug in to suggest for fixing it, In animate coding, it's typically like writing code in a physical blank paper. And if I want to intergrate some code from GSAP it is harder and need to think more solution to it, and most of the solution will decrease the effect of it. As animate can be code wil java only, it couldn't put HTML or CSS inside, some of the code from gsap include setting in HTML and CSS that link to animate using Java, it's annoying when using animate to make website, I would rather learn Java scrip to make the website
Comments
Post a Comment