Estilo Flash Adobe Flash

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

This entry was posted on Monday, October 1st, 2007 at 1:13 pm and is filed under Action Script, Animación, Dibujo, Tutoriales. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.