Preloader before loading content #3866

opiums9 · 2021-04-01T06:05:35Z

Hello! I'm trying to make a preloader because my swf takes long enough to load. But I cannot find an event after which I need to hide the preloader. Page loading is faster than swf loading. Can anyone help me?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="ruffle.js"></script>
<script>
window.RufflePlayer = window.RufflePlayer || {};
window.RufflePlayer.config = {
	// Options affecting the whole page
	"publicPath": undefined,
	"polyfills": true,

	// Options affecting files only
	"autoplay": "on",
	"unmuteOverlay": "hidden",
	"backgroundColor": null,
	"letterbox": "fullscreen",
	"warnOnUnsupportedContent": true,
	"contextMenu": true,
	"upgradeToHttps": window.location.protocol === "https:",
	"maxExecutionDuration": {"secs": 15, "nanos": 0},
	"logLevel": "error",
};
</script>
<title>Murloc RPG</title>
</head>
<body>
<div style="text-align:center;padding-top: 20px;">
<embed src="murlocRPG.swf" quality="autohigh" wmode="direct" width="700" height="300" name="gameObj" align="middle" allowscriptaccess="always" allowfullscreen="false" type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/go/getflashplayer" />
</div>
</body>
<script>
(function(){
	var preloaderDiv = document.createElement('div');
	preloaderDiv.innerHTML = `
		<style>
			#preloader_preload {
				display: block;
				z-index: 99999;
				height: 100vh;
				background: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzgiIGhlaWdodD0iMzgiIHZpZXdCb3g9IjAgMCAzOCAzOCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBzdHJva2U9IiNmZmYiPiAgICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPiAgICAgICAgPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMSAxKSIgc3Ryb2tlLXdpZHRoPSIyIj4gICAgICAgICAgICA8Y2lyY2xlIHN0cm9rZS1vcGFjaXR5PSIuNSIgY3g9IjE4IiBjeT0iMTgiIHI9IjE4Ii8+ICAgICAgICAgICAgPHBhdGggZD0iTTM2IDE4YzAtOS45NC04LjA2LTE4LTE4LTE4Ij4gICAgICAgICAgICAgICAgPGFuaW1hdGVUcmFuc2Zvcm0gICAgICAgICAgICAgICAgICAgIGF0dHJpYnV0ZU5hbWU9InRyYW5zZm9ybSIgICAgICAgICAgICAgICAgICAgIHR5cGU9InJvdGF0ZSIgICAgICAgICAgICAgICAgICAgIGZyb209IjAgMTggMTgiICAgICAgICAgICAgICAgICAgICB0bz0iMzYwIDE4IDE4IiAgICAgICAgICAgICAgICAgICAgZHVyPSIxcyIgICAgICAgICAgICAgICAgICAgIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIi8+ICAgICAgICAgICAgPC9wYXRoPiAgICAgICAgPC9nPiAgICA8L2c+PC9zdmc+') center center no-repeat;
				background-color: #111;
				position: fixed;
				top: 0;
				width: 100%;
				left: 0;
			}
			body.preloader {
			  overflow: hidden;
			  height: 100vh;
			}
		</style>
		<div id="preloader"><div id="preloader_preload"></div></div>
	`;
	document.body.insertBefore(preloaderDiv, document.body.firstChild);
	var preloaderStart = document.getElementById("preloader_preload");
	document.body.classList.add('preloader');
	function fadeOutFunction(el){
		el.style.opacity = 1;
		var preloaderEngine = setInterval(function(){
			document.body.classList.remove('preloader');
			el.style.opacity = el.style.opacity - 0.05;
			if(el.style.opacity <= 0.05){
				clearInterval(preloaderEngine);
				preloaderStart.style.display = "none";
			}
		}, 20);
	}
	window.addEventListener("load", (event) => { //event after load swf...
		console.log(window.RufflePlayer);
		setTimeout(function(){
			fadeOutFunction(preloaderStart);
		}, 1000);
	});
})();
</script>
</html>

desuwa · 2021-04-01T20:18:07Z

You'll need to use the JS API directly.
But instead of calling player.load("movie.swf") like in the example, you fetch your SWF manually and then pass the raw data to Ruffle as a Uint8Array

fetch('murlocRPG.swf')
  .then(resp => resp.arrayBuffer())
  .then(data => player.load({ data: new Uint8Array(data) }));

This is explained a bit in the Advanced usage section on the wiki page, but the data parameter isn't documented.

You could also use this to show a loading progress like a proper preloader with readable streams.

opiums9 · 2021-04-02T09:58:08Z

thanks, I read and completed the task, working code:

	window.addEventListener("load", (event) => {
		const ruffle = window.RufflePlayer.newest();
		const player = ruffle.createPlayer();
		player.style.width = "700px";
		player.style.height = "300px";
		const container = document.getElementById("container");
		container.appendChild(player);
		fetch('murlocRPG.swf')
			.then(resp => resp.arrayBuffer())
			.then(data => player.load({data: new Uint8Array(data)})
				.then(function(buffer){
					fadeOutFunction(preloaderStart)
				})
			);
	});

opiums9 closed this as completed Apr 2, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Preloader before loading content #3866

Preloader before loading content #3866

opiums9 commented Apr 1, 2021

desuwa commented Apr 1, 2021

opiums9 commented Apr 2, 2021 •

edited

Loading

Preloader before loading content #3866

Preloader before loading content #3866

Comments

opiums9 commented Apr 1, 2021

desuwa commented Apr 1, 2021

opiums9 commented Apr 2, 2021 • edited Loading

opiums9 commented Apr 2, 2021 •

edited

Loading