Advanced Interactive Design - Final Project

4/06/20 - 25/06/20 (Week 11 - 14)
Azmina Fathima Haris (0337113)
Advanced Interactive Design
Final Project

INSTRUCTIONS 

Project 3

The final project was divided into two, the first being AR filter using a fixed target tracker to scan a merchandise (of our choice)  from the Taylor's Merchandise store and then to create a microsite promoting this AR filter/app and to explain how it works. I was rather unsure of how to proceed and was still pretty confused but we had to show Mr. Lun our ideas before proceeding.



Mr. Lun said it was good that my ideas were more functional and suggested some ways I could go about doing them, though I was not very sure how I could do the calendar with just limited pickers. So I decided to do a simple monthly planner instead and used the cover of the book as fixed target tracker. Since I didn't have much time to figure out the AR elements or to create something new for it, I decided to simply animate the elements on the cover itself in a subtle parallax effect.

Creating the notebook cover

Arranging assets for AR filter

Finalised planner cover (target tracker)

Finalised assets for AR filter - 

    

Once I was done creating the assets, I exported to Spark AR and started working on the filter. For the parallax effect, I used the 3D plane to arrange the objects at different positions and also created the added the text that I would be using. Since I wanted to animate the filter, I started working on an image sequence at first but then had issues since there were too many frames for a simple animation. Instead, I created the same floating effect using the animation patch and played around with the progress and position for each air balloon and the clouds. 

Adding patch for tracker not found

Animation patches for the balloons

Animation patches for the clouds and the text

I showed Mr. Lun the filter and he said it looked good. He suggested removing the background to show the planner cover behind, so I turned down the opacity of the plane so it looked kind of opaque.

Once I completed the AR filter, I started working on the microsite in Animate. I didn't have many other assets to make, since I was using the same visuals as the filter but I decided to keep it minimal. I decided to create four pages for the microsite -
- a homepage with a call to action to learn more
- an about page
- a guide on how to use the filter
- page with download link

I added a section at the top in the navigation bar for merch that opens to an external link in the official Taylor's Merchandise store page.

Process in Animate

Process in Animate

Finalised microsite design -




FEEDBACK

Week 11
Good idea, but the function might not be able to be implement in Spark AR. For example, the sticker bit, it can detect the sticker and display more info, but sparkar alone can't differentiate who is the owner. The calendar looks interesting, but since sparkar can only detect 1 pattern, you might need to find a way so user can go through 12 months in a year. Maybe you can use the native ui picker for that
For microsite, he suggested using a rectangle shape in Adobe animate around 1280x720 and to fit the content within it.

Week 13

There was an issue with my target tracker and there seemed to be some kind of glitch when the image was not found. I sent Mr. Lun a sample video and he said its fine. For the background of the filter, he said I could remove the plane to show the planner behind. He said my microsite looked fine.