Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Web Design

Consejo rápido: cómo cambiar automáticamente el tamaño de una imagen para que se ajuste a la pantalla

by
Read Time:8 minsLanguages:

Spanish (Español) translation by steven (you can also view the original English article)

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 ideal para cuando estás utilizando un SWF de altura completa y ancho completo dentro de una página web.

icono de iMac de bobbyperux.


Vista previa del resultado final

Echa un vistazo a lo que vamos a trabajar. Cambia el tamaño de la ventana del navegador y haz clic en el SWF para cambiar automáticamente el tamaño de la imagen.


Paso 1: Crear un nuevo archivo

Comencemos creando un nuevo archivo Actionscript 3.0. Guárdalo como resize.fla donde quieras - Asumiré C:\resize\resize.fla


Paso 2: Configurar las carpetas

Vamos a crear las carpetas que necesitamos para este tutorial. Si estás familiarizado con las rutas de clase y tienes tu propia ruta de clase, crea la carpeta \org\display\ (suponiendo que aún no tengas una 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).


Paso 3: Importar un archivo de imagen

Importa una imagen a tu biblioteca FLA para que podamos usarla para probar el efecto. Haz clic en Archivo > Importar > "Importar a biblioteca".

En el cuadro de diálogo que se abre, busca el archivo que deseas usar. La imagen del cielo que elegí está disponible en los archivos fuente en la parte superior de la página.


Paso 4: Configurar la imagen para exportar

A continuación, exportaremos nuestra imagen para ActionScript, para que podamos referirnos a ella en nuestro código.

Primero abre tu biblioteca (si no puedes verla, haz clic en Ventana > Biblioteca), haz clic con el botón derecho en la imagen y haz clic en Propiedades.

Cambia su nombre a "Sky".

Si las opciones avanzadas no están visibles, haz clic en Avanzadas en la esquina inferior derecha de la ventana Propiedades. Comprueba las opciones "Exportar para ActionScript" y "Exportar en el fotograma 1", utilizando el nombre Sky para la clase y flash.display.BitmapData para la clase base. También asegúrate de que la opción "Permitir suavizado" esté marcada; esta opción asegurará que mantenemos una buena calidad de imagen al cambiar el tamaño de la imagen.

Haz clic en Aceptar para cerrar el panel de Propiedades. Luego, ahora que hemos configurado todo en nuestro FLA, puedes guardarlo.


Paso 5: Clase personalizada OffsetResize

Ahora vamos a crear un nuevo documento de ActionScript y guardarlo dentro de nuestra carpeta \org\display\ como OffsetResize.as (por ejemplo: C:\resize\org\display\OffsetResize.as), o dentro de la carpeta \org\display\ en tu ruta de clase.

Siguiente: código. Echa un vistazo a los comentarios.

Ahora puedes guardar el archivo OffsetResize.as. Puedes cerrarlo si quieres; a partir de ahora, ya no lo editaremos, solo lo usaremos dentro de otras clases.


Paso 6: Configurar la clase documento

Ahora vuelve a la FLA y vamos a asignar una clase de documento a él. (¿No estás familiarizado con las clases documentos? Lee esta introducción rápida.)

Abre el panel Propiedades de la FLA haciendo clic en cualquier espacio en blanco en el escenario (sin objetos seleccionados), luego haz clic en Ventana > Propiedades.

En el panel que se abre, escribe "Main" para la Clase (o para la clase del documento, en Flash CS3).

Guarda el archivo FLA de nuevo, pero no lo cierres.


Paso 7: Código de la clase documento

Podríamos escribir nuestro código directamente en la línea de tiempo, pero ese no es un buen hábito; el propósito de la clase documento es eliminar la programación de la línea de tiempo.

Por lo tanto, crea un nuevo archivo ActionScript y guárdalo como "Main.as" en la misma carpeta que tu FLA (por ejemplo: C:\resize\Main.as).

Codifiquemos ahora (mira los comentarios en el código):


Paso 8: Pruébalo

Comprueba si está bien.

  • Necesitamos tener una imagen en la Biblioteca llamada "Sky" que se exporta para ActionScript con un nombre de clase Sky y una clase base de flash.display.BitmapData.
  • También debemos tener la clase del documento establecida en "Main"
  • el archivo Main.as en la misma carpeta que el archivo FLA
  • y el archivo OffsetResize.as dentro de \org\display (que está dentro de la misma carpeta que el archivo .fla o está dentro de la ruta de clase).

Si se cumplen todos estos requisitos, ¡puedes probarlo ahora!

Conclusión

Creamos una clase personalizada llamada "OffsetResize", que cambia el tamaño de un objeto especificado de acuerdo con el tamaño de la etapa. Si lo creaste en tu ruta de clase, puedes usarlo donde lo desees: todo lo que necesitas hacer es importar el objeto OffsetResize y usarlo; es extensible y reutilizable. Pero recuerda que se debe utilizar con contenido escalable, por ejemplo, un SWF en HTML que ocupa el 100% del ancho y alto.

¡Gracias por leer! Publica cualquier pregunta en los comentarios.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.