Labels

Advanced Interactive Design / Final Project

20/06/2024 - 31/07/2024 / Week 9 - Week 15
Iman binti Kamarudin / 0364014
Advanced Interactive Design / Bachelors of Design (Hons) in Creative Media
INSTRUCTIONS

I begun working on my website and referenced the animations and design I created in the first two tasks. I solely worked in one file and created layer groups for each page and section in the website.

Fig 1.1 - File Layout

I didn't know how to make the loading page actually functional so I settled with making a 'fake' one and animated it as if it was really loading in all the assets.

Fig 1.2 - Loading WIP Screenshot


The landing page was initially supposed to have you be able to make the polaroids go from black and white to colour but for whatever reason unbeknownst to me it wouldn't work, even when I manually did a frame by frame animation. Therefore, my only option was to switch it out for the polaroids to scale up when your mouse hovers over it. It was really my last resort because the deadline was approaching fast and I had already spent HOURS trying to figure it out.

Fig 2.1 - Polaroid 1 Animation Screenshot

My initial idea was to put a black overlay on top of all the polaroids and code the black rectangle to take you to the main menu, however that method couldn't register that your mouse was hovering over the polaroids so the animations wouldn't play. Instead, I made it so that every polaroid would take you to the same frame so it wouldn't matter which one you pressed.

Fig 2.2 - Polaroid Action Code

Fig 2.3 - Polaroid 1 Hover & Out Code


For the main menu I imported my own graphics that I made in Task 2. The buttons to get to the other pages were made in Adobe Animate. The papers in the background and foreground were animated slightly to move a bit and bring more motion and interest to the page.

Fig 3.1 - Foreground Papers Animation

When you over over the polaroid buttons, they scale up and the title paper drops down. The text fades in as well.

Fig 3.2 - Purchase Button Animation

In task 2, the main menu was just going to have a plain background but I realised that the menu looked a bit empty so I changed the background to a picture from the game and it made it look more cozy and fuller.

Fig 3.3 - Plain Background Menu

Fig 3.4 - Game Image Menu Background


The character page required me to think really hard on how to layout everything and animate each page. Since there were multiple tabs in the page I wasn't sure how to go about switching between them. 

I also wanted the book to sort of scale up and down when you switched between the tabs to make it look more interesting. In order to do this I just copied the book over to each page and broke it down and renamed it as a specific symbol for each character. 

Fig 4.1 - Character Page Layout

Then, I manually made the same exact animations for each page so that each time you switch tabs the book would always scale down and settle in place. I did this for the papers behind the book as well.
When the user clicks on the tabs, it will take them to a specific frame. When the mouse is hovering over the tabs, it changes colours.

Fig 4.2 - Character Page Tab Action Code

It took me a while to figure out that you can't use gotoAndPlay labels for hover and out animations AND to take you to another page. I had to use both labels and specific frame numbers, and I separated them by using the code snippets method to take you to a specific frame while the code for the animations were in the script of each button.


For the purchase page, I wanted it to look like a (diner) table and like you're looking down on the papers and have a bunch of stuff crumpled together. I added a wood texture to the background to convey this idea.

I animated each element to land into place when you opened the page. For the receipt button, I made the text 'blink' and added a hover and out animation. 

Fig 5.1 - Purchase Page Receipt Animation


The transitions into and out of each page are the same, with the polaroid falling, covering the screen and then switching to the new page. For the 'about', 'character' and 'purchase' page outros, there's only half of the transition animated in. When the polaroid fully covers the screen, it takes you to same position but from the intro transition of the main menu.

Fig 6.1 - Transition Out of About Page

Fig 6.2 - Code at The End of The First Half of The Transition

Fig 6.3 - Frame 197, Transition Into Main Menu


FINAL WEBSITE

Fig 7.1 - Loading Screen Screenshot

Fig 7.2 - Landing Page Screenshot

Fig 7.3 - Main Menu Screenshot

Fig 7.4 - About Page Screenshot

Fig 7.5 - Character Page Screenshot

Fig 7.6 - Purchase Page Screenshot


Notice*
It takes a little bit for the website to load so it's going to look like a blank screen for a couple seconds.


PRESENTATION


Higher resolution video: https://youtu.be/Ems6--quwzI

FEEDBACK

Week 13
Specific Feedback - Make your canvas stretch to fit and center it so that it fills the empty space.

REFLECTION

My experience with this task was...difficult. A majority of my issues with this assignment stemmed from the fact that we had to use Adobe Animate. One time my website completely refused to load when I previewed it and I had to copy over everything into a new file to solve it. To this day I still don't know what the problem was. Then, I was facing a huge learning curve. Even though I participated in all the class exercises, I was still struggling to comprehend how to do some things like audio (still have no clue why sometimes it plays and why it doesn't).

Furthermore, there were hardly any tutorials on Google that could help me. Even Adobe community was useless and there were quite a few times where I wanted to rip my hair out. Nonetheless, I did it!! While I would have loved adding more micro animations and sound effects, I am so insanely happy that I managed to make it look like my test animations and wireframe. I'm glad I made it through all the challenges that were thrown my way (and trust me there were A Lot).

To conclude, I'm very proud with what I managed to do even though some sound effects/micro animations could have elevated it even more.
Labels:

Comments

Post a Comment

Popular Posts