Advanced Interactive Design - Task 3: Final Project
18/11/2025 - 11/11/2025 / Week 9 - Week 16
Aquela Zefanya Soares / 0374377
Advanced Interactive Design / Bachelor of Design (Honours) in Creative Media / Taylor's University
TABLE OF CONTENTS
LECTURES
5 pages practice
In this lecture, we were taught how to use an action layer and the wizard templates. To ensure that it works correctly, there must be a separate layer dedicated to actions. This layer needs to be placed on the exact frame where the action should occur. Finally, instance names or labels must be added to make them detectable by the wizard and to make it easier to track the frames.
GSAP practice
In this lecture, we learned how to use GSAP to make animations and page transitions easier to code. First, we downloaded the GSAP file. Then, in Adobe Animate, we went to the Actions layer and added the gsap.min.js file using the Include option in the global actions panel.
After that, we need to add a simple GSAP command in the action frame, such as gsap.to(this.mcScreen, { x: -1024 });. The x value controls the horizontal movement of the screen. The number depends on the width of the stage, so it needs to be adjusted based on the screen size of the project.
The next step was to create the pages and navigation buttons. After that, we added a new action panel and inserted the JavaScript code,
this.btn_orange.addEventListener("click", orangescreen.bind(this));
function orangescreen()
{
// Start your custom code
// This example code displays the words "Mouse clicked" in the Output panel.
gsap.to(this.mcScreen, { x: 2048});
// End your custom code
}
making sure to change the screen and button names according to the elements we created. Once everything was set up, the navigation was able to function properly.
INSTRUCTION
<iframe src="https://drive.google.com/file/d/1qg8pJCAsxm8aEWvJKnaWURJp0xOy-u2J/preview" width="640" height="480" allow="autoplay"></iframe>
PROGRESS
For the progress, I will divide it based on pages and then explain some elements that are used on every page.
Index
Loading screen
For the loading screen, I used a classic tween to animate the loading bar and then added a fade transition to the landing page.
Landing page
For the landing page, I mostly copied and pasted the layout directly from my prototype.
For the button, I added a line under the text to show that it is clickable, and used a lighter color for the hover state.
Homepage - start
I split the homepage into two sections: a Start section that gives general information about Max, and a Max section that introduces his appearance and the car he is known for in public.
For the Start button, I applied a hover effect that slightly zooms in and darkens the button.
Homepage - max
For the Max homepage, as mentioned earlier, I only briefly introduced his biodata, his appearance, and the car he currently uses.
I also used his picture as a navigation element to connect to the next page, which is the About page. The same hover effect as the Start button was applied.
For the home navigation button, I used his logo. To indicate the current page to users, I changed the button color to an aqua/turquoise tone by adjusting the tint.
Transition used across all pages except the homepage/index
The section name is quite self explanatory. I applied a fade transition to all pages except the homepage.
Initially, I forgot to add transitions after all the pages were completed. To fix this, I moved the finished version to frame 6. Then, I duplicated the layers that required a fade transition and placed them on frames 1 and 5. I set the alpha to 0 on frame 1, and added a classic tween between the frames. This completed the transition.
About
For the About page, I mostly copied and pasted the content from my prototype.
Career Timeline
For the career timeline, I mostly kept the content from the prototype, but changed the car transition from a parallax slide in Figma to a regular slide.
I labeled each card’s content to make it easier to tell them apart. To make the next slide transition work, I used the following JavaScript code:
Next frame:
_this.btnnext.on('click', function () {
_this.gotoAndStop(_this.currentFrame + 1);
});
Previous frame:
this.btnprev.on('click', function () {
_this.gotoAndStop(_this.currentFrame - 1);
});
For the button, I made the hover state slightly darker than the original color.
Achievements
Again, I did not make many changes to the Achievements page. The main change was moving the achievement list from beside the button to being revealed after clicking the image/button of Max holding the trophy, which then displays all of his accomplishments in his F1 career. For the hover effect, I used the same interaction as the Max button on the homepage.
For this section, I applied the same method as the career timeline. For the button interaction and JavaScript code, please refer to the explanation above.
Audio
For the audio, I wanted it to be muted by default. When the user clicks the unmute button, the audio plays and the icon changes from mute to sound on. I will explain this in two sections.
I used two audio files:
BGM: Synthwave Retro 80s Music | Royalty-free Music - Pixabay
Mouse click sound: https://freesound.org/people/Pixeliota/sounds/678248/
Icons
For the icons, I designed them in Figma first, then copied them as PNG files and pasted them into Adobe Animate. I made two icons: a muted and a sound on version.
Javascript
var _this = this;
var music = null;
var isMuted = true;
Sound on button
_this.btnSoundOff.addEventListener("click", function () {
Click sound
createjs.Sound.play("click");
Background music
if (!music) {
music = createjs.Sound.play("bgm", { loop: -1 });
}
music.paused = false;
isMuted = false;
_this.btnSoundOff.alpha = 0;
_this.btnSoundOn.alpha = 1;
});
Sound off button
_this.btnSoundOn.addEventListener("click", function () {
Play click sound
createjs.Sound.play("click");
if (music) {
music.paused = true;
}
isMuted = true;
_this.btnSoundOn.alpha = 0;
_this.btnSoundOff.alpha = 1;
});
New navigation JS
For the navigation, I initially used the template/wizard option, but everytime I navigated to another page, it opened a new tab. To avoid this, I tweaked the Javascript so that when switching pages, the content stays within the same tab.
The new version that I used:
Home:
_this.btnhome.on('click', function () {
window.location.href = 'index.html';
});
About:
_this.btnabt.on('click', function () {
window.location.href = 'about.html';
});
Career timeline:
_this.btncareer.on('click', function () {
window.location.href = 'careertimeline.html';
});
Achievements:
_this.btnachievements.on('click', function () {
window.location.href = 'achievements.html';
});
The old one (from wizard):
_this.btnhome.on('click', function (){
window.open('index.html', '_blank');
});
FINAL TASK
Netlify link: https://advinteractivefinal.netlify.app/
note: it takes a long time to load, and to play the audio you need to click the unmute button.
File project: https://drive.google.com/drive/folders/15DzfKhnVqAvY1W_ZJ9oEJ8x8iYjA8t48?usp=sharing
FEEDBACK
Week 10
This week, I showed my index/homepage progress to Mr. Shamsul, and he said that everything needs to be resized since it looks too big.
Week 11
Mr. Shamsul advised me to use separate files for each page to prevent issues in case the file gets corrupted.
Week 13
Mr. Shamsul helped fix my code since my navigation could not redirect to another page, and he suggested using frame labels instead of frame numbers to avoid the same issue.
REFLECTION
This module has taught me how to use a new app (Adobe Animate) and helped me improve my understanding of Javascript. I was able to learn the app by practicing during lectures and by exploring it on my own. I enjoyed the learning process in Adobe Animate because I think it's an interesting app that allows us to do many things. However, it requires a lot of exploration, as some of the shortcuts are different from other Adobe applications (as usual, lol).
Although I faced quite a few difficulties while using the app, I'm satisfied with how the final result turned out, even if it's simple. I also like how the app provides templates or wizards that can help when working with Javascript. However, to make the website fully functional, I still needed to do additional research and make changes, as I couldn't rely entirely on the templates. The audio feature in the app was also confusing at first, but I eventually managed to solve the issue.
Overall, I feel that Adobe Animate can complicate certain processes, but at the same time, it helped me gain a better understanding of Javascript. Because of that, the learning experience is really valuable to me.
Comments
Post a Comment