Advanced Interactive Design / Project 1

Zhao Hanbo (0343769)
Advanced Interactive Design / Bachelors in Design ( Hons ) in Creative Media
Project 1

INSTRUCTIONS

Lecture note

Week 1 (2021/08/26)

For our 1st week of class, we were briefed on the MIB. Also, we were also explained a bit about each project for this module, what kind of task or projects that we will be doing. For this module, there will be no exercises, as the module will start with project 1 right away.

Week 2 (2021/09/02)

In today's class Mr. Razif shows us how to use Adobe animate to start our project 1, he shows us how to make the ball move from one side to another side, or follow the path. And show us how to use the button function to make our work file become interactive.

Week 3 (2021/09/09)

In today's class Mr. Razif still teaches us how to use Adobe animate, this time show uses more functions to help us to build our app navigation. And from here we need to code, which is my nightmare.

Week 4 (2021/09/16)

No class today.

Week 5 (2021/09/23)

Mr. Razif shows us how to publish settings, then starts to check our work progress and helps us to figure out problems we face.

Project 1

Interactive Web Application

For our first project is creating an interactive mobile application using Adobe Animate. Our lecture told us to come out with a few ideas then decided to decide on 1 topic that we would want to do for the mobile application and start doing the flowchart, for the mobile application.

But I just have one wish. I want to design a live/show ticket sale application.

So I start work on the User Flow Board.

I hope my application inserts more intact. At the same time, I also created the logo and app name. I did this user flow board also try to maintain the aesthetic feeling to make sure this app can be identified.

User Flow Board:

figure1.1: User Flow Board

App UI wireframe (in Adobe XD):

figure2.1: App UI wireframe

App UI wireframe (export):

figure2.2: Welcome Screen

figure2.3: Log in Screen

figure2.4: Home Screen

figure2.5: Live show detail Screen

figure2.6: Booking Screen

figure2.7: Loading Screen

figure2.8: Payment successful Screen

Today's class was a continuation of the tutorial in Adobe Animate. Our lecture showed us how to do the scripting for increasing and decreasing amounts, as well as how to create apps. Tell us how to make it interactive. Then I try to use it to build my app.

figure3.1: working file Screenshot

First, I have done my intact user interface in Adobe XD. This is how their look like. I put a flow board on the home page, and also clickable.

I try to make it looks more like a real app, I set everything interactive, when you hover it you will see the difference.

figure3.2: Preview for the app

Then you can see my final output.

The preview from Adobe Xd(show user interface how to work):

But after I have done this in Xd, I start working on Adobe animate, but for real Adobe animate is a harder software for me I am not good at coding at all.

So when I start working on it, I found I cant using the same workflow as I imagine, because lots of issues happened during I working on it.

Progression: