Advanced Interactive Design - Final Project

28/06/2023 - 18/07/2023 | Week 13 - Week 16
Advanced Interactive Design / Final Project

Loh Shu Huan / 0349621
Bachelor of Design in Creative Media

---

PROGRESSIONS

For this task, we were required to create a website that promote a certain thing, such as a new launch product, a song, an app, or an album. We need to create 5 pages by using Adobe Animate. It need to include some micro animation as well.

For this project, I decided to do an extension website for one of my project in other module, as it is also a promotional campaign.

Week 13 - 16

1. Promotional Website Layout Design

This website is actually to promote one of the series of perfume from Zara, called Chapter 6. This chapter has four different fragrances in total.

Fig 1.0 Zara Chapter6 Promotional Website Design

2. Progression in Adobe Animate

Once I exported all of my assets, I started to import them in AN and create the micro animation for the website. I decided to finish all the design and animation for every pages first and only do the navigation bar animation, and the last thing would be linking all the pages to the navigations.

To complete the tasks, the tutorials in class are not enough, hence, Mr.Razif provide us a playlist of tutorial of creating a website link.

Fig 2.0 Page designing and animating

Due to art style of the website, the micro animation of it was basically different level of fade in effect. I actually did double fade-in effect for the background. The one at the back is more transparent while the one at the front is not transparent at all. I try to keep my website design elegant, simple and clean.

Fig 2.1 Page designing and animating

Even though we have to do the project at home by ourselves, but I still have an opportunity to consult with Mr.Razif. He helped me to find out and solve my problem. Besides, when I was fixing the problem, a glitching problem came out haha.

Fig 2.2 Online Consultation with Mr.Razif

Fig 2.3 Glitching Problem

Once all the design and animation of the pages are done, I started working on the button. Due to the overall art style of my website, I decide to do a line animation for the hover effect. My script was slightly different from Mr.Razif's as the original script works well for me.

I found a problem that the animation of the line was kept looping, so I added the stop command to it.

Fig 2.4 Creating the hover effect

Fig 2.5 Script of the hover effect

Once the hover effect of the navigation was completed, I started to link all the pages to the navigations. It took me awhile to figured out how to link them together as my transition was different from Mr.Razif's, the sliding transition has been introduced in one of my page, hence I have to do a different transition. 

Fig 2.6 Main screen timeline

So I used the method that we have learnt in class tutorial to link them, and it works.

Fig 2.7 Mouse click script

Then, the next problem appeared, the website stopped at the page (which is what I want), but the animation kept looping. So I tried to add the stop command to them, and it works.

Fig 2.8 Main screen timeline

3. Publishing

Once I've checked and tested everything works well, I exported them. The exported html file cannot be open in Google Chrome, hence I used the simple server software that shared to us by Mr.Razif.

Fig 3.0 Simple Web Server

After that, I followed the tutorial by Mr.Razif to change the background of the website, but I couldn't install the Adobe Dreamweaver for some reason, even after I've tried to install it.

Fig 3.1 Adobe Dreamweaver Installation Failed

So, I asked my friend and he suggested me to try Visual Studio. I tried to add the code and it works well.

Fig 3.2 Progression in Visual Studio

Lastly, I uploaded it to Netlify and change the site name.

Fig 3.3 Netlify

4. Final Submission

https://zarachapter6.netlify.app

Fig 4.0 Final Project Video Presentation, Video Link

---

REFLECTION

The biggest challenge for me in this task is using Adobe Animate as I've never used this software before this module. The hardest part is I have to take care of all the detail information and even though with the different script the outcome would be the same too. So if I faced some problems there is always a way to reach the outcome I want. This task took a lot of attention and patience, I've to be very clear of what I've did and what I'm going to do next. Even though my final outcome is just a beginner result, but I do satisfied with it, and relief that I'm able to complete this project in time. Lastly, I'm grateful and appreciate for the help and guidance of Mr.Razif.