PROGRAMA DE ESTUDIOS DE COMPUTACIÓN E INFORMÁTICA

ANIMACIÓN DE GRÁFICOS CON

ACTION SCRIPT 3.O

1° Paso.- Ingresar a Flash y más específicamente a ActionScript 3.0 (AS 3.0)

ActionScript 3.0 es el lenguaje de programación usado por Flash Professional y las demás aplicaciones que
forman parte de la plataforma Flash, con el que puedes crear elementos dinámicos e interactivos de alto impacto
para el usuario.

2° Paso.- Cree 4 capas con los nombres que se muestran en la siguiente imagen:

3° Paso.- En la capa botón crear el primer fotograma clave en blanco (En Flash CC ya viene por default fotograma clave
en blanco)

4° Paso.- Cree un círculo y seleccione, que le daremos la función de un botón (Puede ser cualquier figura combinada),
de manera similar a la siguiente figura:

Ing. Nilton Cesar LAURA MIRANDA

 PROGRAMA DE ESTUDIOS DE COMPUTACIÓN E INFORMÁTICA

5° Paso.- Convierta el círculo en clip de película que tenga el nombre de botón_mc

En sus propiedades en nombre de la instancia también darle el nombre de “boton_mc”

6° Paso.- cree dos fotogramas clave en blanco en las capas rojo y verde en los fotogramas 20 y 40 respectivamente,
como muestra la siguiente figura:

7° Paso.- Crear en el fotograma 20 de la capa rojo una circunferencia de color rojo y otra circunferencia en el
fotograma 40 de la capa verde de color también verde.

Si prueba hasta aquí mostrara una animación intermitente, ahora programaremos un comportamiento mas coordinado.

Ing. Nilton Cesar LAURA MIRANDA

 PROGRAMA DE ESTUDIOS DE COMPUTACIÓN E INFORMÁTICA

8° Paso.- En la capa codigo darle clic derecho al primer fotograma clave en blanco y seleccionar acciones

Ahora realice la prueba, note que se queda en el primer fotograma, esto es debido a que indicamos que realice un pare
(stop ()).

8° Paso.- Ahora dale nombre al fotograma 20 de la capa rojo con el nombre rojo20

Ing. Nilton Cesar LAURA MIRANDA

 PROGRAMA DE ESTUDIOS DE COMPUTACIÓN E INFORMÁTICA

De similar forma al fotograma 40 de la capa verde con el nombre verde40

Ya se crearon entonces las etiquetas respectivas (Fotogramas con banderitas)

9° Paso.- Ahora nuevamente ingresemos a la opción acciones del primer fotograma de la capa codigo. Ingresar el
siguiente código:

Note que si probamos, ahora ya le dimos una acción al botón que diseñamos al inicio:

10° Paso.- Ahora para indicarle que el ´primer círculo de la capa botón sea efectivamente un botón, añadiremos el
siguiente código.
Ing. Nilton Cesar LAURA MIRANDA
 PROGRAMA DE ESTUDIOS DE COMPUTACIÓN E INFORMÁTICA

Si ahora probamos nota que cada vez que pases por el círculo aparecerá una imagen de a manera de una manito en el
puntero del mouse indicando que la imagen se trata de un botón.

11° Paso.- y Así podemos mejorar nuestras animaciones

Ahora escucha a tu instructor a ver de como practicarás y profundizaras tus conocimientos.

Ing. Nilton Cesar LAURA MIRANDA