-
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.
-
function
LoadForeground1(): 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.
-
function
LoadForeground2(): 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.
-
function
LoadForeground3(): 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.
https://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.
player.loadForeground("https://www.reallusion.com/crazytalk/Unity/samplecode/SampleCode7/FG_1.png", {
name: "Reallusion",
zOrder: 0,
action: "onClick1();",
x: 0, y: 0, width: 20, height: 8,
hotspotX: 100, hotspotY: 100, hotspotWidth: 100, hotspotHeight: 100,
loaded: function (status) {
player.showForeground("Reallusion", false, 0);
}
});
|
and
player.loadForeground("https://www.reallusion.com/crazytalk/Unity/samplecode/SampleCode7/FG_2.png", {
name: "C2CMarketplace",
zOrder: 1,
action: "onClick2();",
x: 70, y: 20, width: 22, height: 8,
hotspotX: 100, hotspotY: 100, hotspotWidth: 100, hotspotHeight: 100,
loaded: function (status) {
player.showForeground("C2CMarketplace", false, 0);
}
});
|
-
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: https://www.reallusion.com/crazytalk/Unity/samplecode/SampleCode7/FG_1.png
In the Second Method: https://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.
-
loaded: function (status) {
player.showForeground("name", false, 5.0);
}
-
"name": Replace the text within the quotation marks with the
alias names declared above. In this sample case,
Reallusion
and C2CMarketPlace.
-
true/false:
Set the value to true/false to show/hide the foreground image.
-
The number: The number is the duration time
(in seconds) for fading in or fading out the
foreground image
function
LoadForeground1, LoadForeground2
and LoadForeground3:
-
player.showForeground("name", false, 5.0)
-
"name": Replace the text within the quotation marks with the
alias names declared above. In this sample case,
Reallusion
and C2CMarketPlace.
-
true/false:
Set the value to true/false to show/hide the foreground image.
-
The number: The number is the duration time
(in seconds) for fading in or fading out the
foreground image
function
onClick1 and
onClick2:
-
Replace the below addresses of web sites with custom
ones to which you want to direct the viewers.
In the onClick1(): https://www.reallusion.com
In the onClick2(): https://www.reallusion.com/contentstore/
|