sIFR: Tipografías en HTML

  • 31/05/2008
  • 9:54 pm
  • unijimpe

sIFR (Scalable Inman Flash Replacement) es una técnica que permite reemplazar elementos de texto HTML por un equivalente en Flash lo cual permite la inclusión de cualquier tipografía aun si el usuario no tiene instalada la tipografía en su computador.

Utilizando sIFR
Lo primero es descargar sIFR 3, extraemos los archivos donde tenemos una carpeta flash donde encontramos un archivo sifr.fla el cual debemos abrir en Adobe Flash y cambiar el tipo de letra, seleccionar los caracteres a renderear e incluso podríamos agregarle algunos filtros. Guardamos los cambios y exportamos el archivo. A este archivo recién exportado le damos un nombre, generalmente el nombre de la tipografía seleccionada.

Luego el siguiente paso es incluir los archivo sIFR-screen.css y sIFR-print.css ubicados en la carpeta css en el header del HTML seleccionado:

HTML:
  1. <link rel="stylesheet" href="sIFR-screen.css" type="text/css" media="screen">
  2. <link rel="stylesheet" href="sIFR-print.css" type="text/css" media="print">

Luego de ello es necesario incluir el archivo javascript sifr.js.

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

El tercer y ultimo paso es utilizar el metodo sIFR.replace para reemplazar bloques html por bloques flash que contienen la tipografía seleccionada, la sintaxis para ello es:

JavaScript:
  1. sIFR.replace({
  2.     src: 'path-font.swf',  // ruta al swf que contiene la fuente
  3.     selector: 'html-tag',  // tags a reemplazar
  4.     css: '.sIFR-root { prop: value }' // CSS para el flash
  5. });

Entonces si por ejemplo hemos creado un archivo llamado monotype.swf y queremos que lo reemplaze a todos los elementos h1, podemos hacerlo mediante:

HTML:
  1. <script type="text/javascript">
  2. sIFR.replace({
  3.     src: 'monotype.swf',
  4.     selector: 'h1'
  5. });
  6. </script>

Luego si deseamos que estos elementos tengan color #FF3366 y que tengan 24px de tamaño, agregamos la propiedad css, de la siguiente manera:

HTML:
  1. <script type="text/javascript">
  2. sIFR.replace({
  3.     src: 'monotype.swf',
  4.     selector: 'h1',
  5.     css: '.sIFR-root {color: #FF3366; font-size: 24px; }'
  6. });
  7. </script>

Ahora si por ejemplo deseamos reemplazar los elementos que tengan la clase blue por la tipografía bookman.swf y la queremos en tamaño 14px podemos utilizar:

HTML:
  1. <script type="text/javascript">
  2. sIFR.replace({
  3.     src: 'bookman.swf',
  4.     selector: '.blue',
  5.     css: '.sIFR-root {color: #0099FF; font-size: 14px;}'
  6. });
  7. </script>

Podemos utilizar varias veces el método sIFR.replace para reemplazar diferentes tipos de letra. Ahora uniendo todos los elementos en un html tenemos el siguiente código, en donde hemos utilizar el método de reemplazo en una sola línea cada una:

HTML:
  3. <title>Demo sIFR</title>
  4. <link rel="stylesheet" href="sIFR-screen.css" type="text/css" media="screen">
  5. <link rel="stylesheet" href="sIFR-print.css" type="text/css" media="print">
  6. <script type="text/javascript" src="sifr.js"></script>
  7. <script type="text/javascript">
  8. sIFR.replace({ src: 'monotype.swf', selector: 'h1', css: '.sIFR-root {color: #FF3366; font-size: 24px; }' });
  9. sIFR.replace({ src: 'bookman.swf', selector: '.blue', css: '.sIFR-root {color: #0099FF; font-size: 14px;}', forceSingleLine: true, tuneHeight: -9 });
  10. </script>
  11. </head>
  13. <h1>sIFR: Tipografías en HTML</h1>
  14. <p><span class="blue">sIFR</span> (<em>Scalable Inman Flash Replacement</em>)...</p>
  15. </body>
  16. </html>

Pueden ver el resultado de este ejemplo en Demo sIFR. Les dejo los archivos fuente de este ejemplo para que lo descarguen y puedan hacer sus pruebas.

Como una observación importante hay que notar que este método es recomendable utilizarlo solo para bloques pequeños y no para todo el html.

Mas Información

Posts Relacionados

Precargar archivos en AS3

  • 27/05/2008
  • 12:19 am
  • unijimpe

ActionScript 3 trae nuevos métodos, propiedades y eventos para implementar nuestras aplicaciones, en esta ocasión crearemos un precargador de archivos en AS3, para ello ahora estan disponibles nuevas clases: URLRequest y Loader.

Cargando Flash

La clase URLRequest nos permitirá asignar el archivo que deseamos cargar y la clase Loader nos permitirá hacer el seguimiento en el proceso de la carga.

Actionscript:
  1. var mcRequ:URLRequest = new URLRequest("image.jpg");
  2. var mcLoad:Loader = new Loader();

Luego de ello iniciamos la carga del archivo utilizando el método load de la clase Loader.

Actionscript:
  1. mcLoad.load(mcRequ);

Luego el siguiente paso es agregar los detectores de eventos, en esta caso detectaremos el inicio de la carga, el progreso de la carga y el fin de la carga.

Actionscript:
  1. mcLoad.contentLoaderInfo.addEventListener(Event.OPEN, onOpen);
  2. mcLoad.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, onProgress);
  3. mcLoad.contentLoaderInfo.addEventListener(Event.COMPLETE, onComplete);

Nótese que hemos agregado las funciones onOpen, onProgress y onComplete que se ejecutarán al inicio, progreso y fin de la carga. Entonces lo que hace falta es implementar estas funciones.

Actionscript:
  1. function onOpen(event:Event):void {
  2.     txtload.text = "CARGANDO 0%";
  3. }
  4. function onProgress(event:ProgressEvent):void {
  5.     var bLoad = event.bytesLoaded;
  6.     var bTot = event.bytesTotal;
  7.     txtload.text = "CARGANDO "+Math.round(100*bLoad/bTot)+"%";
  8. }
  9. function onComplete(event:Event):void {
  10.     txtload.text = "";
  11.     mcclip.addChild(mcLoad);
  12.     mcclip.width = 400;
  13.     mcclip.height = 134;
  14. }

En este paso hay que notar como se obtienes los valores de los bytes cargados (bytesLoaded) y los bytes totales (bytesTotal) para hacer el calculo del porcentaje de carga. Además de ello txtload es un campo de texto y mcclip un MovieClip que están en el Stage en donde se cargará la imagen. Finalmente una vez cargado la imagen la agregamos al MovieClip mcclip y luego lo escalamos para que encaje en nuestra película.

Uniendo todos los elementos, tenemos nuestro precargador de archivos en ActionScript 3, el cual fácilmente se puede convertir en una clase para poder utilizarla para precargar cualquier archivo.

Actionscript:
  1. var mcRequ:URLRequest = new URLRequest("image.jpg");
  2. var mcLoad:Loader = new Loader();
  3.  
  4. mcLoad.load(mcRequ);
  5. mcLoad.contentLoaderInfo.addEventListener(Event.OPEN, onOpen);
  6. mcLoad.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, onProgress);
  7. mcLoad.contentLoaderInfo.addEventListener(Event.COMPLETE, onComplete);
  8. function onOpen(event:Event):void {
  9.     txtload.text = "CARGANDO 0%";
  10. }
  11. function onProgress(event:ProgressEvent):void {
  12.     var bLoad = event.bytesLoaded;
  13.     var bTot = event.bytesTotal;
  14.     txtload.text = "CARGANDO "+Math.round(100*bLoad/bTot)+"%";
  15. }
  16. function onComplete(event:Event):void {
  17.     txtload.text = "";
  18.     mcclip.addChild(mcLoad);
  19.     mcclip.width = 400;
  20.     mcclip.height = 134;
  21. }

Como pueden ver, no es muy complicado solo hay que entender la logica de funcionamiento de AS3 y el correcto uso de los detectores de eventos. Para finalizar les dejo los archivos fuentes para que puedan descargar y hacer sus pruebas.

Posts Relacionados

flowPlayer: FLV Player

  • 19/05/2008
  • 12:47 am
  • unijimpe

flowPlayer es un reproductor de vídeos FLV, con soporte para FLV, SWF, MP3, MP4, H.264, JPG y PNG, soporte para listas de reproducción e incluso soporte para el protocolo RTMP (Flash Media Server, Red5) para vídeos en streaming y sobre todo es gratuito.

Características
flowPlayer es un reproductor muy bien logrado, fácil de utilizar y con muchas características destacables entre las cuales podemos listar:

  • Soporte para Video (FLV, MP4, H.264).
  • Vídeo en pantalla completa o fullscreen.
  • Vídeos en Descargar progresiva (Para archivos FLV).
  • Vídeos en Streaming (Flash Media Server, Red5).
  • Soporte para thumbnail de vídeos.
  • Soporte para controles mediante Javascript.
  • Habilidad para reproducir playlists.
  • Viene con varios temas o diseños incluidos.
  • Facilidad para personalizar el player.
  • Permite añadir publicidad antes de un vídeo.

Como utilizar flowPlayer
El uso es muy sencillo, primero descargamos los archivos desde Download Flowplayer, extraemos los archivos y escogemos el theme que mas se adecue a nuestras necesidades, luego con ayuda de SWFObject insertamos el vídeo, para ello primero incluimos SWFObject:

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

Luego creamos un DIV que contendrá a nuestro vídeo player:

HTML:
  1. <div id="flowplayer">Flowplayer</div>

Finalmente insertamos el player, definiendo el vídeo que deseamos reproducir, esto lo pasamos con flashvar utilizando el método addVariable de SWFObject, esto de la forma:

JavaScript:
  1. so = new SWFObject("flowplayer.swf","swf","400","250","9","");
  2. so.addVariable("config", "{videoFile: 'video.flv'}");
  3. so.write("flowplayer");

Cargando Flash

Obviamente existen multitud de parámetros que podemos configurar para lo cual hay una documentación muy detallada en Flowplayer Configuration. De la misma forma se puede cambiar el skin del player, para ello pueden consultar Skinning tutorial.

Posts Relacionados