C'era una volta il sito "Flash"
Ad inizio secolo, ovvero 20 anni fa, imperversavano in siti fatti in "flash". Scaricando nel proprio browser un plug-in, si potevano vedere animazioni vettoriali, contenuti che erano molto leggeri in termini di byte, quindi molto veloci da caricare anche riempiendo una superficie ampia dello schermo. La connessione tipica era il modem a 56 kbit/s, per i più fortunati l'ISDN a doppio canale (128 kbit/s), quindi per evitare lunghe attese le pagine dovevano essere molto leggere. Una pagina commerciale poteva pesare sui 100Kb tutto compreso, una con un gioco, o con qualcosa che valesse la pena di essere visto, 1 Mb o anche oltre... ricordo il tempo interminabile per caricare il flash di Der Bauer, una delle pietre miliari nello sviluppo di filmati Flash.
A fine 2020 Adobe, che ha rilevato Macromedia nel 2005, pone termine al progetto Flash, togliendo il supporto al Flash Player per problemi di sicurezza e invitando gli utenti a disinstallarlo dai propri sistemi. In ogni caso Flash era già stato abbandonato, da una quindicina d'anni, per i siti commerciali a causa dei noti problemi di indicizzazione sui motori di ricerca e per il boicottaggio da parte di Apple.
Oggi le cose sono cambiate. Gli orfani di Flash Player hanno un'alternativa per inserire i loro flash movies direttamente in un sito web: Ruffle! Ruffle è un emulatore scritto in Rust. Si può richiamare dalla pagina web con qualche riga di codice javascript. Funziona anche su Ipad e Iphone, alla faccia di Apple. Qui il sito ufficiale: ruffle.rs
Ora vedremo come usarlo con Drupal 9.
Come inserire contenuti Adobe / Macromedia Flash in Drupal!
Scarichiamo lo script dalla pagina di download (ruffle.rs/#downloads) dalla colonna website e scompattiamo i files nella cartella dei javascript del tema.
Saranno presenti tre file:
ruffle.js
ruffle.js.map
d0837cfd21d7530dfc60.wasm
Inseriamo ruffle.js nelle librerie del tema, nel file nometema.libraries.yml
Cancelliamo la cache per applicare la modifica.
global-scripts:
version: VERSION
js:
....
js/ruffle.js: {}
...
Ora dobbiamo inserire il formato .swf tra i media da poter caricare.
Andiamo in Struttura > Media types > Add media Type: inseriamo il titolo Flash e come sorgente "file". Salviamo e poi andiamo ad editare il campo "file": inseriamo come estensione swf e scegliamo una cartella dove verranno inseriti i filmati caricati, nel mio caso ho scelto come nome "flash".
Ora non ci rimane che creare un nuovo contenuto, caricare il filmato flash nella media library e inserirlo in un campo testo con filtro "HTML completo". Verrà inserito un tag <drupal-media> che andremo a rimuovere dopo aver preso nota del nome del file.
A questo punto sappiamo dove è stato caricato il filmato: /sites/default/files/flash/nomefile.swf
Andremo ad inserire nel campo testo il codice sopra. Le varie voci sono spiegate bene nelle istruzioni su GitHub: github.com/ruffle-rs/ruffle/wiki/Using-Ruffle
Il player verrà inserito nel contenitore "#flash", importante specificare il "publicPath", dove avete messo gli script, altrimenti non vi trova il file ".wasm" e non funziona.
<div id="flash"> </div>
<script>
window.RufflePlayer = window.RufflePlayer || {};
window.addEventListener("load", (event) => {
const ruffle = window.RufflePlayer.newest();
const player = ruffle.createPlayer();
const container = document.getElementById("flash");
container.appendChild(player);
player.config = {
"autoplay": "auto",
"scale": "showAll",
"quality": "high",
"letterbox": "fullscreen",
"upgradeToHttps": window.location.protocol === "https:",
"publicPath": "/themes/mauro/js/"
};
player.style.width = "100%"; player.style.height = "100%";
player.load("/sites/default/files/flash/nomefile.swf");
});
</script>
Aggiungi un commento