Home » Ajax »Básico » Currently Reading:

Sustituir un SWF por otro sin refrescar el HTML con Ajax

julio 30, 2009 Ajax, Básico 4 Comments
Sustituir un SWF por otro sin refrescar el HTML con Ajax

En este sencillo ejemplo mostraré como sustituir un archivo SWF de una página HTML por otro sin necesidad de refrescar la página. (ejemplo)

Para ello utilizaremos SwfObject y JQuery. En realidad JQuery no haria falta utilizarlo ya que quien sustituirá el SWF será SwfObject y podriamos hacer la llamada con una simple funcion Javascript. Pero nunca está de más ver un poco de Ajax

Para empezar nos descargaremos las librerias:

.
Lo primero será colocar nuestra pelicula SWF dentro de la página HTML con SwfObject de la forma típica. Creando una DIV y asignandole ahí la pelicula SWF. Lo haremos creando una función que reciba el parámetro de la URL del SWF para poder volver a llamar esa función más adelante:

  1. <script src="swfobject.js" type="text/javascript"></script> <script type="text/javascript">// <![CDATA[
  2.             function putSWF(swf){
  3.                 swfobject.embedSWF(swf, "flash", "320", "240", "10.0.0", "expressInstall.swf");
  4.             };
  5.             putSWF("a.swf");
  6.  
  7. // ]]></script>

Ahora crearemos unos cuantos links con los que queremos cambiar de pelicula SWF pero sin cambiar de página HTML. Los colocaremos en otro DIV y asignaremos a cada enlace un ID diferente:

  1. <div id="botonera">
  2.  
  3. <a id="a" href="#">a.swf</a>
  4. - <a id="b" href="#">b.swf</a>
  5. - <a id="c" href="#">c.swf</a></div>

Podríamos hacer que cada enlace volviera a ejecutar la función Javascript y listo, pero haremos el ejemplo más c00l utilizando JQuery.

Primero definiremos un objeto en el que guardaremos una relación entre los ID de los enlaces y la pelicula SWF que han de abrir.

  1. var swfRef = {
  2. a: "a.swf",
  3. b: "b.swf",
  4. c: "c.swf"
  5. };

Y por último crearemos una función de JQuery que asignará a cada enlace la llamada a la función Javascript pasandole el parámetro que toca. Tambien sustituiremos la primera llamada.

  1. $(function(){
  2. $.each(swfRef, function(i, val){
  3. $("#" + i).click(function(){
  4. putSWF(val);
  5. });
  6. });
  7. $("#a").click();
  8. });

Y listo, ahora cada enlace sustituye el SWF por otro dentro de la misma página.

Aqui se puede ver el ejemplo: http://www.cristalab.com/zguillez/ajax/putswf/index.html

Y el código completo:

  1. <html>
  2.     <head>
  3.         <script type="text/javascript" src="swfobject.js"></script>
  4.         <script src="lib/jquery/jquery-1.3.2.js"></script>
  5.         <script>
  6.             function putSWF(swf){
  7.                 swfobject.embedSWF(swf, "flash", "320", "240", "10.0.0", "expressInstall.swf");
  8.             };
  9.             var swfRef = {
  10.                 a: "a.swf",
  11.                 b: "b.swf",
  12.                 c: "c.swf"
  13.             };
  14.             $(function(){
  15.                 $.each(swfRef, function(i, val){
  16.                     $("#" + i).click(function(){
  17.                         putSWF(val);
  18.                     });
  19.                 });
  20.                 $("#a").click();
  21.             });
  22.         </script>
  23.     </head>
  24.     <body>
  25.         <div id="botonera">
  26.             <p>
  27.                 <a id="a" href="#">a.swf</a>
  28.                 - <a id="b" href="#">b.swf</a>
  29.                 - <a id="c" href="#">c.swf</a>
  30.             </p>
  31.         </div>
  32.         <div id="flash"></div>
  33.     </body>
  34. </html>

Compártelo:

Sustituir un SWF por otro sin refrescar el HTML con Ajax
Visto 7.513 veces

Currently there are "4 comments" on this Article:

  1. Carlos Joven dice:

    Utilizando algo similar a tu codigo como puedo hacer que el boton entrar de mi pagina llame otro swf en la misma index html

  2. Submundo dice:

    Hola, buen tip, aplicando un efecto fadeout o fadein desde jquery has detectado un bug en jquery ? Lo has solventado ?

    Saludos

  3. andemarum dice:

    muy buen aporte… pero surgen problemas.

    si me descargo la web de ejemplo y sustituyo los swf por los mios perfecto, pero el problema biene cuando lo intento poner en mi web, pues no hay manera de que se abran los swf, aqui dejo el codigo por si algun alma caritativa pudiera solventarlo, gracias.

    J. Alexander

    function putSWF(swf){
    swfobject.embedSWF(swf, “flash”, “320”, “240”, “10.0.0”, “expressInstall.swf”);
    };
    putSWF(“a.swf”);
    var swfRef = {
    a: “a.swf”,
    b: “galmodel.swf”,
    c: “gal3d.swf”
    };
    $(function(){
    $.each(swfRef, function(i, val){
    $(“#” + i).click(function(){
    putSWF(val);
    });
    });
    $(“#a”).click();
    });

  4. Alejandro dice:

    de que manera, puedo lograr que los swf se cambien con un onMouseOver y un onMouseOut

    Si, alguien tiene la respuesta, quedo muy agradecido por faa…

Comment on this Article:








Twitter: zguillez

AdvertisementAdvertisementAdvertisementAdvertisement

Recibe las novedades por email

Post destacado

Visualizar menús desplegables HTML por encima de películas Flash

31 jul 2009

Este es otro “, que es muy sencillo pero que da dolores de cabeza a la gente que apenas se inicia en el mundo de únicamente utilizando los códigos automáticos de que trae . El problema que muchos se encuentran es que los menús desplegables les quedan por debajo de las peliculas , aun estando está en un index inferior. Esto tiene una solución muy sencilla, y pasa por añadirle la propiedad de la pelicula Flash a valor invisible. De manera que si estamos utilizando para colocar el SWF, utilizariamos este código: <script type="text/javascript">            var …



Map

Ranking

Codigoactionscript.org: 4.65 sobre 5 (106 valoraciones)

twitter-widget.com