Solo Photoshop

Tutoriales y recursos Photoshop

Bienvenido a SoloPhotoshop, donde encontrarás la mejor información sobre tutoriales, recursos y artículos de Adobe Photoshop!

Ingreso de Usuario

Recuperar contrasea

Registro de Usuario

Anunciar en SoloPhotoshop

Menú Flash Animado y con Sonido | Solo Photoshop

Tutorial Flash

 

Tutorial por Jxm

Hola estimados y muy ponderados amigos, el siguiente tutorial trata sobre un efecto en un botón si miran directamente el archivo SWF tal vez piensen que no tiene mucha ciencia hacer el efecto, pero o sorpresa es complicado y laborioso. Espero que la explicación no sea muy tediosa. El tutorial sirve para ser aplicado a un menú de una página Web, ¡¡¡disfrútenlo!!!. ¿Comenzamos?.

1.-Comenzar por hacer un documento con dimensiones 305 * 80 píxeles de ancho y alto respectivamente, y en la velocidad de fotogramas aumentarla o disminuirla a 25 fps según sea el caso.

2.-Crear un símbolo (ctrl. + F8) dar como nombre fondo_1, y de comportamiento Gráfico.

3.-Una vez en el símbolo dibujar un rectángulo sin borde.
a).-El radio de redondeado es de 10.
b).-Cada uno de los espacios mide 7.8 píxeles de alto por 95 píxeles de ancho, al final el ancho y el alto tendrá que ser 95.0*70.0 píxeles.
c).-Colocar en coordenadas X=0 y Y=0.
d).-Los colores son #495801 y #8E9509.

4.-Crear un nuevo símbolo (ctrl. + F8) y dar como nombre fondo_2 y como comportamiento Gráfico.

5.-Dibujar un nuevo rectángulo también sin borde pero este deberá de ser más pequeño.
a).-El radio de redondeado es de 10.
b).-Cada uno de los espacios mide 6.5 y 6.4 píxeles de alto por 90 píxeles de ancho, al final el ancho y el alto tendrá que ser 90.0*45.0 píxeles.
c).-Colocar en coordenadas X=0 y Y=0.
d).-Los colores son #972E06 y #B13A3A.

6.-A este mismo rectángulo agregar un texto estático, que indique cual va hacer su función dentro del menú.
a).-Nombrarlo BOTÓN INICIO.
b).-Dar en espacio entre caracteres el número 5.
c).-Finalmente colocar el texto centrado en relación al rectángulo, en tal caso las coordenadas son X=12.5 y Y=5.0.

7.-Crear un nuevo símbolo (ctrl. + F8) nombrarlo fondo_3, y dar como comportamiento Gráfico.

8.-Dibujar nuevamente un nuevo rectángulo sin borde el cual deberá de ser aun más pequeño que los dos anteriores.
a).-El radio de redondeado es de 10.
b).-Cada uno de los espacios mide 8 píxeles de alto por 80 píxeles de ancho, al final el ancho y el alto tendrá que ser 80.0*40.0 píxeles.
c).-Colocar en coordenadas X=0 y Y=0.
d).-Los colores son #996633 y #990000.

9.- A este mismo rectángulo agregar un texto estático, que indique cual va hacer su función dentro del menú.
a).-Nombrarlo BOTÓN INICIO.
b).-Dar en espacio entre caracteres el número 5.
c).-Finalmente colocar el texto centrado en relación al rectángulo, en tal caso las coordenadas son X=8.0 y Y=2.0.

10.-Crear un nuevo símbolo nombrarlo animación, y dar como comportamiento Clip de película.

11.-En la primera capa arrastrar desde la biblioteca el símbolo fondo_1, y colocarlo en coordenadas X=0.0 y Y=0.0.

12.-Aquí es talvez en donde se vuelve complicada y tediosa la explicación. Comenzar por insertar una segunda capa (Capa 2), y en esta arrastrar desde la biblioteca el símbolo fondo_2 y colocarlo en coordenadas X=2.5 y Y=12.5.

13.-Insertar un fotograma (F5) en el frame número 20 de la Capa 1.

14.-Regresar a la Capa 2 y en el frame número 5 insertar un fotograma clave (F6), seleccionar el símbolo y colocarlo en coordenadas X=2.5 y Y=32.5.

15.-Insertar una tercera capa (Capa 3) y ahora arrastrar desde la biblioteca el símbolo fondo_3 y colocarlo en coordenadas X=7.5 y Y=15.0.

16.-Insertar un fotograma clave (F6) en el frame número 5 de la Capa 3, colocar el símbolo de este fotograma en coordenadas X=7.5 y Y=-10.0.

17.-Para no arrastrar más símbolos de la biblioteca, se realizara la operaron de copiar y pegar fotogramas.
a).-Seleccionar el fotograma 5 de la Capa 2 y hacer clic con el botón derecho del ratón.
b).-Después seleccionar la opción de Copiar fotogramas.

18.-Seleccionar el frame número 6 de la Capa 3 luego hacer clic con el botón derecho del ratón y seleccionar la opción de Pegar fotogramas.

19.-Ahora seleccionar el fotogra número 5 de la Capa 3, hacer clic con el botón derecho del ratón y seleccionar la opción de Copiar fotogramas.
Luego repetir la operación de pegar fotogramas pero ahora sobre la Capa 2 en el frame 6, observar el paso 18.

20.-En la misma Capa 2 insertar un fotograma clave (F6) en frame número 10, después colocar el símbolo en coordenadas X=7.5 y Y=15.0.

21.-Regresar a la Capa 3 e insertar un fotograma clave (F6) en el frame 10 y colocar el símbolo en coordenadas X=2.5 y Y=12.5.

22.-En la Capa 2 insertar un fotograma clave (F6) en el frame número 15 y colocar el símbolo en coordenadas X=7.5 y Y=-10.0.

23.-Ahora insertar un fotograma clave en el frame 15 de la Capa 3 y colora el símbolo en coordenadas X=2.5 y Y=32.5.

24.-Seleccionar los fotogramas que se encuentran en el frame número 5 de las Capas 2 y 3, y hacer clic con el botón derecho del ratón y después seleccionar la opción de Copiar fotogramas.

25.-Seleccionar el frame 16 de las Capas 2 y 3 hacer clic con el botón derecho del ratón y luego dar enter en la opción Pegar fotogramas.

26.-Insertar un fotograma clave (F6) en el frame número 20 de la Capa 2 y colocar el símbolo en coordenadas X=2.5 y Y=12.5.

27.-Por ultimo insertar un fotograma clave (F6) en el frame 20 de la Capa 3 y colocar el símbolo en coordenadas X=7.5 y Y=15.0, de tal forma que los símbolos terminaron en la misma posición que en la que empezaron.

28.-Ahora se realizara la animación de movimiento para que tenga sentido el efecto.
a).-Primero seleccionar los fotogramas que se encuentran en el frame número 1 de las Capas 2 y 3.
b).-Luego en la barra de Propiedades en la opción Animar seleccionar Movimiento.

29.-En este paso se realizara la animación para el fotograma 6 de la Capa 2 y 3.
a).-Seleccionar los fotogramas antes mencionados.
b).- En la opción Animar seleccionar Movimiento.

30.-Repetir el paso 28 para los fotogramas 10 y 15. Como se observa en la imagen los únicos fotogramas que están sin animar son los ubicados en las posiciones 5, 15 y 20.

31.-Crear un nuevo símbolo (ctrl. + F8) nombrarlo boton_activo, y dar como comportamiento Botón.

32.-Dibujar un rectángulo en este símbolo pero primero hacer el radio del rectángulo redondeado.
a).-Seleccionar la parte marcada con el número 1 para acceder a la configuración del rectángulo.
b).-Ahora escribir el Radio de esquina. “Yo pensé que ya sabias hacer el redondeado de esquinas y si no lo sabes haces nunca es tarde para aprender jajajajajajajajajajaja.”

33.-Seleccionar el frame de Zona activa y en el hacer el rectángulo de dimensiones 95.0*70.0 píxeles de ancho y alto respectivamente colocar el dibujo en coordenadas X=0.0 y Y=0.0.

34.-Regresar al símbolo animación e insertar una cuarta capa (Capa 4), en ella arrasy¡trar desde la biblioteca el símbolo boton_activo. Colocar el símbolo en coordenadas X=0.0 y Y=0.0.

35.-En el paso siguiente seleccionar el símbolo de la Capa 4 no el fotograma, luego abrir la barra de Acciones – Botón e insertar el siguiente código.
on (rollOver) {
gotoAndPlay(2);
}
on (releaseOutside, rollOut) {
gotoAndPlay(11);
}

36.-Ya para terminar con el símbolo insertar una quinta capa (Capa 5).
a).-Seleccionar el primer fotograma de la Capa 5 y escribir un stop(); en la barra de Acciones – Fotograma.

37.-Insertar un fotograma clave vacío (F7) en el frame número 10 de la Capa 5,
a).-Seleccionar el fotograma 10 y escribir un stop(); en la barra de Acciones – Fotograma.

38.-Regresar a la Escena y en ella arrastrar desde la biblioteca el símbolo animación y colocarlo en coordenadas X=5.5 y Y=5.5.
Hasta esta parte podría quedar concluido el tutorial, solamente faltaría que hicieras las animaciones con las cuales constaría el menú o sea un botón contacto, galería, servicios, etc.

39.-Si deseas agregar un sonido al botón para que este quede más completo.
a).-Importar un sonido a la biblioteca.
b).-Abrir el símbolo boton_activo.
c).-Insertar un fotograma clave vacío (F7) en el frame de Sobre y otro fotograma clave vacío (F7) en el fotograma de Precionado
d).-Luego seleccionar primero el estado de Reposo y arrastrar el sonido de la biblioteca. Hacer lo mismo en el estado de Sobre, seleccionar el estado y luego arrastrar el sonido de la biblioteca.

P.D. Presionar ctrl. + enter para ver el trabajo realizado espero que sea de ayuda el tutorial para futuras paginas web que estén en tu mente realizar. Gracias por visitar este espacio y sigue apoyando con sugerencias y comentarios. Hasta pronto.

Descarga el archivo FLA de este tutorial

Comentarios de Menú Flash Animado y con Sonido | Solo Photoshop

↑ Tutorial

  • cenacolovinciano

    cenacolovinciano

    2007-01-10 02:11

    muy bueno el tuto :DM
  • papahielo

    papahielo

    2007-01-11 08:53

    orale muy buen tutorial, gracias si me sirvio bien :PM
  • dariouru

    dariouru

    2007-01-27 15:43

    la verdad no se nada de flash pero me gustaria aprender...es muy buena esa tecnica de botones animados con sonido ;)M
  • solapa

    solapa

    2007-02-13 14:27

    hola, probé el botón y si funciona, pero al incorporarlo en una página con un enlace, se le quita la animación, tal vez no lo estoy haciendo bien, podrían decirme como corregirlo? Gracias M
  • siemmens1

    siemmens1

    2007-04-10 11:23

    tengo una pregunta referente a los botones saben q tengo mi boton en mi escena verdad este boton me carga un movie click bien, ahora cuando esta el movie click cargado ese boton se bloquea osea por q ya estoy en ese movie click como hago para q ese boton quede activo y repetir el movie click cuantas veces precione el boton!!!M
  • Di_salazar

    Di_salazar

    2007-05-21 12:23

    muy bueno, la verdad me han servido mucho los tutoriales, este quedo super bien.M
  • vikma

    vikma

    2008-07-04 14:03

    Oigan como selecciono solo el objeto y no el frame. Creo k ese es el problema que tengo por k me sale un mensaje de error en el compilador. "simbolo 'animacion', capa 'capa 5', fotograma 1, linea 1 "1087: Error de sintaxis: se encontraron caracteres adicionales tras el final del programa." on (rollOver) { M
  • titus

    titus

    2009-06-30 18:48

    genial me funca barbaroM

↑ Tutorial