Share
En esta Introducción rápida a los componentes de Flash Professional, veremos ScrollPane y ColorPicker. Vamos a bucear en?
Echa un vistazo a la demostración. En él, en el lado izquierdo, verá dos componentes del Selector de color, dos Etiquetas etiquetadas como "Selector de color personalizado" y "Selector de color normal" y un rectángulo azul.
El selector de color personalizado utiliza colores tomados exclusivamente de una selección de nuestra elección. El selector de color normal tiene todos los colores de un selector de color normal y cuando un usuario elige un color, cambiamos el rectángulo al color que han elegido..
En el lado derecho del SWF hay un ScrollPane, en el que cargamos una imagen, y un botón que usamos para iniciar la carga de la imagen..
Abra un nuevo documento de Flash y establezca las siguientes propiedades:
Abra la ventana de componentes yendo a Menú> Ventana> Componentes o presione CTRL + F7
Arrastra dos ColorPickers, dos Etiquetas, un ScrollPane y un botón al escenario.
En el panel Propiedades, asigne a la primera etiqueta el nombre de la instancia. etiqueta personalizada.
Si el panel de Propiedades no se muestra, vaya a Menú> Ventana> Propiedades o presione CTRL + F3.
Establece la etiqueta X en 16 y su Y en 12.
Déle a la segunda etiqueta el nombre de instancia "normalLabel"; establece su X a 16 y su Y a 176.
Asigne al primer ColorPicker el nombre de instancia "customColorPicker"; establece su X a 16 y su Y a 41.
Dale al segundo ColorPicker el nombre de instancia "normalColorPicker"; establece su X a 16 y su Y a 206.
Déle al segundo ScrollPane el nombre de instancia "imageScrollPane"; establece su X a 277 y su Y a 29.
Déle al botón el nombre de instancia "loadImageButton"; establece su X a 354 y su Y a 332.
Usando la herramienta rectángulo dibuja un rectángulo en el escenario. Dibujé la mía con un color azul. Selecciona el rectángulo y ve a Menú> Modificar> Convertir a símbolo (o presione F8); establezca su nombre en "cuadrado" y asegúrese de que "Tipo" esté configurado en MovieClip.
A continuación, dale un nombre de instancia de cuadrado Como hicimos con los componentes anteriores. Establece su tamaño en 143x97px, establece su X en 90 y su Y en 47.
El ColorPicker es un pequeño gran componente que permite a los usuarios seleccionar un color. También puede definir qué colores desea que estén disponibles en el ColorPicker.
El componente ScrollPane muestra los archivos DisplayObjects, JPEG, GIF y PNG, así como los archivos SWF, en un área desplazable. Cuando el contenido que está cargando es demasiado grande para la película, este es un componente ideal para usar.
Cree un nuevo archivo ActionScript y asígnele 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"; El beneficio de hacer esto es que obtienes sugerencias de código para la instancia.
Ir 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".
A continuación, en Main.as, abriremos la declaración del paquete e importaremos las clases que usaremos.
Agregue lo siguiente a Main.as:
package // Extendemos MovieClip import flash.display.MovieClip; // Necesitamos importar los componentes que estamos usando import fl.controls.ColorPicker; importar fl.controls.Label; importar fl.containers.ScrollPane; importar fl.controls.Button; // Los eventos que necesitamos importan flash.events.MouseEvent; import flash.events.Event; // Se necesita cambiar el color de movieClip import flash.geom.ColorTransform; // Necesario cargar la imagen import flash.net.URLRequest;
Agregue la declaración de 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 Constructor Principal..
Agregue lo siguiente a Main.as
public class Main extiende MovieClip // Nuestros componentes en el escenario public var customLabel: Label; public var normalLabel: Label; public var customColorPicker: ColorPicker; public var normalColorPicker: ColorPicker; public var square: DisplayObject; public var imageScrollPane: ScrollPane; public var loadImageButton: Button; función pública Main () setupLabels (); setupColorPickers (); setupButton ();
Aquí definimos las funciones que se utilizan en nuestro constructor..
En el setupLabels En la función ponemos el texto en las etiquetas. En setupColorPickers Establecemos los colores para nuestro customColorpicker; estos colores son una variedad de colores que utilizan la sintaxis de Flash para colores hexadecimales. También agregamos un detector de eventos a nuestros selectores de color para que cuando un usuario elija un color, activemos la función relevante.
En el botón de configuración función, establecemos la propiedad Label del botón y agregamos un detector de eventos para cuando el usuario haga clic en el botón.
Agregue lo siguiente a Main.as:
función privada setupLabels (): void // Establece el texto de las etiquetas customLabel.text = "Selector de color personalizado"; normalLabel.text = "Selector de color normal" función privada setupColorPickers (): void // Aquí configuramos los colores para el selector de color customColorPicker.colors = [0x000FF, 0xFF0000,0x00FF00, 0xFFFF00,0xFF33FF]; // Cuando el usuario elige un color, llamamos a la función changeColor customColorPicker.addEventListener (Event.CHANGE, changeColor); normalColorPicker.addEventListener (Event.CHANGE, changeColor); función privada setupButton (): void // Establece la etiqueta de los botones (el texto en el botón) loadImageButton.label = "Load Image"; // Cuando el usuario hace clic en el botón, llamamos a la función loadImage loadImageButton.addEventListener (MouseEvent.CLICK, loadImage);
Aquí codificamos las funciones para los oyentes de eventos que agregamos arriba..
los cambiar color función utiliza un ColorTransform Objeto para que podamos cambiar el color del rectángulo en el escenario. Establecemos el color de ColorTransform al color que el usuario seleccionó usando e.target.selectedColor. El objetivo es el ColorPicker cuyo color se acaba de cambiar. Entonces, usamos el transformar propiedad de la cuadrado MovieClip y establece el colorTransform al color seleccionado.
Accentsconagua
función privada changeColor (e: Event): void // Es necesario configurar un objeto ColorTransform para cambiar el color de color de MovieClip: ColorTransform = new ColorTransform (); // establece el color colorTransform al color seleccionado por el usuario en colorPicker color.color = e.target.selectedColor; // Cambie el color del clip de película usando ColorTransform square.transform.colorTransform = color; función privada loadImage (e: Event): void // Carga la imagen en el scrollPane imageScrollPane.load (new URLRequest ("image.jpg")); // cerrar la clase // cerrar el paquete Te darás cuenta en el Parámetros de los componentes Panel (que se puede abrir desde el menú Ventana) que puede verificar y seleccionar ciertas propiedades.
La imagen de arriba es para el componente ColorPicker..
Las propiedades son las siguientes para el componente ColorPicker:
Las propiedades para el ScrollPane son
ScrollPolicy.ON, ScrollPolicy.OFF, ScrollPolicy.AUTO.ScrollPolicy.ON, ScrollPolicy.OFF, ScrollPolicy.AUTO. 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 las etiquetas y el botón, asegúrese de consultar la Sugerencia rápida en los componentes Botón y Etiqueta
