<html>

<head>

    <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.showPlaybar(false);
                var urls = ["https://www.reallusion.com/crazytalk/Unity/samplecode/SampleCode_Last/BG0.jpg",
                                "https://www.reallusion.com/crazytalk/Unity/samplecode/SampleCode_Last/BG1.jpg",
                                "https://www.reallusion.com/crazytalk/Unity/samplecode/SampleCode_Last/BG2.jpg",
                                "https://www.reallusion.com/crazytalk/Unity/samplecode/SampleCode_Last/BG3.jpg",
                                "https://www.reallusion.com/crazytalk/Unity/samplecode/SampleCode_Last/BG4.jpg",
                                "https://www.reallusion.com/crazytalk/Unity/samplecode/SampleCode_Last/Peach.uctproject",
                                "https://www.reallusion.com/crazytalk/Unity/samplecode/SampleCode_Last/Friendly.uctidle",
                                "https://www.reallusion.com/crazytalk/Unity/samplecode/SampleCode_Last/Peach.uctscript",
                                "https://www.reallusion.com/crazytalk/Unity/samplecode/SampleCode_Last/Peach_01.uctscript"];
                player.preLoadFiles(urls, {
                    thread: 9,
                    loaded: function() {
                        player.loadProject("https://www.reallusion.com/crazytalk/Unity/samplecode/SampleCode_Last/Peach.uctproject", {
                            playerAfter:-1,
                            showActor: false,
                            idleMotionUrl:"https://www.reallusion.com/crazytalk/Unity/samplecode/SampleCode_Last/Friendly.uctidle"
                        });
                        player.loadScript("https://www.reallusion.com/crazytalk/Unity/samplecode/SampleCode_Last/Peach.uctscript", {
                            playAfter:2,
                            loaded: function(){
                                initialBackground();
                                player.actorTransform({
                                    scale: 40,
                                    positionX: 18,
                                    positionY: 83,
                                    duration: 0
                                });
                                player.showActor(true, 0);
                            }
                        });
                    }//executed after loaded
                });//pre-loading
            });//initial
        })//$function

        function initialBackground(){
            player.loadBackground("https://www.reallusion.com/crazytalk/Unity/samplecode/SampleCode_Last/BG0.jpg", {
                name: "Initial",
                alpha: 1,
                fit: "fill"
            });
        }

        function LoadandChange(){//This is what happens when a certain button is clicked
            player.loadScript("https://www.reallusion.com/crazytalk/Unity/samplecode/SampleCode_Last/Peach_01.uctscript", {
                playAfter:1,
                loaded: function(){
                    player.showActor(true, 0);
                }
            });
            var WashScreen = 0;
            var FadeTime = 1;//the sec for fading in and out
            var BGArray = {"item": [
                {
                    "time": 5.5,
                    "BG": "https://www.reallusion.com/crazytalk/Unity/samplecode/SampleCode_Last/BG1.jpg"
                },
                {
                    "time": 11.5,
                    "BG": "https://www.reallusion.com/crazytalk/Unity/samplecode/SampleCode_Last/BG2.jpg"
                },
                {
                    "time": 17.5,
                    "BG": "https://www.reallusion.com/crazytalk/Unity/samplecode/SampleCode_Last/BG3.jpg"
                },
                {
                    "time": 23.5,
                    "BG": "https://www.reallusion.com/crazytalk/Unity/samplecode/SampleCode_Last/BG4.jpg"
                }
            ]};

            player.bind( "playerstatus", function (event) {
                if( event.status == "startplay" )

                {
                    if (WashScreen == 1)

                    {
                        WashScreen = 0;
                    }
                }
                else if( event.status == "playing" )

                {
                    $.each(BGArray.item, function (key, value) {
                        if (event.time > (value.time - FadeTime) && event.time < (value.time - FadeTime + 0.02)) {
                            player.showBackground(false, FadeTime);
                        };//fading out the BG image
                        if (event.time > value.time && event.time < (value.time + 0.02)){
                            player.showProgressbar(false);
                            player.loadBackground(value.BG, {
                                name: "BGImage",
                                alpha: 0,
                                fit: "fill",
                                loaded: function (status) {
                                    player.showBackground(true, FadeTime);
                                }
                            });
                        }//fading in the BG image
                    });
                }
                else if( event.status == "pause" )
                {
                    WashScreen = 0;
                }
                else if( event.status == "stop" || event.time == event.length)
                {
                    if (event.time == event.length)

                    {
                        player.showProgressbar(true);
                    }
                    WashScreen = 1;
                }
            });//bind
        }//LoadandChange
    </script>
</head>

<body>
    <table style="text-align:center;margin-left:auto; margin-right:auto;">
        <tr>
            <td>
                <div id="unityPlayer" style="width: 640px; height: 480px;">
                </div>
            </td>
        </tr>

        <tr>
            <td>
                <input type="button" value="New Scene with Background Fading out / in Effects" onclick="LoadandChange()" class="button" />
            </td>
        </tr>
    </table>
</body>

</html>