Advanced Interactive Design - Final Task

Final Task

For our final task, we were required to bring our Figma prototype to life by converting it into Adobe Animate, turning it into a published, interactive, functional, and responsive website. In my previous assignment, I created a prototype in Figma, but I faced some limitations, especially when it came to creating certain animations. Adobe Animate, however, gave me more freedom to design the animations I envisioned, allowing me to better express my ideas and bring the experience to life.

Setup

I started this project by creating a separate Adobe Animate file for each page of my website. Since my website has a total of 8 pages, I opened 8 individual files. This approach was recommended by my lecturer, as working with separate files reduces the risk of crashes and ensures better file stability. However, the downside of using separate files is that background music will stop when transitioning between pages, and it becomes slightly more challenging to create smooth transitions. Despite this, I decided to begin with individual files, as I can always combine them into one file later on.

I began by placing all the necessary elements for my website, importing illustrations that I had previously drawn in Procreate into Adobe Animate. After importing, I arranged the elements according to my intended layout. Then, I proceeded to experiment with simple animations as a starting point.

Animation

Most of the animations I used for my website include fade-in and fade-out effects, rotating animations, and typing text animations. The main reason for using these animations is to maintain consistency throughout the website. Additionally, these animations suit the overall theme of my website, which is surreal, aesthetic, and storytelling-driven. In the timeline, I adjusted the sequence of the animations to control the order in which each element appears.

Fade in animation

The fading animation is the easiest among all the animations I used. To create it, I started by converting my elements into Graphic symbols, then adjusted the Alpha property, which controls the opacity. By setting two keyframes, one at 0% and the other at 100% and applying a classic tween between them, I was able to achieve the fade-in effect. This technique was consistently used across all the pages of my website.

Fade In / Fade Out Transition

Fade in Sequence

Rotating Animation

For the rotating animation, I wanted it to continue looping even after all other page animations have ended. This effect was applied to two elements: the background ring, which continuously rotates, and the guidance ring, which acts as an indicator to prompt users to click on it. Since I wanted these elements to keep rotating regardless of the main timeline, I first converted them into Movie Clip symbols, allowing the animation to loop independently.

Rotating Ring in the Background

Inside the movie clip, I then created the rotating animation by converting the element into a Graphic symbol and applying a rotation tween. For the guidance ring, I also added fade-in and fade-out animations, along with a scaling effect (making it grow and shrink) to create a glowing effect and draw the user’s attention.

Rotate + Scale + Opacity

Typing Text Animation

This animation is used for the narrative text to guide the viewer through the story. To achieve the effect of typing one letter at a time, I used a very traditional method, creating it frame by frame using individual keyframes.

Typing Text Keyframe

Button

For the buttons, I created three types. The first is a general button that allows users to enter the story journey. The second type is used to interact with characters within the story. The third type is a full-screen button that users can click anywhere to proceed to the next scene.

Enter Button

Button to Interact with Characters

Click anywhere to continue

Background Music and Sound Effect

I used the background music code provided by my lecturer. I simply applied the code to a keyframe and assigned the background music, and it worked as expected. Since I wanted the background music to play continuously throughout the website, I needed to combine all my pages into a single file.

As for the sound effects, I sourced them from CapCut by searching for a “magical shining” sound. I then assigned the sound effect to play when a button is pressed.

Script for Background Music

Assign SFX for each button

Combining all the pages into one file

After finalizing all the animations for each page, I opened a new file to combine all the pages together. Then, I adjusted the timeline for each scene and used the Wizard tool to assign the buttons to navigate to the next scene.

Combining into one file

Menu

To allow users to navigate each page easily, I added a menu on the left that lets them click on the pages they want to replay or skip. In Figma, I proposed that the font style should change when a page is selected and also added interactivity where the menu would move up and down when clicked. When I tried to implement it myself, I was able to make the menu clickable and movable, but I couldn't change the font style. I consulted Mr. Shamsul, and he explained that this is a limitation of using Adobe Animate. After realizing this, I came up with an alternative menu design that is feasible to create in Adobe Animate while still maintaining the overall design consistency of my website.

Layers to create menu buttons

I used two layers to create my button. One layer is the text itself, which increases in opacity when the user reaches its corresponding page and decreases when it’s not active. The other layer is the button’s background, which changes on hover to indicate that it’s interactive. I also added a small arrow on the side to clearly show which page the user is currently on.

New Menu Design

When Hover

After some minor adjustments and corrections, such as refining the element animations, adding fade-in and fade-out transitions, thoroughly checking all the buttons and animations to ensure they work properly, and adding more visual details. I’m happy to say that the website I created closely matches what I originally envisioned in my Figma prototype. Although it's a pity that I couldn’t fully realize the menu bar I had proposed, I’m still satisfied with the final outcome. Below is a quick walkthrough of my working file.

Working File Walkthrough

Final Submission

• Peulla Magi Madoka Magica's Website: Link
• Google Drive: Link

Reflection

As a reflection, I feel that the process of turning my ideation into a functional, responsive, and interactive website has been a success and a very satisfying experience. This module taught me an alternative way to create interactive websites with minimal coding, and it also sparked my creativity in exploring how interactive a website can truly be.

By using Adobe Animate to build the website, I not only learned how to create a website but also gained valuable experience with the software, which will be useful for future animation work or web projects. Through this module, I also discovered a new approach to creating my personal portfolio, one that requires little coding but allows for unlimited creativity, especially in terms of animation.

Of course, I encountered several challenges throughout the project, but I’m grateful for Mr. Shamsul’s guidance, the support of my peers, and the availability of tutorial videos that helped me overcome them. This has been a major milestone in achieving my goal of creating the kind of interactive website I’ve always wanted, and I’m looking forward to learning even more in my future endeavors.