Semana No.5

 Botones en Animate 

Hicimos la práctica en una archivo nuevo en el que creamos dos escenas 


Insertar - Escena 

Para así poder practicar la acción de cambio de escenario con nuestros botones, así que teníamos que prepararnos para la idea de ver código. 
Después de esto era momento de agregar los botones, tiene el mismo camino que escena pero en este caso presionamos "Nuevo Símbolo".




Le asignaremos un nombre y la función de botón, en la biblioteca los encontraremos, sin importar cuantos hayamos creado. 


Vamos a darle una instancia a cada botón y esto nos servirá al momento del código. Teniendo nuestro objeto seleccionado iremos a propiedades y simplemente le asignaremos el nombre por el cual el código lo va a conocer. 




Para trabajar en ellos daremos clic en el símbolo y nos abrirá una capa donde podremos crearlos y editarlos. Ahí crearemos una figura geométrica cualquiera y la centraremos a la escena.


Despues en nuestra línea del tiempo, seleccionando la figura presionaremos F6 4 veces para duplicar esta figura en cada parte que necesitamos. "Sobre, Presionando y Zona Activa" ya que el primero es "Reposo" 

En el fotograma "Sobre" es donde asignaremos esa acción y o animación que queremos que cumpla nuestro botón, en este caso solo haremos que cumpla un cambio de color y tamaño. 


 Y haremos lo mismo para nuestro segundo botón. 




Regresamos a las escenas y es ahí donde nos pondremos serios, comenzaremos a agregar nuestros botones y el código para que funcione. 

En una capa pondremos los botones, arrastrándolos desde biblioteca al escenario. Le daremos un espacio de 20 fotogramas presionando F6.


Y ya ahí podremos darle el tamaño que queramos, después es importante crear una capa para el código, colocados en el último fotograma presionamos F9 que nos abrirá la ventana de "Acciones" donde agregaremos el código. 


stop ();

 


morado.addEventListener(MouseEvent.CLICK, fl_ClickToGoToScene_1);

 

function fl_ClickToGoToScene_1(event:MouseEvent):void
{​​​​​
    MovieClip(this.root).gotoAndPlay(1, "Escena 2");
}

La instancia que le dimos al principio es la que pondremos como primer palabra y obviamente la escena a la que vamos dirigidos con este botón.
Y un código de stop para que no se pase automáticamente de escena en cuanto termine sus fotogramas. 


Haremos lo mismo en nuestra segunda escena con el segundo botón y cambiaremos lo resaltado. 


stop ();

 


rosita.addEventListener(MouseEvent.CLICK, f2_ClickToGoToScene_2);

 

function f2_ClickToGoToScene_2(event:MouseEvent):void
{​​​​​
    MovieClip(this.root).gotoAndPlay(1, "Escena 1");
}

Para ver como funciona presionaremos Ctrl Enter y deberá llevarnos sin problema a la escena 2 y viceversa. 






Comentarios