Share
En el Consejo rápido de esta semana sobre las herramientas de Flash Professional, analizaremos los componentes Tile y TileList.
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 dos etiquetas, una Lista y un componente TileList al escenario.
En el panel Propiedades, asigne a la primera etiqueta un nombre de instancia de "populationLabel".
(Si el panel de Propiedades no se muestra, vaya a Ventana> Propiedades o presione CTRL + F3).
Ajuste la X de la etiqueta a 31.00 y su Y a 26.00.
En el panel Propiedades, asigne a la segunda etiqueta el nombre de instancia "flagsLabel". Ajuste la X de la etiqueta a 31.00 y su Y a 238.
Luego, asigne a la Lista el nombre de instancia "lista de estados" y configure la X de la Lista en 31.00 y su Y en 62.00.
Finalmente, asigne a TileList el nombre de instancia "statesTileList" y configure la X de TileList en 31.00 y su Y en 269.00.
Cree un nuevo archivo ActionScript y asígnele un nombre Main.as. Estaremos declarando nuestros componentes en Main.as, por lo que debemos desactivar las "instancias de la 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. Haga clic en Ajustes cerca de Guión [Actionscript 3].
Desmarque "Declarar automáticamente instancias de la etapa".
En Main.as, abra la declaración del paquete e importe las clases que usaremos agregando el siguiente código:
paquete import flash.display.MovieClip; importar flash.display.Loader; importar fl.data.DataProvider; importar fl.controls.List; importar fl.controls.TileList; importar fl.controls.Label; import flash.events.Event; importar flash.text.TextFieldAutoSize; importar fl.controls.ScrollBarDirection; importar flash.net.URLRequest;
Agregaremos la definición de clase, haciendo que extienda MovieClip, y configuraremos nuestra función de constructor.
Agregue lo siguiente a Main.as:
public class Main extiende MovieClip // nuestro componente de lista public var statesList: List; // nuestro componente TileList public var statesTileList: TileList; // nuestras etiquetas public var populationLabel: Label; public var flagsLabel: Label; // Proveedores de datos para los componentes de la lista var listDp: DataProvider; var tileListDp: DataProvider; // Necesitaba cargar una imagen más grande de la bandera seleccionada var picLoader: Loader; función pública Main () setupListDataProvider (); setupTileListDataProvider (); setupLabels (); setupList (); setupTileList (); setupLoader ();
Aquí definiremos la setupListDataProvider (), setupTileListDataProvider (), setupLabels (), setupTileList (), y setupLoader () Funciones, como se mencionó anteriormente en el constructor..
En la biblioteca encontrará clips de película nombrados por "estado" MC; estos se utilizan como un icono para el componente Lista. Debe configurar el enlace para los clips de película para que se agreguen a la lista. Haga esto haciendo clic derecho en el clip de película y seleccionando "Propiedades". Aquí usamos el nombre del clip de película como el nombre de la clase:
La clase DataProvider nos brinda una manera fácil de configurar los datos para que sean utilizados por los componentes.
Agregue las siguientes funciones a Main.as:
función privada setupListDataProvider (): void // Este proveedor de datos suministrará nuestro componente List ListDp = new DataProvider (); // Aquí, el iconsSource es un clip de película vinculado a la biblioteca // la población actúa como una variable dinámica en nuestra lista listDp.addItem (iconSource: alabamaMC, label: "Alabama", population: "4661900"); listDp.addItem (iconSource: alaskaMC, etiqueta: "Alaska", población: "686293"); listDp.addItem (iconSource: arizonaMC, etiqueta: "Arizona", población: "6500180"); listDp.addItem (iconSource: arkansasMC, etiqueta: "Arkansas", población: "2855390"); listDp.addItem (iconSource: californiaMC, etiqueta: "California", población: "36756666"); listDp.addItem (iconSource: coloradoMC, label: "Colorado", population: "4939456"); listDp.addItem (iconSource: conneticutMC, label: "Conneticut", population: "3501252"); listDp.addItem (iconSource: delawareMC, label: "Delaware", population: "873092"); listDp.addItem (iconSource: floridaMC, etiqueta: "Florida", población: "18328340"); listDp.addItem (iconSource: georgiaMC, etiqueta: "Georgia", población: "9685744"); listDp.addItem (iconSource: hawaiiMC, etiqueta: "Hawaii", población: "1288198"); listDp.addItem (iconSource: idahoMC, etiqueta: "Idaho", población: "1523816"); listDp.addItem (iconSource: illinoisMC, etiqueta: "Illinois", población: "12901563"); listDp.addItem (iconSource: indianaMC, etiqueta: "Indiana", población: "6376792"); listDp.addItem (iconSource: iowaMC, etiqueta: "Iowa", población: "3002555"); private function setupTileListDataProvider (): void // Este proveedor de datos proporcionará nuestra lista de valores // La fuente es la imagen que desea mostrar // fullSize actúa como una variable dinámica para nuestra tileList tileListDp = new DataProvider (); tileListDp.addItem (source: "flags / alabama.gif", fullSize: "flagsLarge / alabama.jpg"); tileListDp.addItem (source: "flags / alaska.gif", fullSize: "flagsLarge / alaska.jpg"); tileListDp.addItem (source: "flags / arizona.gif", fullSize: "flagsLarge / arizona.jpg"); tileListDp.addItem (source: "flags / california.gif", fullSize: "flagsLarge / california.jpg"); tileListDp.addItem (source: "flags / colorado.gif", fullSize: "flagsLarge / colorado.jpg"); tileListDp.addItem (source: "flags / connecticut.gif", fullSize: "flagsLarge / connecticut.jpg"); tileListDp.addItem (source: "flags / delaware.gif", fullSize: "flagsLarge / delaware.jpg"); tileListDp.addItem (source: "flags / florida.gif", fullSize: "flagsLarge / florida.jpg"); tileListDp.addItem (source: "flags / georgia.gif", fullSize: "flagsLarge / georgia.jpg"); tileListDp.addItem (source: "flags / hawaii.gif", fullSize: "flagsLarge / hawaii.jpg"); tileListDp.addItem (source: "flags / idaho.gif", fullSize: "flagsLarge / idaho.jpg"); tileListDp.addItem (source: "flags / illinois.gif", fullSize: "flagsLarge / illinois.jpg"); tileListDp.addItem (source: "flags / indiana.gif", fullSize: "flagsLarge / indiana.jpg"); tileListDp.addItem (source: "flags / iowa.gif", fullSize: "flagsLarge / iowa.jpg"); función privada setupLabels (): void populationLabel.text = "Choose A State"; flagsLabel.text = "Haga clic en la bandera para obtener una imagen más grande"; // Necesario para que nuestras etiquetas se ajusten automáticamente para contener todo el texto populationLabel.autoSize = populationLabel.autoSize = TextFieldAutoSize.LEFT; flagsLabel.autoSize = flagsLabel.autoSize = TextFieldAutoSize.LEFT; función privada setupList (): void // El iconField establece lo que será el ícono // Aquí usa iconSource que definimos en nuestro proveedor de datos statesList.iconField = "iconSource"; statesList.width = 150; // establece el valor de las filas statesList.rowHeight = 30; // establece cuántas filas se muestran en la lista statesList.rowCount = 5; // Aquí configuramos el dataProvider de la Lista al que creamos anteriormente statesList.dataProvider = listDp; statesList.addEventListener (Event.CHANGE, getPopulation); función privada setupTileList (): void // establece la dirección de la barra de desplazamiento para la lista de mosaicos statesTileList.direction = ScrollBarDirection.HORIZONTAL; statesTileList.rowHeight = 60; // Cuántas columnas tendrá el TileList statesTileList.columnCount = 1; // Cuántas filas se mostrarán en la TileList statesTileList.rowCount = 1; statesTileList.width = 400; // Aquí establecemos el proveedor de datos de TileList al que creamos statesTileList.dataProvider = tileListDp; statesTileList.addEventListener (Event.CHANGE, loadPic); función privada setupLoader (): void // Este es el cargador que usamos para cargar las fotos más grandes de las banderas picLoader = new Loader (); picLoader.x = 228; picLoader.y = 117; addChild (picLoader);
Aquí codificaremos nuestros Oyentes de eventos para cuando se haga clic en un elemento de cualquiera de las listas.
Agregue lo siguiente a Main.as
función privada getPopulation (e: Event): void // Aquí obtenemos la población al tomar la etiqueta (estado) y la población // The selectedItem.label devuelve el elemento seleccionado actualmente en la lista populationLabel.text = "La población para "+ e.target.selectedItem.label +" es "+ e.target.selectedItem.population; función privada loadPic (e: Event): void // Aquí cargamos la imagen fullSize obteniendo los elementos seleccionados actualmente FullSize var picLoader.load (new URLRequest (e.target.selectedItem.fullSize)); // Cerrar la clase // Cerrar el paquete
El uso de los componentes List y TileList es una excelente manera de mostrar listas de datos e imágenes.
Notará en el panel Parámetros de componentes de los componentes que puede verificar y seleccionar ciertas propiedades.
La imagen de arriba es para el componente de lista, cuyas propiedades son las siguientes:
Accentsconagua
"allowMultipleSelection: un valor booleano que indica si se puede seleccionar más de un elemento de la lista a la vez"proveedor de datos: el modelo de datos de la lista de elementos a visualizar"habilitado: un valor booleano que indica si el componente puede aceptar la entrada del usuario"horizontalLineScrollSize: un valor que describe la cantidad de contenido que se debe desplazar horizontalmente cuando se hace clic en una flecha de desplazamiento"horizontalPageScrollSize: el número de píxeles por los que se mueve el control de desplazamiento en la barra de desplazamiento horizontal cuando se presiona la barra de desplazamiento."horizontalScrollPolicy: valor que indica el estado de la barra de desplazamiento horizontal"horizontalLineScrollSize: un valor que describe la cantidad de contenido que se debe desplazar horizontalmente cuando se hace clic en una flecha de desplazamiento"horizontalPageScrollSize: el recuento de píxeles por los que se mueve el control de desplazamiento en la barra de desplazamiento horizontal cuando se presiona la barra de desplazamiento."verticalScrollPolicy: un valor que indica el estado de la barra de desplazamiento vertical"visible: un valor booleano que indica si la instancia del componente es visibleLas propiedades de TileList son las siguientes:
allowMultipleSelection: un valor booleano que indica si se puede seleccionar más de un elemento de la lista a la vezcolumnCount: el número de columnas que son al menos parcialmente visibles en la listaancho de columna: "el ancho que se aplica a una columna en la lista, en píxeles.proveedor de datos: el modelo de datos de la lista de elementos a visualizardirección: un valor que indica si el componente TileList se desplaza horizontal o verticalmente.habilitado: un valor booleano que indica si el componente puede aceptar la entrada del usuariohorizontalLineScrollSize: un valor que describe la cantidad de contenido que se debe desplazar horizontalmente cuando se hace clic en una flecha de desplazamientohorizontalPageScrollSize: el número de píxeles por los que se mueve el control de desplazamiento en la barra de desplazamiento horizontal cuando se presiona la barra de desplazamiento.número de filas: el número de filas que son al menos parcialmente visibles en la lista.altura de la fila: la altura que se aplica a cada fila en la lista, en píxeles.scrollPolicy: "la política de desplazamiento para el componente TileList.verticalLineScrollSize: un valor que describe cuántos píxeles se desplazan verticalmente cuando se hace clic en una flecha de desplazamiento.verticalPageScrollSize: el número de píxeles por los que se mueve el control de desplazamiento en la barra de desplazamiento vertical cuando se presiona la barra de desplazamiento ... visible: un valor booleano que indica si la instancia del componente es visibleLos archivos de ayuda son un gran lugar para aprender más sobre estas propiedades.
Para ver las propiedades de las etiquetas, asegúrese de consultar la Sugerencia rápida en los componentes Botón y Etiqueta.
Gracias a http://www.state-flags-usa.com por permitirme usar sus imágenes de bandera.
Gracias por leer y seguir viendo los próximos tutoriales de componentes.!
