Jalara Studio

veröffentlicht am

SWF- / Flash-Inhalte mit Ruffle wieder zum laufen bringen

# #

Seit Oktober 2023 unterstützt Ruffle.js nun ActionScript 1 und 2 zu 95%, wobei ActionScript 3 in Arbeit ist.

Wer also SWF-Files mit AS 1 und 2 hat kann diese wie folgt wieder ansehen:

Vorab: Von Ruffle gibt es auch Desktop-Versionen sowie Browser-Extension, die du auf Linux / Windows / Mac oder in Chrome / Firefox installieren und somit deine SWF-Files auf ihre Lauffähigkeit prüfen kannst. Gehe hierfür auf die Website https://ruffle.rs. Unter Downloads findest du Links zur Extension bzw. den Desktop-Versionen. Funktionieren deine SWF-Files damit kannst du loslegen, diese mit Hilfe von ruffle.js auch über deine Website lauffähig zu machen.

Im folgenden erkläre ich wie ich folgende SWF-File dank Ruffle wieder zum laufen gebracht habe: website-history-2007/index.html

Lade dir zunächst auf der Website ruffle.rs unter Downloads die Variante Self Hosted oder bei GitHub eines der letzten Releases herunter: https://github.com/ruffle-rs/ruffle/releases. Klicke bei GitHub auf Releases → Assets und lade dir dort die ruffle-[...]-web-selfhostet.zip herunter.

Extrahiere den Ordner z.B. mit 7-Zip und nenne den extrahierten Ordner in ruffle um. (So kannst du den Ordner einfach mit einer neueren Ruffle-version überschreiben, ohne den Pfad im Code oder in der HTML-Datei erneut anzupassen.)

Lade den Ordner ruffle mitsamt Inhalt auf deinen Webhoster.

Inhalt des Ordners ruffle

Im HTML-Code benötigst du im Grunde nichts weiter als folgender Auszeichnung für das Einbetten der SWF-Datei1:

<object>
 <embed src="" width="" height="" />
</object>

Füge anschließend noch den Pfad und den Namen zur Flash-Datei sowie die Größe ein:

<object>
    <embed src="ORDNER_XY/FLASH_FILE_NAME.swf" width="998" height="560" />
</object>

Darunter rufst du nun die ruffle.js aus dem Ordner ruffle auf:

<script src="ruffle/ruffle.js"></script>

Damit der Player automatisch startet, kannst du den Befehl "autoplay" verwenden und diesen wie folgt auf "on" stellen2:

<script>
window.RufflePlayer.config = {
    "autoplay": "on",
};
</script>

Der SWF-Film startet nun automatisch.

Stört dich der Unmute-Overlay kannst du diesen mit dem Befehl "unmuteOverlay": "hidden" entfernen3:

Zusammenfassend noch einmal der gesamte HTML-Block:

<object>
    <embed src="ORDNER_XY/FLASH_FILE_NAME.swf" width="998" height="560" />
</object>
<script src="ruffle/ruffle.js"></script>
<script>
    window.RufflePlayer.config = {
       "autoplay": "on",
       "unmuteOverlay": "hidden"
};
</script>

Links