Advanced Interactive Design / Task 2: Interactive Web Application Pre-Production & Prototype

16.5.2023 - 6.6.2023 (Week 7 - Week 10)

Takuto Hozumi / 0354047 / Bachelor Of Design (Hons) In Creative Media

Advanced Interactive Design

Task 2: Interactive Web Application Pre-Production & Prototype

---

LECTURE

W3-12 In-class Lecture (Adobe Animate)

In the in-class tutorials, from week 3-12, we learned how to create an interactive website using Adobe Animate CC.

Fig.1-1: Settings

Basically, use screen size Full HD in this class. As a reminder, always use HTML5 Canvas as the platform type. This method is similar to the flash videos that were popular in the past, Animate CC allows to add scripts and functionality to the animations. A frame rate of 30 is specified.

Fig.1-2: Create a Shape

Shapes can be drawn on the artboard, and animation is controlled by the timeline at the bottom of the screen.

Fig.1-3: Animate the Shape

A feature called "tween" can be used to create smooth animations. The animation is automatically created by creating a starting keyframe on the timeline and connecting the keyframes together. Tweens can also be used to add an "Ease" setting that controls the slow and fast movement of the animation. By using this setting, the movement becomes more natural.

Video.1-1: Animated Shape

Video.1-2: Ease

 

Fig.1-4: GSAP

https://greensock.com/get-started/#repeatsAndAlternatingRepeats

Additional plug-ins can be set up to add more detailed movement from the action script. GSAP has a variety of pre-prepared commands that can be invoked by storing the downloaded file in the same folder as index.html.

Fig.1-5: Activate GSAP

To use these, a link must be set up in the action script. Global > Include

Fig.1-6: Action

The created shape was converted to a movie clip and named the instance "mc_box". This corresponds to a class or id in HTML, and is required for commands by code.

Fig.1-7: Action Code

As shown in the figure above, the shape can be moved horizontally by specifying the x coordinate.

Fig.1-8: Click Action 

From a code snippet, you can associate an operation with an action. For example, you can create a command that moves when clicked.

Fig.1-9: Slider Sample

These codes can be used to create something like a slider area, which is common on most websites.

Fig.1-10: Publish Setting

Publishing in Animate CC is like exporting. In the settings, you can configure screen placement and other settings in the browser. In this lesson, we will basically set it to be centered.

Fig.1-11: Import an Image

Image files and designs created in Illustrator and other software can be loaded.

Video.1-3: GSAP with Button Features

---

INSTRUCTION

Project Outline

Students are required to create a (prototype) interactive application for an online store. For example, an online ticket booking system for cinema/football matches, a restaurant reservation system with an online menu, or a pizza ordering system.

Students are only required to develop the front-end interaction, UI design, scripting, and animation. Backend programming is not required as it is meant to be a prototype.

Interactive applications should be able to communicate the site's goal and objectives to the audience. Users should be able to navigate and use the applications without any difficulties.

Idea Exploration

I first attempted to create a reservation system for movie theaters. The following is a list of pages needed.

1. Top Page

Showing, Coming Soon

Title, Showing time, Genre, Language, Subtitle

Log in → My page　

My page QR display during reservation

2. Individual movie page

Film description

Reservation button

3. Select date and time

Select Seat

4. Seat selection

Conform

5. Tickets

Adult, Children, OKU, Senior

6. Option

Food, etc.

7. Payment Methods

Fig.2-1: Draft Design 1

Fig.2-2: Draft Design 2

Fig.2-3: Draft Design 3

Fig.2-4: Draft Design 4

Fig.2-5: Draft Design 5

Fig.2-6: Draft Design 6

Fig.2-7: Draft Design 7

Fig.2-8: Draft Design 8

These are the first ideas shown in the figures above.

And then I came up with a second idea for further improvement.

Fig.2-9: A Product for the Theme

Another idea is product-focused. After consideration, I decided on matcha green tea sweets, which has a well-defined theme color.

Fig.2-9: Mood Board

Then created a mood board. I proceeded with the project carefully, being conscious of following an even more legitimate process than when we designed the film's website.

Fig.2-10: Wireframing

As a website, I thought about the necessary information and wireframed it. The basic style is oriental, with large photos of products and information about the products.

Fig.2-11: Final Prototype (30/6/2023)

I collected product packages (existing ones), copyright-free images, etc., and used illustrator to create the visual design. Thereafter, the final project will actually be designed as a working website by Animate CC.

Continued to Final Project