Códigos interactivos en Animate CC

 Códigos Interactivos

Para este ejercicio realizaremos un interactivo en el que podamos arrastrar una figura y dejarla en una figura de su mismo color.

Para poder lograr esto, primero crearemos un botón, recordando que los nombre de instancia son clave a la hora de hacer la programación de nuestro interactivo.

Posteriormente entraremos a la edición del botón, crearemos la figura de nuestro botón, le daremos un color y con F6 crearemos fotogramas clave para las opciones interactivas del botón. El tamaño y el color de nuestro botón debe tener un cambio en "Sobre" para poder tener una animación básica en el botón.

Ahora crearemos un Clip de película al que le daremos un nombre similar al de nuestro botón para identificarlos mejor al momento de hacer la programación.

Dentro de este clip de película colocaremos el botón creado anteriormente y ese mismo Clip de película lo colocaremos sobre nuestra escena general.

Una vez teniendo estos elementos, en una capa nueva crearemos figuras de diferentes colores, una de estas figuras debe ser del mismo color del botón que creamos. Estas figuras pueden ir en una misma capa ya que esas no serás programadas. El siguiente paso es crear una figura en una nueva capa que esté por debajo de la capa de nuestras figuras, como recomendación, esta nueva figura debe ser lo más pequeña posible, ya que representa nuestra zona sensible con la que el botón tendrá la interacción que buscamos. Esta nueva figura la haremos un Clip de película, le daremos un nombre de instancia ya que ésta la usaremos para el código de nuestro interactivo.

A esa nueva figura le asignaremos el efecto de color Alpha(opacidad), y le daremos el valor de 0, esto quiere decir que su opacidad estará en 0.

Para este punto ya podemos iniciar con el código, solo deberemos tener en cuenta que necesitaremos conocer las coordenadas de nuestro botón y de nuestra área sensible con la que emparejaremos el botón.

Ahora colocaremos el código en el primer fotograma dentro de una nueva capa:

Dentro de este código es importante reconocer las acciones que le daremos a cada elemento; por un lado nuestro botón debe poder arrastrarse por toda nuestra escena al dar un clic y quedarse estático al momento de colindar con la figura que sea de su mismo color, de lo contrario, al soltar la figura en otra figura que no sea de su mismo color, regresará a su posición inicial dentro de la escena.

Debemos tener en cuenta dos elementos importantes que colocaremos en nuestro código; el nombre de instancia de nuestro botón, el nombre de instancia de nuestra zona sensible, y las coordenadas en X y Y de nuestro botón y zona sensible.

Lo que iremos modificando dentro del código serán los nombres de instancia, mayormente el de nuestro botón y las coordenadas, si el botón colinda con la zona sensible correspondiente, se detendrá en las coordenadas de X y Y de la zona sensible, de lo contrario regresará a sus coordenadas iniciales dentro de la escena.

Una vez que tengamos este primer código funcionando correctamente, podemos añadir más botones para tener un interactivo más completo, la única observación es que tendremos que cambiar ciertos nombres dentro del código con los nuevos botones correspondientes para que Animate CC no lo considere como una acción duplicada que resulte en un error dentro del interactivo.

Para resolver este error, solo tendremos que cambiar el nombre de la función para que corresponda con el nuevo botón que estamos programando.

Únicamente queda verificar que los nombres de instancia y las coordenadas dentro del código de cada nuevo botón interactivo sean correspondientes al que estamos colocando en el código para no generar errores.