ADVANCED INTERACTIVE DESIGN: TASK 2
18/06/2026 - 31/07/2026 (Week 9 - Week 15)
Valerius Ethan Wirawan / 0372774
Advanced Interactive / Creative Media / The Design School
Task 2: Animated Interactive Website
2. Process Work & Final Outcome (Highlighted)
3. Feedback
4. Reflection
1. INSTRUCTION
2. PROCESS WORK
On Task 1, every elements are already created.
After completing the visual assets, a low-fidelity prototype was developed in Figma to establish the website structure and navigation system. At this stage, only the first three pages were designed, as the prototype was intended to test the user flow and overall interaction rather than represent the complete website.
Fig. 2.6. Figma: Flow & Navigation TestingDuring the consultation, the lecturer advised that the website should be more interactive and less linear. Initially, the design relied on Next and Previous buttons on every page, resulting in a navigation experience similar to a PowerPoint presentation. At first, this feedback was misunderstood, as it was interpreted to mean that more animations and interactive buttons should be added. However, the intended recommendation was to remove the Next and Previous buttons entirely and allow users to navigate freely through the navigation bar. This revision created a more flexible, user-centered experience, enabling visitors to explore the website non-linearly rather than following a fixed sequence of pages.
After the consultation, I continued developing the website in Adobe Animate instead of Figma.
Fig. 2.8. Adobe Animate StructureI structured my Adobe Animate file by converting most elements into movie clips. The moving elements were separated into individual layers, making them easier to select, organise, and animate independently. All the movie clips were placed within Scene 1, which consisted of only two main layers: the design layer and the Actions layer. The design layer contained all the visual elements, while the Actions layer contained the ActionScript and timeline controls used to manage the interactions and animations.
However, I encountered several technical issues and bugs while using Adobe Animate. These limitations made it difficult to create the complex movements and animations I had planned. To overcome this issue, I manually implemented some of the interactions using JavaScript. Although I had basic knowledge of HTML and CSS, I was not familiar with JavaScript. Therefore, I used AI assistance to help generate and refine the JavaScript code required for the project.
Fig. 2.9. File Organizing & StructureThe project folder contained all of the source files, including the Adobe Animate (.fla) files. Each webpage was created as an independent FLA file to make the project easier to manage and update. After publishing each Adobe Animate file, the software generated the corresponding HTML and JavaScript (.js) files, which were then used as the website pages. Codex was used extensively to help write, debug, and optimise the JavaScript code, particularly because I had limited experience with JavaScript programming.
As shown in the project folder, several CSS files were also included. These CSS files were created using an AI-assisted coding platform called Antigravity, which integrates AI models such as Google Gemini and Claude Opus to support code generation and editing. The CSS files were necessary to provide additional styling and functionality that could not be achieved effectively within Adobe Animate alone.
For example, the website used Google Fonts to ensure consistent typography across different browsers and devices. Fonts created or assigned directly within Adobe Animate were not rendered correctly in web browsers after publishing. Instead, the browser displayed fallback fonts because the original fonts were not embedded. By importing the required typefaces through Google Fonts using CSS, the intended typography was displayed consistently across all pages of the website.
Website Development and Interactive Features
I created most of the illustrations, animations, and page compositions in Adobe Animate, while HTML, CSS, and JavaScript were used to enhance the website's navigation, typography, animations, loading performance, and interactive features.
Throughout the development process, I also referred to AI-assisted coding tools as learning aids and assistants, particularly when exploring HTML, CSS, and JavaScript. Since my lecturer was not always available for consultation, these tools helped me understand programming concepts, troubleshoot issues, and learn from publicly available resources. However, all design decisions, implementation, testing, and final refinements were carried out by me.
Animation and Motion
Most of the animated elements were converted into movie clips in Adobe Animate. Separating them into individual movie clips and layers allowed me to control their movement, position, visibility, and timing independently.
I used timeline animation for movements that were part of the main composition. I also added CreateJS tweens through JavaScript for certain entrance effects. For example, the main home composition begins slightly lower and transparent. It then moves upward while fading into view. This creates a smoother introduction without distracting from the main camera illustration.
The website also uses mouse interaction. CreateJS mouse-over detection allows the canvas to recognise when the cursor moves over interactive movie clips. Buttons can then respond through changes in colour, movement, or cursor appearance. These small reactions inform the user that an element can be clicked.
I also considered accessibility by checking the browser’s reduced-motion preference. If a visitor has reduced motion enabled, the additional entrance animation is not played. This avoids forcing unnecessary motion on users who may find it uncomfortable.
Page Transitions and Consistency
Each navigation button opens a separate HTML page. Although the pages are independent, I reused the same canvas dimensions, navigation position, colour palette, typography, background texture, and loading animation. This creates the impression that all the pages belong to one connected experience.
The highlighted navigation item changes on every page, while the remaining items retain the same position. Keeping the menu stable reduces confusion because the user does not need to relearn the interface after every page transition.
Interactive Sensor-Size Mini Application
The final Sensor Size page contains an Interactive Light Lab. I created this mini application to explain sensor size through interaction instead of only using paragraphs of text.
Unlike most of the website, which is drawn inside the Adobe Animate canvas, the mini application was built with HTML, CSS, and JavaScript. It was placed inside the DOM overlay above the canvas. This allowed me to use standard web buttons, responsive labels, live values, and CSS effects while maintaining the visual style of the Adobe Animate composition.
The application includes four sensor formats:
- Phone
- Micro Four Thirds (MFT)
- APS-C
- Full Frame
When the user selects a format, JavaScript updates the sensor illustration, physical dimensions, light percentage, crop factor, depth-of-field description, and explanatory caption. The selected button also changes to an active state so that the current format is clearly visible.
For example, Full Frame is displayed as 36 × 24 mm, with a crop factor of 1.0× and a shallower depth of field. Smaller formats display different crop and light values. This comparison helps users understand that sensor size affects field of view, depth of field, low-light performance, image detail, and overall image quality.
The visual sensor chip also changes size to represent the selected format. A pixel grid, scan line, light beam, crop frame, and light meter provide visual feedback. The user can move the cursor across the sensor area to influence the light effect, making the information feel more like an experiment than a static diagram.
I also included an information button. When it is activated, it reveals brief instructions explaining how to use the lab. Accessibility attributes such as labels, radio-button roles, checked states, and live regions were included so the controls and changing information are more understandable to assistive technology.
FINAL OUTCOME
4. FEEDBACK
Week 9The website structure is progressing well. Continue implementing the remaining pages while maintaining consistency in the layout, typography, and navigation across the entire website.
Week 10
The animations and interactions are becoming more polished. Ensure that each animation supports the content and user experience rather than serving as decoration. Continue testing the navigation flow.
Week 11
The integration of Adobe Animate with HTML, CSS, and JavaScript is effective. Continue refining the code and resolve any technical issues to improve performance and browser compatibility.
Week 12
The interactive features successfully encourage user engagement. Consider accessibility by reducing unnecessary motion and ensuring that interactive elements provide clear visual feedback.
Week 13
The Sensor Size interactive module is a strong educational feature. Continue improving the clarity of the interface and make sure users can easily understand how to interact with the application.
Week 14
The website is nearly complete. Perform comprehensive testing for responsiveness, navigation, loading performance, and consistency across different devices and browsers. Resolve any remaining bugs before deployment.
5. REFLECTION
Observation
Throughout the development stage, I observed that creating an interactive website requires balancing design and programming skills. While Adobe Animate was effective for creating animations and visual compositions, it had limitations when implementing advanced interactions. Combining Adobe Animate with HTML, CSS, and JavaScript made it possible to create a richer and more flexible user experience. I also observed that careful file organisation and modular development significantly reduced the complexity of managing a large project with multiple pages.
Experience
This project provided valuable experience in developing a complete interactive website from concept to deployment. I learned how to organise Adobe Animate files efficiently by using movie clips, scenes, and structured layers while integrating web technologies such as HTML, CSS, and JavaScript. Since JavaScript was new to me, I used AI-assisted coding tools as learning companions to better understand programming concepts, troubleshoot technical issues, and explore different implementation methods. Rather than simply copying generated code, I studied how each solution worked, tested it repeatedly, modified it to suit the project, and refined the final implementation myself. This process not only helped me complete the website but also improved my confidence in combining creative design with front-end development.
Comments
Post a Comment