Share
En este tutorial, explicaré cómo acceder y usar la Lista de visualización al crear una galería de imágenes basada en XML con ActionScript 3.0.
Usando XML, cargaremos dinámicamente y obtendremos información sobre las imágenes, les daremos una posición central aleatoria, agregaremos un marco, agregaremos la funcionalidad de arrastre y, por último, usaremos una interpolación para manejar la animación de zoom..
Abra Flash y cree un nuevo archivo Flash (ActionScript 3).
Establezca el tamaño del escenario en 600x350 y agregue un degradado radial gris (#EEEEEE, #DDDDDD).
Vamos a agregar una animación de precarga para decirle al usuario cuando el contenido se está cargando. En este caso, utilicé el preloader inspirado en Apple que creamos anteriormente. Ya que vamos a usar solo la animación, no hay necesidad de importar la clase o usar un Identificador de exportación.
Coloque el preloader en el escenario y céntrelo.
Vamos a incrustar una fuente, una tarea muy fácil al agregar un TextField al escenario en el IDE de Flash, pero un poco diferente al usar ActionScript.
Abra el panel de la biblioteca y haga clic con el botón derecho en el área de elementos sin seleccionar uno, aparecerá un menú contextual.
Haga clic en "Nueva fuente" para abrir una ventana de diálogo, asigne un nombre a su fuente y seleccione el que desea usar como se muestra en la siguiente imagen.
Esto creará una clase de la fuente que seleccionó, lo instanciaremos en el Paso 9.
Vamos a crear el archivo XML.
Abra su editor de texto o XML preferido y escriba:
Cuando haya terminado, guárdelo como "images.xml" en su carpeta xml.
El código que usaremos se escribirá en una sola clase que se usará como Clase de documento en el archivo FLA.
Crear un nuevo archivo de ActionScript (Archivo> Nuevo)
Guardar como "Main.as".
Comenzaremos con:
paquete de clases
los paquete la palabra clave le permite organizar su código en grupos que pueden ser importados por otros scripts, se recomienda nombrarlos comenzando con una letra minúscula y usar intercaps para las palabras subsiguientes, por ejemplo: galeríaClases.
Si no desea agrupar sus archivos en un paquete o solo tiene una clase, puede usarlos directamente desde su carpeta de origen, pero la idea es organizarlos..
importar flash.display.Sprite; importar flash.display.MovieClip; importar flash.net.URLLoader; importar flash.net.URLRequest; importar flash.display.Loader; import flash.events.Event; importar flash.filters.BitmapFilter; importar flash.filters.DropShadowFilter; importar flash.text.TextFormat; importar flash.text.TextField; import flash.text.AntiAliasType; import flash.events.MouseEvent; importar fl.transitions.Tween; importación fl.transitions.easing.Strong; importar fl.transitions.TweenEvent;
Estas son las clases que necesitaremos para hacer esta galería. Si necesita ayuda con una clase específica, utilice la Ayuda de Flash (F1).
La clase pública Main extiende MovieClip
los se extiende palabra clave define una clase que es una subclase de otra clase. La subclase hereda todos los métodos, propiedades y funciones, de esa manera podemos usarlos en nuestra clase.
Vamos a utilizar métodos y propiedades específicos de MovieClip, por lo que ampliamos el uso de la clase MovieClip..
var xml: XML; // El objeto XML que analizará las imágenes var del archivo XML: Array = new Array (); // Esta matriz almacenará las imágenes cargadas var imagesLoaded: int = 0; // Un contador, cuenta las imágenes cargadas var imagesTitle: Array = new Array (); // Las propiedades del título del archivo XML var tween: Tween; // Maneja la animación var zoomed: Boolean = false; // Comprueba si una imagen está ampliada, falso por defecto var canClick: Boolean = true; // Comprueba si el usuario puede hacer clic en una imagen para ampliarla, true de forma predeterminada var lastX: int; // Almacena la propiedad x de la última imagen en la que se hizo clic var lastY: int; // Almacena la propiedad y de la última imagen en la que se hizo clic var textformat: TextFormat = new TextFormat (); // Una pantalla var del objeto TextFormat: Sprite = new Sprite (); // Una pantalla negra para enfocar la imagen activa var formatFont: Avenir = new Avenir (); // Esta es la fuente incrustada
El constructor es una función que se ejecuta cuando un objeto se crea a partir de una clase. Este código es el primero en ejecutarse cuando crea una instancia de un objeto o cuando usa la Clase de documento.
En esta función, estableceremos las propiedades del objeto TextFormat que usaremos para mostrar un título o una descripción de cada imagen. Cree la pantalla negra que aparece cuando el usuario hace clic en una imagen y llame a la función que carga el archivo XML deseado.
Accentsconagua
función pública Main (): void textformat.color = 0xFFFFFF; textformat.font = formatFont.fontName; textformat.size = 17; // Use el mismo tamaño que usó cuando incrustó la fuente de la Biblioteca screen.graphics.beginFill (0x111111, .75); screen.graphics.drawRect (0, 0, stage.stageWidth, stage.stageHeight); screen.graphics.endFill (); loadXML ("xml / images.xml"); Esta función carga el archivo XML proporcionado por el parámetro "archivo". También agregamos un escucha para manejar cuando la carga está completa.
función privada loadXML (file: String): void var urlLoader: URLLoader = new URLLoader (); var urlReq: URLRequest = new URLRequest (archivo); urlLoader.load (urlReq); urlLoader.addEventListener (Event.COMPLETE, handleXML);
Aquí convertimos el archivo XML cargado en un objeto XML válido utilizando el parámetro "datos" del URLLoader. Luego usamos una declaración "for" para crear un cargador para cada imagen en el XML. Información adicional se encuentra en el comentario..
función privada handleXML (e: Event): void xml = new XML (e.target.data); para (var i: int = 0; i < xml.children().length(); i++) var loader:Loader = new Loader(); loader.load(new URLRequest(String(xml.children()[i].@src))); images.push(loader); //Adds the Loaders to the images Array to gain access to them outside this function imagesTitle.push(xml.children()[i].@title); //Adds the title attribute content to the array to use it outside this function loader.contentLoaderInfo.addEventListener(Event.COMPLETE, loaded); //A listener to the function that will be executed when an image is loaded
Cuando un cargador ha cargado una imagen desde el XML, se ejecuta el siguiente código:
función privada cargada (e: Evento): void imagesLoaded ++; // Agrega uno a la variable imagesLoaded if (xml.children (). Length () == imagesLoaded) // Cuando todas las imágenes están cargadas ... removeChild (preloader); // Elimina Preloader MovieClip prepareImages (); // Esta función se explica en el siguiente paso
Esta función agregará el marco, el campo de texto para mostrar el título o la descripción, el fondo negro utilizado para eso y un filtro de sombra. Vamos a tomarlo en partes..
función privada prepareImages (): void for (var i: int = 0; i < images.length; i++) //These actions will be applied to all the images loaded so we use a "for" and the "images" array to do that var container:Sprite = new Sprite(); //A container that will store the image, frame, TextField, TextField background and shadow var frame:Sprite = new Sprite(); //The Frame Sprite var infoArea:Sprite = new Sprite(); //The TextField background var infoField:TextField = new TextField(); //The TextField
Esto crea un marco blanco alrededor de la imagen..
frame.graphics.beginFill (0xFFFFFF); frame.graphics.drawRect (-20, -20, imágenes [i] .width + 40, imágenes [i] .height + 80); frame.graphics.endFill ();
El rectángulo se colocará debajo de la imagen que se utilizará como marco..
Esto crea un rectángulo negro en la parte inferior de la imagen, donde se mostrará el campo de texto..
infoArea.graphics.beginFill (0x111111, 0.75); infoArea.graphics.drawRect (0, 0, imágenes [i] .width, 60); infoArea.graphics.endFill (); infoArea.y = imágenes [i] .height - 60;
El siguiente código establece las propiedades de TextField y agrega su contenido..
infoField.defaultTextFormat = textformat; infoField.embedFonts = true; // Debe agregar esto para usar la fuente incrustada infoField.antiAliasType = AntiAliasType.ADVANCED; // Esta propiedad mostrará el texto más claramente infoField.width = images [i] .width - 5; infoField.height = 20; infoField.text = imagesTitle [i]; // El contenido, obtenido del XML y almacenado en el Array.
Aquí ponemos la escala deseada de las imágenes. Ya que todo estará dentro del Container Sprite, solo tenemos que redimensionarlo.
container.scaleX = 0.3; container.scaleY = 0.3;
Las imágenes tendrán una posición aleatoria basada en el centro del área del escenario. Usamos matemáticas para eso.
container.x = stage.stageWidth / 4 + Math.floor (Math.random () * (stage.stageWidth / 4)); container.y = stage.stageHeight / 5 + Math.floor (Math.random () * (stage.stageHeight / 5));
Esto creará un filtro de sombra.
var shadowFilter: BitmapFilter = nuevo DropShadowFilter (3, 90, 0x252525, 1, 2, 2, 1, 15); // Distancia, ángulo, color, alfa, desenfoque, fuerza, calidad var filterArray: Array = [shadowFilter]; container.filters = filterArray; // Aplicar el filtro
Es hora de agregar a los niños, el orden en que los agregamos es el orden que tomarán en la Lista de visualización, así que asegúrese de agregarlos de esta manera.
infoArea.addChild (infoField); // Agrega TextField al contenedor TextField Background container.addChild (marco); // Agrega el marco al contenedor container.addChild (images [i]); // Agrega la imagen en la parte superior del marco en el contenedor infoArea.visible = false; // Establecemos la información de la imagen como invisible por defecto container.addChild (infoArea); // Agrega el área de información encima de todo.
Aunque podríamos agregar los Listeners a cada Sprite antes, los voy a agregar ahora que están dentro del Contenedor para mostrarle cómo funciona la Lista de visualización.
container.getChildAt (1) .addEventListener (MouseEvent.MOUSE_UP, zoomHandler); // Esta es la imagen cargada por el XML, este es el objeto Loader container.getChildAt (0) .addEventListener (MouseEvent.MOUSE_DOWN, dragImage); // Este es el contenedor Frame.getChildAt (0) .addEventListener (MouseEvent.MOUSE_UP, stopDragImage); // Frame addChild (contenedor); // Por último, agregamos el contenedor al escenario.
En el paso anterior agregamos dos escuchas al Marco de las imágenes. Estas funciones se encargarán del arrastre..
Usamos "padre" porque queremos arrastrar todos los objetos, ya que "objetivo" es Frame Sprite, el objeto padre es el Contenedor.
función privada dragImage (e: MouseEvent): void e.target.parent.startDrag (); función privada stopDragImage (e: MouseEvent): void e.target.parent.stopDrag ();
Esta función se encarga de acercar y alejar. Su Oyente está en la imagen real, por lo que hacer clic en el Marco no llamará a esta función.
Nota del editor: Por alguna razón, la de lo contrario si () La declaración dentro de esta función zoomHandler estaba haciendo que nuestro resaltador de sintaxis fallara. Como no se quiere mostrar en la página, he hecho que la función esté disponible para descargar. Lo siento por cualquier inconveniente, Ian.
Algunas acciones deben ejecutarse cuando los preadolescentes hayan terminado, estas son esas acciones.
función privada zoomInFinished (e: TweenEvent): void zoomed = true; // Modificar las variables de acuerdo con el evento canClick = true; tween.obj.getChildAt (2) .visible = true; // Establece el área de información en visible función privada zoomOutFinished (e: TweenEvent): void zoomed = false; removeChild (pantalla); // Elimina la pantalla negra tween.obj.getChildAt (0) .addEventListener (MouseEvent.MOUSE_DOWN, dragImage); // Agrega el detector de arrastre de nuevo al Frame Sprite
Vuelve a la FLA y agrega Principal como la Clase de Documento en el Panel de Propiedades. Si guarda su clase en un paquete, también tiene que agregar el nombre del paquete, algo como: tu paquete. principal
Prueba tu archivo y ve cómo funciona tu galería.!
Como siempre, intente diferentes cosas en su código para hacer la galería como desee.
Espero que hayan disfrutado este tut, gracias por leer.!
