DST60804 | FINAL TASK
22/04/2026 - 31/07/2026 (Week 1 - Week 15)
LIST OF CONTENT :
MIB
PROGRESSION
I started with one of the easier pages which was the 'How To' page. The main goal and purpose of this page is to show the viewers how to watch anD understand a game by using the scoreboard on the screen.
I originally went with the idea of a partial overlay but when I had a technical issue and lost the original file. When I redid the page, I decided to do a full overlay instead with larger text and also included the exit button as advised by Mr Shamsul.
Once I locked that page, I moved on to the About page. Overall, this page had no large issues. The main issue I faced was coding the back and forwards navigation. I wanted to do like a sliding animation. On certain pages, the navigation worked and on others, it would stall and not move. I had to double check and redo the code. Afterwards, I managed to get it to work and added in the designs and background.
After, I started to draw the designs that I needed for the pages. I opened a seperate working file for that process. This process took me much longer than I had initially planned for as the difficulty came from finding accurate images for reference and also capturing the detail in the sketch and in the actual animate design process.
I have included all the sketches I did and their original reference in this folder:
Next, I did the dynamics page. I had a few issues when designing this page. The first was that the movie clip I included wasn't playing correctly. I ended up deleting and redoing the whole clip.
I also had problems with my overlay for each card due to the original format being 3 seperate movie clips. It ended up overlapping on the lower cards' overlay and causing an error. After consulting back and forth with ChatGPT, I decided to make it all in one movie clip instead and to add some designs with animation.
As per the feedback with Mr Shamsul, I original planned for a side panel for the navigation but he recommended doing a static navigation and a seperate back to main button for each section. So instead, I did a center-aligned navigation for all the main page.
I also decided to add a watermark and a PSA that this website is not in affiliation with any official NHL or NHL teams.
For the home, I decided to do a semi interactive rink with each player leading to a different page. Due to time constraints, I didn't manage to make draw 2 more. I wanted to do one that linked to the 'How To' page and another to the NHL official website. I also added a quick homepage animation to the title.
FINAL OUTCOME
Website Link: More Than A Game
[Please take note that some of the pages might take longer to load.]
REFLECTION
Overall, this project was much more challenging than I initially expected, especially because it required me to balance both the visual design and technical development of the website. Although I already had a clear idea of creating an interactive website that introduced ice hockey in a more approachable way, translating that idea into Adobe Animate was not always straightforward. Many of the issues I faced only became noticeable after I started connecting the pages, movie clips and navigation together.
One of the biggest challenges was troubleshooting the coding and animation. There were multiple instances where a button, overlay or movie clip did not behave the way I intended, even when the code appeared to be correct. This meant that I had to repeatedly check the instance names, frame labels and structure of the movie clips. At times, I had to simplify or completely redo certain sections, such as combining the overlays into one movie clip instead of keeping them as separate clips. Although this process was frustrating, it helped me understand the importance of organising the file properly and testing each interaction before moving on to the next section.
I also underestimated how long the illustration process would take. As the website was based on ice hockey, I wanted the players, positions and movements to be represented accurately. Finding suitable references and translating the details into my own illustration style took much longer than planned. Because I spent a large amount of time developing the assets and solving technical issues, I was unable to complete every interactive element I originally intended for the homepage. This showed me that I need to manage my time more realistically and prioritise the most important functions earlier in the process.
Despite the difficulties, I am satisfied with the overall outcome. I managed to create a cohesive visual direction and include several interactive elements that support the purpose of the website. I also think the use of the rink, player illustrations, animated elements and scoreboard explanations makes the topic more engaging for viewers who may not already understand ice hockey.
Through this project, I became more confident in using Adobe Animate to build an interactive website and gained a better understanding of how design, animation and coding need to work together. More importantly, I learned that simplifying an idea does not necessarily weaken the final outcome. In some situations, simplifying the structure made the website clearer and more functional. If I were to improve the project further, I would complete the remaining homepage interactions, optimise the loading time and conduct more user testing to identify areas where the navigation or information could be clearer.