Advanced Interactive Design - Final Project: Thematic Website (Task 3)

1/7/2024 - 3/8/2024 (Week 11 - Week 15)
Katelyn Tan Kye Ling (0354148)
Bachelor Of Design In Creative Media (Advanced Interactive Design)
Final Project: Thematic Website (Task 3)

INSTRUCTIONS

LECTURES

WEEK 11:

This week, we had one to one consultation with Mr. Shamsul. We could choose to do it on Monday or Wednesday. I chose to go on Monday for consultation. Mr. Shamsul checked my wireframe and gave me feedback, he told me what I could add/change to further improve my website. He then told me I could start to work on my website on Adobe Animate.

I started by doing some pages of my website on Adobe Illustrator, I then attempted to do my start page on Adobe Animate, like the speech bubble animation and the content entering the scene. However, there were some things we haven yet to learn on animate, so I found it really difficult to proceed with my work on animate.

WEEK 12:

This week I continued to design my website on illustrator so that I can transfer them to animate later on. We had class from 12-4pm this week and it was for consultation about our website. I showed Mr. Shamsul my work and he taught me how to do parts that I didn't know how to do. 

I then continued to work on my loading page in class, the loading page I made was a fake one because animate couldn't make and support that. Next I created the clouds floating transition to the start page and also created the animation for the start button. So this week I completed my loading and start page of the website.

Fig 1.1 Start Button Animation

WEEK 13:
This week was a short physical class due to the aircon being broken in class. I showed Mr. Shamsul my work and he taught me how to do the star moving animation. 

My loading page was faulty, the unicorn is supposed to follow the flow of the bar but when I publish it, it goes in a straight line. So I did some research on how to fix that. And the solution was to change that part of the timeline to "convert to keyframes".

Fig 1.2 Convert to keyframes

I went back home and continued animating the stars and correcting whatever feedback Mr. Shamsul gave. I then worked on my first product page by adding the same stars from the home page and also trying to figure out how to do the animation of the home button. I was halfway there but it seemed like I was missing something which caused my button to not work, so I left it to ask Mr. Shamsul during consultation.

WEEK 14:
This week we had 1 to 1 consultation. I asked Mr. Shamsul about my button and I also asked him how to do the colour chart for the first product. After showing me how to do it, I did the rest of product 1 myself. I also did an animation for product 1 in the home page. It was the same concept as the start and home button but I was struggling to figure out how to do it. However after exploring around, I finally did it and also applied the same effect to product 3 in the home page.

WEEK 15:

After editing the base of the website, I did the details (hover for caption, button leading to movie clip)

I was much more familiar with the app so things went slightly smoother. However, this app had a lot of "bugs" so it often got laggy or the preview had issues which made my website look weird. I also forgot to do product 3's page in ai so did that and imported it into animate. I then proceeded to complete product 2 and 3 in animate.

Lastly, I tried adding in my audios and sound effects. However when I did all that, my website preview could now work at all, it was frozen at the first frame. I figured out the issue, I edited the project rate of each audio on the "Audacity" app. But when I added it into animate again everything worked smoothly again but the background music didn't play. So then I deleted that and tried to add the button sound effects. However this one was worse, the whole preview became lagged,  my images and fonts became mixed up together so I had to choice but to not add the sound effects and everything went back to normal.

Fig 1.3 Audio Issue - Preview Frozen

After I was done with everything, I wanted to preview again to check if all is alright. But once again adobe animate had issues and my preview didn't work. So I went straight to publishing it. Once again there was an issue, I couldn't get an html and js file when publishing. I tried sooo many times but it didn't work. I tried deleting the audios and tried previewing again and it worked again! I really wanted music and sound effects in my website so I tried adding them back. But it caused such a huge issue that I had to not include any audios.

Fig 1.4 Audio Issue - Images messed up

Fig 1.5 Audio Issue - Elements messed up

Even after removing the audio, my netlify wasn't working and it kept saying error 404 page not found. So after discussing with sir, he mentioned that a few others had the same issue and that we could put our file into google drive and submit it.

SUBMISSION:
Click here for google drive file.

WEEKLY FEEDBACK

Week 11:

-Product selection page no need "back" button

-Each product's "back" button change to "home"

-Don't make it alpha when hover on button, looks like the button stop working. Instead make an outline on the button when mouse hovers.

-Can make a fantasy frame for pop up information.

-Eyeshadow page change to click to change picture.

-Sound effects only on button and when object appears (use same sounds)

Week 12:

- Start Button Smaller

- Loading page doesn't have to be real, can be fake loading page.

Week 13:

- Must make to movie clip if want constant moving animation.

- Buttons for homepage can be more interesting.

- Font smaller a bit for the start page.

Week 14:

- Add short sound effects to buttons.

- Since loading page animation converted to frames, can remove classic tween.

REFLECTION

Experience

This project was a huge and long roller coaster as there were many ups and downs through this journey of creating an interactive website. This app was new to me and I found it difficult to familiarise with it first, but after trial and error and also making so many mistakes, I slowly started to figure things out. I would say besides the fact that this was a tough project, I had quite some fun seeing my website slowly  build up. I learnt quite a lot of things in adobe animate, like how to do transitions and simple animations. However I was still really disappointed and upset that I could not build my website till its fullest by adding audios and uploading in onto netlify. In conclusion, it was a good and fun experience. But I definitely wished I had more experience and more tutorials in class to understand the app more and create the website till its best. But overall I am pretty satisfied with my website.

Observation

Creating an interactive website on Adobe Animate taught me the importance of balancing creativity with technical precision. I found that using keyframes, symbols, and action scripts was essential for bringing elements to life. Adding interactive features made the site more engaging but required careful attention to detail. Frequent testing was necessary to catch and fix issues early. I also observed that you should have a clear theme of your website so that choosing fonts and images would be easy and everything will come together more.

Findings

Through this project, I found that planning each animation sequence in detail is crucial for smooth functionality. I also find that naming your layers and symbols are so important so that later on you can easy look for them if you ever need to edit it, and my mistake was naming it with lots of abbreviation which caused me to forget the names of each symbol. Lastly,  I also find that one should definitely understand how the app works by practicing first then only proceed and start to create the website. However I didn't have time for that and had to start straight away.