Menu en flash para tu web

Para realizar este tutorial vamos a necesitar Macromedia Flash Profesional 8.0[/b] http://www.megaupload.com/?d=IA0Z13X4 bajalo de ahi (pueden utilizar cualquier version de flash pero puede que suceda que nos encontremos frente a incompatibilidades en cuanto a version de archivos .fla)



 


.
Bueno comenzemos y veamos como podemos personalizar nuestro menu.
1)Descargamos el template o plantilla la cual contiene todo lo que vamos a utilizar
http://www.megaupload.com/?d=MXAKGW4H
2)Una vez que lo descargamos vamos a ver que es cada archivo :
A)La carpeta imagenes contiene todos los archivos .gif de la plantilla web
b)La carpeta font son las fuentes con las que trabaja la web , lo que debemos hacer con esa carpeta es pegar los archivos que contiene la carpeta font en C:\WINDOWS\Fonts con eso logramos que nuestra pc tenga las mismas letras que las usadas en la web
C)La carpeta Flash contiene dos archivos uno llamado 0789.swf y otro llamado 0789.fla un detalle que podemos destarcar es que si observar el archivo .fla pesa 2mil veces mas que el archivo en .swf eso es porque .fla esta descomprimido para poder editarlo.
D) EL archivo index.php ese lo modifique yo , lo cree en .php para mayor facilidad ahi contiene la configuracion del menu en flash y tambien contiene la parte html de la web.
E)Es un archivo en .html donde si lo abren y le dan los permisos pueden ver la web ( por eso lo llame vista previa).
3)Con el que vamos a trabajar ahora sera con el archivo 0789.fla , entonces hacemos un clik derecho sobre el archivo , vamos a donde dice abrin con ... y seleccionamos Flash 8.


4) cuando abran el programa primero no toquen nada veamos cosas basicas.
 



Bueno marque con distintos colores las cosas basicas.
# Rojo=[Herramienta de seleccion] la vamos a utilizar casi siempre para marcar y descubrir las capas que se ocultan detras
.
# Azul=[Herramienta para transformacion libre] , esta herramienta nos permite poder agrandar , achicar , redimencionar los distintos elementos de forma libre.(cumple la misma funcion que el photoshop )

# Negro=[Herramienta de texto] bueno me imagino que saben para que sirve , es la misma que tenemos en el paint.

# Rosa=[es la biblioteca] donde podemos ver todos los archivos , clip de peliculas , imagenes , etc que tenemos en nuestro archivo .fla
Bueno con esas cosas y algo mas podemos comenzar a trabajar solo les pido paciencia es muy dificil armar este tipo de guias ya que debo ser lo mas detallista posible. porque como digo siempre : yo cuando armo los tutoriales me pongo en su lugar.
5)Lo primero que vamos a modificar sera el fondo de este menu yo voy a ponerlo en negro , para eso hacemos un click en fondo y seleccionamos el color [ver foto]
 


6)Ahora lo que hacemos para probrar cada vez que modificamos algo es ir a CONTROL=>PROBAR PELICULA ( el metodo mas rapido es [control+enter] ) seguramente no veran el fondo si no ampliam la ventana igual el fondo lo veran despues de los sguientes cambios:


 

7)Nuestro siguiente paso sera cambiar una imagen veamos la siguiente foto para saber de cual se trata


 

Bueno tambien hago una aclaracion solo modificamos la imagen que marcada en la foto , solo la imagen el texto y el logo de arriba lo haremos despues , tampoco se preocupen en recortar la imagen ya que va debajo. Lo que si debemos respetar las mismas dimensiones de la foto en este caso necesitamos una foto 770x104. Para cambiar la foto hacemos lo siguiente: en el panel derecho buscamos un mapa de bit ( imagen ) llamada " power " hacemos un click derecho y seleccionamos la opcion "propiedades" , en la nueva ventana hacemos un click en "importar", buscamos nuestra imagen y aceptamos.
 

Para ver como quedo hacemos un click donde dice scene 1 ( de ahi podemos ver como va quedando nuestro proyecto)
 


Como pueden ver la imagen se adapta perfectamente al menu ya que esta queda detras y no delante es por eso que no necesitan recortar la imagen ni nada de eso, tambien aclaro en este punto tal vez ustedes en las fotos vean cosas que ustedes no tienen , eso no importa ya que yo uso configuraciones personalizadas en mis herramientas ( photoshop , flash , dreamveawer etc ... )
8)Bueno ahora lo que vamos a cambiar son los nombres en el menu , para eso utilizamos LA HERRAMIENTA DE TEXTO ( sino recuerdan cual es revisen mas arriba donde explique las herramientas basicas , y sino tienen ganas de ver lo que puse arriba la herramienta de texto es "La letra A" que se encuentra en el panel izquierdo de herramientas, sino presionen la letra "T" del teclado).
Una vez que la tenemos seleccionada nuestra herramienta y posicionados sobre SCENE 1, hacemos un click donde dice ]About Us[ en la barra del menu flash que estamos editando.


 

Este paso lo repetimos con todos los nombres y vamos poniendo lo que quieran sino saben que poner les dejo algunas ideas ( INICIO , DESCARGAS , CREAR CUENTA , RANKING , FORO , CONTACTO ,ETC ), tambien debajo en el panel que se encuentra en el medio pueden editar el color , tamaño y tipo de letra y tengan en cuenta el color porque nuestro proximo paso sera cambiar de color la barra del medio si ponen la letras en negro luego no van a poder poner la barra en negro eso es algo mas que logico. Al terminar le deberia quedar algo asi:
 


9)Seguramete mas de uno dira pera queda todo desordenado ( recuerden que cuando hago las guias siempre me pongo en lugar y jamas hago un paso sin foto o comentario) y es verdad porque solo cambiamos los textos ahora nuestro siguiente paso sera alinearlos por cuestiones de estetica.
Para eso utilizamos la " HERRAMIENTA DE SELECCION " ( pueden ver mas arriba cual era , sino presionen la letra "V" o sino haga un click sobre la flechita negra que se encuentra en el panel de herramientas)
Una vez que la tenemos seleccionada hace solo un click sobre el primer nombre que vamos a alinear ( digo solo un click porque si hacen dos entrarian en edicion de texto nuevamente). Si de casualidad hiciste doble click tendras que seleccionar la herramienta de seleccion nuevamente ( ya que te queda marcada la herramienta de texto )
Bueno entonces ahora lo que hacemos es hubicamos de la mejor manera posible nuestros textos. A mi me quedo algo asi , seguramente a ustedes les salga mejor.

 
10)Recuerden cada vez que quieran ver el diseño pre-terminado vamos a control=>probar pelicula (sino apretan CONTROL+ENTER).
Bien como dije en el punto anterior nuestro siguiente paso sera cambiar el color de la barra de menu ( no es necesario si ustedes quieren consevar ese color o quieren conservar algo del menu original salten los pasos correspondientes y listo)
La barra de menu en flash tienen dos colores el primer color es ese celeste y el segundo color es un blanco que aparece cuando ponemos el mouse sobre ella ( eso lo puede ver aprentando CONTROL+ENTER). Entonces vamos a cambiar el color de la barra en estado inactivo ( seria el celeste actual) para eso buscamos el SHAPE 6 ( esta 13 posiciones debajo de la ultima imagen que cambiamos ), otra forma es presionando la letra "S" y nos llevara cerca de nuestro objetivo SHAPE 6 , ahora simplemente debemos hacer doble click sobre el icono ( no hagan doble click donde dice SHAPE 6 porque eso es para cambiarle el nombre al clip los dos click deben ir sobre el icono)
Ver foto
 


Bien en el medio abajo tenemos la barra para cambiar el color , transparencia , tonalidad , brillo a la barra si observar en este momento esta en "ninguno" eso lo modifican a su gusto recuerden el color de letra que le pusieron y que el fondo no debe ser el mismo


 

11)Ahora nuestro siguiente paso sera cambiar el color de los botones en estado Activo ( es decir cuando pasamos el mouse por cada boton toma un color , ahora esta en un color blanco ). Tengan en cuenta que al cambiar el boton de color tambien cambie el color del simbolo yo en mi caso voy a darle un poco de brillo y mantener el original para eso hacemos un click en SCENE 1 y luego hacemos un click sobre cualquiera de los botones ( recuerden que debemos tener seleccionado siempre la herramienta de seleccion [ flechita negra ] y observer que al hacer click sobre uno de los botones les aparecera un remarcado en la pantalla indicando que fue lo seleccionado. El metodo para cambiar el color es el mismo que el anterior
 

Si quieren ver como va quedando recuerden aprentan CONTROL+ENTER o van a CONTROL=>PROBAR PELICULA. En caso de que cometan algun error o hicieron algo que no les gusto apretamos CONTROL+Z y regresara un paso atras ( si manejas photoshop , macromedia flash usa las mismas teclas rapidas claro son los mismos creadores de estas herramientas ADOBE)
12)Bien nuestro nuevo paso sera sacar lo que no nos sirve en el menu en flash para eso buscamos en el panel derecho de nuetro programa los siguientes Symbol 73, 74, 80, 92, 96, 97, 98, 99, 101, 102, mas arriba borramos uno que dice "Advansed search but" , "Advanced search", tambien borramos una que se llama "search" ( la lupa) "pic001" y "pic002" y por ultimo una que se llama "panel left" para borrarlos hacemos un click y apretramos SUPRIMIR de su teclado, otra forma es : hacemos click derecho=>Eliminar ( tal vez nos quede un recuadro en lineas punteadas abajo a la izquierda , para borrar eeso usar la " herramienta de seleccion" le damos un click y apretamos suprimir.
Deberia quedarnos asi:
 


13)Como veran deje la parte de arriba para ultimo momento porque mientras armaba este tutorial se me ocurrio una idea pero antes de ir a eso vamos a borrar la parte azul de abajo para eso hacemos un click (solo uno , si hacen dos no van a poder borrar nada, en ese caso para regresar atras apretamos CONTROL+Z o hacemos un click arriba donde dice SCENE 1) en esa zona ( en la siguiete foto la marque con un circulo ) y apretamos suprimir.


 

14)Tambien hacemos un click donde dice ELETRIC COMPANY y apretamos suprimir.Ahora hacemos un click ( recuerden que deben tener seleccionada la "herramienta de seleccion"y solo deben hacer un click en el rectangulo azul en donde estan las letras y poner suprimir ( si hacen dos click por error hagan lo mismo que puse en el paso 13 respecto a este error)
Bien ahora lo que vamos hacer sera editar el texto que dice "Welcome to YOUR COMPANY ELECTRIC - the worldwide leader in electric field!" para eso hacemos primero dos click sobre las letras ( teniendo seleccionada la herramienta de seleccion ) veran como un recuadro que sale de ahi eso nos indica que entramos Symbol 104 , ahora sobre las letras volvemos hacer doble click automaticamente pasara a la herramienta de texto y nos permitira poder modificar.
Debajo en el medio tiene una barra de herramientas para modificar el tamaño , color , etc ...



 

15)Si quieren mover el texto de lugar ponerlo mas a la derecha o la izquierda hacemos un click derecho sobre el texto y nuevamente un click en
donde dice "TRANSFORMACION LIBRE" y de ahi podemos mover el texto (cuadro completo)
El ultimo paso será y esta fue la gran idea que tuve es : en vez de borrar el simbolo ese ( especie de rayo ) que dejamos arriba de todo ( no es que me lo olvide )
lo podemos poner abajo al lado del texto , ya que en mi caso sobre mi foto molesta entonces para eso hacemos un click derecho sobre ese rayito , buscamos la opcion " TRANSFORMACION LIBRE " y lo podemos mover a donde mas nos guste. ( con la opcion transformacion libre podemos agrandar o achicar a las imagenes pero no lo recomiendo en este caso).
Posible error , viendo el trabajo casi terminado observe que antes que aparezca nuestro texto se ve una linea blanca , para sacar eso debemos borrar Symbol 103 , lo buscamos en el panel derecho y lo deletiamos.
Me quedo algo asi
 


16)Pero esto no termina aca , ahora viene la parte de programacion , como veran nuestro menu tiene botones y si lo queremos implementar a nuestra web debemos indicarle a cada boton a donde redireccionarnos , igual no es dificil vamos hacerlo rapido porque si ustedes ya estan cansados imaginense como estare yo:
Primero debemos tener nuestro trabajo terminado y conformes con los resultados para eso hacemos un vista previa (CONTROL+ENTER), cerramos la vista previa y hacemos un click donde dice ACCIONES no miren arriba porque el boton esta abajo , si quieren mas rapido todavia apretamos "F9" ( no la letra F mas el 9 , apretamos -F9- )


 

17)Buscamos en el panel de la derecha MENU 1 y hacemos doble click sobre el icono ( sobre sobre el "menu 1" NO , porque ahi es para cambiar el nombre al clip )en la pantalla de acciones veran algo como esto:

on (rollOver) {
gotoAndPlay(2);
}
on (rollOut) {
gotoAndPlay(11);
}
Lo que debemos hacer aca es agregarle en la linea 7 este texto:
on(release) {
getURL((******)
}
Entonces nos quedaria asi:
on (rollOver) {
gotoAndPlay(2);
}
on (rollOut) {
gotoAndPlay(11);
}
on(release) {
getURL((******)
}

No esta demas decir que ( (******)
debe ser cambiado por el link de su web segun corresponda y otra aclarion es MENU 1 corresponde al primer boton ( el que esta del lado izquierdo ) MENU 2 el que le sigue a su derecha y asi hasta MENU 7 que es el ultimo boton.
El procedimiento es para todos los botones el mismo solo deben haces doble click sobre el boton agregan la linea , cambian el link y listo. ( en caso que no aparezca para escribir el texto hacemos un click sobre la imagen y luego abajo agregamos la linea )


 

18) Para guardar nuestro menu , vamos archivo=>Exportar=>Exportar pelicula=>Aceptar ( no modificamos nada ahi) le ponemos el mismo nombre 0789 y lo guardamos en la carpeta TEMPLATE BY ASD\flash que descargamos por primera vez , si quieren guardar el original , sacan ambos arhivos (.swf y .fla) que estan dentro de la carpeta TEMPLATE BY ASD\flash y pegan solo el archivo que recien terminamos de crear.
Hacemos un paso atras y vamos a vistra-previa y ya podemos verlo como quedo terminado nuestro trabajo.
En caso que quieran ponerlo en su web , habrimos el index.php que tenemos dentro de la carpeta TEMPLATE BY ASD y copiamos solo estas lineas en el index de su web que se encuentra en C:\AppServ\www ( si tienen una intro deben pegarlo en el index1.php , tambien depende de la configuracion de su pagina deberan pegar ese codigo en todos los arhivos.php que sean los visibles) .


 


Ultima aclaracion y con esto me despido , si van a usarlo en la web recuerden que ademas del codigo para flash deben pegar tambien la carpeta flash que se encuentra dentro de la carpeta TEMPLATE BY ASD , ademas en el codigo para poner flash pueden editar el tamaño , etc. Si quieren cambiarle el nombre y que no lo busque dentro de la carpeta flash al archivo simplemente editas la parte del codigo que dice src="flash/0789.swf" ponen solamente ,src="0789.swf" si le quieren cambiar el nombre y lo llaman menu.swf entonces deberan poner src="menu.swf" ( deben modificar en dos lineas del codigo ya que se repite).
Ahora si me despido espero que sirva y que les sirva tambien , porque no solo aprendieron a modificar un menu en flash sino tambien aprendieron cosas basicas y no tan basicas sobre una herramienta de tipo profesional.




Espero que les haya servido, Muchas gracias