Advanced Interactive Design: Task 1 (Proposal)

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


week 8:
First import all the images into adobe animate and save the whole thing as ONE movie clip symbol.





Go to the publish settings, make sure that all is checked as shown below.


Then go to gsap website and download the file, unzip it and then move the file to the GSAP folder that is already made, after that press F9 Global script > Include > Add a File. Search the file name below in the file the gsap file before.


After that go back to the GSAP website and copy the code.

Go back to adobe animate paste it and delete the "box" change it into this.(name of the movie clip image that will move). delete the rotation as it's not needed.


Then go back to the images, drag it to the further end (align to the right) and see the X coordinate of the last page, copy the X-coordinate, replace the initial one. 



Week 9:
Actions  >  Add using wizards > Go to Web page  >  change the link into the targeted link 


Then change the  "_blank" to "_parent" > then select the button, repeat the process in all the files.






Instructions

                

Task 1 

After getting approval on my topic on week 5 (refer to week 5 feedback), I started to sketch out my ideations in procreate, I also rewatched the movie to refresh my mind and get inspirations for my website. I made a file and put sketch in it, the research done, and also the information I want to put on each page. Shown below is the document.


To make the homescreen's background I also used ChatGPT to help me generate the background of the homescreen as I need it to be clean. Shown below is the original image.



I uploaded the image, and ask ChatGPT to remove all the unessasary wordings and characters present to give me the plain background. I also used it to generate me arrows and the "Find Out More" in the style of "The Boxtrolls" title. I then go to photoshop to separate everything and put it in order, to make it easier to be exported later on for task 2. 



Next, I went into Figma in order to make the prototype, shown below is the screen grab of the process. The characters shown will be different (right now it is AI for reference, the final one will be made by myself on Illustrator).

Shown below is the final presentation proposal.

Feedback

Week 9: The assets right now for the characters are too rough, make it more refine. You don't need a loading page if it's not needed. 

Week 7: In the proposal define the color palette, write down which color is used for the background, which is used for the buttons, and what the hover effect is going to be. It is ok to use AI but make sure that the AI is 40% of the work not 100%, for the character assets make it yourself, don't use AI. The characters could be in the style of the book (rough sketches like in the book), but it's ok to use AI for the background in the first page. In addition to that you need to only make at least 3 working pages in the prototype, make a bit of animation. Put also references of the characters in the proposal slides. In the Behind The Scenes page you could add short description in the bottom of the pictures, and also add arrows on the bottom of the frame to go to the next page of pictures (or englarge the pictures when it is clicked). In addition to that right now the font is too large for the body text, (make it 16 instead), also add white spaces, too dense right now. The hover effect for the navigation bar from white to beige could work.

Week 6: Online Class

Week 5: I proposed on the idea of making the website about The Boxtrolls, Sir Shamsul agreed on it. Another alternative I proposed is about the studios behind Boxtrolls, which is LAIKA studios, it is an animation movie studio that does stop motion, it is also approved however the movies they make have different themes, different color palletes so the website might be inconsistent, which is why sticking with The boxtrolls is better. 

Comments

Post a Comment