Técnicas de reemplazo de texto en Flash
Miércoles, 25 de junio, 2008La técnica de reemplazo de texto que presento hoy es en algunos aspectos, realmente interesante. A diferencia de la clásica imagen para sustituir a través de CSS, esta técnica utiliza un flash anular los títulos de nuestro sitio. A pesar de ser un poco más, ya que requiere la creación de una película Flash y el uso de Javascript, permite una serie de ventajas no indiferentes:
- Mantiene 's la accesibilidad del sitio utilizando un Verdadero-discreta-Javascript para que las arañas y los rastreadores sigan viendo la página lo más simple y correcta en HTML
- No requiere la creación de imágenes para n n títulos. Sólo una película para sustituir a todos los títulos de nuestro sitio, con un considerable ahorro en términos de la descarga
- Le permite crear simples títulos, pero con fuentes que no suelen utilizarse en la Web
- El texto puede ser dictada en HTML, gracias a las características de Flash
- El texto es seleccionable
- Un flash que se puede añadir la interactividad y la animación de cualquier tipo
Usted notará también que este procedimiento CSS prácticamente no se tienen en cuenta!
Las herramientas que usamos
Antes de proceder a ver lo que tenemos que utilizar esta técnica.
- Adobe Flash para crear la película que tomará el lugar de nuestro título
- La biblioteca SWFObject para la inclusión - dinámica - la película (discreto)
- La biblioteca prototype.js para automatizar todo, voy a utilizar ejemplos en el nuevo cargador de Google AJAX Library API, pero si desea puede incluir prototype.js en su nombre por separado
Además de Flash, otros instrumentos son sustituibles por otras funciones o soluciones personales.
La película Flash
Imagínese que usted desea hacer un título con una fuente particular, lo que hace innecesaria la CSS, porque el problema es que las fuentes no puede ser instalado en la máquina-los intereses de los usuarios y, por tanto, no aparecen por el final:
Abrir el Flash y crear una película con un tamaño similar a la del título que queremos sustituir. Como veremos no es importante dimensión que en conjunto en tiempo de diseño, esto se puede cambiar más tarde sin afectar el rendimiento de las letras. Insertar un objeto de texto:
Haga clic en "Insertar" y seleccione:
En el primer cuadro incluir este simple y desarmar el código:
- / / Funciona para cualquier tamaño
- = StageScaleMode. NO_SCALE ; etapa. scaleMode = StageScaleMode. NO_SCALE;
- = StageAlign. TOP_LEFT ; etapa. align = StageAlign. TOP_LEFT;
- / / Dibujar en el parámetro contenido pasó de Javascript
- this . loaderInfo . parameters . content == null ) ? 'Errore' : this . loaderInfo . parameters . content ; etiqueta. htmlText = (this. loaderInfo. parámetros. contenido == null)? "error": este. loaderInfo. parámetros. contenido;
Y compilar nuestra película (textreplacement.swf) y, a continuación, pasar el código HTML de marcas, utilizando previamente un punto de vista, a fin de maximizar la compatibilidad:
En el head de sección del código son:
El TAG h1 se sustituye por nuestro textreplacement.swf película, content el contenido que contiene la cadena de título. En una situación más y más títulos, esta solución se convierte en un inconveniente, aunque siempre es más "emocionante" la mera sustitución a través de CSS: haga clic aquí por ejemplo (tenga en cuenta que el texto está seleccionado).
El título tiene dos un contenido HTML y se hace de motor de Flash, escrita en rojo:
- "textreplacement.swf" , "titolo_due" , "544" , "50" , "9.0.0" , null , { content: 'Titolo <font color="#ff0000">due</font>' } ) ; swfobject. embedSWF ( "textreplacement.swf", "titolo_due", "544", "50", "9.0.0", null, (contenido: «Título <font color="#ff0000"> dos </ font> ' ));
Por cada título de la página, de hecho, debe insertar una línea que indica una Javascript SWFObject la ID y el contenido del título que se trata. Uso de prototype.js y entrar en una clase para interceptar las pruebas que se sustituye, podemos escribir una simple función que puede reemplazar a todos los títulos de la página con contenido Flash, teniendo el punto de referencia content directamente dall'HTML: haga clic aquí por ejemplo.
- google. setOnLoadCallback (
- función () (
- ) . each ( $ $ ( 'H1.text de sustitución »). Cada uno (
- element ) { función (elemento) (
- "textreplacement.swf" , element. id , "544" , "50" , "9.0.0" , null , { content: element. innerHTML } ) ; swfobject. embedSWF ( "textreplacement.swf" elemento. id, "544", "50", "9.0.0", null, (contenido: elemento. innerHTML));
- )
- );
- )
- );
En este caso he utilizado google.setOnLoadCallback() como el uso de AJAX Google API Library para cargar prototype.js. A continuación, todos los interceptados TAG h1 clase conjunto con text-replacement En ese momento se llama SWFObject para insertar el tema element.id a la conclusión element.id nuestra película Flash. Tenga en cuenta que se utiliza element.innerHTML para escoger el contenido de texto para pasar a flash. Esto realmente pasar el TAG span pero esto no es un probelma de haber establecido en el texto de la película Flash como HTML.
Flash también permite una variedad de efectos (en tiempo de ejecución) que hacen que esta técnica realmente "nice": haga clic aquí por ejemplo.
Lo que se presenta es, evidentemente, un simple ejemplo! Sin embargo, el código Javascript y HTML taggature se puede mejorar y hacer que esta técnica realmente espectaculares. Puede insertar títulos de animación o gráficos de los antecedentes, además de simplemente el uso de fuentes no ser utilizado por CSS. Con las modificaciones apropiadas puede pasar parámetros adicionales a nuestra película Flash, por lo que es aún más dinámico: Tamaño de fuente, la posición del texto, para llevar a cabo acciones para hacer clic, etc ... También puede crear una serie de películas para los diferentes tipos de valores que se va a sustituir, proporcionando un importante ahorro en términos de tiempo de descarga!
Déjanos tu comentario