Advanced interactive design final project thematic interactive web application

Week 9 - Week 14

Wang Zilong/ 0361141

Advanced Interactive Design / Bachelor of Creative Media / Taylor's University

Final Project / Thematic Interactive Web Application

INTRODUCTION

Final project

In modern web page and interactive game development, the process from website prototype design to actual interactive implementation is a key process. This process not only includes visual design, but also involves the implementation of front-end technology. In this article, we will explore the complete process from the website prototype design stage to the production of actual interactive effects in Adobe Animate.

First thing first, I am gonna arrange the layout of the pages and make the turns of every page clear, basing on the wireframe&flow chart that I made.

Convert the prototype to interactive effects in Adobe Animate

Preparation

The first step to realise the prototype in Adobe Animate is preparation. This includes:

- Get the prototype design: Export the prototype design from the design tool, usually in PNG or SVG format.

- Create an Adobe Animate project: Start Adobe Animate, create a new project, and set the appropriate canvas size and resolution.

Import and set up assets

Import the assets from the prototype design into Adobe Animate. Use the following steps:

- Import the design: Select "File" > "Import" > "Import to Stage" to import the design onto the stage.

- Create layers: Create layers for different elements according to the layout of the prototype design. For example, one layer for the background and another for buttons and interactive elements.

- Convert to symbols: Convert commonly used elements (such as buttons, icons) into symbols, which can be easily reused and edited.

 

Design animations

- Timeline management: Use the timeline to create animation effects, such as feedback when a button is clicked, interface switching animations, etc.

- Keyframe settings: Define the start and end states of the animation by setting keyframes. Adjust the keyframe positions on the timeline to control the speed and smoothness of the animation.

- Frame-by-frame animation: For complex animation effects, you can use frame-by-frame animation technology. Frame-by-frame animation allows designers to draw each frame step by step to create more delicate motion effects.

Add interactive features

- Write code: In Adobe Animate, use ActionScript 3.0 or JavaScript (for HTML5) to write interactive code. For example, handle button click events, implement page jumps, or update content.

- Test interaction: Test interactive effects in real time in Adobe Animate. Use the Test Movie option in the Control menu to see if the designed interactions and animations are as expected.

Optimise and adjust

- Optimise performance: Check and optimize animations and interactions to ensure they run smoothly on various devices and browsers. Compress images, optimize code, and reduce loading time.

- Fix issues: Fix any functional or visual issues based on the test results. Make sure all interactions and animations run correctly as designed.

Export and integrate

Export animation

In Adobe Animate, after completing the design and development, export the project to a format suitable for web use:

- HTML5 Canvas: Select File > Export > Export Animation to export the project to HTML5 Canvas format. This format is suitable for modern browsers and supports smooth animation effects.

- Video format: For some animations that do not require user interaction, you can export them to video formats (such as MP4) for embedding in web pages.

Integrate into website

Integrate the exported animation into the website:

- Embed code: Embed the exported HTML5 Canvas code into the HTML file of the website. Make sure the paths to the scripts and style sheets are correct.

- Test integration: Test the animation and interaction effects in the actual website. Check if all functions are working properly and ensure seamless integration with other parts of the website.

Netlify link:https://symphonious-sherbet-a0a37d.netlify.app/

Google drive  link:https://drive.google.com/drive/folders/1fPTmF3K9BDppdSS7HiJ1xkhXEZrVBnMd?usp=drive_link

Presentation link:https://youtu.be/EYtnrnL1IEc

Reflection

The process of making a game interactive website is a journey full of challenges and sense of achievement. Looking back on the whole project, I deeply feel the complexity and beauty between design and implementation, especially in user experience and technical implementation, every detail affects the final effect.

In the prototyping stage, the prototypes created by tools such as Adobe XD or Figma help us visualize the layout and interaction process of the website. This process not only allows us to clearly see the structure of each interface for iterative optimization. Every interactive detail in the design is the result of continuous polishing to improve the user experience.

Entering the development stage, Adobe Animate becomes a key tool for realizing the design. By creating animations and writing code in Animate, we transform the design drawings into dynamic and interactive web experiences. During the production process, we must not only ensure smooth animations and accurate interactions, but also solve various compatibility and performance optimization issues. Every debugging and repair is a deep understanding and mastery of technical details.

The testing and launch stages are full of tension, but it is also the time to show the results. Comprehensively testing the website's functionality, compatibility, and performance to ensure that everything runs as expected is the final test of the quality of our work. Post-launch monitoring and maintenance are important steps to ensure the long-term stable operation of the website.

In general, this experience of making a game interactive website has made me realize that a successful project not only depends on careful design in the early stage, but also requires continuous polishing during the development and testing stages. Every adjustment of details and every solution to a problem are the keys to achieving an excellent user experience. Although this process is full of challenges, the satisfaction of seeing users interacting happily and experiencing the game in the end is the most precious achievement.