Anuncio

Anuncio Módulo
Colapsar
No hay anuncio todavía.

[TUTORIAL-FLASH]Creación de un scrollBar personalizable

Título de Página Módulo
Transferir Eliminar Colapsar
X
Detalle Conversación Módulo
Colapsar
  • Filtrar
  • Tiempo
  • Mostrar
Limpiar Todo
nuevos mensajes

  • [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?i...ollbar12uk.swf

    Ahora cambiaremos el codigo para que se mueva mientras mantengamos apretado el boton.

    Este Script se lo colocamos al boton [b]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 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?im...ollbar22om.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?i...ollbar35nh.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

  • #2
    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

    Comentario


    • #3
      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

      Comentario


      • #4
        :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 :P jeje Chevere y gracias otra welta

        Comentario


        • #5
          pues busca en pagina anterior de este subforo hay estan los otros 2, y no
          te preocupes k seguire haciendo.

          Comentario


          • #6
            Aki los pongo no se vayan a perder o para k los junten en el fijo xD Saludos

            http://www.foroz.org/foroz/topic9385.html http://www.foroz.org/foroz/topic9257.html

            Comentario


            • #7
              Gracias buen aporte esto se guarda!!

              Comentario


              • #8
                Hey excelente tutorial, ya me sabía otra forma de scrollbar pero está me gusta más... Son muy buenos tus tutoriales.

                Comentario


                • #9
                  Hola, soy nueva en el foro, se que este es un tema viejo, pero podrian colocar las imagenes solo logro que el texto suba al todo,pero solo baja hasta la mitad, :cry: ya que no se la ubicacion de las coordenadas en el tutorial :?

                  Saludos =)

                  Comentario


                  • #10
                    mmm hola como estas, primero disculpa por la tardansa en la respuesta, mira que hace mucho que no paso por el foro, pero intentare realizar el tutorial nuevamente y subir las imagenes nuevamente.

                    Saludoss

                    Comentario

                    Trabajando...
                    X