Share
Las actualizaciones de contenido en Flash pueden ser difíciles y llevar mucho tiempo debido a los muchos pasos involucrados. Simplemente leer el contenido de un archivo XML significa que ya no es necesario importar nuevos activos y volver a compilar el archivo swf. Este tutorial cubrirá la carga dinámica de imágenes desde un archivo XML y luego tratará las inconsistencias en las dimensiones de la imagen utilizando la biblioteca de animación GreenSock Tween Max..
Veamos una captura de pantalla de la presentación final en la que trabajaremos:
Las imágenes y los ejemplos de la interfaz se proporcionan con Flash CS4 y Actionscript 2, pero otras versiones de Flash tan antiguas como la versión 8 deberían poder seguir sin problemas. Este tutorial asume al menos un conocimiento práctico de Actionscript ya que no voy a explicar cada línea, sin embargo, incluso si simplemente copia y pega, debería poder hacer que esto funcione..
Con un proyecto de este tipo, es importante mantener todo organizado para que Flash pueda encontrar las cosas según las necesite. Así que cree una carpeta de proyecto en su computadora donde pueda colocar TODOS los archivos relacionados con este proyecto.
Encuentra imágenes para tu presentación. Utilicé varias imágenes de http://www.sxc.hu (sxc_hu_410471_5588.jpg, sxc_hu_1151936_79441078.jpg, sxc_hu_1152040_85122875.jpg, sxc_hu_1154131_54136948.jpg).
Cree una carpeta de "activos" dentro de la carpeta de su proyecto. Abre tu editor de imágenes favorito y cambia el tamaño de tus fotos para que todas tengan un tamaño similar. Cambié el tamaño de mis imágenes para que el lado más largo (alto o ancho) sea 700 px y permití que el software de edición de imágenes mantuviera la proporción de la imagen..
Dado que los activos externos no se benefician de un precargador Flash, este sería un excelente momento para optimizar sus imágenes para descargas rápidas. Flash puede cargar archivos png, jpeg o gif, así que asegúrese de que sus imágenes finales estén en uno de esos formatos y guárdelas en la carpeta de activos que acaba de crear..
Cambie el tamaño de su escenario para que sea un poco más grande que las imágenes que creó en el Paso 2. El objetivo es asegurarse de que las imágenes que se muestran no se corten en la presentación final. Utilicé 800px x 800px para dar a las imágenes de 700px 50px de espacio en todos los lados. Ahora también es un buen momento para cambiar la velocidad de cuadros a 30 fps para lograr transiciones agradables y suaves y elegir el color de fondo que prefiera..
Cambie el nombre de "capa 1" a "fondo". Crea una nueva capa y llámala "contenido". Cree una capa más y llámela "script" y es una buena idea bloquear esta capa. Cualquier cosa que coloque en la capa de fondo se mostrará detrás de la presentación de diapositivas. Si nos fijamos en el ejemplo, el texto está en esta capa..
Usa el objeto de dibujo para crear un cuadrado blanco en el escenario. Seleccione el cuadrado y conviértalo en un símbolo (F8). Asegúrese de que el punto de registro esté en la esquina superior izquierda y llame al clip "shell". Dale al clip un nombre de instancia de "shell_mc".
Dentro de “shell_mc”, seleccione el cuadro blanco y conviértalo en un símbolo (F8). Nuevamente, asegúrese de que el registro esté en la parte superior izquierda y nombre el clip "fondo". Asigne al nuevo clip de película un nombre de instancia de "background_mc". Por último, nombra la capa "fondo" y bloquéala.
Dentro de "shell_mc" crea una nueva capa llamada "texto". Utilice la herramienta de texto para crear texto estático que dice "cargando imagen". Mueva el texto a x: 20 e y: 20 para que termine debajo de la imagen.
Cree otra capa nueva dentro de “shell_mc” llamada “imágenes”. Cree un clip de película en blanco llamado "fotos" y arrástrelo desde la biblioteca a la capa de "imágenes" recién creada. Mueve el clip a x: 10 y y: 10 y dale un nombre de instancia de "pics_mc".
Dentro de "shell_mc" crea una capa encima de "imágenes y nombre" máscara ". Cree un nuevo cuadrado, conviértalo en un clip de película llamado "máscara" y asígnele un nombre de instancia de "máscara_mc". Mueve el clip a x: 10 y y: 10.
Haga clic derecho en la capa "máscara" y seleccione Máscara. Asegúrese de que los íconos de capa "máscara" e "imagen" cambien para parecerse al ejemplo.
Dentro de "shell_mc" crea una capa sobre "máscara" y nómbrela "marco". En la paleta de herramientas, seleccione un color de trazo y un color de relleno diferente, luego cree un cuadrado en la capa "marco". Seleccione el área de relleno y elimínela dejando solo el borde. Haga doble clic en el borde para seleccionarlo y convertirlo en un clip de película llamado "borde". Dé el clip de película y el nombre de instancia de "border_mc" y colóquelo en x: 10 e y: 10.
Vuelva a la línea de tiempo de la raíz y seleccione "shell_mc". Vaya al panel de propiedades y gire hacia abajo la flecha de Filtros. Haga clic en el pequeño icono de "página" y seleccione la sombra paralela. Esto agregará un poco de profundidad..
Hemos terminado con Flash por el momento y necesitamos crear un archivo XML para realizar un seguimiento de nuestras imágenes. Abra su editor de texto favorito (casi cualquier cosa que pueda editar HTML funcionará) y cree un nuevo archivo. Guarde el archivo en su carpeta de proyecto como content.xml. Ahora necesitamos agregar una estructura al archivo para que Flash pueda entender cómo usar la información, podemos hacerlo con el siguiente código:
Ahora necesitamos agregar rutas a todas las imágenes en la presentación de diapositivas (así es como Flash va a "encontrar" las imágenes). Dentro de
Guarda el archivo y cierra tu editor de texto..
Vamos a utilizar una biblioteca de interpolación para ayudarnos a animar las transiciones entre imágenes, así que abra su navegador, vaya a http://blog.greensock.com/tweenmaxas2/ y haga clic en el botón "descargar AS2" en la parte superior. Abra el archivo zip que descargó, luego copie la carpeta "gs" y su contenido en la carpeta de su proyecto.
Es hora de volver a tu archivo de Flash y comenzar a escribir algo de ActionScript. Selecciona el primer cuadro de la capa "script" y abra el Panel de acciones (Ventana> Acciones). Los siguientes pasos requieren que edites el contenido de la ventana de Acciones, así que a partir de ahora simplemente me referiré a esto como "script". A medida que avanzamos por los pasos a continuación, verá todos los scripts creados hasta ese punto con las adiciones más recientes resaltadas..
Lo primero que debemos hacer es incluir la clase de interpolación que descargamos para que se compile cuando se crea el swf. Agregue el siguiente código a su script:
importar gs. *; importar gs.easing. *;
(Líneas adicionales: 3-15)
Accentsconagua
importar gs. *; importar gs.easing. *; var xmlPath = "content.xml"; var photos_xml = nuevo XML (); photos_xml.ignoreWhite = true; photos_xml.onLoad = function (success) if (success) // ----------- load success else // ----------- problema al cargar, verifique la ruta trace ("Error al cargar photos_xml"); photos_xml.load (xmlPath); Esto está creando un nuevo objeto XML que se dirige a nuestro archivo "content.xml". Dado que los archivos XML no se cargan al instante, es importante verificar si la carga está completa. Hacemos esto con la devolución de llamada onLoad que espera a que se cargue el archivo xml y luego realiza una acción.
Primero necesitamos crear una matriz llamada "imageList". Una vez que se haya cargado el archivo xml, vamos a asignar los datos a la matriz para que sea más fácil acceder a ellos más tarde..
(Líneas adicionales: 7,10)
importar gs. *; importar gs.easing. *; var xmlPath = "content.xml"; var photos_xml = nuevo XML (); photos_xml.ignoreWhite = true; var imageList: Array = new Array (); photos_xml.onLoad = function (success) if (success) // ----------- carga exitosa imageList = photos_xml.firstChild.childNodes; else // ----------- problema al cargar, verifique la ruta ("Error al cargar photos_xml"); photos_xml.load (xmlPath); Cree un objeto cargador de imágenes usando la clase movieClipLoader y use devoluciones de llamada para iniciar comandos cuando la película comience / termine de cargarse..
(Líneas adicionales: 17-27)
importar gs. *; importar gs.easing. *; var xmlPath = "content.xml"; var photos_xml = nuevo XML (); photos_xml.ignoreWhite = true; var imageList: Array = new Array (); photos_xml.onLoad = function (success) if (success) // ----------- carga exitosa imageList = photos_xml.firstChild.childNodes; else // ----------- problema al cargar, verifique la ruta ("Error al cargar photos_xml"); var imageLoader: MovieClipLoader = new MovieClipLoader (); var loadListener: Object = new Object (); imageLoader.addListener (loadListener); loadListener.onLoadInit = function (target_mc: MovieClip, httpStatus: Number): Void loadListener.onLoadComplete = function (target_mc: MovieClip): Void photos_xml.load (xmlPath); Después de que exista el objeto de carga, necesitamos una función para determinar las imágenes correctas. También tenemos que agregar una variable para realizar un seguimiento de la imagen actual. Dentro de la función "loadImage", el "loadURL" se establece en el atributo XML para la ruta de la imagen. Defina un nuevo clip de película (targetClip) para un contenedor para cargar la imagen y configure ese contenedor para que tenga una opacidad cero con la propiedad _alpha.
El último paso en la función es cargar la imagen en el contenedor (imageLoader.loadClip). También queremos ejecutar el comando "loadImage" tan pronto como el XML haya finalizado con éxito la carga.
(Líneas adicionales: 11,18,31-38)
importar gs. *; importar gs.easing. *; var xmlPath = "content.xml"; var photos_xml = nuevo XML (); photos_xml.ignoreWhite = true; var imageList: Array = new Array (); photos_xml.onLoad = function (success) if (success) // ----------- carga exitosa imageList = photos_xml.firstChild.childNodes; cargar imagen(); else // ----------- problema al cargar, verifique la ruta ("Error al cargar photos_xml"); var currentImage: Number = 0; var imageLoader: MovieClipLoader = new MovieClipLoader (); var loadListener: Object = new Object (); imageLoader.addListener (loadListener); loadListener.onLoadInit = function (target_mc: MovieClip, httpStatus: Number): Void loadListener.onLoadComplete = function (target_mc: MovieClip): Void function loadImage () var loadURL = imageList [currentImage] .attributes.imgurl; var targetClip = shell_mc.pics_mc.createEmptyMovieClip ("pic" + currentImage, shell_mc.pics_mc.getNextHighestDepth ()); targetClip._alpha = 0; // carga la nueva imagen imageLoader.loadClip (loadURL, targetClip); photos_xml.load (xmlPath); Cree una función de temporizador que llame a la función "loadImage" cada 5000 milisegundos (5 segundos). Iniciar el temporizador cuando la imagen haya terminado cargando, colocando la llamada en la devolución de llamada onLoadComplete.
(Líneas adicionales: 29,32-34)
importar gs. *; importar gs.easing. *; var xmlPath = "content.xml"; var photos_xml = nuevo XML (); photos_xml.ignoreWhite = true; var imageList: Array = new Array (); photos_xml.onLoad = function (success) if (success) // ----------- carga exitosa imageList = photos_xml.firstChild.childNodes; cargar imagen(); else // ----------- problema al cargar, verifique la ruta ("Error al cargar photos_xml"); var currentImage: Number = 0; var imageLoader: MovieClipLoader = new MovieClipLoader (); var loadListener: Object = new Object (); imageLoader.addListener (loadListener); loadListener.onLoadInit = function (target_mc: MovieClip, httpStatus: Number): Void loadListener.onLoadComplete = function (target_mc: MovieClip): Void setTimer (); función setTimer () timer = setInterval (loadImage, 5000); function loadImage () var loadURL = imageList [currentImage] .attributes.imgurl; var targetClip = shell_mc.pics_mc.createEmptyMovieClip ("pic" + currentImage, shell_mc.pics_mc.getNextHighestDepth ()); targetClip._alpha = 0; imageLoader.loadClip (loadURL, targetClip); photos_xml.load (xmlPath); Necesitamos cambiar el tamaño de "background_mc", "border_mc" y "mask_mc" para que tengan el tamaño de la imagen cargada. La biblioteca TweenMax / TweenLite es bastante fácil de usar. La sintaxis es TweenLite.to (clip de destino, tiempo en segundos, propiedades: valor, tipo de facilidad); También queremos que la imagen se desvanezca después de que se haya cargado, así que configura _alpha a interpolación al 100% dentro de onLoadComplete.
(Líneas adicionales: 25-27,31)
importar gs. *; importar gs.easing. *; var xmlPath = "content.xml"; var photos_xml = nuevo XML (); photos_xml.ignoreWhite = true; var imageList: Array = new Array (); photos_xml.onLoad = function (success) if (success) // ----------- carga exitosa imageList = photos_xml.firstChild.childNodes; cargar imagen(); else // ----------- problema al cargar, verifique la ruta ("Error al cargar photos_xml"); var currentImage: Number = 0; var imageLoader: MovieClipLoader = new MovieClipLoader (); var loadListener: Object = new Object (); imageLoader.addListener (loadListener); loadListener.onLoadInit = function (target_mc: MovieClip, httpStatus: Number): Void TweenLite.to (shell_mc.background_mc, 0.25, _width: target_mc._width + 20, _height: target_mc._height + 20, sencillez: Quad.easeOut) ); TweenLite.to (shell_mc.border_mc, 0.25, _width: target_mc._width, _height: target_mc._height, facilidad: Quad.easeOut); TweenLite.to (shell_mc.mask_mc, 0.25, _width: target_mc._width, _height: target_mc._height, facilidad: Quad.easeOut); loadListener.onLoadComplete = function (target_mc: MovieClip): Void TweenLite.to (target_mc, 0.25, autoAlpha: 100, delay: 0.25); setTimer (); función setTimer () timer = setInterval (loadImage, 5000); función removePrevious () if (prevImg! = undefined) removeMovieClip (prevImg); // incrementa la imagen actual si (currentImage < imageList.length -1) currentImage = currentImage + 1; else currentImage = 0; function loadImage() var loadURL = imageList[currentImage].attributes.imgurl; var targetClip = shell_mc.pics_mc.createEmptyMovieClip("pic"+currentImage,shell_mc.pics_mc.getNextHighestDepth()); targetClip._alpha = 0; imageLoader.loadClip(loadURL,targetClip); photos_xml.load(xmlPath); Primero encuentre el centro del escenario dividiendo la altura del escenario entre 2 y el ancho del escenario entre 2. Luego, dado que el punto de registro de la carcasa está en la parte superior izquierda, mueva el clip a la izquierda del centro del escenario a la mitad el ancho de la carcasa y la mitad de su altura (las variables clipXTarg y clipYtarg calculan los números para cada nueva imagen). Es importante usar la función Math.round () para que el número final no contenga un decimal, esto fuerza la posición final a un píxel completo.
(Líneas adicionales: 28-30)
importar gs. *; importar gs.easing. *; var xmlPath = "content.xml"; var photos_xml = nuevo XML (); photos_xml.ignoreWhite = true; var imageList: Array = new Array (); photos_xml.onLoad = function (success) if (success) // ----------- carga exitosa imageList = photos_xml.firstChild.childNodes; cargar imagen(); else // ----------- problema al cargar, verifique la ruta ("Error al cargar photos_xml"); var currentImage: Number = 0; var imageLoader: MovieClipLoader = new MovieClipLoader (); var loadListener: Object = new Object (); imageLoader.addListener (loadListener); loadListener.onLoadInit = function (target_mc: MovieClip, httpStatus: Number): Void TweenLite.to (shell_mc.background_mc, 0.25, _width: target_mc._width + 20, _height: target_mc._height + 20, sencillez: Quad.easeOut) ); TweenLite.to (shell_mc.border_mc, 0.25, _width: target_mc._width, _height: target_mc._height, facilidad: Quad.easeOut); TweenLite.to (shell_mc.mask_mc, 0.25, _width: target_mc._width, _height: target_mc._height, facilidad: Quad.easeOut); var clipXTarg = Math.round ((Stage.width / 2) - ((target_mc._width + 20) / 2)); var clipYTarg = Math.round ((Stage.height / 2) - ((target_mc._height + 20) / 2)); TweenLite.to (shell_mc, 0.25, _x: clipXTarg, _y: clipYTarg, facilidad: Quad.easeOut); loadListener.onLoadComplete = function (target_mc: MovieClip): Void TweenLite.to (target_mc, 0.25, autoAlpha: 100, delay: 0.25); setTimer (); función setTimer () timer = setInterval (loadImage, 5000); function loadImage () var loadURL = imageList [currentImage] .attributes.imgurl; var targetClip = shell_mc.pics_mc.createEmptyMovieClip ("pic" + currentImage, shell_mc.pics_mc.getNextHighestDepth ()); targetClip._alpha = 0; imageLoader.loadClip (loadURL, targetClip); photos_xml.load (xmlPath); Necesitamos encontrar la imagen previamente cargada para poder eliminarla. Obviamente, si la imagen actual está en algún lugar en el medio de la lista, entonces la imagen anterior es una menos que el número de imagen actual. Sin embargo, si la imagen actual es igual a cero, entonces la imagen anterior (suponiendo que la presentación haya recorrido todas las imágenes) sería la última imagen de la matriz o imageList.length - 1. Tome el número de la imagen anterior y descubra la ruta del clip de película para el shell de la imagen anterior.
(Líneas adicionales: 32-37)
importar gs. *; importar gs.easing. *; var xmlPath = "content.xml"; var photos_xml = nuevo XML (); photos_xml.ignoreWhite = true; var imageList: Array = new Array (); photos_xml.onLoad = function (success) if (success) // ----------- carga exitosa imageList = photos_xml.firstChild.childNodes; cargar imagen(); else // ----------- problema al cargar, verifique la ruta ("Error al cargar photos_xml"); var currentImage: Number = 0; var imageLoader: MovieClipLoader = new MovieClipLoader (); var loadListener: Object = new Object (); imageLoader.addListener (loadListener); loadListener.onLoadInit = function (target_mc: MovieClip, httpStatus: Number): Void TweenLite.to (shell_mc.background_mc, 0.25, _width: target_mc._width + 20, _height: target_mc._height + 20, sencillez: Quad.easeOut) ); TweenLite.to (shell_mc.border_mc, 0.25, _width: target_mc._width, _height: target_mc._height, facilidad: Quad.easeOut); TweenLite.to (shell_mc.mask_mc, 0.25, _width: target_mc._width, _height: target_mc._height, facilidad: Quad.easeOut); var clipXTarg = Math.round ((Stage.width / 2) - ((target_mc._width + 20) / 2)); var clipYTarg = Math.round ((Stage.height / 2) - ((target_mc._height + 20) / 2)); TweenLite.to (shell_mc, 0.25, _x: clipXTarg, _y: clipYTarg, facilidad: Quad.easeOut); if (currentImage == 0) var prevImgNum = imageList.length -1; else var prevImgNum = currentImage - 1; var prevImg = shell_mc.pics_mc ["pic" + prevImgNum]; loadListener.onLoadComplete = function (target_mc: MovieClip): Void TweenLite.to (target_mc, 0.25, autoAlpha: 100, delay: 0.25); setTimer (); función setTimer () timer = setInterval (loadImage, 5000); function loadImage () var loadURL = imageList [currentImage] .attributes.imgurl; var targetClip = shell_mc.pics_mc.createEmptyMovieClip ("pic" + currentImage, shell_mc.pics_mc.getNextHighestDepth ()); targetClip._alpha = 0; imageLoader.loadClip (loadURL, targetClip); photos_xml.load (xmlPath); A continuación queremos borrar la imagen anterior y luego, cuando llegue a cero _alpha, debemos eliminar el clip del escenario por completo. El onComplete: removePrevious espera hasta que el fade se haya completado y luego llama a "removePrevious". Como medida de seguridad, siempre es una buena idea asegurarse de que el clip que intentamos eliminar realmente exista. Por lo tanto, use una declaración "if" para verificar que el clip no esté indefinido (Palabra de Flash para no existe).
(Líneas adicionales: 38,50-54)
importar gs. *; importar gs.easing. *; var xmlPath = "content.xml"; var photos_xml = nuevo XML (); photos_xml.ignoreWhite = true; var imageList: Array = new Array (); photos_xml.onLoad = function (success) if (success) // ----------- carga exitosa imageList = photos_xml.firstChild.childNodes; cargar imagen(); else // ----------- problema al cargar, verifique la ruta ("Error al cargar photos_xml"); var currentImage: Number = 0; var imageLoader: MovieClipLoader = new MovieClipLoader (); var loadListener: Object = new Object (); imageLoader.addListener (loadListener); loadListener.onLoadInit = function (target_mc: MovieClip, httpStatus: Number): Void TweenLite.to (shell_mc.background_mc, 0.25, _width: target_mc._width + 20, _height: target_mc._height + 20, sencillez: Quad.easeOut) ); TweenLite.to (shell_mc.border_mc, 0.25, _width: target_mc._width, _height: target_mc._height, facilidad: Quad.easeOut); TweenLite.to (shell_mc.mask_mc, 0.25, _width: target_mc._width, _height: target_mc._height, facilidad: Quad.easeOut); var clipXTarg = Math.round ((Stage.width / 2) - ((target_mc._width + 20) / 2)); var clipYTarg = Math.round ((Stage.height / 2) - ((target_mc._height + 20) / 2)); TweenLite.to (shell_mc, 0.25, _x: clipXTarg, _y: clipYTarg, facilidad: Quad.easeOut); if (currentImage == 0) var prevImgNum = imageList.length -1; else var prevImgNum = currentImage - 1; var prevImg = shell_mc.pics_mc ["pic" + prevImgNum]; TweenLite.to (prevImg, 0.25, autoAlpha: 0, onComplete: removePrevious); loadListener.onLoadComplete = function (target_mc: MovieClip): Void TweenLite.to (target_mc, 0.25, autoAlpha: 100, delay: 0.25); setTimer (); función setTimer () timer = setInterval (loadImage, 5000); función removePrevious () if (prevImg! = undefined) removeMovieClip (prevImg); function loadImage () var loadURL = imageList [currentImage] .attributes.imgurl; var targetClip = shell_mc.pics_mc.createEmptyMovieClip ("pic" + currentImage, shell_mc.pics_mc.getNextHighestDepth ()); targetClip._alpha = 0; imageLoader.loadClip (loadURL, targetClip); photos_xml.load (xmlPath); Ahora necesitamos incrementar la imagen actual para que cuando se complete el temporizador, Flash sepa qué imagen cargar a continuación. Al igual que la imagen anterior, si la imagen actual es cualquier número, excepto la última imagen de la lista, simplemente agregamos uno al número de la imagen actual. Sin embargo, si la imagen actual es el último elemento de la lista, la imagen "siguiente" volverá a comenzar la lista con la primera imagen de la lista (posición cero en la matriz).
(Líneas adicionales: 55-59)
importar gs. *; importar gs.easing. *; var xmlPath = "content.xml"; var photos_xml = nuevo XML (); photos_xml.ignoreWhite = true; var imageList: Array = new Array (); photos_xml.onLoad = function (success) if (success) // ----------- carga exitosa imageList = photos_xml.firstChild.childNodes; cargar imagen(); else // ----------- problema al cargar, verifique la ruta ("Error al cargar photos_xml"); var currentImage: Number = 0; var imageLoader: MovieClipLoader = new MovieClipLoader (); var loadListener: Object = new Object (); imageLoader.addListener (loadListener); loadListener.onLoadInit = function (target_mc: MovieClip, httpStatus: Number): Void TweenLite.to (shell_mc.background_mc, 0.25, _width: target_mc._width + 20, _height: target_mc._height + 20, sencillez: Quad.easeOut) ); TweenLite.to (shell_mc.border_mc, 0.25, _width: target_mc._width, _height: target_mc._height, facilidad: Quad.easeOut); TweenLite.to (shell_mc.mask_mc, 0.25, _width: target_mc._width, _height: target_mc._height, facilidad: Quad.easeOut); var clipXTarg = Math.round ((Stage.width / 2) - ((target_mc._width + 20) / 2)); var clipYTarg = Math.round ((Stage.height / 2) - ((target_mc._height + 20) / 2)); TweenLite.to (shell_mc, 0.25, _x: clipXTarg, _y: clipYTarg, facilidad: Quad.easeOut); if (currentImage == 0) var prevImgNum = imageList.length -1; else var prevImgNum = currentImage - 1; var prevImg = shell_mc.pics_mc ["pic" + prevImgNum]; TweenLite.to (prevImg, 0.25, autoAlpha: 0, onComplete: removePrevious); loadListener.onLoadComplete = function (target_mc: MovieClip): Void TweenLite.to (target_mc, 0.25, autoAlpha: 100, delay: 0.25); setTimer (); función setTimer () timer = setInterval (loadImage, 5000); función removePrevious () if (prevImg! = undefined) removeMovieClip (prevImg); if (currentImage < imageList.length -1) currentImage = currentImage + 1; else currentImage = 0; function loadImage() var loadURL = imageList[currentImage].attributes.imgurl; var targetClip = shell_mc.pics_mc.createEmptyMovieClip("pic"+currentImage,shell_mc.pics_mc.getNextHighestDepth()); targetClip._alpha = 0; imageLoader.loadClip(loadURL,targetClip); photos_xml.load(xmlPath); La mayoría de las funciones de ActionScript se producen casi instantáneamente, sin embargo, la carga de imágenes requiere algo de tiempo. Esta cantidad de tiempo depende de la velocidad de conexión de la red y del tamaño de la imagen y, por lo tanto, puede durar varios segundos. Debemos eliminar el temporizador hasta que la imagen haya terminado de cargarse para que la presentación de diapositivas sea un período de tiempo constante después de que la imagen se haya cargado. Una simple línea de código (clearInterval) elimina el intervalo de 5 segundos hasta que el setInterval se reinicia y se ejecuta nuevamente.
(Línea adicional: 66)
importar gs. *; importar gs.easing. *; var xmlPath = "content.xml"; var photos_xml = nuevo XML (); photos_xml.ignoreWhite = true; var imageList: Array = new Array (); photos_xml.onLoad = function (success) if (success) // ----------- carga exitosa imageList = photos_xml.firstChild.childNodes; cargar imagen(); else // ----------- problema al cargar, verifique la ruta ("Error al cargar photos_xml"); var currentImage: Number = 0; var imageLoader: MovieClipLoader = new MovieClipLoader (); var loadListener: Object = new Object (); imageLoader.addListener (loadListener); loadListener.onLoadInit = function (target_mc: MovieClip, httpStatus: Number): Void TweenLite.to (shell_mc.background_mc, 0.25, _width: target_mc._width + 20, _height: target_mc._height + 20, sencillez: Quad.easeOut) ); TweenLite.to (shell_mc.border_mc, 0.25, _width: target_mc._width, _height: target_mc._height, facilidad: Quad.easeOut); TweenLite.to (shell_mc.mask_mc, 0.25, _width: target_mc._width, _height: target_mc._height, facilidad: Quad.easeOut); var clipXTarg = Math.round ((Stage.width / 2) - ((target_mc._width + 20) / 2)); var clipYTarg = Math.round ((Stage.height / 2) - ((target_mc._height + 20) / 2)); TweenLite.to (shell_mc, 0.25, _x: clipXTarg, _y: clipYTarg, facilidad: Quad.easeOut); if (currentImage == 0) var prevImgNum = imageList.length -1; else var prevImgNum = currentImage - 1; var prevImg = shell_mc.pics_mc ["pic" + prevImgNum]; TweenLite.to (prevImg, 0.25, autoAlpha: 0, onComplete: removePrevious); loadListener.onLoadComplete = function (target_mc: MovieClip): Void TweenLite.to (target_mc, 0.25, autoAlpha: 100, delay: 0.25); setTimer (); función setTimer () timer = setInterval (loadImage, 5000); función removePrevious () if (prevImg! = undefined) removeMovieClip (prevImg); if (currentImage < imageList.length -1) currentImage = currentImage + 1; else currentImage = 0; function loadImage() var loadURL = imageList[currentImage].attributes.imgurl; var targetClip = shell_mc.pics_mc.createEmptyMovieClip("pic"+currentImage,shell_mc.pics_mc.getNextHighestDepth()); targetClip._alpha = 0; clearInterval(timer); imageLoader.loadClip(loadURL,targetClip); photos_xml.load(xmlPath); Por último, tenemos que detener la línea de tiempo. La función predeterminada de Flash es reproducir la línea de tiempo continuamente a menos que se indique lo contrario. En el caso de que solo haya un fotograma en la línea de tiempo, Flash seguirá intentando ejecutar el mismo código una y otra vez, lo que provocará que la misma imagen intente cargarse repetidamente.
(Línea adicional: 72)
importar gs. *; importar gs.easing. *; var xmlPath = "content.xml"; var photos_xml = nuevo XML (); photos_xml.ignoreWhite = true; var imageList: Array = new Array (); photos_xml.onLoad = function (success) if (success) // ----------- carga exitosa imageList = photos_xml.firstChild.childNodes; cargar imagen(); else // ----------- problema al cargar, verifique la ruta ("Error al cargar photos_xml"); var currentImage: Number = 0; var imageLoader: MovieClipLoader = new MovieClipLoader (); var loadListener: Object = new Object (); imageLoader.addListener (loadListener); loadListener.onLoadInit = function (target_mc: MovieClip, httpStatus: Number): Void TweenLite.to (shell_mc.background_mc, 0.25, _width: target_mc._width + 20, _height: target_mc._height + 20, sencillez: Quad.easeOut) ); TweenLite.to (shell_mc.border_mc, 0.25, _width: target_mc._width, _height: target_mc._height, facilidad: Quad.easeOut); TweenLite.to (shell_mc.mask_mc, 0.25, _width: target_mc._width, _height: target_mc._height, facilidad: Quad.easeOut); var clipXTarg = Math.round ((Stage.width / 2) - ((target_mc._width + 20) / 2)); var clipYT
