Advanced Interactive Design - Project 1

'

29/03/21 - 03/05/21 (Week 1 - Week 6)

Tabita Febrilia Dinata (0340357)

Advanced Interactive Design

Project 1 - Adobe Animate

---

LECTURES

LECTURE 1: MODULE BRIEF

29/03/21 (Week 1)

We begin the first week with Advanced Interactive design module briefing by Mr. Lun, we were explained about what are we going to do this semester for this module, we will have 3 projects in this 14 weeks. The software that we're going to use is Adobe animate & SparkAR.

After the module brief, our lecturer Mr. Lun do a tutorial and introduction to Adobe animate. We learn about basic things we need to know to do this 1st project. And also we were brief about the first project.

For this project we were required to do a Prototype for mobile application using Adobe Animate.

LECTURE 2: ADOBE ANIMATE TUTORIAL 1

05/04/21 (Week 2)

This week, we learn about how to make a button, checkbox and tween class. Our lecturer explain also how to scripting in Adobe Animate to make the buttons work.

LECTURE 3: ADOBE ANIMATE TUTORIAL 2

12/04/21 (Week 3)

We learn more about Adobe Animate on how to make a carousel that can add or minus an item.

LECTURE 4: ADOBE ANIMATE TUTORIAL 3

19/04/21 (Week 4)

And finally all the tutorial had covered up, we learn about how to rollover and rollout event for mouse, changing background and make it responsive.

---

INSTRUCTION

---

PROJECT 1 - Progress

Mobile App Prototype

29/03/21 - 03/05/21 (Week 1 - Week 6)

We were brief about the first project.

For this project we were required to do a Prototype for mobile application using Adobe Animate.

Basic Requirement

- 5 Screen / pages (Example: Welcome, login, category, Item detail, etc)

- Interface transitions / animations

- Scripting for buttons and other interactive element

- Resolution 720x1280 Portrait (HTML Canvas)

At first i have 3 ideas:

1. Custom cake Ordering App

2. Electronic online shop

3. Gift App Idea (From previous project App design 1)

but at the end i decided to do my first idea, and try to do the flow and wireframe directly on Illustrator.

Fig 1.1: Wireframe on Illustrator

Then I try first with something random to getting know first how this Adobe Animate works, because this is the first time I ever use Animate and I was blind and overwhelm. 

Fig 1.2: Getting know Adobe Animate

Then i start collecting my assets and icons.

Fig 1.3: Icons & Graphic

Fig 1.4: Icons & Graphic

Fig 1.5: Icons & Graphic

Then I design the prototype visual.

Fig 1.6: Design Reference

Fig 1.7: Prototype Design

Fig 1.8: Prototype Design

Then develop this prototype on Adobe Animate, even through few times I'm struggling with errors that

I don't know how to fix it, but I keep trying. And also my work is so messy because I'm still not used to use Adobe Animate.

Fig 1.9: Error

Fig 1.10: Adobe Animate

Fig 1.11: Adobe Animate

Final Result: