Consejo rápido Explorando el panel de fragmentos de código de Flash CS5

En este Consejo rápido, le mostraré cómo usar el nuevo Panel de fragmentos de código de Flash CS5 para agregar fácilmente la interacción del teclado y el mouse a sus proyectos, sin necesidad de aprender AS3. Vamos a ver!

Vista previa del resultado final

Aquí está el resultado final que vamos a lograr. Con la ayuda del Panel de fragmentos de código, usamos el Clip de película de clic como un botón para iniciar la animación. Además, con las flechas del teclado puede mover el logotipo "active.tutsplus.com" y, si hace clic en él, lo llevará al sitio. Estas funciones se llevan a cabo con la ayuda del Panel de fragmentos de código..


Paso 1: Cargar Proyecto

Descargue el archivo zip de Source usando el enlace de arriba y extráigalo en algún lugar.

Abra Adobe Flash Professional luego haga clic en Archivo> Abrir.


Paso 2: Archivo de código abierto

Seleccione el archivo fuente descargado "Quick_Tip_Code_Snippets.fla".


Paso 3: Establecer nombre de instancia

Aquí a nuestra disposición hay un Banner Flash. Para darle alguna funcionalidad, vamos a utilizar el nuevo Panel de fragmentos de código de Flash CS5. Vamos a empezar con el clip de película "Haga clic". Elija la capa "Clic" y luego el Clip de película con la Herramienta de selección (acceso directo V). En la ventana Propiedades dale el nombre de Instancia "Clic".


Paso 4: Abrir el panel de fragmentos de código

Ahora abra el Panel de fragmentos de código (si no puede verlo, vaya a Ventana> Fragmentos de código). Seleccione la categoría Navegación en la línea de tiempo> Haga clic para ir a Encuadre y jugar. Haz doble clic en él.

PD Recuerde que antes de abrir el Panel de fragmentos de código, debe seleccionarse el Clip de película "Click".


Paso 5: Modificar el código generado automáticamente

Después de eso, se abrirá el panel de acción y verá un código con instrucciones. Sigamos las instrucciones y cambiemos el número 5 entre paréntesis al número 2. Esto hará que nuestra animación se reproduzca desde el cuadro 2 si hacemos clic en nuestro Clip de película "Haga clic".

He agregado algunas animaciones a la línea de tiempo desde el fotograma 2 en adelante, por lo que las verás cuando se haga clic en el botón..


Paso 6: Clip de película ActiveTuts

Lo siguiente que debemos hacer es dar algunas funciones a nuestro Clip de Película ActiveTuts. Selecciónelo en el escenario y asígnele el nombre de instancia "ActiveTuts".


Paso 7: Movimiento con teclado

Con el Clip de película "ActiveTuts" seleccionado, vaya a Panel de fragmentos de código> Animación> Mover con flechas del teclado. No cambiaremos los parámetros predeterminados del código ya que sirven bien. Esta función nos permitirá mover nuestro Clip de Película ActiveTuts con las flechas del teclado.


Paso 8: Enlace seleccionable

Además, vamos a hacer que nuestro clip de película ActiveTuts se comporte como un enlace. Una vez más, con él seleccionado, vaya al Panel de fragmentos de código> Acciones> Haga clic para ir a la página web.

Debes tener el siguiente código en tu Panel de Acciones:


Paso 9: URL

Se abrirá nuestro panel de acciones y allí veremos algunas instrucciones sobre cómo cambiar la URL que necesitamos. En mi caso lo cambiaré a "http://active.tutsplus.com".

Lo último que necesitamos es escribir un detener() Funciona al final del código en el marco 1. Después de esto, puede obtener una vista previa de lo que hemos logrado.

Conclusión

¡Ahora sabes cómo usar el nuevo Panel de fragmentos de código! Es útil tanto para las personas que saben AS3 (ahorra tiempo) como para aquellos que comienzan a sumergirse en él. Da la oportunidad de agregar algunas acciones a los objetos sin escribir una sola línea de código!

Espero que te haya gustado este Consejo rápido y que te ayude. Gracias por leer!

Editor: Solo una última cosa: no olvide que puede almacenar y compartir todos sus fragmentos de código en snipplr.com, ¡la última incorporación a la red Envato!