swfIR, agregando efectos a nuestras imágenes con Flash y JavaScript
lunes, 05 de marzo de 2007

swfIRCombinando Flash y JavaScript, swfIR (SWF Image Replacement) es un nuevo desarrollo que permite agregar de manera fácil efectos a nuestras imágenes. Estos efectos van desde sombras degradadas y bordes redondeados hasta rotación y elasticidad.

Para utilizar a swfIR debemos contar con dos archivos que vienen en el paquete de descarga : swfir.js y swfir.swf. Lo siguiente será añadir la librería JS a nuestra web:

 

HTML
  1. <script type="text/javascript" src="swfir.js"></script>

  

Luego tendremos que incorporar las funciones y parámetros para agregar los efectos. La estructura JavaScript básica es:

 

  1. window.onload = function() {
  2.   var sir = new swfir();
  3.   sir.specify([parametro], [valor]);
  4. }

 

En donde parametro es el efecto que queremos incorporar seguido por su valor (numero, booleano o string, dependiendo del efecto). De esta forma si queremos incorporar a todas las imágenes de una página un efecto de sombra degradada, borde redondeado y una rotación de 15 grados tendremos que incorporar antes de cerrar el body:

 

HTML
  1. <script type="text/javascript">
  2. window.onload = function(){ 
  3.   sir = new swfir();
  4.   sir.specify('src', 'swfir.swf');
  5.   sir.specify("shadow-offset", "10");
  6.   sir.specify("shadow-color", "666");
  7.   sir.specify("shadow-blur-x", "10");
  8.   sir.specify("shadow-blur-y", "10");
  9.   sir.specify("border-radius", "30");
  10.   sir.specify("rotate", "15");
  11.   sir.swap("img");
  12. }
  13. </script>

 

Quedando las imágenes de este modo :

 

Ejemplo de swfIR  

 

En caso de querer solo aplicar el efecto a una sola imagen tan solo debemos especificar su id o clase que le hallamos asignado:

 

HTML
  1. <script type="text/javascript">
  2. window.onload = function(){ 
  3.   sir = new swfir();
  4.   sir.specify('src', 'swfir.swf');
  5.   sir.specify("shadow-offset", "10");
  6.   sir.specify("shadow-color", "666");
  7.   sir.specify("shadow-blur-x", "10");
  8.   sir.specify("shadow-blur-y", "10");
  9.   sir.swap("#imagen img");
  10. }
  11. </script>

 

 

De esta manera le asignamos sombra a  las imágenes que tengan el id imagen.

En conclusión swfIR es una interesante tecnología para aplicar efectos, pero que posee un par contras, su peso (22 KB) y su velocidad de renderización, que puede tardar varios segundos dependiendo de la cantidad de imágenes y su peso. La elección de utilizarlo o no va a depender de cada uno.

Finalmente vale aclarar dos puntos: La librería swfir.js trae incorporada una versión modificada de SWFObject para no tener problemas con Internet Explorer , esto hace que su peso sea elevado (al ser dos scripts en uno). Y si el usuario posee desactivado JavaScript o Flash, las imágenes se mostrarán normalmente.

 

 

 


Tags:  recursos scripts flash

..y tal vez te interese:




 Comentarios


  • Por favor, mantenga el tópico de los mensajes en relevancia con el tema del artículo.
  • Lenguaje inapropiado será borrado.


Nombre:
E-mail:
Sitio Web:
Comentario:

Código:* Code
 
Delicious
Mister Wong
< Anterior   Siguiente >
[Volver]

Suscribirse por feed


Suscribirse por e-mail

Tu dirección de correo
  • Aleatorios
  • Lo más leido
  • Destacados

Nube de tags

Blogs Recomendados

Sitios Recomendados