Mouse
Miércoles 30 de septiembre de 2009
La Tercera
archivo | mouse en tu mail | diccionario | talleres | rss
 
Estás aquí: Mouse / Taller / El arte de los sitios Web parafernálicos

Extendiendo nuestro sitio Web
Secciones
* Ámalo u ódialo
* Una portada y secciones
* Botonera y sus acciones
* Extendiendo nuestro sitio

Okey. Seguimos en la Escena 1 (Portada). Selecciona los cuatro botones haciendo clic sobre ellos mientras mantienes pulsado CTRL en el teclado o bien dibujando un rectángulo imaginario alrededor con el cursor negro. Una vez que los tengas (estarán rodeados de una franja celeste), cópialos desde el menú Edición.

Ahora cambia a la Escena 2. Crea una capa nueva, selecciona el primer fotograma (clave vacío) y ve al menú Edición > Pegar in Situ. Voila! Han aparecido nuestros cuatro botones, incluso con la programación que ya habíamos ingresado. Ve a las Escenas 3 y 4, donde también crearemos capas y procederemos a pegar los botones.

NOTA: Sí, puedes usar CTRL+C para copiar los botones, pero no, no puedes usar CTRL+V para pegarlos. Si lo haces los botones aparecerán en la mitad del área de trabajo, sin conservar su posición original. Por esto ocupamos el comando especial, Pegar in Situ desde el menú Edición.

Por último, pulsa CTRL+ENTER y prueba nuestra película. El sitio Web será totalmente navegable.

Decepcionantemente simple de crear, ¿eh? Vamos a darle un pequeño toque deshabilitando el botón que llama a su propia sección en cada una de ellas. Es decir, en la portada anularemos el botón amarillo, el botón rojo en la sección roja y así sucesivamente.

Volvamos a la Escena 1 (Portada) y seleccionemos el botón amarillo. En el inspector de propiedades, cambia su comportamiento a Gráfico, con lo que evitaremos que siga siendo pulsable. Flash te advertirá que perderás el ActionScript de ese botón. Dile que no importa ;)

Para completar el efecto, en el mismo inspector ve al menú Color > Alfa y disminuye su porcentaje de opacidad al 50%.

Luego, ve a la Escena 2 (sección roja), elige el botón correspondiente y sigue el mismo proceso. Repítelo para las secciones verde y azul.

Ahora los mismos botones marcarán en qué sección se encuentra el usuario.

A partir de aquí, tú mismo puedes ir agregando elementos al sitio Web. Por ejemplo, puedes usar los conocimientos del primer tutorial para incluir animaciones en cada sección, o quizá nuevos botones que lleven a enlaces externos así como otros elementos.

Una observación: en el caso de incluir animaciones, puede que requieras cambiar la instrucción de los botones de gotoAndStop (ir y detenerse) a gotoAndPlay (ir y reproducir). De esta forma la película no se detendrá en el primer fotograma de cada escena, sino que seguirá trabajando hasta encontrarte con un fotograma clave que contenga una instrucción "stop();" (como hicimos en la primera escena).

Sigue experimentando. Explora la Internet y pregúntate cómo se hacen aquellos efectos que tanto llaman tu atención o las interacciones más complejas. La red es un libro abierto y tu curiosidad la mejor guía para saber dónde seguir aprendiendo. ¡Suerte!

Archivos para descargar (formatos Flash MX 2004 / Flash 8):

Sitio Web (tamaño reducido: 450 x 360 pixeles) (FLA)

 
Portada Mouse.cl Subir
Anterior

Mouse Digital Email: mouse@latercera.cl / Créditos / Por favor lea nuestros Términos y Condiciones de Uso / Todos los derechos reservados Consorcio Periodístico de Chile S.A. / Este sitio es parte de la red Terra Networks Chile S.A.