ADVANCED INTERACTIVE DESIGN: FINAL PROJECT:COMPLETED THEMATIC INTERACTIVE WEBSITE
|| 22/04/25-13/05/25
|| Sun Jia Yi / 0370449
|| Advanced interactive Design / Bachelor of Design (Hons) in Creative Media
|| Final Project： CompletedThematic Interactive Website
TABLE OF CONTENTS
1. Lectures
2. Instructions
3. Feedback
4. Reflection
LECTURES
Week 9:
We have a one-on-one meeting with Mr. Shamsul this week to discuss our task 2 prototypes. Before we moved on to the final product, he provided us with a number of comments.
Week 10:
We learned about GSAP this week, which is something new. In order to avoid animating the scroll and button to play and stop one by one, GSAP is utilized when we wish to control the button by adding instance name.
The first activity involves using a button to create a sliding animation, as seen below. First, we draw a rectangle, which we then duplicate using alt-shift. Next, choose everything and turn it into a movie clip. I called it MC_Screen in the instance name. This and the button should be identical in the GSAP later on.
GSAP Preview
Week 11:
There are no exercises for this week because the class was abruptly canceled.
Week 12:
Final Project Consultation, Weeks 12–14.
INSTRUCTIONS
This is the Module Information Booklet for this Module:
Completed Thematic Interactive Website
On this task, we were required to synthesise 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.
Requirements :
- Upload the website to a web server.
- Record a video walkthrough.
- 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.
Web Page Progress in Adobe Animate
Using Adobe Animate to Implement Web Page Progress
I imported assets into the Library in Animate and gave them the name "index." I constructed the pages sequentially, starting with the loading page, starting with the background, elements, and content.
1. The Home page
This page has a background, images from vintage films, text that loads, and a flashing effect. Despite its apparent simplicity, it took a long time to implement; several efforts at tween animations failed. I got the idea when looking over a Gemini tutorial: I extended the loading bar and adjusted its pace to create the flash effect.
Home Page progress, Week 10
Go to the next page
Actions to frame 86,Week 10
Actions to stop at frame 85, Week 10
Menu
Menu in the home page, Week 10
Flash Effect
Flash Effect in the Home Page, Week 10
ENTER Button
Enter Button in the home page, Week 10
2. About page
This page contains background elements, vintage film footage, loading text with flashing effects, and a right-click button.
Right Click Button
Actions for right click button in the about page, week 10
3. Character page
This page shows the Characters page of the website. It has a dark brown background with a calm and classic feeling. Two character images are shown side by side: Mr. Chow on the left and Mrs. Chan on the right, both with quiet and serious expressions. Their names are written under the images, and a menu bar is shown at the top of the page. The overall mood feels slow, emotional, and nostalgic.For the interactive part is when click the right arrow button is go to the next page.
Audio Icon
Action for Audio icon, Week 11
Right Click Button
'Action for Right click button in the about page, Week 11
4. Scenes page
This page shows a website page for the movie In the Mood for Love, featuring a dark brown background and a navigation menu at the top. The center of the page displays the classic scenes which shows the relationship with two characters. There are gray circular buttons on both sides of the picture for scrolling, a speaker icon in the bottom corner for sound.
actions for slides button, Week 11
actions for right click button, Week 11
5. Qipao Gallery page
This page shows a website page titled "QIPAO GALLERY" with a dark background and a menu at the top. In the center, there is a large photo of a woman wearing a floral dress, covered by a semi-transparent red box containing text. The text explains that the red colors symbolize hidden feelings and the movie's theme of unspoken love. You can also see a white arrow on the right side for navigation and a small sound icon in the bottom corner.
actions for right click button in the qipao page, Week 11
6. Quotes page
This page shows a website page titled "Quotes" with a dark brown background and a navigation menu at the top. in this page will show the famous quotes. The page also includes gray circles on the sides for clicking through different quotes and a small sound icon in the bottom right corner.
actions for right click button and slides button in the quotes page, Week 11
7. Promotion page
This page shows a movie promotion page for In the Mood for Love, featuring a dark red and brown color scheme with a movie poster on the left and information on the right. The poster shows a man smoking a cigarette and a woman in a green dress, while the text explains that the film is a drama from the year 2000 directed by Wong Kar-wai. At the bottom of the page, there is a large, dark red button that says "BUY TICKET" for viewers to click. For the interactive part is when u click the red line and then show the text about the movie and then click the buy ticket go to the next page.
actions for red line button and "but ticket" button in the promotion page, Week 11
8. Credits page
This image shows the Credits page of a website for the movie In the Mood for Love, featuring a dark brown background and simple white navigation links at the top. The page lists the names of the people who made the film in yellow and white text. There is also a small speaker icon in the bottom right corner, keeping the design clean and focused on the names of the creators.
actions for "buy ticket"button and go to the next page in the credit page, Week 11
FINAL OUTCOMES FINAL PROJECT : COMPLETED THEMATIC INTERACTIVE WEBSITE
Netlify Link: HERE
Please wait if it's show a white screen.
Website Preview, Week 12
Goggle Drive Link: HERE
Drive Folder View, Week 12
Web showcase Video : HERE
Final Walkthrough Video , Week 12
FEEDBACK
Week 12
- the code for actions is clean and can working , please go to the next section.
- The Website looks nice and everything is working and start to publish to the netlify and text it.
REFLECTIONS
It has been a worthwhile and difficult experience to work on this project. From the first week, I had no idea how to use animation, but as I worked on this final piece, I discovered how much I had learned from routine tasks. Many thanks to Mr. Shamsul's courses for helping me get this far.
This project took me nearly ten or eleven days to complete because, although I initially thought it was difficult, as time went on, my progress accelerated. Although Adobe Animate is a useful tool, it can sometimes be challenging. The workplace could be disorganized and difficult to identify the source of the mistake if you failed to appropriately label all the components and modify the layer. These things taught me how to arrange my layer and folder in addition to how to make a decent design and connect the page. In summary, this session provided me with an excellent opportunity to develop an interactive website with a theme.
Comments
Post a Comment