Advanced Interactive Design - Final Task: Completed Thematic Interactive Website

13/11/2024 - 30/12/2024 ( Week 9 - Week 14 )
Lew Guo Ying / 0365721 / Bachelor of Design in Creative Media
Advanced Interactive Design
Final Task: Completed Thematic Interactive Website

---

Index

1. Instructions

1.1 Home Page
1.2 Cards Page
1.2.1 Major Arcana
1.2.2 Minor Arcana
1.3 Card Spread Page
1.4 Daily Draw Page
1.5 Actions
1.6 Final Project Submission

2. Reflection

---

Instructions

MIB for Advanced Interactive Design

This final task requires integrating the knowledge from previous tasks to create a webpage with animations and include it in the blog.

Requirements:

1. Upload the website to a web server.
2. Record a video walkthrough.
3. Publish an online post in your e-portfolio as part of your reflective studies.
4. Ensure the blog post includes an embedded link or a direct link to the website and the video.

Fig1.1 Prototype

Based on the previous design, I roughly divided the sections into five parts: the loading page, home page, cards page, card spread page, and daily draw page. Next, I will follow the prototype to implement my design into Adobe Animate.

Fig1.2 Adobe Animated Settings

Open Adobe Animate and set the frame size to 1920x1080 to fit the computer screen size. Make sure to select HTML5 Canvas as the platform. Additionally, to ensure smoother animations, I set the frame rate to 30 FPS.

Fig1.3 Background

Since my design is for a webpage, the background and navigation bar are essential elements. The background is designed with a gradient where the opacity is deeper at the top and lighter at the bottom, so the background doesn’t overpower the content. Next, I positioned the navigation bar and added three cards, with a user prompt below to guide them to the next step.

Fig1.4 Fonts

For the typography, the navigation bar has a dark color scheme, so I chose white text for better contrast. The font used is Great Vibes, and I added a white shadow effect for additional clarity and style.

Fig1.5 Navigation Button

Finally, I converted the text into buttons and implemented a hover effect where the buttons enlarge slightly when hovered over.

In addition to the navigation buttons enlarging on hover, I also added an effect to the cards. When a card is hovered over, a sword appears around it, accompanied by the sound of a sword.

Home Page

Fig1.6 HomePage Timeline

Fig1.7 Transition Animation

After clicking on a card, the page transitions from the loading page to the home page. I also added a transition effect to make the transition smoother and more visually appealing.

Fig1.8 Card Light, Animation,Sound Button

1. To guide users, I added a moving glow effect below the clickable buttons (in this case, the card) to help users understand the next step.

2. I also implemented a card-dealing animation and movement effect for the cards, making the interaction more dynamic and engaging.

3. Additionally, each section has background music, so I included a sound toggle button that allows users to turn the sound on or off based on their preference.

Fig1.9 Home Page

Fig1.10 Instructions guide

Fig1.11 Guide

To prevent users from getting confused about the next step, I added a guide that appears after a certain amount of time. For example:

• A prompt like "Click the card to go back" will appear if the user stays inactive for too long.
• After viewing the basic introduction, a message will guide the user to press the Cards button to proceed to the next page.

Cards Page

Fig1.12 Card Page Timeline

Fig1.13 Perspective View

To achieve this effect, I traced several guide lines to ensure proper alignment and neatness in the design. I also implemented movement animations and made the cards gradually appear for a smoother transition. Additionally, I added a glowing effect to the buttons as a guide, helping users easily identify the next step to take.

Fig1.14 Major and Minor Arcana

Major Arcana

Fig1.15 Major Arcana Page

Fig1.16 Card Flip Animation

For the Major Arcana section, I combined animation with buttons, exploring new methods to achieve the desired effect. The final result is as shown in the video:

• Initially, the cards display their backside.
• When hovered over, the cards perform a flip animation, revealing their front side, accompanied by a sound effect of a card flipping.
• I also added text that appears during the hover state, providing context.
• Clicking on a card takes the user to a page with a detailed explanation of the card.

Minor Arcana

Fig1.17 Minor Arcana

For the Minor Arcana section, the design is relatively simple. I experimented with transparent buttons to allow users to replay the animation without interfering with the button's functionality.

While working on this, I initially encountered an issue where the animation got stuck. After some research, I discovered that the problem was caused by accidentally using a stop animation command, which halted the entire process. Once I fixed this, everything worked smoothly.

Card Spread Page

Fig1.18 Card Spread Page Timeline

Fig1.19 Card Spread Page

On the Card Spread Page, I showcased three different card spreads, each accompanied by a brief introduction and animations to make the cards move dynamically. To ensure users know how to proceed, I also implemented a guide that appears after a certain amount of time to provide clear instructions and help guide their actions.

Daily Draw Page

Fig1.20 Daily Draw Page Timeline

On the Daily Draw page, I added an animation where the cards continuously move. When the Draw button is clicked, the card movement accelerates, and the selected card appears. I also included a card flip sound effect and flip animation for a more engaging experience.

Of course, the flipped card can also be clicked to navigate to a detailed explanation page. To ensure users are aware that the card is clickable, I added a guide to provide clear instructions.

Fig1.21 Daily Draw Page

Fig1.22 Animation card move

I adjusted the animation speed, making the cards move at a slower pace initially and then accelerate upon clicking the button. This creates a sense of increasing intensity. Additionally, I added an animation for the selected card to highlight and showcase the drawn card, making the experience more engaging and visually appealing.

Action

Fig1.23 Action

There are many actions in this section, as I used buttons and movie clips extensively. To avoid being constrained by the timeline, I embedded many buttons within movie clips for better flexibility.

For the functionality, I used numerous stop actions in the code to control the flow of the animation precisely.

Regarding music, I decided not to rely on the timeline and instead used code to control the playback, ensuring better flexibility and user interaction.

Finally, for the fonts, I noticed that on devices without the specific font installed, it would default to a different font. To prevent this, I embedded the font directly using code, ensuring the intended typography is displayed consistently across all devices.

Final Project Submission:

Netlify Link: https://gy41tarotcardinteractivewebsite.netlify.app/

Please be patient after clicking; it may take a moment.

Video: https://youtu.be/nhaiIdCn48o?si=HVvqy1FwMUJ2SifL

---

Reflection

I think Adobe Animate is a really fun and creative module where you can bring various effects to life. It provides a lot of flexibility for animating elements, and it feels rewarding to see your ideas come together on the screen. However, I realized that without sufficient skills, it requires a significant amount of time for research, experimentation, and learning. There were many moments where I hit roadblocks and had to troubleshoot through trial and error, but each time I overcame a challenge, it gave me a sense of accomplishment. Through this process, I was able to achieve the results I wanted, even if it wasn’t always easy.

I tried experimenting with a lot of ideas, pushing the boundaries of what I could do with Animate. However, I found that certain things were simply not achievable due to the limitations of Adobe Animate. For example, complex visual effects or seamless transitions that I envisioned weren’t fully possible in Animate’s current framework. This meant I had to adjust my expectations, scale down some of my initial ideas, or think of alternative approaches to achieve similar results. While this process was frustrating at times, it also encouraged me to be resourceful and creative in finding solutions.

Despite these challenges, I am quite satisfied with the final outcome of my project. There are areas that I feel could have been improved, especially in terms of visual quality and execution. For instance, I had hoped to use After Effects for certain animations and effects, as it offers a more advanced toolset for motion design. However, After Effects is not designed for creating interactive web content, so I had to stick with Animate for this project. I think I managed to do a decent job given these limitations, and the results exceeded my expectations in some areas.

One thing I would have liked is more time to polish and refine my work further. A longer timeframe would have allowed me to improve certain aspects of the design and interactivity, as well as experiment with additional features. Nonetheless, I’ve learned a lot from this project—not only technical skills in Animate but also problem-solving, creative thinking, and time management.

Looking ahead, I hope I’ll have opportunities to revisit these ideas or use what I’ve learned to create even better projects. This experience has motivated me to continue exploring and pushing my boundaries in interactive design. While there is still room for growth, I am proud of what I accomplished and excited to apply these lessons to future work.