Advanced Interactive Design Task 3
23/9/2024-20/10/2024 Week1-Week 4
Jie Xuan/ 0356515
Application Design/ Bachelor of Creative Media/Taylor's University
Project 2: Interaction Design Planning and Individual Prototype
TABLE OF CONTENTS
1. Lecture
2. Instruction
3. Final Project:Completed Thematic Interactive Website
4. Feedbacks
5. Reflections
LECTURES
Week 11
INSTRUCTION
Module Information
Instructions:
Students will synthesize the knowledge gained in task 1, 2 and 3 for application in task 4. Students will create integrate visual asset and refine the prototype into a complete working and functional product experience.
- Upload the website to a web server
- Online posts in your E-portfolio as your reflective studies
- Make sure to embed or provide a link to the website and the video from the blog post.
A. Visual Design
My idea mainly base on Pinterest and google. First, I finalized all the pictures that I want to import into Adobe Animate and carefully reviewed each visual element to ensure they matched the theme of my project. After that, I imported the designs and transferred them into Figma first. In Task 2, I designed in Figma so I export the visual elements that I want to use into Adobe Animate.
B. Adobe Animate
Loading Page
At first I insert two circle into one layer and name it as background page and I make the circle motion blur. In loading page, I mask the Inside Out logo layer and make the frame classic tween so that the logo will slide into the frame. Other than that, I also open one more layer for the loading bar I insert six key frame and different key frame I put different colour on the circle and make it looks smooth.
Home Page
For homepage, clicking the Enter button leads to the Character Page. In the first frame of home page I apply ALPLA filter on the INSIDE OUT title and make it 0% and after 10 frame I put the title 100%. I make it classic tween. Moreover, I apply masking on the layer of "Here Are The Mind Behind The Magic".
For Enter button I apply hover effect on it.
Enter Button I also use coding to help me lead the user to the "Character Page"
Character Page
For this page I insert all the character picture and I insert 5 circle and convert it to button. In this section I mainly use GSAP to make the button function.
This coding is for the picture move to left right how many base on X.
For example: x: 640, ease: "power1.out"
Riley's Emotion Page
In this page I mask the riley emotion card layer and make classic tween so that the card will have slide down effect.
I also convert every card to button and make hover effect. This will make the website more interactive.
Teaser Page
For teaser page, I hover the play button and the info button. This is because I want to make the button more interactive.
General Setting
I created a separate layer to distinguish each section using labels, assigning different page name to each label for clarity. For all the GSAP coding I open a layer and name it action layer so this can make me more convenient to write all the coding and link everything together. For the navigation bar, I created a dedicated layer specifically for it. I used GSAP to seamlessly link each section together and added a hover effect. This ensures that whenever the page changes, the text color of the corresponding section updates accordingly.
Every action layer i add on this coding to make it stop before I click on other button. So it won't be very messy.
C. Submission & Screen Recording
Netlify Link: https://jiexuanaidfinaltask.netlify.app/
Screen Record Video:
Mr. Shamsul gave me feedback that my website is still a bit messy and need more fun elements but keep it easy so I try my best to keep everything consistent and make my website more fun elements. I also apply everything that I learn from tutorial class.
Experience:
Creating the Inside Out interactive animation website was both challenging and rewarding. At first, I struggled with Adobe Animate and GSAP, but over time, I became more comfortable with them. Designing animations, linking sections smoothly, and adding interactive elements took a lot of effort and patience. There were times when things didn’t work as planned, but solving those problems felt very satisfying. This project helped me learn new skills and grow more confident in animation design.
Observation:
I noticed that careful planning is very important before starting animation and coding. Organizing layers in Adobe Animate made it easier to manage different elements. GSAP was a powerful tool for creating smooth animations, but it took time to understand its commands. I also realized that small details, like hover effects and smooth transitions, made the website feel more polished and user-friendly.
Finding:
One important lesson I learned is that patience and persistence are key in animation projects. Both Adobe Animate and GSAP can be difficult to learn at first, but with practice, they become easier to use. I also discovered that animations are not just about looking good—they help guide users through the website. This project improved my technical skills and taught me the importance of thoughtful design and user interaction.
Comments
Post a Comment