Task 2_Final Project
Weekly learning
Week 9
This week’s class focused on creating a multi-page web project in Adobe Animate and linking different HTML pages together. The lecturer demonstrated a new method for managing project files and explained how to create smoother navigation and improve the user experience.
Separating the Project into Multiple Files
Instead of putting everything into one Adobe Animate file, the lecturer suggested separating the project into different files. For example:
- Index page
- Intro page
- Home page
- About page
- News page
- Services page
This method makes the project more organized and easier to manage and edit in the future.
Improving Navigation and User Experience
The lecturer explained that the introduction page and the home page should be separated. After the intro animation finishes, the project automatically goes to the home page.
When users return from other pages, they should go directly to the home page instead of watching the introduction again. This helps create a better user experience.
A Skip Intro button was also added, allowing users to enter the homepage immediately without waiting for the animation to finish.
Publishing HTML Files
Before connecting all pages together, every Adobe Animate file must be published as an HTML file.
The lecturer reminded us to make sure that:
- The stage size is set to 1280 × 720.
- The document type is HTML5 Canvas.
- Responsive settings are enabled.
- The stage is centered.
- “Scale to Fill Visible Area” and “Stretch to Fit” are selected.
- A preloader can be included.
- The image folder option is checked.
These settings need to be applied to every page before publishing.
Using “Go to Web Page” for Navigation
Besides using labels, the lecturer introduced another way to connect pages by using the Go to Web Page action.
When creating the action, it is necessary to:
1. Enter the target HTML file name.
2. Set the target to Parent so that the page opens in the same tab.
3. Choose Mouse Click as the trigger.
4. Apply the action to the correct button.
This method allows different pages to be connected like a website.
Setting Up the Skip and Enter Buttons
The lecturer demonstrated how to create two important buttons:
- Skip Intro Button
This button allows users to skip the introduction and go directly to home. HTML.
- Enter Button
This button leads to intro_home.html, and after the transition animation is completed, the project automatically enters home.html.
These functions help make the navigation smoother and more user-friendly.
Adding Instance Names to Buttons
The lecturer emphasized the importance of assigning instance names to buttons.
Instance names are required when adding actions. Without them, the buttons will not work properly, and page navigation cannot be achieved.
Connecting All Pages
Finally, the lecturer showed how to connect the homepage to other pages such as About and News.
He reminded us that：
- Every button needs an action.
- All pages should follow the same settings.
- Existing symbols should not be deleted accidentally.
- The whole project should be tested after all links are completed.
Week 9 Exercise Document
Week 10: Project Consultation
In week 10, we will have the project consultation online via Teams.
Week 11: Progress Check (Online)
Week 12-13: Consult with teachers face-to-face about the design progress of the final project.
Project Overview
This project, themed "Malaysia Petroleum," utilized Adobe Animate HTML5 Canvas for interactive web page creation. The work revolves around the Malaysian petroleum industry, its uses, extraction processes, transportation methods, refined products, and the energy economy. Through multi-page navigation and interactive buttons, static knowledge content is transformed into browsable, clickable, and switchable web pages.
The final work consists of multiple HTML pages, including index.html, petroleum.html, explore.html, and malayisa.html. Each page maintains a consistent top navigation bar and overall visual style. Users can browse different content through a homepage button, navigation dropdown menus, timeline buttons, and information cards. The overall design uses watercolor-style elements such as oil platforms, factories, transport ships, and energy facilities as visual elements, resulting in a clear, unified visual style and strong thematic recognizability.
Weekly progress
- WEEK 9
In task 1, I finally created the initial static prototype of 11 pages in Figma.
Figma document
I felt that the style and color scheme of the 11 pages I made were somewhat inconsistent, so I sent them to my teacher hoping to get his feedback.
The teacher said it looked okay and we could move on to the next step. However, he said it looked very much like an AI-generated image, and I also felt that the color scheme was inconsistent. Some pages used overly saturated colors in the images when I used Procreate, and the styles also differed. So I reduced the saturation of the first six pages and changed the style to a watercolor style like the last five, making the whole website more unified.
- WEEK 10
I spent a week unifying the entire static website prototype.
Before
After
Afterwards, I saved the six revised pages and the next five pages again as PNG files. I sent the images to the teacher and waited for their feedback.
The teacher said it was fine and I could continue. He also said I needed to explain in detail how I drew my page design. In the Task 1 blog post, I finally uploaded all the source files. I will also organize my modified SVG images into folders for easy access.
These are some images I found online to inspire my website design, along with descriptions of each page. (Instructions for creating the images are also included.)
After that, I completed the interaction on Figma.
Figma demo video
- WEEK 11-14
In the past few weeks, I started working on my final project at AN.
Final result of the work
The homepage features the title "Welcome to the World of Malaysian Petroleum," accompanied by illustrations of offshore oil platforms, brief introductory text, and a "START EXPLORING" button, guiding users to subsequent pages. Multiple content entry cards are placed at the bottom of the homepage, allowing users to quickly understand the main sections of the work.
The petroleum page showcases the history of Malaysia's oil development. The left side of the page features a circular timeline button, while the right side provides descriptions of events for each year. Clicking on different time points navigates to the corresponding content frame, with the selected time point displayed using a color change.
Page structure and content design
This work is organized using a multi-page structure, with each page serving a different information display purpose. The homepage primarily serves as a guide; the petroleum page introduces the concept of petroleum, its main uses, and the history of Malaysia's petroleum development; the explore page showcases knowledge about oil extraction, transportation, and refining processes; and the malayisa page displays content related to Malaysia's petroleum economy, petroleum industry risks, and sustainable energy.
Implementation of main interactive functions
1. Homepage START EXPLORING Button:
Clicking the START EXPLORING button on the homepage will directly redirect users to the explore.html page, allowing them to enter the exploration and learning section. This button serves as both a homepage guide and a content entry point.
2. Top Navigation Bar and Hover Drop-down Menu:
A unified navigation bar is placed at the top of each page, including Home, About Petroleum, Explore & Learn, and About Malaysia. Hovering the mouse over the corresponding section will display a white drop-down menu; clicking the button inside the drop-down menu will navigate to the specified page and frame.
3. Page Navigation:
Clicking the drop-down menu will take users to the corresponding page and content frame, helping them quickly browse specific content.
4. Timeline Circular Button Interaction:
The five circular buttons (one, two, three, four, and five) on the petroleum page correspond to frames 3 through 7, respectively. Clicking the button will switch the page to the content for the corresponding year, and the button color will change, helping users determine the current time point they are viewing.
5. Information Module Click Switching:
Some content modules are made into video clips, each with two frames. When the user clicks on a module, the screen switches to the second frame; clicking again returns to the first frame, achieving an interactive effect of expanding and collapsing content.
Figure 3 Oil extraction process page
Figure 4 Refining and Petroleum Products Page
Problems and solutions during the production process
When creating the navigation dropdown menu, an initial issue arose where the menu would appear briefly and then disappear instantly after a page transition. This was due to a delay in dropdown menu initialization; the menu wasn't hidden in time when the page loaded. This was resolved by removing the delayed initialization and setting the dropdown menu's initial state to hidden.
When creating the timeline buttons, clicking them sometimes resulted in no response. Initially, it was suspected that a layer above was obscuring the button, so the timeline button layer was moved to the top.
Subsequent console errors revealed that the button was actually clicked; the real problem was an incorrect object reference in the navigation code. Finally, controlling frame transitions using the main timeline variable resolved the issue, allowing the timeline buttons to switch correctly.
In the multi-page navigation section, the project initially required handling navigation between different HTML files. To prevent path invalidation after deployment, relative paths were consistently used for navigation addresses, such as explore.html, petroleum.html, and malayisa.html, instead of absolute paths on the local computer. This ensured more stable page navigation during both local testing and production deployment.
Background music processing instructions
During project development, background music was initially created and tested to enhance the atmosphere of web browsing. However, during final testing, it was discovered that the project consists of multiple independent HTML pages. When a user navigates from one HTML page to another, the browser reloads the page, causing the music to interrupt or restart.
While the issue of music interruption across pages could be addressed using outer pages, iframes, or local storage of playback progress, these methods alter the project structure and may increase instability during deployment and testing. Considering that this project primarily showcases page interaction and content browsing, to ensure a stable and smooth final result, it was ultimately decided to remove background music. This avoids music interruptions affecting the overall user experience.
Final result
The final product features a homepage navigation, top navigation bar, mouse hover dropdown menu, multi-page navigation, frame-specific navigation, timeline button switching, and interactive information module clicks. The overall page style is consistent, the interaction flow is relatively complete, and it clearly presents Malaysian petroleum-related knowledge.
From the final demo, users can access the exploration page from the homepage or navigate to different content sections via the top navigation bar. On the petroleum page, users can browse petroleum development data from different years using the timeline button. On the explore page, users can view the oil extraction, transportation, and refining processes. On the malayisa page, users can view information related to the petroleum economy, industry risks, and sustainable development.
Figure 5. Oil Industry Risk Page
Final submission
Project Reflection
Completing this interactive website project on the theme of Malaysia’s petroleum industry has been one of the most rewarding learning experiences in this course. From researching the topic and planning the website structure to designing the interface in Figma, creating interactive animations in Adobe Animate, and finally deploying and testing the website, I experienced the complete workflow of developing an interactive web project. Looking back, I not only improved my design and technical skills but also gained a better understanding of the importance of planning, user experience, and problem-solving.
One of the biggest lessons I learned was the importance of maintaining visual consistency. At the beginning of the project, I focused on completing each page individually, which resulted in noticeable differences in colors, illustration styles, and overall visual quality. After receiving feedback from my lecturer, I spent a week refining the entire website. I adjusted the color saturation, redesigned several illustrations using a unified watercolor style, and standardized the navigation bar, information cards, and page layouts. This process made me realize that establishing a clear design system before creating multiple pages can greatly reduce unnecessary revisions later in the project.
Besides improving my visual design skills, I also became much more familiar with the technical development process. Instead of placing everything in a single Adobe Animate file, I divided the project into multiple pages, making the project structure much easier to manage and update. I learned how to export HTML5 Canvas projects correctly, configure responsive settings, organize image assets, and connect different pages using navigation buttons. Throughout the development process, I successfully implemented interactive features such as homepage navigation, drop-down menus, expandable information panels, timeline buttons, and a skip introduction function. At the same time, I learned the importance of using correct relative paths when deploying websites, ensuring that all pages could function properly after publishing.
Another valuable lesson came from thinking more carefully about the user experience. During testing, I continuously adjusted the interaction flow based on usability. For example, I added a “Skip Introduction” button so users could access the homepage more quickly, modified the return navigation to prevent users from repeatedly watching the opening animation, and fixed issues related to drop-down menu behavior. I originally planned to include background music to enhance the atmosphere, but testing revealed that the music restarted every time users switched between pages, which negatively affected the browsing experience. After considering both technical limitations and user experience, I decided to remove the background music and prioritize smooth interaction instead. This experience taught me that good web design is not about adding as many features as possible but about making thoughtful decisions that benefit users.
Although I am satisfied with the final outcome, this project also highlighted several areas where I need to improve. The biggest challenge was the lack of detailed planning at the beginning. Without a unified visual guideline and interaction plan, I had to spend a significant amount of time revising the design and fixing interaction issues during development. In addition, my experience with debugging interactive code is still limited. Some problems, such as unresponsive buttons and incorrect object references, required a long time to identify and resolve. I also realized that I did not fully consider the technical feasibility of certain features, such as background music, before implementing them, which resulted in unnecessary work later.
For future projects, I hope to improve my workflow by preparing a complete design system and interaction specification before starting development. I also plan to build interactive Figma prototypes earlier in the design stage so that navigation and user flows can be tested before moving into development. Furthermore, I would like to strengthen my knowledge of web development and debugging techniques while creating a personal record of common problems and solutions for future reference. Finally, I will spend more time conducting usability testing with different users to collect feedback and further improve the quality of my designs.
Overall, this project allowed me to experience the complete process of designing and developing an interactive website. Although I encountered many challenges along the way, every problem I solved helped me become more confident in both design thinking and technical implementation. More importantly, I have learned that successful interactive design requires not only creativity but also careful planning, continuous testing, and a strong focus on the user experience. I will carry these lessons into my future projects and continue improving my skills as an interactive designer.
Comments
Post a Comment