Tecnología

Inicio

Cómo crear la navegación web flash animada

Cómo crear la navegación web flash animada


La creación de una navegación de Flash ActionScript 3 animada no sólo añade interactividad a su sitio web, sino que también permite a los usuarios saber dónde están. Las formas de añadir animación a la navegación está limitada sólo por la imaginación, pero para empezar, va a crear una simple pelota que sigue el puntero del ratón a lo largo del menú de navegación. Esta lección también utiliza matrices; para aquellos de ustedes que son nuevos arreglos, esta es una gran manera de conseguir sus pies mojados.

Instrucciones

1 Open Flash y haga clic en "Archivo", "Nuevo" y luego haga clic en "Archivo Flash (ActionScript 3.0)" en el menú desplegable. Haga clic en la herramienta Rectángulo de la barra de herramientas, y mientras mantiene pulsado el ratón, arrastre a través de la etapa para dibujar un rectángulo. Haga clic en la herramienta Texto y escriba "Play" en la parte superior del rectángulo.

2 Haga clic en tanto el rectángulo y el texto "Play" para destacarlos. En el menú principal, haga clic en "Modificar", a continuación, haga clic en "Convertir en un nuevo símbolo" del menú desplegable. Haga clic en el cuadro radial "botón" y el tipo de "reproducirMC" para el nombre.

3 Haga clic en "Ventana" y en el menú principal y luego haga clic en "Propiedades" y luego "Propiedades" de nuevo en el menú desplegable. Con su fondo y texto resaltado aún, el tipo de "home_btn" en el campo Nombre de instancia en el panel de propiedades.

4 Haga clic en "Insertar capa" en la parte inferior de la línea de tiempo, y el nombre de "botones". Haga clic en la herramienta de texto en la barra de herramientas. En el panel Propiedades, haga clic en "Texto estático". Escriba los encabezados de navegación, tales como "Inicio", "Acerca de" y "Contacto".

5 Haga clic en "Inicio" y haga clic en "Convertir en símbolo" del menú desplegable. El nombre de "Inicio", haga clic en "botón" para el tipo de símbolo y, a continuación, en la fila inferior de Registro, haga clic en la casilla de verificación medio. Haga clic en Aceptar."

6 El tipo de "home_btn" para un nombre de instancia en el panel Propiedades. Repita este proceso para todas sus partidas de navegación. Dé a cada instante un nombre único como "contact_btn."

7 Haga clic en "Insertar capa" en la parte inferior de la línea de tiempo, y el nombre de "animar". Haga clic en la herramienta Óvalo de la barra de herramientas y dibujar una pelota en el escenario manteniendo el puntero del ratón y arrastrando. Coloca el balón por debajo del botón de "Inicio".

8 Haga clic en la pelota y luego haga clic en "Convertir en símbolo" del menú pull-out, el nombre de "ball_mc" y hacer clic en "Clip de película" para el tipo de símbolo. Haga clic en Aceptar."

9 Haga clic en "Insertar capa" en la parte inferior de la línea de tiempo, y el nombre de "AS3." Haga clic en el fotograma 1 de la capa de acción y haga clic en "Acción" del menú desplegable. Escriba el siguiente código:

fl.transitions.Tween importación;

importar fl.transitions.easing. *;

/ Cambiar BTN nombres según sea necesario /

var buttonsArr: Array = new Array (home_btn, contact_btn);

var linkArr: Array = new Array ();

/ Cambiar la dirección de navegación aquí /

linkArr.push ( "http://www.google.com/");

linkArr.push ( "http: //www.yahoo.com.html");

for (var i: uint = 0; i <buttonsArr.length; i ++) {

buttonsArr [i] .addEventListener (MouseEvent.ROLL_OVER, moveFollow);

buttonsArr [i] .addEventListener (MouseEvent.CLICK, clickurl);

}

función moveFollow (event: MouseEvent): void {

nueva Tween (ball_mc, "x", Strong.easeOut, ball_mc.x, event.currentTarget.x, 1, true);

}

función clickurl (event: MouseEvent): void {for (var j: uint = 0; j <linkArr.length; j ++) {

si (== event.currentTarget buttonsArr [j]) {

navigateToURL (nueva URLRequest (linkArr [j])); }}}