Flash CS5 para diseñadores TLF y ActionScript + Win 1 de 3 copias firmadas!

Mucho ha cambiado entre cómo se manejó el texto en Flash CS4 y Flash CS5. Creemos que ahora es un buen momento para levantar un taburete, sentarse y revisar, en términos muy generales, lo que se necesita saber sobre TLF antes de “conectar” un ejercicio o proyecto con ActionScript..

El siguiente es un ejercicio de Foundation Flash CS5 para diseñadores por Tom Green y Tiago Dias.
 
Si te sientes con suerte, participa en el concurso Activetuts + para gana una de las 3 copias firmadas! (Por supuesto, siempre puedes comprar una copia ...)

Introducción

Con el nuevo TextLayoutFramework (TLF), el texto se encuentra en estas cosas llamadas contenedores. Se pueden dibujar físicamente en el escenario con la herramienta Texto y se les puede dar un nombre de instancia o, como es más común, se pueden crear en tiempo de ejecución. También sabe que el texto se puede formatear y manipular usando el panel Propiedades. Lo bueno aquí es la palabra propiedades. Si hay una propiedad en el panel, su contraparte se encuentra en ActionScript. La mala noticia es que, ActionScript es piedra, frío estúpido. No tiene una pista, por ejemplo, qué es un contenedor hasta que le dices que cree uno. No formateará el texto hasta que le digas qué hacer. Ni siquiera pondrá el texto en el escenario hasta que se le indique que lo haga..

La mayoría de los proyectos comenzarán con usted diciéndole a Flash que cree un Configuración() objeto, que se utiliza para indicar a Flash que hay un contenedor en el escenario y cómo administrar el Marco de diseño de texto para las cosas en el contenedor. El aspecto real es manejado por el Flujo de texto () clase, que toma sus órdenes, por así decirlo, de la Configuración() objeto.

Naturalmente, siendo estúpido, el Configuración() El objeto necesita que se le diga exactamente cómo administrar el texto en el contenedor. El formato predeterminado se establece a través de una propiedad de la clase de configuración llamada textFlowInitialFormat. Para cambiarlo, simplemente use el Formato de texto () clase para establecer las fuentes, los colores, la alineación, etc., y luego decirle al jefe-Configuración ()-que es textFlowInitialFormatha cambiado a los que configuraste usando TextLayoutFormat ().El jefe lo conseguirá, pero no es terriblemente brillante, por lo que debe decirle que entregue el trabajo real a otro miembro del equipo de administración, el Flujo de texto () clase. Esta clase tiene la responsabilidad general de cualquier palabra en un contenedor. Ser tan tenue como el jefe, Flujo de texto () hay que saber qué es un párrafo (Párrafo), que tan ancho es el párrafo (Spanelement), si hay gráficos incrustados en el párrafo (InLineGraphicElement), si alguno de los textos contiene enlaces (Elemento de enlace), y así. No solo eso, sino que necesita que se le diga qué texto se agrega al contenedor para que pueda manejar la longitud de la línea y agregar cualquier elemento secundario (addChild) que contienen ese formato para que el usuario pueda verlo.

los Flujo de texto () La clase, una vez más no es demasiado brillante, entregará el trabajo a otro miembro del equipo de administración, el IFlowComposer () clase, cuyo único trabajo es administrar el diseño y la visualización del flujo de texto dentro o entre los contenedores. El compositor de flujos finaliza el proceso al decidir la cantidad de texto que va a un contenedor y luego agrega las líneas de texto al sprite. Esto se logra mediante el uso de la addController () método, que crea una ContainerController () Objeto cuyos parámetros identifican el contenedor y sus propiedades..

El último paso habitual es decirle a FlowComposer que actualice los controladores y ponga el texto en el escenario de acuerdo con cómo los otros miembros del equipo le han dicho a Configuración() objetar cómo se gestionará su parte del proyecto.

Con esta información en la mano, pasemos a trabajar con TLF en ActionScript. Vamos a crear una columna de texto con ActionScript..


Paso 1: Nuevo documento

Abra un nuevo documento Flash ActionScript 3.0, cambie el nombre de la Capa 1 a acciones, seleccione el primer cuadro de la capa de acciones y abra el panel Acciones..


Paso 2: ActionScript

Haga clic una vez en el panel Script e ingrese lo siguiente:

var myDummyText: String = "La introducción de la línea de productos Adobe CS5 pone en sus manos algunas potentes herramientas tipográficas, especialmente una nueva API (Application Programming Interface) llamada Type Layout Framework (TLF) y con más herramientas en la línea de Adobe. Para acercarse más a un punto de confluencia con Flash, el campo de los gráficos tipográficos en movimiento en la Web está a punto de moverse hacia un territorio que aún no se ha explorado. Para comenzar esa exploración, necesita comprender qué tipo está en Flash y, lo que es más importante , lo que puede hacer con él para honrar a los mensajeros de comunicación de su contenido ".

Necesitas un texto para agregar al escenario. Esta cadena es el tercer párrafo de este capítulo. Ahora que tiene el texto para ir al contenedor, necesita cargar la clase que lo administrará.


Paso 3: Configuración ()

Presione la tecla Intro (Windows) o Retorno (Mac), y agregue la siguiente línea de código:

 var config: Configuration = new Configuration ();

Como habrá notado, tan pronto como creó el objeto Configuración (), Flash importó la clase.-flashx.textLayout.elements.Configuration -cuya tarea principal es controlar cómo se comporta TLF. El siguiente bloque de código le dice a TLF cómo aparecerá el texto en el escenario.


Paso 4: Clase TextLayoutFormat

Presione la tecla Intro (Windows) o Retorno (Mac) dos veces, e ingrese lo siguiente:

 var charFormat: TextLayoutFormat = new TextLayoutFormat (); charFormat.fontFamily = "Arial, Helvetica, _sans"; charFormat.fontSize = 14; charFormat.color = 0x000000; charFormat.textAlign = TextAlign.LEFT; charFormat.paddingLeft = 100; charFormat.paddingTop = 100;

La clase TextLayoutFormat, como dijimos anteriormente, es cómo se formatea el texto en un contenedor. Las propiedades de esta clase afectan el formato y el estilo del texto en un contenedor, un párrafo o incluso una sola línea de texto. En este caso, le estamos diciendo a Flash qué fuentes usar, el tamaño, el color, cómo se alinearán (observe la mayúscula utilizada para la alineación) y el relleno que se mueve fuera de los bordes del contenedor..

Antes de continuar, necesitas que hagas algo. Hay un problema de codificación. Desplácese hasta las instrucciones de importación. Si ves esta linea-importar flashx.textLayout.elements.TextAlign;-proceder al siguiente bloque de código. Si no lo hace, elimine esta línea en el bloque de código que acaba de ingresar: charFormat.textAlign = TextAlign.LEFT;. Volver a entrar en charFormat.textAlign =. Escriba las dos primeras letras de la clase (Te), presione Ctrl + barra espaciadora, y debería aparecer la sugerencia de código. Encontrar Texto alineado, y haga doble clic en él. Esto debería agregar la declaración de importación que falta. Para preservar su cordura, le proporcionaremos una lista de las declaraciones de importación que deben aparecer al final de cada ejercicio. Le recomendamos encarecidamente que compare su lista de declaraciones de importación con la lista presentada y, si falta alguna, agréguela a su código..

Ahora que sabe cómo se formateará el texto, debe decirle al objeto Configuración () que use el formato. Si no lo hace, aplicará la configuración predeterminada que elija.


Paso 5: textFlowInitialFormat

Presione la tecla Intro (Windows) o Retorno (Mac) dos veces, e ingrese lo siguiente:

 config.textFlowInitialFormat = charFormat;

Paso 6: TextFlow ()

Presione la tecla Intro (Windows) o Retorno (Mac), e ingrese el siguiente bloque de código:

 var textFlow: TextFlow = new TextFlow (config); var p: ParagraphElement = new ParagraphElement (); var span: SpanElement = new SpanElement (); span.text = myDummyText; p.addChild (span); textFlow.addChild (p);

los Flujo de texto () El objeto debe estar aquí porque su trabajo es administrar todo el texto en el contenedor. El constructor-TextFlow (config)-TLF le permite saber que es usar el objeto de configuración creado anteriormente para que ahora sepa cómo formatear el contenido del contenedor e incluso el contenedor mismo..
El siguiente constructor-ParagraphElement ()-Básicamente le dice a Flash cómo se debe manejar un párrafo. Solo hay uno aquí, así que realmente no necesita un parámetro.

El último paso es obtener todo el formato y el diseño en el contenedor en el escenario.


Paso 7: ContainerController

Presione la tecla Intro (Windows) o Retorno (Mac), y agregue estas dos líneas finales:

 textFlow.flowComposer.addController (nuevo ContainerController (este, 500, 350)); textFlow.flowComposer.updateAllControllers ();

La primera línea añade la ContainerController y le dice a Flash que el contenedor que se está administrando es el DisplayObject actual (esta), que actualmente es el escenario, y para establecer sus dimensiones en 500 píxeles de ancho por 350 píxeles de alto.


Paso 8: Prueba

Guarda el proyecto y prueba la película. El texto, como se muestra a continuación, aparece usando las instrucciones de formato que configuró.

Importar declaraciones para este ejercicio

Estas son las declaraciones de importación para este ejercicio:

 importar flashx.textLayout.elements.Configuration; importar flashx.textLayout.formats.TextLayoutFormat; importar flashx.textLayout.formats.TextAlign; importar flashx.textLayout.elements.TextFlow; importar flashx.textLayout.elements.ParagraphElement; importar flashx.textLayout.elements.SpanElement; importar flashx.textLayout.container.ContainerController;

Uso de ActionScript para crear y formatear el contenedor y su texto

Aunque esta tarea de codificación puede parecer, al principio, ser un proceso bastante complicado, podemos asegurar que no lo es; será casi una segunda naturaleza cuando comience a usar ActionScript para jugar con el texto en los contenedores.

Con la introducción del Formato de diseño de texto, su capacidad para crear texto, formatear texto, ponerlo en columnas y, en general, manipularlo utilizando ActionScript ha ampliado enormemente sus posibilidades creativas. Antes de que se entusiasme con esto, necesita saber que la palabra Marco de referencia está ahí por una razón.

Cualquier objeto de texto TLF que cree se basará en una biblioteca de ActionScript TLF específica, también llamada biblioteca compartida en tiempo de ejecución (RSL). Cuando trabaja en el escenario en la interfaz de Flash, Flash proporciona la biblioteca. Este no es el caso cuando publica el SWF y lo coloca en una página web. Debe estar disponible, como Flash Player, en la máquina del usuario. Cuando el SWF se cargue, buscará la Biblioteca en tres lugares:

  • La computadora local: Flash Player busca una copia de la biblioteca en la máquina local en la que se está reproduciendo. Si no está allí, se dirige a Adobe.com.
  • Adobe.com: Si no hay una copia local disponible, Flash Player consultará los servidores de Adobe para obtener una copia de la biblioteca. La biblioteca, como el complemento de Flash Player, debe descargarse solo una vez por computadora. Después de eso, todos los archivos SWF posteriores que se reproduzcan en la misma computadora usarán la copia de la biblioteca descargada previamente. Si, por alguna razón, no puede agarrarlo allí, buscará en la carpeta que contiene el SWF..
  • En la carpeta que contiene el SWF: Si los servidores de Adobe no están disponibles por algún motivo, Flash Player busca la biblioteca en el directorio del servidor web donde reside el archivo SWF. Para proporcionar este nivel adicional de respaldo, cargue manualmente el archivo de la biblioteca en el servidor web junto con su archivo SWF. Proporcionamos más información acerca de cómo hacer esto en el Capítulo 15.

    Cuando publica un archivo SWF que usa texto TLF, Flash crea un archivo adicional llamado textLayout_X.X.XX.XXX.swz (donde las X se reemplazan por el número de versión) junto a su archivo SWF. Opcionalmente, puede elegir cargar este archivo a su servidor web junto con su archivo SWF. Esto permite el caso raro de que los servidores de Adobe no estén disponibles por alguna razón. Si abre el archivo donde guardó este ejercicio, verá el SWF y, como se muestra en la Figura 6-25, el archivo SWZ..

El archivo .swz contiene el marco de diseño de texto.


El sorteo!

Estamos ejecutando este sorteo de una manera un poco diferente ya que Adam de Aetuts + empujó a Wildfire a mi manera ... ¡Wildfire es un brillante promotor de promociones y hace que participar en las competiciones sea muy fácil! Si desea tener la oportunidad de ganar una de las tres copias firmadas de "Foundation Flash CS5 for Designers", simplemente ingrese!

Como entro?

  1. Envía un tweet desde la página de entrada. Por cada seguidor de Twitter que ingresa a través de tu enlace, obtienes una entrada extra.
  2. Rellene sus datos una vez que lo haya hecho. Eso es!

Los tres ganadores serán anunciados el lunes 6 de septiembre. Buena suerte!