Cursos de Diseño Web en Rosario. PHP y Mysql. Autocad

Cursos de Diseño Web en Rosario. PHP y Mysql. Autocad

Área de Alumnos.
Home Alumno
2Studio > /aulas/clase.php
Mi Perfil
Bienvenido al área de alumnos Mudry
Download Apunte
Consultas
Links
Software
Apuntes
- Si no es Germán Mudry por favor haga [ click aquí ]
Ejercitación Adicional
Autoevaluación
Imprimir Apunte
faqs
Comportamientos.
Los comportamientos son ACCIONES que se lanzan cuando un usuario produce determinados EVENTOS. Las acciones son códigos javascript ( que los
muchachos de macromedia gentilmente te regalan ) y los eventos pueden ser mover el mouse, hacer click, cargar una página, etc.
Veamos algunos comportamientos que podemos aplicarles a las capas.
Tal vez dos de los mas usados sean, mostrar y ocultar capa y drag ( arrastrar ) layers, como para crear menús desplegables. Nosotros vamos a usar una
herramienta mucho mejor para hacer esto que es DHTML Menú.
Nota: es algo saludable darle un nombre a cada una de las capas que tenga en mi documento, para saber siempre con que capa estoy trabajando, sino por
defecto dreamweaver las nombra Layer1, Layer2, etc. algo que es confuso a la hora de aplicar algún comportamiento.
Método genérico para insertar comportamientos. Desde la paleta Behaviors o Comportamientos y haciendo click en el +
Drag Layers.
Drag layer significa arrastrar capa... presiono sobre la capa con el mouse y manteniendo la muevo por toda la pantalla ( o especifico un área de
desplazamiento, luego veremos ).
Para aplicar esta acción debo seleccionar la capa, ir a la paleta de comportamientos e indicar ( haciendo click en
y seleccionar Drag layer. Me aparecerá
una ventana igual a ésta:
veamos que tenemos acá:
Layer: nombre de la capa a la cual le voy a aplicar el comportamiento.
Movimiento: puede ser irestricto... moverla capa en cualquier dirección o restringirlo a sobre área determinada.
Drop Target: captura la posición de la capa dentro de mi documento. ( Puedo no indicar nada si no quiero el efecto de volver )
Snap: distancia desde la cual quiero que la capa vuelva sola a su lugar de origen.
fácil no ? !... veamos la ventana de avanced... faaaa ! suena importante.. no se sienten Ingenieros en Sistemas, al usar esto ?
Drag handle: área de la capa en la cual quiero que tenga efecto el evento.
While Dragging: Si deseo que la capa quede sobre las otras luego de soltar el mouse.
Call JavaScript: para especificar código personal
When Dropped Call JavaScript: ídem anterior, pero para el caso de haber activado la opción dropped en la ventana basic.
Veamos un ejemplo de arrastrar capas con un pequeño rompecabezas.
Imagen completa.
Pensemos éste ejercicio no solo como la forma de aprender a usar capas y aplicarles un determinado comportamiento, sino como un juego de rompecabezas
que quiero hacer y ofrecer.
Entonces, lo que quiero lograr es: cuando se cargue la página voy a mostrar una imagen completa ( formada por las 4 piezas ), un texto explicativo del
funcionamiento del juego y una palabra que diga comenzar. Cuando hagan click en comenzar, voy a ejecutar una animación que desordene todas las piezas
sobre la pantalla y me muestre un fondo donde reubicarlas. Luego cuando arrastre una capa y la aproxime a 15 píxeles de su posición correcta y la suelte, ésta
se va a terminar de ubicar sola. Cuando termine de ordenar todo, mi rompecabezas quedará terminado.
PD: Sería interesante que cuando termine aparezca un cartel que diga " felicitaciones ! no era tan difícil ! "... pero esto no es algo que se pueda hacer
aplicando comportamientos, sino programando en jscript... y eso escapa al objetivo de este curso.
Consideraciones Iniciales.
Analicemos un poco... debo mostrar la imagen terminada, todo rompecabezas muestra cual es la imagen que hay que armar... si lo divido en 4 partes, como
en éste ejercicio no es grave, pero si tengo 50 o 100 piezas ?
Este comienzo lo puedo hacer mostrando una imagen chicha como la que tengo arriba... o mucho mas simpático, aplicando una línea de tiempo que me
desordene las piezas en toda la pantalla, si lo hago así, la animación se debe producir ante un evento onClick y sobre un texto que diga " comenzar ! " por
ejemplo.
PD: Los eventos en realidad pueden ser varios, onClick, onMouseDown, on MouseOver, onKeyPress... algunos serán mejores que otros, dependiendo el caso.
Si divido la imagen en 4... tengo cuatro capas, debería agregar una capa más para ubicar un fondo imaginario con líneas suaves que indiquen en que parte de
la pantalla tienen que armar la imagen final.
Paso x Paso.
Lo primero que debería hacer es agarrar lápiz y papel, ya que las capas deben estar ubicadas en una posición exacta dentro de la pantalla. Entonces dibujaría
un cuadrado dividido en 4 partes iguales ( como muestra la figura ) e indicaría el tamaño de la capa, su posición exacta, su nombre y su nivel Z.
Si dibujo en papel lo que quiero hacer, antes de comenzar, me voy a ahorrar muchos problemas.
1.- Insertar 5 capas en mi documento. Me conviene hacerlo desde la barra de menú Insertar > Capa ( o Layer ) y repetir esto 5 veces... me va a quedar algo
como en la imagen.
Acá podemos ver que mi documento todavía no está gradado, me conviene hacerlo en este momento ( o antes )
Si selecciono una de las capas puedo ver debajo de la lengüeta de página que se me remarcó en negro y aparte me muestra las otras 4.
Puedo seleccionar cada una de las capas para modificar sus propiedades desde el indicador amarillo de capa, desde la capa o desde la barra de estado inferior
( debajo de la lengüeta )
2.- Ubicar y dimensionar las capas.
Nombrar cada capa dependiendo la ubicación que tenga ( para un mejor orden y fácil identificación )
Especificar su posición izquierda y superior ( L y T ); su ancho y alto y su Z-index
3.- Insertar las imágenes correspondientes dentro de cada capa.
4.- Capa fondo, insertar tabla. Acá puedo darle dimensión a la capa ( 440 x 330 ) e insertar una tabla de 100% x 100% o que la tabla tenga ( 440 x 330 ).
Este fondo lo vamos a armar con una tabla de 2 filas y 2 columnas y debe tener el tamaño de la imagen full ( 440 x 330 ) color de fondo #cccccc y espaciado
de celda igual a 1 ( borde = 0 )... luego debo darle color de fondo #ffffff a las 4 celdas, para que solo se vean las líneas de borde ( cellspacing ).
5.- Aplicar comportamiento Drag Layer ( arrastrar capa ) a cada una de las capas ( menos a la que tiene la tabla ). Ya hemos visto en la teoría como aplicar
comportamientos, así que solo veremos que consideraciones tener en cuenta.
Verificar a qué capa le aplico el comportamiento ( en el desplegable, siempre aparece la primer capa, debo tener en cuenta de cambiarlo con cada capa que
seleccione )
Que el movimiento sea irrestricto.
Capturar la posición de cada capa y que la aproximación esté en 15px ( no debe ser mucho mas que eso para que no sea obvia la ubicación )
PD: Si por algún motivo, luego de terminado todo decidí cambiar la posición de todas las capas, debo volver a capturar la posición inicial para que tenga efecto
el " volver sola "... dreamweaver no lo hace en forma automática.
6.- Crear la línea de tiempo que desordene la posición inicial de las piezas. Esto también sabemos hacerlo. Arrastro todas las capas a mi línea ( puedo nombrar
a la línea como desorden ) y cambió la ubicación inicial y final de la capa.
7.- Ahora y para ir terminado... debo escribir el texto descriptivo del juego y fundamentalmente la palabra " empezar ! "
Teniendo seleccionada la palabra " empezar " le aplico el comportamiento Timeline > Play Timeline. Fíjense que en la línea de tiempo no tengo seleccionada la
opción Autoplay, ya que sino comenzaría a ejecutarse automáticamente con la apertura de la página.
Bueno... terminado ! ahora solo queda publicarlo y distribuirlo.. y cobrarlo o regalarlo.
Arriba
Pje. Gral Alvarado 1249 - Tel. 0341 457 1693 - S2008EYA - Rosario Autónoma - Argentina. - resolución óptima para 1024 x 768
Términos y Condiciones - Política de Privacidad - Copyright © 2005 Germán Gregorio Mudry