< Back

Getting Started

UI Display Function

Loading Function

Text to Animated Function

Load Scripts form Text

Actor Function

Interaction Function

Advanced Function

Showing or Hiding Actors

In this sample, you may use the loadActor function to show and hide the current actors at certain times by pressing buttons with specific behaviors. Your viewers may then hide the actor if they want to see more of the background without being convered by the actor. Furthermore, the playback or the idle motions continue even though the actor is hidden.

Using the loadActor Function

Controls Behaviors

This sample contains 2 buttons, their behaviors are:

Click the first button, Show Actor, to fade the actor in, in one second.
Click the second button, Hide Actor, to fade the actor out, in two seconds.
Please view source code here.

Sample Code:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="https://ssl-webplayer.unity3d.com/download_webplayer-3.x/3.0/uo/UnityObject2.js"></script>
<script type="text/javascript" src="https://www.reallusion.com/crazytalk/Unity/samplecode/CTWebPlayer.min.js"></script>
<script type="text/javascript">
    var player = new CTWebPlayer();
    $(function () {

        player.playerUrl = "https://www.reallusion.com/crazytalk/Unity/samplecode/CTWebPlayer.unity3d";
        player.init($("#unityPlayer"), function () {
            player.loadProject("https://www.reallusion.com/crazytalk/Unity/samplecode/SampleCode13/Actor_showhide.uctproject", {
                playAfter: 0,
                idleMotionUrl: "https://www.reallusion.com/crazytalk/Unity/samplecode/SampleCode13/Affirmative.uctidle"
            });
        });
    });

    function Show() {
        player.showActor(true, 1.0);
    }

    function Hide() {
        player.showActor(false, 2.0);
    }
</script>

Copy and paste the codes in-between the <head> and </head> tags of your custom web page.
The purposes of the functions:
- $(function (): This function defines the address, the position of the CrazyTalk Web Player in the custom web and loads and plays a default project (Actor_showhide.uctproject) in which the actor applied with an idle motion (CTDefWebPreview.uctidle) once your page is opened.
- function Show(): This function shows the actor in one second.
- function Hide(): This function hides the actor in two seconds.
The adjustable codes in the functions:
$(function ()
- Replace the below address of the CrazyTalk Web Player with the one within your self-hosting server.
  https://www.reallusion.com/crazytalk/Unity/samplecode/CTWebPlayer.unity3d
- player.loadProject(){...}: For more information about the modification method to the function loading a default project, please refer to the Sample Code 3 - Loading Projects section.
function Show and Hide
- player.showActor( true, 1.0):
  - This Boolean (true for false) value determines if the character will be shown or hidden when the project is loaded.
  - The number: The number is the duration time (in seconds) for fading in or fading out the actor.

<div id="unityPlayer" style="width: 640px; height: 480px;">
</div>
<input type="button" value="Show Actor" onclick="Show()" class="button" />
<input type="button" value="Hide Actor" onclick="Hide()" class="button" />

Web Player

Copy and paste the codes from <div> to </div> into the position where you want to embed the web player in-between the <body> and </body> tags of your custom web page.
Modify the numbers after the width: and height: parameters in the first line to customize the size of the player.

Controls for Showing or Hiding Actor

Copy the <input.../> lines to the positions where you want to embed the buttons in-between the <body> and </body> tags of your custom web page.
Please note that:
- The function and the button that calls it must be individually put within the head and body blocks in pairs.
- You can only copy and paste the desired buttons and the functions to your custom web pages.
These two <input.../> lines form two buttons on the web. Each of them will call the function declared within the head block after being clicked.