Advance Interactive Design - Final Project: Completed Thematic Interactive Website

on

17.6.2024 - 28.7.2024 ( Week 9- Week 14)
Gam Jze Shin / 0353154
Advance Interactive Design / Bachelor of Design in Creative Media
Final Project:  Completed Thematic Interactive Website

Index

1. Instructions
2. Final Project: Completed Thematic Interactive Website
fig 1.1 Design Research Methodology MIB

Final Project: Completed Thematic Interactive Website

Students will synthesise the knowledge gained in task 1 and 2 for application in task 4. Students will create integrate visual asset and refine the prototype into a complete working and functional product experience.

Progress in Adobe Illustrator
At the start of creating the website, I began by illustrating the elements needed for my Subway website in Adobe Illustrator. Guided by the concept outlined in my proposal, I gathered references from Pinterest.

fig 2.1 Progress in Adobe Illustrator

Here is my progress in Adobe Illustrator: I imported reference images and used the pen tool to draw the desired images.



fig 2.2 - 2.4 Separate Layers

After drawing all the graphic elements, I separated them into different layers. This action will make it easier to animate when I import them into Adobe Animate.

Progress in Adobe Animate
Next, I import the graphic elements into Adobe Animate.

fig 2.5 Loading page animation

First, I worked on the animation for the Subway loading page. I separated the burger into different layers to animate it moving from top to bottom. Then, the 'Click Here' button will appear.

 
fig 2.6 - 2.7 Homepage animation in Adobe Animate

The second page, I create is the home page. There have four main movie clip:
  • Billboard (Showing Subway poster)
  • Moving car (Navigate to timeline page)
  • Subway burger shop (Navigate to sandwich page)
  • Little girl (waving hand)

fig 2.8 Asset Warp Tools

I used the asset warp tools to animate the girl, making her wave her hand on the right part of the Subway website.

fig 2.9 Sandwich page

Then, the timeline page include 6 different ingredients. When clicking on it, it will show the ingredient's information.

fig 2.10 Mouse over button effect

For the button, I made the graphic elements slightly larger when moused over to clearly indicate that the objects can be clicked.

fig 2.11 Timeline page

Additionally, the timeline page will feature 7 stations representing different years. When clicking on a specific year, the development details of the Subway brand will be displayed, and the car will move from the starting point to the selected station.

fig 2.12 About Us page

Lastly is the about page. I using the concept that I learned online which is using the HTML 5 > Actions > Show an Object > Click to Hide an Object.

Sample using it:
this.intro.visible = false; 
this.Introbtn.addEventListener("click", fl_ClickToHide_12.bind(this));
function fl_ClickToHide_12()
{         this.intro.visible = true;}
this.Closebtn.addEventListener("click", fl_ClickToHide_13.bind(this));
function fl_ClickToHide_13()
{ this.intro.visible = false;}

fig 2.13 Actions in Adobe Animate

Here is the HTML5 and ActionScript that I used to navigate the entire Subway website and apply the functional effects. Platform: https://gsap.com/docs/v3/GSAP/Tween/startTime()/

fig 2.14 Publish settings

After completing the website's animations, I checked all the public settings to ensure they were correct, then I published it.

fig 2.15 Netlify upload 

I followed Mr. Razif's tutorial video to upload the Subway website on Netlify. I also changed the background color of the website in Adobe Dreamweaver to make it look nicer.

Final Submission (Files of the website construction)
Click here to view the Google Drive.

Final Submission (Netlify Link)
Click here to view the Netlify link.

Final Submission (Website Walkthrough)
Click here to view the Subway Websites Walkthrough in YouTube.

Feedback
Week 12
General Feedback: Teach us how to implement a mouse-over effect on a button in Adobe Animate so we can use it for our website.

Week 14
Specific Feedback: The duration of loading time can be shortened, as having to wait for a long time can make users feel bored.

Reflection
Final Project
In this module, I learned Adobe Animate for the first time to create a website. Initially, I had little idea or direction on how to approach it. I spent a lot of time researching and attempting various methods. At the beginning, I frequently encountered problems where buttons or movie clips didn’t work, and I couldn’t identify the reasons. Fortunately, I had a helpful lecturer who guided me and helped troubleshoot the issues. When facing technical problems, I watched YouTube tutorial videos to learn how to resolve them. Using Adobe Animate requires attention to many details, as even a small mistake in the symbols or ActionScript/HTML5 code can cause functions to fail. Therefore, I had to check everything carefully to ensure there were no bugs.

I believe I applied TGC 2: Lifelong Learning in this module, as I often had to learn independently through online resources to create the website. Additionally, TGC 3: Thinking and Problem-Solving Skills were also improved during my learning journey. I needed to think creatively about how to incorporate different animation functions into my website and solve any bugs that arose. Although I still have many skills to improve in using Adobe Animate, I am satisfied with what I have learned and the outcomes I have achieved at this stage. I will continue to explore and improve in the future, and the skills I gained from this project will benefit me greatly.

Comments

Post a Comment