{"id":4444,"date":"2025-09-02T13:43:53","date_gmt":"2025-09-02T11:43:53","guid":{"rendered":"https:\/\/edutictac.es\/blog\/sasogu\/?p=4444"},"modified":"2025-10-11T12:58:53","modified_gmt":"2025-10-11T10:58:53","slug":"flash-en-wordpress-amb-ruffle","status":"publish","type":"post","link":"https:\/\/edutictac.es\/blog\/sasogu\/flash-en-wordpress-amb-ruffle\/","title":{"rendered":"Flash en wordpress amb Ruffle"},"content":{"rendered":"\n<p>A la xarxa d\u2019aula del meu centre no tinc acc\u00e9s a <strong>archive.org<\/strong>, i aix\u00f2 em feia impossible utilitzar alguns materials antics de m\u00fasica i altres activitats did\u00e0ctiques que encara estan en format <strong>Flash (.swf)<\/strong>. Com que molts d\u2019aquests recursos s\u00f3n \u00fatils per al meu alumnat, he buscat la manera de fer-los accessibles directament des del meu blog.<\/p>\n\n\n\n<p>La soluci\u00f3 ha sigut <strong>pujar els arxius Flash al servidor d\u2019Edutictac<\/strong> i utilitzar l\u2019emulador <strong>Ruffle<\/strong>, que permet executar-los en navegadors moderns sense necessitat de tenir instal\u00b7lat Adobe Flash Player (que ja est\u00e0 obsolet).<\/p>\n\n\n\n<p>Per a aconseguir-ho, nom\u00e9s he hagut d\u2019afegir aquest codi amb <em>Snippets<\/em>, perqu\u00e8 es carregue de manera global en el blog:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;script src=\"https:\/\/unpkg.com\/@ruffle-rs\/ruffle\">&lt;\/script><\/code><\/pre>\n\n\n\n<p>I he creat un shotcode <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;?php\n\/**\n * Shortcode &#091;swf url=\"...\" width=\"800\" height=\"600\" ratio=\"4\/3\" nightly=\"0\" fullscreen=\"1\"]\n * - fullscreen=\"1\": a\u00f1ade bot\u00f3n de pantalla completa.\n *\/\n\nadd_action('wp_enqueue_scripts', function () {\n    if (!wp_script_is('ruffle', 'enqueued')) {\n        $src = 'https:\/\/cdn.jsdelivr.net\/npm\/@ruffle-rs\/ruffle\/ruffle.js';\n        wp_enqueue_script('ruffle', $src, &#091;], null, false);\n        $loader = &lt;&lt;&lt;JS\n(function(){\n  window._ruffleSwfQueue = window._ruffleSwfQueue || &#091;];\n  function boot(){\n    if(!window.RufflePlayer || typeof window.RufflePlayer.newest !== \"function\"){\n      return setTimeout(boot, 50);\n    }\n    var r = window.RufflePlayer.newest();\n    window._ruffleSwfQueue.forEach(function(item){\n      var mount = document.getElementById(item.id);\n      if(!mount || mount.dataset.ruffleMounted) return;\n      var player = r.createPlayer();\n      mount.appendChild(player);\n      mount.dataset.ruffleMounted = \"1\";\n      player.load(item.url);\n      if(item.fsbtn){\n        var btn = document.getElementById(item.id + \"_fsbtn\");\n        btn.addEventListener(\"click\", () => player.enterFullscreen());\n      }\n    });\n  }\n  document.addEventListener('DOMContentLoaded', boot, {once:true});\n  boot();\n})();\nJS;\n        wp_add_inline_script('ruffle', $loader);\n    }\n});\n\nadd_shortcode('swf', function ($atts) {\n    $a = shortcode_atts(&#091;\n        'url'    => '',\n        'width'  => '800',\n        'height' => '600',\n        'ratio'  => '',\n        'nightly'=> '0',\n        'fullscreen' => '0',\n    ], $atts, 'swf');\n\n    if (strpos($a&#091;'url'], 'http:\/\/') === 0) {\n        $a&#091;'url'] = preg_replace('#^http:\/\/#', 'https:\/\/', $a&#091;'url']);\n    }\n\n    $id     = 'swf_' . wp_generate_uuid4();\n    $url    = esc_url($a&#091;'url']);\n    $width  = intval($a&#091;'width']);\n    $height = intval($a&#091;'height']);\n    $ratio  = trim($a&#091;'ratio']);\n    $fs     = ($a&#091;'fullscreen'] === '1');\n\n    if (!$url) return '&lt;em>&#091;swf] Falta el atributo url.&lt;\/em>';\n\n    if ($ratio) {\n        $style = sprintf('position:relative;max-width:%dpx;aspect-ratio:%s;', $width, esc_attr($ratio));\n        $inner = 'position:absolute;inset:0;';\n    } else {\n        $style = sprintf('width:%dpx;height:%dpx;position:relative;', $width, $height);\n        $inner = 'position:absolute;inset:0;';\n    }\n\n    $html  = '&lt;div style=\"'. esc_attr($style) .'\">';\n    $html .= '&lt;div id=\"'. esc_attr($id) .'\" style=\"'. esc_attr($inner) .'\">&lt;\/div>';\n    $html .= '&lt;\/div>';\n\n    if ($fs) {\n        $html .= '&lt;button id=\"'. esc_attr($id) .'_fsbtn\" style=\"margin-top:6px;\">Pantalla completa&lt;\/button>';\n    }\n\n    $html .= '&lt;script>window._ruffleSwfQueue=window._ruffleSwfQueue||&#091;];window._ruffleSwfQueue.push({id:\"'\n          . esc_js($id) . '\",url:\"' . esc_js($url) . '\",fsbtn:'. ($fs?'true':'false') .'});&lt;\/script>';\n\n    return $html;\n});\n<\/code><\/pre>\n\n\n\n<p>Despr\u00e9s en un bloc html<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&#091;swf url=\"https:\/\/edutictac.es\/inici\/flash\/aulademusica24aranas.swf\" ratio=\"4\/3\" width=\"800\" fullscreen=\"1\"]<\/code><\/pre>\n\n\n\n<p>Ac\u00ed un exemple del resultat:<\/p>\n\n\n\n<div style=\"position:relative;max-width:800px;aspect-ratio:4\/3;\"><div id=\"swf_4b6b9382-a372-4a6f-8326-eae45ec5054a\" style=\"position:absolute;inset:0;\"><\/div><\/div><button id=\"swf_4b6b9382-a372-4a6f-8326-eae45ec5054a_fsbtn\" style=\"margin-top:6px;\">Pantalla completa<\/button><script>window._ruffleSwfQueue=window._ruffleSwfQueue||[];window._ruffleSwfQueue.push({id:\"swf_4b6b9382-a372-4a6f-8326-eae45ec5054a\",url:\"https:\/\/edutictac.es\/inici\/flash\/aulademusica24aranas.swf\",fsbtn:true});<\/script>\n\n\n\n<p>P\u00e0gina web <a href=\"https:\/\/ruffle.rs\/downloads\">https:\/\/ruffle.rs\/downloads<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>A la xarxa d\u2019aula del meu centre no tinc acc\u00e9s a archive.org, i aix\u00f2 em feia impossible utilitzar alguns materials antics de m\u00fasica i altres activitats did\u00e0ctiques que encara estan en format Flash (.swf). Com que molts d\u2019aquests recursos s\u00f3n \u00fatils per al meu alumnat, he buscat la manera de fer-los accessibles directament des del &#8230; <a title=\"Flash en wordpress amb Ruffle\" class=\"read-more\" href=\"https:\/\/edutictac.es\/blog\/sasogu\/flash-en-wordpress-amb-ruffle\/\" aria-label=\"M\u00e9s informaci\u00f3 sobre Flash en wordpress amb Ruffle\">Llegiu m\u00e9s<\/a><\/p>\n","protected":false},"author":1,"featured_media":4508,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"activitypub_content_warning":"","activitypub_content_visibility":"","activitypub_max_image_attachments":4,"activitypub_interaction_policy_quote":"anyone","activitypub_status":"federated","footnotes":""},"categories":[9,11],"tags":[],"class_list":["post-4444","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-programari","category-wordpress"],"_links":{"self":[{"href":"https:\/\/edutictac.es\/blog\/sasogu\/wp-json\/wp\/v2\/posts\/4444","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/edutictac.es\/blog\/sasogu\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/edutictac.es\/blog\/sasogu\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/edutictac.es\/blog\/sasogu\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/edutictac.es\/blog\/sasogu\/wp-json\/wp\/v2\/comments?post=4444"}],"version-history":[{"count":13,"href":"https:\/\/edutictac.es\/blog\/sasogu\/wp-json\/wp\/v2\/posts\/4444\/revisions"}],"predecessor-version":[{"id":4483,"href":"https:\/\/edutictac.es\/blog\/sasogu\/wp-json\/wp\/v2\/posts\/4444\/revisions\/4483"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/edutictac.es\/blog\/sasogu\/wp-json\/wp\/v2\/media\/4508"}],"wp:attachment":[{"href":"https:\/\/edutictac.es\/blog\/sasogu\/wp-json\/wp\/v2\/media?parent=4444"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/edutictac.es\/blog\/sasogu\/wp-json\/wp\/v2\/categories?post=4444"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/edutictac.es\/blog\/sasogu\/wp-json\/wp\/v2\/tags?post=4444"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}