Alejandra 15 de mayo de 2008 a las 15.27
   Imprimir artículo
elWebmaster.com

Taller de Flash: Propiedades de texto


Logotipo de FlashA diferencia de HTML y otros lenguajes donde las tipograf√≠as que se utilizan en el dise√Īo web dependen directamente de las tipograf√≠as que est√©n instaladas en la PC del usuario, en Flash puedes utilizar cualquier fuente y esta es quiz√°s una de las principales ventajas para los dise√Īadores.

Las fuentes Flash trabajan como si fueran un elemento vectorial (de hecho, lo son), por esto es que son escalables: puedes aumentar o disminuir su tama√Īo con la seguridad que se van a ver con una calidad excelente. Tambi√©n puedes realizar animaciones con fuentes. Sigue leyendo y conoce todo sobre el tratamiento de texto en Flash…

Nociones b√°sicas de tratamiento de fuentes en Flash

En Flash no existe diferencia entre texto en caja y texto suelto, como sí sucede en Photoshop e Illustrator. Aquí siempre que utilizamos texto, Flash creará una caja contenedora. Inicialmente, si hacemos un clic con la herramienta de texto en el espacio de trabajo y comenzamos a escribir, el texto continuará linealmente (ejemplo 1). Si en vez de hacer clic, arrastramos el mouse generando una caja, el texto quedará contenido en los límites de esta caja (ejemplo 2). Las dimensiones de la caja se pueden editar, siempre utilizando la herramienta de texto.

Caja de texto en Flash CS3En el ejemplo 1, el texto ha sido seleccionado normalmente (con la flecha negra). Esto me permite mover la caja de texto y agrandar o achicar el texto de la caja.Por otro lado, en el ejemplo 2 estamos trabajando con la herramienta de texto. Esto habilita la posibilidad de editar las dimensiones de la caja, sin cambiar el tama√Īo de la tipograf√≠a.

Cada vez que trabajes con la herramienta de texto, en el panel de propiedades aparecer√°n una serie de opciones, entre las m√°s comunes est√°n las de editar el formato del p√°rrafo, estilos, tipograf√≠a, tama√Īo y color. Todas similares a las de un editor de texto com√ļn.

Panel de control de texto en Adobe Flash

Pero también hay opciones propias de Adobe Flash. Veamos todas:

  • Formato de texto (T): Esto lo veremos a continuaci√≥n, pero b√°sicamente puedes elegir entre texto est√°tico (static text), texto din√°mico (dynamic tex) y texto de entrada (input text).
  • Tipograf√≠a, tama√Īo, color, estilo y p√°rrafo (A): En la l√≠nea de arriba a la derecha ver√°s opciones para cambiar la tipograf√≠a elegida, el tama√Īo de la fuente, el color, el estilo (negrita, cursiva) y la alineaci√≥n del p√°rrafo (izquierda, centrado, derecha o justificado).
  • P√°rrafo (¬∂): Haciendo clic sobre el s√≠mbolo de p√°rrafo puedes cambiar los valores para la sangr√≠a, el interlineado y los m√°rgenes del texto.
  • Direcci√≥n del texto: Al lado del s√≠mbolo de p√°rrafo ver√°s el s√≠mbolo Abcd, para editar la direcci√≥n del texto.
  • Espaciado (A\V): Agranda o achica el espacio entre caracteres.
  • Sub-texto (a¬™): Una opci√≥n para hacer sub√≠ndices y super√≠ndices.
  • Optimizaci√≥n: Al igual que otros programas de Adobe, Flash permite optimizar el texto con anti-alias especial para una mejor legibilidad, anti-alias para animaciones, bitmap o generar un anti-alias propio.
  • Dimensiones de la caja: Debajo a la izquierda aparece la informaci√≥n de tama√Īo y posici√≥n de la caja de texto. Puedes editarlas directamente desde ah√≠.
  • Enlaces: Bajo el signo del eslab√≥n, podemos linkear un texto a un sitio web. Selecciona el texto a linkear y pega la URL en el espacio en blanco al lado del eslab√≥n, tal como est√° en el gr√°fico.

Formatos de textoEn Flash hay tres formatos de texto, cada uno con una funcionalidad diferente. Para cambiar el formato de un texto debes tener seleccionada la herramienta de texto y elegir entre una de las opciones del cuadro T. Veamos para que sirve cada una:

Texto Est√°tico

Es el texto que no requiere interactividad con el usuario. Puede ser el texto de un art√≠culo, la presentaci√≥n de una compa√Ī√≠a, un t√≠tulo en una p√°gina web… En fin, es texto que se mira y no se toca.

Ejemplo de textosEn el gráfico podemos ver un sitio de ejemplo. Aquí se utilizó para la mayoría del texto el formato de Texto Estático (Static Text).

Cuando tengo Texto Est√°tico, el Panel de Propiedades me muestra dos opciones extras:

1. Hacerlo seleccionable.
2. Linkearlo a una URL.

El Texto Est√°tico siempre est√° dentro de una caja contenedora cuyas dimensiones dependen directamente de la cantidad de texto que haya. Esto es porque no tiene sentido agrandar una caja de texto que no contenga texto.

Haz clic aquí para ver el boceto de CuchiSushi con las opciones de texto.

Texto de Entrada

Este tipo de texto sirve para los casos en los que el usuario pueda ingresar texto al sistema. El ejemplo m√°s com√ļn es un formulario de contacto, pero existen otras situaciones en las que podr√≠a ser interesante este tipo de interacci√≥n con la persona que visita tu sitio. En la imagen de arriba, dentro del formulario de consulta hay dos campos con Texto de Entrada: la consulta en s√≠ misma y el espacio para escribir un e-mail.

En estos casos la caja contenedora de texto puede ser más grande que el texto que contiene. Aquí hay dos formas de crear una caja de texto: igual que en el texto estático o arrastrando con el cursor para crear una caja. De esta manera, puedes definir los límites del campo de escritura.

Texto InputPero cuando trabajas con Texto de Entrada (Input Text) aparecen nuevas opciones. Una de las opciones es especificar la cantidad m√°xima de caracteres que se puede escribir en nuestro campo de texto (en este caso 500).

También puedes definir un nombre de variable (Var) para trabajar luego con ActionScript (esto lo veremos próximamente en nuestra clase de formularios de contacto).

La opción a la izquierda de Var puede ser seleccionada en el caso que quieras mostrar un recuadro alrededor del campo de texto. A la izquierda, bajo el símbolo <> podrás renderizar el texto como HTML.

Pero lo m√°s interesante est√° en el men√ļ A. Aqu√≠ puedes elegir el formato de tu Texto de Entrada. Tienes 4 opciones: l√≠nea simple, multil√≠nea, multil√≠nea sin envoltura y contrase√Īa. Los formatos no especifican la cantidad m√°xima de caracteres a escribir asi que debes aclararlo en el campo de Caracteres m√°ximos.

  1. El texto multil√≠nea es un campo de texto donde la caja act√ļa como l√≠mite hacia los costados. Si el texto supera el ancho de la caja, continuar√°s escribiendo en una l√≠nea siguiente.
  2. El campo en l√≠nea simple permite escribir texto en una √ļnica l√≠nea. Es muy √ļtil en un formulario con varias opciones cortas como por ejemplo nombre, direcci√≥n, tel√©fono.
  3. Texto multil√≠nea sin envoltura. Esta caja de texto no tiene l√≠mites. A medida que vas escribiendo contin√ļas en la misma l√≠nea hasta que das enter para pasar a la l√≠nea inferior.
  4. El formato password permite escribir contrase√Īas y mostrarlas como aster√≠sticos.

Haz clic aquí para ver el funcionamiento en línea.

Texto Din√°mico

El Texto Dinámico (Dynamic Text) permite generar acciones interesantes con ActionScript. Además, se pueden enlazar a una URL, cosa que el Texto de Entrada no permite. Por otra parte, acepta los formatos de línea simple, multilínea y multilínea sin envoltura, tal como en el ejemplo anterior.

En el Texto Dinámico también se utiliza para incorporar información externa dentro de nuestro archivo SWF.

Haz clic aquí para descargar un ZIP los archivos FLA originales de esta clase (57 Kb)

<< CLASE ANTERIOR  

CLASE SIGUIENTE >>


Enviar a Del.icio.us Enviar a Meneame Enviar a Digg Enviar a Fresqui Enviar a Enchilame

Comentarios (20)

  1. juan pablo enriquez marcillo dice:

    hola alejandra quiero que pedirte un inmenso favor,en mas de una ocasion he intentado dar la propiedad de servir como link a los botones que he creado con animacion en flash pero o se como hacerlo, mira por ejemplo creo el boton del ejemplo anterior de la pagina sobre hilos y quiero que al dar click me enlace a su informacion.
    como lo hago te agradeceria si me escribes a mi correo guiandome sobre ello.
    tu informacion y manejo de los temas es genial. te agradesco y felicito. no se si este es el medo para pedirte este favor.

  2. Alejandra dice:

    Hola Juan Pablo. Me encantar√≠a responderte. S√≥lo quisiera saber a qu√© ejercicio en particular te refieres. ¬ŅQu√© tipo de bot√≥n quieres que act√ļe como enlace? D√©jame el nombre de la clase para que pueda orientarme.

  3. Juan Pablo dice:

    Mira quiero que me expliques con cualquier boton solo es para darle la propìedad de que me sirva como link. la clase en la que se empieza a tratar de los botones es clase 9 taller sobre botones,por ejemplo creo un boton que incluye animacion lo que quiero es que al darle click me dirija a mi informacion. En tu ejemplo cuando das click sobre cualquier boton de la pagina de las lanas cambia primero a la pagina donde aparece la fotgrafia de las personas creadoras de la pagina en el boton que dice QUIENES SOMOS Y asi con los demas que luego empezate a tratar, entre ellos los botones invisibles con accion scrip.
    Gracias espero que me haya hecho entender.

  4. María E López dice:

    Los felicito me parece un buen curso; sin embargo, como hay tantos detalles en flash quedan algunas dudas. Gracias por compartirlo

  5. jhamille osorio dice:

    Gracias por el curso es muy bueno. Pero tengo un problema con un juego que estoy desarrollando en flash y es el siguiente cree un texto dinamico para informar al jugador cuanto dinero le queda, y al publicar el swf aparece en esta caja de texto un simbolo extra√Īo que reemplaza al signo pesos que puse, No se como arreglarlo.

    Quisiera me ayudarn con esta duda y de antemano

    Gracias

  6. Andrea dice:

    Hola!
    te hago una consulta, quiero saber si se puede enviar un newsletter que contenga flash.
    Ya que estoy haciendo las pruebas del que dise√Īe que es una parte en flash y otra en jpg, y cuando lo armo en el dreamweaver, y luego lo envi√≠o no se ve correctamente el swf.
    Gracias desde ya por tu respuesta.!!

  7. Juan Manuel dice:

    ¬°Hola, Andrea!

    No es lo más recomendable enviar un archivo flash por mail, porque hay mil posibilidades de que la película swf sea bloqueada. Pero si decides hacerlo de todas formas, deberías embeber el OBJETO en el HTML del mail, recurriendo a una dirección web donde esté alojado el archivo flash.

    ¬°Saludos y gracias por tu pregunta!

  8. yonathan dice:

    hola k tan, tengo un problema.
    lo que pasa es que tengo un cuadro de texto (para introducir texto), pero necesito k el texto que sea introducido aparesca en otra parte, k es lo que pasa que donde debe de aparecer es dentro de un clip de pelicula, no se de que manera hacerlo, por que si se hace que el texto aparesca por fuera del clip si me da bien pero dentro no, quiero que me ayudes con eso, graxias

  9. Martin dice:

    Muy interesante el post. Felicitaciones por la web… Ac√° dejo un link con algunos consejos sobre como trabajar proyectos Flash. Gracias, saludos!

    http://exportamelapeli.blogspot.com/2009/07/flash-tips.html

  10. Diego dice:

    Hola hola, ayudaaa, soy nuevo en flash y me descargue un template para crear mi sitio web, todo va bien, pero me encontr√© con un problema: Tengo unas cajas de texto predeterminadas y las puedo modificar tanto en tama√Īo de caja como en fonts y colores, pero al momento de hacer el preview no se ve que se ha hecho ningun cambio en dicha caja de texto… osea se presenta tal cual me vino el template. Por favor si me sacan de esta duda que me tiene todo el dia metido en esta computadora estar√© muy agradecido.
    Saludos.

  11. Diego dice:

    Me olvidé de acotar al comentario.. esta template esta bajado a la version en flash 7 action script 1,0 y su layer de action solo me dice esto:

    this.createTextField(“contentdisplay_txt”, this.getNextHighestDepth(), 195, 90, 190, 290);
    //
    contentdisplay_txt.multiline = true;
    contentdisplay_txt.wordWrap = true;
    contentdisplay_txt.embedFonts = true;
    //
    contentFormat = new TextFormat();
    contentFormat.font = “Font_1”;
    contentFormat.size = 10;
    contentFormat.color = 0x333333;
    //
    contentdisplay_txt.text = fordisplay_txt.text;
    contentdisplay_txt.setTextFormat(contentFormat);
    //Remove user input text field
    fordisplay_txt._x = 3000;
    //Remove Scroll buttons
    if (contentdisplay_txt.maxscroll<=1){
    Scroller._x = 3000;
    }

  12. Alejandra dice:

    Tendr√≠a que ver el archivo al que te refieres…

  13. jose dice:

    mira lo ke pasa esk no se como darle el efecto a un texto

  14. Gerardo R. dice:

    Justo lo que estaba buscando… S√≥lo que algo me queda en el aire, tengo una duda, es importante saber a donde se va el texto introducido o el mail… pens√© que en el archivo original encontrar√≠a un geturl:mailto… a donde quieras que se vaya esa informaci√≥n que te dejaron como duda o comentario, cuyo remitente (podr√≠a ser solo a manera de referencia) es el mail que introdujeron.

    Me podr√≠as ayudar? Es decir, necesito recibir la informaci√≥n que me escriben por mail o como sea…
    Gracias

  15. Alejandra dice:

    Hola Gerardo, puedes ver lo que necesitas en la siguiente clase:
    http://www.elwebmaster.com/talleres/taller-de-flash-formulario-de-contacto

    Para m√°s detalles, puedes visitar el temario del taller donde acceder√°s al resto de las clases:
    http://www.elwebmaster.com/talleres/taller-de-flash-temario

    Saludos,

    Ale

  16. María Belén Maylín dice:

    Hola Alejandra quisiera saber c√≥mo tengo que hacer para que un bot√≥n al presionarlo me cargue texto en un cuadro en la misma escena, por favor desear√≠a si me pudieses mandar los pasos al e-mail, desde ya muchas gracias…

  17. Alejandra dice:

    Hola Mar√≠a. Ser√≠a √≥ptimo conocer un poco m√°s el proyecto para ver si la soluci√≥n se adapta o no, pero lo normal en estos casos es crear un fotograma donde aparezca el texto. Supongamos que tienes tu escena est√°tica en el fotograma (frame) N¬ļ 1. Puedes crear all√≠ un bot√≥n que te lleve al fotograma N¬ļ 2, donde s√≠ est√° el texto. La acci√≥n para el bot√≥n ser√≠a:
    on (release) {
    gotoAndStop(1);
    }
    ¬°Saludos!

  18. Rodrigo dice:

    Hola Alejandra, primero muchas gracias por toda la ayuda que brindas, de verdad gracias a tu taller he mejorado muchisimo. Tengo un problema puntual, he comprado una plantilla en templatemonster para mi pagina web (no he mejorado tanto como para hacer algo as√≠ de profesional yo mismo) es una pagina con XML, el problema es que al modificar la pel√≠cula (tipo de letra del titulo por ejemplo) al publicar la pel√≠cula, el tama√Īo del texto cambia, se pone al m√≠nimo (8 creo) y es ilegible, pero si uso el mismo XML con la pel√≠cula que viene por defecto, todo funciona correctamente, ya no se que hacer, creo que pasa por un tema de publicaci√≥n…

    De antemano gracias por tu ayuda.

  19. Luis Saavedra dice:

    Hola, como estas, me interesa mucho lo que explicas sobre los textos, ya que intento hacer un juego de preguntas y utilizar el input para que el jugador pueda ingresar a los diferentes niveles desde un password. Ya casi que lo tengo, solo que no pude hacer que el input text quede en el men√ļ. Me aparece en todos los fotogramas del juego y he tenido que recurrir a una mascara para ocultarlo.¬ŅTenes idea como soluciono esto? otra cosa, me gustar√≠a saber si estas dando clases por Internet y cuanto me sale. Gracias por tu aporte.

  20. claudia dice:

    Hola, muy bueno el sitio, felicidades. Quisiera me orientaran sobre como darle la opcion al usuario para cambiar la tipografia de un texto en un ejercicio? Gracias y saludos!

Deja tu opinión

© 2007 - 2008 elWebmaster.com | Powered by Wordpress | Diseño CSS y XHTML válido. | Algunos íconos basados en FamFamFam Mini
Acceder