Tutorial Flash 8 Efecto 3d Aplicado a un Menú. El tutorial que presento en a continuación es de los más fácil de hacer, y los alcances que puedes llegar a tener son incalculables. Por si solo el efecto 3d que se logra obtener con el action script es fantástico y si este se aplica a un botón se lograra un menú con efecto de rotación 3d. Por el momento es todo lo que puedo decir de este trabajo, mejor te invito a que realices el tutorial y así te convencerás de que esto es enorme. Goog luck! ☺ ¿Comenzamos?☺
1-. Comenzar por hacer un documento (ctrl. + J), con las siguientes propiedades.
a)-. Las dimensiones del documento son 300 * 300 píxeles de ancho y alto.
b)-. Colocar como color de fondo #003366.
c)-. Usar en esta ocasión como velocidad de fotogramas 15 fps.
2-. Crear el primero de dos símbolos (ctrl. + F8) de que consta la película.
a)-. Nombrarlo efecto de botón.
b)-. En la opción Tipo seleccionar la casilla Botón.
3-. En este símbolo diseñar un botón, en el estado de Sobre de la línea de tiempo.
a)-. Las dimensiones en esta ocasión son 145.0 * 25.0 píxeles de ancho y alto.
b)-. Disminuir el color alfa a un 50 % en cualquier tipo de color que uses #001933.
c)-. Colocar el diseño del botón en coordenadas X = 0.0 y Y = 0.0.
4-. Crear el segundo de los símbolos (ctrl. + F8).
a)-. Nombrarlo menú.
b)-. En la opción Tipo seleccionar la casilla Clip de película.
5-. Ubicado en el símbolo cambiar el nombre de la capa por el de texto.
a)-. Hacer visible el panel de Información (ctrl. + I).
b)-. Insertar un campo de texto estático de dimensiones 159.0 * 28.1 píxeles.
c)-. Seleccionar la casilla del centro como se muestra en la imagen y luego colocar el campo de texto en coordenadas X = – 80.0 y Y = – 80.0.
6-. La palabra que esta inscrita en el campo de texto no aparecerá en la película final.
a)-. Dar formato al texto, esto es en estilo de fuente, tamaño de fuente, el color del texto.
b)-. Seleccionar la opción de alinear en el centro.
c)-. En la opción Variable (Var:) colocar la palabra nombre.
7-. Insertar una segunda capa y cambiar el nombre por el de botón, ocultar la capa texto.
a)-. Arrastrar desde la biblioteca el símbolo efecto de botón.
b)-. Colocar el símbolo en coordenadas X = – 80.0 y Y = – 80.0.
8-. Seleccionar el símbolo de botón (no el fotograma).
a)-. Abrir la barra de Acciones- botón e insertar luego el siguiente código action script.
on (rollOver) {
_root.boton = 1;
}
on (rollOut) {
_root.boton = 0;
}
9-. Regresar a la Escena, cambiar el nombre de la capa por el de película de botón.
a)-. Arrastrar desde la biblioteca el símbolo menú. Las coordenadas en que se coloque el símbolo no son de importancia, ya que el action script colocara la película en las coordenadas indicadas.
b)-. Abrir la barra de Acciones – clip de película e insertar el código.
onClipEvent (load) {
radio = 50.0;
posX = 200;
posY = 200;
grados = -100;
vel = 0.1;
nombre = “Contact”;
}
onClipEvent (enterFrame) {
if (_root.boton == 0) {
x = Math.cos(grados)*radio;
y = Math.sin(grados)*2*radio;
this._xscale = x+posX/3;
this._yscale = x+posY/3;
this._x = x+posX;
this._y = y+posY;
grados += vel;
}
}
10-. Arrastrar nuevamente el símbolo menú y ahora insertar este código action script.
onClipEvent (load) {
radio = 50.0;
posX = 200;
posY = 200;
grados = 200;
vel = 0.1;
nombre = “Portfolio”;
}
onClipEvent (enterFrame) {
if (_root.boton == 0) {
x = Math.cos(grados)*radio;
y = Math.sin(grados)*2*radio;
this._xscale = x+posX/3;
this._yscale = x+posY/3;
this._x = x+posX;
this._y = y+posY;
grados += vel;
}
}
Nota Insertar dos botones más este es el código para uno de ellos.
onClipEvent (load) {
radio = 50.0;
posX = 200;
posY = 200;
grados = 500;
vel = 0.1;
nombre = “Services”;
}
onClipEvent (enterFrame) {
if (_root.boton == 0) {
x = Math.cos(grados)*radio;
y = Math.sin(grados)*2*radio;
this._xscale = x+posX/3;
this._yscale = x+posY/3;
this._x = x+posX;
this._y = y+posY;
grados += vel;
}
}
Este es el código para el segundo botón.
onClipEvent (load) {
radio = 50.0;
posX = 200;
posY = 200;
grados = 800;
vel = 0.1;
nombre = “Company”;
}
onClipEvent (enterFrame) {
if (_root.boton == 0) {
x = Math.cos(grados)*radio;
y = Math.sin(grados)*2*radio;
this._xscale = x+posX/3;
this._yscale = x+posY/3;
this._x = x+posX;
this._y = y+posY;
grados += vel;
}
}
11-. El menú que se presentara en el archivo swf será de Contact, Portfolio, Services y Company. Para cambiar estos nombres solamente seleccionar cada uno de los botones y el en código sustituir en la paparte nombre = “Contact”; por el la frase que quieras que aparezca en el menú Ej. nombre = “Galería”; nombre = “Contacto”; nombre = “inicio”; etc.
12-. Final mente insertar una segunda capa y cambiar el nombre por el de acciones.
a)-. Seleccionar el fotograma insertado y abrir la barra de Acciones – fotograma y escribir el script siguiente.
boton = 0;
stop();
Con este paso queda concluido el tutorial, como acabas de comprobar los pasos son muy cómodos de seguir para realizar este trabajo de menú. ☺ Well done! ☺
P.D. Presionar ctrl. + Enter para visualizar el trabajo. Espero que hayas quedado satisfecho con este tutorial y que le puedas dar otras aplicaciones. ☺ Hasta pronto ☺
Visualizar el archivo swf de este tutorial
Descarga el archivo fla de este tutorial
Artículos relacionados:
Como se programan estos botones para que pasen a otra escena
como se cambia de escena por favooooor!
holasss me encanto este tutorial!!!!!!!! lo que si quisiera q fuera una galeria de imagenes.. como deberia programar los link (o sea el texto q gira!) para que me muestre al lado la imagen??? = voy hacerlo como una practica y a ver si entiendo el codigo!!!(los novatos somos asi!!)jejeje salutes y felicito de nuevo por este tutorial!!!!
Al ver el código puedo ver claramente que estas manejando las posiciones de cada item de menu en coordenadas polares y que luego conviertes a coordenadas rectangulares (cartesianas) para ubicar cada item en pantalla. ¿ estoy en lo correcto ?. pero tengo una duda, ¿ porque multiplicas por 2 en:
y = Math.sin(grados)*2*radio;
saludos y buen tutorial (me da varias ideas)
como hago si necesito cinco botones