Advanced Interactive Design

Mohamad Irfan (0326620)
28/8/2019 - 27/11/2019 (Week 1 - Week 14)
Advanced Interactive Design

---

LECTURES

Lecture 1
Week 1 | 9/08/19

A short brief about the module and the exercises and final outcome. The final outcome will be an interactive storytelling website, using Adobe Animate, which used to be known as Flash.

Lecture 2
Week 2 | 05/09/19

At the start of the class Mr. Shamsul asked the class to do research on what micro-interaction is.
Effective Micro-interactoin follow these steps:

• Trigger - user initiated or system initiated
• Rules - determines what happens once a micro-interaction is triggered
• Feedback - lets people know what happens
• Loop and Models - determine the meta-rules of micro-interaction

We then found out about our first exercise which was to create a website with micro-interaction and animations. I decided to make a space themed website.

Lecture 3

Week 3 | 12/09/19 

In this class Mr Lun gave an introduction to JavaScript. He taught us the basic JavaScript arithmetic operators which we may or may not use in our projects.

• + (add)
• - (minus)
• * (multiply)
• / (divide)
• % (remainder)
• < less than 
• > more than
• <= less than and equal
• >= more than and equal
• != not equal

Some other useful JavaScript we learnt:

• = is used to define variables
• == is used for comparison
• var test = 3
  test = test + 3
  test += 3; (optimized code)

Lecture 4

Week 4 | 19/09/19

Class cancelled due to haze.

Lecture 5
Week 5 | 26/09/19

We did a recap on Adobe Animate for the basic scripting, along with consultation for our folklore project. The class then continued with Mr Lun giving us a class exercise on further Javascript and to think about mobile application we'd like to design for our second exercise. The mobile application must have 3 screens and have elements of micro interaction.

Lecture 6
Week 6 |  03/10/19

In this weeks lecture we showed our progress for exercise 2 and got feedback from Mr Shamsul. He told me what I could do to improve my mobile app such as adding swipe animations and showing real-time progress when the app is doing something.

---

CLASS EXERCISES

Week 1
Adobe Animate

For the first week using Adobe Animate, Mr Shamsul showed and explained the basics of the tools so that we could get used to them. For our first task we had to create vases using Adobe Animate.

Before and after learning how to use the tools

Vase.PNG

For the next section of the class Mr Lun explained the concept of the timeline, frames, and creating symbols in Adobe Animate. We did some small exercises to further our understanding.

Week 2
Micro-interaction

Mr Shamsul showed us 'tweening', which is the 'in-between' from one keyframe to another, which is also the same as an animation. We looked at motion tween, shape tween, and classic tween. We also looked at examples of websites with micro-interaction as we had to create own design for exercise 1.

Rotating ball exercise

Rotating Ball GIF

Week 3
Adobe Animate Exercise

Did this week we had 2 class exercises from Mr Lun. We learnt about using JavaScript to stop the continuous loop using this.stop(); and this.gotoAndPlay("label");

this.gotoAndPlay function

In animate, this stopped at 4.

Week 4
No class

Week 5
Buttons

This week we learnt how to use button symbols  with the "click" function. We used the buttons to change to the next "scene".

JavaScript for Btn Click

Btn GIF

Week 6
Mouse Hover 

In the previous weeks we learnt about the Button symbol Up, Over, Down, and Hit. While it is a way to have the hover affect when the mouse is over an object, it is limited in terms of aesthetic and effect. You can't do fade-in and fade-out effects with the normal button symbol. In this class we used JavaScript to create this effect. 

Timeline

Adding the tween to change colour when 'mouseover'

---

EXERCISES

Exercise 1

In this exercise we were tasked with making an interactive website with micro-interactions using Adobe Animate. There is no actual JavaScript involved and will just be a 'mock' website. We were free to choose any type of website and theme for our website. I looked at uimovement.com and pinterest for some ideas.

I went with a space-themed website. I also wanted to try Parallax scrolling as many interactive websites use it.

Animating in Adobe Animate

Final GIF

Exercise 2

For this week we learnt about labels and clickable buttons. Using what we know about the buttons and symbols, we had to create an app of our choice with 3 screens. I decided to make a Utility App, one that helps clear phone ram, save battery and clean storage. I wanted to animate the circular progress bars and real-time data/percentage updates.

Process

Scripting - linking pages and buttons on timeline

Final Outcome (Video)

---

PROPOSAL

For my final project proposal I chose the folklore of Badang. The proposal has the storyline, a moodboard of what I envision the scenes to look like, a flow chart of the story, storyboard, and finally the type of micro-interaction the interactive website story will have,

---

FINAL PROJECT

After finalizing my proposal I started working on the assets for my interactive story. I started working on 1 scene at a time, along with the UI elements in them.

UI Elements

Scene, Character, Environment Assets

More scene assets

After completing the assets I brought the layers over to illustrator. The method I used to organized the scene is one Mr Lun taught us, in where each scene is inside a symbol on the main timeline with a label.

Animating in Animate

Instead of having a button to progress the page, I used the mouse-scroll to progress. It seems more exciting and interactive but caused a lot of issues on the timeline.

Script for mouse-scroll to progress

 Another interaction feature I wanted to include for my interactive story is the slider. By dragging the slider to the right the user can see how the scene unfolds for themselves.

Slider

FINAL OUTCOME (VIDEO)