Advanced Interactive Design | Task 3: Final Project
18 Nov 2025
-
30 Dec
2025
(Week 9-14/15)
Justin
Cleon
(0375523)
Advanced
Interactive
Design | Task 3: Final
Project
Table
of
Contects
1. Instructions
Adobe Animate Exercise: 5-Page Website Timeline
Objective:
Demonstrate mastery of Adobe Animate's fundamental interactive
controls by creating a fully functional, five-page website
structure using a single main timeline.
Deliverables:
A single Adobe Animate file (.fla or .html) that navigates
between five distinct content sections.
Technical Requirements
Your project must meet all of the following criteria:
1. Timeline Structure
• 5 Distinct Pages:
The project timeline must be clearly divided into five unique
content pages (e.g., Home, About, Services, etc.).
• Frame Labels: Each of the five page start frames must be
clearly identified using a Frame Label (e.g., home, contact).
• Frame Actions: Every page's starting frame must contain a
JavaScript command to stop the timeline (this.stop();).
2. Navigation & Interactivity
• Persistent Menu: A Navigation Menu containing five buttons
must be visible and accessible across all five pages.
• Button Functionality: Each button must be a symbol with a
unique Instance Name and must execute the gotoAndStop()
command to navigate to the correct page label.
3. Animation Requirements
• Classic Tween
Transition: All navigation actions (moving from one page label
to the next) must use a 5-frame Classic Tween to create a
smooth, animated transition between the page content, rather
than
an instant jump.
In summary: Build 5 labeled, static frames that pause, and
use persistent buttons to jump between them with a 5-frame
fade/slide animation.
2. Lectures
Lecture : GSAP Practice
We learned about GSAP which is a new thing. GSAP is used when we want to control the button by adding instance name so we don't have to animate the scroll and button to play and stop one by one.
The first exercise is to make a sliding animation with buttons as shown below. We first make a rectangle and use alt shift to duplicate. After that select all and convert to movie clip. In the instance name, I named it as MC_Screen. This should be the same in the GSAP later, along with the button as well.
Figure 2.1 GSAP Practice
Here is the actions on GSAP practice:
.png)
Figure 2.2 Actions (GSAP Practice)
3. Task 3: Final Project
Check the website here: https://cleonergy.netlify.app/
Google drive:
I made a new folder for the final project on Adobe Animate. The folder is
an important thing when we want to make a website. If it does not have the
same folder, the website will not work as well as usual or have something
missing. So we need to save all HTML, javascript, and images in one (1)
folder.
.png)
Figure 3.1 Cleonergy (Folder)
Navigation
For the navigation bar, I want to make it on the top of the page. The
Cleonergy logo is on the left side, the main navigation links (Types,
Benefits, Why Renewables, About) are on the center-right side.
Additionally, when users click the Cleonergy logo, it will take them back to
the homepage (index.html) so no need to press a separate "Home" link. The
navigation applied on every page (Types, Benefits, Why Renewables,
About).
Figure 3.2 Navigation
Home Page
For the home page, I designed the layout to move automatically. This
interaction makes the page feel more dynamic so that it will attract the
user's attention first to move or go to another section.
Figure 3.3 Home Page
Here is the actions on home page:
.png)
Figure 3.4 Actions (Home Page)
Types Page
I wanted to create a design that would educate users about different
types of renewable energy through a visually appealing and interactive
design. With a smooth wind turbine rotation animation added to
visually describe how wind energy operates in real life. Additionally,
the
Figure 3.5 Types Page
Here is the actions on types page:
.png)
Figure 3.6 Actions (Types Page)
Benefits Page
I developed this page to highlight the key advantages of renewable
energy in a clear, engaging and interactive way. Additionally, I use
the "+" icon which acts as a trigger rather than directly listing
the benefits.
Figure 3.7 Benefits Page
Here is the actions on benefits page:
.png)
Figure 3.8 Actions (Benefits Page)
Why Renewables Page
I created this page to explain the importance and urgency of
renewable energy in a simple and engaging way. With a smooth
wind turbine rotation animation added to the page.
Figure 3.9 Why Renewables Page
Here is the actions on why renewables page:
.png)
Figure 3.10 Actions (Why Renewables Page)
About Page
I built this page to explain the basic definition of renewable energy
in a simple and easy to understand way for users with little or no
prior knowledge on this topic (renewable energy).
Figure 3.11 About Page
Here is the actions on about page:
.png)
Figure 3.12 Actions (About Page)
4. Feedback
The overall website design is consitent! Make sure everything works.
5. Reflection
Working on this project is a new experience starting from using another Adobe application, namely Adobe Animate. At first I thought it would be difficult and require a lot of coding like Adobe Dreamweaver but I was wrong, Adobe Animate is actually easier because it requires less coding. Adobe Animate can be tricky if you don't name all the elements correctly and fit them to the screen.
Although I faced some problems in the coding part because we can't copy-paste to multiple files even though the coding is the same so I have to do it one (1) by one (1). Overall, I would like to say a big thank you to Mr. Shamsul who has provided a lot of new knowledge and tutorials as well as input in the last weeks.
Comments
Post a Comment