Share
Este Consejo rápido explica cómo usar una imagen como fondo de un sitio web y escalarla proporcionalmente al tamaño del escenario. Es genial para cuando estás usando un SWF que tiene una altura completa y un ancho completo dentro de una página web.
Icono de iMac por bobbyperux.
Echa un vistazo a lo que estaremos trabajando. Cambie el tamaño de la ventana del navegador y haga clic en el SWF para cambiar el tamaño de la imagen automáticamente.
Vamos a empezar por crear un nuevo archivo Actionscript 3.0. Guárdelo como resize.fla donde quiera - asumiré C: \ resize \ resize.fla
Vamos a crear las carpetas que necesitamos para este tutorial. Si está familiarizado con las rutas de clase y tiene su propia ruta de clases, cree la carpeta \ org \ display \ dentro de él (asumiendo que no tiene uno con el mismo nombre).
De lo contrario, crea la carpeta. \ org \ display en la misma carpeta que el documento resize.fla (por ejemplo: C: \ resize \ org \ display).
Importe una imagen a la biblioteca de su FLA para que podamos usarla para probar el efecto. Haga clic en Archivo> Importar> "Importar a biblioteca".
En el cuadro de diálogo que se abre, busque el archivo que desea utilizar. La imagen del cielo que elegí está disponible en la descarga de Fuente en la parte superior de la página.
A continuación, exportaremos nuestra imagen para ActionScript, de modo que podamos consultarla en nuestro código..
Primero abra su biblioteca (si no puede verla, haga clic en Ventana> Biblioteca), haga clic con el botón derecho en la imagen y haga clic en Propiedades.
Cambia su nombre a "Sky".
Si las opciones avanzadas no están visibles, haga clic en Avanzadas en la esquina inferior derecha de la ventana Propiedades. Verifique las opciones, "Exportar para ActionScript" y "Exportar en el fotograma 1", usando el nombre Cielo para la clase y flash.display.BitmapData para la clase base. También asegúrese de que la opción "Permitir suavizado" esté marcada; esta opción garantizará que mantengamos una buena calidad de imagen al redimensionar la imagen.
Haga clic en Aceptar para cerrar el panel de Propiedades. Entonces, ahora que hemos configurado todo en nuestra FLA, puede guardarlo.
Ahora vamos a crear un nuevo documento ActionScript y guardarlo dentro de nuestro \ org \ display \ carpeta como OffsetResize.as (por ejemplo: C: \ resize \ org \ display \ OffsetResize.as), o dentro de la \ org \ display \ carpeta en tu classpath.
Siguiente: código. Echa un vistazo a los comentarios..
package org.display // Importe las clases necesarias para este objeto import flash.display.Sprite; importar flash.display.DisplayObject; import flash.events.Event; // Crear una nueva clase extendiendo la clase Sprite clase pública OffsetResize extiende Sprite // Crear las constantes estáticas para máximo y mínimo // Usaremos esto para la propiedad offsetType public static const MAX: String = "max"; public static const MIN: String = "min"; // El tipo de cambio de tamaño: si la imagen es más grande o más pequeña que el escenario privado var _offsetType: String; // La función constructora public function OffsetResize ($ child: DisplayObject, $ offsetType: String = "max"): void // The offsetType; si no se establece ningún valor, el valor "máximo" se asumirá automáticamente _offsetType = $ offsetType; // Agrega el hijo aquí, cualquier tipo de DisplayObject addChild ($ child); // Compruebe si este objeto está en el escenario. si es así, llame a la función init () si (etapa) init (); // Si no está en el escenario, lo escuchará cuando se agregue al escenario y luego llame a la función init () else de que se trate addEventListener (Event.ADDED_TO_STAGE, init); // Esto comprobará cuándo se elimina este objeto de la etapa y llamará a la función end () addEventListener (Event.REMOVED_FROM_STAGE, end); // La función init () (llamada cuando el objeto está en la etapa) // El parámetro Event = null se debe a que usamos init () sin ningún parámetro en el constructor // y porque también se usa como detector de eventos (ADDED_TO_STAGE) función privada init (e: Event = null): void // Detecta cuando la etapa se redimensiona y llama a la función stageResize () stage.addEventListener (Event.RESIZE, stageResize); // Llama a la función stageResize () ahora, también stageResize (); // Se llamará a la función stageResize () cada vez que se cambie el tamaño de stage // El parámetro e: Event = null se debe a que hemos llamado a la función stageResize () sin un parámetro private function stageResize (e: Event = null): void // Calcule la relación de ancho dividiendo el ancho del escenario por el ancho del objeto var px: Number = stage.stageWidth / width; // Calcule la relación de altura dividiendo la altura del escenario por la altura del objeto var py: Number = stage.stageHeight / height; / * Este es el operador ternario; en una línea comprueba si _offsetType es "max". Si es así, establece la variable div como el valor máximo entre la relación del ancho y la relación de la altura. Si no, establece la div variable como el valor mínimo entre la relación del ancho y la relación de la altura. Por lo tanto, esta línea es responsable de si la imagen es más grande o más pequeña que el escenario. * / var div: Number = _offsetType == "max"? Math.max (px, py): Math.min (px, py); // Estas dos líneas cambian el tamaño de este objeto de acuerdo con la relación de división. // Si usamos scaleX o scaleY aquí no funcionará como lo necesitamos. ancho * = div; altura * = div; // Estas dos líneas son responsables de centrar este objeto en el escenario. x = (stage.stageWidth / 2) - (ancho / 2); y = (stage.stageHeight / 2) - (altura / 2); // Esta función se llama cuando este objeto se elimina de la etapa, ya que no necesitamos que la función stageResize () finalice más la función privada (e: Evento): void // Elimine el oyente RESIZE de la etapa. removeEventListener (Event.RESIZE, stageResize); / * Aquí creamos el parámetro offsetType, por lo que podemos cambiar la forma en que el objeto cambia de tamaño dinámicamente * / conjunto de funciones públicas offsetType (type: String): void _offsetType = type; // Después de cambiar el tipo, volvemos a llamar a la función stageResize para actualizar if (stage) stageResize (); // Solo si queremos saber qué es el offsetType es una función pública get offsetType (): String return _offsetType;
Ahora puede guardar el archivo OffsetResize.as. Puedes cerrarla si quieres; de ahora en adelante, no lo editaremos más, solo lo usaremos dentro de otras clases.
Ahora vuelva a la FLA y asignémosle una clase de documento. (¿No está familiarizado con las clases de documentos? Lea esta introducción rápida.)
Abra el panel de Propiedades de la FLA haciendo clic en cualquier espacio en blanco en el escenario (sin objetos seleccionados), luego haga clic en Ventana> Propiedades.
En el panel que se abre, escriba "Principal" para la Clase (o Clase de documento, en Flash CS3).
Guarda la FLA de nuevo pero no la cierres.
Podríamos escribir nuestro código directamente en la línea de tiempo, pero eso no es un buen hábito; El propósito de la clase de documento es eliminar la programación de la línea de tiempo..
Entonces, cree un nuevo archivo ActionScript y guárdelo como "Main.as" en la misma carpeta que su FLA (por ejemplo: C: \ resize \ Main.as).
Vamos a codificarlo ahora (ver los comentarios en el código):
package // Importemos las clases necesarias import org.display.OffsetResize; importar flash.display.Sprite; importar flash.display.Bitmap; importar flash.display.StageAlign; importar flash.display.StageScaleMode; import flash.events.Event; import flash.events.MouseEvent; // Estamos extendiendo la clase Sprite, en lugar de MovieClip, ya que no usaremos ninguna animación de línea de tiempo aquí. Clase pública Main extienda Sprite // Esta será la instancia de nuestro objeto personalizado OffsetResize private var _bg: OffsetResize; // La función pública constructora Main (): void / * Podríamos usar la propiedad stage directamente aquí, pero supongo que muchas personas crean un documento como "base.swf" que carga el "main.swf" archivo - en cuyo caso nuestro main.swf no tendría la propiedad de escenario. Pero comprueba si hay una propiedad escénica. Podemos usar este swf que crearemos con o sin la base.swf; en este caso, lo usaremos sin la base.swf, pero está preparado para usar con el último si lo deseamos. Entonces, esta línea verificará si nuestro swf está en el escenario y, si es así, llame a init (). * / if (stage) init (); // Si no está en el escenario, llamará a la función init () solo cuando se agregue al escenario else addEventListener (Event.ADDED_TO_STAGE, init); // Se llama a la función init solo cuando el objeto está en la etapa // Fue explicado antes de lo que estamos usando en la función constructora función privada init (e: Event = null): void // Configuración de la etapa escalará (no escalará) y su alineación (esquina superior izquierda) stage.scaleMode = StageScaleMode.NO_SCALE; stage.align = StageAlign.TOP_LEFT; // ¿Recuerdas la foto en la biblioteca? Bueno, esta es la razón por la que lo exportamos para AS. // Vamos a crear un objeto Bitmap con esa imagen: var picture: Bitmap = new Bitmap (new Sky (0,0)); // Ahora creamos una instancia de la clase OffsetResize que codificamos antes. // El segundo parámetro es opcional y se puede dejar en blanco; su valor puede ser OffsetResize.MAX o OffsetResize.MIN. _bg = new OffsetResize (imagen, OffsetResize.MIN); // agrega la instancia de OffsetResize al escenario en el índice secundario 0, por lo que estará detrás de todo (es un fondo) stage.addChildAt (_bg, 0); // El código hasta ahora es suficiente para hacer que esto funcione, pero mostraré cómo cambiar dinámicamente el tipo de desplazamiento. // Entonces, agreguemos un evento MOUSE_DOWN, que llamará a la función mouseDown () cuando hagamos clic en el escenario. stage.addEventListener (MouseEvent.MOUSE_DOWN, mouseDown); // Esta función se llama cada vez que hacemos clic en la función privada de la etapa mouseDown (e: MouseEvent): void / * Este es el operador ternario, es una versión compacta de esta sentencia if larga: if (_bg.offsetType == OffsetResize.MAX) _bg.offsetType = OffsetResize.MIN; else _bg.offsetType = OffsetResize.MAX; * / _bg.offsetType = _bg.offsetType == OffsetResize.MAX? OffsetResize.MIN: OffsetResize.MAX;
Compruebe si está bien.
Si se cumplen todos estos requisitos, puede probarlo ahora!
Creamos una clase personalizada llamada "OffsetResize", que cambia el tamaño de un objeto específico de acuerdo con el tamaño de la etapa. Si lo creó en su ruta de clase, puede usarlo donde quiera: todo lo que necesita hacer es importar el objeto OffsetResize y usarlo; Es extensible y reutilizable. Pero recuerda es para usar con contenido escalable, por ejemplo, un SWF en HTML que ocupa el 100% del ancho y la altura.
¡Gracias por leer! Publicar cualquier pregunta en los comentarios..
Accentsconagua