Advanced Interactive Design - Exercises

Chiquita Johanna R
0336747
Advanced Interactive Design
Exercises

---

LECTURES

Lecture 1: Introduction to the module

Week 1

We are introduced to our projects for this module. Mr. Lun showed use some UI movements examples from https://uimovement.com/. We were told to install Adobe Animate and SparkAR. We also had a short tutorial on Adobe Animate. 

There are some shortcut keys we can utilize: 

F5: Adding Frame

SHIFT + F5: Remove Frame

F6: Add Key Frame

F7: Add Empty Key Frame


Lecture 2: UI Scripting for Interactive Application

Week 2

This week, we learned some UI button scripting that we use in our project 1. I try out some stuff in Adobe Animate. 

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 on how to submit our project 1 in google Classroom.

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 

We need to zip all these files.

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.

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.

---

---

Exercises

Exercises 1: Shape Tween, Classic Tween, Button Animation

Week 1
From the tutorial given, I tried adobe animation of an easy shape tween or classic tween. I didn't save the some of the files. But gladly, i did some screenshot of it.

1. Shape Tween
Create a shape - Add a keyframe at the end and duplicate the shape - In the middle of the frame add shape tween.

2. Classic Tween (Ball easing in & out) 

Create a ball asset - Name Layer properly - Duplicate the ball asset and insert keyframe - Create classic tween - Adjust to 100 (ease in) and -100 (ease out)

3. Button Animation

Create new symbol - choose the option 'Button' 

Exercises 2: UI Button Scripting, Masking

Week 2

For this exercise, we learn on a basic scripting for UI button and masking.

1. Animation stops when it reaches the end of the first screen

Create new button - Add button asset to frame 1 - Create new layer of 'script' - Add keyframe to the start and end of frames - Clcik f7 at the enf of the frame and f9 for script panel - Type this.stop();

2. Button Scripting to go to the next page

Create page 1 and page 2 - Press f9 to open script 

Exercises 3: Mouse Over

Week 3

We learned more scripting that we can use for our Project 1.

1. Mouseover Scripting
Create a button asset using movie clip properties with 2 different color - Add a new layer 'script' - add a script 'this.stop();' - place button in assets layer and name the button - Add new layer and type:

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");

}


Exercises 4: Spark AR - Face Tracking & Plane Tracking

Week 6

1. Add Face Tracker
2. Add 3D Object - Face Mesh
3. Add material (+)
4. When material is double click, it adds to the asset library and you can name it anything. ex: material_face
5. Add Face Paint  - Difuse - Texture
6. Shader type: face paint
7. To use a guide in Adobe Photoshop, painnt on the guide and export as PNG
8. Back to SparkAR, click on material_face (any name) and select traxture to add face mesh.

Exercises 5: Spark AR - Native UI Picker

Week 7

Create UI Button 

Spark AR has updated and making it easy for us to make the UI picker. We can just add right away in the patch editor without scripting.

Plane tracker 

1. Add - 3D Object - Plane and place under faceTracker()

2. Add asset

3. Label the plane 

4. Select plane - Material - Create new material 

5. Change the texture name

6. Go to plane - visible (click the arror) to add to patch editor 

7. Make transition from option sender 

Particle Effects 

1, Add - Effects - Particle system 

2. In the material - click texture - add your asset

3. At the emitter - Create new material 

4. For the plane - click tthe visible (arrow) to add to patch editor 

5. Make transition from option sender

Exercises 6: Spark AR - Native UI Picker

Week 8

Image sequence for certain face expression.

1. Add asset - Animation sequence


2. Texture - Choose file - new image texture (select the files)
3. Add - Scene Understanding - Face tracker
4. Add 3D Object - Plane - name it (put under face tracker)
5. Create new material for the plane
6. Change the texture
6. Open patch editor - 'the animation seq'  - Current frame drag into patch editor
7. Click facetracker and drag to the patch
8. Add interaction into the the patch
9. Drag from facetracker to the interaction
10. Add the visible into the patch as well.
11. In patch editor - Utility - Counter and connect from interaction
12. Connect counter to the animation sequence material
13. At counter
14. Add Interaction
15. Connect the new interaction to Pulse
16. To animate - right click (plane in patch editor) - Actions - Animate

---

FEEDBACK

Week 1

Mr.Lun told us to practice on the Adobe Animate.

Week 2

Get use to the scriptin, buttons, etc.

Week 3

Finish the layout first for the application. 

Week 4 - Week 9 

No feedback this week. We focus on doing the exercises and projects.