Advanced Interactive Design / Final Project
6.11.24 - 08.01.24 / Week 7 - Week 15
Name: ALYSSA AISYAH BINTI 'ARIEF NASRAN (0364017)
Name: ALYSSA AISYAH BINTI 'ARIEF NASRAN (0364017)
BDCM
Advanced Interactive Design (DST60804) INSTRUCTIONS
FINAL PROJECT
Completed Thematic Interactive Website
For the final project of advanced interactive design, we must complete our thematic interactive website into a complete working and functional product experience.
Process
Firstly, I created a button out of the pallas cat for the start page. Since the entire start page is separated into different drawings, I could isolate the pallas cat on its own and create a button out of it. I moved the first initial position to be more hidden behind the rock, then in the over and down states, I moved the position back up to where it peeks out to reveal itself. Then I simply arranged the layers together to create the full picture for the start page and added the title content.
Fig 0.1 Enter Button
Fig 0.2 Enter Page
For the animation of the title, i used a classic tween to create the expanding oval which expands to the entire page on click of the pallas cat button.
Fig 0.3 Title Animation 1
Fig 0.4 Title Animation 2
I also made a mask animation for the text to disappear down on the same click too.
Fig 0.5 Title Text Animation
Fig 0.6 Title Text Masking
Fig 0.7 Enter Button Script
Then, I created the overview page and created the paw button and its different states. When you hover over it and click, it turns from tan to brown. The paw button is used to cycle through the overview information text on the page. I have also reused the instance for some other pages but added unique code/instances to them in the actions frame for the frames they are in so there are no bugs.
Fig 0.7 Overview
Fig 0.8 Creation of Paw Button
To animate the overview text, I converted the text into movieclips and I used a mask but made the animation toggling using the different positioning of the text where I have it set on the stage and a js tween.
Fig 0.9 Overview Text Masking Animation
Fig 1.0 Overview Text Script
Then, I made the homepage, for the homepage i created 4 different buttons to go to their respective page and defined their states to be different when hovering/clicking.
Fig 1.1 Homepage Button State 1
Fig 1.2 Homepage Button State 2
I also have it so that when you click on the left paw button on the homepage, you can navigate back to overview.
Fig 1.3 Left Paw Button Homepage Script
Then, to make the expanding animation when clicking on each button, I duplicated the shape of the button and created movie clips for each section, placed it behind the button, and made the animation using a shape tween in their own timelines to expand to a bigger box. To make the animation less linear looking, I used the back ease in effect for the animation.
Fig 1.4 Duplicate Box
Fig 1.5 Shape Expand Animation of Box
Then, I created the behaviour page and made the animation of the pallas cat using a mask and classic tween sliding from left to right so it looks like its peeking out of the behaviour page text.
Fig 1.6 Behaviour Page + Masking Animation
Fig 1.7 X Close Button Creation
Fig 1.8 X Close Button Script
Next I created the hunting page, which is the first page of what the predation button goes to. The interactivity of this page's pallas cat is handled using a button to create the "ambush" whenever you hover over the pallas cat.
Fig 1.9 Hunting Page
Fig 2.0 Hunting Animation Button
Going to the next section of the predation page which is about the pallas cat diet is handled through an event listener for the paw button at the bottom right.
Fig 2.1 Hunting Page Paw Button Script
Moving on, I created the diet page. To cycle through the different animals, I used the same logic I had for the overview text using a mask, moviclips, and js tween, and positioning, except this time i did it to the text + and animal images.
Similarly too to the hunting page, on the bottom right, you can navigate back to the hunting page from the diet page with the paw button at the bottom right.
Fig 2.2 Diet Page
Fig 2.3 Diet Page Animal Masking Animation Script
Fig 2.4 Diet Page Paw Button Script
Fig 2.5 Anatomy Page
Fig 2.6 Anatomy Script
Next, I created the the habitat page. The interactivity is very straightforward, as each box here is a button, so i simply changed the hover states to the view of what that habitat looks like.
Fig 2.7 Habitat Page
Fig 2.8 Habitat Button Grasslands
Fig 2.9 Habitat Button Steppes
Fig 3.0 Habitat Button Rocky Mountains
Then, I made it so that the right paw button on the homepage leads to the conservation page, which is the last page of the website.
Fig 3.1 Right Paw Button Homepage Script
Lastly, I made the conservation page, where when clicking on each logo, brings you to the respective websites of those organizations which protects pallas cats. Then as a final element, I added in the button to restart the website to navigate back to the starting page of the website.
Conservation Page
Back to Start Button
Conservation Page Script
Final Website
REFLECTIONS
This is probably my favourite module this semester, as I got to work on something that very much personally interests me which is pallas cats (my favourite animal). Mr shamsul was also very flexible and understanding as a lecturer but also as a person as well. I was very sick towards the end of the semester to the point of losing my voice and being bed-ridden, and thus was worried about finishing my final project and recording the presentation, but he understood my situation and gave me as much time as he could which allowed me to complete my work on time and heal more from my sickness too. He was also really helpful whenever I needed help in class and would personally assist me and others. I'm very proud of the final outcome of my website, as it came out exactly how I wanted it to in the animations, interactions, and ease of use. Everything works as it should, so I'm satisfied.
Comments
Post a Comment