Lección 6: Texto Desplazable

Transcripción

1 Lección 6: Texto Desplazable El texto desplazable es justamente el texto que puede ser desplazado, ya sea verticalmente, horizontalmente, o en ambas direcciones. En AutoPlay, el texto desplazable puede ser desplazado utilizando un objeto de Párrafo, el cual cuenta con un soporte incorporado de barras de desplazamiento verticales y horizontales. El texto desplazable es útil cuando quieres mostrar más texto del que puede caber en un espacio dado. Por ejemplo, si necesitas mostrar un acuerdo de licencia amplio, o el contenido de un archivo leeme.txt, o un artículo sobre una oficina de horticultura escrito por tu autor nerd favorito. Qué aprenderás? En esta lección aprenderás cómo: Añadir una imagen de Panel que sirva como un telón de fondo y bordeada con algo de texto Reemplazar el texto en un objeto de Párrafo al hacer shift-arrastrar en un archivo de texto Añadir un objeto de Párrafo desplazable Utilizar un estilo personalizado de barra de desplazamiento Cuánto tiempo tomará esto? Esta lección dura aproximadamente 15 minutos. Comenzando la Lección Si estás continuando desde la Lección 5, deberías tener ejecutándose el AutoPlay con el proyecto Tutorial aún abierto. Si es así, estás listo para avanzar al siguiente ejercicio: Añadir un objeto de Video. En caso contrario, necesitarás abrir el archivo de proyecto que guardaste al final de la Lección 5. 1) Abre el archivo Tutorial.am7 que guardaste en la Lección 5. Cuando guardas un proyecto, AutoPlay automáticamente crea una carpeta de proyecto para él en el interior de la carpeta My Documents\AutoPlay Media Studio 7.0\Projects. Esta carpeta de proyecto es donde todo lo que le pertenece al proyecto es almacenado, incluyendo el archivo de proyecto, el cual contiene todas las configuraciones utilizadas en el proyecto. 1

2 La carpeta de proyecto y el archivo de proyecto siempre tienen el mismo nombre que le diste al proyecto cuando éste fue creado. El nombre de los archivos de proyecto finalizan con una extensión de archivo.am7. Puesto que nombraste este proyecto como Tutorial en la Lección 1, el nombre de la carpeta de proyecto será Tutorial, y el nombre del archivo de proyecto será Tutorial.am7. Así que la ruta del archivo de proyecto debería ser la siguiente:...\my Documents\AutoPlay Media Studio 7.0\Projects\Tutorial\Tutorial.am7 Para abrir el proyecto, sólo necesitas abrir el archivo de proyecto. Añadir una Imagen de Panel Una imagen de Panel es sólo un objeto de imagen que puedes colocar detrás de otro objeto para lograr algún tipo de fondo personalizado o efecto de marco de fotografía. Aunque para este propósito puedes utilizar cualquier imagen, AutoPlay viene con algunas imágenes que fueron diseñadas para hacer justamente eso. Consejo: Puedes ordenar más imágenes de Panel directamente desde nuestro sitio web. Literalmente hay disponibles miles de ellas. Las imágenes de Panel son especialmente útiles para proporcionar un tipo de minifondo detrás de un montón de texto, para hacer el texto más fácil de leer que si tuviera sólo la página de fondo. (Esto es muy práctico para cuando utilices una imagen realmente buena como fondo de página). También pueden ser utilizadas para proporcionar un marco decorativo para apartar un área de la página. Nota: El objeto de Párrafo tiene un borde opcional y un color de fondo, los cuales, en muchos casos, pueden servir para el mismo propósito que la imagen de Panel. Sin embargo, para bordes y fondos realmente fantásticos y profesionales, una imagen de Panel es la mejor opción. 1) Conmuta a la página About Ted. Vamos a añadir la imagen de Panel y el objeto de Párrafo en la página About Ted, así que antes de hacer otra cosa, haz click en la pestaña de la página About Ted en la parte superior del área de trabajo. 2) Conmuta al panel Gallery y haz click en el botón Images. Haz doble click en la carpeta up, enseguida haz doble click en la carpeta Elements y luego navega por la carpeta Panels. El panel Gallery está pestañeado con el panel Project al lado derecho de la ventana del programa AutoPlay. Puedes conmutar entre estos paneles pestañeados haciendo click en la pestaña apropiada. 2

3 Nota: Anteriormente habíamos hecho visibles los paneles Gallery y Project. Si no están visibles, puedes visualizarlos utilizando el submenú View > Panes. El panel Gallery te permite explorar la biblioteca de archivos que vienen con AutoPlay. Esta biblioteca está organizada en diferentes secciones, pudiendo accesar a cada una mediante un botón en la parte superior del panel. Al hacer click en el botón Images en la parte superior del panel, se muestra la colección de imágenes de la galería. Igual que la pestaña Gallery en el cuadro de diálogo Select File, el panel Gallery también recuerda la última carpeta a la que accesaste para cada tipo de archivo que contiene. La última vez que utilizaste el panel Gallery para añadirle una imagen al proyecto fue en la Lección 2, cuando lo utilizaste para arrastrar un fondo dentro de la página. A menos que hayas navegado a alguna otra parte desde entonces, el panel Gallery aún debería estar en la carpeta Backgrounds. Para navegar a la carpeta Panels primero necesitas subir un nivel haciendo doble click en la carpeta up (la carpeta con los dos puntos). Ya que hayas subido un nivel, puedes empezar a navegar dentro de la carpeta Elements y luego dentro de la carpeta Panels. Nota: Navegar por el panel Gallery es igual que navegar en el cuadro de diálogo Select File, o como navegar en Windows. Para ver los archivos del interior de la carpeta sólo haz doble click en ella. 3) Previsualiza algunas imágenes de la carpeta Panels haciendo click en sus nombres de archivo. Como puedes ver, las imágenes de Panel vienen en diferentes formas, colores y texturas. Esta es sólo una pequeña muestra de las imágenes de Panel que están incluidas en los paquetes con contenido extra que puedes comprar desde el sitio web de Indigo Rose. 3

4 4) Selecciona el archivo 066FC01.png y arrástralo dentro de la página. Cuando estés eligiendo una imagen que te sirva como un fondo para el texto, busca una que tenga textura uniforme, puesto que las texturas agitadas harán más difícil distinguir las letras. Querrás elegir una con colores que contrasten bien con el color del texto. En este caso, estaremos utilizando texto blanco, así que no vamos a querer elegir algo demasiado brillante; un texto blanco sobre un fondo brillante sería muy difícil o incluso imposible de leer. Un buen candidato para este proyecto puede ser 066FC01.png. Esta imagen tiene un fondo sólido negro que contrasta bastante bien con el texto blanco, y un bonito marco azul resplandeciente que se verá muy bien contra el fondo de la página. También tiene un sutil efecto de brillo alrededor de las orillas del marco. Para lograr este efecto de iluminación, la imagen se hizo un poco más grande que el marco en todos sus lados. De hecho, la imagen fue dimensionada para ajustarse perfectamente en una página de 425 pixeles de altura (igual que las páginas de nuestro proyecto). Esto realmente facilita posicionar la imagen en nuestra página. 5) Utiliza las herramientas de alineamiento para centrar el objeto de Imagen verticalmente a la página y alinearlo con la orilla derecha de la página. Primeramente asegúrate que el modo Align to Page está activado. (Una manera fácil de hacer esto es haciendo click derecho en la imagen y elegir Align. Si el modo Align to Page está activado, el elemento To Page tendrá un recuadro alrededor de él). Luego haz click derecho en el objeto y elige Align > Center Vertical. Finalmente haz click derecho en el objeto y elige Align > Right. Voila! Ahora la imagen está perfectamente posicionada sobre el lado derecho de la página. 4

5 Consejo: Si View > Snap to Page está activado, también puedes simplemente arrastrar el objeto dentro de un lugar con el ratón, y éste se acomodará en el lugar al estarte aproximando a la esquina superior derecha de la página. 6) Haz click derecho en el objeto de Imagen y elige Pin. Al anclar el objeto de Imagen hará que sea más fácil trabajar alrededor del objeto sin moverlo accidentalmente. (Posteriormente colocaremos un objeto de Párrafo encima del objeto de Imagen). Consejo: También puedes anclar un objeto seleccionándolo y presionando Ctrl+P. Añadiendo un Objeto de Párrafo Desplazable El objeto de Párrafo tiene la habilidad incorporada de mostrar texto que es más amplio o extenso que el objeto mismo, con barras de desplazamiento para permitirle al usuario deslizarse a las partes ocultas para poder verlas. De hecho, todo lo que necesitas hacer para que el objeto de Párrafo sea desplazable es añadir más texto del que puede mostrar. (Por defecto, los nuevos objetos de Párrafo tienen su barra de desplazamiento vertical ajustada a Auto, lo que significa que automáticamente mostrarán una barra de desplazamiento vertical si el texto en ellos es lo suficientemente extenso). Hay dos tipos básicos de barras de desplazamiento: vertical y horizontal. (Las barras de desplazamiento vertical te permiten deslizarte por el texto hacia arriba y hacia abajo, mientras que las barras de desplazamiento horizontal te permiten desplazarte por el texto de izquierda a derecha). 5

6 Las barras de desplazamiento vertical son útiles cuando estás mostrando documentos de texto extensos (de hecho, te permiten colocar todo el texto que quieras en el objeto de Párrafo). El tamaño del objeto de Párrafo sólo determina cuántas líneas de texto podrá ver el usuario en cualquier tiempo dado Las barras de desplazamiento horizontal son útiles cuando estás mostrando texto con líneas muy largas y no quieres que el texto se pliegue en el borde derecho del objeto de Párrafo. En lugar de esto, el usuario puede arrastrar la barra de desplazamiento horizontal a la izquierda o a la derecha para ver todo el texto en una línea. Aunque a la mayoría de la gente esto le parece desconcertante, puede ser útil para aquel texto que se supone que no se va a plegar, tal como texto organizado en columnas con una anchura fija o texto de muestras de código de programa. Nota: A la mayoría de los usuarios no les gusta el tener que plegar el texto horizontalmente. Deberías evitar el uso de barras de desplazamiento horizontal a menos que haya una muy buena razón para incorporarlas. 1) Presiona Ctrl+3 para añadir un nuevo objeto de Párrafo. Haz doble click en el nuevo objeto, ajusta su color Normal a blanco y luego haz click en el botón Match Normal. Queremos que el objeto de Párrafo tenga texto blanco y además no queremos que el color cambie cuando el ratón se posicione sobre él, así que necesitamos asegurarnos que los colores Highlight y Click sean ambos iguales al color Normal. 2) Cambia la configuración de la barra de desplazamiento vertical a On y haz click en OK. 6

7 Después de hacer click en OK, el objeto de Párrafo que fue añadido en la esquina superior izquierda de la página reflejará las nuevas configuraciones. Observa que el texto de muestra es en efecto blanco y que el objeto tiene una barra de desplazamiento vertical. La imposición de la barra de desplazamiento vertical sin importar el tamaño del objeto hará más fácil posicionar el objeto en el siguiente paso, puesto que la barra de desplazamiento afecta la cantidad de espacio que tiene el texto, lo cual a su vez puede afectar dónde quieras colocar el objeto para centrarlo en la parte superior de la imagen de Panel. 3) Posiciona el objeto de Párrafo sobre la imagen de Panel y cámbialo de tamaño de modo que llene la mayoría del espacio negro del interior del marco. Queremos que el objeto de Párrafo sea más pequeño que la imagen de Panel, de modo que se ajuste en el interior del marco azul que está incorporado en la imagen. Ahora carguemos algo de texto en el interior del objeto de Párrafo. 4) En el panel Propiedades haz click en la configuración Text y luego haz click en el botón Edit. Cuando haces click en el botón Edit, aparece el cuadro de diálogo Edit Text. 7

8 En la parte inferior del cuadro de diálogo Edit Text hay cuatro botones: Load, Save, Print y Spelling. El botón Load te permite importar texto desde cualquier otro archivo de texto en tu sistema. El botón Save te permite guardar el contenido actual del cuadro de diálogo Edit Text a un archivo de texto. El botón Print te permite imprimir el contenido actual del cuadro de diálogo. El botón Spelling revisa interactivamente la ortografía del texto, permitiéndote elegir entre varias sugerencias de corrección ortográfica en palabras mal escritas. Podríamos utilizar el botón Load para cargar un archivo de texto en el objeto de Párrafo, pero puesto que el archivo que queremos cargar está en la galería del AutoPlay, hay un método incluso más fácil para realizar esta tarea. 5) Haz click en Cancel para salir del cuadro de diálogo Edit Text, luego haz click en el botón Docs en la parte inferior del panel Gallery. Al hacer click en el botón Docs se despliegan los archivos de muestra de los documentos que vienen incorporados con AutoPlay. El archivo que queremos cargar dentro del objeto de Párrafo es TedSellers.txt. 8

9 6) Mantén presionada la tecla Shift y arrastra el archivo TedSellers.txt dentro del objeto de Párrafo. Normalmente, cuando arrastras un archivo de texto dentro de una página, se crea automáticamente un nuevo objeto de Párrafo con el contenido total del archivo de texto dentro de él. Esto es tremendamente fantástico. En efecto, podríamos haber utilizado este método para crear desde el principio el objeto de Párrafo. Sin embargo, si mantienes presionada la tecla Shift mientras arrastras el archivo de texto dentro del objeto de Párrafo, reemplazarás el texto del objeto de Párrafo con el texto del archivo. Lo cual, tienes que admitir, es también bastante ingenioso. Cuando arrastras el archivo TedSellers.txt dentro del objeto de Párrafo mientras presionas la tecla Shift, el contenido del archivo TedSellers.txt es cargado instantáneamente dentro del objeto de Párrafo. Consejo: Hay todo tipo de pequeños trucos como éste para ahorrar tiempo, que están incorporados en AutoPlay. Si quieres averiguar un poco más de ellos, échale un vistazo al tema "Drag and Drop Assistant" en el archivo de Ayuda. 7) En el panel Propiedades, cambia la configuración ScrollbarStyle de Standard a Chrome. El objeto de Párrafo te permite elegir entre una barra de desplazamiento Standard (estilo Windows) o un estilo personalizado de barra de desplazamiento, como la Chrome, que viene incorporada con el AutoPlay. 9

10 8) Prueba algunos otros estilos de barras de desplazamiento y selecciona uno que luzca bien con la imagen de Panel que tenemos. Adelante! Elige cualquier estilo de barra de desplazamiento que sea la mejor para ti. (Nosotros elegimos Corporate porque contrasta bien con el fondo negro de la imagen de Panel que estamos utilizando). De hecho, cada estilo de barra de desplazamiento es sólo un archivo de imagen con diferentes pedazos de barra de desplazamiento acomodados en una fila. Cada parte individual de la barra de desplazamiento es representada por una sección diferente de la imagen. AutoPlay extrae las partes de esta imagen y luego las utiliza para construir la barra de desplazamiento. La skin (piel) de la barra de desplazamiento Corporate Este tipo de archivo de imagen conteniendo diferentes partes interconectadas es usualmente conocido como un archivo skin. Efectivamente, los estilos de barras de desplazamiento son similares a los archivos skin utilizados por otros programas skinables, como Winamp. Nota: Las imágenes de barras de desplazamiento del AutoPlay están localizadas en la subcarpeta Plugins\Scrollbars, en el interior de la carpeta donde AutoPlay fue instalado. Puedes añadirle más estilos a la lista de estilos de desplazamiento disponibles copiando imágenes compatibles dentro de esa carpeta. Consejo: También puedes construir tus propios skins de barras de desplazamiento para el AutoPlay utilizando algún programa gráfico (Photoshop, CorelDraw, Paint, etc.). La manera más fácil para hacer esto es utilizar como plantilla una de las imágenes 10

11 existentes de barras de desplazamiento. Simplemente haz una copia de un archivo skin existente y luego modifícala, reemplazando cada sección de la imagen con tu propia parte correspondiente de la barra de desplazamiento. Inténtalo! Ahora que tenemos todo configurado de la forma que queríamos, veamos algo del texto desplazable en acción. 1) Guarda el proyecto. Siempre es una buena idea guardar el proyecto antes de previsualizarlo. 2) Previsualiza el proyecto. Cuando la vista previa de la aplicación se abra, haz click en el botón About Ted Sellers para ir a la página About Ted. Prueba desplazando el texto arriba y abajo en el objeto de Párrafo. Muy bien, verdad? 3) Sal de la vista previa. Esto es todo por esta Lección. Resumen de la Lección 6 En esta lección aprendiste cómo: Añadir una imagen de Panel que sirva como un telón de fondo y bordeada con algo de texto Reemplazar el texto en un objeto de Párrafo al hacer shift-arrastrar un archivo de texto Añadir un objeto de Párrafo desplegable Utilizar un estilo personalizado de barra de desplazamiento 11