Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Create AR Effects for TikTok with Effect House!
You have completed Create AR Effects for TikTok with Effect House!
Preview
Time to make it super interactive! We’ll implement tap interactions in this video, allowing our users to cycle through different Treehouse topics to find one that suits them! Watch as the border, Mike’s badge, and our speech bubble change with a tap!
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
Okay, so we've got Mike,
Mike's doing his thing.
0:00
There's only one thing left that we need
to add before we can finish this filter,
0:03
and that is the ability to change topics.
0:07
What if I want to learn Python?
0:11
You should learn Python.
0:13
Now this is done using tap interactions.
0:14
There are three objects that need to
change textures when the user taps
0:18
on the screen, and that's this border
here, the badge and also the bubble.
0:23
So we'll start with the easy one.
0:31
We'll start with our 2 D frame border
thing that we started off with.
0:32
So what we're gonna do,
is over here in the hierarchy,
0:37
we'll click on the border the border
image and then over here in
0:40
the inspector all the way at the bottom
there's an add interaction button.
0:44
When you press this, you'll get a little
menu we're gonna scroll down to
0:49
tap screen to cycle image textures.
0:54
Click on that.
0:57
Now, this will drop something
into our visual scripting panel.
0:59
It will be on top of some other stuff.
1:02
So we will have to pull this down
to just get it out of the way.
1:04
Let's zoom in.
1:09
Okay, in this node,
there's actually not much you can change.
1:12
You can't change the target because
the target is linked to this border node.
1:15
You can change the order.
1:19
We've got loop, random and shuffle, but
1:21
because we want all three of them
to change to the correct thing and
1:23
match every single time,
we're going to keep it at loop.
1:26
Now this is where the magic happens,
the image textures.
1:30
We have five image textures.
1:34
We've got, web dev, AI, design, data,
1:35
all the way around Python,
and then back to web dev.
1:38
So there's five.
1:42
So we're going to give ourselves
five frames to work with.
1:44
And for each one,
1:47
we're going to assign one of those
textures one of those borders.
1:48
So we'll go in alphabetical order so
1:53
that all of our different
objects can cycle the same way.
1:55
So we'll start with border AI.
1:59
And then border data, border design,
2:02
border Python, and border web.
2:06
Let's see in an action.
2:12
Let's go over here and click our screen.
2:13
And we can see that it is in fact
cycling through the textures just
2:15
like it said it would.
2:20
Let's refresh off.
2:23
Okay, next we're gonna target
this badge right here,
2:24
we want this to change as well.
2:27
So let's come over here to hierarchy and
we'll select Badge.
2:29
And then over in our inspector,
we'll come down to add interaction again.
2:33
Scroll down to tap screen
to cycle image textures.
2:38
And we'll scroll in and we will
rearrange so we can see everything.
2:41
Just like before,
we're gonna keep it on loop.
2:47
And then we're gonna add
our five image textures.
2:50
So we want badge AI.
2:53
Badge data.
2:56
Now you want this to be in the exact
same order as we did with the border,
2:57
otherwise they'll appear in a whole bunch
of different scrambled collections.
3:02
Python and badge Web,
okay let's see this in action.
3:08
Very nice, everything's changing.
3:15
So just one more.
3:18
We're just gonna change that bubble.
3:19
Now I wanna challenge you
to do this by yourself.
3:21
So give me a pause,
3:23
try to make the bubbles cycled through the
image textures just like we did before.
3:24
I'll see you in a second.
3:29
It's been a second.
3:31
So let's walk through this, so
we'll select the bubble in our hierarchy,
3:33
come over here to inspector and
then down to add interaction.
3:38
And again, we'll do cycle image textures.
3:43
We'll come here, zoom in, keep it on loop,
3:48
add our five image textures,
and then set them.
3:51
So bubble AI, bubble data,
3:54
Bubble design,
bubble python and bubble Web.
3:59
Okay, let's have a look.
4:07
Hey, hey, very cool.
4:11
And there you go.
4:15
All the different elements,
cycling through all the different topics.
4:16
When the user clicks on the screen and
you've got yourself a TikTok effect,
4:19
you did this.
4:24
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up