Adobe Animate CC ( anteriormente Flash Professional CC) y Flex® pueden utilizarse de forma conjunta de distintas maneras, incluyendo la creación de componentes y gráficos personalizados en Animate para su uso en Flex®. Los siguientes tutoriales muestran distintos modos en los que Animate® y Flex® se pueden utilizar de forma conjunta.

Nota: El flujo de trabajo de vista de diseño entre Animate y Flash Builder está en desuso. Si se inicia dicho flujo de trabajo desde Flash Builder 4.6, se devolverá una excepción en Animate.

Es posible que algunos de los flujos de trabajo de Flash Builder no admitan las últimas versiones de Animate CC (de 2017 en adelante). 

Edición y depuración ActionScript con Animate y Flash Builder

Antes de comenzar

Para poder habilitar estos flujos de trabajo de Animate/Flash Builder, asegúrese de contar con las siguientes condiciones:

  • Las aplicaciones Flash CS5 y Flash Builder 4 están instaladas.

  • Para iniciar un archivo de FLA desde Flash Builder, el proyecto se debe asignar a la naturaleza del proyecto de Animate en el panel Package Explorer.

    Para obtener más información sobre la asignación de naturalezas de proyectos en Flash Builder, consulte la ayuda de Flash Builder.

  • Para iniciar un archivo FLA en Flash Builder, el proyecto debe tener un archivo FLA asignado para utilizarse para comprobación y depuración en las propiedades de Animate CC del proyecto.

Comprobación, depuración y publicación en Animate desde Flash Builder

Para realizar la comprobación o depuración en Animate con un archivo que se esté editando en Flash Builder 4:

  • Desde la perspectiva de desarrollo de Flash Builder, seleccione Run > Test Movie o Run > Debug Movie. Observe que cada elemento de menú tiene un icono de Animate junto al mismo. Una vez que la ventana de SWF o la sesión de depuración se haya cerrado, el trabajo seguirá en Flash Builder a no ser que existan errores del compilador en los scripts del fotograma dentro del archivo FLA asociado con el proyecto. La información sobre todos los errores se envía al panel Errors de Flash Builder.

Para publicar el archivo FLA asociado al proyecto actual en Flash Builder:

  • Desde la perspectiva de desarrollo de Flash Builder, seleccione Project > Publish Movie. Observe el icono de Animate junto al comando de menú.

Edición de archivos AS en Flash Builder desde Animate 

Para crear una nueva interfaz o clase de ActionScript 3.0 y asignar Flash Builder como editor:

  1. Seleccione Archivo > Nuevo.

    Nuevo documento
    Nuevo documento
  2. Elija una categoría de su elección en las pestañas de la parte superior de la pantalla, como Animación de personajes, Social, Juego, Educación, Anuncios, Web y Avanzado. En el cuadro de diálogo Nuevo documento, seleccione la interfaz o la clase de ActionScript 3.0.

  3. En el cuadro de diálogo Crear clase/interfaz de ActionScript 3.0, seleccione Flash Builder como aplicación para crear el archivo y haga clic en Aceptar. Se abrirá Flash Builder.

  4. En Flash Builder, seleccione un archivo FLA o XFL para asociarlo al archivo de ActionScript y haga clic en Finish.

Para abrir y editar un archivo AS en Flash Builder desde Animate:

  1. En el panel Biblioteca, haga clic con el botón derecho en un símbolo asociado a la clase o interfaz y seleccione Propiedades.

  2. En el cuadro de diálogo Propiedades de símbolo, haga clic en Editar definición de clase.

  3. En el cuadro de diálogo Editar ActionScript 3.0 que aparece, compruebe que el editor asignado al archivo AS es Flash Builder y haga clic en Aceptar.

    Si Flash Builder no está asignado para editar el archivo, seleccione Flash Builder como aplicación para editar el archivo de clase y haga clic en Aceptar.

    Flash Builder se abrirá para editar el archivo.

Creación de componentes para Flex

En Adobe Animate, puede crear contenido para su uso como componentes en aplicaciones de Adobe® Flex®. Este contenido puede incluir elementos visuales y código de Adobe® ActionScript® 3.0.

La creación de componentes en Animate para su uso en Flex permite aprovechar las capacidades de diseño gráfico flexible de Animate, mientras que también se utilizan las capacidades de Flex.

Para crear componentes de Flex en Animate, debe instalar el kit de componentes de Flex para Animate. El kit se instala con el uso de Adobe Extension Manager. Es posible que algunas versiones del kit de componentes no admitan todas las funciones de Adobe Animate, por lo que debe asegurarse de descargar la versión más reciente del kit en www.adobe.com/go/flex_ck_es.

Para obtener más información sobre el uso de Flex y Animate de forma conjunta, consulte la documentación de Flex en el sitio web de Adobe en www.adobe.com/go/learn_flexresources.

Para crear un componente de Flex en Animate:

  1. Compruebe que haya instalado Adobe Extension Manager. Para descargar Extension Manager, visite la página de descarga de Extension Manager en www.adobe.com/go/extension_manager_dl_es.

    De forma predeterminada, Extension Manager se instala con las aplicaciones de Adobe Creative Suite.

  2. Descargue e instale el kit de Componentes de Flex, disponible en www.adobe.com/go/flex_ck_es. Asegúrese de salir de Animate antes de instalar el kit de componentes. Para obtener más información sobre la instalación de extensiones con Adobe Extension Manager, consulte www.adobe.com/go/learn_extension_manager_es.

  3. Inicie Animate. En el menú Comandos aparecen dos nuevos comandos, Convert Symbol to Flex Component (Convertir símbolo en componente de Flex) y Convert Symbol to Flex Container (Convertir símbolo en contenedor de Flex).

  4. En Animate, cree un símbolo de clip de película que contenga las ilustraciones y el código de ActionScript 3.0 que desee incluir en el componente Flex. El contenido se debe incluir en un símbolo de clip de película antes de la conversión de un componente de Flex.

  5. Antes de convertir el clip de película en un componente de Flex, compruebe que cumple los siguientes requisitos para la compatibilidad con Flex:

    • La velocidad de fotogramas del archivo FLA debe ser de 24 fps y debe coincidir con la de todos los proyectos de Flex que harán uso del componente.

    • El punto de registro se debe situar en el punto 0, 0 del clip de película.

      nota: para garantizar que todo el contenido del clip de película cuente con un punto de registro de 0, 0, haga clic en el botón Editar varios fotogramas en la parte inferior de la línea de tiempo, seleccione todos los fotogramas en la línea de tiempo del clip de película, seleccione todo el contenido en todos los fotogramas y muévalo hasta 0, 0 en el inspector de propiedades.

  6. Seleccione el clip de película en el panel Biblioteca y elija Comandos > Convert Symbol to Flex Component (Convertir símbolo en componente de Flex).

    Animate convierte el clip de película en un componente de Flex, cambia su icono a un icono de Flex en la biblioteca e importa el clip compilado de la clase FlexComponentBase a la biblioteca. Animate incorpora FlexComponentBase en el archivo SCW del componente de Flex creado en el siguiente paso.

    Se deben tener en cuenta los mensajes de progreso que aparecen en el panel Salida mientras Animate convierte el clip de película.

  7. Seleccione Archivo > Publicar para crear un archivo SWC que contenga el componente de Flex compilado. Animate también crea un archivo SWF desde el archivo FLA principal, pero puede ignorar el archivo SWF, si lo desea. El archivo SWC del componente publicado está ahora listo para su uso en Flex.

  8. Para utilizar el archivo SWC en Flex, realice una de las siguientes operaciones:

    • Copie el archivo SWC en Animate y péguelo en la carpeta de papelera de reciclaje de su proyecto de Flex.

    • Añada el archivo SWC a la ruta de biblioteca del proyecto de Flex. Para obtener más información, consulte la documentación de Flex Builder en www.adobe.com/go/learn_flexresources.

Utilización de metadatos de Flex

Si está escribiendo código ActionScript 3.0 para su uso en Flex, puede situar metadatos en el código para incorporar archivos externos en cualquier archivo SWF publicado que incluya el código ActionScript. Generalmente, estas declaraciones de metadatos [Embed] se utilizan para incorporar archivos de imagen, símbolos individuales u otros archivos SWF en el archivo SWF.

Recuerde que los metadatos son “datos sobre datos”. Los metadatos se añaden a ActionScript en la línea que precede inmediatamente a la línea de código a la que se aplican los metadatos. El compilador considera los metadatos al compilar la línea de código que los sigue.

Por ejemplo, para incorporar una imagen denominada button_up.png que esté almacenada en el directorio un nivel superior al archivo ActionScript, se utilizaría el siguiente código ActionScript:

[Embed(“../button_up.png”)]

private var buttonUpImage:Class;

La etiqueta de metadatos [Embed] indica al compilador que incorpore el archivo llamado button_up.png en el archivo SWF y que el archivo se debe asociar con la variable denominada buttonUpImage.

Para obtener más información sobre la incorporación de activos con metadatos en Flex, consulte el tema sobre incorporación de activos en la guía del desarrollador de Flex 3, en www.adobe.com/go/learn_flexresources.

Si utiliza una función que requiere el SDK de Flex como, por ejemplo, metadatos[Embed], en tiempo de compilación Animate indica que añada el archivo Flex.SWC a la ruta de biblioteca de su archivo FLA. El archivo Flex.SWC contiene clases compiladas necesarias para admitir los metadatos de Flex. Haga clic en la opción para actualizar la ruta de biblioteca en el cuadro de diálogo para añadir Flex.SWC a la ruta de biblioteca. También puede añadir el archivo Flex.SWC a la ruta de biblioteca en la configuración de publicación de ActionScript más adelante.

Recursos adicionales

Los siguientes recursos proporcionan información adicional y ejemplos sobre la integración de Animate con Flash Builder:

Esta obra está autorizada con arreglo a la licencia de Reconocimiento-NoComercial-CompartirIgual 3.0 Unported de Creative Commons.  Los términos de Creative Commons no cubren las publicaciones en Twitter™ y Facebook.

Avisos legales   |   Política de privacidad en línea