< Back

Getting Started

UI Display Function

Loading Function

Text to Animated Function

Load Scripts form Text

Actor Function

Interaction Function

Advanced Function

Transforming Actors

In this sample, you may use actorTransform function to transform the actor, including resizing and re-locating. Your web audiences will then interact more with the actor when it is talking or idling. In addition, it allows the viewers to move and resize the actor to another position in the player so that they are able to see the background image content without hiding the actor.

Using the actorTransform Function

Scale: Position X(0~100): Position Y(0~100): Duration:

Controls Behaviors

This sample contains 3 buttons and 4 edit boxes, their behaviors are:

Click the first button, Actor Transform1, to resize and move the actor to a given set of transform values (80, 60. Size: 80%) in 5 seconds.
Click the second button, Actor Transform2, to resize and move the actor to another given set of transform values (40, 40. Size: 50%) in 3 seconds.
Type the numbers into the edit boxes, Scale, Position X, Position Y, and Duration, and then click the button, Custom, to load resize and move the actor to still another custom transform position in the given amount of seconds.
Please view the 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/SampleCode14/Actor_sizeposition.uctproject", {
                playAfter: 0,
                idleMotionUrl: "https://www.reallusion.com/crazytalk/Unity/samplecode/SampleCode14/Affirmative.uctidle"
            });
        });
    });

    function Transform1() {
        player.actorTransform({
            scale: 80,
            positionX: 80,
            positionY: 60,
            duration: 5.0
        });
    }
    function Transform2() {
        player.actorTransform({
            scale: 50,
            positionX: 40,
            positionY: 40,
            duration: 3.0
        });
    }
    function Transform3() {
        var Scale = 100;
        if ($.trim($("#txtScale").val().length) > 0) {
            Scale = parseInt($("#txtScale").val());
        }
        player.actorTransform({
            scale: Scale,
            positionX: $("#txtX").val(),
            positionY: $("#txtY").val(),
            duration: $("#txtDuration").val()
        });
    }
</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_sizeposition.uctproject) with an assigned idle motion (CTDefWebPreview.uctidle) once your page is opened.
- function Transform1(): This function transforms the current actor to a given size and position in 5 seconds.
- function Transform2(): This function transforms the current actor to another given size and position in 3 seconds.
- function Transform3(): This function collects values from certain text-editing boxes defined in the body block and transforms the current actor accordingly.
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 Loading Projects section.
function Transform1 and Transform2
- player.actorTransform({...}):
  - Scale: This value transforms the current actor to a custom size (as a percentage value of the original actor).
  - positionX: This value horizontally moves the current actor to a custom position (in relation to the width of the web player).
  - positionY: This value vertically moves the current actor to a custom position (in relation to the height of the web player).
  - duration: This value determines the transform time in seconds. The minimum value is 0.2.

<div id="unityPlayer" style="width: 640px; height: 480px;">
</div>

<input type="button" value="Actor Transform1" onclick="Transform1()" class="button" />
<input type="button" value="Actor Transform2" onclick="Transform2()" class="button" />

Scale:<input type="text" id="txtScale" style="width:30px" />
Position X:<input type="text" id="txtX" style="width:30px" />
Position Y:<input type="text" id="txtY" style="width:30px" />
Duration:<input type="text" id="txtDuration" style="width:30px" />
<input type="button" value="Custom" onclick="Transform3()" 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.

Buttons with Pre-defined Settings

Copy the <input.../> lines (line 7 and line 8) 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.

Controls for Customizing Settings

Copy the Scale:<input.../> line to add a text-editing box in your web page for entering a desired size of the actor as a percentage value (100 means 100% size of the actor).
Copy the Position X:<input.../> line to add a text-editing box in your web page for entering a desired horizontal position of the actor as a percentage value (50 means the mid point of the player width).
Copy the Position Y:<input.../> line to add a text-editing box in your web page for entering a desired vertical position of the actor as a percentage value (50 means the mid point of the player height).
Copy the Duration:<input.../> line to add a text-editing box in your web page for entering a desired size of the actor (1 means 1 second).
Copy the last <input.../> line to the position where you want to embed the button in-between the <body> and </body> tags of your custom web page. This button will collect the values the viewer enters in the text-editing boxes listed above and then execute the transformation of the actor by calling the function defined in the head block.