| Ver tema anterior :: Ver siguiente tema |
| Autor |
Mensaje |
AkOrS
Yo soy el foro
Registrado: 27 Dic 2005
Mensajes: 948
Ubicación: En el fin del mundo (CHILE)
|
 Publicado: Mie Jul 12, 2006 9:39 pm Título del mensaje: [TUTORIAL-FLASH]Creación de un scrollBar personalizable |
 |
|
Bueno este es un tutorial de cómo crear nuestro propio sliderBar personalizable, es sumamente simple y voy a dar 3 formas de slideBar.
Partamos por el mas simple el de presionar.
En la primera capa creamos un texto cualquiera, que sea estatico.
Luego, con el texto seleccionado apretamos F-8 y lo transformamos en clip de película poniendole como nombre texto_mc.
Ahora creamos una nueva capa arriba de la que ya tenemos y la llamamos máscara.
En esa capa creamos un cuadro del color que deseen tapando parte del texto y nos quedaria algo asi.
Ahora en la mascara la convertimos en máscara de esta forma
Después de eso en las dos capas les quitamos los candados para que podamos manipularlos
Luego de eso creamos una nueva capa donde pondremos las flechas para subir o bajar
Los convertimos en clip de película. al que indica para arriba lo llamamos subir_mc y al que indica hacia abajo lo llamamos bajar_mc
Ahora al clip de película de las letras le ponemos como nombre de instancia como texto_mc
Ahora lo mas importante es saber las coordenadas en donde se encuentra nuestro texto, en mi caso la coordenada Y la que nos importa esta en 187.
Sabiendo eso creamos el siguiente Script en el clip de película subir_mc
| Código: |
on (release){
if (_root.texto_mc._y > 56){
_root.texto_mc._y -= 5;
}
}
|
Cada vez que apretemos el boton bajaremos el texto 5 posiciones Y mientras la posicion de Y del texto sea mayor de 56 seguiremos bajando
Ahora le colocamos el siguiente Script al clip de película bajar_mc
| Código: |
on (release){
if (_root.texto_mc._y < 187){
_root.texto_mc._y += 5;
}
}
|
Cada vez que apretemos el boton subiremos el texto 5 posiciones Y mientras la posicion de Y del texto sea menor de 187 seguiremos subiendo.
Aqui esta el ejemplo de como queda
http://img399.imageshack.us/my.php?image=scrollbar12uk.swf
Ahora cambiaremos el codigo para que se mueva mientras mantengamos apretado el boton.
Este Script se lo colocamos al boton subir_mc[/8]
| Código: |
on (press) {
this.onEnterFrame = function() {
if (_root.texto_mc._y>56.5) {
_root.texto_mc._y -= 5;
}
};
}
on (release){
this.onEnterFrame = null;
}
|
Esto es muy simple ya que mientras matengamos presionado el boton el
clip de pelicula bajara 5 posiciones y cuando soltemos dejara de bajar las posiciones.
Y le colocamos el siguiente codigo al boton [b]bajar
| Código: |
on (press) {
this.onEnterFrame = function() {
if (_root.texto_mc._y<187) {
_root.texto_mc._y += 5;
}
};
}
on (release){
this.onEnterFrame = null;
}
|
Hara lo mismo k el boton subir_mc pero en vez de bajar las posiciones
subira las posiciones del clip de pelicula
Nos quedara el siguiente resultado
http://img62.imageshack.us/my.php?image=scrollbar22om.swf
Ahora haremos el 3 modo de poder haer nuestro scrollBar.
Cambiamos el siguiente codigo a los botones.
Al boton subir_mc
| Código: |
on (rollOver) {
this.onEnterFrame = function() {
if (_root.texto_mc._y>56.5) {
_root.texto_mc._y -= 5;
}
};
}
on (rollOut){
this.onEnterFrame = null;
}
|
Esto nos permitira que cuando uno pase el mouse sobre el boton el texto se
movera automaticamente sin necesidad de presionar.
y Al boton bajar_mc
| Código: |
on (rollOver) {
this.onEnterFrame = function() {
if (_root.texto_mc._y<187) {
_root.texto_mc._y += 5;
}
};
}
on (rollOut){
this.onEnterFrame = null;
}
|
Este boton hará lo mismo al momento de pasar el mouse se movera el texto sin necesidad de presionar.
Aqui esta el ejemplo de como queda
http://img455.imageshack.us/my.php?image=scrollbar35nh.swf
Bueno eso a sido todo espero les guste y si tienen dudas pregunten no mas
Nos volveremos a ver con otro tutorial XD
Saludos
_________________
|
|
| Volver arriba |
|
 |
..Nano..
User destacando
Registrado: 25 Abr 2006
Mensajes: 767
Ubicación: Veracruz Mexico
|
| Publicado: Mie Jul 12, 2006 10:05 pm Título del mensaje: |
|
|
Akors, Delujo y de lo mejor esto keria yo  nomas k esto va en tutoriales.
Gracias por la ayuda y espero mas xD Saludos Sigue Asi
_________________
>> Bronce I Concurso de Firmas
|
|
| Volver arriba |
|
|
AkOrS
Yo soy el foro
Registrado: 27 Dic 2005
Mensajes: 948
Ubicación: En el fin del mundo (CHILE)
|
| Publicado: Mie Jul 12, 2006 10:17 pm Título del mensaje: |
|
|
jejeje de nada de eso se trata que les sirva y este tuto lo puse aqui
ya que solo hay para tutoriales de photoshop tonce lo deje aqui, ahora lo unico
que no me gustaria es que se perdieran los tutoriales aqui y espero que malder haga
un post fijo para toturiales de Flash ya que hay dos mas que anteriormente hize
y ya se estan perdiendo.
Saludos
_________________
|
|
| Volver arriba |
|
|
..Nano..
User destacando
Registrado: 25 Abr 2006
Mensajes: 767
Ubicación: Veracruz Mexico
|
| Publicado: Mie Jul 12, 2006 10:20 pm Título del mensaje: |
|
|
:O Ps yo no los vi haber si me dices onde andan pa k los vaya juntando, ya le digo a alguien k te pongan tu Fijo pero sigue haciendo  jeje Chevere y gracias otra welta
_________________
>> Bronce I Concurso de Firmas
|
|
| Volver arriba |
|
|
AkOrS
Yo soy el foro
Registrado: 27 Dic 2005
Mensajes: 948
Ubicación: En el fin del mundo (CHILE)
|
| Publicado: Mie Jul 12, 2006 10:32 pm Título del mensaje: |
|
|
pues busca en pagina anterior de este subforo hay estan los otros 2, y no
te preocupes k seguire haciendo.
_________________
|
|
| Volver arriba |
|
|
..Nano..
User destacando
Registrado: 25 Abr 2006
Mensajes: 767
Ubicación: Veracruz Mexico
|
|
| Volver arriba |
|
|
malder
Moderador
Registrado: 10 Ene 2004
Mensajes: 4814
Ubicación: foroz de por vida
|
| Publicado: Jue Jul 13, 2006 1:50 pm Título del mensaje: |
|
|
Gracias buen aporte esto se guarda!!
_________________
Un titulo descriptivo te da mayor posibilidad a encontrar una buena ayuda.
Por favor lee las normas |
|
| Volver arriba |
|
|
alejo:::
Conociendo Foroz
Registrado: 05 Ene 2007
Mensajes: 33
Ubicación: Colombia
|
| Publicado: Sab Ene 06, 2007 6:30 am Título del mensaje: |
|
|
Hey excelente tutorial, ya me sabía otra forma de scrollbar pero está me gusta más... Son muy buenos tus tutoriales.
|
|
| Volver arriba |
|
|
|
|
|
