Final Project – Thematic Interactive Website
Week 9 – Week 14
Ye Xinyan / 0355096 Advances Interactive Design
Final Project – Thematic Interactive Website
Instructions
<iframe
src="https://drive.google.com/file/d/1XrrYHW6-sL93XXHP1ioKl2dpPg7uV_vs/preview"
width="640" height="480" allow="autoplay"></iframe>
LECTURES
-Week 9
This week we are trying to use the GSAP website to embed code into Adobe
Animate. We need to find a wallpaper and add graphics as buttons on it and
make dynamic effects for the buttons and wallpaper.
-Week 10
Because our lecturer needs to go to other countries to give lectures, we
have basically been conducting online courses in the past few weeks.
We took a few more Adobe Animate tutorials and did some exercises under the
guidance of the instructor.This week I tried coding using GSAP.
-Week 11
This week is still an online course, and our instructor teaches us how to
create buttons in complex animations.
Final Project: Thematic Interactive Website
For this final project we need to create an interactive animated website
using Adobe Animate. I will be continuing with Task 2's Disney website to
make it into a website.
1. Website Design
I've stuck with the plan from Mission 2, and so far so good.
Fig. 1.1
Website Design- Adobe Illustrator
2. Website Animation
I first set up the animation for my landing page to the home page. I want the landing page to be a computer lock screen page, and then enter the home page to display various entertainment facilities, and these entertainment facilities are all clickable.At the same time, I tried adding click sound effects to make the website more interesting.
Fig. 2.1
Landing Page- Adobe Animate
From the landing page, click the arrow to go to the home page.
On the homepage, there are seven entertainment facilities on the map that
can be clicked, which are the seven entertainment areas of Disney. At the
same time, three Disney mascots will appear in the lower left corner.
Putting the mouse on them will show "About", "Join Us" and "Entertainment
Facilities" respectively.Click the Mickey head in the upper left corner to
return to the landing page at any time, the music button can start/pause
music at any time, and the back button can return to the home page at any
time.
Fig. 2.2
Home Page- Adobe Animate
For my about page, I will introduce Shanghai Disneyland so that people who
are not familiar with Disney can have a general understanding.
Fig. 2.3
About Page- Adobe Animate
As for the Join Us page, if you click yes, the pop page will disappear and
the words "Welcome to join us" will appear. Click no to return to the home
page.
Fig. 2.4
Join Us Page- Adobe Animate
For the Entertainment Facilities button, clicking it will introduce the
entertainment areas in order starting from the entrance. Clicking the arrows
can control the previous and next facilities.
Fig. 2.5
Entertainment Facilities Page- Adobe Animate
At the same time, I added bubble effects to each page transition.
Fig. 2.6
Transition Effects- Adobe Animate
After the instructor's feedback, I found that I forgot to add the loading
page. So I added the loading page. After thinking about it, I set the
loading page to several jumping Mickey heads jumping in sequence.
Fig. 2.7
Loading Page- Adobe Animate
FINAL OUTCOME
Fig. 3.1
Final Website
Click here to test output:
Final Disney Website
Note:
The website may take some time to load, so please be patient. You are
welcome to view the walkthrough video in Fig. 3.2 for additional details
on the appearance of the website.
Fig. 3.2
Website Walkthrough Video
Demo Video(Youtube) Link:
Netlify Link:
https://disneyinteractionweb.netlify.app/Google Drive Link:
Feedback
- Adjust the webpage size so that it fills the entire page.
- Add loading page animation.
- It would be better to add a flashing animation to the light bulb on each page of notes
Reflections
-Experience
I was certain that the Advanced Interaction Design course would be harder
after taking Interaction Design the previous semester. Nonetheless, I
thought that creating the button effects, bounce animations, and other
things was more enjoyable in this course. The amount of coding was less than
I had originally assumed.
-Observations
While working on this project, I realized that in Adobe Animate, any small
setting error can seriously affect the final effect. A code error can cause
a button or something else to not display properly. This is a very delicate
lesson. I also spent a lot of time on the final animation. I did it very
carefully.
-Findings
Making animations is considerably simpler when you have a general idea of
how the website will operate and how users will interact with it. There are
a lot of things to think about when I first start designing with Adobe
Illustrator.
Comments
Post a Comment