Version: 1.1 Copyright © 2014 Reallusion Inc. All rights reserved.

1

Table of Contents Overview ........................................................................................................3 Terminology ....................................................................................................3 CTWebPlayer Object ......................................................................................4 CTWebPlayer() ...........................................................................................4 .init() ............................................................................................................6 .setCameraMode() ......................................................................................9 Load data functions ...................................................................................... 11 .loadProject()............................................................................................. 11 .loadActor() ...............................................................................................12 .loadScript()...............................................................................................13 .loadScriptFromText() ................................................................................15 .loadMotion() .............................................................................................19 .loadIdleMotion() .......................................................................................21 .loadBackground() .....................................................................................21 .loadForeground() .....................................................................................23 .preLoadFiles() ..........................................................................................27 Playback controls and player settings ...........................................................29 .play() ........................................................................................................29 .stop()........................................................................................................29 .pause() .....................................................................................................30 .setLoop() ..................................................................................................30 .setVolume() ..............................................................................................30 .showProgressbar() ...................................................................................31 Content controls ...........................................................................................32 .showForeground() ....................................................................................32 .showBackground() ...................................................................................33 .showActor() ..............................................................................................33 .setLookat() ...............................................................................................33 .setLookatStrength() ..................................................................................34 .actorTransform() ......................................................................................35 .actorGaze() ..............................................................................................36 .setBackgroundColor() ..............................................................................38 Adding an event listener ...............................................................................39 .bind()........................................................................................................39 .unbind() ....................................................................................................41 Reference: ....................................................................................................42

2

Overview The CrazyTalk Interactive Plug-in provides an API (Application Programming Interface) to control the different run-time attributes by making function calls via JavaScript. The CrazyTalk Avatar API includes functions for playing, pausing, skipping to a certain time of the project, using different content, showing or hiding the UI components, converting dynamic text into animation scripts through a server, and many other useful functions.

Terminology CrazyTalk Interactive Plug-in: This plug-in is specifically installed for, and collaborating with CrazyTalk 7.31 or above. You may use this plug-in to export default, or custom assets from the content library of CrazyTalk. Unity Web Player: This player is provided by Unity. It is a browser plug-in that allows you to view, inside a browser, 3D worlds/games created with Unity. CrazyTalk Web Player (CTWebPlayer.unity3d): This player is provided by Reallusion and it must be mounted into the Unity Web Player for viewing and playing projects, actors, idles, scripts and other assets exported from CrazyTalk 7.31. jQuery.js: It is a cross-platform JavaScript library designed to simplify the client-side scripting of HTML. It is a free, open source software, licensed under the MIT License. UnityObject2.js: It is a JavaScript that simplifies the Unity content embedded into the HTML. It allows you to customize the installation process. Having a custom install UI that matches your game and website will create a more engaging and pleasurable experience for the enduser. It has functions that detect the Unity Web Player plug-in, initiate its installation and embedded Unity content. CTWebPlayer.js: This is a JavaScript file that simplifies the settings of the CrazyTalk Web Player and allows you to customize the behavior. The main API functions throughout this document are all declared within this file. Moreover, the CTWebPlayer.js must work with jQuery.js and UnityObject2.js. 3

CTWebPlayer Object Example: This example is a fundamental one. It initializes and embeds a CrazyTalk web player into a custom web page. Initial CT Web Player var player = new CTWebPlayer(); $(function () { player.init($("#unityPlayer"), function () { player.loadProject("myproject.uctproject"); }); });

CTWebPlayer() Description: This function is a constructor for the CTWebPlayer object. It must be put within the code line var player = new CTWebPlayer(); in every custom web page to declare an object for accessing the API functions. 4

.CTWebPlayer( [settings] ) settings Type: PlainObject Configuration of the CTWebPlayer object. This setting is the same as UnityObject2, reference UnityObject2 for more detail. The following settings are used in CTWebplayer object. Parameters: enableGoogleAnalytics (default: true) Type: Boolean Notifies Reallusion about CTWebPlayer usage via Google Analytics. params Type: PlainObject Extra parameters to be used when embedding the Player. Those are useful to customize the experience: logoimage (default: CrazyTalk Interactive logo) Type: String The path to a custom logo image, the logo image is drawn centered within the web player content display region during loading. The supported file format is PNG only.

The default CrazyTalk Interactive Plug-in logo is shown in the illustration below. If you want to customize the image, then you need to define the custom image through the logoimage parameter:

Example: 5

var player = new CTWebPlayer();

Example: Specify enableGoogleAnalytics param to disable the google analytics. var player = new CTWebPlayer({ enableGoogleAnalytics:

false

});

Example: Customize a logo image. var player = new CTWebPlayer({ params: { logoimage: "image/mylogo.png" } });

.init() Description: This function initializes the CrazyTalk Web Player. It must be executed when the DOM (Document Object Model) is ready to be used. All other functions in this document must be called after the CrazyTalk Web Player has been initialized. .init( container, [handler] ) container Type: Object The DOM element serving as a container for the CTWebplayer. handler Type: Function A function to be executed after the CTWebPlayer is ready.

Example: var player = new CTWebPlayer(); $(function () { player.init($("#unityPlayer"), function () { player.loadProject("myproject.uctproject"); }); 6

});

.init( container, [settings] ) container Type: Object The DOM element serving as a container for the CTWebplayer. settings Type: PlainObject A set of key/value pairs that configures the loadProject request. All settings are optional. playerUrl Type: String Specify URL of the CTWebPlayer.unity3d file. Default URL is directed to Reallusion website. handleInstall (default: true) Type: Boolean Turning on this setting will let CTWebPlayer.js handle Unity Installation status. loaded Type: Function( progress ) A function to be executed after the CTWebPlayer is ready. Callback function that will receive information about the unity plug-in. See function observeProgress of UnityObject2 for more details. error Type: Function( progress ) Callback function while initializing unity plug-in fails. See function observeProgress of UnityObject2 for more detail.

Please note that if you set the handleInstall parameter to true, then the CTWebPlayer object will handle all error conditions. If the Unity plugin is not installed yet, then it will show a button directing users to install the Unity Web Player as shown below:

7

If a user views your custom website or pages on an unsupported browser (e.g. mobile browser on iOS or Android), then it will display the error message shown below.

Example: Using playerUrl to specify the CTWebPlayer.unity3d file when self-hosting webpages var player = new CTWebPlayer(); $(function () { player.init($("#unityPlayer"), { playerUrl: "http://ctinteractive.reallusion.com/ctinteractive/1.0/CTWebPlayer.unity3d", loaded: function(){ player.loadProject("myproject.uctproject");} 8

}); });

.setCameraMode() Description: Set camera perspective. .setCameraMode( mode ) mode (default: “wideAngle”) Type: String The possible values are: “wideAngle”, “standard” and “telephoto”. You can set “wideAngle” to increase dimensional sensation, which is identical to CrazyTalk7. Set “standard” to normal, or set “telephoto” to use the telephoto lens effect.

Wide Angle Mode

Standard Mode

9

Telephoto Mode

Example: var player = new CTWebPlayer(); $(function () { player.init($("#unityPlayer"), function () { player.setCameraMode("telephoto"); }); });

10

Load data functions .loadProject() Description: Load a project (*.uctproject) exported from CrazyTalk 7.31. A project file contains an actor, a script (including motion and audio), a global transformation, and a background image. .loadProject( url, [settings] ) url Type: String Project file URL ( e.g. http://www.reallusion.com/project.uctproject ) settings Type: PlainObject A set of key/value pairs that configure the loadProject request. All settings are optional. playAfter (default: -1) Type: Number Auto-play the project after it is loaded. If the value is a negative number, then the auto-play is turned off. Otherwise the project will start the player after the specified number of seconds. showActor (default: true) Type: Boolean Show actor after the project is loaded. showBackground (default: true) Type: Boolean Show background after the project is loaded. idleMotionUrl Type: String Set an idle motion URL for the actor. ( e.g. http://www.reallusion.com/myidle.uctidle ) userData Type: var This parameter was implemented to permit users to pass user-specific data. An object containing any data that needs to be passed to the callback when the project is fully loaded.

11

loaded Type: Function( status, userData ) A function to be executed after the project is loaded. This function receives two arguments : status, the value of 1 for the status represents a successful loading, while a value of 0 represents a failed loading. userData, user-specific data.

Example: player.loadProject( "myproject.uctproject"), { playAfter: 0, showActor: true, idleMotionUrl: "Friendly.uctidle", loaded: function(status){ console.log("Project loaded!");} });

.loadActor() Description: Load an actor (*.uctmodel) exported from CrazyTalk 7.31. .loadActor( url, [settings] ) url Type: String Actor file URL ( e.g. http://www.reallusion.com/actor.uctmodel ) settings Type: PlainObject A set of key/value pairs that configure the loadActor request. All settings are optional. showActor (default: true) Type: Boolean Show actor after the actor is loaded. idleMotionUrl Type: String 12

Set an idle motion URL for the actor. ( e.g. http://www.reallusion.com/myidle.uctidle ) clearScript (default:true) Type: Boolean If the value is true, then clear all Motion Script data while loading a new actor. userData Type: var This parameter was implemented to permit users to pass user-specific data. An object containing any data that needs to be passed to the callback when the actor is fully loaded. loaded Type: Function( status, userData, info ) A function to be executed after the actor is loaded. The function receives three arguments, status, the value of 1 for the status represents a successful loading, while a value of 0 represents a failed loading. userData, user-specific data. info.message, the returned information.

Example: player.loadActor( "myActor.uctmodel"), { showActor: true, idleMotionUrl: "Friendly.uctidle", loaded: function(status){ console.log("Actor loaded!");} });

.loadScript() Description: Load a script file (*.uctscript) exported from CrazyTalk 7.31. A script file contains actor motion and audio data. This function must be called after a project or an actor file has been loaded. .loadScript( url, [settings] ) 13

url Type: String Script data URL ( e.g. http://www.reallusion.com/myscript.uctscript ) settings Type: PlainObject A set of key/value pairs that configure the loadScript request. All settings are optional. playAfter (default: -1) Type: Number Auto-play the script after it is loaded. If the value is a negative number, then the auto-play is turned off. Otherwise the script will start the player after the specified number of seconds. name Type: String Unique name of this script. This name can be called in the Play function. clearScript (default:true) Type: Boolean If the value is true, then clear all Motion Script data while loading a new actor. userData Type: var This parameter was implemented to permit users to pass user-specific data. An object containing any data that needs to be passed to the callback when the script is fully loaded. loaded Type: Function( status, userData, info ) A function to be executed after the script is loaded. The function receives three arguments: status, the value of 1 for the status represents a successful loading, while a value of 0 represents a failed loading. userData, user-specific data. info.message, returned information.

Example: player.loadScript( "myScript.uctscript"), { playAfter: 0, 14

loaded: function(status){ console.log("Script loaded!");} });

.loadScriptFromText() Description: Convert text into animation scripts in real-time. .loadScriptFromText( text, [settings] ) text Type: String Plain text. settings Type: PlainObject A set of key/value pairs that configure the loadScriptFromText request. All settings are optional. ttsVoice (default: "usendlishfemale") Type: String This value determines the TTS voice. ex: "usenglishfemale", "usenglishmale". See the below list for available languages and voices. ttsSpeed (default: 0) Type: Number This value determines the speed of the output voice. Possible values are from -5(slower) to 5(faster), 0 is the default speed. ttsPitch (default: 0) Type: Number This value determines the pitch of the output voice. Possible values are from -100(lower) to 100(higher), 0 is the default pitch. automotion (default: "default") Type: String This value determines the auto-motion of the speech. You may apply different animation styles to match the attitude of your voice to your character. ex: Broadcast_F, Broadcast_M, Explain_F, Explain_M, Service_F. Service_M. See the below list for available auto motion styles.

15

strength (default: "normal") Type: String Set this parameter to determine the strength of the auto motion. The possible values are “mild”, “normal” and “strong”. name Type: String Unique name of this script. This name can be called in the play function. clearScript (default: true) Type: Boolean If the value is true, then clear all Motion Script data when loading a new actor. userData Type: var This parameter was implemented to permit users to pass user-specific data. An object containing any data that needs to be passed to the callback when the script is converted and fully loaded. playAfter (default: -1) Type: Number Auto-play the script after it is loaded. If the value is a negative number, then the auto-play is turned off. Otherwise the script will start the player after the specified number of seconds. loaded Type: Function( status, userData, info ) A function to be executed after the script is converted and loaded. The function receives three arguments: status, the value of 1 for the status represents a successful loading, while a value of 0 represents a failed loading. userData, user-specific data. info.message, the returned information.

List of available TTS Voice names and alias: Name

Alias

US English Female (default)

usenglishfemale

US English Male

usenglishmale 16

UK English Female

ukenglishfemale

UK English Male

ukenglishmale

Australian English Female

auenglishfemale

US Spanish Female

usspanishfemale

US Spanish Male

usspanishmale

Chinese Female

chchinesefemale

Chinese Male

chchinesemale

Hong Kong Cantonese Female

hkchinesefemale

Taiwan Chinese Female

twchinesefemale

Japanese Female

jpjapanesefemale

Japanese Male

jpjapanesemale

Korean Female

krkoreanfemale

Korean Male

krkoreanmale

Canadian English Female

caenglishfemale

Hungarian Female

huhungarianfemale

Brazilian Portuguese Female

brportuguesefemale

European Portuguese Female

eurportuguesefemale

European Portuguese Male

eurportuguesemale

European Spanish Female

eurspanishfemale

European Spanish Male

eurspanishmale

European Catalan Female

eurcatalanfemale

European Czech Female

eurczechfemale

European Danish Female

eurdanishfemale

European Finnish Female

eurfinnishfemale

European French Female

eurfrenchfemale

European French Male

eurfrenchmale

European Norwegian Female

eurnorwegianfemale

European Dutch Female

eurdutchfemale

European Polish Female

eurpolishfemale

European Italian Female

euritalianfemale

European Italian Male

euritalianmale

European Turkish Female

eurturkishfemale 17

European Turkish Male

eurturkishmale

European German Female

eurgermanfemale

European German Male

eurgermanmale

Russian Female

rurussianfemale

Russian Male

rurussianmale

Swedish Female

swswedishfemale

Canadian French Female

cafrenchfemale

Canadian French Male

Cafrenchmale

AutoMotion Styles for Human characters: Style Template Name

Alias

Service Female

Service_F

Broadcast Female

Broadcast _F

Explain Female

Explain _F

Service Male

Service_M

Broadcast Male

Broadcast_M

Explain Male

Explain_M

AutoMotion Styles for Cartoon characters: Style Template Name

Alias

Apologizing

Apologizing

Flirting

Flirting

Gossip

Gossip

Roaring

Roaring

Shy

Shy

Weeping

Weeping

Whispering

Whispering

Yes_Happy

Yes_Happy

Yes_Unhappy

Yes_Unhappy

Example: Using the loadScriptFromText function to convert text into animated scripts. 18

player.loadScriptFromText( "Hello, How are you?", { ttsVoice: "usenglishfemale", automotion: " Broadcast_F ", playAfter: 0 });

Example: Using the loadScriptFromText function to convert text into animated scripts, and immediate playback. player.loadScriptFromText ( "Hello, How are you?", { ttsVoice: "usenglishfemale", playAfter: -1, automotion: " Broadcast_F ", loaded: function( status, userdata, info ) { if ( status == 1 ) { player.play( 0 ); } } });

.loadMotion() Description: Load a motion file (*.uctmotion) exported from CrazyTalk 7.31. This function must be called after a project or an actor file has been loaded. .loadMotion( url, [settings] ) url Type: String Motion file URL ( e.g. http://www.reallusion.com/mymotion.uctMotion ) settings Type: PlainObject A set of key/value pairs that configure the loadMotion request. All settings are 19

optional. playAfter (default: -1) Type: Number Auto-play the motion after it is loaded. If the value is a negative number, then the auto-play is turned off. Otherwise the motion will start the player after the specified number of seconds. name Type: String Unique name of this motion. This name can be called in the play function. clearScript (default: true) Type: Boolean If the value is true, then clear all Motion Script data while loading a new actor. userData Type: var This parameter was implemented to permit users to pass user-specific data. An object containing any data that needs to be passed to the callback when the motion is fully loaded. loaded Type: Function( status, userData, info ) A function to be executed after the actor is loaded. The function receives three arguments: status, a value of 1 for the status represents a successful loading while, a value of 0 represents a failed loading. userData, user-specific data. info.message, the returned information.

Example: player.loadMotion( "myMotion.uctmotion"), { playAfter: 0, loaded: function(status){ console.log("Motion loaded!");} });

20

.loadIdleMotion() Description: Load an idle motion file (*.uctidle) exported from CrazyTalk 7.31. This function must be called after a project or an actor file has been loaded. .loadIdleMotion( url, [handler] ) url Type: String Project file URL ( e.g. http://www.reallusion.com/myidle.uctidle ) handler Type: Function( status ) A function to be executed after the idle motion is loaded. The function receives one argument, status. A value of 1 for the status represents successful loading while a value of 0 represents a loading failure.

Example: player.loadIdleMotion( "myIdle.uctidle"), function(status){ console.log("Idle loaded!");} });

.loadBackground() Description: Load a background image. JPEG and PNG image formats are supported. This function must be called after a project or an actor file has been loaded. .loadBackground( url, [settings] ) url Type: String Background image URL ( e.g. http://www.reallusion.com/mybackground.jpg ) settings Type: PlainObject A set of key/value pairs that configure the loadBackgound request. All settings are optional. alpha (default: 1.0) Type: Float Set the alpha value of the background image, the value is from 0.0 to 1.0. fit (default: “fit”) 21

Type: String Set fitting mode of background image. The possible values are “fit” or “fill”. userData Type: var This parameter was implemented to permit users to pass user-specific data. An object containing any data that needs to be passed to the callback when the background is fully loaded. loaded Type: Function( status, userData ) A function to be executed after the background is loaded. The function receives two arguments: status, the value of 1 for the status represents a successful loading while 0 value represents a loading failure. userData, user-specific data.

Example: player.loadBackground( "myBackground.jpg", { alpha: 1.0, fit: "fit", loaded: function(status){ console.log("Background image loaded!") });

Example: Using loadBackground function to show background images with fade transition effect. player.loadBackground( "A.jpg", { alpha: 1.0 } );

//after one event, load new Background with fade effect player.loadBackground( "B.jpg", { alpha: 0.0, loaded: function(status) { player.showBackground( true, 1.0f ); } } );

22

.loadForeground() Description: Load an image into a foreground container. JPEG and PNG image formats are supported. You can have more than one foreground container in the player. The player can load up to 10 foreground containers at the same time. .loadForeground( url, [settings] ) url Type: String Foreground image URL ( e.g. http://www.reallusion.com/myforeground.jpg ) settings Type: PlainObject A set of key/value pairs that configure the loadForegound request. All settings are optional. name Type: String Unique name of the foreground image. This name will be used in showForeground function. zOrder (default: 0) Type: Number The unique value that specifies the layer order of a foreground container. A container with a higher value will be put on the higher layer and vice versa. The values range from 0 to 9. alpha (default: 1.0) Type: Float Set the alpha value of the foreground container, the value is from 0.0 to 1.0. fit (default: “fit”) Type: String Set the fitting mode of foreground image. The possible values are “fit” or “fill”. userData Type: var This parameter was implemented to permit users to pass user-specific data. An object containing any data that needs to be passed to the 23

callback when the foreground is fully loaded. loaded Type: Function( status, userData ) A function to be executed after the foreground is loaded. The function receives two arguments: status, the value of 1 for the status represents a successful loading, while a value of 0 represents a failed loading. userData, user-specific data. x (default:0.0) Type: Float Relative x position (in percentage) of the container on the player viewport, the value is from 0.0 (left) to 100.0 (right). y (default:75.0) Type: Float Relative y position (in percentage) of the container on the player viewport, the value is from 0.0 (top) to 100.0 (bottom). width (default:100) Type: Float Define the relative width (in percentage) of the foreground container on player, the value is from 0.0 to 100.0 (player width). height (default:25.0) Type: Float Define the relative height (in percentage) of the foreground container on player, the value is from 0.0 to 100.0 (player height). linkUrl Type: String Provide url to redirect the user to a given website when the user clicks in the defined hotspot area. action Type: String Provide JavaScript code to execute when users click in the reaction area. If the parameter linkUrl is specified, this parameter will be ignored. hotspotX (default:0.0) Type: Float 24

Relative x position (in percentage) of the reaction area on the foreground container, the value is from 0.0 (left) to 100.0 (right). hotspotY (default:0.0) Type: Float Relative y position (in percentage) of the reaction area on the foreground container, the value is from 0.0 (top) to 100.0 (bottom). hotspotWidth (default:100.0) Type: Float Relative width (in percentage) of the reaction area on the foreground container, the value is from 0.0 to 100.0 (width of the foreground container). hotspotHeight (default:100.0) Type: Float Relative height (in percentage) of the reaction area on the foreground container, the value is from 0.0 to 100.0 (height of the foreground container).

The relation between the container and the player

25

The relation between the hotspot (reaction area) and the container

Example: player.loadForeground( "sunset.jpg", {alpha: 0.5});

Example: player.loadForeground( "sunset.jpg", { name: "sunset", zorder: 1, x: 0, y: 80, width: 100, height: 20 });

Example: player.loadForeground( "sunset.jpg", { name: "sunset", linkUrl: "http://www.reallusion.com" });

Example: player.loadForeground( "sunset.jpg", { name: "sunset", linkAction: "console.log('Click link!');", 26

x: 0, y: 80, width: 100, height: 20, hotspotX: 0, hotspotY: 0, hotspotWidth: 100, hotSpotHeight: 100 });

.preLoadFiles() Description: This function downloads project, actor, idle motion, motion, script or image files into cache behind the scene. .preLoadFiles( urls, [settings] ) urls Type: Array Array of URLs for the downloadable files. settings Type: PlainObject A set of key/value pairs that configure the preLoadFile request. All settings are optional. thread (default: 2) Type: Number The number for simultaneous downloads. loaded Type: Function( status ) A function to be executed after the defined files are downloaded. The function receives one arguments, status. A value of 1 for the status represents successful loading while 0 is for loading failure.

Example: player.init($("#unityPlayer"), function () { var urls = ["myProject.uctproject", Exhausted.uctidle"]; player.preLoadFiles(urls, { thread: 2, 27

loaded: startPlay }); }); function startPlay() { player.loadProject("myProject.uctproject", { playAfter: 0}); }

28

Playback controls and player settings .play() Description: Plays the currently cached/loaded project, script or motion. .play( [delay] ) delay Type: Float (default: 0) Seconds for delaying the playback.

Description: Plays a specific loaded Script or Motion. .play(name, [delay] ) name Type: String The name of the Script or Motion. The value of this parameter must be given in the function loadScript, loadScriptFromText or loadMotion. delay Type: Float (default: 0) Seconds for delaying the playback.

Example: player.play();

Example: player.play("script1", 0);

.stop() Description: Stops and cancels playing of the current project, script or motion. .stop( [delay] ) delay Type: Float (default: 0) Seconds for time stop delay.

29

Example: player.stop();

.pause() Description: Pauses the currently playing project, script or motion. .pause( [delay] ) delay Type: Float (default: 0) Seconds for pause delay.

Example: player.pause();

.setLoop() Description: This function indicates whether the player should repetitively playback or not. .setLoop( loop ) loop Type: Boolean (default: false) Loop playback or not.

Example: player.setLoop(true);

.setVolume() Description: Sets the volume. Accepts an integer between 0 and 100. 30

.setVolume( volume ) volume Type: Integer Sets the volume. Acceptable values are between 0 and 100.

Example: player.setVolume(50);

.showPlaybar() Description: Set to show or hide the playbar of the player. .showPlaybar( [show] ) show Type: Boolean (default:true) Show or hide the palybar.

Example: player.showPlaybar(false);

.showProgressbar() Description: Set to show or hide the load progress indicator when files are being loaded. .showProgressbar( [show] ) show Type: Boolean (default:true) Show or hide the load progress indicator (the number in the center).

31

Example: player.showProgressbar(false);

Content controls .showForeground() Description: Show or hide a specified foreground image. .showForeground( name, show, [duration] ) name Type: String The value of this parameter must be given in the function loadForeground. show Type: Boolean (default:true) Show or hide the foreground image. duration Type: Float (default:0.0) Seconds to fade in or fade out the specified foreground image.

Example: player.showForeground("sunset", false, 1.0);

32

.showBackground() Description: Show or hide the current background image. .showBackground( show, [duration] ) show Type: Boolean Show or hide the background image. duration Type: Float (default:0.0) Seconds to fade in or fade out the current background image.

Example: player.showBackground(false, 1.0);

.showActor() Description: Show or hide the current actor. .showActor( show, [duration] ) show Type: Boolean Show or hide the actor. duration Type: Float (default:0.0) Seconds to fade in or fade out the current actor.

Example: player.showActor(false, 1.0);

.setLookat() Description: Set the look-at mode of actor. Please note that the look-at mode will stop during 33

any motion evoked by the actorGaze() function. .setLookat( mode ) mode Type: String Set this parameter to determine the look-at mode of the actor. The possible values are “none”, “player” and “screen”.  none: The actor does not look at the cursor.  player: The actor looks at the cursor within the player.  screen: The actor looks at the cursor within the entire screen.

Example: player.setLookat("screen");

.setLookatStrength() Description: Set the strength for the look-at behavior. .setLookatStrength( mode ) mode Type: String Set this parameter to determine the look-at strength of the actor. The possible values are “mild”, “medium” and “strong”.  mild: The actor look at the cursor with weaker facial feature movements. This is recommended to for use with real human actors  medium: The actor looks at the cursor with normal facial feature movements.  strong: The actor looks at the cursor with exaggerated facial feature movements.

Example: player.setLookatStrength("medium");

34

.actorTransform() Description: Instantly move and scale the current actor for a specified duration. .actorTransform( settings ) settings Type: PlainObject A set of key/value pairs that configure the actorTransform request. All settings are optional. positionX Type: Float Set the actor's relative x position (in percentage) on the player viewport, the value is from 0.0 (left) to 100.0 (right). positionY Type: Float Set the actor's relative y position (in percentage) on the player viewport, the value is from 0.0 (left) to 100.0 (right). scale Type: Float ( default:100 ) Set the size of actor as a percentage value. The values are positive numbers. duration ( default:0 ) Type: Float The period of time in second for the actor to transform.

Note:  Applying a series of these functions may cause an issue that will result in only the last function being executed, unless the duration of the previous ones are set to 0 seconds.  If the actor in a project has a global transform animation, then it will be removed after this function is executed, and the transformation will not be retrieved again unless the entire web page is reloaded.

Example: player.actorTransform( { positionX: 80, positionY: 70,

35

duration: 3.0 });

Example: If you put the actorTransform functions in sequence, only the last one will be executed. player.actorTransform( { positionX: 30, positionY: 50, duration: 5.0 }); player.actorTransform( { positionX: 80, positionY: 70, duration: 5.0 });

.actorGaze() Description: Set the actor to look in a specified direction. The look-at mode will stop during the motion of the actorGaze() function. .actorGaze( settings ) settings Type: PlainObject A set of key/value pairs that configure the actorGaze request. All settings are optional. degree Type: Float This value determines the direction for the current actor to stare. The possible values are from 0 to 360. A 0 (or 360) degree causes the actor to stare straight up; while values of 90, 180 and 270 have the actor to stare towards the right, bottom and left sides of the player respectively. radius Type: Float Level of gaze. The possible values are from 0 to 100. duration Type: Float Duration for the actor to stare in second.

36

Staring direction diagram

Staring Radius

Example: player.actorGaze( { degree: 90, radius: 100, duration: 3.0 });

37

.setBackgroundColor() Description: Set the color of the background. .setBackgroundColor( color ) - hexadecimal color Type: String The possible value can be in hexadecimal format. (e.g. #0033FF)

Example: player.setBackgroundColor( "#0033ff" );

.setBackgroundColor( color ) - RGB color Type: PlainObject The object must be composed of R, G, B values. (e.g. { r:0, g:33, b:255 } )

Example: player.setBackgroundColor( { r: 0, g: 33, b: 255 });

38

Adding an event listener .bind() Description: Add a listener for a specific event. Every event can be bound to only one function. .bind( event, handler ) - for mouse events event Type: String This string value determines the mouse event to be bound. The possible values are “mousedown”, “mouseup”, “mousemove”, “click” and “dbclick”. handler Type: Function(eventObject) A function to be called if the event happens. The function will receive a mouse event object, where several attributes are included: button Type: Number This value is used to indicate which mouse button changed state. -1: No button pressed. 0: Left mouse button pressed. 1: Middle mouse button pressed. 2: Right mouse button pressed. shiftKey Type: Boolean This attribute indicates whether the 'shift' key was pressed as the event occurred. ctrlKey Type: Boolean This attribute indicates whether the 'ctrl' key was pressed as the event occurred. clientX Type: Number The horizontal coordinate of the cursor at which the event occurred relative to the DOM implementation's client area. clientY Type: Number The vertical coordinate of the cursor at which the event occurred relative 39

to the DOM implementation's client area.

Example: player.init($("#unityPlayer"), function () { player.bind("mousemove", function (event) { console.log("x:"+event.clientX+" y:"+event.clientY); }); });

.bind( event, handler ) - for player status event event Type: String This string value determines the player status event to be bound. The value can only be “playerstatus”. handler Type: Function( eventObject } A function to be called if the event happens. The function will receive the player status event object, in which several attributes are included: status Type: String The current status of the player. The possible values are “playing”, “stop”, “startplay”, “pause” and “eof”. url Type: String The url of current project, script or motion during playback. time Type: Float The current seconds during playback. The value can be 0 when then status is “stop”. length Type: Float The total seconds of the project, script or motion.

Example: 40

player.init($("#unityPlayer"), function () { player.bind("playerstatus", function (event) { console.log( "staus:"+event.status+" current:"+event.time+ " length:"+event.length); }); });

.unbind() Description: Remove a specified listener of an event. .unblind( event ) event Type: String This string value determines the mouse and player status events to be unbound, The possible values are “mousedown”, “mouseup”, “mousemove”, “click”, “dbclick”, and “playerstatus”.

Example: player.unbind("mousemove");

41

Reference: CrazyTalk Avatar API functions are based on Jquery and UnityObject2. For more information about jQuery and UnityObject2, please refer to the following links: 

jQuery



Working with UnityObject2

42