Principal | Animacion | Flash | Barra de menu Profesional con Flash

Barra de menu Profesional con Flash

TamaÒo de la fuente: Decrease font Enlarge font

Autor & Creditos: Maverick

Quizás en muchos sitios hemos visto barra de menus muy vistozos llamativos por los efectos rollover que tienen, bien ahora vamos a aprender a hacer esas barras de menus.

El video esta divido en dos partes, en la primera parte vamos a hacer efecto que hace girar a nuestro icono en sentido horario/antihorario.

En la segunda parte creamos el efecto de brillo, tambien debemos de mencionar que tenemos que tener 4 iconos con los cuales trabajamos, los iconos los pueden diseñar en Fireworks o Photoshop, o pueden busca en internet, donde hay muchos sitios que no ofrecen de manera gratuita iconos y simbolos.

Ejemplo:

 

Video 1

Clic en la Imagen para ver el Video Tutorial

Clic en la imagen para ver el video tutorial

Video 2

Clic en la Imagen para ver el Video Tutorial

Clic en la imagen para ver el video tutorial

El código actionscript es el mismo para todos los movieclips, solo cambiamos en getURL por el vinculo que queremos que nos abra. 

Codigo Actionscript:

on (rollOver) {
gotoAndPlay ("go1");
}

on (rollOut) {
gotoAndPlay ("go2");
}

on (rollOver) {
gotoAndPlay ("go3");
}
//
on (rollOut) {
gotoAndPlay ("go4");
}

//Cambia http://www.alt224.com por la pagina que quieres que habra boton(movieclip)

on (release) {
getURL ("http://www.alt224.com");
}

 

Adicionar a: Add to your del.icio.us del.icio.us | Digg this story Digg

Comentarios (32 Publicado):

andres Sobre 09 June, 2010 06:32:13
avatar
mira le doy el geturl como me dices tu y me funciona fuera de la pagina osea el archivo flash pero al montarlo en dreamweaber no me hace caso los url doy click y no me obedece que puedo hacer?
tolin yulian santos Sobre 07 June, 2010 07:00:13
avatar
viejo este tuto esta genial
GRASIAS
javier olivares sullon Sobre 24 March, 2010 02:43:53
avatar
olap un favor kiero descargarlos .. podrian poner el link porfavor para vajarlos,... graxias
Roberto Sobre 25 February, 2010 02:11:20
avatar
Lo primero que tengo para decir es que el tutorial es muy bueno aunque algunos detalles no se ven pero son menores.
Lo segundo es que el Actionscrip lo copie y lo pegue pero cuando pongo probsar pelicula me aparecen estos errores **Error** Escena=Escena 1, capa=Capa 1, fotograma=1:Línea 1: Sólo se permiten los eventos de ratón para las instancias de botón
on (rollOver) {

**Error** Escena=Escena 1, capa=Capa 1, fotograma=1:Línea 5: Sólo se permiten los eventos de ratón para las instancias de botón
on (rollOut) {

**Error** Escena=Escena 1, capa=Capa 1, fotograma=1:Línea 9: Sólo se permiten los eventos de ratón para las instancias de botón
on (rollOver) {

**Error** Escena=Escena 1, capa=Capa 1, fotograma=1:Línea 13: Sólo se permiten los eventos de ratón para las instancias de botón
on (rollOut) {

**Error** Escena=Escena 1, capa=Capa 1, fotograma=1:Línea 20: Sólo se permiten los eventos de ratón para las instancias de botón
on (release) {

**Error** Escena=Escena 1, capa=Capa 2, fotograma=40:Línea 1: La declaración debe aparecer dentro del controlador on/onClipEvent
gotoAndPlay(1);

Total de errores de ActionScript: 6 Errores comunicados: 6

desde ya te agradesco tu respuesta, muchas gracias.
Oscar Sobre 01 February, 2009 09:11:14
avatar
Gracias por la ayuda. Genial!!!
Pero tengo tengo la duda de como enviar a un fotograma concreto de la pelicula en lugar de un link esteriro

Gracias
miguel angel Sobre 21 January, 2009 10:00:24
avatar
muy bueno felicidades y gracias por compartirlo
vc Sobre 13 January, 2009 03:56:58
avatar
Podrias ponerlo para descargar??
Heyssi Sanchez Sobre 06 January, 2009 04:13:02
avatar
Hola Maveririck gracias por contestar, mira comprobe que aunque sale el error q te habia comentado inserte el SWF en dreamweaver y en vista previa me funciona.
el tema es cuando lo pruebo en Flash, igual aca te dejo el .fla como me dijiste
http://ultrashare.net/hosting/fl/a671bf24eb/Menu_Opciones_Offorbit
y otra vez gracias
Maverick Sobre 06 January, 2009 03:25:43
avatar
Si puedes puedo revisar el archivo, subelo a cualquier web, y me pasas la url, para bajar el archivo
Heyssi Sanchez Sobre 06 January, 2009 08:22:36
avatar
Hola Maveririck muchas gracias!! tengo el mismo problema q Elena,
pero el tema es que ya lo hice 4 veces y lo verifico por todos lados y ni modo.

siempre
**Error** Símbolo=descargas 2, capa=Capa 2, fotograma=40:Línea 1: La declaración debe aparecer dentro del controlador on/onClipEvent
gotoAndPlay (1);

Total de errores de ActionScript: 1 Errores comunicados: 1
Maverick Sobre 04 January, 2009 05:03:39
avatar
Elena seguramente estas escribiendo mal, el codigo AS. como te dice el mensaje de error
Elena Sobre 03 January, 2009 07:48:49
avatar
Hola Maveririck muxas gracias!! Te hago una consulta es que cuando animo el segundo boton al probar la pelicula me sale un mensaje y no lo entiendo,ayudame

**Error** Símbolo=descargas 2, capa=Capa 2, fotograma=40:Línea 1: La declaración debe aparecer dentro del controlador on/onClipEvent
gotoAndPlay (1);

Total de errores de ActionScript: 1 Errores comunicados: 1

Alvaro Sobre 28 December, 2008 12:06:05
avatar
Excelente tutorial los felicito lo probare
Maverick Sobre 10 December, 2008 09:38:04
avatar
rai velazques, seguramente obviaste algo del tutorial, me gustaria que sean pacientes y hagan el ejercicio una y otra ves, no siempre sale las cosas a la primera, mientras estamos aprendiendo.

esos botones tambien sirven para abrir cualquier pagina comun y corriente. o los puedes entrar dentro una pagina completamente en flash.
Sobre 07 December, 2008 02:02:30
avatar
esos botones sirben para que se habran tambien en la misma pagina como si fueran botones comunes?
Rai velasquez Sobre 01 December, 2008 01:31:39
avatar
Bueno la verdad muy bueno pero queria saber porque me sale este error .

Se supone que cuando pongo el cursos encime del boton se debe de mover pero ni bien lo abro para probar si comienza a mover y no para ! :S

Haber si me puedes explicar ...

-Gracias
Juan Manuel Sobre 25 November, 2008 06:15:43
avatar
Excelente.. Muchas Gracias
Maverick Sobre 25 November, 2008 02:08:38
avatar
Juan manuel, mira el comentario de abajo, ahi esta tu solucion.

saludos
Juan Manuel Sobre 25 November, 2008 12:56:54
avatar
Excelente Tutorial.. Tengo un inconveniente.. tengo un archivo flash con varios movie clips.. quiero que al final de esta funcion el boton no me busuqe un web site como en el ejemplo

on (release) {
getURL ("http://www.alt224.com");
}

Necesito que se desplace hasta un fotograma dentro de un simbolo movie clip especifico.

Como puedo hacer esto??
Gracias

Javier!! Sobre 06 November, 2008 07:24:15
avatar
eyyy sii es por esoo yo lo hacia en el 3

y ya le puse Actionscript2

y yap saliooo!!

jeje wenoo pues muchas gracias era todoo=0
Esau Sobre 06 November, 2008 02:53:01
avatar
Por que no pnes ls archivos .fla servirian de mucho para ver en donde nos equivocamos.
Maverick Sobre 06 November, 2008 07:04:29
avatar
Para Miguel Ramos; seleccionas el boton luego ve comportamientos (si no esta en la barra lateral activalo en VENTANA) luego le das clic en le signo (+) más, luego clip de pelicula, y finalmente, ir y deteneren fotograma, seleccionas el fotograma que quieres que este vinculado el boton.

Para Javier, no entiendo tu pregunta, si usas Flash cs4, tienes que escojer Actionscript2 es con el cual se trabaja en el video.
javier! el mismo de abajo:P Sobre 05 November, 2008 10:01:01
avatar
ahh se me olvido decir
en el primer video:P
y yo uso el flash cs4:P

ahora siii..

gracias:D:P jeje
javier Sobre 05 November, 2008 09:59:12
avatar
quuee onda! eyy k buen tutoriall!
la verdad!
pero tngo un probleeemaa:P
es al final del video:P
si ves que pues pones el codigo de accion al darle clic sobre el cuadro de home pues has de kuenta que cuando yo lo hago me sale que noc se pueden aplicar acciones

pero si selecciono el frame enves del cuadro si se puede
pero puess ese no es el punto :P supongo:P
pues pork lo puse asi y el ikono nomas da vueltas sin que pase el mouse encsima etc :P

bueno keria ver si alguien me pudiera ayudar:D gracias
Miguel Ramos Sobre 29 September, 2008 03:44:53
avatar
Saludos, muy buenos tus tutoriales, solo tengo una pregunta, como debo de poner el script para que me mande a un fotograma especifico en vez de un URL

gracias.
Alejandro Bermudez Sobre 28 September, 2008 08:15:12
avatar
Muy buenos tutoriales, espero que sigas ayudando para poder aprendar mucho mas...

Gracias por tu tiempo y dedicacion
agustin Sobre 03 September, 2008 07:08:02
avatar
realmente fantastico , explicas muy bien y sale todo a la perfeccion ... felicitaciones haces un gran trabajo !!
rulix Sobre 22 August, 2008 11:18:46
avatar
son exelentes tus tutoriales felicitaciones
Hunter Sobre 21 August, 2008 11:01:28
avatar
Excelentes tutoriales, me han ayudado mucho... sigan asi y gracias!
Patricio Mix Sobre 19 August, 2008 09:02:24
avatar
Excelente tutorial y Pagina
Felicitaciones
aldrym daniel Sobre 04 August, 2008 07:48:39
avatar
exelente tutorial, les felicito y me ha servido de mucha ayuda, muchisimas gracias y sigan así
jjg Sobre 03 August, 2008 12:33:03
avatar
soy primeriso en esta pag y solo que ria felicitarte por tus tutoriales son muy buenos

Envie sus comentarios comment

Por favor ingrese el codigo de la imagen:

  • email Email a un amigo
  • print Imprimir version
  • Plain text Texto plano
Tags
Rate el articulo
4.29
Advertising
Powered by Vivvo CMS v4.0