Advanced Interactive Design: Task 3_Final Project
22 April 2025- 27 July 2025
CHONG CHENG TAO (0371072)
Advanced Interactive | Bachelor of Design in Creative Media | Taylor's
University
Task 3_Final Project
List
LECTURES
-
INSTRUCTIONS
This is the Module Information Booklet for this module:
TASK 3
Week 9
After the approval of prototype, I start to trasfer the graphics into as PNG into Adobe Animate.
Chevron sign left (btn_next_left) and right (btn_next_right) let the user navigate to the previous or next page. U-turn sign will navigate user to the first pages of each catogories.
Each pages will come in with smooth and ease animation.
*To loop a animation after applying _this.stop(), convert the animation into movie clips.
Week 10
The main car animation is done using keyframe and Classic Tween.
Week 11
To link the different Adobe Animate pages from different source file, use the code snippet "Go to Web Page", add the link and set as parent.
Go to Webpage
After the finsihing the main pages and navigation, I started adding the music and sound for elements.
Music and sound effect used:
For the background music, I set the setting as Event and Loop, so the music can be looped and keep playing continuously.
Sound setting
sWeek 12
I finalized the work and upload it to Netlify.
However, I faced a big problem when uploading the HTML file in live. The homepage navigation is not working, it could not link to other HTML file in the folder.
FINALLY, I found out that the problem occured due to the JS script generated by Adobe Animate.
To fix this issues:
- Open the code folder in IDE.
- Relink the JS script (Adobe Animate JS file will have random numbers in default)
- Replace the absolute local HTML URLs with the relative URLs.
Absolute local HTML URLs
Relative URLs
Final Submission
Link to Netlify: Road Safety Signs Website
Source File: Here
(*Might need to wait a few second to load in Netlify)
FEEDBACK
Week 9
- To make a loop homepage, make the animation and convert it into movie clip.
Week 11
- Eveything is good to go. Upload the work to Netlify
- Try to add a homepage logo to the website.
REFLECTIONS
This is such an interesting module for me! I found this way more easier than the previous interaction module, at the same time more creativity can be applied on the project. Adobe Animate may not be the ideal software for creating a website, however, it did save so much time on the developing phase, allowing me to focus more on the design and uniquesness of the website.
Comments
Post a Comment