Haga click para activar este control

Publicado por Carla Macías
28 Mayo, 2008

Flash

"Haga click para activar este control" es el mensaje que aparece en los navegadores de Internet Explorer cuando se tienen elementos de Flash en una página Web insertados por medio del tag <object> </object>. Este molesto mensaje hace que los visitantes tengan que dar un click al elemento de Flash para poder activarlo e interactuar con él.

Actualmente existen varias soluciones a este molesto problema, una de ellas es la opción que ofrece Dreamweaver (apartir de su versión 8.0.2) de crear un archivo AC_RunActiveContent.js dentro de una carpeta llamada Scripts y cambiar el código con el que se inserta el SWF por un código de JavaScript.

Cuando se abre en Dreamweaver un documento HTML que contiene archivos SWF incluídos, Dreamweaver mostrará un mensaje de texto preguntando si se desea convertir las etiquetas de <object/> en scripts válidos.

Figura 1: Mensaje de Dreamweaver sobre Contenido Activo

En caso de hacer click en el botón de Sí, Dreamweaver cambiará el código de <object/> por uno similar a:

Texto Plano
HTML:
  1. <script type="text/javascript">
  2. AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','960','height','75','src','DockMenu','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','wmode','transparent','movie','DockMenu' ); //end AC code
  3. </script><noscript><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="960" height="75">
  4.       <param name="movie" value="Menu.swf" />
  5.       <param name="quality" value="high" />
  6.       <param name="wmode" value="transparent" />
  7.       <embed src="Menu.swf" width="960" height="75" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" wmode="transparent"></embed>
  8.     </object>
  9.   </noscript>

Donde el código generado por Dreamweaver es para un SWF de nombre Menu con 960 pixeles de ancho y 75 pixeles de alto y transparente. Además, agrega dentro de los tags de <head> </head> la línea de código donde indica que se debe incluir el archivo AC_RunActiveContent.js.

Texto Plano
HTML:
  1. <script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>

Dentro de las preferencias de Dreamweaver (Menú Edición -> Preferencias...) está la categoría de "Reescritura de código" en la cual podemos cambiar las preferencias con respecto al "Contenido Activo".

Figura 2: Preferencias de Contenido Activo

Otra solución fácil de implementar y muy completa es usar el script swfobject, el cual puedes bajar la versión 2.0 de aquí. Para usarlo simplemente tienes que realizar los siguientes pasos:

1. Bajar el archivo y ponerlo en una carpeta de tu servidor (Ej. Carpeta js)

2. Insertar dentro del head de tu página el siguiente código para incluir la librería swfobject:

Texto Plano
HTML:
  1. <script type="text/javascript" src="js/swfobject.js"></script>

3. Después de haber insertado la línea de código anterior y antes de cerrar el tag </head> deberás escribir un código similar al siguiente:

Texto Plano
HTML:
  1. <script type="text/javascript">
  2.     swfobject.embedSWF("Menu.swf", "Menu", "960", "75", "9.0.0");
  3. </script>

Los parámetros de esta función deberás modificarlos de acuerdo a tus necesidades.
El primer parámetro de la función embedSWF hace referencia al URL del archivo SWF, el segundo parámetro es el ID del elemento (el cual se utilizará en el momento de establecer el elemento de Flash dentro del body o cuerpo de tu página), el tercero es el ancho (width) de tu película, el cuarto parámetro indica la altura de la película (height) y el último parámetro específica la versión mínima del Flash Player que el visitante de tu página debe tener para poder observar bien la película. Estos cinco parámetros son obligatorios, sin embargo existen otros parámetros opcionales como es el paso de variables al SWF desde el código JavaScript que lo manda a llamar (params), flashvars, etc.

Después de haber declarado tu elemento de Flash, debes poner dentro del cuerpo (body) de tu página el lugar donde irá insertado el SWF:

Texto Plano
HTML:
  2.     <div id="Menu"> // El id debe ser igual al que escribiste en el código de JavaScript como el segundo parámetro de la función embedSWF
  3.       <p>Para ver este archivo es necesario tener Flash Player 9.0</p>
  4.     </div> 
  5. </body>

Estos dos métodos son los más usados para resolver el problema de los contenidos activos en Internet Explorer.


Enlaces recomendados:

» Preparación de sitios web con contenido activo para cambios del explorador anunciados
» Converting Active Content with the Dreamweaver 8.0.2 Updater
» Documentation SWFObject

Tags: , , , ,
Flash

Si te gustó esta entrada anímate a escribir un comentario o suscribirte al feed y obtener los artículos futuros en tu lector de feeds.

Comentarios
  Comentario por Erick el Agosto 1, 2008 @ 9:07 am

HOLA BUENOS DIAS ESPERO Y ME PUEDAS AYUDAR EN ESTE PROBLEMA QUE TENGO: ESTOY TRATNDO DE CONECTAR FLASH Y VISUAL STUDIO 2005 PERO EL BOTON SHOCKWAVE FLAS OBJECT NO SE ACTIVA YA HIZE TODAS LAS OPCIONES QUE E ECONCOTRADO EN INTERNET Y NADA INCLUSO COLOQUE EL CODIGO QUE TIENES EN ESTA SECCION Y NADA BUENO NO SE SI LO COLOQUE EN EL SITIO CORRECTO ME PUEDES AYUDAR A SOLUCIONAR MI PROBLEMA TE LO AGRADECERIA. GRACIAS
quiero lo mismo pero con visual studio 2005

  Comentario por Carla Macías el Agosto 1, 2008 @ 6:50 pm

Hola Erick,

Disculpa pero no entendí tu pregunta. ¿A qué te refieres con conectar Flash y Visual Studio 2005? ¿En qué estás programando? ¿Visual Basic, C#, ASP? No entiendo lo del botón de Shockwave Flash Object que no se activa.
Recuerda que el tutorial de esta entrada es para que cuando el visitante esté usando Internet Explorer no le aparezca el borde y el mensaje de que primero hay que activar el contenido.

Saludos.

  Comentario por mariela el Septiembre 26, 2008 @ 3:02 pm

HOla, intente con los dos metodos que dijiste , pero ninguno de los dos me funciona, en el primero me sale objeto no entontrado, en el segundo no me muestra nada,
No tengo instalado flash, yo quiero q para que vean mi pagina no tengan que tener instalado flash

  Comentario por Carla Macías el Septiembre 26, 2008 @ 3:35 pm

Hola Mariela,

No necesitas tener el programa tal cual de Flash instalado en tu computadora, pero sí necesitas tener instalado el Flash Player el cual puedes bajarlo de esta página: http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash&promoid=BUIGP.

Si te aparece objeto no encontrado es posible que sea por que está mal la ruta del archivo js (ya sea el archivo AC_RunActiveContent.js o el swfobject.js) o bien que hay un error en el código que incluiste en el HTML.

Saludos.

Escribe un comentario

Nota: Es posible que tu comentario requiera autorización, si es así tu comentario será publicado a la brevedad. Gracias.

(requerido)

(requerido)