How to put a game with multiple .swf (characters, audio, assets…) in Ruffle?

I’m trying to bring back an entire website from 2010 and its flash games with ruffle (https://onlinewinxclub.com/centro-web/?lang=en) and so far so good, even for someone like me who never really worked with flash, I changed a few scripts regarding the highscore in 5 other games to point to the my server instead of the old website and all the games followed the same logic thus far: all files inside their folders, the .xml for the languages and one .swf for the game only…

However, one of the games, which also happened to be the most successful one back then, has multiple .swf files that need to be pre-loaded and I have no clue how to run it. The “game.swf” which is in charge of everything doesn’t load past… the loading.

Is anyone able to do it? I was planning on releasing the website in a few weeks and this is actually the last thing I need to finish before finally releasing it and it’s unfortunately with the area I have less experience with – flash.

Here is the drive file with the game: https://drive.google.com/file/d/10XEXJ2VFfL8rBVsRPSTWsB_FsGQTrPuP/view

The MinigamePlayer.php is where I run the game. https://onlinewinxclub.com/centro-web/pages/Games/Flash/IceCream/MiniGamePlayer.php?lang=en

I tried a bunch of things.

First I went to waybackmachine to the old official website and see how their own code was:

<html>
<body style="background-color: black; text-align: center;">
    <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="920" height="575" class="minigame-object" id="minigame-object" align="middle">
                    <param name="movie" value="MinigameWrapper.swf?lang=en">
                    <param name="base" value=".">
                    <param name="quality" value="high">
                    <param name="bgcolor" value="#ffffff">
                    <param name="allowFullScreen" value="true">
                    <param name="allowScriptAccess" value="always">
                    <param name="wmode" value="opaque">
                    <param name="FlashVars" value="gameId=8&amp;languageId=1&amp;userId=0&amp;sessionId=">
                    <!--[if !IE]>-->
                    <object type="application/x-shockwave-flash" data="MinigameWrapper.swf?lang=en" width="920" height="575" class="minigame-object" id="minigame-object" align="middle">
                        <param name="movie" value="MinigameWrapper.swf?lang=en">
                        <param name="base" value=".">
                        <param name="quality" value="high">
                        <param name="bgcolor" value="#ffffff">
                        <param name="allowFullScreen" value="true">
                        <param name="allowScriptAccess" value="always">
                        <param name="wmode" value="opaque">
                        <param name="FlashVars" value="gameId=8&amp;languageId=1&amp;userId=0&amp;sessionId=">
                        <!--<![endif]-->
                        <div class="FlashFallback">
                            <p>You need Flash plugin to play this game</p>
                        </div>
                        <!--[if !IE]>-->
                    </object>
                    <!--<![endif]-->
    </object>
</body>
</html>

This was it, but it didn’t help at all because it didn’t really have anything that different from what I have myself, which is:

MinigamePlayer.php:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Play Game</title>
    <script src="/ruffle/ruffle.js"></script> <!-- Path to Ruffle -->
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            const langMap = {
                'en': 1,
                'it': 2,
                'fr': 3,
                'es': 6,
                'de': 7,
                'pt': 9
            };

            function getQueryParam(param) {
                const urlParams = new URLSearchParams(window.location.search);
                return urlParams.get(param);
            }

            const lang = getQueryParam('lang');
            const languageId = langMap[lang] || 1; 

            if (!window.gameLoaded) {
                const swfFiles = [
                    "game8/assets.swf",
                    "game8/characters.swf",
                    "game8/audio.swf",
                    "game8/interface.swf",
                    "game8/levels.xml"
                ];

                // Preload the SWF files
                swfFiles.forEach(function(file) {
                    const preloadObject = document.createElement("object");
                    preloadObject.setAttribute("type", "application/x-shockwave-flash");
                    preloadObject.setAttribute("data", file);
                    preloadObject.style.display = "none";
                    document.body.appendChild(preloadObject);
                });

                var gameContainer = document.createElement("object");
                gameContainer.setAttribute("id", "minigame-object");
                gameContainer.setAttribute("type", "application/x-shockwave-flash");
                gameContainer.setAttribute("data", "../../../../pages/Games/Flash/IceCream/MinigameWrapper.swf?gameId=8&amp;languageId=${languageId}&amp;userId=0&amp;sessionId=");
                gameContainer.setAttribute("width", "750");
                gameContainer.setAttribute("height", "480");

                gameContainer.setAttribute("style", "outline: 1px solid #7E7F7F;");

                gameContainer.innerHTML = `
                    <param name="base" value=".">
                    <param name="quality" value="high">
                    <param name="bgcolor" value="#ffffff">
                    <param name="allowFullScreen" value="true">
                    <param name="allowScriptAccess" value="always">
                    <param name="wmode" value="opaque">
                    <param name="FlashVars" value="gameId=8&amp;languageId=${languageId}&amp;userId=0&amp;sessionId=">
                    <div>
                        <p>You need Ruffle to play this game. <a href="https://ruffle.rs/#downloads" target="_blank">Download Ruffle here</a>.</p>
                    </div>
                `;

                document.body.appendChild(gameContainer);
                window.gameLoaded = true;
            }
        });
    </script>
</head>
<body>
</body>
</html>

I tried the preload of the files as you can see, but this appears on the console:

ERROR core/src/avm2/events.rs:433 Error dispatching event
EventObject(EventObject { type: “complete”, class:
flash.events::Event, ptr: 0x13ab200 }) to handler
FunctionObject(FunctionObject { ptr: 0x10111c8, name:
Ok(“components::GameBase/handleXMLLoaderComplete()”) }) : TypeError:
Error #1009: Cannot access a property or method of a null object
reference. (accessing field: playBtn) at
com.rm.icecream.ui::PauseScreen/initialize() at
com.rm.icecream::Game/initialize() at
components::GameBase/loadOrInitialize() at
components::GameBase/handleXMLLoaderComplete()
core.ruffle.4165d85befd59ccf80e4.js:1 [Violation]
‘requestAnimationFrame’ handler took 107ms
core.ruffle.4165d85befd59ccf80e4.js:1 [Violation]
‘requestAnimationFrame’ handler took 91ms
core.ruffle.4165d85befd59ccf80e4.js:1 [Violation]
‘requestAnimationFrame’ handler took 97ms

I also tried to search for any old website that still had the games there. 99% of them used the official website’s URL path, and the website closed in 2012. But I found one website, the only one, that actually has the game somehow running smoothly, but I wasn’t able to understand what they did

https://www.numuki.com/include/js/waflash/default/?loadurl=https://media.numuki.com/winx-club/games/game8/game.swf?lang=en&gameId=8&languageId=1&userId=0&sessionId=