| Ver tema anterior :: Ver siguiente tema |
| Autor |
Mensaje |
yandher
Conociendo Foroz
Registrado: 08 Ago 2007
Mensajes: 65
|
 Publicado: Sab Dic 08, 2007 11:53 pm Título del mensaje: [Tutorial] Banner de Imagenes Deslizables. |
 |
|
En este tutorial veremos como crear un banner de imagenes deslizables dependiendo de la posicion del mouse.
1. Creamos una pelicula (la mia y la del ejemplo tiene de dimensiones 600x190 px)
2. Insertamos las imagenes. Las imagenes deben de ser del mismo tamaño para evitar modificar nuestro script. Las imagenes que yo utilice miden 140x187 px.
3. Escojemos todas las imagenes y con el boton F8 las convertimos en Clip de Pelicula, al que le llamare "tiraimagenes". El punto de Registro lo pongo en la esquina superior izquierda.
4.Creado este MC, le pondremos tambien "tiraimegenes" como nombre de instancia.
5. Escojemos nuestro nuevo Clip, y lo centramos en el escenario.
6. Creamos una nueva Capa, y le damos la propiedad de Mascara:
y queda asi:
Desbloqueamos la capa superior:
y alli creamos un cuadro del tamaño de nuestra pelicula (el mio es de 600x190), Y volvemos a bloquear la capa. Con esto desaparecen las imagenes que quedan fuera de la pelicula.
7. En una capa nueva creamos un rectangulo de las mismas medidas que nuestra pelicula lo transformamos en boton y lo nombramos.
8. Despues de creado el boton, le damos doble click para editarlo directamente. Aqui moveremos el Rectangulo que esta el el frame "Reposo" hasta el frame "Zona Activa", y salimos de nuevo a la pelicula.
9. Ahora tenemos un boton transparente, el cual solo nos indica el Area en donde el mouse hace contacto con el boton.
10. Fuera del boton, lo seleccionamos y abrimos la ventana Acciones (F9) y agregamos el siguente AS:
| Código: |
on (rollOver) {
this.tiraimagenes.sobre = true;
}
on (rollOut) {
this.tiraimagenes.sobre = false;
} |
11. Escojemos el Clip de Pelicula "tiraimagenes" y le agregamos el AS siguiente:
| Código: |
onClipEvent (enterFrame) {
if (sobre) {
this._x = -1.5*_root._xmouse;
}
} |
12.Creamos una nueva capa, y le agregamos un stop(); al primer frame.
13. Probamos nuestra pelicula (shift+Enter).
http://img509.imageshack.us/my.php?image=imagenesdeslizableskk2.swf
Ahora explico el codigo AS para acoplarlo individualmente y que funcione para todos.
a) La instruccion this.tiraimegenes.sobre = true; y this.tiraimagenes.sobre = false; sirven para "avisarle" al MC que el mouse esta encima o fuera del boton, el cual lo identifica con el rollOver y rollOut.
b) Cuando sobre es "true", se ejecuta this._x = -1.5*_root._xmouse;.
_x le da a "this" la nueva posicion repecto a la pelicula,
1.5 es un cociente, se obtiene de dividir el tamaño del MC "tiraimagenes" menos el tamaño de la pelicula, entre el Tamaño de la pelicula que lo contiene. Para mi caso en particular es 1500-600/600 = 1.5.
Explico este factor. Cuando el mouse tiene posicion 0, _x será 0 (1.5 x 0), y cuando el mouse esta en el otro extremo de la pelicula, se tiene que ver solo el final de la tira, o sea "un tamaño igual al de la pelicula", por eso al tamaño de la tiraimagenes le resto el tamaño de mi pelicula, pues esta es la parte que no se ve cuando el mouse esta hasta el otro extremo. (1.5 x 600 = 900)
_root._xmouse nos devuelve la posicion del mouse tomando como refrerencia a "_root".
NOTA: Lo mas importante en esta ecuacion es el signo (-) del factor, pues es el que hace que la tira se mueva AL CONTRARIO del movimiento del mouse.
Cualquier duda o aclaracion y/o sujerencia, con gusto las leeré.
Adjunto, por supuesto, el archivo FLA de este tutorial.
http://www.sendspace.com/file/wdr7m9
Chao. |
|
| Volver arriba |
|
 |
yandher
Conociendo Foroz
Registrado: 08 Ago 2007
Mensajes: 65
|
| Publicado: Dom Dic 09, 2007 12:18 am Título del mensaje: |
|
|
Una cosa mas:
Este movimiento es de forma Lineal.
Para modificar este movimiento y hacerlo mas deslizable, vamos a cambiar el AS del Clip de Pelicula, y escribimos lo siguiente:
| Código: |
onClipEvent(enterFrame){
if (sobre){
this._x = this._x - (this._x + 1.5*_root._xmouse)/12
}
} |
Explico:
1. Se calcula la posicion del mouse con _xmouse.
2. Esta posicion se altera con el Factor 1.5 para acoplarlo con el tamaño de nuestra pelicula y nuestra tira de imagenes.
3. Al hacer la diferencia de posiciones, dividirla entre un numero sugerido por nosotros y agregarla a la posicion instantanea del MC, hacemos que este MC se mueva a una velocidad que depende de la DIFERENCIA DE DISTANCIAS.
4. Para modificar la velocidad, solo tenemos que cambiar el numero del divisor (el 12). Mientras el numero sea menor, la velocidad del movimiento aumenta.
http://img101.imageshack.us/my.php?image=imagenesdeslizablesjw5.swf
Chao. |
|
| Volver arriba |
|
|
tejemanejen
Nuevo Miembro
Registrado: 30 Nov 2007
Mensajes: 8
|
| Publicado: Dom Dic 09, 2007 12:32 pm Título del mensaje: |
|
|
Buen tutorial, interesante el efecto lo voy a intentar puede ser que le de algun uso.
Muchas gracias. |
|
| Volver arriba |
|
|
AkOrS
Yo soy el foro
Registrado: 27 Dic 2005
Mensajes: 929
Ubicación: En el fin del mundo (CHILE)
|
| Publicado: Dom Dic 09, 2007 6:13 pm Título del mensaje: |
|
|
muuchas gracias yandher, se agradece enormemente el tutorial y muy bueno y practico para crear menus en sitios web, esto se va al post de tutoriales.
Saludoss y gracias
_________________
|
|
| Volver arriba |
|
|
karlos!
Yo soy el foro
Registrado: 14 Ago 2006
Mensajes: 7006
Ubicación: El Vigía - Mérida - Venezuela
|
| Publicado: Dom Dic 09, 2007 9:48 pm Título del mensaje: |
|
|
Gracias por el tutorial yandher, a muchos nos servirá bastante 
_________________
http://myspace.com/karlosmora |
|
| Volver arriba |
|
|
|
|
|
