Aplicar Efecto De Scroll Con Flash 8

18

Efecto Scroll

Adobe Flash Tutorial. Programación de botones para un scroll básico. Talvez en alguna ocasión has tenido la necesidad de colocar un scroll a un campo de texto y es por eso que esta leyendo este tutorial jajaj J. Hay scroll los cuales contienen demasiado código action script, sin embargo esta explicación solamente cuenta con un solo símbolo de tipo botón, y este funciona para que el scroll funcione tanto hacia arriba (up) como hacia abajo (down). Cabe mencionar que todo el proceso se lleva acabo en la ecena para no hacer complicado el tuto. Sin más preámbulos que mencionar ¿comenzamos? :) Good luck :)

1-. El primer paso para hacer el tutorial es hacer el documento (ctrl. + J) en el cual se va a trabajar.

a)-. El documento para este caso es de dimensiones 315 * 150 píxeles de ancho y alto.

b)-. Colocar como color de fondo #FFFFFF o el color que más sea de tu agrado.

c)-. La velocidad de fotogramas que usaras en esta ocasión será 12 fps.

2-. Crear el único y solitario símbolo (ctrl. + F8). Como el documento flash solamente cuenta con este símbolo colocar como nombre botón up dowm.

a)-. Seleccionar en Tipo la opción Botón.

3-. Una ves que estés ubicado en el símbolo botón up down diseñar un botón de dos estados (Reposo y Sobre).

a)-. El diseño del botón de preferencia que sea en forma de flecha ya que este te indicara si el scroll va hacia arriba o abajo.

b)-. Las dimensiones que te propongo son de 20.0 * 25.0 píxeles de ancho y alto.

c)-. Después de haber diseñado el botón colocarlo en coordenadas X = 0.0 y Y = 0.0.

4-. Para continuar con la realización del scroll, regresar a la Escena.

a)-. Arrastrar desde la Biblioteca el símbolo.

b)-. Presionar sobre la Herramienta Transformación libre (Q), seleccionar el símbolo y tomarlo por uno de los extremos de la esquina y rotarlo 180º.

c)-. Después de que lo hayas rotado 180º colocarlo en coordenadas X = 290.0 y Y = 10.5.

5-. Seleccionar el símbolo una ves que este rotado 180º y luego abrir el panel de Acciones – botón. Este script te permitirá desplazar el texto hacia arriba.

a)-. Introducir el siguiente código action script

on (press, keyPress “<Up>”) {

texto_scroll.scroll -= 5;

}

6-. Arrastrar nuevamente desde la biblioteca el símbolo, ya no se tiene que rotar el símbolo porque el diseño del paso # 3 esta en la posición que indica hacia abajo.

a)-. Colocar el símbolo en coordenadas X = 290.0 y Y = 115.5.

7-. Seleccionar el símbolo y luego abrir el panel de Acciones – botón. El siguiente script te permitirá desplazar el texto hacia abajo.

a)-. Introducir el siguiente código action script.

on (press, keyPress “<Down>”) {

texto_scroll.scroll += 5;

}

8-. Introducir un campo de Texto dinámico, colocar como nombre de instancia texto_scroll.

a)-. Las dimensiones del campo de texto son 283.9 * 150.8 píxeles de ancho y alto.

b)-. Colocar el campo de texto en coordenadas X = 0.0 y Y = 0.0.

c)-. En la opción Tipo de línea seleccionar Multilínea.

Nota como puedes apreciar en la imagen el campo de texto presenta un cuadro de color blanco y esto no permitirá que se introduzca el texto en forma correcta.

9-. Para que el truco del scroll funcione correctamente, tendrás que seleccionar el campo de texto por uno de sus extremos.

a)-. Si seleccionas correctamente el campo de texto aparecerá un submenú emergente, y en este menú seleccionar la opción Desplazamiento permitido.

10-. Si realizaste el paso anterior correctamente el cuadro que aparecía en la parte inferior derecha de color blanco, cambiara el color a negro tal y como se muestra en la imagen.

a)-. Por último procede a introducir el texto que quieras que aparezca en la web. El campo de texto no perderá las dimensiones por más texto que le introduzcas.

Con este paso doy por concluido el tutorial espero que sea de ayuda para tus propósitos. :) well done :)

P.D. Presionar ctrl. + Enter para visualizar el trabajo realizado presionar las flechas para desplazar el texto tanto arriba como hacia abajo. :) Hasta pronto :)

Visualizar el archivo swf de este tutorial

Descarga el archivo fla de este tutorial

Búsquedas:

Artículos relacionados:





18 comentarios para “Aplicar Efecto De Scroll Con Flash 8”

  1. Jesús says:

    hola, antes que nada te felicito por tan buenos tutoriales, y bueno mi pregunta o mas bien mi duda es en uno de los tutoriales que sacaste tambien de efecto scroll, para ser mas especifico el de la galeria de fotos de modelos, y bueno me sale todo pero al momento de la visualización no me aparecen los botones de modelo 1 modelo 2 modelo 3 etc, todo me lo muestra bien ecepto eso, espero y me puedas responder te lo agradeceria muchisimo, le busque de mil maneras y comparaba mi archivo con el tuyo pero no no encontre la falla, espero me ayudes de favor.

  2. RAMSES says:

    De verdad que es muy sencillo, pero yo desearia poder hacer un roolover que activara un scroll que se detuviera en un rolout y no lo consigo podrias ayudarme?

  3. RAMSES says:

    Es muy sencillo cierto es…..pero yo desearia que rollover activara el scroll y se detuviera unicamente en rolout….y no lo consigo.podrias ayudarme?
    GRACIAS

  4. moli says:

    hola, he seguido este tutorial de manera que pudiese meter mi curriculum en un campo de texto dinamico y scrollable hasta ahi no hay problema incluso lo pude copiar y pegar directamente en formato word.
    Mi problema es el siguiente, mi curriculum lleva una foto en la primera hoja, con mi cara no se como hacer para que esa foto se mueva a la vez que el texto y no se quede en el mismo lugar tapando el texto de mas abajo al scrollear hacia abajo.
    He intentado darle un nombre de instancia y darle la misma orden que a texto_scroll. pero no funciona… al fin y al cabo no se trata de texto sino de un archivo jpg. ¿ Se te ocurre alguna solucion? Gracias de antemano, es estupendo lo que gente como yo aprende con gente como tu. Salu2.

  5. LEONARDO says:

    MUchisimas gracias. Para CS3 hay que cambiar las comillas!!!!!!!!!

  6. Anita says:

    Super Facil… Gracias

  7. Kuo says:

    gracias….
    gracias tambien a leonardo…
    por lo de las comillas…

  8. indi says:

    Tengo la misma duda moli, como hago para poder scrollar texto pero con fotos? muchas gracias

  9. humberto goytia says:

    holaa mira pues yo aqui molestandote yo me se de otra forma digamos que los botones tienen el action el que va hacia arriba es on (release) {
    texto.scroll–;
    }y el que es para abajo
    on (release) {
    texto.scroll++;
    }y el texto es captura en variables yo ya lo hice pero no recuerdo como cambiarle el color y la letra a el texto por que no es como el tuyo que digamos me es mas facil y bueno sabrias tu como puedo modificar los caracteres por que no se hace como normalmente lo pones mas bien es de otra forma no se le me puedes recordar gracias

  10. Haruko says:

    gracias estuvo como 4 horas buscando tutoriales para un scroll sencillo pero gracias a ti pude hacerlo facil sin nada de complicaciones thankssssssssss a lot XD nos vemos

  11. Jorge says:

    Hola, me parece muy bueno tu tuto…
    te pregunto…es posible hacer que con un solo click sostenido en las flechas,, suba o baje el texto constantemente sin necesidad de hacer varios clicks???

    Es algo con lo que no he podido, y estoy kedando mal en mi trabajo…Feliz año nuevo…
    gracias

  12. Jorge says:

    otra cosa…alguien puede decirme como hacer para que el texto no se pixele de esa manera tan grave? usando esta técnica?……………..gracias

  13. Enrique Palma says:

    GRACIAS TE PASASTE
    MUY BUENO.
    PERO PUEDES SUBIR EL TUTORIAL COMO HACERLO PERO CON EL SCROLL DEL MOUSE.
    GRACIAS

  14. loades says:

    Porque coño no me sale??????? AAAAAAAAAAAAAAAAh!!!! lo hago todo igual, pero al apretar el boton no se mueve el texto!!! en cambio con el scroll del raton sí se mueve.

  15. Juan says:

    No se si seré estupido, o quienes tanto felicitan al que hizo el tutorial, en realidad no lo hicierón, pero concuerdo con Loades, no me funcionó y seguí paso a paso todo lo que decía

  16. andrea says:

    no me funcionó. Descargué el modelo y trabajé con ese. muchas gracias!!!

  17. Anlael says:

    funciona, reáspero, gracias.

    Y para hacer la barra???

  18. Andrés says:

    Gracias amigo, medio día buscando en la web, x fin algo q explican sin hacer tanto problema, muchas gracias.

Dejar un comentario

Página 1 de 11