Module 8: Adding Interactions to Your TikTok Effect
Interaction subgraphs allow you to quickly add interactive elements to your effect without having to build visual scripting flows from scratch. They are quick, convenient, and offer different levels of customization.
Earlier modules in this course briefly demonstrated how to add interaction subgraphs. This module provides a high-level overview of what interaction subgraphs are, and the different ways you can customize them to create unique interactions.
Module Objectives: By the end of this module, you should be comfortable with the following objectives:
- Understand how interactions work and how to access object-specific interactions
- Identify the three different levels of complexity within an interaction and understand how they contribute to customization
- Demonstrate how to mix and match event triggers and event responses to create unique interactions
This video was recorded using Effect House v2.2.0. Later versions of Effect House have features that may not be covered in this video.
Introduction to Interactions
In Effect House, interactions are preset visual scripting subgraphs that you can add in one click to make your effect interactive. For example, you can add an interaction that will make an object appear or disappear when a person taps on the screen. You can add multiple interactions to an object.
There are many different types of interactions in Effect House that you can use to make your effect more dynamic and engaging. Interactions also offer different levels of customization and complexity, depending on your experience level.
Add an Interaction
To make an object interactive, select the object that you want to make interactive in the Hierarchy panel, then go to the Inspector panel and click + Add interaction to open the Interaction menu.
There are specific interactions that only show up for certain features. For example, the Image component has its own image-specific interactions. Animated textures also have unique interactions that you can access when the animated texture is selected in the Assets panel.
Basic Features
For this example, choose Tap Screen to Toggle Visibility, which makes the object appear or disappear when a person taps the screen. You can simulate tapping by clicking on the Preview to see how the interaction works.
Notice that the interaction subgraph appears in the Visual Scripting panel, connected to the object's node. To learn more about the interaction subgraph, click on the information icon, which displays the definitions and a link to the Effect House website.
Levels of Complexity
When added, the interaction subgraph offers a basic level of customization. For example, on the Tap Screen to Toggle Visibility subgraph, you can choose if you want to start with the objects hidden from view by checking Start Hidden.
Double-click on the interaction subgraph to view the next layer of subgraphs, made up of an Event Trigger and Event Response. These trigger and response subgraphs control the interactive behaviors in response to some kind of cue. In this case, the Event Trigger is touch, which corresponds to a person tapping on the screen. The consequent Event Response is visibility, which makes the object appear or disappear. You can mix and match Event Triggers and Event Responses to make your own interactions.
You can double click on the Event Trigger or Event Response subgraphs to access the most fundamental nodes and logic flows, which offers the deepest level of customization.
Mix and Match to Create Custom Interactions
Navigate back to the main graph by clicking Main Graph.
For this example, create an interaction that makes the object appear and disappear whenever a person opens their mouth. You can take the event trigger and event response subgraphs from different interactions and combine them to make your own interaction.
Make sure the Sphere object is still selected in the Hierarchy panel, then go to the Inspector panel and click + Add interaction. Add the Detect Face Movement to Show/Hide Object interaction, since this interaction changes object visibility in response to facial movement. All you need from this interaction is the element that detects face movement. Double-click the Detect Face Movement to Show/Hide Object subgraph, copy the Event Trigger: Detect Face Movement subgraph, and then paste it in the main graph.
Now you need an Event Response that controls object visibility. Double-click the Tap Screen to Toggle Visibility interaction, copy the Event Response: Toggle Visibility subgraph, and then paste it in the main graph.
You can delete the original interaction subgraphs to clean up your Visual Scripting panel, but keep the Sphere object node.
Connect the Event Trigger: Detect Face Movement subgraph's Begin:Exec output to the Event Response: Toggle Visibility subgraph's Enter input. Connect the Sphere object node to the Event Response: Toggle Visibility subgraph's Target input. Then change the Event Trigger: Detect Face Movement subgraph's Face Movement to Mouth Open. Finally, change the preview media to show a person opening and closing their mouth.
You've just created a brand new interaction! There are many different ways to customize interactions. In addition to rearranging subgraphs, you can modify the base-level nodes to your liking.
Clear your Visual Scripting panel to follow along with the next section.
Object-Specific Interactions
Some interaction types are only available for specific features. For example, examine an object with the Image component.
First add an Image object to the Hierarchy panel by clicking the Add button [+], going to 3D, and selecting Image. This object has an Image component by default, which you can view in the Inspector panel.
Click + Add interaction to access image-specific interactions available in the dropdown. Choose Tap Screen to Transition Image Opacity. This causes the image to change opacity within a set period of time.
On the Tap Screen to Transition Image Opacity subgraph, you can change the opacity settings. You can change the From and To values to make the image fade out or fade in. You can also change Within Seconds to determine how long it takes for the image to change opacity. If you want to customize this interaction even more, you can play around with the different layers of logic.