Advanced Interactive Design - Final Project: Completed Thematic Interactive Website
获取链接
Facebook
X
Pinterest
电子邮件
其他应用
-
20.11.2025 - 25.12.2025 (Week 9 - Week 13)
Lin chenyi/ 0367008
Graphic design/Bachelor of Design in Creative Media
Advanced Interactive Design - Final project
INSTRUCTIONS
LECTURE
Adobe Animate Exercise: 5-Page Timeline Website
Objective: Demonstrate mastery of Adobe Animate's fundamental interactive controls by creating a fully functional, five-page website structure using a single main timeline.
Deliverables: A single Adobe Animate file (.fla or .html) that navigates between five distinct content sections.
Technical Requirements Your project must meet all of the following criteria: 1. Timeline Structure
5 Distinct Pages: The project timeline must be clearly divided into five unique content pages (e.g., Home, About, Services, etc.).
Frame Labels:Each of the five page start frames must be clearly identified using a Frame Label (e.g., home, contact).
Frame Actions:Every page's starting frame must contain a JavaScript command to stop the timeline (this.stop();).
2. Navigation & Interactivity
Persistent Menu: A Navigation Menu containing five buttons must be visible and accessible across all five pages.
Button Functionality: Each button must be a symbol with a unique Instance Name and must execute the gotoAndStop() command to navigate to the correct page label.
3. Animation Requirement
Classic Tween Transition: All navigation actions (moving from one page label to the next) must use a 5-frame Classic Tween to create a smooth, animated transition between the page content, rather than an instant jump.
In summary: Build 5 labeled, static frames that pause, and use persistent buttons to jump between them with a 5-frame fade/slide animation.
In the final project, we need to refine the prototype and develop it into a fully functional interactive website using Adobe Animate.
Task requirements:
Publish files and folders (HTML, CSS, Javascript, etc)
Upload the published files and folders to Netlify
Video presentation and walkthrough of your project
Process
When building this website, I completed it page by page, one by one. Because the website incorporates many interactive effects and animations, such as mouse hover effects, horizontal text movement, custom cursors, and page transition animations, the entire production process was much more complex than I had imagined. Many effects seem simple, but before they were actually implemented, they required constant testing and adjustments to ensure they didn't interfere with each other on the page.
I primarily used Adobe Animate to create these animations and interactions, frequently using tweening and masking effects. Initially, I referenced designs I had created in Figma, but after starting development, I found that some effects didn't work smoothly in Animate or didn't look as expected, so I temporarily modified some designs to make the overall experience smoother.
I made the website's opening page a loading process, using animation instead of a simple waiting screen. To make this effect clearer, I broke down the different parts into several video clips, which made it easier to control. After loading, users can click a button on the page to proceed to the next page; the whole process is seamless.
Fig 1.0 Page Load Timeline
Page is loading
When designing the main page, I encountered a major problem with text interaction. My initial idea was for the text to enlarge when the mouse hovered over it, but because the mouse moved so frequently across the page, the animation kept being triggered, making it look cluttered. Later, I realized that interactive effects aren't just about "whether they can be done," but about considering whether the user will feel comfortable using them. This gave me a deeper understanding of interaction design.
Fig 1.1 Album Hover Landing Page
Album hover animation
On the About page, I made the images slightly enlarge when the mouse hovers over them, so users can immediately sense that they are interactive. The enlarged images can be clicked to switch to different pages, making the browsing process more intuitive. In addition to the interactive images themselves, I also added simple visual feedback to the "Learn more" button; the button color changes when the mouse hovers over it, reminding the user that it is a clickable element.
Fig 1.2 About page
Regarding page redirection effects
I realized that my first version didn't include a menu bar on the About page, so I made changes.
In the menu design, I added a simple hover feedback effect. When the mouse hovers over the menu text, a line appears below it, and the text color changes. This design makes the navigation visually clearer and allows users to immediately see which options are clickable.
I created individual video clips for the menu text and controlled the visual changes between default and hover states. This way, I can more clearly manage the interaction of each menu item without affecting other elements on the page.
Walkthrough Video - Final Project: Completed Thematic Interactive Website
Reflection
In the early stages of website development, progress was relatively smooth, with pages and basic animations completed as planned. However, as the project progressed into the interaction and script setup phase, the difficulty increased significantly. Especially when handling hover effects and interactive logic, I needed to constantly try different methods to achieve the desired results. There were also instances where the preview wouldn't run properly, requiring me to reopen Adobe Animate to continue working, which disrupted my workflow to some extent.
Despite the challenging process, I successfully completed the entire website and am satisfied with the final result. However, in reviewing the project, I realized there's room for improvement in user onboarding. For example, clearer prompts could be added to less noticeable clickable areas to improve the user experience. Also, this project consumed a significant amount of my time and energy, leading to an imbalance in my time allocation and impacting the progress of other modules.
Overall, this experience taught me that using Adobe Animate for website development is not unmasterable, but it requires patience to familiarize myself with its workflow and animation logic. Through continuous practice, I gained a deeper understanding of the relationship between animation and interaction.
22 Dec 2023 25 Sep 2023 - 28 Dec 2023 / Week 1 - Week 14 Lin Chenyi 0367008 Design Research Paper / Bachelor of Creative Media Design (Honours) / Taylor's University Final Paper
评论
发表评论