Advanced Interactive Design-Task 3
21/10/2024 - 8/1/2025 (Week 9 - Week 16)
Teu Yu Tian / 0371923
Advanced Interactive Design | Bachelors of Design (Honour) in Creative Media | Taylor's University
Advanced Interactive Design | Bachelors of Design (Honour) in Creative Media | Taylor's University
Task 3: Thematic Interactive Website
Task 3: Thematic Interactive Website
Requirements:
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.
1. I first continue with the website illustration process from last task as many of the illustration need to be done.
3. Then, I started with the loading page animation, I started to get familiar with all layers, timeline and so on. It took me some time to create a smooth falling leaves and petals animations.
2. As I imported Adobe Illustrator file into Adobe Animate, there are total of 400+ asset including asset in Animate files. My project file keep on crashing due to heavy asset amount, so I decided to export my vector into PNG and import again.
3. My initial plan was to create a website that can be controlled by scrolling with mouse wheel, I found the useful code online but it only work when it standalone. The function is not working when I try to make other navigations such as navigate to other page. Sadly, I had to abandon this interactions and change to button navigation and timeline animations.
3. I keep on working on the About page, this page mainly using scale up and down to make zoom in and out animation.
4. The Procedure page are using timeline animation where people go in from left and right, alpha animation also applied.
5. I also tried to apply drag or "movehorizontally" effect for the food animation, where I wanted to let users go left and right using mouse drag for my information, but none of it works, so i changed to button navigations. The results are overall workable and not bad.
6. Once done, I deploy it on netlify, but some of the buttons are not working such as flower button(back button) on Calendar(Date) and Clock(Then VS Now).
7. I revised it and upload again.
Final website
Video Walkthrough:
3. Feedback:
Need to manage the layer well before importing to the Adobe Animate as my
graphic is complex.
4. Reflection:
This module is challenging for me as I never use Adobe animate before.
The process of making this interactive website are heavily rely on my
previous planning. Though, there are many unexpected challenges such as
unforeseen error or some of the interaction are not working so I had to
change my plan accordingly. The process are getting faster after working for some times on it. I tried to implement some extra code but it was too hard for me. Thanks to my helpful friends who helped me along the process, I got to know many different solution and alternative way to do the animations. At the end, most of the animation are done by keyframe, timeline, and label navigations, it also create a satisfied outcome. It was a good experience to create animation using code based tool, but again, it is a tough process, and I am glad I been through it.
评论
发表评论