The Resurrection of Flash
The Flash files playing above was made in Adobe Animate and exported as ActionScript 3 but uses basic AS 2 code. In order to actually play the swf file I had to upload the file to WIX and copy the link over to this Squarespace site. I am unable to play a swf file directly so far on Squarespace.
Flash is back from the dead. Get ready to bring back the glory days of Flash animation! Animators, rejoice! No more struggling with HTML5, CSS and JavaScript to create animations for the web. With Ruffle, we can easily create beautiful, interactive, and engaging animations with ease and simplicity. No need to learn a whole new coding language or interface, just create your animation in Flash and let Ruffle do the rest. Say goodbye to the clunky, cumbersome HTML5 and JavaScript code, and say hi to the smooth, seamless experience of Flash animation.
You can upload .swf files using the text editor but not the normal uploader for images. Due to Squarespace’s CORs policy on their server you won’t be able to view them. To avoid this issue I would upload the swf file to either DropBox or GitHub and use the link addresses from there. Google Drive also doesn’t allow cross server playing of swf files. I will test GitHub in the near future when I have time. UPDATE: Github is too complicated to setup. I did try One Drive as well with no luck.
First, add this code snippet into the <head> of your HTML page.
<script src="https://unpkg.com/@ruffle-rs/ruffle"></script>
Then, paste this code below into your <code> block. Or add the ruffle code inside of this block.
<script>
window.RufflePlayer = window.RufflePlayer || {};
//Below code forces autoplay, no splashscreen and allows sound
window.RufflePlayer.config = {
"autoplay": "on","splashScreen": false,"unmuteOverlay": "hidden" };
// End custom configuration code above
window.addEventListener("load", (event) => {
const ruffle = window.RufflePlayer.newest();
const player = ruffle.createPlayer();
const container = document.getElementById("container"); container.appendChild(player);
player.load("https://www.steveknowswebdesign.com/s/techlogo.swf");
player.style.width = "600px";
player.style.height = "400px";
});
</script>
<div id="container"></div>
function resizePlayer() {
var width = container.offsetWidth;
var height = container.offsetHeight;
player.style.width = width + "px";
player.style.height = height + "px";
}
window.addEventListener("resize", resizePlayer);
resizePlayer();
});
</script>
<script src="https://unpkg.com/@ruffle-rs/ruffle"></script>
<div id="container" style="width: 100%;"></div>Full webpage embed code outside of WIX platform (Normal HTML site). Copy and paste into index.html page and change the swf file name to yours. AS2 Flash will play with no buttons or logos first. AS3 files, if they work, will display a play button. Files with sound playing will have a warning overlay, click to play.
<html>
<head>
<script src="https://unpkg.com/@ruffle-rs/ruffle"></script>
<style>
html, body {
margin:0px;
}
</style>
</head>
<body>
<script>
window.RufflePlayer = window.RufflePlayer || {};
//Below code forces autoplay, no splashscreen and allows sound
window.RufflePlayer.config = {
"autoplay": "on","splashScreen": false,"unmuteOverlay": "hidden","quality": "medium" };
// End custom configuration code above
window.addEventListener("load", (event) => {
const ruffle = window.RufflePlayer.newest();
const player = ruffle.createPlayer();
const container = document.getElementById("container");
container.appendChild(player);
player.load("index-2023.swf");
player.style.width = "100%";
player.style.height = "100%";
});
</script>
<div id="container"></div>
</body>
</html>Full options listed below for embedding.
window.RufflePlayer = window.RufflePlayer || {};
window.RufflePlayer.config = {
// Options affecting the whole page
"publicPath": undefined,
"polyfills": true,
// Options affecting files only
"allowScriptAccess": false, // Polyfill elements have a different default value, see the allowScriptAccess section
"autoplay": "auto",
"unmuteOverlay": "visible",
"backgroundColor": null,
"wmode": "window",
"letterbox": "fullscreen",
"warnOnUnsupportedContent": true,
"contextMenu": "on",
"showSwfDownload": false,
"upgradeToHttps": window.location.protocol === "https:",
"maxExecutionDuration": 15,
"logLevel": "error",
"base": null,
"menu": true,
"salign": "",
"forceAlign": false,
"scale": "showAll",
"forceScale": false,
"frameRate": null,
"quality": "high",
"splashScreen": true,
"preferredRenderer": null,
"openUrlMode": "allow",
"allowNetworking": "all",
"favorFlash": true,
"socketProxy": [],
"fontSources": [],
"defaultFonts": {},
"credentialAllowList": [],
"playerRuntime": "flashPlayer",
"allowFullscreen": false;
};