Advanced Interactive Design / Task 3
26.6.2024 - 4.8.2024 (Week 6 - Week 15)
Loke Yan Ling / 0344602
Advanced Interactive Design / Bachelor of Design in Creative Media
Task 3 - Final Interaction Design Project
Instructions
Task 3 - Final Interaction Design Project
Adobe Animate
Fig 1.1 Carousel Effect
On Task 2, Mr Shamsul already raised the concern on developing the carousel effect into Figma. There is less tutorial about developing a website on Adobe Animate as this software more suitable for animation stuff. Therefore, I have to experiment by myself. However, there is inconsistent consist, some of the carousel effect works smoothly but some of them not (too perfectionism on small little detail).
Sir also suggest that applied some animation before the carousel appear, I have applied with the card shuffling from the back to the front by adding more visual interaction.
Fig 1.2 Script
I also learnt that if there is no pre animation, just want the pages being directly transfer to one frame have to use .this.gotoAndStop('') or else will be .this.gotoAndStop('').
Fig 1.3 Error
I keep facing these issue when developing the website in Animate and make me keep the habits of pressing ctrl +s when making any changes and update.
Fig 1.4 Carousel Effect
I propose substituting "Stages" for "Event Place." This alteration aligns more closely with the overarching narrative of The Hunger Games. The locations and events featured in this section are integral to Katniss's character development, serving as pivotal moments that shape her emotional and psychological journey. Consequently, "Stages" accurately reflects the transformative nature of these experiences. The animation used in the carousel effect is classic tween - ease in - bounced.
Fig 1.5 Images
Within the "Stages" section, it became evident that the initial prototype's interaction model—clicking on an image to progress—was ambiguous. Users lacked clear visual cues indicating the image's functionality. To address this, a right-facing arrow was introduced to guide user interaction. While considering bilateral arrows, it was determined that this approach would compromise image integrity and necessitate disproportionate adjustments across various screen sizes. Such modifications were deemed impractical due to time constraints.
Fig 1.6 Contact Us
The majority of interactive elements and transitions were consolidated within a dedicated "actions" layer for streamlined management. However, the carousel and character components necessitated separate action layers due to their intricate behaviors. These sections required more complex interactions involving multiple commands and button inputs, necessitating isolated control for optimal functionality.
Fig 1.7 Remove Collapse feature
On the last part of developing the website - sidebar menu, the actions cannot be added to the buttons. The sidebar menu is a movieclip, if i want to add actions, it must be inside the movieclip and i cannot access the main timeline. The i found tutorial on Google to solve this issue by using .root. However, it make my whole webpage crash and cannot be preview. I t stay on the preview loading screen about hours, then I have tried to upload to netlify and it shows Fig 1.9.
The webpage can be preview when I remove the .root command. I have to say goodbye to the sidebar menu features. What i can remain is the sliding left and right sidebar animation as I didn't found out the real root issue.
Fig 1.8 Preview
Fig 1.9 Uploading
Netlify: https://the-hunger-game.netlify.app/
As I upload the whole project to netlify, it keep showing the page is not found, then I saw the announcement announce by Mr Shamsul that we can upload the file to Google Drive as submission if facing issue in uploading the webpage. To showcase the final view of the website, I decide to screen recording the preview of Adobe Animate.
Final Submission
Link: https://drive.google.com/drive/AID/Task3/FinalProjectFig 2.1 The Hunger Game Interactive Website Walkthrough
Reflection
This software was a total pain to use for building a website. It was so frustrating! I'm used to doing animations in Figma, but this time I had to manually tweak every single frame. And in other classes, we used code for animations. The website I made wasn't as interactive as I wanted because of limits on the server and the software itself. Even though it was tough, learning a new tool is always a good thing. I got to make a website based on my favorite movies, which was really cool. And even though I've done proposals, wireframes, and prototypes a million times, this course reminded me how important they are. They're like a roadmap for your project.
Comments
Post a Comment