Gracias al posicionamiento mediante CSS es posible controlar el lugar donde aparecerá cada uno de los elementos de nuestras páginas en la pantalla de los visitantes. Si bien con propiedades como float es posible acomodar con facilidad cada capa en un costado de la pantalla, hay una propiedad muy interesante que nos permite superponer distintos contenidos entre sí y de esta forma lograr un complejo efecto visual sobre animaciones, imágenes u otro tipo de contenidos que queramos desplegar.

Es por eso que hoy, en un nuevo tutorial que les trae CLH, estaremos viendo en detalle la propiedad z-index de CSS, la cual nos permite lograr lo antes descrito.

El detalle, como siempre, después del salto.

Cómo superponer contenido sobre una animación en Flash

Si bien lo que veremos hoy es bastante más generalizado que ‘Superponer contenido sobre una animación en Flash’, hemos decidido denominarlo de esa forma ya que es uno de los problemas más comunes que llevan a la profundización de esta propiedad. Sin embargo, lo expuesto hoy puede aplicarse para todo tipo de contenido, incluyendo imágenes, textos o menús de navegación entre otras cosas.

Con eso claro, vamos con lo primero:

Implementos necesarios:

1. Opcionalmente un editor Web. De cualquier forma de no utilizar alguno, se puede realizar el procedimiento mediante bloc de notas.

Antes de entrar de lleno al procedimiento, es bueno hacer una aclaración de conceptos. Como mencionábamos en la introducción de este tutorial, estaremos hablando de y trabajando con la propiedad z-index de CSS. Así que para los curiosos (como Topher) y los preguntones (como Dexter):

¿Qué es z-index?

La pregunta de la olla millonaria de caldos mag.. sin propaganda mejor clave de todo este asunto. Si nos remontamos a épocas antiguas, por alla por los tiempos estudiantiles de cada uno y hacemos un pequeño repaso por matemáticas, o más especificamente geometría análitica, es posible recordar aquellos temibles contenidos sobre el plano cartesiano, rectas, pendientes y demases.

Si hacemos más memoria aún, recordaremos que un factor común de esos contenidos era cuando nos hablaban sobre los puntos en el espacio y los ejes a los que pertenecían. Esos ejes, al menos en ese momento, eran principalmente 2: el eje x, el cual representaba la horizontalidad y el eje y, el cual representaba la verticalidad. Para los que le hayan hecho la cruz a la geometría posterior a eso.. (la cruz.. intersección de 2 puntos.. humor matemático y juego de palabras, que lindo ¿no?) y se hayan perdido el resto de la historia, existe además un tercer eje, el cual es conocido como eje z y representa la profundidad en el espacio. Esto se relaciona directamente a las 3 dimensiones en las que vivimos y vemos los seres humanos: horizontal (x), vertical (y), profundidad (z). Esta es la parte donde todos decimos “Oooohhhh” al ver como todo está conectado entre sí.

Computacionalmente el asunto no es muy diferente. La pantalla en donde vemos todo tipo de contenidos, desde recursos multimedia, archivos, aplicaciones, juegos, etc. opera con la lógica del plano, teniendo un eje horizontal y uno vertical, los cuales son representados por las resoluciones de pantalla (por ej. al hablar de una resolución de 1024×768 pixeles, estamos diciendo que en la pantalla vemos 1024 pixeles horizontalmente y 768 de forma vertical). A su vez acá también tenemos un plano z de profundidad, el cual si bien a simple vista no notamos, si existe. La mejor prueba para notarlo es ver que al momento de abrir una aplicación, el escritorio no desaparece, solo queda parcial o totalmente oculto por el nuevo contenido que se superpuso.

En diseño Web, o más especificamente en CSS, podemos manejar el tema de las profundidades de los contenidos que estamos desplegando. Esto lo hacemos mediante la propiedad z-index, la cual se encarga de asignar una posición de profundidad a cada contenido de acuerdo al valor que le demos. A mayor valor asignado a esta propiedad para un contenido, se irá superponiendo a cada contenido restante que tenga un valor menor. Al final, todos los contenidos irán formando una pila, de menor a mayor.

Para que un elemento pueda hacer uso de la propiedad z-index, debe siempre estar posicionado, ya sea absoluta o relativamente. Si el elemento no está posicionado, no podrá usarse la propiedad. Adicionalmente, si 2 elementos comparten el mismo z-index se posicionarán de acuerdo al orden que le hayamos dado en el documento HTML.

Con esa larga explicación lista, podemos empezar a trabajar en nuestro proyecto de hoy y ver como resulta todo:

Procedimiento:

Lo que haremos hoy será bastante simple. Crearemos un documento HTML en donde añadiremos un pequeño encabezado, el cual estará compuesto de una animación flash (en el fondo) y una barra en imagen (superpuesta a la animación) para luego insertar un menú de navegación. Junto a eso añadiremos un pequeño botón como detalle. Este botón podrá ser manipulado tal como si fuese una imagen normal, es decir, añadiéndole un enlace total o por mapa, viendo sus propiedades, copiando la ruta, etc. Lo mismo corre para el menú de navegación.

Entonces basicamente contaremos con 3 capas: una para la animación, otra para nuestra barra y menú de navegación y finalmente una que irá sobre todas las anteriores con el botón.

1.- Utilizaremos los siguientes elementos:

Una animación de fondo:

Un botón (para hacer botones, los invitamos a revisar este tutorial donde hemos cubierto el proceso por completo):

Y adicionalmente hemos creado una barra de color blanco (la cual por razones obvias no pondremos acá) de 1×60 px, la cual montaremos sobre la animación y modificaremos vía CSS.

Para no extender en demasía este tutorial, el menú de navegación lo incluiremos como texto plano, con el fin de ubicar donde iría el código final y como se posiciona en términos de profundidad con respecto a los otros elementos. Empezar a hacer el menú desde cero acá probablemente nos llevaría un buen rato y lo hemos visto en otros tutoriales, así que lo haremos de esta forma.

2.- Con nuestros elementos listos, prepararemos nuestro CSS, el cual definirá las propiedades a aplicar a cada parte del contenido:

body{
margin: 0;
}

#uno{
position: absolute;
z-index: 1;
width:100%;
}

#dos{
position: absolute;
z-index: 2;
background-image: url(barra.png);
background-repeat: repeat;
width: 100%;
height: 60px;
opacity: .50;
-moz-opacity: .50;
filter: alpha(opacity=50);
margin-top: 10px;
font-weight: bold;
text-indent:20px;
}

#tres{
position:absolute;
z-index: 3;
margin-left:450px;
}

Entonces ordenemos el cuento:

• Cada id declarado (uno, dos y tres) corresponden a uno de los elementos que agregaremos (animación en el uno, barra y menú de navegación en el dos y botón en el tres). Los tres han sido posicionados de forma absoluta y se les ha asignado un z-index correlativo con el fin de que la animación salga al fondo, sobre ella la barra y el menú de navegación y sobre todos ellos el botón.
• A su vez, la barra se ha agregado como fondo en el id dos, con el fin de escribir el texto sobre esta imagen de fondo y así poder aprovechar una imagen pequeña (1×60 px) y repetirla a lo largo del encabezado.
• Adicionalmente hemos utilizado las propiedades opacity, -moz-opacity y filter para agregar transparencia a la barra y que no se vea solida en blanco, si no que nos permita ver el resto de la animación que está en el fondo.
• Todo lo demás lo hemos acomodado mediante márgenes e indentaciones de texto para acomodar de acuerdo al diseño que teníamos en mente.

Ahora ojo, hemos hecho todos los posicionamientos con medidas fijas en pixeles, para efectos de demostración. Al momento de hacer diseños definitivos es bueno adaptarse a como se ha diseñado el sitio completo, especialmente si son diseños líquidos cuyas medidas están en porcentajes.

3.- Con el CSS listo, ahora crearemos un archivo HTML, en donde insertaremos div’s con el respectivo contenido, los cuales tomarán propiedades del CSS y se posicionarán como lo teníamos pensado originalmente. Entonces:

<html>
<head>
<title>Ejemplo de superposicion</title>
<link href="estilo.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="uno">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/
swflash.cab#version=7,0,19,0" width="700" height="157">
<param name="movie" value="fondo.swf" />
<param name="quality" value="high" />
<param name="wmode" value="transparent" />
<embed wmode="transparent" src="fondo.swf" quality="high"
pluginspage="http://www.macromedia.com/go/getflashplayer"
type="application/x-shockwave-flash" width="700" height="157"></embed>
</object>
</div>
<div id="dos"><h2>Inicio | Quienes Somos | Contacto</h2></div>
<div id="tres"><img src="boton.png" /></div>
</body>
</html>

Guardamos todo y vemos en nuestro navegador favorito para observar el resultado final:

Como podemos ver en la imagen anterior, tenemos nuestra animación hecha en Flash en el fondo. Sobre ella se ha agregado la barra que creamos (repetida y con la opacidad alterada vía CSS). Sobre la barra nuestro menú de navegación y sobre todo ello el botón. Se ha ordenado tal como los valores que hemos dado a cada z-index.

Simple ¿no?. Así que en resumen:

¿Qué hemos aprendido hoy?

• Mediante z-index podemos manejar la profundidad de varios elementos, aún cuando compartan el mismo espacio físico.
• Para utilizar z-index, debemos posicionar los elementos de forma relativa o absoluta.
• 2 elementos pueden compartir el mismo z-index y serán mostrados de acuerdo al orden que se agregan.
• Podemos superponer todo tipo de contenidos, así que a animarse y probar.
• La geometría analítica está relacionada a como vemos y vivimos los humanos, y todo eso a como se grabó Avatar.

Y con eso damos todo por terminado hoy, recordándoles que como siempre, este tutorial ha sido:

Cualquier duda o comentario que tengan, no sean tímidos, los invitamos a dejarnos unas líneas a continuación. Somos buena onda para responder, lo prometemos

Esperamos que este tutorial haya sido de utilidad para Uds.

Muchas gracias por leer y será hasta una próxima oportunidad.

Staff CLH

Hoy, en esta tercera parte de nuestra saga de tutoriales para dominar Flash, vamos a enseñar lo que se conoce como “Interpolación de formas”, que dicho en palabras simples, es transformar una figura o letras, en otra figura o letras.

Para ver como lo hago, vamos despues del salto.

Como dominar Flash parte 3

Nota: Antes que todo, recomendamos fuertemente haber leído la Parte 1 y Parte 2 de esta saga, para conocer los materiales necesarios y alguna referencia que se pueda hacer.

Con esto claro, vamos a lo nuestro.

Procedimiento:

1.- Creamos un nuevo documento, esta vez no usaremos símbolos, directamente crearemos un rectangulo en la esquina superior izquierda, el color no influye, asi que lo decidimos al azar.

2.- Vamos al fotograma 10 e insertamos un fotograma clave, esto lo pueden hacer con F6.

Click para agrandar

3.- Ahora vamos al fotograma 45 e insertamos un fotograma clave en blanco, esto lo pueden hacer con F7.

4.- En este nuevo fotograma, en la esquina inferior derecha escribimos el texto “Como lo hago”, la fuente es a elección.

5.- Con el texto seleccionado, tenemos que “Separar” para eso presionamos Control+B 2 veces, este paso es muy importante.

6.- Ahora vamos al fotograma 80 y presionamos F6, como ya se explico esto es para crear fotogramas clave.

7.- Volvemos al fotograma 10, le damos click derecho y seleccionamos “Crear interpolación de forma” se creara una flecha que une el fotograma 10 con el 45.

Click para agrandar

8.- Si presionamos Control + Enter, veremos nuestra animación, veremos como el rectangulo se transforma en el texto y tenemos nuestra Interpolación lista!!

Pronto veremos como utilizar en conjunto lo hasta ahora aprendido y como insertar esto en una pagina web.

Como siempre este tutorial fue realizado por el equipo de comolohago.cl y por lo tanto cuenta con nuestro sello de garantía.

Por ahora,

Me despido.

Staff comolohago.cl

]]> http://www.comolohago.cl/2008/11/18/como-dominar-flash-parte-3/feed/ 1 http://www.comolohago.cl/2008/11/06/como-dominar-flash-parte-2-2/ http://www.comolohago.cl/2008/11/06/como-dominar-flash-parte-2-2/#comments Thu, 06 Nov 2008 16:52:30 +0000 Jorge Nitales http://www.comolohago.cl/?p=225

No hay plazo que no se cumpla ni deuda que no se pague, o algo así cita un dicho conocido, la cosa es que ahora viene la segunda parte de esta serie de tutoriales.

Para ver que aprenderemos esta vez y como lo haremos, vamos después del salto.

Como dominar Flash parte 2

Nota: Primero que todo, es necesario haber leído la Parte 1 de esta serie para saber que necesitamos y entender un par de referencias que haremos.

Bueno, aclarado esto, vamos a lo nuestro, hoy aprenderemos a hacer botones en flash, pero no botones de pantalon ni camisa, si no que botones para poder linkear un archivo o página desde flash. Vamos a la acción.

Procedimiento:

1.- Creamos un archivo nuevo, por ahora usaremos Archivo Flash (AS 2.0), AS es ActionScript, ya explicaremos eso en futuras partes. Bien creamos el archivo.

2.- Al igual que en el tutorial anterior, creamos un simbolo en la biblioteca, pero esta vez, cuando nos aparezca esta ventana:

En tipo seleccionamos “Botón” como se puede ver en la imagen.

3.- Si se fijan, al seleccionar esto como “Tipo” la linea de tiempo toma otra forma:

Ahora, en vez de estar divida por fotogramas, se divide en estados, que son cuatro:

Reposo: Cuando el mouse no esta sobre el botón.

Sobre: Cuando el mouse esta sobre el botón.

Presionado: Cuando uno hace click sobre el botón.

Zona Activa: Cuando el botón esta activo.

Con esto podremos lograr que nuestro botón tome distintos colores y/o formas segun su estado, claro que por una cosa de estetica, no es muy recomendable que el botón cambie su forma.

Hoy iniciamos una nueva serie. Esta vez llegamos con uno de los tutoriales más pedidos del ultimo tiempo, Flash.

Aprender a dominar este programa no es algo de un solo tutorial, es por eso que vamos a crear esta serie y en esta primera parte enseñaremos a hacer una animación simple. Para ver como lo hago, vamos después del salto.

Como crear un animación en Flash Parte 1

Materiales:

- Flash (En Como lo hago usamos la versión CS4, pero lo que enseñaremos en esta ocasión funciona con versiones anteriores, claro que pueden haber pequeñas variaciones con los menús, para descargar una versión de prueba, pueden conseguirla aquí)

Procedimiento:

1.- Al abrir flash, nos preguntará que tipo de documento queremos crear, aparecerá una ventana como esta:

Para este caso seleccionamos Archivo de Flash AS 3.0

2.- Ok, ahora que ya estamos dentro de Flash, empezaremos a crear nuestra animación, lo más simple es dibujar directamente, pero para empezar a acostumbrarnos, usaremos la biblioteca, pero ¿Que es la biblioteca?:

La biblioteca es una utilidad de Flash, en la cual puedes ir guardando objetos para utilizarlos más tarde, para este caso resulta innecesario, pero a futuro se vuelve muy útil, así que para acostumbrarnos desde ya, vamos a ir a Ventana->Biblioteca, en la parte de abajo de la ventana de Biblioteca aparecen varios botones, entre ellos el botón de Agregar Símbolo:

3.- Al presionar este botón, lo que ahora dibujen quedará guardado en la biblioteca. Lo que haremos es crear una esfera con la herramienta óvalo, al mantener presionada la tecla de Mayuscula (Shift) podrán hacer un círculo perfecto.

4.- Ahora hay que transformar ese círculo en una esfera y esto lo haremos con un efecto de coloración, para esto van a Ventana->Color, y aparecerá una ventana como esta:

Si se fijan, está seleccionado el bote de pintura y en “Tipo” se cambio la opción a “Radial”, con esto configurado, cerramos la ventana de color y seleccionamos la herramienta “Bote de Pintura” (La seleccionamos en la barra de herramienta, no en la ventana de color) y pintamos sobre el círculo que habíamos dibujado, debe quedar algo así:

De el lugar donde hacen click con el bote de pintura es de lo que dependerá donde aparecerá el efecto de luz.

5.- Ahora que ya tenemos creado nuestro objeto en la biblioteca, hacemos click en Escena 1, arriba a la izquierda, con esto volvemos a la animación en sí, arrastramos  el objeto que recién creamos desde la biblioteca, como verán la misma esfera que habiamos dibujado recién ahora la tenemos en nuestra animación.

6.- Moveremos la esfera para que quede al centro y completamente a la izquierda.

7.- Vamos a la Línea de tiempo, como verán son varios rectangulos verticales, cada uno de estos es un fotograma, vamos al fotograma 30, click derecho e Insertar Fotograma Clave.

Click para agrandar

8.- Con ese fotograma seleccionado, movemos nuestra esfera completamente hacia la derecha y con la herramienta de transformación libre la encojemos de tamaño.

9.- Ahora en el fotograma 60, click derecho Insertar Fotograma Clave, vamos al fotograma 1, click derecho copiar, y lo pegamos en el fotograma 60, tomamos la esfera y la movemos ligeramente arriba y a la derecha.

10.- Ahora en la ventana donde esta la linea de tiempo, donde dice Capa 1, click derecho y seleccionamos Añadir guía de movimiento, se creara una nueva línea de tiempo.

11.- Nos colocamos en el primer fotograma de esta nueva línea y creamos un óvalo, pero esta vez sin relleno, así:

12.- Seleccionamos el fotograma 30, click derecho y seleccionamos Insertar Fotograma clave en blanco.

13.- Seleccionamos el fotograma 29, con la herramienta lazo, cortamos ese óvalo por la mitad, así:

14.- Ahora vamos nuevamente al fotograma 30 y pegamos la parte del óvalo que habiamos cortado.

15.- Tenemos que hacer calzar las 2 partes para que vuelvan a formar el óvalo, esto lo hacemos para que la animación sepa en que dirección ir, si no lo hacemos, siempre tendrá 2 opciones. Para hacerlo calzar, lo podemos hacer al ojo, o usar la herramienta “Editar varios fotogramas”, que es un botón en la parte inferior de la ventana de línea de tiempo, si usamos esta opción, luego de hacer calzar el óvalo, debemos deseleccionarla.

16.- Ahora seleccionamos todos los fotogramas de la línea de tiempo, pero solo los de la capa uno, no los de la línea de tiempo. Verán que aparecerán flechas entre los fotogramas claves, con esto se crea la animación, pero solo lo hará en linea recta.

17.- Para que tome la dirección que nosotros queremos, vamos al primer fotograma de la guia de movimiento y movemos la esfera para que se conecte con la línea, lo sabrán porque es como que se unieran con un imán, ahora hacemos lo mismo en el fotograma 30 y 60.

18.- Vamos a Control->Probar Pelicula para ver nuestra animación, si todo esta en orden vamos a Archivo->Exportar->Exportar Pelicula, le damos un nombre y seleccionamos la carpeta donde la queremos guardar y ya tenemos nuestra animación flash!!

Como siempre este tutorial ha sido probado, desarrollado y documentado por el equipo de Como Lo Hago, por lo que cuenta con nuestro Sello de garantía. Cualquier duda o consulta, pueden realizarlas a continuación.

Por ahora,

Me despido.

Staff Comolohago.cl

]]> http://www.comolohago.cl/2008/10/30/como-crear-un-animacion-en-flash-parte-1/feed/ 3