Advanced Interactive Design // Task 1 // Interactive AR Application
xx/x-xx/xx/23 Week x - Week x
Chan Siew Ni #0352518
Bachelor of Design in Creative Media
Bachelor of Design in Creative Media
Advanced Interactive Design // Task 1 // Interactive AR Application
LECTURES
WEEK 1
Mr Razif briefed us about the tasks and the module about. Then, he also
mentioned that this module task is slightly different than the previous one as
he had made some changes. For this time, we will have to do a filter for
Tiktok instead of what previously they were done for Instagram. Then, other
than that, we will have another task which is to make a responsive website
that contains interactions.
For the first week's task, we will have to do:
1. 3 tiktok filter (Mood Board)
2. 3 ideas for our own filter
3. Download the Adobe Animate & Effecthouse
WEEK 2
Week 3
1. Classic Tween
With two keyframes added, we can now choose to apply classic tween. This is to
connect two scene movements. A classic tween is used when making objects
fade in and out; or move across a scene. Classic tweens are also used to
change the size of an object.
Figure 1: Classic tween in Adobe Animate
2. Shape Tween
A shape tween is used when a color needs to slowly transition to another
or when a shape turns into another shape. (Exp: Square to Circle)
Figure 1.1: Shape Tween in Adobe Animate
Figure 1.2: Shape Tween In Adobe Animate
3. Motion Tween
Same as Classic Tween, but it added some motion to make the movement looks
nicer. Motion tween is a type of animation that uses symbols to create
movement, size and rotation changes, fades, and colour effects.
Week 4 - Adobe Animate Tutorial
1. Put two timeline of the object together to make them works together
- ball bouncing
- the ball moves from left and right
Results: the ball will bounce from left to right
2. Creating a presentable animation
Figure 1.3: creating a different frame and buttons
Figure 1.4: Coding of functioning buttons
TASK 1 // INTERACTIVE AR APPLICATION
1. Unhappy
The reason I liked it:
Funny, Can be used with friends, people like to see something that looks funny and it will become popular as many people use it and posted it.
“Smile with awkward”
It’s like a face that is not happy and with some awkward feelings too, people like to use this filter to express something that is related to this feeling.
figure 2: Unhappy filter
2. Migration
The reason I liked it:
Interactable, performable
People will act like they are really chased by the animals and I think it is also funny and somehow this can engage with the user too.
figure 2.1: migration filter
3. Comic Me
The reason I liked:
Engaging: Mostly people will feel curious that how they look in comic art style and this will help them fulfil their wishes. Other than that, users can also play with their friends and compare which is prettier.
figure 2.2-2.4: Comic Me filter
Advanced Interactive Design Task 1: Tiktok filter Proposal
<iframe
src="https://drive.google.com/file/d/1q_z8mvmYgtz0YMZu1npEvgq8Ko311CAt/preview"
width="640" height="480" allow="autoplay"></iframe>
Mr Razif said that the pouring water challenge is workable and he ask me to
proceed with the idea. Then I have to find relevant tutorials to help me
with the task. We can find tutorials by searching on networks and also the
other way is through Effect House's official discord group (Effect House is
the official tool for us to create filters).
First, I try to search tutorials about when doing some facial movement will
trigger the actions. I try to make the part when the eye blinks or closes, and
the animation of pouring shall start.
Figure 3: work progress on trying out trigger action using facial movement detection
Then, I also try to make some sound effects of pouring water to make it more
interesting. For this part, I can use the same technic as facial movement
detection. When detected the eye close, the sound effects will
play.
After that, I also make the branding board for the filter. To make it more
familiar for Malaysian, I choose to use "Milu".
Figure 3.1: Drawing Milu Illustrations in Adobe Illustration
Next, I tried to make the animation using frame-by-frame. I make 10 frames png
and put it as animation. For this part, I have met a problem which is the
animation will disappear with the detection is triggered. Originally my idea
was to make the animation stop at a certain frame with the eye close, but I
could not.
Figure 3.2: frame by frame animation making
Figure 3.3: work progress on doing visual scripting
Week 8:
For this week, I continue to experiment with how to pause the animation and keep the animation visible.
Week 10
Mr Razif have find a solution for me to complete my filter, I followed the tutorial video that recorded by him and finally did it successfully.
By using the "Greater Than" and "If", Greater than is to set if the animation frame is greater than a certain number, it will trigger another action. Then, it will lead to the next action which is the "If", using this, we can then trigger if the frame is greater than a certain number, it will play an action, on the contrary, will play the different one.
Figure 3.4: work progress on doing visual scripting
Week 11:
For this week, I did the Win and Lose Illustration to indicate the different statuses.
Figure 3.5: "Lose" Illustration
Figure 3.6: "Win" Illustration
Also, I have done the filter this week.
Filter Link:
FEEDBACK
Week 6: Mr Razif said that I shall proceed to continue the fill water
challenges but I can change from plain water to something more well-known and
people will get familiar with. Originally my idea is to blink to start the
water filling up and blink to end. But, Mr Razif suggests I change to
closing their eyes, the water begins to fill and when the player opens their
eyes water will be stopped at that certain level.
Week 7:
Mr Razif said that It is quite good and he said he will help me to find some
suitable tutorials to do the remaining part of the filter. He also asked me to
send him the files and assets so that he could do experiments and exploration.
Week 9:
For now, my filter is quite complete just left the scoring part. Mr Razif said that he would try to help with my filter and see if he can do it or not.
REFLECTIONS
I think it was super fun because I like to play with filters. I was hoping to make my own filter one day. Although the tough part is that there's a very limit of tutorial videos that can be found online. Thanks to Mr Razif because he helps us a lot to experiment and tried out ways to do our filter.
Comments
Post a Comment