TANG LILIN (0376668)
Advanced Interactive Design
Task 3: Completed Thematic Interactive Website
15/11/2025 - 08/01/2026 （ Week 8 - Week 15 ）
Bachelor OF DESIGN (HONERS) IN CREATIVE MEDIA
LIST
After creating the figma file, since the content in figma cannot be directly imported into Animate, I first created a complete website prototype in Adobe Illustrator. As shown in the image below, I then started creating the webpage in Animate.
Fig 1.1 Screenshot of pre-made Illustrator File
In Adobe Animate, I first created a new HTML5 Canvas document and set the frame rate to 24fps to ensure smooth animation playback.
Fig 1.2 Process of Loading Page
Because the previous loading animation style couldn't be reproduced in Animate, I changed the loading method.
Next, I drew a full-screen black rectangle as the background to make the white loading bar and text stand out more. Then, I created a new layer and drew a thin, white progress bar outline using rounded rectangles (keeping only the stroke and transparent fill), centering it to the center of the stage. Then, inside the outline, I drew a narrower white rounded rectangle as the "loading progress segment" and converted it into a symbol for easier animation.
In the timeline, I set keyframes for the progress segments: the first frame starts it from the left (or is shorter), and in subsequent frames, I move it to the right or stretch it to create a "fill-progress" effect. I also added a motion tween between frames to achieve the visual effect of a one-way loading progress bar. After that, I added centered text "Loading…" below the progress bar and checked the alignment and position of all layers to ensure the progress segment always remained within the outer frame. Finally, this loading animation is played only once: after the animation finishes, it triggers a jump to the next page and the next screen.
Fig 1.3 Process of Home Page
When creating the homepage, I first imported the final static layout of the homepage from the AI file. I built a navigation bar structure at the top, placing the brand logo "NYONYA TILE" on the left and menus such as HOME, ORIGIN, PROCESS, GALLERY, and NOWADAYS on the right, using thin lines to enhance separation and a sense of order. In the center of the image is a large main title "TITLE / NYONYA," using gray and white font against a black background for a strong contrast. A brief introductory text is added to the lower left corner, and a "GO TO ORIGIN" button is placed in the lower right corner, guided by a thin horizontal line. To enhance the overall atmosphere and spatial hierarchy, I added a slight vignetting or gradient effect to the top layer, making the page visually more stable and focused. After completing the layout, I imported the architectural illustration in the center and used a rounded rectangular container and Mask technology to display the illustration only inside the rounded window, creating a visual language of "window revealing content." I then set keyframes for the mask in the timeline and used Motion Tween to control the smooth expansion of the mask from narrow to wide, while adding a slight Ease in to make the opening and closing transition more natural. Other elements in the screen, such as the nav bar, content summary, and button, all enter the screen simultaneously from the top and bottom using the "ease in" function. Finally, I checked the layer order of text, illustrations, and masks to ensure the masks only affect the illustrations and don't interfere with the title and button. I also converted the button into an interactive element so the page remains in the final layout after the animation finishes. Clicking the "GO TO ORIGIN" button takes the user to the next page.
Fig 1.4 Process of Origin Page
When creating the ORIGIN page, I also imported the pre-made layout and added animation to the timeline, allowing the screen to gradually transition from a relatively empty and concise initial state to the full content display. First, I used a consistent webpage framework to ensure a consistent page atmosphere. The left side serves as a chapter guide area, placing the main title "ORIGIN" and a clickable "GO TO PROCESS" button; the right side serves as an information reading area, containing a textual explanation of the origins of Peranakan tiles, with readability controlled by line spacing and alignment. Then I started creating the opening animation: In the initial frame, I set the text area and image strip to be lower and with lower opacity, allowing the viewer to immediately sense the "opening up of space." Then, in keyframes, I moved the text area and two images to their final layout positions, using scaling and opacity changes (Motion Tween + Alpha) to "push" the image strip into the main visual area, with the text description simultaneously entering the reading area. Finally, I used Ease in to make the transition smoother and less abrupt. After the animation ends, the timeline stops at the final screen, and the page becomes interactive. I created the buttons as elements and added hover visual feedback; clicking them allows the user to jump to the next page (PROCESS), thus completing the full experience chain from "introduction" to "reading and continued exploration."
Fig 1.5 Process of Process Page
The animation creation method for PROCESS and NOWADAYS is the same as for the ORIGIN page.
Fig 1.6 Process of Gallery Page
On the GALLERY page, I first imported each card-style layout created from AI. To achieve the animation of "switching from one card to the next," I placed different tile cards in different frames on the timeline: each card had its own background layer, text layer, image layer, and wireframe layer. Keyframes were added at the transition points, and Motion Tween combined with alpha changes was used to make the old card fade out and move away, while the new card faded in and moved into place. This ensured a smooth and seamless transition even when the background color and content differed. Finally, I added click interaction logic to the Actions panel: a click event was bound to the button instance, and after clicking, `gotoAndStop()` was used to jump to the next frame (the starting position of the next tile card), allowing the user to switch to the next tile and continue playing the transition animation. After completion, I consistently checked whether the text exceeded the safe area, whether the buttons were clickable, and whether each transition animation ended in the correct "readable state," ensuring the page was both visually appealing and easy to navigate.
Fig 1.7 Process of Navigation Bar
Finally, I created the nav bar's interactive effect, setting a floating effect so that clicking each button would jump to the corresponding page.
VIDEO
Mr. Shamsul gave me feedback that the overall layout was very clear and the information hierarchy was easy to understand; the gallery display was well done, the tile images were presented in a unified and visually focused way, and looked more professional.
Experience
This time, I used Adobe Animate to complete the visual and animation effects for the entire page: from the loading animation to the homepage opening, the content entry for ORIGIN, and the tile switching in the gallery. I adopted a workflow of "completing the final layout first, and then overlaying the animations and interactions" to ensure that the page remains readable and clickable after each animation, and that users can jump to the next page or the next tile via a button.
Observation
During the production process, I discovered that the real time-consuming part wasn't the layout itself, but rather "making the animations look natural and not disrupt the layout." Sometimes, the animations were correct in the file, but they would look wrong in the preview, which puzzled me. The text sections on each page also frequently had issues, which I spent a considerable amount of time adjusting.
Finding
The biggest challenge this time was coordinating and managing motion effects and interactions: the animations needed to have a narrative feel, while ensuring users weren't forced to wait, and the buttons needed to maintain consistent size, position, and feedback across different pages and tiles. Through continuous adjustments, I realized that a "unified grid and component specification" significantly reduced the error rate and made the gallery display more professional and systematic. Overall, this process made it clearer to me that motion effects are not decoration, but rather need to serve information presentation and navigation experience.
.jpg)
Comments
Post a Comment