< Back

Getting Started

UI Display Function

Loading Function

Text to Animated Function

Load Scripts form Text

Actor Function

Interaction Function

Advanced Function

Mouse Events Example

In the Getting Mouse Events sample code, you learn how to get the mouse events and show the names of the events. You may make the most of these events to trigger certain functions you have learned in previous pages of sample code. In this example, you see how to make a background fade in or fade out, in 2 seconds, by clicking the left mouse button (clicking the middle or right mouse buttons does not bring any reaction to the player).

Please click on the player to observe the effect.

Control Behaviors

The player reacts to the mouse clicking event (left mouse button only) and shows or hides the foreground image logo.
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/SampleCode16/Interaction_mouse_event.uctproject", {
                playAfter: 0,
                idleMotionUrl: "https://www.reallusion.com/crazytalk/Unity/samplecode/SampleCode16/Affirmative.uctidle"
            });

            var ShowOrHide = false;

            player.loadForeground("https://www.reallusion.com/crazytalk/Unity/samplecode/SampleCode16/logo.png", {
                name: "Reallusion",
                zOrder: 0,
                alpha: 0,
                x: 0, y: 0, width: 20, height: 8
            });

            player.bind("click", function (event) {
                switch (event.button) {
                    case 0:
                        ShowOrHide = !ShowOrHide;
                        player.showForeground("Reallusion", ShowOrHide, 2);
                        break;
                    case 1:
                        break;
                    case 2:
                        break;
                    default:
                        break;
                }
            });
        });
    });

</script>

Copy and paste the codes in-between the <head> and </head> tags of your custom web page.
View the purposes of the player.loadProject method of the $(function () in the Getting Mouse Events page of sample code.
Add the Var ShowOrHide = false; line to declare a variable for setting the foreground image status to shown or hidden. The default value is false (hide the image).

Add the player.loadForeground function so that the foreground image can be pre-loaded when the player is being initialized.

player.loadForeground("https://www.reallusion.com/crazytalk/Unity/samplecode/SampleCode16/
logo.png", {
   name: "Reallusion",
   zOrder:0,
   x:0, y:0, width:20, height:8,
});

Note:

Please refer to the Loading Foregrounds page of sample code for more information about the attributes of the function.

Add two lines into the case 0 in the player.bind function:

case 0:
       ShowOrHide = !ShowOrHide;
       player.showForeground( "Reallusion", ShowOrHide, 2);
       break;

The ShowOrHide = !ShowOrHide; line inverts the variable value from true to false or from false to true.
The player.showForeground line thus will show or hide the foreground image in 2 seconds in order to create fade in or fade out effects.

Note:

Although the codes above merely assign the ability to show or hide the foreground according to the left-mouse-clicking event, you are free to add different functions you have learned in the other pages of sample code into these event cases so that these functions can be triggered by certain mouse events.

<div> id="unityPlayer" style="width: 640px; height: 480px;">
</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 after the width: and height: parameters in the first line to customize the size of the player.