ADVANCED INTERACTIVE DESIGN - EXERCISES

ADVANCED INTERACTIVE DESIGN - EXERCISES

16.04.20 - 11.06.20 (Week 1 - Week 9)
Maydeline (0335392)
Advanced Interactive Design
Exercises

---

LECTURES

Lecture 1 : Introduction to MIB and Adobe Animate

Week 1

The first week, Mr Lun briefed to us the MIB and also explained the upcoming projects that we have to do for this module. He provided us some examples of UI Animation which will be beneficial to give us an idea of what to do for project 1 using Adobe Animate software. Here's the link : https://uimovement.com . We were also informed that we will use Spark AR for our next projects. 

After the introduction, he gave us tutorial on how to use Adobe Animate. 


Lecture 2 : UI Scripting

Week 2

This week, we were lectured about UI Scripting and masking technique that we could use for Project 1. 

1. Button Scripts :

this.(button name)click.addEventListener("click", (button name)_click);

function (button name)_click(e){
exportRoot.gotoAndPlay("page name");
}
2. To stop animation : 

this.stop();

3.  Button scripting for pop up window message

this.(button name)click.addEventListener("click", (button name)_click);

function (button name)_click(e){
alert("HELLO");

}

Lecture 3: Mouse Over | Add/Minus

Week 3

This week, we have another Adobe Animate tutorial that can be used in our project 1.

Lecture 4: -

Week 4

There was no lecture this week as it is a public holiday.

Lecture 5: 

Week 5

We were briefed for project 1 submission.

What we need to submit are:

1. Adobe Animate project file / record a video of the project

2. HTML file

3. Javascript file

4. Images 

Lecture 6: AR Face Tracking | Plane

Week 6

This week, we were briefed on our project 2 and final project requirements. We learned to use the face tracking, adding background and plane tracking. Also, native ui picker.

Lecture 7: Native UI Picker

Week 7

This week, we learned how to create the native ui picker and use it in our project 2.

Lecture 8: Image Sequence & Patch Editor

Week 8

We learned how to create image sequence for multiple assets and create animation using patch editor.

Lecture 9: Image Sequence & Patch Editor

Week 9

We learned how to add UI picker using patch editor only without any script. (Updated in Spark AR).

---

INSTRUCTIONS

 

---

EXERCISES

Exercise 1 : Shape Tween, Classic Tween, Button Animation

Week 1 

From the tutorial given, we had to do this exercise to help us be familiar with animating in Adobe Animate. We were tasked to use shape tween, classic tween and button animation.

1. Shape Tween : to animate position, rotation, scale, color and shape changing.

Fig 1.1 Shape Tween 

2. Classic Tween : can be use to animate position, rotation, scale

Fig 1.2 Classic Tween

3. Button : Up, Over, Down, Hit

Fig 1.3 Button

4. Bouncing Ball : using Motion Tweek

Fig 1.4 Process in Adobe Animate

Fig 1.5 Bouncing ball

Exercise 2 : UI Button Scripting & Masking & Progress Bar

UI Button Scripting

Week 2

This week we had to create 3 pages and we had to use the button scripting for the buttons to be clickable and can go to the next page. 

Fig 1.6 Button Scripts

Fig 1.7 Process in Adobe Animate

Fig 1.8 Result of Exercise 2

Masking an image using rectangle shape

Fig 1.9 Process in Adobe Animate

Fig 1.10 Result of Masking

Creating Loading Bar

Fig 1.11 Process in Adobe Animate

Fig 1.12 Result of loading bar

Exercise 3 : Going to next page from page 1 to page 2 & Mouse Over

30/4/20 (Week 3)

We were taught on how to make the button clickable and transition to next page. This is the script:

Fig 1.13 Script for clicking the button to next page

We were also taught about mouse over. Here is the script:

this.stop();
stage.enableMouseOver(10);
this.mybtn.mouseChildren = false;

this.mybtn.addEventListener("click", mybtn_click);
this.mybtn.addEventListener("rollover", mybtn_rollover);
this.mybtn.addEventListener("rollout", mybtn_rollout);

function mybtn_click(){
}

function mybtn_rollover(){
//console.log("TEST");
exportRoot.mybtn.gotoAndPlay("frmOver");
}

function mybtn_rollout(){
exportRoot.mybtn.gotoAndPlay("frmOut");

}

Exercise 4 : SPARK AR

21/5/20 (Week 6)

Face Tracker :

1. Add Face Tracker
2. Add 3D Object (Face Mesh)
3. Add material 
4. When material is double click, upload any texture and linked to the material
5. Add Face Paint  - Difuse - Texture
6. Shader type: face paint
7. To use a SPARK AR face guide in Adobe Photoshop, paint on the face guide and export as PNG
8. Back to SparkAR, click on material_face (any name) and select traxture to add face mesh.

Fig 1.14 Face Tracker

Exercise 5: Native UI Picker

Week 7

This is the patch editor for the Native UI Picker :

Fig 1.15 Native UI Picker

This is the patch editor to track face tracker when a person opens the mouth and filter will come out:

Add caption

Here is the script for UI picker :

const NativeUI = require('NativeUI');
const Textures = require('Textures');
const Patches = require('Patches');

Promise.all([
    Textures.findFirst('FlashLogo'),
    Textures.findFirst('spiderman'),
    Textures.findFirst('pngwave-2'),
]).then(onReady);


function onReady(assets) {

    const icon0 = assets[0];
    const icon1 = assets[1];
    const icon2 = assets[2];

    const picker = NativeUI.picker;

    const index = 0;
    const selection = 0;

    const configuration = {

      selectedIndex: index,

      items: [
        {image_texture: icon0},
        {image_texture: icon1},
        {image_texture: icon2}
      ]

    };

    picker.configure(configuration);
    picker.visible = true;

    picker.selectedIndex.monitor().subscribe(function(index) {
      Patches.inputs.setScalar('selection', index.newValue);
    });
}

Exercise 6 : Animating in SPARK AR

Week 8