Advertisement
  1. Code
  2. Designing

Texto con formato HTML maestro en Flash

by
Read Time:20 minsLanguages:

Spanish (Español) translation by Kelly Gianella (you can also view the original English article)

Vamos a ver cómo mostrar texto con formato HTML cargado desde XML, con estilo de una hoja de estilos CSS externa con fuentes cargadas en tiempo de ejecución. También dominaremos la colocación de imágenes en línea a través de la etiqueta HTML <img> embed y agregaremos eventos personalizados a los enlaces de texto HTML.


Paso 1: ¿Por qué usar texto con formato HTML y activos externos?

Sin duda, es fácil mantener todos los activos directamente en el propio archivo de origen de Flash, y a veces esa puede ser la mejor solución. Sin embargo, existen algunas buenas razones para mantener la mayor cantidad posible de contenido separado del documento de Flash, o incluso para mantener el origen de Flash compuesto únicamente por ActionScript.

  1. El SWF se cargará más rápido. Mantener el contenido separado del archivo Flash le permite cargar solo los activos que necesita en tiempo de ejecución, entregando así su contenido más rápido.
  2. Las actualizaciones son más fáciles. En lugar de requerir que un desarrollador de Flash abra el .fla y vuelva a publicar, todo lo que se necesita es una simple edición en el html o css.
  3. Múltiples aplicaciones. El contenido externo está disponible para su uso en otras aplicaciones, como para crear una versión HTML5 del sitio para el iPad.
  4. OOP. Lo mejor de todo es que mantener el contenido separado de la aplicación de entrega es una buena programación orientada a objetos. Métodos como este son los bloques de construcción para el desarrollo de sistemas, plantillas y componentes para su reutilización y desarrollo rápido.

Paso 2: Configurar el directorio de paquetes

Dado que trabajaremos con una variedad de activos, es útil configurar una estructura de directorios de archivos bien organizada. Primero, creamos un directorio de proyecto "HTMLTextBlock". Dentro de eso, agregue una carpeta "de origen" y una carpeta de "implementación". En la implementación, nuestro SWF residirá en el nivel superior junto con las carpetas para cada tipo de contenido. En esta demostración, crearemos un SWF que carga fuentes, css, xml y una imagen. La carpeta de origen contendrá todos nuestros archivos .fla y .as, que crearemos más adelante. Por ahora, el directorio del proyecto debería tener este aspecto:


Paso 3: Elige tus fuentes

Antes de incrustar fuentes en su sitio web, es importante tener en cuenta las licencias de fuentes. El hecho de que tenga una fuente instalada, incluso una que tenga derechos para usar para imprimir, no significa que tenga permiso para usarla en línea. Para obtener más información acerca de las licencias de fuentes, consulte este artículo de Themeforest.

En este tutorial, usaremos dos fuentes, una para el título y otra para el texto del cuerpo. Un buen lugar para encontrar fuentes de código abierto de alta calidad es el Directorio de fuentes de Google. No puede descargar los archivos de fuentes directamente desde allí, pero se pueden encontrar fácilmente con una búsqueda en la web. Font Squirrel y Typekit son dos recursos más excelentes para fuentes de alta calidad.

Al elegir una fuente de titular, busque un estilo que exprese la personalidad de su diseño. Para el texto del cuerpo, la legibilidad es muy importante, así que use una fuente que se muestre bien en tamaños pequeños. Además, asegúrese de elegir una familia de fuentes con negrita, cursiva y negrita cursiva. Para este tutorial, usaremos la fuente Lobster de Pablo Impallari para los titulares, y la familia de fuentes Droid Serif de Steve Matteson para los párrafos.

Las búsquedas rápidas en línea revelan dónde podemos descargar la fuente Lobster y la familia de fuentes Droid Serif. En nuestro directorio de origen, cree una nueva carpeta "fuentes descargadas" y coloque los archivos de fuentes allí.


Paso 4: Creación de archivos SWF para la incorporación de fuentes en tiempo de ejecución

Active las fuentes en el sistema. Abra dos nuevos documentos de ActionScript 3.0 Flash, uno para cada fuente, y guárdelos en el directorio de origen. Comenzaremos con la fuente del titular. En el panel Biblioteca, seleccione "Nueva fuente..." y en la lista desplegable Familia, seleccione Langosta 1.4. En nombre, escriba "Langosta". En Intervalos de caracteres, active Todos. Tenga en cuenta que si utiliza una fuente en la que sabe que no va a utilizar determinados caracteres, puede optar por incorporar un subconjunto de glifos de la fuente, lo que reduce el tamaño del archivo SWF.

A continuación, vaya a la ficha ActionScript. En Vinculación, seleccione Exportar para ActionScript. Cuando lo haga, se comprobará Exportar en el fotograma 1 y se rellenarán los identificadores de clase y clase base. Haga clic en Listo. Si recibe una advertencia de que no se encontró la definición de clase, omita la misma.

A continuación, en el panel Configuración de publicación, desactive la casilla de verificación HTML y, en el campo Flash, diríjase a la carpeta fonts del directorio deploy escribiendo ".. /deploy/fonts/Lobster.swf". Esto es todo lo que se necesita para incrustar una fuente en un archivo SWF.

Sin embargo, si queremos poder cargar el SWF en otro SWF y utilizar sus fuentes incrustadas en tiempo de ejecución, necesitamos registrar la fuente. Por lo tanto, en el panel Acciones, debemos agregar un código de línea al fotograma 1 en la línea de tiempo:

Ahora, nuestra fuente estará disponible para su uso en cualquier documento de Flash que cargue el SWF. Podríamos terminar aquí, pero queremos verificar nuestro trabajo y, lo que es más importante, obtener el nombre de familia de fuentes correcto para usar en nuestro CSS. Agregue más código.

Ejecute La vista previa de publicación y veremos el mensaje a continuación en el registro de salida. Tome nota del nombre de la fuente. Lo necesitaremos más adelante.

Usted puede ser que se pregunte porqué estamos viendo dos declaraciones del rastro. Esto se debe a que el método registerFont() incrusta la fuente por segunda vez.

A continuación, crearemos un archivo SWF para la copia del cuerpo. Esta vez, estamos incrustando cuatro fuentes, una para cada estilo. En nuestro segundo documento de Flash, una vez más, desde el panel Biblioteca, seleccione Nueva fuente... En la lista desplegable Familia, seleccione Droid Serif y, en Estilo, seleccione Regular. Escriba "DroidSerifRegular" en el campo Nombre y recuerde establecer Exportar para ActionScript. A continuación, repita los mismos pasos para los rangos de caracteres y la ficha ActionScript. Repita este proceso para las caras negrita, cursiva y cursiva. En el panel de acciones, usaremos código similar al que usamos para la fuente Lobster.

Ejecute la vista previa de publicación. Esta vez veremos mensajes de seguimiento para cada uno de los estilos de fuente Droid Serif. Si ve menos de ocho, compruebe la configuración de la fuente en el panel Biblioteca, ya que una de las caras de la fuente no se está incrustando. Una vez más, tome nota del nombre de la fuente del registro de salida.

Ahora, publique la fuente Droid Serif en ".. /deploy/fonts/DroidSerif.swf" y ahora deberíamos tener dos archivos SWF de fuentes, Lobster.swf y DroidSerif.swf, en el directorio deploy/fonts.


Paso 5: Poner HTML en XML

El siguiente activo que crearemos es un archivo xml. El XML constará de un elemento: un bloque de texto con formato HTML, compuesto por un título y un párrafo creados con etiquetado HTML estándar.

Para que Flash pueda leer el CÓDIGO HTML como una entidad de elemento XML, debe estar contenido dentro de un contenedor CDATA. CDATA se utiliza dentro de los documentos XML para indicar que una sección de contenido se va a analizar como datos de caracteres en lugar de como marcado.

Guarde este archivo como "content.xml" en la carpeta xml del directorio deploy


Paso 6: Crear hoja de estilos CSS

Ahora, crearemos CSS para aplicar estilo al HTML. Mirando nuestro HTML, podemos ver que necesitamos crear estilos para h1, p y a. El texto dentro de las etiquetas en negrita y cursiva (b e i) se aplicará automáticamente, ya que esos estilos están presentes en nuestra familia de fuentes de párrafo. Tenga en cuenta que debe tener en cuenta que Flash solo admite un subconjunto de propiedades CSS; consulte referencia a la Referencia de ActionScript 3.0 para obtener más detalles.

Es especialmente importante que nos dirijamos al nombre correcto de la familia de fuentes en el CSS. Asegúrese de usar el nombre de fuente que se mostró en el registro de salida cuando publicamos los documentos de fuente (Lobster 1.4 y Droid Serif).

Guarde este archivo como "styles.css" en la carpeta css del directorio deploy


Paso 7: Crear la clase de documento

Cree un nuevo archivo Flash y guárdelo como "HTMLTextBlockExample.fla" en el directorio de origen. En el panel Configuración de publicación, diríjase a nuestra carpeta deploy. Para HTML, utilice ".. /deploy/index.html" en lugar del nombre predeterminado. Cree un nuevo archivo .as - "HTMLTextBlockExample.as" - para que sea la clase de documento (consulte esta sugerencia rápida para obtener más información sobre las clases de documento).


Paso 8: Cargar las fuentes

A continuación, cargaremos los archivos SWF de fuente que creamos en nuestro documento de Flash. Vamos a crear dos variables. Uno será un Array de las cadenas url para cada fuente SWF, y el otro será un int que realizará un seguimiento de cuántas fuentes se han cargado. Luego crearemos varios métodos para manejar la carga.

Ejecute la vista previa de publicación y vea que ambas fuentes están cargadas.


Paso 9: Cargar el XML y CSS

Cargar los archivos XML y CSS será un proceso similar a la carga de las fuentes. En primer lugar, tenemos que importar algunas clases nuevas.

También crearemos una nueva variable StyleSheet que contendrá las propiedades de estilo analizadas desde el archivo css.

Ahora, agregamos los métodos para cargar los activos.

Ejecute la vista previa de publicación y verá el XML impreso en el registro de salida.


Paso 10: Crear una clase HTMLTextBlock

Mostrar texto con formato HTML es algo que puede hacer a menudo, así que vamos a crear una clase que podemos usar una y otra vez. Abra un nuevo archivo de ActionScript y guárdelo como "HTMLTextBlock.as" en el directorio de origen.

Como puede ver, nuestra clase tiene tres variables. La variable privada htmlTextField contendrá texto con formato HTML. La variable pública blockWidth controla el ancho de htmlTextField y textStyleSheet contiene el estilo CSS que se aplica a htmlTextField. En el constructor, establecemos propiedades para htmlTextField y lo agregamos a la lista de visualización. Por último, creamos setHTML() para poner texto con formato HTML en htmlTextField.


Paso 11: Usar HTMLTextBlock en nuestro documento principal

Ahora que tenemos una clase personalizada para mostrar texto HTML, vamos a usarla. Comience modificando onXMLLoadComplete() para enviar datos XML como una cadena a un nuevo método que utilizará HTMLTextBlock para mostrar el HTML.

El resultado:


Paso 12: Agregar una imagen en línea

A continuación, agregaremos una imagen a nuestro bloque de texto. Puede usar la imagen en los archivos de origen de este tutorial o crear la suya propia.

Abra contenido.xml y, al principio del párrafo, use una etiqueta HTML básica <img> para incrustar la imagen. El XML ahora debería tener este aspecto:

Ahora, el SWF se verá así:

La alineación de la imagen y el texto no parece del todo correcta todavía. Lo mejoraremos en los próximos pasos.


Paso 13: Dale a la imagen un ID

Próximamente en el tutorial, escribiremos métodos que apunten a la imagen en línea. Para ello, debemos añadir un atributo id a nuestra etiqueta image embed a la que se pueda hacer referencia en ActionScript. Abra content.xml y actualice la etiqueta de la <img> siguiente manera:


Paso 14: Detectar el cambio de tamaño de TextField

Para ajustar la alineación de la imagen, necesitamos cambiar sus valores x e y. Sin embargo, debemos hacerlo después de que se agregue la imagen y se redistribuyera el texto. Para lograr esto, agregaremos un detector de eventos a la clase HTMLTextBlock.

En primer lugar, importe algunas clases adicionales:

A continuación, actualice el método setHTML() y cree un controlador de eventos para cuando se cambie el tamaño de htmlTextField.


Paso 15: Ajustar la alineación de la imagen

¿Nota cómo la imagen no se alinea correctamente con el texto? Esto se debe a que Flash agrega automáticamente espaciado horizontal y vertical alrededor de la imagen. Podemos ajustar la cantidad de espaciado estableciendo los atributos hspace y vspace en la <img> etiqueta.

Mirando el SWF, ahora la imagen está muy bien alineada dentro del párrafo, pero el texto está demasiado cerca de la imagen.

Parece que necesitamos un poco de espacio después de todo. Actualice los atributos de la etiqueta de imagen para que sean hspace="5" vspace="2". Esto nos da un mejor espaciado, pero una vez más la imagen no se alineará con el borde izquierdo del párrafo. Podemos solucionar esto editando el valor x de la imagen en onImageAdded().


Paso 16: Ajustar el espaciado de párrafo

La imagen está muy bien alineada, pero el párrafo parece un poco demasiado cerca del titular. Si estuviéramos trabajando en una página HTML, podríamos ajustar el relleno o el margen en las etiquetas p o h1, pero desafortunadamente Flash no admite ningún estilo CSS para la alineación vertical entre párrafos. La mejor solución que tenemos es crear un nuevo estilo CSS solo para el interlineado. Abra styles.css y agregue el siguiente estilo:

Actualizar contenido.xml con una etiqueta de estilo br6 vacía.

Y ahora, el interlineado entre el título y la alineación de párrafos se ha mejorado sutilmente.


Paso 17: Evitar el error de desplazamiento

Abra el archivo SWF y, a continuación, haga clic y arrastre hacia abajo mientras selecciona el texto. Usted puede notar que algo inusual sucede. La primera línea de nuestro titular ha desaparecido. Si arrastra hacia arriba, volverá a aparecer. En máquinas Windows, puede ver que este mismo efecto se produce si pasa el cursor sobre el texto y desplaza la rueda del mouse en un explorador.

La solución para esto, cortesía del blog Destroy Today, es desactivar el tamaño automático después de que se haya cambiado el texto dentro. En primer lugar, actualice el método setHTML() y, a continuación, onImageAdded().

Vuelva a publicar, y verá que nuestra corrección de errores ha creado un nuevo problema.

Ahora, el alto del campo de texto no es lo suficientemente grande como para mostrar todo el texto y las dos líneas inferiores no son visibles. Solucionaremos esto en nuestro siguiente paso.


Paso 18: Ajustar la altura de TextField

Para que todo el texto sea visible, necesitamos aumentar el alto de HTMLTextField. Si simplemente aumentamos la altura en 50 píxeles después de que se agrega la imagen, el problema se resuelve.

Sin embargo, esta solución no se siente bien. ¿Qué pasa si usamos una imagen de tamaño diferente? ¿Diferentes fuentes o estilos? La mejor manera de abordar el problema es ajustar la altura dinámicamente, en función de los valores que Flash está utilizando para determinar la altura. La táctica obvia sería usar el parámetro textHeight. Vamos a probarlo.

Eso es mejor, pero la línea inferior del texto todavía está oculta. Al hacer algunas investigaciones (por ejemplo, esta entrada de blog), podemos encontrar que hay dos valores que deben agregarse a la altura. Uno es el valor inicial más alto de los estilos de texto que estamos utilizando. En este caso, sería 4 (del estilo p). El otro valor es htmlTextField.maxScrollV. Si sumamos el total de esos valores, más un ajuste de seguridad de 2 píxeles, a la altura, HTMLTextField tendrá el tamaño correcto, independientemente de qué fuentes, estilos o imágenes se utilicen. En lugar de hacer esto en onImageAdded(), cree una nueva función para bloquear la altura del bloque de texto.

El método setHTML() también necesita ser actualizado. Cuando no se carga ninguna imagen en línea en el bloque de texto, la altura debe bloquearse.

Con estos últimos ajustes, todo el texto ahora está visible y no se desplazará.


Paso 19: Agregar un vínculo TextEvent personalizado

Nuestra última tarea en este tutorial será agregar un enlace de texto que cambie el tamaño del bloque de texto. Para ello, primero debemos añadir el enlace al texto HTML en el archivo content.xml.


Paso 20: Agregar agente de escucha TextEvent

En nuestra clase HTMLTextBlock, agregue un detector de eventos para detectar cuándo se hace clic en un vínculo de texto. En primer lugar, importe la clase TextEvent.

En el constructor, agregue el detector de eventos.

Ahora, cree el método de control de eventos.

Ejecute la vista previa de publicación. Al hacer clic en los vínculos de eventos de texto, verá increaseWidth o decreaseWidth en el registro de salida.


Paso 21: Agregar función para cambiar el ancho

Cree un nuevo método que cambiará el ancho de htmlTextField.


Paso 22: Actualizar el controlador de vínculos de texto

Actualice el controlador de vínculos de texto para llamar a changeWidth().

Al hacer clic en los enlaces de texto de aumento / disminución, ahora se ajustará el ancho del bloque de texto en 10 píxeles.


conclusión

Como se ve en el tutorial, el uso de contenido con formato HTML y estilo CSS en Flash puede ser más difícil de lo que parece en un principio. Ahora que hemos aprendido lo básico, puede aplicar este conocimiento en sus propios proyectos. Estas son algunas sugerencias para el desarrollo continuo:

  • Utilice el código del tutorial para crear bloques de creación para sitios y componentes de Flash.
  • Extienda HTMLTextBlock para incorporar propiedades del modelo de cuadro CSS.
  • Cargar, analizar y mostrar HTML cargado desde fuentes externas, como una fuente RSS.
  • Al mantenerlos separados del documento de Flash, puede utilizar los activos de contenido para crear sitios y aplicaciones que no sean flash, como para el iPad o el iPhone.

Gracias por leer este tutorial, y espero que te resulte útil en tu futuro Parpadeo!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.