ADVANCED INTERACTIVE DESIGN- EXERCISES

April 09, 2020

ADVANCED INTERACTIVE DESIGN- EXERCISES

16/4/20-11/6/20 (Week 1- Week 9)
Andrea Vie Choong Jia Qi (0331945)
Advanced Interactive Design
Exercises
_____________________________________________________________________________

LECTURES

Lecture 1: Introduction to the module

16/4/20 (Week 1)

We are introduced to our projects for this module. Some examples of UI Animation were shown from https://uimovement.com/. We were told to install Adobe Animate and SparkAR which we will be using in our projects. We also had a short basic tutorial on how to use the tools in Adobe Animate.

There are some shortcut keys we can utilize:

F5- Add Frame

SHIFT + F5- Remove Frame

F6- Add Key Frame

F7- Add Empty Key Frame

Lecture 2: UI Scripting for Interactive Application

23/4/20 (Week 2)

This week, we learned some UI button scripting and masking technique that we use in our project 1. After the tutorial, I create 3 pages to try it out.

Lecture 3: Mouse Over | Add/Minus

30/4/20 (Week 3)

This week, we learned mouse over and add/minus scripting that can be used in our project 1.

Lecture 4: -

7/5/20 (Week 4)

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

Lecture 5:

14/5/20 (Week 5)

We were briefed on how to submit our project 1 in google Classroom.

Here is a list of files we need to submit:

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

2. HTML file

3. js (Javascript) file

4. Image folder

We need to zip all these files as well.

After that, we learned how to create background image for the browser behind the interactive UI. The progress is in projects blog under project 1.

Lecture 6: AR Face/Head Tracking | Plane Tracking

21/5/20 (Week 6)

This week, we were briefed on our project 2 and final project requirements. We learned to use the face/head tracking, background replacement and plane tracking.

Lecture 7: Native UI Picker

28/5/20 (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

4/6/20 (Week 8)

We learned how to create image sequence for multiple assets and create animation using patch editor to change the assets at different states of the user's face.

Lecture 9: Image Sequence & Patch Editor

11/6/20 (Week 9)

We learned how to add UI picker using patch editor only without any script involved as well as creating a face mask using plane.

__________________________________________________________

INFORMATION

Module Information Booklet (MIB)

__________________________________________________________

EXERCISES

Exercise 1: Shape Tween | Classic Tween | Button Animation

16/4/20 (Week 1)

From the tutorial given, I tried creating a simple animation of bouncing ball and testing the easing animation using the ball asset in the library.

i. Shape Tween

1. Create a shape

2. Add a keyframe at the end and duplicate the shape

3. In the middle of the frame, add shape tween

i. Classic Tween (Ball easing in & out)

1. Create a ball asset

2. Name layer "ball_layer" & place the ball asset into the scene

3. Duplicate the ball asset, insert keyframe and place the other at the end

4. Create classic tween

5. Under tweeting, go to classic easing and adjust to 100 (ease in) and -100 (ease out)

iii. Short animation of ball

1. Create a ball asset

2. Name layer "ball_layer" & place the ball asset into the scene

3. Duplicate the ball asset, insert keyframe and place the other at the end

4. Create classic tween

5. Add new layer "guide"

6. Draw a path using line tool

7. Make the line more curvy (smooth movement)

8. Add a classic motion guide to "ball_layer"

9. Copy + paste the line in "guide" and paste in "Guide: ball_layer"

10. Drag the balls to the start and end of the guide

iv. Animate buttons

1. Create new symbol with the option "Button"

2. In Timeline, there are up, over, down, hit button options

Up: default button
Over: hover button
Down: clicked button
Hit: specific area where the button can be detected

Fig 1.1 Up Button

Fig 1.2 Over Button

Fig 1.3 Down Button

Fig 1.4 Hit Button

Final Result

Exercise 2: UI Button Scripting | Masking

23/4/20 (Week 2)

For this exercise, we learned on a basic scripting for UI button and masking as well.

i. Stop animation when it reaches to end of the first screen

1. Create new symbol (button)

2. Add the button asset to "page 1 frame"

3. Create new layer "script"

4. Add keyframe to the start and end of the frames

5. Click F7 at the end of the frame and F9 for script panel

6. Type this.stop();

Fig 2.1 Create button (up, over, down, hit)

Fig 2.2 Button Script: this.stop();

ii. Use motion tween animation for graphic

Fig 2.3 Motion Tween on text animation

iii. Create classic tween animation for image

1. To add image to Adobe Animate: file>import>import to stage

2. Convert image to symbol and name it "img1"

3. Add keyframes and select classic tween

4. In the middle of the keyframes, in effect select "clockwise" and easing "easing out"

5. At Object Panel, click the start keyframe, go to colour effect "Alpha" and set to 0%.

(To create a fade in effect)

Fig 2.4 Classic Tween on image animation (easing & rotate)

Fig 2.5 Classic Tween on image animation (colour effect)

iv. Button scripting for pop up window message

1. Select the "button" layer

2. Name the label "buttonSTARTclick"

3. Go back to "script" layer

4. Press F9 to open script panel and type the following:

this.buttonSTARTclick.addEventListener("click", buttonSTARTclick_click);

function buttonSTARTclick_click(e){
alert("PARISCYCLE");

}

Fig 2.6 Button Script: pop up message

v. Button scripting to go to next page and last page

1. Create page2 and page3

2. Press F9 to open script panel at the end of frame in page1 and type the following:

this.buttonSTARTclick.addEventListener("click", buttonSTARTclick_click);

function buttonSTARTclick_click(e){
exportRoot.gotoAndPlay("page2");

}

Fig 2.7 Button Script: Labelling button for scripting

Fig 2.8 Button Script: Link start button to next screen

3. Do the same process at the end of frame in page2 and type the following:

this.buttonSTARTclick.addEventListener("click", buttonSTARTclick_click);

function buttonSTARTclick_click(e){
exportRoot.gotoAndStop("page3");

}

Fig 2.9 Button Script: Labelling button for scripting

Fig 2.10 Button Script: Link next button to last screen

Final Result:

Masking

i. Masking an image using a rectangle shape

1. Import image

2. Add a new layer and draw the rectangle above the image

3. Select layer>mask

4. Place the keyframe at the end and draw the full rectangle covering the image

5. Select keyframes and create shape tween

6. Lock both layers to see the image animation

Fig 2.11 Animation using masking layer

Final result

ii. Create a progress bar (circle/rectangle)

1. Create a circle in the mask layer

2. Create shape tween between keyframes

3. Duplicate circle above the mask layer and reduce size to about 76%, change colour to grey

4. Add a new layer above and draw a thin rectangle

5. Lock below layers and draw the progress bar around the circle using the rectangle

6. Use a grid if necessary

7. Do the same process above except step 5, draw another rectangle on top.

1. Create a circle in the mask layer
2. Create shape tween between keyframes
3. Duplicate circle above the mask layer and reduce size to about 76%, change colour to grey
4. Add a new layer above and draw a thin rectangle
5. Lock below layers and draw the progress bar around the circle using the rectangle
6. Use a grid if necessary
7. Do the same process above except step 5, draw another rectangle on top.

Fig 2.12 Animation of circular progress bar (construction)

Fig 2.13 Animation of circular progress bar (result)

Fig 2.14 Animation of rectangular circular progress bar (construction)

Fig 2.15 Animation of rectangular circular progress bar (result)

Final result

Exercise 3: Mouse Over | Add/Minus

30/4/20 (Week 3)

This week, we learned more scripting that we can use for our project 1.

i. Add/Minus Button Scripting

1. Create 2 button assets (one minus, one plus)

2. Add the button assets in "button" layer

3. Add text amount "1" in the center between the buttons

4. Name the two buttons: "btnMINUSclick" & "btnADDclick"

5. Name text amount (dynamic text): txtAMOUNT

6. Add new layer "script" on top

7. Add script frame (F9) at the end and type the following:

Fig 3.1 Creating button assets

Fig 3.2 Script for add/minus controls

Final Result

ii. Movie Clip Button: Mouseover Scripting

Instead of using only button properties for button assets, movie clip can also be used as a button asset as well.

1. Create a button asset using movie clip properties with 2 different colours.

2. Add new layer "script", add a script frame (F9) at the end of each button colour frame and type "this.stop();"

3. Go back to scene, place "mcbtn_SignIn" in "assets" layer. Name the button "mcbtnSignIn"

4. Add new layer "script" and type the following:

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

this.mcbtnSignIn.addEventListener("click", mcbtnSignIn_click);
this.mcbtnSignIn.addEventListener("rollover", mcbtnSignIn_rollover);
this.mcbtnSignIn.addEventListener("rollout", mcbtnSignIn_rollout);

function mcbtnSignIn_click(){
}

function mcbtnSignIn_rollover(){
//console.log("TEST");
exportRoot.mcbtnSignIn.gotoAndPlay("frmOver");
}

function mcbtnSignIn_rollout(){
exportRoot.mcbtnSignIn.gotoAndPlay("frmOut");

}

Fig 3.3 Create button asset & Script "this.stop();"

Fig 3.4 Add script for mouseover control

Final Result

Exercise 4: SparkAR- Face Tracking & Plane Tracking

21/5/20 (Week 6)

i. Face Tracker & Face Mesh

1. Add>Scene Understanding>Face Tracker

2. Add>3D Object>Face Mesh

3. Add material (+)

4. When material is double click, it adds to the asset library and label it "mat_facepaint"

5. To add the face paint, Diffuse>Texture

6. Always make the shader type: face paint

7. To use a guide to make the face paint, Help>Download face assets

8. Place face guide in Adobe Photoshop, paint on the guide and export as PNG

9. Go back to SparkAR, click on "mat_facepaint" and select texture to add the face mesh file.

Fig 4.1 Create face paint in Adobe Photoshop

Final Result:

ii. Background Replacement

1. To remove the camera background, go to Texture Extraction (+) and Segmentation (+) and it will appear in the assets library.

2. Add>2D Object>Rectangle

3. To replace the camera background, Material (+)>Create new material

4. At shader properties>texture, add the "cameraTexture0"

5. To remove the white background of "cameraTexture0" and select Alpha>Texture to "personSegmentationMaskTexture"

6. To expand the size of "cameraTexture0", select the "rectangle0" and adjust to fill width & fill height

7. Add material>create new material and label it "mat_bg"

8. Adjust image size in Photoshop and save as JPG

9. At "mat_bg", add bg image in Texture

Fig 4.2 Adjust bg image to default size

Final Result:

ii. Plane Tracker (Poster)

1. Add>Scene Understanding>Fixed Target Tracking

2. Add texture and import a poster image

3. Add asset>Import from AR library>Download free

4. Drag the 3D object below the poster

5. To add a 2D object, Add>3D Object>Plane

6. At Plane, add Material (+) and label it "mat_avocado"

7. Go to Texture>Import file>Add the avocado img

8. To add animation, right click>Add>Effects>Particle System and place it under the poster

9. To add effects, Add>Effects>Particle System and place under the poster

10. Add Material (+)>Create new material and label it "mat_smoke line" and import particle img

Fig 4.2 Create a 3D object on the poster

Fig 4.2 Create a 2D object on the poster

Animation of 2D Object:

Animation of Particle Effect:

Exercise 5: SparkAR- Native UI Picker

28/5/20 (Week 7)

i. Create native UI buttons

1. Assets>Import from computer>add the icon buttons

2. Project>Edit>Capabilities>Manager capabilities (+)>Native UI control (check picker)

3. Add asset>Script>right click>reveal in explorer (open script.js in any text editor

4. Delete all script>File>New from template>2D stickers>click script.js>open in explorer>copy+paste to your script

5. Change the files to your icon assets labels

Textures.findFirst("icon_durian"),

Textures.findFirst("icon_banana"),

Textures.findFirst("icon_watermelon"),

6. Change the textures at const icon1 to icon 1-3

const icon1 = assets[0];

const icon2 = assets[1];

const icon3 = assets[2];

7.Change textures at the image_texture

items

items: [

{image_texture: icon1},

{image_texture: icon2},

{image_texture: icon3}

]

8. Make sure to check No compression for each icon button asset and select restart to refresh and the button will be on the screen

Fig 5.1 Create UI buttons

ii. Change filters using UI buttons

Option 1: Using script and patch editor

1. Add>Scene Understanding>Face Tracker

2. Add>3D object>Face Mesh>Material (+)

3. Change shader type: face paint and rename as "mat_face"

4. Create face paint in Photoshop

5. Assets>Import from computer>add face paint assets

Fig 5.1 Link filters to UI buttons using patch editor & script #1

Fig 5.2 Link filters to UI buttons using patch editor & script #2

Option 2: Using script only

1. Add>Scene Understanding>Face Tracker

2. Add>3D object>Face Mesh>Material (+)

3. Change shader type: face paint and rename as "mat_face"

4. Create face paint in Photoshop

5. Assets>Import from computer>add face paint assets

6. Create a faceMesh>Material (+) "mat_face" and change the shader type:face paint

7. Open script.js and add the following:

Textures.findFirst('facepaint_durian'),

Textures.findFirst('facepaint_banana'),

Textures.findFirst('facepaint_watermelon'),

Materials.findFirst('mat_face'),

const facepaint1 = assets[3];

const facepaint 2 = assets[4];

const facepaint 3 = assets[5];

const matface = assets[6];

{image_texture: icon1, face_texture: facepaint1};

{image_texture: icon2, face_texture: facepaint2};

{image_texture: icon3, face_texture: facepaint3};

matface.diffuse = configuration.items[index.newValue].face_texture;

Fig 5.3 faceMesh using script only #1

Fig 5.4 faceMesh using script only #2

Fig 5.5 faceMesh using script only #3

Final result:

iii. Change background replacement using UI buttons

1. Camera>Texture Extraction (+) & Segmentation (+)

2. Add>2D object>Rectangle "rec_person" and fill width & height

3. Material (+)>Create new material "mat_person" and choose Texture as cameraTexture0

4. Add>2D object>Rectangle "rec_bg"> fill width & height and place before rec_person

5. Material (+)>Create new material "mat_bg"

6. "mat_person" (check alpha)>Texture "personsegmentation"

7. Drag canvas0 before faceTracker0

8. mat_bg & mat_person>Advanced Render Options (uncheck use depth test & write to depth)

9. Go to rec_bg "rec_bgDurian" and duplicate/rename for all

10. Change mat_bg according to the rec_bg

11. Make background in Photoshop>Add asset>import bg assets

12. Assign texture of mat_bg_durian to bg_durian, do the same for all

13. rec_bgDurian>visible(arrow) to patch editor and do the same for all

14. Drag the transition from option sender to all the rec_bg patches

Fig 5.6 Background replacement

iv. Plane tracker using UI buttons

1. Add>3D object>Plane and place under faceTracker0

2. Make effect in Photoshop>Add asset>Import facetrack assets

3. Label plane0 "planeDurian"

4. Select planeDurian>Material(+)>Create new material

5. Change texture to mat_track_durian

6. Go to planeDurian>visible (arrow) to add to the patch editor

7. Make transitions from option sender

8. Repeat step 3-7 for banana & watermelon

Fig 5.7 Plane tracker

Final result:

v. Particle effects using UI buttons

1. Add>Effects>Particle system

2. At mat_par_durian>texture>add icon_durian

3. At emitterDurian>Material (+) "mat_par_durian"

4. planeDurian>visible (arrow)>add to patch editor and make transition from option sender

5. Repeat step 2-4 for banana & watermelon

Fig 5.8 Emitter

Final result:

Exercise 6: SparkAR- Image Sequence & Patch Editor

4/6/20 (Week 8)

i. Image sequence for certain face expression

Fig 6.1 Image Sequence & Patch Editor for faceTracker

ii. Image sequence for background

Fig 6.2 Image Sequence & Patch Editor for background

Final Result:

Exercise 7: SparkAR- Masking plane onto face mesh

11/6/20 (Week 9)

i. Face Mask using plane

ii. UI picker (using patch editor)

Fig 7.1 Blend plane to faceMesh with UI picker options

__________________________________________________________

FEEDBACK

16/4/20 (Week 1)

General feedback: Mr. Lun told us to familiarize ourselves with Adobe Animate, understand the concept of the keyframe, tweening (classic tween & shape tween)

23/4/20 (Week 2)

General feedback: Practice and get used to the UI button scripting and image masking as well.

30/4/20 (Week 3)

General feedback: It is best to start designing your screens in Adobe Animate first before you animate the screens so that you are done with the layout of your UI application.

7/5/20 (Week 4)