Cómo utilizar sIFR
Por Yëco en ActionScript, OpenSource6 de Junio, 2007 | 4:02 pm | CompartirsIFR (Scalable Inman Flash Replacement) es una conocida tecnología que permite reemplazar pequeños trozos de textos por su equivalente en Flash. Su modo de operacion se basa en combinar JavaScript, CSS y ActionScript. Su mayor utilidad es poder mostrar textos con tipografías que el usuario no tiene instalada en su computadora. [ Ejemplo ]
Además en caso de no tener instalado Flash Player, sIRF lo detecta y nos muestra el texto original. Por otra parte no es recomendable para textos grandes, sino para títulos, encabezados y muy pequeños párrafos.
Entonces, si tenemos un texto como este:
Con sIRF veremos:
En el ejemplo se ve el texto con la fuente Scriptina . Y aca no hay limite, se puede utilizar cualquier fuente…
Implementación
En primer lugar necesitaremos 4 archivos que vienen dentro del paquete de descarga [ Bajar ]
- sifr.js : Es el script que permitirá intercambiar el texto HTML.
- sIFR-screen. css y sIFR-print.css : son los estilos en cascada necesarios para mostrar el .SWF. Ademas debemos contar con nuestro propio estilo en cascada principal, con las reglas que formatearán los textos originales (en caso de no tener habilitado el Flash Player)
- tipografia.swf: Es el archivo Flash que contendrá la fuente que se utilizará. En el paquete de descarga vienen dos: tradegothic.swf y vandenkeere.swf. Es decir que uno de los archivos contendrá la fuente Trade Gothic y el otro VandenKeere.
Lo primero que se hace es añadir los CSS y el JS. Para eso entre
y ponemos:<link rel=”stylesheet” href=”sIFR-screen.css” type=”text/css” media=”screen” />
<link rel=”stylesheet” href=”sIFR-print.css” type=”text/css” media=”print” />
<script src=”sifr.js” type=”text/javascript”></script>
Luego supongamos que tenemos un encabezado con la etiqueta H1:
<h1><a href=”http://www.google.com” target=”_self”>Google</a>
Finalmente debemos incorporar un pequeño codigo JS con los parámetros de sIRF. Los más importantes son:
- sSelector: La etiqueta HTML a reemplazar;
- sFlashSrc: El archivo Flash;
- sColor: El color de las letras, en hexadecimal (#C0C0C0);
- sLinkColor: El color en caso de ser un link;
- sHoverColor: El color cambiante en caso de ser un link;
- sBgColor: El color de fondo.
Existen varios parámetros más, en el wiki de sIFR explican que es cada uno [sección Replacement Syntax]
Por lo tanto agregaremos un pequeño codigo JavaScript con los parámetros arriba puestos:
<script type=”text/javascript”>
if(typeof sIFR == “function”){
sIFR.replaceElement(named({sSelector:”h1″, sFlashSrc:”actionIs.swf”, sColor:”#99C137″, sLinkColor:”#99C137″, sBgColor:”#C0C0C0″, sHoverColor:”#508A15″}));
};
</script>
De esta forma estamos indicando que se debe reemplazar el texto entre las etiquetas H1 por el archivo actionIs.swf (que contiene la fuente Action Is ). Además el color de las letras debe tener tonos verdes con un fondo gris.
En caso de querer agregar más reemplazos tenemos:
<script type=”text/javascript”>
if(typeof sIFR == “function”){
sIFR.replaceElement(named({sSelector:”h1″, sFlashSrc:”actionIs.swf”, sColor:”#99C137″, sLinkColor:”#99C137″, sBgColor:”#c0c0c0″, sHoverColor:”#508A15″}));
sIFR.replaceElement(named({sSelector:”h2″, sFlashSrc:”vandenkeere.swf”, sColor:”#FFFFFF”, sLinkColor:”#FFFFFF”, sBgColor:”#CCCCCC”, sHoverColor:”#F5F8FF”}));
};
</script>
En este caso se agrego para que reemplace a la etiqueta H2. Y eso es todo, si tenemos algo así:
Implementando sIFR quedaría:
Algo más que agregar…
Existe un addon para sIFR que permite darle la posibilidad al usuario de ver o no los textos en Flash. Este addon viene en el paquete de descarga y se llama sifr-addons.js. De esta forma si agregamos este archivo entre <head> y </head>
<script src=”sifr-addons.js” type=”text/javascript”></script>
Y luego agregamos un link asi haremos que se desabilite sIFR:
<a href=” javascript:sIFR.rollback();”>Quitar sIFR</a>
También hay varios plugins para los distintos CMS: WordPress , Joomla , Drupal.
-
Yëco
-
J. Bascur
Quién?
