Share
¿Alguna vez has querido hacer una aplicación de visor de fotos manejable y hermosa? En este tutorial, te mostraré cómo diseñar y codificar un ingenioso visor de fotos Polaroid, centrándote en el diseño y la interpolación..
Echemos un vistazo al resultado final en el que trabajaremos:
En esta sección discutiremos nuestra estructura de carpetas, también adquiriremos nuestras imágenes de stock.
Primero vamos a crear una carpeta en la que se ubicará nuestro proyecto. Lo nombraremos "Visor Polaroid".
Después simplemente copie esta estructura de carpetas:
Al crear proyectos muy visuales, es muy importante que primero sepas lo que quieres diseñar. Dentro de la carpeta de Diseño siempre tengo mis conceptos visuales y también en la carpeta de Diseño edito las imágenes que necesito para un proyecto.
Una vez que termine de trabajar en mi concepto, procedo a hacer un producto funcional, lo hago dentro de la carpeta Proyecto. Dentro de la carpeta Proyecto está la estructura de carpetas bin, lib y src muy conocida:
Ahora que hemos creado nuestras carpetas, pasemos a las imágenes. En este tutorial necesitaremos al menos dos imágenes:
Necesitará una cuenta de Stock Xchange para descargar estas imágenes; si aún no tiene una, ¡debe registrarse! Es un sitio web lleno de imágenes de stock gratis!
Haga clic en los enlaces para descargar las imágenes, luego guárdelas o muévalas a nuestra carpeta de Diseño.
También necesitaremos imágenes para colocar. dentro Los marcos polaroid. Aquí hay una lista de imágenes que he usado, pero siéntase libre de usar sus propias imágenes.
En esta sección vamos a editar nuestras imágenes de stock. Después de hacerlo, importaremos estas imágenes dentro de nuestro documento de Flash, que crearemos más adelante..
Vamos a editar nuestras imágenes con Photoshop, usaré CS5, pero siempre puedes usar versiones anteriores. Si no confía tanto en sus habilidades de Photoshop, puede descargar las imágenes que ya he editado. Simplemente descargue los archivos de origen de este tutorial, y podrá encontrar las imágenes dentro de Imágenes editadas carpeta.
En el ejemplo final, todas nuestras imágenes polaroid se encuentran en un suelo de madera. Ahora vamos a crear este fondo.
Crear un nuevo documento en Photoshop con las dimensiones 600x600px.
Añadir la imagen de textura de madera al documento. Escala para que estés satisfecho con el resultado final..
También he agregado un mapa de degradado, que establece los colores en blanco y negro.
Por último, he cambiado la transición del mapa de gradiente a 80%. Para hacerlo, haga clic en una de las flechas inferiores, y luego haga clic en el punto en el medio del degradado. Arrastra este punto al 80%..
¡Y voilá! ¡Hemos creado nuestro fondo de madera! Guárdelo como un documento de Photoshop (.psd) en nuestra carpeta de diseño y asígnele un nombre Background.psd.
Queremos colocar nuestras propias imágenes dentro del marco polaroid. Debemos hacer dos cosas, primero tendremos que eliminar el marco polaroid de su fondo (blanco), y también tendremos que cortar la parte "foto".
Para hacer esto, primero crearemos un nuevo documento de Photoshop de 600x600px. Pegue la imagen polaroid dentro del documento, escáltela hasta que encaje..
¿Por qué reducimos la imagen? Porque estamos creando un documento Flash de 600x600px, y no es necesario tener y cargar una imagen enorme si ni siquiera podemos escalarla a más de 600 px.
Seleccione la herramienta pluma (P) y haga clic alrededor del borde exterior del marco polaroid. Cuando trabaje con la herramienta Pluma, asegúrese de configurar la herramienta Pluma en su modo Trayectorias.
Presione Control + Intro (Windows) o Cmd + Intro (Mac) para seleccionar su ruta actual.
Con su ruta seleccionada, haga clic en el botón "Agregar máscara de capa". Ahora hemos aislado la polaroid de su fondo!
Este paso es muy similar al Paso 4 de diseño. De nuevo, seleccione la herramienta pluma y haga clic alrededor del área interna del marco de la polaroid. Luego seleccione la ruta actual con Ctrl + Enter / Cmd + Enter.
Ahora presione la tecla Alt y haga clic en la máscara en el Panel de capas. Ahora estás editando la máscara directamente.
Seleccione la herramienta Marquesina (M). Haz clic derecho en tu selección y selecciona Rellenar> Negro.
Presione la tecla Alt y haga clic nuevamente en el ícono de la máscara, para regresar a nuestra vista de capa "normal". Hemos editado con éxito nuestra máscara y ahora nuestra polaroid está lista para usar. Guardemos la imagen como un documento de Photoshop (.psd), he llamado a mi documento Polaroid.psd.
En esta sección vamos a usar (finalmente) Flash. Vamos a configurar nuestro documento Flash para utilizar la carpeta. compartimiento para exportar, y la carpeta src para nuestro código. Es hora de abrir Flash!
Cree un nuevo documento de Flash (ActionScript 3.0) con Flash Professional. Establezca las dimensiones en 600x600px y la velocidad de cuadros en 24 fps. Establezca la clase de documento en Principal. También cambie el fondo a negro (# 000000). Guardalo como "Polaroid.fla", dentro de lib carpeta.
Luego vaya a Archivo> Configuración de publicación, cambie Polaroid.swf a ? /bin/Polaroid.swf, puede desmarcar la opción HTML. Ahora todo lo que exportemos (solo un archivo SWF) estará en la carpeta bin. No cierre la ventana Configuración de publicación.
Haga clic en el Destello lengüeta. Luego haga clic en el Botón de configuración cerca de Guión: ActionScript 3.0.
Ahora podemos cambiar la ruta de origen. Verás un icono de carpeta con el texto. ".", cambiar eso a "? / src".
Flash utilizará el src Carpeta para todas sus clases..
Ahora es el momento de comenzar a importar nuestros gráficos a nuestro documento de Flash. Si tuvo algún problema con las imágenes, siempre puede descargar los archivos de origen de este tutorial en la parte superior. Habrá una carpeta llamada "Imágenes editadas", Dentro habrá las imágenes editadas que puedes usar..
Cree un nuevo documento de Flash (ActionScript 3.0) con Flash Professional. Establezca las dimensiones en 600x600px y la velocidad de cuadros en 24 fps. También cambia el fondo a negro (# 000000).
Hemos guardado nuestras imágenes como archivos .psd porque funcionan muy bien con otros productos de Adobe, como Flash. Después de crear nuestro documento, seleccione Archivo> Importar a biblioteca y seleccione Polaroid.psd y Background.psd. Después de hacerlo nuestra biblioteca se ve así:
Arrastre Background.psd desde la biblioteca a nuestro escenario, luego conviértalo en un clip de película. Nombra el fondo, y marca la casilla "Exportar para ActionScript". Establece la clase base en flash.display.Sprite. Después de hacerlo, puedes volver a eliminar el fondo del escenario..
¿Por qué configuré la clase base de Background en Sprite en lugar de la clase base MovieClip predeterminada? Debido a que la única diferencia entre un MovieClip y un Sprite es que los MovieClips pueden contener múltiples cuadros, y los Sprites no pueden. No necesitamos varios marcos para nuestro Fondo, así que configuremos la clase base de Fondo en Sprite.
Al igual que hicimos con nuestros antecedentes, arrastre polaroid.psd desde Libary a nuestro escenario. Conviértalo en un clip de película y asígnele el nombre Polaroid. Exportar para ActionScript caja. Establece la clase base en flash.display.Sprite.
Nuestro Polaroid todavía está en el escenario, haga doble clic en él para que podamos editarlo. Hasta el momento, Polaroid solo tiene una capa, cambie el nombre de esta capa a Marco Polaroid.
Crea dos nuevas capas, nombrándolas. Máscara y Titular de la imagen.
Nuestra Polaroid contendrá una imagen, esta imagen debe mostrarse en algún lugar, esto se hará en un clip de película llamado "Titular de imagen".
Dibuje un rectángulo de aproximadamente el tamaño como el "área de foto" de la polaroid, haga esto en el Titular de la imagen capa. No importa de qué color sea el rectángulo. Después de crear este rectángulo, conviértalo en un clip de película, asígnele el nombre "Titular de imagen".
Déle al titular de la imagen un nombre de instancia de titular de la imagen.
El titular de la imagen contendrá las imágenes que cargaremos. A veces, estas imágenes son demasiado grandes; por ejemplo, tome una imagen de 400x100px; esta imagen es demasiado ancha y sus bordes se extenderían fuera de la polaroid. Queremos evitar esto. Por lo tanto, debemos ocultar todas las imágenes que se extiendan fuera del área del Titular de la imagen.
Para ello, debemos crear un máscara. Una máscara le dice a una capa qué parte debe mostrarse y qué parte debe estar oculta.
Si queremos que todas las imágenes se muestren dentro del Titular de imágenes, sin que sobresalgan los bordes, deberíamos establecer el tamaño de la máscara en las mismas dimensiones que el Titular de imágenes..
Copie el titular de la imagen y péguelo en su lugar con Ctrl + Shift + V (Windows) / Cmd + Shift + V (Mac) en la capa Máscara. Luego rompa el titular de la imagen copiada con Ctrl + B (Windows) / Cmd + B (Mac).
Por último debemos decirle a nuestro Máscara Capa que es una máscara. Haga clic derecho en la máscara de capa y seleccione la opción Máscara.
Es hora de comenzar a codificar, si tiene algún problema con el Sección de flash, solo puedes copiar la carpeta Sección flash completada. Dentro de esa carpeta hay todo lo que necesitas para comenzar siguiendo estos pasos.
Para cargar nuestras imágenes, utilizaremos un archivo XML. El archivo XML le dirá a nuestro producto dónde se encuentran las imágenes..
Abra un editor de texto y escriba lo siguiente:
IMAGE_1.jpg IMAGE_2.jpg IMAGE_3.jpg
Debe cambiar IMAGE_1.jpg, IMAGE_2.jpg, etc. a nombres de archivo reales, que se refieren a imágenes ubicadas dentro de compartimiento carpeta. Si no tiene ninguna imagen, descargue las imágenes que mencioné en el Paso 3.
Guarde este archivo XML como images.xml, dentro de compartimiento carpeta.
Antes de comenzar la codificación, es importante saber qué tareas debe realizar nuestro proyecto:
Codificar todas estas funcionalidades en una clase haría a esa clase extremadamente compleja, es mejor separar cada tarea a una clase diferente.
Accentsconagua
ImageLoader: Cargará el archivo XML y pasará las imágenes a PolaroidHolder.PolaroidHolder: Cuando reciba las imágenes, creará una Polaroid para cada imagen, por lo que también se asegura de que solo uno Polaroid se acerca a la vez.polaroid: La imagen se mostrará dentro de esta clase..La clase Main es la clase a la que llama Polaroid.fla cuando se inicia..
Cree un nuevo archivo ActionScript y asígnele un nombre "Main.as", guardarlo dentro de la carpeta src. La clase principal se ve como sigue.
paquete import flash.display.MovieClip; La clase pública Main extiende MovieClip función pública Main (): void
Está tan vacío porque primero necesitamos crear nuestras otras clases, mientras que estamos ocupados vamos a seguir agregando código a la clase principal.
En este proyecto estamos cargando varios recursos: un archivo xml y varias imágenes. Nosotros podemos usar rutas de archivo relativas o caminos absolutos. Déjame explicarte la diferencia con un ejemplo; Tenemos la siguiente estructura de carpetas:
Loader.swf debe cargar image1.jpg. Desde su posición actual. Loader.swf debe "abrir" el directorio de imágenes y cargar image1.jpg. Le decimos a Loader.swf que cargue images / image1.jpg. Este tipo de carga se llama carga relativa de la ruta del archivo, porque la url es relativo a la posición actual de Loader.swf.
Entonces, ¿cómo cargar imagen1.jpg, independientemente de dónde se encuentre Loader.swf? Esto se hace con carga de ruta de archivo absoluta. La ruta del archivo comienza desde el núcleo superior, desde la raíz. Si está en una computadora, su raíz es un disco duro. Estamos implementando nuestro proyecto en línea, por lo que la raíz sería el servidor del sitio.
Cuando nuestro proyecto esté terminado, nos gustaría implementarlo. Lo más probable es que esté incrustado dentro de una página HTML. Hay un pequeño problema. Si Loader.swf desea cargar, se cargará desde su ubicación actual, desde la ubicación de la página HTML. No queremos esto, y por lo tanto debemos usar la ruta de acceso absoluta del archivo..
Ahora viene el mayor problema, no sabremos la ubicación del archivo HTML. Necesitamos encontrar el absoluto ruta al archivo .swf, y edite esa ruta para que podamos cargar nuestras imágenes.
Podemos obtener la ruta absoluta al archivo .swf con root.loaderInfo.url.
Es hora de crear nuestro ImageLoader clase.
Cree un nuevo archivo ActionScript y asígnele un nombre ImageLoader.as, Guárdalo dentro de la carpeta .src. La clase se ve así, ha sido comentado a fondo:
package // importar las clases que necesitamos importar flash.net.URLLoader; importar flash.net.URLRequest; import flash.events.Event; importar flash.display.Loader; importar flash.display.Bitmap; importar flash.display.Sprite; clase pública ImageLoader extiende Sprite // cargará nuestro xml private var xmlLoader: URLLoader = new URLLoader (); // almacena el xml privado var xml: XML; // una lista de rutas de archivos a las imágenes privadas var imageFileList: XMLList; // la ruta al archivo .swf private var swfPath: String; // la ruta de la carpeta del proyecto (donde se encuentran las carpetas bin, src y lib) private var projectPath: String; // debemos conocer el título de nuestro proyecto, para que podamos editar la url .swf para obtener nuestro projectPath private var projectTitle: String; // necesitamos contar cuántas imágenes ya hemos cargado privado var cuenta: uint = 0; // debemos almacenar las imágenes, las imágenes son Bitmaps public var images: Vector.= nuevo vector. ; función pública ImageLoader (_projectTitle: String) // debemos saber cuándo se ha agregado ImageLoader, luego podemos averiguar cuál es la url de la raíz addEventListener (Event.ADDED, whenAdded); // almacena el título del proyecto projectTitle = _projectTitle; // cuando imageLoader termina de cargarse, llame a xmlLoaded xmlLoader.addEventListener (Event.COMPLETE, xmlLoaded); función privada whenAdded (evento: Evento): void // almacenar la ruta swf swfPath = root.loaderInfo.url; // obtenga nuestro projectPath projectPath = swfPath.substr (0, swfPath.length - projectTitle.length); // esta función cargará las imágenes de un xml y almacenará las imágenes public function load (url: String): void // load the xml, que necesitaremos para cargar las imágenes xmlLoader.load (nueva URLRequest ( projectPath + url)); función privada xmlLoaded (event: Event): void // almacenar el xml, que xmlLoader ha cargado xml = new XML (event.target.data); // almacena todos los enlaces de archivo en un XMLList imageFileList = new XMLList (xml.image.file); // ahora que tenemos la información del archivo, podemos cargar las imágenes loadImages (); función privada loadImages (): void para cada (var imageFile: String en imageFileList) // create var imageLoader: Loader = new Loader (); // siempre que se haya cargado una imagen, llame a imageLoaded imageLoader.contentLoaderInfo.addEventListener (Event.COMPLETE, imageLoaded, false, 0, true); imageLoader.load (nueva URLRequest (projectPath + imageFile)); función privada imageLoaded (evento: Evento): void // contamos cuántas imágenes ya cargamos, acabamos de cargar (otra) una cuenta ++; // obtener la imagen Bitmap var image: Bitmap = Bitmap (event.target.loader.content); // almacenar la imagen en nuestras imágenes Vector images.push (imagen); // si esta es la última imagen que necesitamos cargar si (count == imageFileList.length ()) // hemos terminado, distribuye un evento dispatchEvent (new Event ('imagesLoaded')); // - limpieza // descargar el cargador event.target.loader.unload (); public function cleanUp (): void xmlLoader.data = null; xmlLoader = null; xml = nulo; imageFileList = null; cuenta = 0; images = null;
Ahora que tenemos nuestra clase ImageLoader, podemos mejorar nuestra clase principal.
paquete import flash.display.MovieClip; import flash.events.Event; public class Main extiende MovieClip // una clase personalizada que hemos creado que cargará todas las imágenes de un archivo xml como Bitmaps private var imageLoader: ImageLoader; // esta clase mantendrá y mostrará todas nuestras Polaroids private var polaroidHolder: PolaroidHolder; función pública Main (): void // cargar nuestras imágenes, dale a imageLoader el nombre del archivo .swf, para que pueda cargar usando rutas absolutas imageLoader = new ImageLoader ('Polaroid.swf'); addChild (imageLoader); imageLoader.addEventListener ('imagesLoaded', displayImages, false, 0, true); imageLoader.load ('pictures.xml'); función privada displayImages (evento: Evento): void // hemos cargado todas nuestras imágenes polaroidHolder = new PolaroidHolder (imageLoader.images); addChild (polaroidHolder); // también limpia el imageLoader imageLoader.cleanUp (); imageLoader = null; El PolaroidHolder recibirá las imágenes como un vector. Después de recibir las imágenes, creará una Polaroid para cada imagen. Vamos a crear nuestra clase PolaroidHolder:
paquete import flash.display.MovieClip; importar flash.display.Bitmap; import flash.events.MouseEvent; clase pública PolaroidHolder extiende MovieClip // este vector mantendrá todas nuestras Polaroids public var polaroids: Vector.= nuevo vector. ; // con esta variable no tenemos una variable privada zoomedIn: Boolean; // la Polaroid hemos ampliado la variable privada currentPolaroid: Polaroid; Función pública PolaroidHolder (imágenes: Vector. ) // código de constructor para cada (var imagen: Bitmap en imágenes) // crear una nueva polaroid var polaroid: Polaroid = nueva Polaroid (imagen); // posicionar y rotarlo polaroid.x = Math.random () * 200 + 100; polaroid.y = Math.random () * 200; polaroid.rotation = Math.random () * 60 - 30; // agregue un clic eventListener polaroid.addEventListener (MouseEvent.CLICK, onPolaroidClick); addChild (polaroid); // Agregarlo al vector polaroids polaroids.push (polaroid); función privada onPolaroidClick (evento: MouseEvent): void // ¡ha habido un clic en una Polaroid! si (currentPolaroid == null) // no se ha configurado currentPolaroid, estamos enfocando // configuramos la Polaroid seleccionada como la Polaroid currentPolaroid = event.currentTarget como Polaroid; // silenciar todas las demás Polaroids (las que no están ampliadas) para cada (var polaroid: Polaroid en polaroids) if (polaroid! = currentPolaroid) polaroid.mute (); else else // compruebe si el clic estaba en la polaroid actual si (event.currentTarget == currentPolaroid) // se ha hecho clic en la misma polaroid (nuevamente), es hora de alejar la imagen // desactivar el silencio de todas las demás Polaroids, puede responder de nuevo a los eventos para cada (var polaroid: Polaroid en polaroids) if (polaroid! = currentPolaroid) polaroid.unmute (); // ahora no estamos enfocados, por lo que no tenemos una versión actual de polaroid currentPolaroid = null;
En las líneas 50 y 62, llamamos a las funciones. mudo() y unmute (). Silencio hace que la Polaroid quede insensible a todos los eventos, no responde a los movimientos del mouse ni a los clics. Esto es precisamente lo que queremos cuando nos acercamos. No queremos que hagan otras Polaroids cualquier cosa. Después de que nos estamos alejando, queremos que las Polaroids respondan a los eventos; llamando a unmute, las Polaroids responderán nuevamente a los clics y al mouse.
¡Ahora es el momento de crear nuestra clase más interesante, nuestra clase Polaroid! Para esta clase necesitaremos el popular tweener de biblioteca de interpolación. Descárguelo y guarde la biblioteca dentro de la carpeta src (consulte esta guía para obtener más detalles).
paquete import flash.display.MovieClip; import flash.events.MouseEvent; importación caurina.transitions. *; importar caurina.transitions.properties. *; importar flash.display.Bitmap; import flash.events.Event; clase pública Polaroid amplía MovieClip // la escala a la que se hace zoom en la constante estática privada ZOOMED_IN_SCALE: Number = 1; // la escala en la que se alejó el Polaroid de la const. estática privada ZOOMED_OUT_SCALE: Number = .6; // la altura máxima de una imagen puede ser privada var IMAGE_MAX_HEIGHT: Number; // el ancho máximo de una imagen puede ser privado var IMAGE_MAX_WIDTH: Número; // debemos escalar las imágenes cargadas, recordar la escala private var scale: Number; // cuando reducimos el zoom, volvemos a la posición y rotación originales de la Polaroid // la coordenada x original de la Polaroid. privado var origX: Number; // también necesitamos la coordenada y original private var origY: Number; // almacena la rotación original de la rotación original del Polaroid origRotation: Number; // cuando este Booleano se convierta en verdadero, la Polaroid no responderá a los eventos del mouse private var muted: Boolean; // necesitamos saber si se ha hecho clic en el Polaroid var público pulsado: Boolean; función pública Polaroid (imagen: mapa de bits) // hacer que la Polaroid sea un botón buttonMode = true; // las dimensiones máximas de una imagen están limitadas por las dimensiones de imageHolder IMAGE_MAX_HEIGHT = imageHolder.height; IMAGE_MAX_WIDTH = imageHolder.width; // escalar la escala Polaroid downX = ZOOMED_OUT_SCALE; scaleY = ZOOMED_OUT_SCALE; // tendremos que cambiar el tamaño de la imagen para que encaje // primero verifique si es un retrato o un paisaje si (image.width> image.height) // es un paisaje // la escala está limitada por la escala de altura de la imagen = IMAGE_MAX_HEIGHT / image.height; else // es un retrato // la escala está limitada por la escala de ancho de la imagen = IMAGE_MAX_WIDTH / image.width; // escala la imagen image.scaleX = scale; image.scaleY = escala; // agrega la imagen escalada imageHolder.addChild (imagen); // agregar oyentes de eventos a la Polaroid; addEventListener (MouseEvent.MOUSE_OVER, onMouseOver); addEventListener (MouseEvent.MOUSE_OUT, onMouseOut); addEventListener (MouseEvent.CLICK, onClick); addEventListener (Event.ADDED, whenAdded); función pública mute (): void // llamar a esta función hará que la Polaroid no responda a los eventos buttonMode = false; silenciado = verdadero; public function unmute (): void // llamar a esta función hará que Polaroid responda a los eventos buttonMode = true; silenciado = falso; función privada whenAdded (evento: Evento): void // almacenar las coordenadas originales de Polaroid y la rotación origX = x; origY = y; origRotation = rotación; // ya no necesitaremos este detector de eventos, elimínelo removeEventListener (Event.ADDED, whenAdded); private function onMouseOver (evento: MouseEvent): void // solo responde si el Polaroid no se ha silenciado si (! muted) // solo responde si no se ha hecho clic en el Polaroid, al hacer clic Polaroids no debe responder a los mouse over. if (! clicked) // mueve la polaroid al frente parent.setChildIndex (this, parent.numChildren - 1); // mover y girar la polaroid en una dirección aleatoria Tweener.addTween (esto, x: origX + Math.random () * 30 - 15, y: origY + Math.random () * 30 -15, rotación: origRotation + Math.random () * 20 - 10, tiempo: 1); función privada onMouseOut (evento: MouseEvent): void // solo responde si el Polaroid no ha sido silenciado si (! muted) // solo responde si no se ha hecho clic en el Polaroid if (! clicked) // mueva la polaroid de vuelta a su posición original y rotación Tweener.addTween (esto, x: origX, y: origY, rotación: origRotation, time: 1); función privada onClick (evento: MouseEvent): void // solo responde si el Polaroid no se ha silenciado si (! silenciado) // si no se ha hecho clic antes si (! se hace clic) // nosotros se ha hecho clic, hagamos que true se haga clic = true; // estamos acercándonos, despachemos un evento (Main lo recogerá) dispatchEvent (nuevo Evento ('zoomIn')); // acercar el Polaroid al centro de la etapa Tweener.addTween (esto, x: stage.stageWidth / 2 - width / 2, y: stage.stageHeight / 2 - height / 2, rotación: 0, scaleX: ZOOMED_IN_SCALE , escalaY: ZOOMED_IN_SCALE, tiempo: 1); else // ya hemos hecho clic, así que haz clic en falso haciendo clic = falso; // estamos reduciéndonos, enviemos un evento (Main lo recogerá) dispatchEvent (nuevo evento ('zoomOut')); // alejar la polaroid, volver a su posición original Tweener.addTween (esto, x: origX, y: origY, rotación: origRotation, scaleX: ZOOMED_OUT_SCALE, scaleY: ZOOMED_OUT_SCALE, time: 1); Haz los cambios como se ve en el código de abajo.
paquete import flash.display.MovieClip; public class Main extiende MovieClip // una clase personalizada que hemos creado que cargará todas las imágenes de un archivo xml como Bitmaps private var imageLoader: ImageLoader; privado var polaroidHolder: PolaroidHolder; función pública Main (): void // cargar nuestras imágenes imageLoader = new ImageLoader (); imageLoader.addEventListener ('imagesLoaded', displayImages, false, 0, true); imageLoader.load ('pictures.xml'); función privada displayImages (evento: Evento): void // hemos cargado todas nuestras imágenes polaroidHolder = new PolaroidHolder (imageLoader.polaroids); addChild (polaroidHolder); // también limpia el imageLoader imageLoader.cleanUp (); imageLoader = null; Parece funcionar, pero no es muy interesante. Al acercarse, el usuario no es "atraído", nuestro producto no es lo suficientemente inmersivo. Lo que necesitamos es un fondo! Por casualidad creamos uno en Etapa 4. Es hora de agregar nuestro fondo!
Habíamos exportado nuestro fondo con la clase. Fondo.
No solo agregaremos el Fondo como un elemento secundario de Main, sino que también haremos que el Fondo se oscurezca cuando nos acercamos, y al aclarar cuando nos alejamos. Cómo hacemos esto? Cada vez que se hace clic en una Polaroid, se distribuye un evento personalizado, acercarse o disminuir el zoom. Podemos rastrear este evento, solo agregamos oyentes de eventos a nuestra clase principal, ellos recogerán los eventos zoomIn y zoomOut, y cada vez que se detecten, podemos indicar a nuestro Fondo que se ilumine u oscurezca
paquete import flash.display.MovieClip; import flash.events.Event; importación caurina.transitions. *; importar caurina.transitions.properties. *; public class Main extiende MovieClip // una clase personalizada que hemos creado que cargará todas las imágenes de un archivo xml como Bitmaps private var imageLoader: ImageLoader; // esta clase mostrará todas nuestras Polaroids, al recibir un Vector of Bitmaps private var polaroidHolder: PolaroidHolder; // el fondo de madera, bg es un abbrivado para el fondo privado var bg: Función pública de fondo Main (): void // cargar nuestras imágenes imageLoader = new ImageLoader ('Polaroid.swf'); imageLoader.addEventListener ('imagesLoaded', displayImages, false, 0, true); addChild (imageLoader); imageLoader.load ('pictures.xml'); // agrega nuestro bg como hijo bg = new Background (); addChild (bg); // agregar detector de eventos, por lo que sabemos cuándo estamos acercándonos o alejándonos // el tercer parámetro de addEventListener es verdadero, por lo que podemos cap
