Share
Dos veces al mes, volvemos a visitar algunas de las publicaciones favoritas de nuestros lectores de toda la historia de Activetuts +. Este tutorial se publicó por primera vez en julio de 2009..
Un diseño web fluido utiliza el 100% del ancho (y la altura) del navegador, lo que hace que todos los elementos contenidos floten en ciertas posiciones. Esto se opone al diseño de ancho fijo donde los contenidos permanecen fijos sin importar el tamaño del navegador.
Esta técnica es popular en los sitios web HTML / CSS, pero esta guía le mostrará cómo crear un efecto de diseño fluido similar en Flash. Cada elemento se reposicionará con facilidad cuando el navegador cambie de tamaño..
Durante los siguientes pasos crearemos clases de ActionScript 3 que hacen que nuestro sitio web flash sea fluido. Todos nuestros símbolos de visualización mantendrán su alineación cuando se cambie el tamaño de Flash.
Las clases de ActionScript creadas en este tutorial se pueden reutilizar fácilmente en diferentes proyectos.
Como se muestra en la imagen a continuación, todos los elementos que flotan según el tamaño del navegador se denominarán "objetos fluidos".
Cada objeto fluido contendrá parámetros de alineación. Los parámetros almacenan los valores de x, y, x offset, y y offset del objeto para indicar cómo se alinea.
Asignar x e y a 0 hará que el objeto fluido se alinee con la esquina superior izquierda. Asignar x e y a 1 hará que el objeto fluido se alinee con la esquina inferior derecha. Por lo tanto, la asignación de valores de x e y entre 0 y 1 hará que el objeto flote a un porcentaje del ancho y la altura del navegador.
El desplazamiento X e Y compensan la posición de los objetos fluidos mientras se alinean. La compensación es útil cuando se posiciona un objeto cuyo punto de alineación no está en el centro. El offset también es útil para hacer márgenes en la alineación..
Cree un directorio llamado "FluidLayout" en el directorio de trabajo. Este directorio almacenará todas las clases relacionadas con las clases de diseño fluido..
Es un buen hábito colocar los archivos de clase de ActionScript en directorios por categoría. Por ejemplo, las clases de diseño fluido se colocarán en la carpeta "FluidLayout" en este caso.
Tenga en cuenta que todos los nombres de directorios, nombres de archivos y códigos distinguen entre mayúsculas y minúsculas.
Abra un nuevo archivo ActionScript llamado "FluidObject.as". Guarde este archivo ActionScript en el directorio "FluidLayout".
La clase FluidObject almacenará los parámetros de alineación de los símbolos y reposicionará los símbolos cuando el navegador cambie de tamaño..
Vamos a empezar a codificar el FluidObject.as ahora.
paquete FluidLayout / * Agregar clases de importación aquí * / clase pública FluidObject / * Declarar variables de instancia aquí * / / * Constructor de la clase * / función pública FluidObject (target: DisplayObject, paramObj: Object) / * Función que reposiciona el objeto supervisado * / función protegida reposition (): void / * función que se llama cuando se activa el evento RESIZE * / función protegida onStageResize (e): void
Agrega el siguiente código donde veas: / * Añadir clases de importación aquí * /
/ * clase necesaria en el cambio de tamaño Evento * / import flash.events.Event; / * clases necesarias para MovieClip y DisplayObject * / import flash.display. *;
Hay tres variables de instancia para esta clase:
También hay un configurador para "_param" para permitir el cambio de los parámetros de alineación. Agrega el siguiente código donde veas: / * Declarar variables de instancia aquí * /
/ * parámetros de alineación * / protected var _param: Object; / * objeto objetivo a monitorear * / protected var _target: DisplayObject; / * instancia de escenario del documento flash * / protegido var _stage: escenario; / * Setter para la alineación param * / public function param (valor: Object): void _param = value; this.reposition ();
El constructor inicializará el símbolo monitoreado de destino y almacenará los parámetros de alineación dados.
/ * Constructor de la clase * / función pública FluidObject (target: DisplayObject, paramObj: Object) / * Asigne las variables de instancia * / _target = target; _param = paramObj; _stage = target.stage; / * agregar controlador de eventos para el cambio de tamaño de la etapa * / _stage.addEventListener (Event.RESIZE, onStageResize); / * reposiciona el objeto con la configuración de alineación aplicada * / this.reposition ();
La función de reposicionamiento se encarga de calcular la nueva posición x / y del objeto de fluido monitoreado.
/ * Función que reposiciona el objeto monitoreado * / función protegida reposition (): void / * obtiene el ancho y alto actuales del documento flash * / var stageW = _stage.stageWidth; var stageH = _stage.stageHeight; / * actualiza los valores x e y del objeto supervisado * / _target.x = (stageW * _param.x) + _param.offsetX; _target.y = (stageH * _param.y) + _param.offsetY;
La función onStageResize es un controlador de eventos al que se llama cuando el navegador cambia de tamaño..
/ * Función que se llama cuando se activa el evento RESIZE * / función protegida onStageResize (e): void / * reposiciona el destino * / this.reposition ();
La clase terminada FluidObject se termina en este paso.
paquete FluidLayout / * clase necesaria en el cambio de tamaño Evento * / import flash.events.Event; / * clases necesarias para MovieClip y DisplayObject * / import flash.display. *; clase pública FluidObject / * parámetros de alineación * / protected var _param: Object; / * objeto objetivo a monitorear * / protected var _target: DisplayObject; / * instancia de escenario del documento flash * / protegido var _stage: escenario; / * Setter para la alineación param * / public function param (valor: Object): void _param = value; this.reposition (); / * Constructor de la clase * / función pública FluidObject (target: DisplayObject, paramObj: Object) / * Asigne las variables de instancia * / _target = target; _param = paramObj; _stage = target.stage; / * agregar controlador de eventos para el cambio de tamaño de la etapa * / _stage.addEventListener (Event.RESIZE, onStageResize); / * reposiciona el objeto con la configuración de alineación aplicada * / this.reposition (); / * Función que reposiciona el objeto monitoreado * / función protegida reposition (): void / * obtiene el ancho y alto actuales del documento flash * / var stageW = _stage.stageWidth; var stageH = _stage.stageHeight; / * actualiza los valores x e y del objeto supervisado * / _target.x = (stageW * _param.x) + _param.offsetX; _target.y = (stageH * _param.y) + _param.offsetY; / * Función que se llama cuando se activa el evento RESIZE * / función protegida onStageResize (e): void / * reposiciona el objetivo * / this.reposition ();
Comience un nuevo documento Flash con ActionScript 3.0 y llámelo "website.fla". A continuación, establezca la clase de documento como "Sitio web".
Si aparece un cuadro de diálogo con el mensaje: "No se pudo encontrar una definición para la clase de documento en la ruta de clase, ..." simplemente haga clic en "Aceptar" para omitirla. Vamos a crear esa clase después de dibujar los símbolos gráficos..
La imagen de fondo estará oscura en este tutorial (junté mi propia imagen de espacio usando Photoshop). Por lo tanto, el color de fondo del documento flash debe configurarse en negro. Haga clic en Modificar> Documento para abrir el cuadro de diálogo Propiedades del documento y cambiar el color de fondo..
Habrá 5 símbolos flash en el escenario:
Vamos a hacer el título primero. El objetivo de este tutorial es crear símbolos flotantes en el diseño fluido en lugar de crear componentes de sitios web de lujo. Los símbolos solo contendrán un campo de texto que indique el propósito solamente.
Para el símbolo del título, hay un fondo semitransparente. Para adaptarse a diferentes anchos del navegador, el ancho del fondo debe ser lo suficientemente grande.
Una vez que haya terminado de dibujar el símbolo, haga clic en Modificar> Convertir en símbolo (F8). Haga clic en el botón "Avanzado" para mostrar la configuración detallada del símbolo.
Haga clic en "Exportar para ActionScript" para permitir que ActionScript acceda a este símbolo. A continuación, busque el campo "Clase" en el cuadro de diálogo y establezca el valor en "Título" para el símbolo del título. Esto significa que hemos asignado una nueva Clase llamada "Título" a este símbolo. Podemos usar este símbolo más adelante en el ActionScript..
Recuerde nombrar su símbolo para que sea fácil de reconocer antes de hacer clic en Aceptar. Si aparece un cuadro de diálogo con el mensaje "No se pudo encontrar una definición para esta clase en la ruta de clase, ..." nuevamente, simplemente haga clic en "Aceptar" para omitirla. Ya que no agregaremos ningún comportamiento al símbolo, dejaremos que Flash cree una clase vacía para nosotros.
Elimine la instancia del símbolo "título" en el escenario porque será creada por ActionScript más adelante.
Usaremos el mismo método para dibujar "fondo", "menú", "contenido intermedio" y "pie de página". El nombre de clase de estos símbolos será Fondo, Menú, Medio y Pie de página en consecuencia.
La imagen de fondo se puede descargar desde los archivos de origen. Otros símbolos son solo campo de texto.
Crea un archivo ActionScript y se llama "Website.as"; este archivo de clase debe guardarse en el mismo directorio que el archivo website.fla.
Esta clase también debe compartir el mismo nombre que el establecido en la Clase de documento (consulte el Paso 12). Por ejemplo, la Clase de documento "Sitio web" se refiere a "Sitio web.as" en el mismo directorio. Esta clase de ActionScript se cargará justo después de cargar el flash..
Aquí está el esqueleto de la Clase de Documento:
paquete import flash.display. *; importar FluidLayout. *; El sitio web público de clase amplía MovieClip sitio web de función pública ()
paquete import flash.display. *; importar FluidLayout. *; El sitio web público de clase amplía MovieClip sitio web de función pública () / * Establecer el modo de escala del escenario * / stage.scaleMode = StageScaleMode.NO_SCALE; stage.align = StageAlign.TOP_LEFT; / * Agrega los símbolos al escenario * / var bg = new Background (); addChild (bg); título var = título nuevo (); addChild (título); var menu = new Menu (); addChild (menú); var middle = new Middle (); addChild (medio); var footer = nuevo footer (); addChild (pie de página); / * Aplicar la alineación al fondo * / var bgParam = x: 0, y: 0, offsetX: 0, offsetY: 0 nuevo FluidObject (bg, bgParam); / * Aplicar la alineación al título * / var titleParam = x: 0, y: 0, offsetX: 0, offsetY: 0 nuevo FluidObject (title, titleParam); / * Aplicar la alineación al menú * / var menuParam = x: 1, y: 0, offsetX: -menu.width - 20, offsetY: 20 new FluidObject (menu, menuParam); / * Aplicar la alineación al contenido * / var middleParam = x: 0.5, y: 0.5, offsetX: -middle.width / 2, offsetY: -middle.height / 2 new FluidObject (middle, middleParam); / * Aplicar la alineación al pie de página * / var footerParam = x: 1, y: 1, offsetX: -footer.width - 10, offsetY: -footer.height -10 new FluidObject (footer, footerParam);
Abra website.fla en Flash y verifique nuevamente antes de enviar un mensaje de texto a la película.
No es necesario colocar los símbolos en el escenario porque el sitio web creará instancias de símbolos de la biblioteca utilizando sus nombres de clase. Los nombres de clase de vinculación de los símbolos deben ser correctos para que la secuencia de comandos los utilice. El nombre de la clase de vinculación se puede verificar en el panel de la biblioteca.
Haga clic en Control> Text Movie o Ctrl (Cmd) + Enter para probar el sitio web flash.
Intente redimensionar la ventana y verifique si todos los objetos se están reposicionando a la alineación correcta.
Cada FluidObject ahora necesita tener valores específicos de las propiedades x, y, offsetX y offsetY. Se creará una nueva Clase en los próximos pasos para simplificar el código futuro al agregar nuevos objetos fluidos.
Abra un nuevo archivo ActionScript llamado "SimpleFluidObject.as". Guarde este archivo dentro del directorio "FluidLayout" porque esto es parte del paquete FluidLayout.
Este archivo extiende la clase FluidObject para que brinde una alineación simple al usar nombres como TOP, MIDDLE, BOTTOM_RIGHT en lugar de especificar las propiedades x, y.
Aquí está el esqueleto de la clase:
paquete FluidLayout import flash.events.Event; importar flash.display. *; la clase pública SimpleFluidObject extiende FluidObject función pública SimpleFluidObject (target: DisplayObject, paramObj: Object)
paquete FluidLayout import flash.events.Event; importar flash.display. *; la clase pública SimpleFluidObject extiende FluidObject función pública SimpleFluidObject (target: DisplayObject, paramObj: Object) / * Indica a la clase padre que inicie el constructor * / super (target, paramObj); / * asigna alineación y valor de margen por los parámetros del constructor * / var alineación = paramObj.alignment; var margin = paramObj.margin; / * Preseleccione la alineación y el valor del margen si es necesario * / if (alineación == no definida) alineación = "MEDIO"; if (margen == indefinido) margen = 0; / * convertir la alineación (por ejemplo, "TOP", "BOTTOM_RIGHT") a x, y, offsetX y offsetY * / var params = new Object (); interruptor (alineación) caso "TOP_LEFT": params = x: 0, y: 0, offsetX: margen, offsetY: margen; descanso; caso "TOP": params = x: .5, y: 0, offsetX: -target.width / 2, offsetY: margin; descanso; caso "TOP_RIGHT": params = x: 1, y: 0, offsetX: -target.width - margin, offsetY: margin; descanso; caso "IZQUIERDA": params = x: 0, y: .5, offsetX: margen, offsetY: -target.height / 2; descanso; caso "MEDIO": params = x: .5, y: .5, offsetX: -target.width / 2 - margen / 2, offsetY: -target.height / 2 - margen / 2; descanso; caso "DERECHA": params = x: 1, y: .5, offsetX: -target.width - margen, offsetY: -target.height / 2; descanso; caso "BOTTOM_LEFT": params = x: 0, y: 1, offsetX: margin, offsetY: -target.height - margin; descanso; caso "BOTTOM": params = x: .5, y: 1, offsetX: -target.width / 2, offsetY: -target.height - margen; descanso; caso "BOTTOM_RIGHT": params = x: 1, y: 1, offsetX: -target.width - margin, offsetY: -target.height - margin; descanso; _param = params; / * reposiciona el objeto fluido a la posición correcta * / this.reposition ();
Consulte el archivo Website.as e intente usar el nuevo método de alineación para alinear los objetos fluidos.
El viejo método para aplicar la alineación al título:
/ * Aplicar la alineación al título * / var titleParam = x: 0, y: 0, offsetX: 0, offsetY: 0 nuevo FluidObject (title, titleParam);
El Nuevo Método para aplicar la alineación al Título:
var titleParam = alineación: "TOP_LEFT", margen: 0 nuevo SimpleFluidObject (title, titleParam);
Alineaciones disponibles:
Ahora la alineación fluida funciona en la "Película de prueba" en Flash IDE, pero hay una llave Punto para hacer que esto funcione en el navegador..
Abrir website.fla. Vaya a Archivo> Configuración de publicación y asegúrese de que HTML esté habilitado. Haga clic en la pestaña HTML y cambie la dimensión a "Porcentaje". Asegúrese de que el porcentaje esté establecido en 100 tanto en ancho como en alto.
Haga clic en "Publicar" para publicar el sitio web como archivos "website.swf" y "website.html"..
Ahora abra el archivo "website.html" con su editor de texto favorito y agregue el siguiente código en el encabezado. Añadiendo el código justo después de la la etiqueta sería una buena opción.
Estos estilos CSS eliminan la brecha entre el lado superior izquierdo del HTML y el archivo SWF.
Se puede aplicar un efecto de suavizado cuando el navegador cambia de tamaño para que los objetos se muevan a la posición correcta con un efecto de alivio..
Abra "FluidObject.as". Agregue las siguientes líneas después de "import flash.display. *;". Estas líneas importarán la clase de animación de interpolación para que el código pueda facilitar los objetos..
/ * clases necesarias para facilitar la animación * / import fl.transitions.Tween; importar fl.transitions.easing. *;
Luego encuentre las siguientes líneas en el archivo "FluidObject.as". Están dentro de la función de "reposición"..
_target.x = stageW * _param.x + _param.offsetX; _target.y = stageH * _param.y + _param.offsetY;
Reemplácelos con el siguiente código:
/ * establece la duración de la animación de aceleración (segundos) * / var duration = 0.5; / * declara el nuevo valor de X / Y * / var newX = _target.x; var newY = _target.y; / * calcula el nuevo valor de X basado en el ancho de la etapa * / if (_param.x! = undefined) newX = (stageW * _param.x) + _param.offsetX; / * calcula el nuevo valor de Y en función de la altura de la etapa * / if (_param.y! = undefined) newY = (stageH * _param.y) + _param.offsetY; / * Dice flash para interpolar el objeto de destino a la nueva posición X / Y * / new Tween (_target, "x", Strong.easeOut, _target.x, newX, duration, true); nuevo Tween (_target, "y", Strong.easeOut, _target.y, newY, duration, true);
Prueba la película, los objetos se suavizarán cuando el navegador cambie de tamaño
Acabamos de crear dos clases que están a cargo de los objetos de fluidos flotantes. También creamos un ejemplo para alinear diferentes objetos en el escenario utilizando las clases. Este ejemplo es solo un caso de muestra; Puedes usar tu imaginación para jugar con las alineaciones. Por ejemplo, un símbolo puede ser interactivo y su alineación puede cambiar de arriba a abajo cuando el usuario hace clic en él.
La estructura de archivos debe ser la misma que se muestra a continuación una vez que finalice este tutorial. Específicamente, FluidObject.as y SimpleFluidObject.as deben estar en el directorio "FluidLayout" para que funcione.
Disfruta de la distribución fluida!
Accentsconagua