< Back

Getting Started

UI Display Function

Loading Function

Text to Animated Function

Load Scripts form Text

Actor Function

Interaction Function

Advanced Function

Page Structure and Basic Workflow

In this page, the page structures for the other pages of sample code (from 2 to 17) are described. You need to read this page in order to be familiar with their appearances.

Page Structure

The basic page structure is shown in the illustration below:

	1: Sample Code Title	The sample code title is put here.
	2: Goal and Descriptions	The goal of the sample code is described here.
	3: Sample Playback View	A web player is put here and you may playback the sample project to observe the result.
	4: Control Behavior	This section explains the goals of the sample and the behaviors of the controls in the page.
	5: Codes in <head> </head> Tags, Proceeding Steps and Notifications	The codes that must be pasted into your <head> </head> tags in your custom web pages.
	6: Codes in <body></body> Tags, Proceeding Steps and Notifications	The codes that must be pasted into your <body></body> tags in your custom web pages.

Note:

Please refer to the Source Code of Sample Code 2 to get the full view of the most fundamental web page embedded with a CrazyTalk Web Player.

Also, refer to the API document for more details about the functions that are shown or not shown in these sample code pages.

Basic Workflow

Getting and Allocating Files from CrazyTalk 7

Make sure your CrazyTalk 7 Pro has been updated with the Extension Plug-in.
Launch CrazyTalk 7 Pro and create a new project.
Export the project and you will get .uctProject, .uctModel, .uctScript and .uctMotion files.
Allocate these files to the desired web server.

Note:

Please refer to the CrazyTalk 7 Online Help if you need more information about:
- Creating a custom project.
- Exporting project.
If the files exported from CrazyTalk 7 Pro and your custom web pages are going to be allocated and uploaded to different servers, then it is highly suggested that you:
- obtain the addresses (URL) of these files and save the addresses into a text file (.txt) for further usage.

Copying and Pasting Sample Codes

Open the desired page of sample code (source for copying).
Prepare a web page (.htm or .html) file and open it with your favorite text editor (destination for pasting).
Copy the code within the <head> and </head> tags (the 4th item mentioned in the table at the beginning of this page) from the source page.
Paste the code in-between the <head> and </head> tags of the web page opened in the text editor.
Customize the codes just pasted in the <head> and </head> tags of your custom web page.
Copy the code within the <body> and </body> tags (the 5th item mentioned in the table at the beginning of this page) from the source page.
Paste the codes to your desired position for displaying the web player (the 3rd item mentioned in the table at the beginning of this page) in-between the <body> and </body> tags of the web page opened in the text editor.
Customize the code just pasted inside the <body> and </body> tags of your custom web page.

Note:

In these steps, the mostly modified codes are the paths of the files you exported from CrazyTalk 7 or the addresses (URL) you have saved in the text file mentioned earlier in this page.
Because the customizable codes are different by pages of sample code, they will be described in individual pages.
Important! Do not change any codes that are not mentioned in each page of sample code unless you are a script programmer or very familiar with the programming language.

Other Critical Codes

In each page of the sample code, there are some common codes that contain certain meanings. They can not be missing in the code of your web pages in order to ensure the correctness of the embedding results.

In-between the block:

This line includes the jquery js file, which contains some script codes.
You do not need to adjust this line unless the address name is changed.

This line includes java codes that the Unity Player needs.
You do not need to adjust the line unless the address name is changed.

This line includes java codes that the CrazyTalk Web Player needs.
This line shall not be modified unless the address name is changed.
Please refer to the Self-hosting and Updating CrazyTalk Web Player section for more information about how and when you need to modify this line.

        player.playerUrl = "https://www.reallusion.com/crazytalk/Unity/samplecode/CTWebPlayer.unity3d";
        player.init($("#unityPlayer"), function () {
            ...;
        });
    });
</script>

These lines declare and initialize a new web player.
These lines are required.
The address indicates the target server at which the web player is located. You may need to change it to the web player you have stored on your custom server with a full accessibility.
You can only modify the ... shown in the above codes by adding more functions, adjusting values of attributes and so on.

In-between the block:

These lines embed a declared web player (in the head block) into the custom web page.
These lines are required.
You can only modify the attributes in the style to adjust the size, position, ...etc of the web player.