< Back

Getting Started

UI Display Function

Loading Function

Text to Animated Function

Load Scripts form Text

Actor Function

Interaction Function

Advanced Function

Dragging and Resizing Player

In this sample, you may use CSS (Cascading Style Sheet) definitions to change the size of the web player by dragging the handles at the edges and corners of the player.

In addition, you can also drag the border of the player to wherever you want on your web page.

Note:

Please note that this sample code is only supported by the browsers on Windows OS. You need to test the result before publishing your custom web pages that have applied this sample code.

Controls Behaviors

This sample contains a player, and its behavior is:

Drag the eight controls on four sides and corners of the player to resize it.
Drag the border lines of the player to relocate it.
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" src="http://ctinteractive.reallusion.com/ctinteractive/dragresize.js"></script>
<style type="text/css" >
    .drsElement
    {
        position: absolute;
    }

    .drsMoveHandle
    {
        cursor: move;
    }

    .dragresize
    {
        position: absolute;
        width: 5px;
        height: 5px;
        font-size: 1px;
        background: #fff;
        border: 1px solid #333;
    }

    .dragresize-tl
    {
        top: -8px;
        left: -8px;
        cursor: nw-resize;
    }

    .dragresize-tm
    {
        top: -8px;
        left: 50%;
        margin-left: -4px;
        cursor: n-resize;
    }

    .dragresize-tr
    {
        top: -8px;
        right: -8px;
        cursor: ne-resize;
    }

    .dragresize-ml
    {
        top: 50%;
        margin-top: -4px;
        left: -8px;
        cursor: w-resize;
    }

    .dragresize-mr
    {
        top: 50%;
        margin-top: -4px;
        right: -8px;
        cursor: e-resize;
    }

    .dragresize-bl
    {
        bottom: -8px;
        left: -8px;
        cursor: sw-resize;
    }

    .dragresize-bm
    {
        bottom: -8px;
        left: 50%;
        margin-left: -4px;
        cursor: s-resize;
    }

    .dragresize-br
    {
        bottom: -8px;
        right: -8px;
        cursor: se-resize;
    }
</style>
<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/SampleCode11/display_playerresize.uctproject", {
                playAfter: 0,
                idleMotionUrl: "https://www.reallusion.com/crazytalk/Unity/samplecode/SampleCode11/Affirmative.uctidle"
            });
        });
        
        RLDrag();
        
        $(window).resize(function(){
            RLDrag();
        });
    });an>
    
    //Move and Change Web player Size
    
    function RLDrag() {        
        var dragresize = new DragResize('dragresize', {
            minWidth: 20, minHeight: 20, minLeft: 20, minTop: 10, maxLeft: document.body.clientWidth - 10
        });
        dragresize.isElement = function (elm) {
            if (elm.className && elm.className.indexOf('drsElement') > -1) return true;
        };
        dragresize.isHandle = function (elm) {
            if (elm.className && elm.className.indexOf('drsMoveHandle') > -1) return true;
        };
        dragresize.apply(document);
    }
</script>

Copy and paste the code in between the <head> and </head> tags of your custom web page.

Note:

The ability for dragging and resizing of the player is coded by an open source java script file (dragresize.js). The file is included on the 4th line of the above code:
<script type="text/javascript" src="http://ctinteractive.reallusion.com/ctinteractive/dragresize.js" ></script>

The CSS from <style type="text/css"> to </style> defines the player-embed type (absolute or relative), the handle positions, and the cursor appearances ... etc of the player and mouse cursor. You do not need to modify the codes within this block.
The purposes of the function:
- $(function (): This function defines the address, the position of the CrazyTalk Web Player in the custom web and loads and auto plays a default project (03+Sarcastic+Cat.uctproject); meanwhile, it also loads two more files (05+Scared+Boy.uctproject, Exhausted.uctidle) behind the scenes as it is playing the default project. It is also initializing the size and location of the web player by calling the function declared below.
- function RLDrag(): This function determines the transformation of the web player.

The adjustable code in the function:
$(function ()

Replace the below address of the CrazyTalk Web Player with the one defined by your self-hosted server.
https://www.reallusion.com/crazytalk/Unity/samplecode/CTWebPlayer.unity3d

Replace the below addresses of the *.uctproject and *.uctidle files with the ones you have uploaded your custom project and idle motion files to.
https://www.reallusion.com/crazytalk/Unity/samplecode/SampleCode11/display_playerresize.uctproject
https://www.reallusion.com/crazytalk/Unity/samplecode/SampleCode11/Affirmative.uctidle

Note:

If the custom actor files are uploaded to the identical server as the one where your custom web pages are, then simply change the entire addresses (http://...uctmodel) to the file names of the custom actors.
Otherwise, you must replace the entire address with the complete URL of the custom actor files.

playAfter: The value determines the seconds the player will wait before starting to play the true content of the project. A negative value will prevent playback after the project is loaded.

function RLDrag()

var dragresize = new DragResize('dragresize', {...});: This sub function declares the drag-able area and the minimum size of the player.
- minWidth: Change the value to set the minimum width of the player.
- minHeight: Change the value to set the minimum height of the player.
- minLeft: Change the value to set the leftmost position (unit: pixel) of the player away from the left edge of the browser page.
- minTop: Change the value to set the topmost position (unit: pixel) of the player away from the top edge of the browser page.
- maxLeft: Change the value to set the rightmost position (unit: pixel) of the player away from the right edge of the browser page. In this case, document.body.clientWidth - 10, will find the width of the browser page and subtract 10 pixels from the right most value.

Note:

To ensure correct operation, do not change the rest of the code lines in this function.

<div class="drsElement drsMoveHandle" id="unityPlayer" style="width: 320px; height: 240px; left: 700px; top: 100px; border: 5px solid black;">
</div>

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 for the style attribute:

width: and height: - Change the values to customize the initial size of the player.
left: and top: - Change the values to determine the initial position of the player from the top-left corner of the web page.
border: - Change the value to determine the border size (unit: pixel) of the player.

solid - The style of the border line for the player. It can be none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset and inherit (inherit from the parent element of the player).


dotted	dashed	solid	double	groove	ridge	inset	outset

black - The color of the border line for the player. It can be a predefined color name such as red, green, blue ... etc., or a color value in #ffffff, rgb(255, 255, 255) ... etc formats.