Share
En esta Introducción rápida a los componentes de Flash Professional, veremos UILoader y UIScrollbar.
Echa un vistazo a la vista previa. En el SWF, en el lado izquierdo hay un componente UILoader que es invisible a primera vista (porque no hay nada en él); estaremos cargando una imagen en este.
Debajo del UILoader hay una etiqueta con el texto "Imagen no cargada"; Al cargar con éxito la imagen, cambiaremos el texto de esta etiqueta para que lea "Imagen cargada".
El botón debajo de la etiqueta se utiliza para iniciar la carga de la imagen. En el lado derecho hay un campo de texto y UIScrollbar que inicialmente son invisibles (el campo de texto es invisible porque no hay nada en él); Al presionar el botón con la etiqueta "Cargar texto", cargamos el texto de un archivo de texto de muestra y configuramos la barra UIScroll para que sea visible..
Abra un nuevo documento de Flash y establezca las siguientes propiedades:
Abra la ventana de componentes yendo a Menú> Ventana> Componentes o presionando CTRL + F7.
Arrastre un UILoader, una etiqueta, dos botones y una barra de desplazamiento UIS al escenario.
En el panel Propiedades, asigne a UILoader el nombre de instancia "imageLoader". Si el panel de Propiedades no se muestra, vaya a Menú> Ventana> Propiedades o presione CTRL + F3.
Establezca la posición X de UILoader en 37 y su Y en 20
Asigne a la etiqueta el nombre de instancia "loadedLabel". Establece la etiqueta X en 37 y su Y en 182.
Dé al primer botón el nombre de instancia "loadImageButton" y establezca la X de la etiqueta en 37, su Y en 213.
En el panel Herramientas, seleccione la herramienta Texto y arrastre un Campo de texto en el escenario. Si el panel de Herramientas no se muestra, vaya a Menú> Ventana> Herramientas o presiona CTRL + F2.
Asigne a TextField el nombre de instancia "loremText". Establezca la X del campo de texto en 272 y su Y en 15, luego establezca su ancho en 243, su altura en 101.
Asigne a UIScrollbar el nombre de instancia "textScroller". Establezca la X de UIScrollbar en 525.00 y su Y en 15
Asigne al segundo botón el nombre de instancia "loadTextButton" y establezca su X en 272, su Y en 213.
El componente UILoader es un contenedor que puede mostrar archivos SWF, JPEG, JPEG progresivo, PNG y GIF. Puede cargar estos activos en tiempo de ejecución y, opcionalmente, controlar el progreso de la carga. Para ver cómo se puede hacer esto, consulte mi tutorial sobre el componente ProgressBar (los conceptos son los mismos) y aplique al UILoader como lo hice con el cargador en ese tutorial.
La barra UIScroll le permite agregar una barra de desplazamiento a un campo de texto. Cuando tienes un bloque de texto largo, el componente UIScrollbar te permite desplazarte sin tener un TextField muy grande para acomodar todo tu texto. Este componente es muy fácil de usar, ya que solo puede colocarlo en un TextField y automáticamente se "conecta" a ese TextField. Aquí te mostraré cómo hacerlo en ActionScript..
Crea un nuevo archivo ActionScript y dale el nombre Main.as.
Estaremos declarando nuestros componentes en Main.as, por lo que debemos desactivar las "instancias de etapa de declaración automática"; La ventaja de hacer esto es que obtiene sugerencias de código para la instancia al usar el editor de código de Flash. Para hacer esto ve a Menú> Archivo> Configuración de publicación y haga clic en Configuración, junto a Guión [Actionscript 3.0].
Desmarque "Declarar automáticamente instancias de la etapa".
En Main.as, abra la declaración del paquete e importe las clases que usaremos. Agregue lo siguiente a Main.as:
package // Extenderemos la clase de MovieClip import flash.display.MovieClip; // Importe los componentes que usaremos import fl.containers.UILoader; importar fl.controls.Button; importar fl.controls.Label; importar fl.controls.UIScrollbar; // Necesario para nuestros controladores de eventos import flash.events.MouseEvent; import flash.events.Event; // Necesario para cargar imágenes e texto import flash.net.URLLoader; importar flash.net.URLRequest; importar flash.text.TextField;
Agregue la clase, haga que extienda el Clip de película y configure nuestra función de constructor.
Aquí declaramos nuestras variables y llamamos a nuestras funciones en el Principal() constructor. Agregue lo siguiente a Main.as:
public class Main extiende MovieClip // Nuestros componentes en el escenario public var loadImageButton: Button; public var loadTextButton: Button; public var loadedLabel: Label; public var loremText: TextField; public var imageLoader: UILoader; public var textScroller: UIScrollbar; // Se utiliza para cargar el texto en TextField public var textLoader: URLLoader; función pública Main () setupButtonsAndLabels (); setupTextField (); setupScrollBar ();
Aquí definiremos las funciones que se utilizan en nuestro constructor. En el setupButtonAndLabels () función ponemos nuestro botón de etiqueta propiedad y agregar detectores de eventos que se activarán cuando el usuario haga clic en el botón.
En el setupTextField () función que configuramos el campo de texto ajuste de línea propiedad a cierto por lo que el texto se ajustará a la siguiente línea cuando llegue al borde derecho del campo de texto.
En setupScrollBar () configuramos la dirección de UIScrollbar a "vertical" (esto puede ser "vertical" u "horizontal") y, dado que no queremos que esté visible cuando la película comienza por primera vez, establecemos su visible propiedad a falso.
Agregue lo siguiente a Main.as:
función privada setupButtonsAndLabels (): void // Establece los botones Etiqueta (Texto que se muestra en el botón) loadImageButton.label = "Load Image"; loadImageButton.addEventListener (MouseEvent.CLICK, loadImage); // Establece la etiqueta de los botones (Texto mostrado en el botón) loadTextButton.label = "Load Text"; loadTextButton.addEventListener (MouseEvent.CLICK, loadText); // Establece el texto de etiquetas loadedLabel.text = "Imagen no cargada"; función privada setupTextField (): void // Las líneas se ajustarán cuando lleguen al final (lado derecho) del campo de texto loremText.wordWrap = true; función privada setupScrollBar (): void // Establece nuestra dirección scrollBars; puede ser "vertical" o "horizontal" textScroller.direction = "vertical"; textScroller.visible = false;
Aquí codificaremos los escuchas de eventos que agregamos a los botones y luego cerraremos la clase y el paquete.
En el cargar imagen() función ponemos la contenido de escala del imageLoader a falso (Si fuera cierto La imagen se reduciría al tamaño de la imagen. UILoader), ya que queremos que la imagen tenga su tamaño normal. Luego cargamos la imagen y agregamos un detector de eventos para que se active cuando la imagen haya terminado de cargarse..
En el loadText () función que configuramos nuestra URLLoader y cargar el archivo de texto. Aquí también configuramos un oyente para que se active cuando el texto haya terminado de cargarse..
En el imageLoaded () En la función, establecemos el texto de la etiqueta en "Imagen cargada", un ejemplo sencillo, pero se podría hacer algo menos trivial en una aplicación "real"..
En el textLoaded () función establecemos el texto del campo de texto a la del evento (e.target.data), que será el texto del archivo de texto. Luego fijamos el UIScrollbar ser visible y configurar su scrollTarget (el campo de texto que deseamos que controle).
Accentsconagua
función privada loadImage (e: MouseEvent): void // Si se configuró como verdadero, la imagen se reducirá al tamaño del UILoader // Aquí configuramos el valor falso para que el UILoader respete el tamaño de imagen real imageLoader.scaleContent = false; // Carga la imagen y dispara una función cuando se completa la carga imageLoader.load (nuevo URLRequest ("theimage.jpg")); imageLoader.addEventListener (Event.COMPLETE, imageLoaded); función privada loadText (e: MouseEvent): void // Carga nuestro archivo de texto y activa una función cuando se completa la carga textLoader = new URLLoader (); textLoader.load (new URLRequest ("lorem.txt")); textLoader.addEventListener (Event.COMPLETE, textLoaded); función privada imageLoaded (e: Event): void // Establece el texto en la etiqueta loadedLabel.text = "Image Loaded"; función privada textLoaded (e: Event): void // Establece TextField en los datos de los cargadores (el texto en el archivo de texto) loremText.text = e.target.data; textScroller.visible = true; textScroller.scrollTarget = loremText; // cerrar la clase cerrar el paquete Tenga en cuenta que al final cerramos la clase y el paquete..
Te darás cuenta en el Componentes Parámetros Panel de los componentes que puede verificar y seleccionar ciertas propiedades..
La imagen de arriba es para el componente UILoader..
Las propiedades del componente UILoader son las siguientes:
Las propiedades para el UIScrollbar son
Los archivos de ayuda son un gran lugar para aprender más sobre estas propiedades.
Para obtener más información sobre las propiedades de Etiquetas y botones, asegúrese de consultar la Introducción rápida a los componentes Botón y Etiqueta.
Gracias por leer!
