Advanced Interactive Design / Final Project: Completed Thematic Interactive Website
Week 15
Chuah Shu En // 0368157
Bachelor of Design (Honors) in Creative Media
Chuah Shu En // 0368157
Bachelor of Design (Honors) in Creative Media
Advanced Interactive Design / Final Project: Completed Thematic
Interactive Website
Table of Contents
Lectures
See
previous posts
for lectures.
Instructions
<iframe src="https://drive.google.com/file/d/1zYc-Nv_WZjaPlbSVSgugPioIZPsfR7tN/preview" width="640" height="480"></iframe>
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.
Task
Following the design of my Figma prototype from the previous project proposal, I started importing my background and elements into Adobe Animate. At first I tried to import my assets from Adobe Illustrator into Animate but there were some sizing problems so I gave up and just imported the images into the stage myself.
Fig 1.1, Adobe Animate (22/12/25)
I followed tutorials linked by Mr. Shamsul in Google Classroom on how to create buttons which lead to other frames/sites as well as editing the hover and click animations of elements.
Fig 1.2, Main Menu (22/12/25)
For the main menu animation, I initially planned to do a simple fade-in animation but I remembered the spider exercise we did in Week 6 and thought it would be cool if the stars would follow each other on a set path.
Fig 1.3, Labeling frames (2/1/26)
For the singers page, I made each band member a button which leads to their own personal pages. I found this quite repetitive as I copied and pasted the same frames but changed the content.
Initially, I wanted to have background music for the whole site but couldn't figure out how to do it so I just started adding sound effects for my buttons instead. I also wanted to have a Youtube video play on the songs page but opted for a button which contained a hyperlink instead.
Before publishing, I apparently had a button with sound set to "Stream" which would have caused some problems so I went back to fix it. After successfully publishing my website, I uploaded it to Netlify.
Final
Netlify link: https://chuahshuenfinalworkingsite.netlify.app/
Feedback
I had some problems with uploading my files to Github/Netlify and Mr. Shamsul helped me fix it by changing the file name from "index.html" to just "index".
Reflection
Learning how to use Adobe Animate to make an animated, functioning website was a little challenging because half of the tutorials were done online and it was a bit hard to follow. However, having the ability to rewatch the recordings was very helpful when I would get stuck though, I found that since I started learning content late that I didn't have much time to add a lot of stuff that would have been cool into my website but due to time constraints I opted out.
The part that I struggled with the most was uploading my website to GitHub as I found it a little confusing and I didn't realize my file's name would cause problems so I'm thankful for Mr. Shamsul for being online at 5pm on the due date to help me out.
Overall, this was a learning experience for me and I feel like I understand Adobe Animate as a software much better than when I first started using it to animate bouncing balls. I'll definitely experiment with it more in my own personal projects.
Comments
Post a Comment