Labels

Advanced Interactive Design / Final Project: Thematic Interactive Web Application

6.6.2023 - 4.7.2023 (Week 10 - Week 14)
Takuto Hozumi / 0354047 / Bachelor Of Design (Hons) In Creative Media
Advanced Interactive Design
Final Project: Thematic Interactive Web Application

LECTURE


INSTRUCTION

Project Outline

Continuing on from Task 2, design an interactive website; create a website that actually works in the browser with Animate CC. The requirement is that it must have a payment function. Create a purchase website focused on a single product.

Design Process

Fig.1: Design Comprehensive Layout

Import the design created in the previous project into Animate CC.

Fig.2: Copy from Illustrator CC

These Adobe software were compatible and could be copied and pasted directly. Animation was not considered at the design stage, but was placed as the parts were divided, considering where the screen would appear from.

Fig.3: Composition

The designed elements were converted to movie clips and buttons. Then, split by layer and animate.

Fig.4: Buttons

Since I did not know how to advance the screen with a single button, I created multiple buttons of the same shape and implemented them in a way that they could be interchanged according to the code.

Fig.5: Decoration

To make effective use of animation, a moving decoration was created. From my theme, I created a transparent background image of tea leaves to make it flow.

Fig.6: Sections

Each section was created in the form of a large chunk of movie clips, with smaller movie clips and buttons placed within the clusters. Repeating animations were created by timeline, while other actions were created by code using GSAP.

Fig.7: Action Code

My website uses a lot of code that is triggered by the click of a button. Over 90% of the screen switching was created by these codes.

The file was renamed to index.html and uploaded to Netlify for publication. The final website is shown below.

Fig.8: Final Project 1st Draft


I then went to the consultation with the lecturer on this website for further development. As feedback, the following were noted.
  • Changed the movement of the package to a gentle up-and-down movement.
  • Add some color to the white background.
  • Other suggestions for animated expression.

Fig.9: Background Color

Fig.10: New Background Design

Therefore, I made the following improvements.
  • Design and add a pattern in the background.
  • Add a delivery information page and a payment conformation page.
Fig.11: New Page Design

Fig.12: Additional Code

The final version with changes is below.

Fig.13: Re-designed Page 1

Fig.14: Re-designed Page 2


The following video of actual operation was recorded.

Video.1: Final Outcome Video (11/7/2023)

Then, based on the feedback, I decided to create a counter system that automatically inputs the number of items and the total amount.

Fig.15: Button Design

First, we created a simple, visual design. We created plus and minus buttons and set instance names. But the program did not work at this stage, and after getting further feedback, I found the following;

  1. If the code does not work, the chrome validation tool should be used to determine the cause of the error.
  2. In this case, the error is that the TEXT is not found.
  3. The location where the TEXT is located is hierarchical in the movie clip, so you need to specify it.
  4. exportRoot. works on the top page. So, I should add the movie clips which contains the TEXT like this. "exportRoot.mc_payment2.mc_payin.itemAmount.text"

Fig.16: Implement GSAP using URL

It is less mistake prone to introduce GSAP by URL rather than downloading the file and placing it in a local folder.

Fig.17: Specify TEXT location

Fig.18: Limit setting

To prevent the number of pieces and the amount of money from going negative, the minus button is set to work when the number of pieces is "1" or more.

Fig.19: Final Code

All counter settings have been completed. My website is now complete as below.


Final Outcome

Fig.20: Thematic Interactive Web Application Final Outcome (18/7/2023)


Video.2: Final Outcome Presentation (18/7/2023)

REFLECTIONS

Experiences
In this assignment, we learned how to design a website using Animate CC. At first glance, the interface resembled that of Premier Pro, and I thought it would be intuitive to work with, but it was not. A new concept of "symbols," which did not exist for illustrators, was introduced. These symbols are used to attach movie clips, buttons, and other attributes to an image. However, when I actually previewed it in my browser, I had a lot of trouble with buttons not working and unexpected behavior. This assignment allowed us to see the possibility of a more flexible design that clearly cannot be reproduced with HTML or CSS.

Observation
Animate CC will take some time to master, but it will allow us to design your website more freely. Until now, I had no idea how websites with lots of movement were made. Even when I looked at the code, I found complex javascript that were impossible to decipher. However, it was very beneficial to learn that there is a way to use this kind of software to create interactive websites without having to write a program from scratch. In this project, there were some features that I actually wanted to do but gave up because they were not technically possible. I would like to practice more and more and strive to create better designs in the future.

Findings
When I tried entering our own researched code in the action script, it often did not work. Unfortunately, I could not recognize what was wrong, but my hypothesis is that the type or version of the code was wrong, or that it was not formatted for the Action Script. For example, the implementation of a back button. I have done this by simply undoing the position of the movie clip, but I expect there will be some code to "go back to the previous page". In other words, I think a skilled engineer could make a better suggestion. In the process of creating the product quantity counter, I also learned the importance of specifying the specific target of the code. When I didn't know how to solve the problem, I spent a lot of time fixing one. Without knowing the cause of the problem, it would have been a waste of time to try various codes in the dark. But after consulting with the lecturer, I learned how to identify from the browser why the problem is occurring from the personally given tutorial video, and also received specific instruction to this problem.
Labels:

Comments

Post a Comment

Popular Posts