Interaction Function

Advanced Function

Loading Foregrounds

In this sample, you may use the loadForeground function to toggle and load different
foregrounds
by pressing buttons with specific behaviors. Furthermore, you may optionally use the
showForeground function to show/hide the foreground.
It is very useful if you want to place an image of your custom logo
on the player. Furthermore, these foreground images can be assigned with
addresses (URL) so that the viewers are able to be directed to
certain web pages you want them to see. Copy and paste the code to your custom web page
to have a custom foreground image while the actor is talking.

Using the loadForeground and showForeground Functions

Controls Behaviors

This sample contains 3 buttons, their behaviors are:

Click the first button, FG1, to fade the first foreground image (FG1.png)
in, in one second, while fade the second foreground image (FG2.png)
out, in 0 second.

Click the second button, FG2, to fade the first foreground image
(FG1.png) out, in two seconds, while fade the second foreground image
(FG2.png) out, in 2 seconds.

Click the third button, FG1+FG2, to show both foreground images
instantly.

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 a default
actor (Foregrounds.uctmodel) with an assigned
idle motion (CTDefWebPreview.uctidle) once
your page is opened. This function is a must because you need to have an actor before loading
a background image.

functionLoadForeground1(): This
function makes the foreground image, named Reallusion, fade in in 1 second; while
fading out the other foreground image, named C2CMarketPlace, in 0 seconds, which means it will be hidden.

functionLoadForeground2(): This
function make the foreground image, named Reallusion, fade out in 2 seconds; while
fading in the other foreground image, named C2CMarketPlace, in 2 seconds.

functionLoadForeground3(): This
function makes the foreground images, named Reallusion and C2CMarketPlace, fade in in 0 seconds, which means they are set to visible.

function
onClick1(): This function opens a specified link with a new browser page.
It is called by the action parameter within the
default function.

function
onClick2(): This function opens a specified link with a new browser page.
It is called by the action parameter within the
default function.

The adjustable codes in the functions:$(function ()

Replace the below address of the CrazyTalk Web Player with the one within your self-hosting
server.http://www.reallusion.com/crazytalk/Unity/samplecode/CTWebPlayer.unity3d

player.loadActor(){...}:
For more information about the modification method for the loading a default
actor function, please refer to the
Loading Actors section.

player.loadForeground:
This method loads an image as a foreground. By
setting the parameters, you are able to determine
the name, z-order, position and initial status when
the image is loaded. Copy and paste this method the
same times as the number of the foreground images
you intend to have on the player.
*In this page,
there are two logo images added.

Replace the below addresses of the *.jpg or
*.png files with the ones where you have uploaded your custom
foreground images.In the First Method: http://www.reallusion.com/crazytalk/Unity/samplecode/SampleCode7/FG_1.pngIn the Second Method: http://www.reallusion.com/crazytalk/Unity/samplecode/SampleCode7/FG_2.png

Note:

The compatible image formats are: *.jpg, *.jpeg, and *.png.

name: Assign a instance alias name for the loaded image,
in these two methods,
Reallusion and C2CMarketplace.
These names will be used throughout the entire code instead of using the
long and complicated addresses of the images.

zOrder (0~9): This value determines the z-order of the
foreground images, especially when they are overlapping
with each other.

action: The function after this parameter will be to call functions. In these
two methods, onClick1() and
onClick2() functions are called (declared later).

x, y, width and height: These values determine the
position and size of the container for the image. They are defined as a ratio percentage of the web player.

Note:

Please note that the resolutions of the container and the image
are not necessarily identical.

hotspotX, hotspotY, hotspotWidth and hotspotHeight: The
position and the size of the reaction area of the container that is able to receive the mouth action. They are
in percentage to the container.