{"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":"<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<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<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<pre class=\"wp-block-code\"><code>&lt;script src=&quot;https:\/\/unpkg.com\/@ruffle-rs\/ruffle&quot;&gt;&lt;\/script&gt;<\/code><\/pre>\n<p>I he creat un shotcode <\/p>\n<pre class=\"wp-block-code\"><code>&lt;?php\n\/**\n * Shortcode <div style=\"position:relative;max-width:0px;aspect-ratio:&quot;4\/3&quot;;\"><div id=\"swf_38f3429b-fa1d-48b7-b7de-7e4c04b6f510\" style=\"position:absolute;inset:0;\"><\/div><\/div><script>window._ruffleSwfQueue=window._ruffleSwfQueue||[];window._ruffleSwfQueue.push({id:\"swf_38f3429b-fa1d-48b7-b7de-7e4c04b6f510\",url:\"http:\/\/&quot;...&quot;\",fsbtn:false});<\/script>\n * - fullscreen=&quot;1&quot;: a&ntilde;ade bot&oacute;n de pantalla completa.\n *\/\n\nadd_action(&#039;wp_enqueue_scripts&#039;, function () {\n    if (!wp_script_is(&#039;ruffle&#039;, &#039;enqueued&#039;)) {\n        $src = &#039;https:\/\/cdn.jsdelivr.net\/npm\/@ruffle-rs\/ruffle\/ruffle.js&#039;;\n        wp_enqueue_script(&#039;ruffle&#039;, $src, [], null, false);\n        $loader = &lt;&lt;&lt;JS\n(function(){\n  window._ruffleSwfQueue = window._ruffleSwfQueue || [];\n  function boot(){\n    if(!window.RufflePlayer || typeof window.RufflePlayer.newest !== &quot;function&quot;){\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 = &quot;1&quot;;\n      player.load(item.url);\n      if(item.fsbtn){\n        var btn = document.getElementById(item.id + &quot;_fsbtn&quot;);\n        btn.addEventListener(&quot;click&quot;, () =&gt; player.enterFullscreen());\n      }\n    });\n  }\n  document.addEventListener(&#039;DOMContentLoaded&#039;, boot, {once:true});\n  boot();\n})();\nJS;\n        wp_add_inline_script(&#039;ruffle&#039;, $loader);\n    }\n});\n\nadd_shortcode(&#039;swf&#039;, function ($atts) {\n    $a = shortcode_atts([\n        &#039;url&#039;    =&gt; &#039;&#039;,\n        &#039;width&#039;  =&gt; &#039;800&#039;,\n        &#039;height&#039; =&gt; &#039;600&#039;,\n        &#039;ratio&#039;  =&gt; &#039;&#039;,\n        &#039;nightly&#039;=&gt; &#039;0&#039;,\n        &#039;fullscreen&#039; =&gt; &#039;0&#039;,\n    ], $atts, &#039;swf&#039;);\n\n    if (strpos($a[&#039;url&#039;], &#039;http:\/\/&#039;) === 0) {\n        $a[&#039;url&#039;] = preg_replace(&#039;#^http:\/\/#&#039;, &#039;https:\/\/&#039;, $a[&#039;url&#039;]);\n    }\n\n    $id     = &#039;swf_&#039; . wp_generate_uuid4();\n    $url    = esc_url($a[&#039;url&#039;]);\n    $width  = intval($a[&#039;width&#039;]);\n    $height = intval($a[&#039;height&#039;]);\n    $ratio  = trim($a[&#039;ratio&#039;]);\n    $fs     = ($a[&#039;fullscreen&#039;] === &#039;1&#039;);\n\n    if (!$url) return &#039;&lt;em&gt;<em>[swf] Falta el atributo url.<\/em> Falta el atributo url.&lt;\/em&gt;&#039;;\n\n    if ($ratio) {\n        $style = sprintf(&#039;position:relative;max-width:%dpx;aspect-ratio:%s;&#039;, $width, esc_attr($ratio));\n        $inner = &#039;position:absolute;inset:0;&#039;;\n    } else {\n        $style = sprintf(&#039;width:%dpx;height:%dpx;position:relative;&#039;, $width, $height);\n        $inner = &#039;position:absolute;inset:0;&#039;;\n    }\n\n    $html  = &#039;&lt;div style=&quot;&#039;. esc_attr($style) .&#039;&quot;&gt;&#039;;\n    $html .= &#039;&lt;div id=&quot;&#039;. esc_attr($id) .&#039;&quot; style=&quot;&#039;. esc_attr($inner) .&#039;&quot;&gt;&lt;\/div&gt;&#039;;\n    $html .= &#039;&lt;\/div&gt;&#039;;\n\n    if ($fs) {\n        $html .= &#039;&lt;button id=&quot;&#039;. esc_attr($id) .&#039;_fsbtn&quot; style=&quot;margin-top:6px;&quot;&gt;Pantalla completa&lt;\/button&gt;&#039;;\n    }\n\n    $html .= &#039;&lt;script&gt;window._ruffleSwfQueue=window._ruffleSwfQueue||[];window._ruffleSwfQueue.push({id:&quot;&#039;\n          . esc_js($id) . &#039;&quot;,url:&quot;&#039; . esc_js($url) . &#039;&quot;,fsbtn:&#039;. ($fs?&#039;true&#039;:&#039;false&#039;) .&#039;});&lt;\/script&gt;&#039;;\n\n    return $html;\n});\n<\/code><\/pre>\n<p>Despr\u00e9s en un bloc html<\/p>\n<pre class=\"wp-block-code\"><code><em>[swf] Falta el atributo url.<\/em><\/code><\/pre>\n<p>Ac\u00ed un exemple del resultat:<\/p>\n<em>[swf] Falta el atributo url.<\/em>\n<p>P\u00e0gina web <a href=\"https:\/\/ruffle.rs\/downloads\">https:\/\/ruffle.rs\/downloads<\/a><\/p>","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>","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}]}}