Advanced Interactive Design - FINAL PROJECT: Thematic Interactive Website
Bachelor of Design (Honours) in Creative Media
Liang Lina 0347076
Advanced Interactive Design - Task 3
INSTRUCTIONS
Lecture & Activities：
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.
Task 3：FINAL PROJECT: Thematic Interactive Website
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
Students will synthesise the knowledge gained in tasks 1 and 2 for application in task 3. Students will create integrated visual assets and refine the prototype into a complete working and functional product experience, a minimum of 5 working pages.
Deploy the final website to Netlify or GitHub. Add the link to your blog (e-portfolio). As a backup plan, upload the project folder to Google Drive as well. Make sure that the Google Drive link is set to public. No video walk-through is required for this submission.
Process：
During the process of building this website, I truly experienced the pain of design. Because this process was too complicated for me. The Animat software was difficult to use, and designing buttons and such was also too complex for me. Moreover, each page was different, and each page needed to be linked, and I had to think about the structure, interaction, and the connection of animations separately. This was an extremely huge workload.
Due to the fact that the website contains a large number of interactive effects and animation designs, such as the mouse hover effect and the transition animations between pages, the actual production process is much more complicated than I initially expected. Many effects seemed not difficult to design at the stage of planning, but in the actual implementation, they require repeated testing and continuous adjustment of parameters to ensure that they run stably on the same page without interfering with each other or causing visual confusion or web page chaos.
Technically, I mainly used Adobe Animate for creating animations and interactive elements, frequently employing tween animations and mask effects. Initially, I intended to follow the designs in Figma exactly, but as I started to create, I encountered many difficulties. Working on web pages in Animate was truly challenging and deviated significantly from the visual effects and interaction experience I had anticipated. There was no other option but to make temporary adjustments or even modifications to the original design during the development process to accommodate the limitations of the software and to make the overall interaction experience more natural and smooth.
In order to meet the requirement of a minimum of five pages for the website design, the first page of the website is designed as a loading page instead of a simple waiting interface. Therefore, I decided to create a simple animation to add a bit of fun to the entire website design and lay the groundwork for the overall style and other aspects of my work. Once the animation is loaded, users can click the button on the page to move to the next page. The entire process is both visually and operationally continuous and seamless.
Looking back on the entire production process, it was truly very painful. Due to my lack of familiarity with the software, I spent a great deal of time and energy, and also experienced many moments of repeated attempts and repeated failures.
The buttons in the picture below are the biggest challenge I have encountered. Making the picture into an image is not difficult, but there might be a problem with one of my steps, which led to a huge difficulty for me when I finished it. My buttons are not clickable on the webpage. So I almost completely revised my content and started the entire process all over again.
Fig 1.0 landing page Timeline
In addition, creating animations is also a major challenge. Although we were taught how to do it in class, when actually doing it, there are still some differences. At least, I often forget what to do and get stuck, so I often have to seek help from others. As can be seen in the picture, my entire An file has a large number of layers and is even a bit messy. Although it might not be perfect, for me, this is truly a small piece of work that was created with the greatest effort.
Fig 1.1 A layer
The page in Figma is quite simple and the navigation bar doesn't have any color change. So in AN, I added a color change. When the mouse hovers over the button, it shows a green color, a vibrant and lively green.
Fig 1.2 home page
And while I was writing my blog, I noticed a minor error in the link of my Netlify website. But there was no time to make the correction.
Below is my "about" page, which briefly introduces my content, and then presents a... Well, I don't know the exact name of this specific animation effect. But I think it's quite smooth.
Fig 1.3 about page
On this page, I have provided a detailed account of the growth process of the Qingyuan chicken. A simple button is used for scrolling up and down, and no overly complex special effects have been added. I believe this is for presenting the content, so I kept it simple.
Fig 1.4 Journey page
On this "Recipe" page, I attempted to create a visually appealing rotating effect, but failed within the "animate" function. Therefore, I had to divide it into four colors to achieve the desired result. It looks a little ugly.
Fig 1.5 Recipes page
Netlify：
Now we come to the Netlify stage. I thought simply dropping the files in would solve the problem, but first I found that the exported HTML was incorrect. Then I discovered that my button worked normally within the "animate" section, but couldn't be used in any other parts of the HTML. This consumed a huge amount of my time throughout my final project. However, the final result was still acceptable. Maybe because of the animations, the loading time was relatively long. But overall, after completing it, I was already very satisfied.
Fig 2.1 Netlify
Final Submission：
Figma Link：https://www.figma.com/design/mLAKXHc1CowKCyUjmszXGP/123?node-id=67-201&t=8pbRBeQK6SDEnicB-1
（Pls wait a moment, the loading ia a bit show!!!）Netlify Link: https://ubiquitous-quokka-f761d5.netlify.app/
Google Drive Link: https://drive.google.com/drive/folders/19JOqY6GohXouzXM9wJw4ormLlSlXjz_T?usp=drive_link
REFLECTION
Experience:
Throughout the development of this website, my experience was both physically and mentally demanding. Although the initial stages of the project progressed relatively smoothly, the workload increased significantly once I entered the interaction and animation phase. Working with Adobe Animate required me to constantly switch between designing, testing, and fixing errors. Many times, simple interactions such as buttons or hover effects did not function as expected after exporting, which forced me to restart parts of the process.
In addition, the complexity of linking multiple pages, animations, and interactions made the project much more time-consuming than anticipated. I spent a large amount of time troubleshooting technical issues, particularly when interactive elements worked in Animate but failed in the final HTML output. This experience tested my patience and persistence throughout the entire project.
Observations:
During the process, I observed that interactive web design is highly sensitive to small technical details. Minor mistakes in settings, layers, or timelines could lead to major functional problems, such as unclickable buttons or broken interactions. I also noticed that Adobe Animate, while powerful, is not always intuitive for beginners, especially when dealing with complex interactions and multiple layers.
Another important observation was the gap between design and implementation. Some effects that appeared simple and visually pleasing in Figma became difficult to execute smoothly in Animate. As a result, I had to adapt my original designs and make compromises to ensure that the website remained functional and visually coherent.
Findings:
From this project, I learned that Adobe Animate is not an unmanageable tool, but it requires sufficient practice and patience to fully understand its workflow and interaction logic. I also realized the importance of early testing and gradual implementation, as technical issues can become more difficult to resolve if they are discovered too late.
Furthermore, this project helped me understand the balance between creativity and practicality. While ambitious animations and interactions can enhance user experience, they also demand careful planning and time management. Overall, this experience strengthened my understanding of the relationship between animation and interaction, and it highlighted areas where I can improve, particularly in user guidance and time allocation for future projects.
Comments
Post a Comment