<html>
<head>
    <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/jquery.alphanumeric.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"
                });
            });

            $("#txtX").numeric();//set to accept numbers only
            $("#txtY").numeric();//set to accept numbers only
            $("#txtDuration").numeric({ allow: "." });//set to accept numbers and floating point
            $("#txtDuration").keyup(function (event) {
                ValidateFloat(this, $(this).val());
            });
        });

        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()
            });
        }

        //checking for multiple floating points
        function ValidateFloat(e, pnumber) {
            if (!/^\d+[.]?\d*$/.test(pnumber)) {
                var newValue = /^\d+[.]?\d*/.exec(e.value);
                if (newValue != null) {
                    e.value = newValue;
                }
                else {
                    e.value = "";
                }
            }
            return false;
        }
    </script>
</head>

<body>
    <table style="text-align:center;margin-left:auto; margin-right:auto;">
        <tr>
            <td>
                <div id="unityPlayer" style="width: 640px; height: 480px;">
                </div>
            </td>
        </tr>
        <tr>
            <td>
                <input type="button" value="Actor Transform1" onclick="Transform1()" class="button" />
                <input type="button" value="Actor Transform2" onclick="Transform2()" class="button" />
            </td>
        </tr>
        <tr>
            <td>
                Scale:<input type="text" id="txtScale" style="width:30px" />
                Position X(0~100):<input type="text" id="txtX" style="width:30px" />
                Position Y(0~100):<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" />
            </td>
        </tr>
    </table>
</body>
</html>