Los métodos slide proveen una solución fácil para crear simples animaciones en línea directa. He incluido los métodos slide dentro del standard DynLayer, pero inicialmente los slide métodos no son accesibles de utilizar. Tienes que inicializar los métodos slide antes de necesitarlos para aplicar los métodos slide a esa DynLayer. De esa forma puedes escoger selectivamente cual de tus DynLayers puede ser slide así solo una proporción mínima de recursos será utilizada. Opcionalmente puedes inicializar todas tus DynLayers para que reciban el método slide con solo cambiar el código así esta automáticamente llamará al comando de iniciación cuando los DynLayer son creados.
El método slideTo():
El método slideTo() hará que el DynLayer slide a un especifico coordinador.
objectName.slideTo(endx,endy,inc,speed,fn)
Si deseas que el DynLayer haga un slide en una línea horizontal pasa nulo null por el valor final endy. Si deseas que el Dynlayer haga un slide en una línea vertical pasa nulo null por el valor final endx.
Ejemplos:
Para slide el Dynlayer a los coordinados (100,50) a una aumentacion de 10 unidades pixeles, a 20 milisegundos por repetición:
mylayer.slideTo(100,50,10,20)
Para slide el DynLayer horizontalmente a el x-coordinador de 80:
mylayer.slideTo(80,null,5,30)
Para mostrar un alerta para notificar cuando la slide ha sido completado:
mylayer.slideTo(100,50,10,20,'alert("El slide ha sido completado")')
Cuando se esta utilizando la propiedad fn de un hyperlink deberás de hacer un truco con las comillas:
<A HREF="javascript:mylayer.slideTo(100,50,10,20,'alert(\'El slide ha sido completado\')')"></A>
El método slideBy():
El método slideBy() hará que el DynLayer sé dezlisa a otro coordinador con solo definir la cantidad de pixeles hay que cambiar de la localización cúrente (similar al moveBy() pero animado). La utilización es muy similar al slideTo():
objectName.slideBy(distx,disty,inc,speed,fn)
Si deseas que el DynLayer haga un slide en una línea horizontal pasa 0 para el valor final endy. Y si deseas que el DynLayer haga un slide en una línea vertical pasa 0 para el valor final endx.
Ejemplos:
Para slide un DynLayer en un diagonal de 40 pixeles a la izquierda y 60 pixeles para abajo:
mylayer.slideBy(-40,60,5,20)
Para slide un DynLayer 50 pixeles a la derecha:
mylayer.slideBy(50,0,5,20)
Haciendo secuencias:
He dejado la propiedad fn así siempre tendrás una forma de como determinar cuando la slide esta completada. Con tomar ventajas de esta característica podrás enlazar una serie de slide()'s juntas para hacer una secuencia de animaciones. Aquí hay una forma fácil para completar una secuencia:
seq1 = 0
function sequence1() {
seq1++
if (seq1==1) {
// comandos para la primera parte de la secuencia
// enlaza la slide de nuevo a esta función para esta continúe
mylayer.slideBy(50,0,10,20,'sequence1()')
}
else if (seq1==2) {
// comandos para la segunda parte de la secuencia
}
else seq1 = 0 // cambie a 0 así podrás usar la secuencia otra vez
}
Controladores onSlide
He añadido 2 controladores de eventos a los Métodos de Slide:
No he puesto a estos controladores a un uso muy largo, pero parece que trabajan muy bien, y tal vez hay otros mejores para utilizar que los parámetros "fn" en los métodos de slideBy() y slideTo().
Por definición estos controladores no hacen nada, todo lo que tienes que hacer es fijarlos otra vez a alguna función después de haber llamado al método slideInit():
mylayer.slideInit() mylayer.onSlide = mylayerOnSlide //alguna función que se encarga de cada paso en la slide mylayer.onSlideEnd = mylayerOnSlideEnd // alguna función que se encarga cuando es completado la slide
Demostración de Métodos de Slide:
Ejemplo: dynlayer-slide1.html [fuente] para un ejemplo con variaciones diferentes de los métodos y secuencias para la slide.
Ejemplo: dynlayer-slide2.html [fuente] para un ejemplo mostrando de como utilizar los controladores de onSlide.
| Casa | Próxima Lección: Clip Metodos |