D. Uso de fuentes de texto y web
Podemos hacer clic y arrastrar a través de la columna de bloqueo para bloquear varios elementos con un solo movimiento. Los elementos también se pueden bloquear y desbloquear desde la Línea de tiempo o desde un clic derecho o de opción dentro del panel Elementos, o incluso desde un elemento directamente en el Escenario.
Elementos gestionados vs. no gestionados
Edge Animate tiene el concepto de que ciertos elementos son "gestionados", mientras que otros son "estáticos". Esto se ilustra con los iconos dentro del panel Elementos: un </> blanco brillante indica un elemento no gestionado. Cualquier otro tipo de icono es para un elemento gestionado.
Gestionado
Son elementos que fueron creados por las herramientas de Edge Animate. Tenemos control total sobre estos elementos específicos. Si se trabaja dentro de un proyecto de Edge Animate que nunca ha incluido documentos externos, lo más probable es que todos los elementos sean gestionados.
Estático
Son elementos que han sido añadidos a través de herramientas externas, o que están presentes dentro de un documento HTML que ha sido abierto dentro de Edge Animate. Las herramientas de Edge Animate sólo tienen un control limitado sobre estos elementos.
Al pasar el cursor del ratón por encima de un elemento en el panel Elementos también se mostrará una información sobre herramientas que indica si el elemento es "gestionado" o "estático".
Reordenación de elementos
Para reordenar los elementos, podemos arrastrar y soltar los elementos individuales dentro del panel Elementos. La nueva ubicación del elemento arrastrado aparecerá como una línea negra gruesa entre los elementos. Esto modificará eficazmente el índice z de cada elemento en consecuencia, y funciona de forma muy similar en concepto al panel Capas de Photoshop.
Renombrar elementos
Hay varios lugares en los que podemos renombrar los elementos. El panel Elementos es sólo uno de ellos. Simplemente haga doble clic en el nombre del elemento para renombrarlo:
Los elementos se pueden renombrar utilizando el mismo método desde la Línea de tiempo y siempre se pueden renombrar desde el panel Propiedades.
Agrupación de elementos
La agrupación es un método para definir un conjunto de múltiples elementos con el fin de manipular ciertas propiedades a la vez. La mayoría de las veces, esta técnica se utiliza para mover un conjunto de elementos con facilidad, sin tener que preocuparse de si su posición en relación con los demás puede cambiar.
Edge Animate proporciona varios métodos para agrupar elementos. El más sencillo de ellos es seleccionar varios elementos en el Escenario, hacer clic con el botón derecho del ratón en el conjunto seleccionado y elegir Agrupar elementos en DIV en el menú contextual que aparece. También podemos agrupar los elementos seleccionados desde el menú de la aplicación.
Elija Modificar | Agrupar elementos en DIV. Atajo de teclado: Ctrl + G (Windows) o Comando + G (Mac).
Los elementos agrupados ahora se pueden mover como uno solo y aparecen dentro del panel Elementos como anidados dentro de un DIV padre, como se ve en la siguiente captura de pantalla:
Para desagrupar elementos individuales, podemos arrastrarlos fuera de los elementos contenedores del grupo dentro del panel Elementos. La opción de desagrupar también está disponible desde el menú de la aplicación o a través del menú contextual del botón derecho del ratón.
La agrupación es un concepto muy similar a la anidación, aunque un grupo perderá muchas de las propiedades que normalmente se pueden ajustar dentro de un elemento de Edge Animate. Para leer más sobre la anidación y la agrupación, podemos consultar el Capítulo 8, Hacer uso de los símbolos, los elementos anidados y la agrupación.
Propiedades compartidas por todos los tipos de elementos
Las siguientes propiedades se comparten entre todos los elementos de Edge Animate. No importa si estamos trabajando con elementos de la herramienta de dibujo, activos importados o incluso objetos de Símbolos complejos, podremos ajustar estas propiedades a través de la herramienta Selección y el panel Propiedades.
La captura de pantalla anterior ilustra las diferentes propiedades disponibles a través de los distintos tipos de elementos en Edge Animate. Observe cuántas propiedades se comparten entre los tipos.
Propiedades de los elementos
Este es el segmento principal del panel de propiedades para un elemento y es el único segmento que no se puede colapsar. Contiene algunos ajustes básicos como el ID del elemento, los atributos de clase y acción, la visibilidad, el desbordamiento y los ajustes de opacidad:
ID
El ID se utiliza en todo Edge Animate para identificar un elemento particular en el panel Elementos, la Línea de tiempo y también a través de varias Acciones mediante el uso de código JavaScript. Tenga en cuenta que los ID son únicos: no podemos utilizar un mismo ID más de una vez dentro de un proyecto de Edge Animate.
Clase
Esta es una definición de clase que se puede asignar a nuestros elementos para dirigirlos específicamente a través de un archivo CSS personalizado externo a nuestra composición.
Acciones
Esto nos permite vincular Acciones al elemento seleccionado.
Visibilidad
Se accede a esta configuración desde el panel Propiedades y determina si un elemento se muestra realmente en la reproducción o no. Hay tres configuraciones distintas para esta propiedad:
| Comando | Descripción |
|---|---|
| Siempre activado | Esta es la configuración por defecto y simplemente significa que el elemento es visible durante el transcurso de la animación. Seleccionar Siempre activado cuando se utiliza previamente cualquiera de las otras dos configuraciones eliminará todos los fotogramas clave que tienen que ver con la visualización del elemento de la Línea de tiempo. |
| Activado | El elemento es visible desde el principio. La idea es manejar la visibilidad a través de los Desencadenantes de la Línea de tiempo u otras Acciones. |
| Desactivado | El elemento está oculto desde el principio. La idea es manejar la visibilidad a través de los Desencadenantes de la Línea de tiempo u otras Acciones. |
Desbordamiento
Esta propiedad determina cómo se comporta un elemento cuando los elementos anidados se extienden más allá de sus bordes. Hay cuatro opciones:
| Comando | Descripción |
|---|---|
| visible | Los elementos que se extienden más allá de los bordes permanecerán visibles |
| oculto | Los elementos que se extienden más allá de los bordes se volverán invisibles |
| scroll | El elemento presentará barras de desplazamiento al usuario, incluso si no son necesarias |
| auto | Los elementos que se extienden más allá de los bordes harán que aparezcan barras de desplazamiento automáticamente, según sea necesario. |
El grado de transparencia que exhibe un elemento particular. Puede variar de 0 % a 100 %, siendo 100 % totalmente opaco.
Propiedades de posición y tamaño
Esta sección del panel contiene todas las propiedades necesarias para ajustar la posición y el tamaño de un elemento en particular. También podemos cambiar entre coordenadas relativas globales y locales, aplicar ciertos preajustes basados en el tipo de elemento y especificar un ancho mínimo y máximo:
Posición
Las coordenadas X e Y (o coordenadas L y T cuando se selecciona Aplicado) en las que se posicionará un elemento en el Escenario, en píxeles.
A diferencia del contenido de Flash Professional, Edge Animate no es capaz de renderizar subpíxeles.
Tamaño
Esta propiedad determina el ancho y el alto de un elemento, especificado en píxeles. Estos valores se pueden bloquear juntos mediante el uso del icono de enlace entre ellos.
Propiedades de transformación
Esta sección expone las propiedades relacionadas con la transformación de un elemento. Estas propiedades incluyen la escala, la inclinación y los ajustes de rotación:
Escala
La propiedad de escala se basa en el porcentaje. Tanto la escala X como la Y pueden estar vinculadas o cambiarse de forma independiente. Estos valores pueden bloquearse juntos mediante el uso del icono de enlace entre ellos.
Inclinación
La inclinación de un elemento puede realizarse a lo largo del eje X o del eje Y.
Origen de la transformación
Este es el punto desde el que se aplicarán las transformaciones como la rotación o la escala, y está determinado por los valores porcentuales de X e Y.
Tenga en cuenta que esto puede estar situado más allá de los límites de un elemento en particular.
Girar
Esta propiedad determina los grados de rotación en relación con el Punto de Transformación del elemento especificado, siendo 0 grados la rotación original.
Propiedades del cursor
Esta propiedad nos permite seleccionar un cursor para usar cuando el ratón se desplaza sobre el objeto seleccionado:
Cursor
Esta propiedad nos permite activar un cambio de cursor al pasar el ratón por encima.
Propiedades de la sombra
Esta sección del panel expone las propiedades de la sombra para un elemento seleccionado. Estas incluyen el color de la sombra, el desplazamiento y el desenfoque. El pequeño interruptor en la parte superior derecha nos permite activar y desactivar rápidamente la sombra.
Tipo de sombra
Esta propiedad determina si la sombra debe estar insertada o no. Esto no está disponible en los elementos de texto.
En el caso de los elementos de texto, no tenemos la opción de elegir insertar nuestra sombra.
Color de la sombra
El color de la sombra de un cuadro o texto.
Desplazamiento horizontal de la sombra
El desplazamiento horizontal de nuestra sombra en píxeles.
Desplazamiento vertical de la sombra
El desplazamiento vertical de nuestra sombra en píxeles.
Radio de desenfoque
Esta propiedad define el radio de desenfoque de la sombra en píxeles.
Extensión
La extensión de nuestra sombra en píxeles.
Propiedades de recorte
Esta sección del panel contiene las propiedades relacionadas con el comportamiento de recorte de un elemento. El pequeño interruptor en la parte superior derecha nos permite activar y desactivar rápidamente el recorte:
Recorte
Recortar un elemento desde la parte superior, inferior, izquierda o derecha hará que una parte del elemento seleccionado sea invisible desde el lado especificado en función de los píxeles especificados.
Propiedades de accesibilidad
Esta sección del panel expone las propiedades que pueden ayudar a mejorar la accesibilidad, incluyendo un atributo de Título y un Índice de Tabulación:
Título
Esta propiedad asigna un atributo de título a los elementos HTML.
Índice de tabulación
El índice de tabulación específico para fines de accesibilidad.
Propiedades del escenario
El propio Escenario de Edge Animate también tiene una serie de propiedades que se pueden controlar a través del panel Propiedades. Para acceder a las propiedades del Escenario, simplemente haga clic en cualquier lugar del Escenario donde no haya otro elemento presente, o seleccione Escenario <div> en el panel Elementos.
Título del documento
Esta propiedad establece el valor de la etiqueta <title> en la sección <head> de nuestro documento HTML.
Ancho
Esta propiedad establece el ancho del Escenario en píxeles.
Altura
Esta propiedad establece la altura del Escenario en píxeles.
Color de fondo
El color que se aplicará al fondo de nuestro Escenario en formato RGBA: rojo, verde, azul, alfa.
Desbordamiento
Esta propiedad determina cómo se comporta el Escenario cuando los elementos se extienden más allá de sus bordes. Hay cuatro opciones:
| Comando | Descripción |
|---|---|
| visible | Los elementos que se extienden más allá de los bordes del Escenario permanecerán visibles |
| oculto | Los elementos que se extienden más allá de los bordes del Escenario se volverán invisibles |
| scroll | El Escenario presentará barras de desplazamiento al usuario, incluso si no son necesarias |
| auto | Los elementos que se extienden más allá de los bordes del Escenario harán que aparezcan barras de desplazamiento automáticamente, según sea necesario. |
Determina si la línea de tiempo del Escenario principal debe comenzar a reproducirse automáticamente o pausarse hasta que se dé una orden para la reproducción explícita.
ID de la composición
Este es el identificador único utilizado por la API de tiempo de ejecución de Edge Animate para dirigirse a una composición específica. Se puede cambiar si es necesario.
Póster
Permite la creación de un fotograma de póster desde la posición actual del cabezal de reproducción.
Escenario de nivel inferior
Esta propiedad permite un acceso rápido al Escenario de nivel inferior.
Precargador
Esta propiedad permite un acceso rápido al Escenario del Precargador.
Elementos del menú de Adobe Edge Animate
En esta sección, vamos a echar un vistazo a algunos de los elementos del menú de Edge Animate que se pueden utilizar cuando se trata del Escenario.
Ver
Los comandos del menú Ver determinan cómo aparece el Escenario dentro de la ventana de la aplicación. Esto es especialmente útil cuando se realizan ajustes finos a los elementos del Escenario.
| Comando | Descripción |
|---|---|
| Acercar | Acerca todo el Escenario para realizar ajustes finos al colocar objetos o modificar sus propiedades. Si el Escenario aparece más grande que su panel, estarán presentes las barras de desplazamiento. |
| Alejar | Aleja el Escenario. Útil para cuando se trabaja en pantallas más pequeñas y estrechas. |
| Tamaño real | Restablece el Escenario al 100 por cien de su tamaño real, tal y como se determina en el panel Propiedades. |
| Reglas | Activa y desactiva las reglas. |
| Guías | Activa y desactiva las guías. |
| Ajustar a las Guías | Permite que los elementos se ajusten a las guías cuando se arrastran cerca de ellas. |
| Bloquear Guías | Bloquea todas las guías actuales para que no se puedan mover o eliminar por error. |
| Guías inteligentes | Activa las guías inteligentes para obtener ayuda temporal en la alineación de los elementos. |
| Escenario del precargador | Accede al Escenario del precargador de la composición. |
| Escenario de nivel inferior | Accede al Escenario de nivel inferior de la composición para los navegadores más antiguos. |
Resumen
En este capítulo, hemos echado un buen vistazo a dos herramientas muy importantes a la hora de trabajar en un proyecto de Edge Animate: las herramientas Selección y Transformación. Mucho de lo que discutiremos en los próximos capítulos dependerá del uso exitoso de estas dos herramientas.
Hemos tenido una buena visión general de algunas herramientas de asistencia para la creación de composiciones más adaptables y sensibles. Luego exploramos el Escenario con mayor detalle y echamos un buen vistazo a los paneles Elementos y Propiedades.
En el siguiente capítulo, vamos a examinar el uso de los elementos de texto a través de la herramienta Texto y cómo integrar fuentes web en nuestros proyectos de Edge Animate.
Utilizar texto y fuentes web
Aunque es posible crear texto en otro programa como Adobe Photoshop o Fireworks, renderizar una imagen de mapa de bits y llevarla a Edge Animate para utilizarla en una composición, a menudo es preferible trabajar directamente con elementos de texto reales en un proyecto. En este capítulo, vamos a echar un vistazo a la herramienta Texto en Edge Animate y cómo se puede utilizar para crear fácilmente estos elementos de texto. También veremos:
- Posibles tipos de elementos de texto
- Propiedades de los elementos de texto
- Uso de fuentes web en un proyecto
Por último, exploraremos el panel Biblioteca a través de la inclusión de fuentes web externas y cómo gestionar estas fuentes dentro de un proyecto.
Localización de la herramienta Texto
La Herramienta Texto (T) se encuentra en la barra de herramientas de Edge Animate. La barra de herramientas en sí, por defecto, se encuentra directamente debajo del menú de la aplicación en la parte superior izquierda de la ventana de la aplicación. Podemos verla agrupada junto a otras herramientas de Edge Animate:
La herramienta Texto
La herramienta Texto de Edge Animate nos permite crear elementos de texto en el Escenario, que pueden ser animados a través de la Línea de tiempo o tener interactividad aplicada a ellos a través del panel Acciones. También podemos realizar funciones avanzadas como la modificación del contenido textual mediante la aplicación de varias Acciones, que veremos más adelante en este libro.
La herramienta Texto aparece como una T icónica en la Barra de herramientas de Edge Animate.
Utilizando la herramienta Texto, podemos definir elementos de texto dentro de un proyecto de Edge Animate y modificar ciertas propiedades visuales de esos elementos. Podemos hacer clic directamente en el Escenario para crear texto en la ubicación del punto de inserción, o hacer clic y arrastrar un cuadro de texto al tamaño que se necesite.
Como cualquiera de estas herramientas, todas las propiedades específicas del elemento se pueden ajustar y cambiar a través del panel Propiedades.
Tipos de elementos de texto
Los elementos creados con la herramienta Texto tendrán por defecto un elemento HTML <div>, pero en realidad se pueden cambiar para emplear cualquiera de los elementos HTML que se muestran en la siguiente captura de pantalla:
La siguiente tabla describe los posibles tipos de elementos de texto:
| Categoría | Descripción |
|---|---|
| <div> | Define un elemento de división dentro de un documento HTML y se utiliza a menudo para elementos genéricos de nivel de bloque. |
| <address> | Normalmente se añade a la cabecera o al pie de página de un documento HTML. La etiqueta address define la información de contacto del propietario del documento. |
| <article> | Define un bloque de contenido autocontenido. Se utiliza comúnmente para un artículo o una entrada de blog. |
| <blockquote> | Un elemento que define una sección de texto que ha sido tomada de una fuente distinta del documento actual. |
| <p> | Denota un elemento de bloque que significa un párrafo de texto. |
| <h1> a <h6> | h1 a h6 son etiquetas de encabezado HTML básicas. Se pueden utilizar para denotar un conjunto jerárquico de encabezados dentro de un elemento padre. |
| <pre> | Denota texto preformateado. Normalmente, la etiqueta pre conservará los espacios en blanco y los saltos de línea. |
| <code> | Ideal para mostrar bloques de código dentro de HTML. |
Como podemos ver a través de estas definiciones de elementos, la mayoría de las diferencias aquí son simplemente semánticas, aunque el significado semántico es una consideración fundamental cuando se trata de contenido basado en HTML.
Estas definiciones de tipo pueden ser útiles también de otras maneras. Tal vez queramos aplicar una sombra de texto CSS a todos los elementos h1 de nuestra composición o aplicar un degradado a ciertos elementos dibujados. Esta característica facilita ese flujo de trabajo. Para ver un ejemplo de cómo hacerlo, consulte el Capítulo 11, Exploraciones adicionales con Adobe Edge Animate.
Los tratamientos de texto avanzados o las fuentes extrañas también se pueden renderizar desde un programa de edición de imágenes como SVG o imágenes de mapa de bits e incluirlas dentro de una composición de Edge Animate de esa manera.
Crear elementos de texto en el Escenario
Es muy sencillo crear elementos de texto en Edge Animate con las herramientas proporcionadas. Aunque estos elementos se forman de la misma manera que los elementos rectángulo o elipse, proporcionan una serie de atributos únicos
Fuentes principales de Microsoft para la Web
Este conjunto de fuentes ampliamente distribuido incluye Arial, Courier New, Times New Roman, Comic Sans, Impact, Georgia, Trebuchet y Verdana. Fue distribuido por Microsoft entre 1996 y 2002, y fue adoptado como el conjunto de fuentes que los diseñadores web podían utilizar con confianza en una página web debido a su amplia distribución en Windows y Mac OS. Durante años, estas fueron las únicas opciones aceptables para su uso en la Web. En el momento de escribir este libro, siguen siendo, con mucho, las fuentes más utilizadas en el diseño web.
Han surgido varias técnicas para liberarse de estas restricciones tipográficas. Entre ellas, la creación de imágenes de caracteres utilizando la fuente elegida, aunque este método es malo tanto para los discapacitados visuales como para la optimización de los motores de búsqueda. Otra alternativa es utilizar un mecanismo de renderización como sIFR ([invalid URL removed]) para emplear una combinación de tecnologías en la renderización de pequeños trozos de texto de HTML a través de JavaScript, para renderizar en la tipografía de su elección en Flash. Esto es mejor que usar imágenes, ya que puede ser leído por los motores de búsqueda y los lectores de pantalla, pero todavía no es ideal.
Tenga en cuenta que, aunque ahora es posible utilizar una variedad de fuentes en los navegadores modernos, muchas implementaciones antiguas no soportarán ninguna tipografía más allá del conjunto de fuentes que se ha establecido como un conjunto estándar. Algunos de estos conjuntos de fuentes se incluyen en el panel Propiedades de Edge Animate cuando se trata de elementos de texto.
Servicios de fuentes web alojadas
Las fuentes web han empezado a dejar huella en el panorama actual del diseño web. En los últimos dos años han surgido diversos servicios de alojamiento de fuentes de Google, Adobe y otros que facilitan el uso legal de estas fuentes. Esto ha hecho que el uso de las fuentes web sea mucho más accesible, ya que los diseñadores web ya no tienen que preocuparse por la implementación, el alojamiento o los problemas legales.
Las fuentes web emplean la declaración CSS @font-face, que permite tanto una propiedad font-family para la identificación como una propiedad src que apunta al archivo de fuente real.
Aquellos familiarizados con el framework Apache Flex ya estarán familiarizados con la incrustación de fuentes de esta manera. Algunos de estos servicios alojados incluyen:
- Google Web Fonts (
http://www.google.com/webfonts - Adobe Edge Web Fonts (
http://html.adobe.com/edge/webfonts/ - Adobe TypeKit (
https://typekit.com/ - Typotheque (
http://www.typotheque.com/webfonts - MyFonts (
http://webfonts.myfonts.com/ - WebType (
http://www.webtype.com/ - FontsLive (
http://www.fontslive.com/ - Fontdeck (
http://fontdeck.com/ - Font Squirrel (
http://www.fontsquirrel.com/ - Fonts.com (
http://webfonts.fonts.com/
Aplicar fuentes web a un proyecto de Edge Animate
Para utilizar una fuente personalizada dentro de nuestro proyecto de Edge Animate, hay que seguir algunos pasos para registrar y configurar nuestras definiciones de fuente dentro de Edge Animate.
Para definir un activo de Fuente dentro de la Biblioteca, realice los siguientes pasos:
- Vaya a Google Web Fonts y elija una fuente para utilizarla en una composición de Edge Animate:
- Coge la etiqueta de enlace. Tendrá un aspecto similar al siguiente:
<link href='http://fonts.googleapis.com/css?family=Flavors' rel='stylesheet' type='text/css'> - Observe también el nombre dado a la fuente. En este caso, Flavors. También necesitaremos esto.
- Dentro de Edge Animate, vaya al panel Biblioteca y haga clic en el icono + junto a Fuentes.
- En el cuadro de diálogo Añadir fuente web que aparece, pegue la etiqueta de enlace completa copiada del servicio de fuentes en el campo Código incrustado.
- Dentro de la entrada Lista de reserva de fuentes, pegue el nombre de la fuente que se está incluyendo. También podemos proporcionar una lista separada por comas de fuentes adicionales en caso de que haya algún problema.
- Cuando haya terminado, haga clic en Añadir fuente para cerrar el cuadro de diálogo. Esta fuente aparecerá ahora en el panel Biblioteca y será accesible desde la lista de fuentes internas cuando se trate de elementos de texto.
Para probar nuestra nueva fuente en una composición de Edge Animate, realice los siguientes pasos:
- Con la Herramienta Texto (T) seleccionada, haga clic en el Escenario.
- Escriba Fuentes web personalizadas ROCK! y pulse la tecla Esc.
- En el panel Propiedades, utilice el menú desplegable Nombre de la fuente para seleccionar la fuente web que hemos creado anteriormente.
- Ahora podemos ajustar las propiedades adicionales del elemento (como el color) hasta que estemos satisfechos con el resultado.
Ahora tenemos una fuente web personalizada que se puede utilizar dentro de este proyecto. En este momento, las definiciones de fuentes personalizadas no se pueden compartir entre varios proyectos de Edge Animate. Deben definirse para todos y cada uno de los proyectos (aunque se pueden compartir dentro de los archivos de símbolos de Edge Animate). Para ver este proyecto en acción, eche un vistazo al directorio CustomFonts incluido en los archivos de ejemplo de este libro.
Por supuesto, los elementos de texto que utilizan fuentes web también se pueden animar como cualquier otro elemento de texto. Para obtener más información sobre la animación de contenido, consulte el Capítulo 6, Crear movimiento a través de la línea de tiempo.
Utilizar fuentes locales de su colección
Los servicios de fuentes web son una gran opción cuando tienen la tipografía necesaria para un proyecto, pero ¿qué pasa si ninguno de estos servicios tiene la fuente deseada? Bueno, es totalmente posible utilizar nuestras propias fuentes en los proyectos de Edge Animate también.
Esto supone que tenemos los derechos para usar y distribuir los archivos de fuente deseados. Si lo hacemos sin permiso, podríamos recibir una notificación de retirada o una demanda por parte del titular de los derechos de autor.
Para hacer esto localmente, primero necesitaremos definir un archivo CSS que utilice @font-face para declarar tanto el nombre de la fuente como la ubicación del propio archivo de fuente. Este archivo CSS es el que se vinculará dentro del panel Biblioteca de Edge Animate.
- Cree un directorio llamado LocalFont. Todos los archivos que creemos manualmente, así como los archivos de nuestro proyecto de Edge Animate, residirán en este directorio.
- Mueva las fuentes que desee utilizar al directorio recién creado. En este caso, estamos utilizando los siguientes archivos: °° BBrick.otf: El propio archivo de fuente en formato OpenType °° OFL.txt: La licencia SIL Open Font License (OFL)
- Cree un nuevo archivo CSS en el editor que prefiera. En este ejemplo utilizaremos una fuente llamada Banana Brick y llamaremos al archivo CSS BBrick.css.
- Dentro del archivo CSS, coloque el siguiente fragmento de código:
CSS
@font-face { font-family: 'Banana Brick'; src: url('BBrick.otf'); } - Guarde el archivo. Esto proporciona a nuestra fuente un nombre que puede ser utilizado en Edge Animate a través de la propiedad font-family, y hace referencia al propio archivo de fuente a través de la propiedad src.
Ahora que tenemos un archivo CSS que apunta a nuestro archivo de fuente, necesitaremos crear nuestro proyecto en Edge Animate y declarar nuestra fuente web dentro del panel Biblioteca para su uso.
- En primer lugar, cree un nuevo proyecto de Edge Animate y guárdelo como LocalFont.html dentro del mismo directorio LocalFont que creamos anteriormente. Los detalles del proyecto no importan.
- Ahora, vaya al panel Biblioteca y haga clic en el icono + junto a Fuentes.
- En el cuadro de diálogo Añadir fuente web que aparece, pegue la siguiente etiqueta de enlace, que hace referencia al archivo CSS que habíamos creado anteriormente:
<link href='BBrick.css' rel='stylesheet' type='text/css'> - Dentro de la entrada Lista de reserva de fuentes, pegue el nombre de la fuente que se está incluyendo. En este caso, 'Banana Brick'. Como este nombre de fuente tiene más de una palabra, debemos encerrarlo entre comillas simples. También podemos proporcionar una lista separada por comas de fuentes adicionales en caso de que haya algún problema.
- Cuando haya terminado, haga clic en Añadir fuente para cerrar el cuadro de diálogo. Esta fuente aparecerá ahora en el panel Biblioteca y será accesible desde la lista de fuentes internas cuando se trate de elementos de texto.
- Para completar el ejercicio, seleccione la Herramienta Texto (T) y dibuje un elemento de texto en el Escenario.
- Escriba lo que quiera como texto. En este caso, escribimos Declaración de fuente local.
- Con el elemento de texto seleccionado, cambie la Familia de fuentes dentro del panel Propiedades a Banana Brick. El elemento de texto en el Escenario cambiará inmediatamente en función de esta acción.
Ahora, podemos ver el proyecto de Edge Animate utilizando una definición de fuente local. Para ver un ejemplo de uso de fuentes locales dentro de un proyecto de Edge Animate, eche un vistazo al directorio LocalFont incluido en los archivos de ejemplo de este libro.
Tenga en cuenta que aunque estamos utilizando el término "fuente local" aquí, esto funcionará igual de bien después de ser subido a un servidor remoto. Simplemente debemos asegurarnos de que las reglas CSS se refieren a la ruta correcta una vez en el servidor.
Gestión de fuentes en la Biblioteca de Edge Animate
Hemos visto cómo añadir definiciones de fuentes al panel Biblioteca, pero ¿qué pasa si queremos eliminar o cambiar estas definiciones de alguna manera? Afortunadamente, Edge Animate hace que cualquiera de las dos tareas sea bastante sencilla.
Para utilizar un conjunto de fuentes personalizadas en varios proyectos, podemos emplear el formato de archivo .ansym. Para obtener más información al respecto, consulte el Capítulo 8, Hacer uso de los símbolos, los elementos anidados y la agrupación.
Para eliminar una definición de fuente del panel Biblioteca, haga clic en la definición de fuente que desea eliminar y luego pulse la tecla Suprimir del teclado del ordenador.
Para modificar una definición de fuente, simplemente haga doble clic en ella dentro del panel Biblioteca para que vuelva a aparecer el cuadro de diálogo Editar fuente web. Desde aquí, podemos añadir o eliminar fuentes de reserva o incluso cambiar la definición de la fuente por completo.
Eche un vistazo al proyecto dentro del directorio ManyFonts incluido en los archivos de ejemplo de este libro para ver un buen ejemplo de gestión de fuentes dentro de un proyecto.
Desafortunadamente, no hay ningún mecanismo disponible para especificar el rango de caracteres a incluir (como cuando se incrustan fuentes en Flash), ya que necesitamos el archivo de fuente completo. Tenga esto en cuenta cuando considere el tiempo total de carga de la página.
Ver las fuentes dentro de {projectname}_edge.js
Si queremos ver cómo define Edge Animate nuestras definiciones de fuentes personalizadas, o necesitamos hacer algunos ajustes a estas fuentes a mano; podemos hacerlo a través de la manipulación del archivo {projectname}_edge.js.
Cerca de la parte superior del archivo se declarará una variable fonts, que lista los detalles de cada fuente que hemos declarado dentro de Edge Animate:
var fonts = {};
fonts['\'Flavors\', cursive']='<link href=\'http://fonts.googleapis.com/css?family=Flavors\' rel=\'stylesheet\' type=\'text/css\'>';
La estructura está organizada de manera que la primera cadena es el nombre de la fuente, seguida de dos puntos, y completada por la cadena de enlace CSS.
Si tenemos varias fuentes definidas dentro de un proyecto, las definiciones de las fuentes se añaden una tras otra, como se muestra a continuación:
var fonts = {};
fonts['\'Flavors\', cursive']='<link href=\'http://fonts.googleapis.com/css?family=Flavors\' rel=\'stylesheet\' type=\'text/css\'>';
fonts['\'Sirin Stencil\'']='<link href=\'http://fonts.googleapis.com/css?family=Sirin+Stencil\' rel=\'stylesheet\' type=\'text/css\'>';
fonts['\'Fredericka the Great\'']='<link href=\'http://fonts.googleapis.com/css?family=Fredericka+the+Great\' rel=\'stylesheet\' type=\'text/css\'>';
fonts['\'Chelsea Market\'']='<link href=\'http://fonts.googleapis.com/css?family=Chelsea+Market\' rel=\'stylesheet\' type=\'text/css\'>';
fonts['\'Eater\'']='<link href=\'http://fonts.googleapis.com/css?family=Eater\' rel=\'stylesheet\' type=\'text/css\'>';
Es totalmente posible tener varias fuentes web definidas en un proyecto de Edge Animate, pero tenga en cuenta que los archivos de fuente deben descargarse en la caché del navegador del usuario para poder renderizarlos. Esto podría llevar algún tiempo y puede extender el tiempo que tarda nuestra composición en cargarse completamente.
Resumen
En este capítulo, hemos tenido una buena visión general de la herramienta Texto y de la creación y gestión de elementos de texto dentro de Adobe Edge Animate. También hemos podido demostrar la inclusión de fuentes web externas a través de servicios como Typekit y Google Web Fonts, lo que permite que nuestras composiciones utilicen muchas fuentes más allá de los conjuntos de tipos estándar "web-friendly". Este capítulo también ha marcado nuestra primera introducción real a la Biblioteca de Edge Animate.
En el siguiente capítulo, veremos cómo importar activos de imagen externos en un proyecto de Edge Animate que se pueden utilizar de muchas de las mismas maneras que los tipos de elementos que ya hemos explorado.
Comentarios
Publicar un comentario