ADV INTD -Task 3

Edita Chew En Thung / 0357357

Advanced Interactive Design / Bachelor of Design (Honours) in Creative Media / Taylor's University
Task 3  : Final Thematic Interactive Website

---

Table of Content

1. INSTRUCTIONS

2. PROCESS

      i. FINAL

3. FEEDBACK

4. REFLECTION

---

INSTRUCTIONS

fig 1.1 | Module Information Booklet (MIB)

Students will use the knowledge and skills developed in Tasks 1, 2, and 3 to complete Task 4. In this task, you will integrate visual assets, apply design techniques, and refine your prototype into a fully functional and polished product. Focus on creating a seamless and engaging user experience while ensuring all components work cohesively.

PROCESS

fig 1.2

I started with making the loading page and adjusting the opacity (alpha) and taking turns in lighting up the brand's name "fresh" and by breaking/separating them apart in photoshop to make this happen.

I made the layout in illustrator and icons in photoshop to clean the images up, like the serum bottle, lotus pad and lily.
Then I imported the layout that I designed from illustrator onto the stage and started to make the bento.

fig 1.3, 1.4, 1.5, 1.6

After making the buttons and and adding the popups onto the library, I setup the code snippets to make the popup appear.

Then I proceeded to make the close buttons and convert them to buttons, and added action script to the buttons/video clips.

Hover effects and on & off movement is added to the elements so when mouse over, the serum bottle hovers.

fig 1.7, 1.8

Web button redirect:

fig 1.9, 2.0, 2.1, 2.2

I converted the fresh icons of the top and bottom to buttons and added a code snippet to make it redirect to the fresh's official website on click.

fig 2.2, 2.3
Lastly, I added a background music on loop. (royalty free)

Tested it out many times to preview, more than what's shown here.

Lastly, the file is then exported to Netlify.

FINAL

LINK TO NETLIFY HERE.

hi sir make sure to turn on browser settings to allow audio from websites and turn on your laptop sound

PLEASE CLICK TO ON BG SOUND

FEEDBACK

- Just have to do the hovering and go explore around with it.

REFLECTION

Findings

Through my practice with Adobe Animate, I have improved my technical proficiency by mastering basic tools like Motion Tween, Shape Tween, and Classic Tween. Managing layers and organizing assets in the Library has also enhanced my workflow, making projects easier to navigate. By reviewing my animations, I identified specific areas where transitions and timing required refinement, which allowed me to focus on improving these aspects.

Observations

I observed that my strength lies in creating smooth animations using Motion Tween and maintaining an organized workspace through effective layer and asset management. However, I faced challenges with Shape Tweening, where distortions occurred due to improper placement of shapes and keyframes. Timing between frames for seamless transitions also remains a point of difficulty. Feedback from self-assessment has been instrumental in pinpointing these areas for improvement and driving better outcomes.

Conclusion

Using ICT tools like Adobe Animate has significantly advanced my skills, providing a structured way to practice and reflect on my progress. By assessing my work critically, I have identified both strengths and areas for growth. Moving forward, I will focus on overcoming challenges in timing and precision while continuing to leverage self-reflection as a tool for improvement. This experience highlights the value of consistent practice and feedback in honing technical and creative competencies.