LIEW XIAO HUI / 0353121
BACHELOR OF DESIGN (HONOURS) IN CREATIVE MEDIA / ADVANCED INTERACTIVE DESIGN
Final Project: Thematic Interactive Website
JUMPLINK
Instructions
Final Project: Thematic Interactive Website
Feedback
Reflections
Final Project: Thematic Interactive Website
In this project, we are required to create integrated visual assets and refine the prototype into a fully functional website using Adobe Animate CC.
Progress
Adobe Illustrator:
During the second phase of the project, I had already created most of the visual assets for my website, but a few elements were still incomplete. I continued working on these assets using Adobe Illustrator.
Once all the assets were finalized, I organized them into separate layers in a new file. This organization made it easier to import the assets into Adobe Animate CC for further development.
Adobe Animate CC:
Every week, Sir teaches us how to use Adobe Animate CC to create animations. Initially, I struggled to understand how the small bits of knowledge taught by Sir could be used to create a complete website. I spent a lot of time learning how to create small animations before starting on the website.
I faced many challenges when completing this website. The animation I proposed for my website couldn't be achieved with the techniques taught by Sir. I explored on my own to create a smooth looping animation of melting ice cream for the background of the loading page. This required me to place the visual assets I created in Adobe Illustrator into different layers.
 |
| Figure 2.1 Progress screenshot. |
By animating each layer and using the timeline, I finally completed the looping animation of the melting ice cream. It wasn't perfect and not exactly what I envisioned, but it was the best I could do.
 |
| Figure 2.2 Progress screenshot. |
For the progress bar, I used the masking technique taught by Mr. Razif. I wanted to incorporate this technique into the project to apply what I had learned and see if it was workable.
 |
| Figure 2.3 Progress screenshot. |
In the beginning, as I proposed in Project 2, I planned to create a simple dot loader animation with bouncing dots.
 |
| Figure 2.4 Dot loader animation (reference). |
However, in this project, I decided to create a more complex and engaging animation where the dots swap positions and loop. This approach made the animation more interactive and interesting. This took quite a lot of time as I needed to figure out how to make the dots swap positions in a way that would create a seamless looping animation. I used the motion tween technique in Adobe Animate CC to create this effect, allowing me to apply different techniques I had learned in developing the website.
 |
| Figure 2.5 Progress screenshot. |
As the loading bar filled, I wanted it to automatically transition to the home page. To achieve this, I used the 'Add using wizard' tool to add in 'Action', ensuring that after the loading page, the app would automatically navigate to the home page and start playing.
 |
| Figure 2.6 Progress screenshot. |
Next, I proceeded to complete the homepage. I wanted the background animation to loop while the other elements on the page remained static. Initially, I placed all the homepage elements into the same layer for better organization. However, I realized that this caused all elements to either loop or stop together, which wasn't what I wanted. I wanted the background to loop while the buttons and other visual elements stayed static. I decided to separate them into layers: one for the looping background animation, one for navigation, and one for visual assets that only animate when transitioning from the loading page to the homepage.
To keep the Adobe Animate CC file clear and organized, I created animations within individual layers instead of placing all elements on the main timeline. The main timeline only contains layers that separate major elements, such as the background (BG) and foreground. All visual assets with animations are nested within these layers, maintaining a structured and manageable project file.
 |
| Figure 2.9 Progress screenshot. |
Then I proceeded with creating the About page and Nutrition page. With each step, I became more familiar with creating animations and linking buttons to pages.
 |
| Figure 2.10 Progress screenshot. |
For the experience page, I created a circle animation that fades in by adjusting the alpha from 0 to 100 after the user clicks the button. Additionally, I applied a counterclockwise rotation to add an interactive element to the animation.
Figure 2.11, 2.12 Progress screenshot.
At the end, after I completed all the animations on my website, I decided to add background music (BGM) starting from the loading page to make the experience more immersive. However, I encountered issues importing the audio. It wouldn’t autoplay and only played for a few seconds when a button was clicked.
 |
| Figure 2.13 BGM. |
I searched for solutions online, but none of them worked. I also tried adding the BGM using HTML code, but it still wouldn't autoplay. Unfortunately, I had no choice but to give up on this feature.
 |
| Figure 2.14 Research. |
Final Thematic Interactive Website
Link to Website: https://liewxiaohui-finalaidproject.netlify.app/
Link to Google Drive
Week 14
Edit the publish settings so that the website doesn't have white space on the left and right sides and can stretch to fit the webpage size. Ensure that the navigation bar and elements are rearranged appropriately as the webpage stretches.
REFLECTIONS
Experience
At first, I felt confused about how to use the knowledge that Sir taught in class to create my own animated website. It seemed like we were only learning simple animations. However, after exploring more with Adobe Animate CC, I was able to create some interesting animations. Despite this progress, my skills were still not mature enough, and the animations didn't fully meet my expectations.
Observation
I observed that creating an animated website is not easy, as it requires designing an environment that engages the audience and allows them to interact with the webpage. More practice with Adobe Animate CC is necessary for me to create more polished animations rather than the simple ones I can currently produce.
Findings
I found that creating a thematic interactive website is time-consuming because errors can occur, or actions might not work due to typos. It requires a lot of time and concentration to make the website function correctly.
you did good.
ReplyDelete