Advanced Interactive Design - Task 3

on

19/11/2024- 26/12/2024 (Week 9-Week 14)
Lizzie Tanaka (0362065)
Typography | BDCM | Taylor's University
Task 3: Completed Thematic Interactive Website

LECTURE

All tutorials and exercises are recorded in the blog for Exercises.

INSTRUCTIONS


For the last task of this semester, after the wireframe and prototyping, we are to create our actual website based on previous wireframing and prototype along with its animations in Adobe Animate. 

Process
I began this project with doing the intro loading section to get a gist of how it would be created. I made the triangles in Adobe Animate and used the text tool there. For the animations, I chose to use the Adobe Animate settings and played with the actionscript. Initially, there isn't much difficulty and no unexplainable errors. It was after I finished the routes section that I encountered so many weird errors that no one seemed to have. I searched Google and forums to find if anyone has experienced my issue but nothing seems to be exactly the same. 


Fig 1.1 Intro page


First, it was my Adobe Animate not being able to preview in the browser. It's stuck at 30% and then goes into not responding mode. I tried uploading to Netlify to see my changes but even though it was published, no changes I made in the app was updated.

At the end, I figured it was that my .fla file was too large at 93mb. I tried tidying up my messy timeline to remove any unused keyframes (I read that it would take up space) which worked to reduce 20mb. I changed the picture I used since I finally realized it was way too big. However, I did not remove them from my library and it did nothing to my file size. Once I removed them from my library, the document went down to 3,5mb. I changed the image export settings to "image assets" instead of "textures" for it to work. 


Fig 1.2 Preview issue

Fig 1.3 Not responding issue



Another issue I had was blurry elements on the buttons, on the triangles. I consulted to Mr. Shamsul about this and concluded that it's a bug (because some ended up restoring the initial good quality but some stayed blurry). 


Fig 1.4 Blurry issue


After that issue was solved, I managed to finish the animations and all the pages until it couldn't preview again. My browser only showed this. This particular issue delayed my progress even more. 

Fig 1.5 Preview issue

Fig 1.6 Animating process


The issue was solved with the help of asking Adobe Community. There was some unexpected token in my JavaScript file and I was told that it was an extra right bracket. I tried deleting the right brackets of this particular code but nothing worked. I decided to copy this code from another destination page and pasted it to this page. 

Fig 1.7 Javascript error


After this issue was finally solved, I continued on to add the hover effects on the picture where it would show information about the route and destination. I did this by making each triangle on a different layer and then setting the info up on the hover frame.


Fig 1.8 Hover effect

I continued doing this until it's completed but I ran to yet another issue. Some elements were gone in the preview mode. For the Torean route page, I figured that the text layer was hidden in the isolation mode as it was in the group together with the picture. 

Fig 1.9 Torean route page issue


There are some final issues like this page for the Sembalun Village experience that had its elements gone missing too. However, after this was fixed, the previous page (Lake page) had its elements missing as well (Figure 0.0). I tried methods and found out it was probably because I had copy and pasted the triangle element from the lake page and didn't bother to change its root instance. 


Fig 1.10 Sembalun page issue


 
Fig 1.11 Lake page issue

There were a few interactions that I changed from task 2. 
a. Hover effect on pictures:
Initially the buttons needed to be clicked for the info to pop up but while testing out, I felt like only having to hover is more comfortable as there's no need to click somewhere to trigger the information and to close the information. 

b. Back and next buttons on each main page
In task 2, I set these buttons to direct users to the 'Getting Ready' page before the main page. However, when I tested my website, it felt confusing as there's a lot of these getting ready pages and also with different colors. Users would also have to wait a bit and click on the 'Learn the route' which (in my personal opinion) took some time and it felt repetitive. I wanted it to be more straightforward so I directed users immediately to the main page to not waste time. 

c. Home button destination
It was supposed to go to the main triangle entry button but I felt like it took too long and as a user, I'd rather immediately get to choose my level. 

Aside from these, there are some minor animation decisions that changed while I was doing the project. A lot of these were results from me testing and doing a walkthrough over my website so often. After all issues were checked and everything worked well, I uploaded it via Netlify. 


Final Submission


Final Website Link:

(It takes time for the website to load the first page)



Final Website Walkthrough Video:
Fig 2.1 Final Website Walkthrough Video



FEEDBACKS


REFLECTIONS:
Experience:
To be honest, this task felt nearly impossible to finish because Adobe Animate is somehow so difficult to fully understand and my progress was so slow. It is kind of understandable since this is my first time using Adobe Animate. It was not as easy when doing the exercises since we weren't guided step by step in this task. There were issues with the buttons, the animations, and others. However, the end result did somehow satisfy me. Honestly a lot of this project was me troubleshooting the application and trying to solve the issue. Making the pages and animations took much less time but troubleshooting the issues took up hours.

I'm more proud that I managed to finish off this project on time. I'm aware that there are some flaws and mistakes that could be improved but this module have proven to be very useful as foundation and basics for website design and developing. Learning about UI and UX and balancing them with interactivity and animations were quite difficult, truthfully. This task taught me a lot about problem solving since there were so many issues that kept on appearing. 

Observations:
I observe throughout this task that a great attention to detail is truly needed in operating Adobe Animate. Tiny mistakes and one forgotten step and the animation is ruined so it's crucial that one understands the way the app works and its features as well as maintain detailed work process for each page, each minor interaction and animation. 

Findings:
I find that this task, no matter how hard, taught me how to ensure my UI and my UX is still good for the audience and clear despite it being interactive. It took a lot of thinking to decide each button's destinations and what will make the website much more comfortable to be used. 



Comments

Post a Comment