[PLUGIN]Show in all browsers HavanaWeb SWF Add-ons like Avatar Generator and more

[BAT]JoKeR

New member

Hi to all! Today I will release a thing that nobody post in public. The release is a Plugin for show exactly the same Add-ons loaded in original .swf files in the HavanaWeb in all browsers.
The Add-ons I mean from HavanaWeb is the Avatar Generator (change look's) in the registration and profile change look's settings pages. Can be used for all Add-ons showed in .SWF files, but at the moment I recomended use only for Avatar Generator because not match visualy 100% like the texts (font) of these Add-ons in modern browsers.

Original Avatar Generator from Registration page (in old browser with Flash):
9a6980e52c31b22933f9f996e85b9f86.gif


Adapted Avatar Generator from Registration page (in latest Google Chrome browser):
c58ba998bb5ec341b8c9788a38b358d3.gif

Let's start!!
What I need for enable these Plugin?
  1. HavanaWeb (obiusly xD)
  2. Text Editor
  3. Ruffle Flash Emulator (no download needed)



Now follow this steps:

STEP 1: Go to Ruffle's website and click in "Usage" button from navigation bar. Direct link:
STEP 2: Inside Usage page from Ruffle's, copy to the clip board the code that you can see from first line (for use without any download). Direct code:
HTML:
<script src="https://unpkg.com/@ruffle-rs/ruffle"></script>
STEP 3: Go to you'r www-tpl folder from Havana and search the "register.tpl" file and open it with your Text Editor. Now search the "title" atribute and paste just down the code that you have in your clip board from STEP 2. Example of how need to look the "register.tpl" file after do this STEP 3:
HTML:
<title>{{ site.siteName }}: ¡Registra tu {{ site.siteName }}! </title>
<script src="https://unpkg.com/@ruffle-rs/ruffle"></script>
STEP 4: Now search the "meta" atribute with name "description" and paste just up from it this code (example of how need to look included):
HTML:
<!-- v Starting line of the code what you need to copy v -->
       <script>
            window.RufflePlayer = window.RufflePlayer || {};
            window.RufflePlayer.config = {
                "autoplay": "on",
                "unmuteOverlay": "hidden",
                "splashScreen": false,
                contextMenu: "off", // Optional argument, for enable remplace "off" with "on" or just delete this line
            };
            window.addEventListener("load", (event) => {
                const ruffle = window.RufflePlayer.newest();
                const player = ruffle.createPlayer();
                const container = document.getElementById("register-avatar-editor");
                container.innerHTML = '';
                container.appendChild(player);
                player.load({
                    url: '{{ site.staticContentPath }}/flash/HabboRegistration.swf',
                    parameters: 'base={{ site.staticContentPath }}/flash/&'+
                                'figuredata_url={{ site.staticContentPath }}/xml/figuredata.xml&'+
                                'draworder_url={{ site.staticContentPath }}/xml/draworder.xml&'+
                                'localization_url={{ site.staticContentPath }}/xml/figure_editor.xml&'+
                                'habbos_url={{ site.staticContentPath }}/xml/promo_habbos_v2.xml&'+
                                'figure='+
                                'gender='+
                                'showClubSelections=0&'+
                                'wmode=opaque',
                    allowScriptAccess: true,
                });
                player.style.width = "435px";
                player.style.height = "400px";
                player.style.frameRate = "8";
            });
        </script>
<!-- ^ Ending line of the code what you need to copy ^ -->

<meta name="description" content="{{ site.siteName }} es un mundo virtual para quedar y hacer amigos" />
STEP 5: Now close "register.tpl" file and inside the same folder as STEP 3, open "profile" folder and open the file "change_looks.tpl" with your Text Editor too. Search for "title" atribute and paste just down the same code as in STEP 2. Example how to need to look the "change_looks.tpl" file after do this STEP 5:
HTML:
<title>{{ site.siteName }}: Mi perfil </title>
<script src="https://unpkg.com/@ruffle-rs/ruffle"></script>
STEP 6: Search the "a" atribute with id "settings-submit" and remplace all the code (inside) starting for the first line below the mentioned "a" line and ending from the script line what contains the "HabboView.run();" fuction, with this code (example of how need to look included):
HTML:
<a href="#" id="settings-submit" class="new-button disabled-button"><b>Salvar cambios</b><i></i></a>
<!-- v Starting line of the code what you need to copy v -->
<script type="text/javascript" language="JavaScript">
var swfobj = new SWFObject("{{ site.sitePath }}/flash/HabboRegistration.swf", "habboreg", "435", "400", "8");
swfobj.addParam("base", "{{ site.sitePath }}/flash/");
swfobj.addParam("wmode", "opaque");
swfobj.addParam("AllowScriptAccess", "always");
swfobj.addVariable("figuredata_url", "{{ site.sitePath }}/xml/figuredata.xml");
swfobj.addVariable("draworder_url", "{{ site.sitePath }}/xml/draworder.xml");
swfobj.addVariable("localization_url", "{{ site.sitePath }}/xml/figure_editor.xml");
swfobj.addVariable("figure", "{{ playerDetails.figure }}");
swfobj.addVariable("gender", "{{ playerDetails.sex }}");

swfobj.addVariable("showClubSelections", "1");

{% if playerDetails.hasClubSubscription() %}
swfobj.addVariable("userHasClub", "1");
{% endif %}

if (deconcept.SWFObjectUtil.getPlayerVersion()["major"] >= 8) {
    $("settings-editor").setStyle({ textAlign: "center"});    swfobj.write("settings-editor");
    $("settings-form").show();
   
    {% if playerDetails.hasClubSubscription() %}
        $("settings-wardrobe").show();}
    {% else %}
        }
    {% endif %}
</script>

</form>

</div>

</div>
</div>
</div>
</div>

<script>
    window.RufflePlayer = window.RufflePlayer || {};
        window.RufflePlayer.config = {
            "autoplay": "on",
            "unmuteOverlay": "hidden",
            "splashScreen": false,
        };
</script>
<script>
    window.addEventListener("load", (event) => {
        const ruffle = window.RufflePlayer.newest();
        const player = ruffle.createPlayer();
        const container = document.getElementById("settings-editor");
        container.innerHTML = '';
        container.appendChild(player);
        player.load({
            url: '{{ site.staticContentPath }}/flash/HabboRegistration.swf',
            parameters: 'base={{ site.staticContentPath }}/flash/&'+
                        'figuredata_url={{ site.staticContentPath }}/xml/figuredata.xml&'+
                        'draworder_url={{ site.staticContentPath }}/xml/draworder.xml&'+
                        'localization_url={{ site.staticContentPath }}/xml/figure_editor.xml&'+
                        'figure={{ playerDetails.figure }}'+
                        'gender={{ playerDetails.sex }}'+
                        'habbos_url={{ site.staticContentPath }}/xml/promo_habbos_v2.xml&'+
                        'showClubSelections=1&'+
                        'wmode=opaque'
                        {% if playerDetails.hasClubSubscription() %}
                        +`userHasClub=1',
                        {% endif %}
            allowScriptAccess: true,          
        });
        player.style.width = "435px";
        player.style.height = "400px";
        player.style.frameRate = "8";
    });
</script>
<!-- ^ Ending line of the code what you need to copy ^ -->
<script type="text/javascript">
HabboView.run();

</script>
STEP 7: If you have done all steps and are reading this... CONGRATS, you have Ruffle's running up!!!! Now you can go to your Hotel and check the /register and /profile pages for see how looks now your Avatar Generator in all modern browsers (smartphones included).



Rembember, To share is to live!
-Any thing you need to say or know feel free to post a comment bellow!!

-[BAT]JoKeR
 
Back
Top