Advanced Interactive Design: Task 2 (Website)

on

 23.04.2026 - 21.10.2026 / Week 1- Week 5

Angelique Svetlana Pekasa / 0377365

Advanced Interactive Design / Bachelors Of Creative Media / Taylor's University

Task 1: Exercise 1 

Table of contents

Lectures



Instructions

                

Task 2  

To start off the task, I first made my doodle of the characters in Procreate. Shown below is the first doodle made.

Fig 1.1, doodle, week 9


After week 9's feedback, I was told to make the doodle more neat. As right now it's too sketchy. Shown below is the final doodle made and was approved on the next week's class.


Fig 1.2, doodle revised, week 10

After that I go on to put the characters into the frames in Photoshop and export them one by one. I also exported all the assets I'm about to use to make it easier for me to import it into Adobe Animate. Shown below are the screen grab of the processes. 

Fig 1.3, process work, week 10

Fig 1.4, process work, week 10

After that I divided my websites into several there are 5 main pages. The characters page then branch onto 5 different pages, as there are 5 characters, each characters have a different page to show information on each characters. 
  • Index.html (home page)
  • Characters.html
    • portley.html
    • winnie.html
    • eggs.html
    • snatcher.html
    • fish.html
  • About (contains the movie's synopsis and a button which leads to the movie's Youtube trailer)
  • Storyline (contains 3 arcs of the story)
  • Behind the Scenes (contains behind the scenes pictures of the movie)


THE NAVIGATION BARS
Then I asked Chatgpt to find me an animation from gsap.com which would suit what I made in the prototype. Then I input it in adobe animate. 
Fig 1.5, nav bar process work, week 11


the GSAP makes the hover box expand when the mouse goes over the nav button. 
gsap.to(root.mcHoverAbout, { scaleX: 1, duration: 0.2);
Then it closes again using this code: 
gsap.to(root.mcHoverAbout, { scaleX: 0, duration: 0.15);
This code is then repeated for the other buttons in the navigation bar, but the scalex is changed at the first as the width of the buttons differ with the words in it. After that I link all the navigation buttons to the respective pages. "_parent" is used to make it open the link in the same web page.

Fig 1.6, nav bar process work, week 11

The codes above are then repeated for all the pages. 


THE HOME PAGE
To start off this task I first made the homepage. and the navigation bars which would stay the same in all of the pages. Shown below is the layout of it in animate.

Fig 1.7, home page process work, week 11

The home page contain 5 different animations, the find out more button which will lead to the about page, the phrase "Find out more", 2 arrows pointing to the button above and the movie title "THE BOXTROLLS". Shown below are the screenshots of the animations. 

Fig 1.8, home page process work, week 12

Fig 1.9, home page process work, week 12

For this I used bounce Ease-out effect and I create key frames for the arrows to have movement so it seems like it's pointing at the button. The Bounce ease-out effect is later on repeated on other pages in order to create consistency. Shown below is the finished home page.

Fig 1.10, home page process work, week 12


THE ABOUT PAGE
Shown below is the layout of the about page. Inside it, it have an about text, frame, and movie posters. Shown below is the screengrab of it. 

Fig 1.11, About page process work, week 12

Fig 1.12, About page process work, week 12

Inside the about text, there is a watch trailer button which will lead to the Youtube trailer of the movie. I added hover effect on it, shown below is the screengrab of it.

Fig 1.13, About page process work, week 12

Here is the code used for it so it leads to the youtube page:

linkButtonWhenReady("btnWatchTrailer",
"https://www.youtube.com/watch?v=Q2dFVnp5K0o&t=1s", "_blank");

"_blank" is used instead of "_parent" so the link actually opens to a new page instead of the existing one. Shown below is the final layout of the About page.

Fig 1.14, About page process work, week 12


THE BEHIND THE SCENES PAGE
The Behind The Scenes pages consist of the behind the scenes pictures and ideations when making the boxtrolls movie. So there will be 2 arrow buttons which when clicked go to the next page that shows more pictures. 
Fig 1.16, BTS page process work, week 12

To do this, I added this code: 


Fig 1.16, BTS page process work, week 12

This code means that:
  • If user is already on that page, do nothing.
  • If going to page 1, play from frame 0. (where the pictures enter)
  • If going to page 2, play from frame 16. (where the new set of pictures enter)
That code then connects to this code where the left arrow shows picture 1-6 in frame 1-15 while the right arrow shows picture 7-12 in frame 15-25.

root.btnPrev.addEventListener('click', function() { showGalleryPage(0); });root.btnNext.addEventListener('click', function() { showGalleryPage(1); });

For the button itself, I used AI to make it for me and it's hover effects so that it remains consistent with the other frames I have. Shown below is the image generated by ChatGPT and how I input it into animate.

Fig 1.17, BTS page process work, week 12


THE CHARACTERS PAGE
The characters page contain 5 frames of different characters which also acts as a button where when it is pressed it will lead to another page which shows the characters information. Shown below is the screengrab of the process. 

Fig 1.18, characters page process work, week 12


The final layout of the pages are shown below, the same layout is repeated for each characters (shown on the right image).

Fig 1.19, characters page process work, week 12

In the Meet the characters main page, The most important part and the one that stands out is the animations of the character's frame which moves up and down, this was done by inputing a GSAP animation. Shown below is the code for it.

gsap.to(character,{
y:base Y + motion.offsetY,
duration: motion.duration,
repeat: -1,
yoyo: true });

Means that:

  • Changes the vertical position
  • Repeat: -1 means that it repeat forever
  • yoyo: true means it move up, then move back down
Then to make each characters move on a different timing the offset is changed for each one of them shown below:
Fig 1.20, characters page process work, week 12

THE STORY PAGE
The story page contains 3 different frames representing 3 different arcs it have. Each frame acts a button where when clicked the description of each act will appear. 

Fig 1.21, story page process work, week 12

The code for this page is a bit complicated, as I will need to hide the movieclip that doesn't appear when the button is pressed. 
Fig 1.22, story page process work, week 12

How this code works:

  1. Hide all act sections.
  2. Show only the selected act.
  3. Replay that act’s animation from the start.

So when the user clicks Act 2, Act 1 and Act 3 are hidden, and Act 2 appears. Then this codes the button to the act so that when Act 1 button is clicked the Act 1 contents will appear.

Fig 1.23, story page process work, week 12


The important code is showAct(). It hides all three acts, then shows the act that was clicked. The wire() function connects each Act button to the correct Act section. Act 1 is shown by default. showAct(act1) is used to make the Act1 appears first when the page first loads. Shown below is the final layout of the story page.


Fig 1.24, story page process work, week 12

THE PRELOADER
For the preloader, I used AI to generate me an image which would help me align the themes of the website itself, then I went into photoshop to re-edit it and separate some parts and export it one by one.

Fig 1.25, pre loader process work, week 13

After that I import it to Adobe Animate to make a simple animation of the rotation of the gear. 

Fig 1.25, pre loader process work, week 13

* For this project, AI is used in generating some Images used (ex: deleting elements from original picture to be used as the home screen background, or creating coherent assets like the right and left arrows along with its' hover effect). AI is also used in double checking for the codes used, as the software bugs a lot in my laptop causing me to be unsure of if the code was wrong or its a bug from the app itself. 

Feedback

Week 9: The doodle made is too rough, it needs to be more neat. Right now it have too many unnecessary lines present.

Week 10: Make a bounce effect in the find out more button on the home page, The adobe animate's preview isn't working so try to change it into the 2023 version. 

Week 11:  Make the buttons in the style of the frame, you can use AI to do so. The adobe animate 2023 version is also not working, the file was sent to Mr. Shamsul and now somehow all his files couldn't be previewed also. So theres a huge bugg on the application itseld.

Week 12: The pre-loader didn't work as intended, somehow the screen decrease when the pre-loader appears, and at first when there I didn't input my own pre-loader there's only 1 or 2 page which uses pre-loader, but because I input my own pre-loader now every page got pre-loader. Sir. Shamsul looked into it and he is also not sure of why the problem existed, as there was nothing wrong with the file or how I exported it. So he says, to leave it be, as he understood that the mistake wasn't from my end.

Week 13: The website is completed already, all good to go.

Week 14: Submission

Reflection

Experience
Honestly, the application have a lot of problems. For me I couldn't preview it directly if I make any changes in the file, it doesn't appear at all in the preview. I would need to exit and restart the whole application in order to view it. So, instead on concentrating of the layout and the code, I took a long time going in and out of the app just to see the changes I made, and if there's any wrong changes I would need to close the app again and re run it. I have tried to download the older version of the application but nothing really changes. There's also a bug in the preloader as the size of the website somehow shrinks when it gets deployed. Basicly the entire application is bugged and a lot of my time was spent either trying to fix it or trying my best to work around it.

Observation
While working on the website, I observed how a good design does not always automatically become a good website. I had to think about how each section would work when users actually clicked, and moved through the pages. The spacing, text hierarchy, navigation, animations, and visual elements all needed to work together so that the website still felt clear and easy to use.

I also observed that small design details can affect the overall consistency of the website. For example, the doodles may only be supporting elements, but when they looked too rough, they made the entire website feels off and less polished. This made me understand why every element needs to follow the same visual direction, even if it does not seem like the most important part of the design itself.

Findings
From this task, I found  how design really tested my patience. When something did not work, I could not only focus on how it looked because I also had to understand what was causing the problem in the code. I learned that making a website is a continuous process of trying, checking, fixing, and improving until both the design and interaction work properly, and the whole experience was made worst as the application have a lot of bugs.

I also found that feedback is especially useful during the development stage because it helped me notice issues that I had become too used to seeing. By improving the doodles, layouts, and interactions, the final website became more organised. Overall, this task helped me feel more confident in turning a static design into a functional and interactive website.

Comments

Post a Comment