Final Project: Completed Thematic Interactive Website
12/11/2024 - 1/11/2024 / Week 8 - Week 14
Tee Jia Ern / 0348512
Advanced Interactive Design / Bachelor of Design in Creative Media
Final Project: Completed Thematic Interactive Website
LECTURES
Week 10: GSAP Carousel EffectWe learned to download GSAP and create a simple button scrolling carousel effect with it.
Fig 1.1: GSAP Layout
Fig 1.2: GSAP Code
INSTRUCTIONS
1. Home
To create the carousel in the home screen I measured the stage size then set the image size as half the width. Since there is no cropping function in Adobe Animate, I use masking tool, making sure the masking layer is the specified width.
Fig 1.3: Home Mask Image for Carousel
I then put the images together including a duplicate first frame to animate the looping of the carousel. I also created a carousel for the drinks so the center drink is corresponds to the image displayed on the left.
Fig 1.4: Home Carousel
2. History
For the history page I animated the timeline design with the center arrow expanding along with the 4 sub lines branching out into the images one by one. The images fade in using alpha and classic tween. Then finally the text appear. If you hover on the images it turns gray, indicating it is a button.
Fig 2.1: History Timeline Page
Clicking on the timeline image brings us into a specific time period, with the content being animated with alpha one by one for a cascading effect. I followed Mr Shamsul advice and make the buttons on the timeline clickable along with the next button.
Fig 2.1: History Timeline Page After Clicking
I created a simple animation of the icon sliding down and the arrow slowly revealing at each step of the production page. I used alpha and classic tween to have a fade in effect. And move up the original positioning to make the icon slide down. For the arrows I use a circle tool to mask the arrow so it looks more natural. After animating the icons turn gray when hovering on it, implying it is a clickable button.
Fig 3.1: Production Page
After clicking on one of the 5 steps in production page, The screen darkens and the pop up appears sliding down into the center of the screen. This was done with alpha and changing the original positioning and animating it. I add corner radius to the pop up for a more friendly and welcoming look. All 5 steps have the same animation and design for a design principle known as consistency and have a cohesive look.
Fig 3.2: Production Page After Clicking
4. Culture
In the culture page, there is a Southeast Asian Map with location pins and a box with the national tea drink and the name of it. It is animated with a cascading effect through different timestamp of alpha keyframes. The boxes greys out when hovered indicating it is a clickable button.
Fig: 4.1: Culture Page
Fig: 4.2: Culture Page After Clicking
Fig: 4.3: Culture Page After Clicking Image Icon
The recipe page when clicked into it shows a infographic of the ingredients and steps to make it. The lines that branches out is animated to expand from the center of the drink to the outside, carrying the ingredients icons and measurements. The bottom line act as a menu bar and allows the user to select which types of drink they want to see. There is also a ingredients and instruction option with the active one selected with a white rectangle which allows them to interact with the content the user sees.
Fig: 5.1: Recipe Page
When clicking into the recipe page, he grid line separating the steps is animated as the images fade in with the number and steps. If the user clicks on the bottom bar of menu drinks it would bring them to the corresponding drink's instruction as opposed to the ingredients making the instruction and ingredient button act like different modes across all drinks.
Fig: 5.2: Recipe Page After Clicking
6. Navigation Bar
For the navigation bar, I used the wizard tool to create the JavaScript code for the website. I also added frame labels as taught by Mr Shamsul for more flexibility in managing the elements. I also added a hover state with less opacity to show that it is a functionable button. 
Fig: 6.1: Navigation Bar
7. Hitbox
For every button I created I added a hitbox to prevent cavities in text or icons, which is mentioned in Mr Shamsul's feedback in week 12.
Fig: 7.1: Hitbox
FINAL SUBMISSION
(might need to wait for 1 minute to load)
Web Files: https://drive.google.com/drive/folders/1w5RiRdPoT6DDwu8F0FgFEV7ZEGESjhKm?usp=drive_link
Week 12
Web Files: https://drive.google.com/drive/folders/1w5RiRdPoT6DDwu8F0FgFEV7ZEGESjhKm?usp=drive_link
FEEDBACK
Week 12Specific Feedback: Add a hitbox to each buttons so the click area does not have empty space inside the text or icon. Also the more interactive elements the better, no need to keep it minimal.
REFLECTION
Experience: Throughout this course I learned about Adobe Animate and the plugin GSAP. Before this I have never heard anyone using Adobe Animate to create a website so this is new to me. The logic of each element as a instant took a while for me to understand, but it also makes more steps to do to ensure consistency of each page. For example a textbox must be created separately for each content.
Observations: Aside from the instance logic, website created by Adobe Animate having stunning animations and allows for more creativity by combining animation and interactable elements like a normal website would.
Findings: I improved design wise from the first website I created which was not cohesive and kind of random. Although I still think this second website I made could use some rebranding to look more cleaner and visually appealing.
Comments
Post a Comment