Share
En este tutorial, aprenderá cómo hacer un simple Image Rotator desde cero utilizando Flash, XML y ActionScript 3.0.
Este rotador de imágenes se crea casi por completo solo por código.
Durante los primeros pasos, configuraremos las propiedades del archivo Fla e incrustaremos algunas fuentes para que la información de la imagen se vea mejor. También agregamos un precargador para indicar la transición automática de las imágenes..
Abra Flash y cree un nuevo archivo Flash (ActionScript 3.0).
Establezca el tamaño del escenario en 600 x 300 px y la velocidad del cuadro a 24 fps.
Para dar un mejor vistazo a nuestra aplicación, haremos uso de fuentes incrustadas..
Abra el Panel de la biblioteca (Cmd + L) y haga clic con el botón derecho en el área de elementos para abrir un menú contextual.
Seleccionar Nueva fuente y elige la fuente que más te guste. Recuerde seleccionar el tamaño real que va a utilizar en la película..
Utilicé Helvetica Bold para el título de la imagen y FFF Harmony para la descripción..
Se utilizará un clip de película precargador como una indicación del progreso, esto le indicará al usuario que las imágenes se están reproduciendo automáticamente..
En este ejemplo, utilicé el Preloader inspirado en Apple que creamos anteriormente aquí en ActiveTuts +. Solo usaremos la animación, así que no hay necesidad de copiar el código. Nuestro código pasará a la siguiente imagen cada vez que la animación del precargador se desplace.
No sería un Image Rotator sin imágenes, así que elíjalos de su colección personal o descargue algunos para probarlos..
Estas son las imágenes de la demostración, obtenidas de Flickr, todas con una licencia de Creative Commons..
Hierba 01 por 100kr
Impacto profundo en el color del planeta por spettacolopuro.
Yosemite: colores de otoño por tibchris.
Las imágenes se han redimensionado a 600x300 px para adaptarse al tamaño de la película.
La aplicación cargará un archivo XML; Este archivo contendrá toda la información sobre las imágenes, como el título, la URL de la imagen y la descripción..
Abre tu editor favorito y escribe:
Cree un nuevo documento ActionScript y guárdelo como ImageRotator.as.
Estas son las clases requeridas. Para obtener una descripción más detallada de cada clase, consulte la Ayuda de Flash (presione F1 dentro de Flash).
paquete import fl.transitions.Tween; importación fl.transitions.easing.Strong; importar fl.transitions.TweenEvent; importar flash.display.Sprite; importar flash.net.URLLoader; importar flash.net.URLRequest; importar flash.display.Loader; importar flash.text.TextField; importar flash.text.TextFormat; importar flash.text.TextFieldAutoSize; import flash.text.AntiAliasType; import flash.utils.Timer; import flash.events.TimerEvent; import flash.events.Event; import flash.events.MouseEvent;
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.
Haremos que nuestra clase de documentos extienda Sprite, ya que no necesita una línea de tiempo.
clase pública ImageRotator extiende Sprite
Estas son las variables que usaremos; Cada uno se explica en los comentarios..
var privado xml: XML; // Almacena la información del archivo xml private var urlLoader: URLLoader; // Carga la url del archivo xml private var imagesVector: Vector.= nuevo vector. (); // Almacena las imágenes cargadas en el objeto Loader private var imagesCounter: int = 0; var varilla privada: Tween; private var lastTarget: *; // Obtiene la última imagen en la que se hizo clic, en modo de transición manual private var tweening = false; privado var infoCounter: int = 0; // Cambia la información xml para mostrar var privado. InfoPanel: Sprite = new Sprite (); private var titleField: TextField = new TextField (); descripción de var privado: TextField = new TextField (); private var titleFormat: TextFormat = new TextFormat (); private var descriptionTF: TextFormat = new TextFormat (); temporizador var privado: temporizador; prearader var privado: Preloader = new Preloader (); // El precargador en la biblioteca private var added: Boolean; // Comprueba si el precargador está en la etapa privada var titleFont: Helvetica = new Helvetica (); // Crear instancias de fuentes privadas var bitmapFont: Harmony = new Harmony ();
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 se ejecuta utilizando la Clase de documento. En este caso, será el primer código ejecutado cuando se inicie nuestro SWF..
Los parámetros iniciales tienen valores por defecto; Esto nos permitirá usar la clase como clase de documento. y como una instancia.
Los parámetros son la URL del archivo XML y la hora en que el objeto del temporizador esperará para hacer una transición entre las imágenes; este número tiene que ser mayor que la duración de la transición de Tween (un segundo por defecto).
función pública ImageRotator (xmlPath: String = "images.xml", intervalo: int = 2000): void
Este código va dentro del constructor. Inicia el temporizador, establece el formato de texto predeterminado para los campos de texto y llama a la función loadXML..
temporizador = nuevo temporizador (intervalo); titleFormat.bold = true; titleFormat.font = titleFont.fontName; titleFormat.color = 0xFFFFFF; titleFormat.size = 14; descriptionTF.font = bitmapFont.fontName; descriptionTF.color = 0xEEEEEE; descriptionTF.size = 8; titleField.defaultTextFormat = titleFormat; titleField.autoSize = TextFieldAutoSize.LEFT; titleField.embedFonts = true; titleField.antiAliasType = AntiAliasType.ADVANCED; description.defaultTextFormat = descriptionTF; description.autoSize = TextFieldAutoSize.LEFT; description.embedFonts = true; loadXML (xmlPath);
Esta función utiliza el objeto URLLoader para cargar el archivo XML especificado en el parámetro del constructor. La función parseXML (en el siguiente paso) está configurada para ejecutarse cuando se completa la carga.
función privada loadXML (file: String): void urlLoader = new URLLoader (new URLRequest (file)); urlLoader.addEventListener (Event.COMPLETE, parseXML);
Los datos xml se asignan al objeto xml y se llama una función para cargar las imágenes..
función privada parseXML (e: Evento): void xml = new XML (e.target.data); cargar imágenes();
Se utiliza una declaración for para obtener el número de imágenes en el xml, cargar las imágenes con un objeto Loader y almacenar este Loader en un objeto Vector, que se definió anteriormente. Cuando se completa la carga de una imagen, se ejecuta la función sortImages.
función privada loadImages (): void for (var i: int = 0; i < xml.children().length(); i++) var loader:Loader = new Loader(); loader.load(new URLRequest(xml.children()[i].@src)); imagesVector.push(loader); loader.contentLoaderInfo.addEventListener(Event.COMPLETE, sortImages);
Esta función agrega las imágenes al escenario y las ordena; cuando se cargan todas las imágenes, llama a las funciones que crean el panel de información y los escuchas del mouse.
Función privada sortImages (e: Event): void imagesCounter ++; para (var i: int = imagesVector.length - 1; i> = 0; i--) // retroceder… addChild (imagesVector [i]); // ... para que las imágenes al inicio del XML terminen en la parte delantera if (imagesCounter == imagesVector.length) // Si todas las imágenes están cargadas createInfoPanel (); timer.addEventListener (TimerEvent.TIMER, autoChange); timer.start (); addPreloader (); addActions ();
Usamos un para Enunciado para configurar los oyentes del mouse para cada imagen. Esta es una forma muy simple de control; cuando el usuario haga clic en una imagen, se llamará a la función del controlador changeImage.
función privada addActions (): void for (var i: int = 0; i < imagesVector.length; i++)//Gets the number of images //Sets the listener, changeImage function will be executed when an image is clicked imagesVector[i].addEventListener(MouseEvent.MOUSE_UP, changeImage);
Este código se ejecutará cuando el usuario haga clic en una imagen. Lee los comentarios en el código para más detalles..
función privada changeImage (e: MouseEvent): void timer.stop (); // Detener el temporizador si (agregado) // Verificar si el precargador está en la etapa, si es verdadero, lo elimina, si ya se eliminó, no ocurre nada removeChild (preloader); añadido = falso; if (! tweening) // Si una transición no está en progreso lastTarget = e.target; // Obtener la imagen seleccionada: tween = new Tween (e.target, "alpha", Strong.easeOut, 1,0,1, true); // Iniciar una transición tween.addEventListener (TweenEvent.MOTION_FINISH, changeDepth); // La imagen cambiará su profundidad cuando se realice la transición de interpolación = verdadero; // Indica que hay una transición en curso infoCounter ++; // Cambia el hijo que se cargará desde el xml si (infoCounter> = xml.children (). Length ()) // Si el infoCounter es mayor que el número total de imágenes infoCounter = 0; // Restablecer titleField.text = xml.children () [infoCounter]. @ título; // Aplicar cambios a los campos de texto description.text = xml.children () [infoCounter]. @ descripción; else titleField.text = xml.children () [infoCounter]. @ título; // Aplicar cambios a los campos de texto description.text = xml.children () [infoCounter]. @ descripción;
La transición entre las imágenes se basa en la interpolación alfa, por lo que verá la siguiente imagen cuando la transición haya finalizado. Sin embargo, si hace clic en él, hará clic en la misma imagen que antes, aunque no está visible. Esto arreglará eso.
función privada changeDepth (e: TweenEvent): void // Cuando el valor alfa es 0 setChildIndex (lastTarget, 0); // mueve la imagen para que esté detrás de los demás lastTarget.alpha = 1; // Restaura su interpolación de visibilidad = falso; // Marque la interpolación como completa
Esto creará un panel semitransparente, con texto generado a partir de las etiquetas Título y Descripción del XML.
función privada createInfoPanel (): void // Dibuje un rectángulo negro con un 50% de información alfa infoPanel.graphics.beginFill (0x000000, 0.5); infoPanel.graphics.drawRect (0, 0, 600, 50); infoPanel.graphics.endFill (); // Coloque y establezca el valor del campo de título titleField.text = xml.children () [infoCounter]. @ título; titleField.x = 5; titleField.y = 5; // Coloque y establezca el valor del campo de descripción description.text = xml.children () [infoCounter]. @ descripción; description.x = 7; description.y = 22; infoPanel.y = 250; // Coloque este panel en la parte inferior // Agregue los hijos infoPanel.addChild (titleField); infoPanel.addChild (descripción); addChild (infoPanel);
Este código maneja la transición automática; es activado por el evento TIMER del objeto Timer.
función privada autoChange (e: TimerEvent): void infoCounter ++; // Cambia el elemento secundario que se cargará del xml lastTarget = imagesVector [xml 1 = "-" 2 = "infoCounter" language = ". Children (). Length ()"] [/ xml]; // Obtiene la última imagen que fue interpolada tween = new Tween (imagesVector [xml 1 = "-" 2 = "infoCounter" language = ". Children (). Length ()"] [/ xml], "alpha", Strong .easeOut, 1,0,1, verdadero); // Crea una interpolación alfa / * Las mismas acciones de la transición manual, cambiar información, etc. * / tween.addEventListener (TweenEvent.MOTION_FINISH, changeDepth); interpolación = verdadero; if (infoCounter> = xml.children (). length ()) infoCounter = 0; titleField.text = xml.children () [infoCounter]. @ título; description.text = xml.children () [infoCounter]. @ descripción; else titleField.text = xml.children () [infoCounter]. @ título; description.text = xml.children () [infoCounter]. @ descripción;
Este trozo de script agrega y coloca el preloader..
función privada addPreloader (): void added = true; preloader.scaleX = 0.08; preloader.scaleY = 0.08; preloader.x = (600 - preloader.width / 2) - 12; preloader.y = (300 - preloader.height / 2) - 12; addChild (precargador);
Esto completa el ImageRotator clase.
Hay dos formas de usar esta clase. Puedes usarlo en tu código como una instancia o Como la clase de documento con los parámetros predeterminados que establecimos anteriormente.
Si elige crear una instancia de esta clase y usarla en su código, este es un ejemplo de cómo usarla:
Accentsconagua
importar ImageRotator; var ir: ImageRotator = new ImageRotator ("images.xml", 1100); addChild (ir); De esta manera, puede configurar el archivo xml para cargar y el intervalo de la transición sin la necesidad de editar el código de clase.
De lo contrario, ver el siguiente paso..
En el archivo .fla, vaya al Panel de propiedades y escriba ImageRotator en el campo Clase. Recuerda que esto utilizará los parámetros por defecto..
Este es solo un ejemplo de un rotador de imágenes y una buena manera de comenzar a crear tu propia galería de imágenes..
Gracias por leer!
