Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
We’ll start off by downloading and installing Effect House. Then, we’ll spend some time exploring Effect House’s user interface so we’re ready to work in it.
Resources
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
[MUSIC]
0:00
Hi, I'm Rachel,
a teacher here at Treehouse.
0:09
If you're anything like me, you've spent
a lot of time scrolling TikTok and
0:12
enjoying its unending volt of effects.
0:18
Now these effects are created
using augmented reality and
0:21
artificial intelligence.
0:25
Augmented reality or AR is a technology
that overlays digital content
0:27
like images or animations onto real
world environments in real time.
0:32
And AI algorithms can be used for
facial recognition to
0:38
enable AR filters to track
facial features accurately.
0:42
These two technologies come together
to create the TikTok effects that we
0:47
know and love.
0:52
In this workshop, we'll use TikTok's
own Effect House to create a simple
0:53
effect that utilizes facial tracking and
tap interactions.
0:58
So let's start by
downloading Effect House.
1:02
Head on over to effecthouse.tiktok.com, or
1:06
you can find a link in
the teacher's notes.
1:10
There are a lot of resources on
using Effect House on this website.
1:13
So do spend some time
exploring to see what's there.
1:17
For now,
1:22
we'll click on this big red download
button to be taken to the download page.
1:22
Be sure to download the correct installer
based on your operating system and chip.
1:27
This might take a couple of minutes to
download depending on your internet speed.
1:35
Then open up the installer.
1:41
Depending on your operating system,
install the app accordingly.
1:43
Then let's open the app.
1:50
I'm on a Mac, so I'll simply use
Spotlight to look for Effect House.
1:52
Since it's the first time,
I'll press Open.
2:00
Now Effect House will need us to log in.
2:04
I prefer using the QR code method, but
2:07
you're welcome to log in using
other methods that you prefer.
2:10
Simply follow along with
the instructions on the screen.
2:14
And you may need to open your TikTok app
on your phone to complete the login.
2:17
At the time of this recording, Effect
House is still being updated constantly,
2:22
so there might be some differences
between my screen and yours.
2:27
The core functionality and
the position of the windows and
2:31
buttons shouldn't have
changed too much though.
2:34
But if it does look drastically different,
be sure to check the teacher's notes.
2:37
So welcome to Effect House.
2:42
You'll see a rotating banner of
announcements from Effect House,
2:44
an activity center if you want
to partake in challenges, and
2:49
a whole bunch of templates.
2:53
Now these templates are a great way
to jump right in to explore the app.
2:55
So let's do that.
3:00
I'll be picking this critter's stickers
template as it's the closest to what we'll
3:02
be creating today.
3:07
Let's open it up.
3:08
This may take some time because
Effect House is importing
3:09
a whole bunch of assets for
us to play with.
3:14
This is the Effect House workspace.
3:18
Now I know it looks like a lot, but don't
worry, I'll take you through everything.
3:20
And the more you use it, the more
familiar you'll be with the interface.
3:25
So let's break it down.
3:29
On the left, we have the Hierarchy panel.
3:31
This is where we can see
the elements of our effect.
3:34
We can turn elements on and off, which
we can see by the unticked Example 2.
3:38
Let's see this in action by unticking
Example 1 and ticking Example 2.
3:44
When we untick Example 1,
the bunny sticker disappears,
3:49
and when we tick Example 2,
we have a different set of bunnies.
3:55
Below the Hierarchy panel,
we have the Assets panel.
4:01
This is where we will import all of our
images so we can use it in the effect.
4:07
In the middle at the top,
we have the Scene panel.
4:13
This is the stage in which
we craft our effect.
4:17
To rotate the scene around
the center point, click and
4:20
drag with the right mouse button.
4:25
To pan left, right, up, and down, click
and drag with this scroll-wheel button.
4:28
To zoom in, scroll up and
down using the scroll-wheel
4:37
Now if you are new to navigating in 3D,
4:43
it's always going to be tricky and
you can easily get lost.
4:46
To reset this view, click on
the reset button on the top right.
4:50
Below that is our Visual Scripting panel.
4:56
This is where all
the non-code logic happens.
4:59
If you've ever worked with flow charts,
this will look very similar.
5:03
There isn't anything here for this filter,
but we'll work with it soon enough.
5:08
To the right is the Preview panel.
5:13
Now this is my favorite.
5:16
This is where you can see your
effect in action as you build it.
5:18
You even have access to a fantastic
library of different people
5:22
doing different things.
5:27
But my favorite part of all of this is
that you can use your own camera to test
5:29
the effect on yourself.
5:34
By swapping to this camera icon,
look, it's me.
5:36
Finally to the far right
is the Inspector panel.
5:42
When you select an element
in the Hierarchy panel,
5:47
let's say our Static Accessory,
5:50
the Inspector panel will provide you
with tons of options for that element.
5:53
You'll also notice that the scene
has swapped to a 2D mode because
5:59
we've selected a 2D object.
6:03
Finally, we can head back to
the home screen by pressing
6:06
the home icon at the very top left.
6:11
Since we won't be using this project,
we wouldn't have to save it.
6:14
So click Don't Save.
6:18
And that's it,
that's the workspace that we'll
6:19
be using to create our
first TikTok Effect.
6:23
I hope you're as excited as I am to
create something using AR and AI.
6:27
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