ADVANCED INTERACTIVE DESIGN - TASK 2 -FINAL DESIGN
Advanced Interactive Design - Task 2 - Final design
——
Ding Jiaqi/0379388
Advanced Interactive Design / Bachelor of interactive spatial design
——
Week9
After the prototype was approved, I began importing the graphics into Adobe Animate in PNG format.
Week10
For the loading section, I created an animation that appears before the website's homepage. I placed the text "Loading..." in the center of the screen and designed a circular progress bar to clearly indicate that the page is loading.
In this section, I created a welcome animation that plays before the user reaches the website's homepage, featuring "Welcome to Poo to Paper Lab" as the main title.
I converted the welcome screen into a separate symbol and extended the animation's duration on the timeline. Using tweening, I controlled the text and background elements so they gradually appear and remain visible for a set period. The animation runs at 30 FPS, spanning approximately 154 frames with a total duration of about five seconds.
Week11
For the main page, I focused on creating the homepage animation. I began by establishing the overall visual design, which included the top navigation bar, project title, introductory text, and the "Start the Journey" button, alongside natural elements such as trees, grass, and clouds.
To add visual interest, I converted the elephant into a separate symbol and animated it within that symbol's timeline. By placing keyframes at various points and adjusting the elephant's position across them, I created an effect where the character enters the scene from the right side of the canvas.
In this section, I created subtle animations for the leaf, grass, and plant elements on the homepage. First, I converted the branches, leaves, and grass clusters into separate symbols; then, I set keyframes at various points along the timeline and linked them using motion tweens. By fine-tuning the position, angle, and tilt of these elements between keyframes, I achieved a natural swaying effect.
Week12
In this section, I created subtle animations for the leaf, grass, and plant elements on the homepage. First, I converted the branches, leaves, and grass clusters into separate symbols; then, I set keyframes at various points along the timeline and linked them using motion tweens. By fine-tuning the position, angle, and tilt of these elements between keyframes, I achieved a natural swaying effect.
Week12
I used Adobe Animate to create an interactive webpage showcasing the papermaking process. I placed illustrations, text, buttons, and the navigation bar on separate layers and set keyframes along the timeline to ensure the steps of the process were presented in the correct order.
Additionally, I wrote JavaScript code in the "Actions" panel to define click events for the four navigation buttons: "Home," "Process," "Gallery," and "About." The cursor changes to a pointer when hovering over a button, and clicking a button navigates the user to the corresponding HTML page. I also utilized the `removeAllEventListeners()` method to clear previous click events, thereby preventing the buttons from executing actions repeatedly.
In this section, I used Adobe Animate to create an interactive "Pulp and Dyeing" page. I designed three pulp containers holding pink, green, and yellow natural dyes, respectively.Next, I converted the dye containers into "Button" symbols and assigned them instance names to enable programmatic control. I then created animations for the dye containers and the liquid droplets using keyframes.
This is the results page displayed after the papermaking process is complete. Once the user finishes all the steps, the page displays the messages "Congratulations" and "You made beautiful handmade paper!" to clearly indicate that the entire experience has concluded.
I placed the finished handmade paper in the center of the page, accented with leaves and glitter decorations, to highlight the final creation.
——————————————————————————————————————
Final Submission
Link to Netlify：https://vermillion-lamington-17ef88.netlify.app/Source File: Pre video：https://youtu.be/JEcwLX_RuUA
(Might need to wait a few second to load in Netlify)
I used Adobe Animate to create an interactive webpage showcasing the papermaking process. I placed illustrations, text, buttons, and the navigation bar on separate layers and set keyframes along the timeline to ensure the steps of the process were presented in the correct order.
Additionally, I wrote JavaScript code in the "Actions" panel to define click events for the four navigation buttons: "Home," "Process," "Gallery," and "About." The cursor changes to a pointer when hovering over a button, and clicking a button navigates the user to the corresponding HTML page. I also utilized the `removeAllEventListeners()` method to clear previous click events, thereby preventing the buttons from executing actions repeatedly.
In this section, I used Adobe Animate to create an interactive "Pulp and Dyeing" page. I designed three pulp containers holding pink, green, and yellow natural dyes, respectively.
Next, I converted the dye containers into "Button" symbols and assigned them instance names to enable programmatic control. I then created animations for the dye containers and the liquid droplets using keyframes.
This is the results page displayed after the papermaking process is complete. Once the user finishes all the steps, the page displays the messages "Congratulations" and "You made beautiful handmade paper!" to clearly indicate that the entire experience has concluded.
I placed the finished handmade paper in the center of the page, accented with leaves and glitter decorations, to highlight the final creation.
——————————————————————————————————————
Final Submission
Link to Netlify：https://vermillion-lamington-17ef88.netlify.app/
Source File:
Pre video：https://youtu.be/JEcwLX_RuUA
(Might need to wait a few second to load in Netlify)
Comments
Post a Comment