¿Quieres registrarte?

Sustituir un SWF por otro sin refrescar el HTML con Ajax

Por: Zguillez
30 de Julio del 2009
7273 de clabLevel
Otros artículos de Zguillez
2,887 visitas

En este sencillo Tip mostraré un ejemplo de 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 :P

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:

Código :

<html>
    <head>
        <script type="text/javascript" src="swfobject.js"></script>
        <script>
            function putSWF(swf){
                swfobject.embedSWF(swf, "flash", "320", "240", "10.0.0", "expressInstall.swf");
            };
         putSWF("a.swf");
        </script>
    </head>
    <body>
        <div id="flash"></div>
    </body>
</html>


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:

Código :

    <body>
        <div id="botonera">
            <p>
                <a id="a" href="#">a.swf</a>
                - <a id="b" href="#">b.swf</a>
                - <a id="c" href="#">c.swf</a>
            </p>
        </div>
        <div id="flash"></div>
    </body>


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.

Código :

var swfRef = {
     a: "a.swf",
     b: "b.swf",
     c: "c.swf"
};


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.

Código :

$(function(){
       $.each(swfRef, function(i, val){
              $("#" + i).click(function(){
                     putSWF(val);
              });
       });
       $("#a").click();
});


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:

Código :

<html>
    <head>
        <script type="text/javascript" src="swfobject.js"></script>
        <script src="lib/jquery/jquery-1.3.2.js"></script>
        <script>
            function putSWF(swf){
                swfobject.embedSWF(swf, "flash", "320", "240", "10.0.0", "expressInstall.swf");
            };
            var swfRef = {
                a: "a.swf",
                b: "b.swf",
                c: "c.swf"
            };
            $(function(){
                $.each(swfRef, function(i, val){
                    $("#" + i).click(function(){
                        putSWF(val);
                    });
                });
                $("#a").click();
            });
        </script>
    </head>
    <body>
        <div id="botonera">
            <p>
                <a id="a" href="#">a.swf</a>
                - <a id="b" href="#">b.swf</a>
                - <a id="c" href="#">c.swf</a>
            </p>
        </div>
        <div id="flash"></div>
    </body>
</html>

Enviar a twitter Enviar a facebook


También te interesa


Etiquetas javascript ajax jquery swfobject

Comentarios | Enviar un comentario
Diablos! porq no se JQuery...

de todos modos muy buen tip ;)
Por: pH-blog
esta bueno, me hace recordar a los Module en Flex, felicitaciones Z ^^
Por: eldervaz
No puedo explicar lo increiblemente bueno que es este tip. Me encantó Z. Es muy útil y la forma en la que lo integraste con jQuery hace que hasta gente como penHolder lo pueda implementar sin saber JS.

Mira, aqui tienes una estrellita para ti:
Por: Freddie
Excelente!
Por: Mr_Anderson
Como si estuviera en primero.
Por: Mr_Anderson
Muchas gracias, luego cambiaré el swf por esto, muy interesante. Una pregunta, hay alguna manera de que una película SWF se quede por debajo de un DIV??, es que tengo creado un mensaje popup con un DIV y cuando pasa al lado del trozo en flash se queda este por encima y queda muy feo. xD Un saludo.
Por: Dybite-blog
Por cierto mi e-mail es dybite@gmail.com Gracias. Un saludo.
Por: Dybite-blog
Excelente tip! Muy util.
Por: Patrol

Dybite-blog :

Muchas gracias, luego cambiaré el swf por esto, muy interesante. Una pregunta, hay alguna manera de que una película SWF se quede por debajo de un DIV??, es que tengo creado un mensaje popup con un DIV y cuando pasa al lado del trozo en flash se queda este por encima y queda muy feo. xD Un saludo.

Eso lo solucionas pasándole el parámetro wmode como transparente..
Por: Zguillez
Wow genial tip Zguillez (Y)
Por: fredybg
Excelente tip Z y muy útil en verdad. Felicidades
Por: flashreloco
Gracias Zguillez por el Tip, luego lo pruebo, este finde he tenido lio. Un saludo.
Por: Dybite-blog
Muy buen tip, me recuerda mucho a la pagina de estadísticas en el perfil de cada usuario... Excelente,
Por: M@U
Muy interesante.... ahora... una consulta ¿se puede hacer en viceversa? o sea que los botones en flash cargue el contenido (html) en un div id="ejemplo"?

Gracias.
Por: Pascu-blog
Deja un comentario
IMPORTANTE

Recuerda ser respetuoso, no insultes a otras personas, ni uses palabrotas, hay una persona al otro lado de la pantalla.

Habla bien, NO ESCRIBAS EN MAYUSCULA TODO, no escribas como en un SMS, evita cosas como "ke", "x q" y demás abreviaciones.

Aquí funcionan las etiquetas de los foros, puedes usar [b] para negrita, [img] para las imágenes, [url] para los enlaces, etc.

Si tienes preguntas técnicas, envíalas mejor al foro.