I. Técnicas avanzadas de animación

En este capítulo, analizamos una serie de herramientas y técnicas avanzadas que tenemos disponibles en Adobe Edge Animate. Si bien se puede hacer mucho a través del movimiento calculado a través de la línea de tiempo, hay muchas más posibilidades que se pueden realizar a través de una mayor exploración. Estas técnicas avanzadas proporcionan una mayor cantidad de control y potencial expresivo dentro de nuestras composiciones a través de las siguientes características:

Recorte
La herramienta de recorte
Animación con hojas de sprites
Animación con secuencias PNG

Emplearemos el contenido examinado en las páginas siguientes para llevar las composiciones animadas al siguiente nivel y expandir el uso de Edge Animate con herramientas complementarias, como las que se encuentran en Flash Professional CS6 y otras aplicaciones de Adobe Creative Suite.

Recorte

El recorte es un mecanismo mediante el cual podemos definir un rectángulo de recorte en el elemento seleccionado para ocultar partes de ese elemento de la vista. Esto es similar al concepto de enmascaramiento que se encuentra en algunas otras aplicaciones, pero es más limitado ya que estamos limitados a una máscara de recorte rectangular. De forma predeterminada, un rectángulo de recorte de elementos está configurado para mostrar todo de cualquier elemento en particular, sin que ninguna parte esté oculta en absoluto.

Esto es similar a configurar la propiedad Desbordamiento de un elemento en oculto al anidar elementos dentro de él para ocultar partes de los elementos secundarios del elemento principal, aunque el recorte no proporciona configuraciones de desbordamiento.

Propiedades de clip

Dependiendo del tipo de elemento seleccionado al recortar, podemos modificar una serie de propiedades relacionadas con la herramienta Recortar (C). Si se selecciona un elemento de imagen, podemos modificar las posiciones de Clip, las propiedades superior, inferior, izquierda y derecha, así como la posición de fondo de la fuente de la imagen. Para cualquier otro elemento, tenemos acceso solo a las cuatro propiedades de posición de Clip como se muestra en las siguientes propiedades:

Inicialmente podemos pensar que es extraño que la posición de fondo del elemento de imagen se pueda controlar en línea con las propiedades de Clip. Sin embargo, si viene a Edge Animate con experiencia en Adobe InDesign, esta combinación le resultará familiar de inmediato.

La herramienta de recorte

Edge Animate incluye una herramienta dedicada para recortar visualmente elementos en el escenario. Se accede a la herramienta Recortar (C) desde la barra de herramientas y se coloca en el lado derecho de la herramienta Transformar, como se muestra en la siguiente captura de pantalla:

La herramienta Recortar aparece como un pequeño cuadro relleno encerrado dentro de un cuadro más grande que está indicado por un borde discontinuo.

Seleccionar la herramienta Recortar nos permite ajustar las propiedades de Clip de cualquier elemento visual. Simplemente elija la herramienta Recortar y seleccione cualquier elemento en el escenario para ajustar las propiedades de Clip superior, inferior, izquierda y derecha. Consulte la siguiente captura de pantalla:

Un elemento seleccionado con la herramienta Recortar aparecerá como se muestra en esta captura de pantalla. El rectángulo de recorte se muestra con bordes verdes. Cualquier cosa que se oculte detrás del rectángulo de recorte aparecerá como una sombra con un patrón de líneas diagonales.

También podemos realizar ajustes en la posición de fondo de nuestros elementos de imagen con esta herramienta.

Elementos de imagen y la herramienta de recorte

Cuando se selecciona un elemento de imagen con la herramienta Recortar (C), veremos una pequeña superposición de icono en el centro de la imagen. Esta es la superposición de ajuste de posición de fondo y aparece casi como una pequeña rosquilla. Se conoce como el capturador de contenido. Si hacemos clic en este pequeño control y lo arrastramos por el escenario, cambiará la posición de fondo de la fuente de la imagen más allá de los límites de nuestro rectángulo de recorte. Esto funciona de manera similar a ajustar el rectángulo de recorte directamente, pero en este caso el rectángulo en sí no se altera, solo el contenido dentro.

La captura de pantalla anterior muestra el desplazamiento de una fuente de imagen mediante la manipulación visual de la pequeña superposición del capturador de contenido de ajuste de posición de fondo, ubicada originalmente en el centro de un elemento de imagen.

Revelar elementos de imagen y texto mediante recorte

El recorte es una excelente manera de revelar elementos dentro de nuestra composición a través de la animación. En el siguiente ejemplo, revelaremos una serie de elementos de texto e imagen animando las propiedades de Clip de cada elemento en el escenario.

Este ejemplo de proyecto completado se encuentra en el directorio llamado Clipping Text.

Descargar el código de ejemplo

Puede descargar los archivos de código de ejemplo para todos los libros de Packt que haya comprado desde su cuenta en http://www.packtpub.com.¹ Si compró este libro en otro lugar, puede visitar [invalid URL removed] y registrarse para que los archivos se le envíen por correo electrónico directamente.

1. github.com

github.com

Para realizar este ejemplo, comenzaremos creando una serie de elementos en el escenario:

Primero establezca las propiedades del escenario para este proyecto. Utilice los valores que desee. En este ejemplo, hemos creado nuestro escenario con un ancho que tiene un valor de 650 píxeles, un valor de 350 píxeles para la altura y con un color de fondo del valor de #000000.
También hemos incluido una imagen texturizada como lavado de fondo para este ejemplo. Este elemento no se va a animar, por lo que no tiene consecuencias en términos del ejemplo en sí, aunque es bueno tener un fondo más interesante dentro de nuestra composición Edge.
Ahora importe una imagen (a través de Archivo | Importar…) en el panel Escenario directamente oa través de la Biblioteca. En este ejemplo, estamos usando el logotipo de Adobe Edge Animate y lo hemos centrado en el escenario. Esto proporcionará experiencia en el recorte con elementos de imagen.

Tenemos que establecer tres elementos de texto distintos para este proyecto. Uno debería leer Adobe Edge, otro debería leer Rich Motion and Interactivity y el tercero debería usar estándares web.

Para el primer elemento de texto, colóquelo encima del logotipo y ajuste las propiedades de la siguiente manera:

Nombre de fuente: Tahoma, Ginebra, sans-serif

Tamaño de fuente: 66 px

Color del texto: #15ea83

Negrita: activada

Cursiva: desactivada
Para el segundo elemento de texto, colóquelo debajo del logotipo y ajuste las propiedades de la siguiente manera:

Nombre de fuente: Arial Black, Gadget, sans-serif

Tamaño de fuente: 37 px

Color del texto: #caecdb

Negrita: desactivada

Cursiva: desactivada
Para el tercer elemento de texto, colóquelo debajo del segundo elemento de texto y ajuste las propiedades de la siguiente manera:

Nombre de fuente: Arial Black, Gadget, sans-serif

Tamaño de fuente: 30 px

Color del texto: #629d8d

Negrita: desactivada

Cursiva: activada animando cada uno de estos elementos a través de la línea de tiempo:
Comencemos con el elemento de imagen, ya que es el más complejo. Elija la herramienta Recortar (C) y seleccione el elemento de imagen. Notará que hay una pequeña superposición de capturador de contenido en forma de rosquilla que aparece en la imagen. Este es un control que nos permite ajustar la posición de fondo del archivo fuente para este elemento de imagen con la herramienta Recortar. Puede tener sentido explorar esta herramienta antes de continuar, haciendo clic en ella y arrastrándola por la pantalla.
Cuando estemos listos para continuar, habilitaremos Fijar (P) en la línea de tiempo y lo colocaremos en 00:01.500; mueva el cabezal de reproducción a 00:00.500. Haga clic y arrastre cada lado del rectángulo de recorte hasta que la imagen esté totalmente oscurecida.
Antes de continuar, hagamos algunos ajustes más. Establezca Escala X y Escala Y en 125% y la Opacidad en 18%; esto proporcionará algunos efectos interesantes junto con la revelación de recorte de este elemento de imagen.
Ahora seleccione el primer elemento de texto con la herramienta Recortar (C). Observe que esta vez no hay superposición de rosquilla. Eso es porque este elemento no tiene ninguna imagen asociada.
Vamos a utilizar el mismo intervalo de tiempo exacto ya establecido para nuestra transición, por lo que simplemente tomamos el indicador de transición azul entre el cabezal de reproducción y el pin y lo arrastramos hacia atrás a lo largo de la línea de tiempo hasta el principio de nuestra secuencia. El cabezal de reproducción leerá 00:00.
En el escenario, ajuste el rectángulo de recorte para que la propiedad Clip (lado derecho) lea 0. Esto habilitará una revelación de borrado desde el lado izquierdo.
Volveremos a hacer clic y arrastrar el indicador de transición azul entre el cabezal de reproducción y el pin y esta vez lo arrastraremos hacia adelante a lo largo de la línea de tiempo hasta que el cabezal de reproducción lea 00:01.
Con la herramienta Recortar, seleccione el segundo elemento de texto directamente debajo de la imagen y ajuste el rectángulo de recorte para que la propiedad Clip (lado izquierdo) lea 0. Esto habilitará una revelación de borrado desde el lado derecho.
Por última vez, volvemos a hacer clic y arrastrar el indicador de transición azul entre el cabezal de reproducción y el pin y lo arrastramos hacia adelante a lo largo de la línea de tiempo hasta que el cabezal de reproducción esta vez lea 00:01.500.
Con la herramienta Recortar, seleccione el tercer y último elemento de texto y ajuste el rectángulo de recorte para que la propiedad Clip (superior) lea exactamente el mismo número que la propiedad Clip (inferior). Esto habilitará una revelación de borrado desde la parte inferior.
Desactive el Pin (P) y pruebe la animación arrastrando el Cabezal de reproducción a lo largo de la línea de tiempo, haciendo clic en el botón Reproducir o realizando una vista previa del navegador a través de Archivo | Vista previa en navegador. Podemos ver todos nuestros elementos revelados a través de segmentos escalonados.

En este ejemplo, hemos creado una composición de Edge Animate que incluye el recorte animado de elementos de texto e imagen. El ejemplo completo aparecerá como se muestra en la captura de pantalla anterior. Observe cómo hemos escalonado las transiciones para que se superpongan un poco entre sí. Esto mantiene la animación en movimiento y no hay tiempo muerto dentro de la secuencia.

Para ajustar aún más esta composición, podemos experimentar asignando una variedad de propiedades de aceleración a cada transición. Dentro de una animación corta y dirigida como esta, mantener el impulso es clave.

Desactive el Pin (P) y pruebe la animación arrastrando el Cabezal de reproducción a lo largo de la línea de tiempo, haciendo clic en el botón Reproducir o realizando una vista previa del navegador a través de Archivo | Vista previa en navegador. Podemos ver todos nuestros elementos revelados a través de segmentos escalonados.

Observe cómo en el panel Elementos, cualquier elemento recortado tiene un icono de recorte que se muestra en el extremo derecho. Esto facilita determinar qué elementos están recortados y cuáles no con un vistazo rápido.

Animar con hojas de sprites

Las hojas de sprites son archivos de imagen compuestos por todos los fotogramas representativos de una secuencia de animación, empaquetados en un solo archivo, generalmente con datos adjuntos que describen cómo se debe interpretar la animación. Las hojas de sprites se utilizan mucho en los juegos e incluso han resurgido en los últimos años con la creciente popularidad de los tiempos de ejecución de Flash y los motores de juegos HTML5.

En la imagen anterior, vemos cómo los distintos fotogramas individuales de una secuencia de caminata animada se renderizan dentro de una sola hoja de sprites.

Generar hojas de sprites desde Flash Professional CS6

Hay muchas aplicaciones que se pueden utilizar para generar hojas de sprites para su uso en Edge Animate. Flash Professional CS6 es una excelente opción debido a la variedad de herramientas de animación enriquecidas y la madurez de la aplicación. Con Flash Professional, podemos crear una secuencia de animación y exportarla como una hoja de sprites con control total sobre el aspecto de la imagen, así como el formato de datos que se exportará.

La captura de pantalla anterior representa el cuadro de diálogo Generar hoja de sprites disponible en Flash Professional CS6.

Para generar una hoja de sprites en Flash Professional CS6 para usar dentro de una composición de Edge Animate, realice los siguientes pasos:

Cree una animación y adjunte esa animación dentro de un símbolo de MovieClip. En este ejemplo, estamos creando una secuencia de caminata simple utilizando las herramientas de cinemática inversa disponibles en Flash Professional.
Desde Stage o Library, haga clic con el botón derecho en MovieClip para convertirlo en una hoja de sprites y elija la opción Generar hoja de sprites.

Tenga en cuenta que al generar una hoja de sprites desde Stage, ¡cualquier filtro y efecto que hayamos aplicado también se transferirá!
Aparecerá el cuadro de diálogo Generar hoja de sprites. Realmente no hay ninguna razón para modificar ninguna de estas configuraciones para usar dentro de Edge Animate, por lo que simplemente podemos hacer clic en Exportar para continuar.

Tenga en cuenta que podemos especificar un nombre de archivo y una ubicación a través del botón Examinar, si lo desea.

Ahora tenemos una imagen de hoja de sprites y un archivo de datos adjunto. Solo usaremos la imagen de la hoja de sprites, por lo que podemos descartar el archivo de datos, si lo desea. Tenga en cuenta para más adelante que estamos utilizando una animación de 24 fotogramas por segundo (fps). Esto será importante cuando se vuelva a traer a Edge Animate.

Si Flash Professional CS6 no está disponible de inmediato, hay muchos otros generadores de hojas de sprites disponibles para descargar a través de la web, muchos de ellos de forma gratuita.

Usar una hoja de sprites dentro de Edge Animate

Aunque Edge Animate no admite directamente el uso de hojas de sprites a través de ningún tipo de automatización, es posible utilizar hojas de sprites dentro de una composición empleando un archivo de imagen de hoja de sprites junto con la herramienta Recortar y el modo de transición automática desactivado.

Para utilizar una hoja de sprites generada dentro de una composición de Edge Animate, realice los siguientes pasos:

Cree un nuevo proyecto de Edge Animate y configure el escenario de acuerdo con las especificaciones del proyecto. En general, asegúrese de que tenga una resolución lo suficientemente grande para adaptarse a la hoja de sprites que usaremos.
Coloque el archivo de imagen de la hoja de sprites en el escenario utilizando Archivo | Importar… comando del menú de la aplicación, o mediante arrastrar y soltar desde el escritorio.
Ahora coloque la imagen de modo que el primer fotograma de la animación esté en las coordenadas que tengan más sentido para el proyecto. El elemento de imagen en sí no tiene que moverse necesariamente para proporcionar animación; de hecho, este método de animación implica mover solo la posición de la fuente.
Seleccione la herramienta Recortar en la barra de herramientas y haga clic en el elemento de imagen para seleccionarlo.
Ahora debemos ajustar el rectángulo de recorte para ocultar todos los demás fotogramas representados dentro de la hoja de sprites, de modo que solo sea visible el fotograma inicial de la animación. Como las hojas de sprites tienden a ser bastante grandes, es posible que necesitemos realizar nuestros ajustes de recorte iniciales a través del panel Propiedades y luego ajustarlos en el escenario con la herramienta Recortar.
El siguiente conjunto de acciones es similar a la animación fotograma a fotograma, por lo que desactivaremos el modo de transición automática (X).
Para ayudar con la colocación, podemos cambiar la superposición de la cuadrícula de la línea de tiempo para ajustar fácilmente a una determinada secuencia de tiempo. En este caso, elegiremos la opción Mostrar cuadrícula y configuraremos el ajuste a 24 fps. Esto coincide con la configuración de Flash Professional.
¡Aquí está la parte tediosa! Dependiendo de la complejidad de la secuencia de animación de la hoja de sprites, es posible que tengamos que repetir este paso muchas, muchas veces. Para todas y cada una de las hojas de sprites de la secuencia, debemos ajustar el cabezal de reproducción para que esté unos milisegundos hacia adelante en la línea de tiempo desde el último fotograma clave y luego usar el capturador de contenido disponible dentro de la herramienta Recortar para ajustar la posición de la fuente de nuestro elemento de imagen.
Con cada fotograma de la secuencia, mueva el cabezal de reproducción un poco hacia adelante (hasta el siguiente marcador de cuadrícula) y ajuste la posición de la fuente de la imagen con el capturador de contenido. Tiene sentido probar nuestra animación cada dos fotogramas para asegurarnos de que la secuencia de la hoja de sprites se esté animando correctamente. Podemos realizar pequeños ajustes con el capturador de contenido donde sea necesario mientras probamos.

Si bien esta no es una forma rápida de animar contenido dentro de Edge Animate, si un proyecto requiere o podría beneficiarse de este tipo de contenido animado, definitivamente vale la pena el esfuerzo, ya que el resultado es extremadamente difícil de lograr de otra manera.

Este también es un gran ejemplo de cómo reutilizar contenido en diferentes plataformas. Por ejemplo, cree hojas de sprites para usar en un juego Flash dirigido a iOS con Stage3D y Starling a través de Adobe AIR, mientras emplea la misma hoja de sprites dentro de un sitio web sobre el juego con contenido producido en Adobe Edge Animate.

Animar con secuencias PNG

Otro método para emplear contenido basado en fotogramas representativos de otras aplicaciones es mediante el uso de secuencias de imágenes. El tipo de imagen más versátil para utilizar al trabajar de esta manera es el formato PNG debido al rango de transparencia que permite.

Las propias secuencias PNG pueden ser generadas por varias aplicaciones CS6, incluidas Fireworks, Premiere Pro, After Effects y Flash Professional. Para este ejemplo, usaremos Flash Professional para crear una secuencia animada y exportarla como una serie de imágenes.

Generar secuencias PNG desde Flash Professional CS6

Una de las principales ventajas de utilizar Flash Professional al generar una secuencia animada de esta naturaleza es que Flash Professional tiene una gran cantidad de herramientas para dibujar y modificar objetos dentro de su línea de tiempo, herramientas y flujos de trabajo que simplemente no existen dentro de Edge Animate. Podemos aprovechar estas herramientas para crear animaciones complejas para incorporar a nuestros proyectos de Edge Animate y utilizarlas como símbolos.

El primer paso en este flujo de trabajo es crear una secuencia animada corta en Flash Professional. Para simplificar las cosas, se recomienda que creemos un nuevo símbolo de MovieClip y luego creemos una animación dentro de él porque luego se puede exportar fácilmente como una secuencia PNG desde la biblioteca del proyecto de Flash Professional.

Tenga en cuenta que cuando se exporta una secuencia de imágenes, se genera una imagen para cada fotograma de animación. Para reducir el número de imágenes exportadas, podemos reducir los fotogramas por segundo del proyecto en el panel Propiedades y asegurarnos de que la animación no sea demasiado larga.

Ahora que tenemos nuestra animación, necesitamos exportarla como una secuencia PNG. Esto creará una serie de archivos individuales para que los usemos dentro de nuestra composición de Edge Animate. Flash Professional hace que esta tarea sea muy sencilla:

Abra el panel Biblioteca y haga clic con el botón derecho en el símbolo de MovieClip que contiene nuestra secuencia animada.
Elija Exportar secuencia PNG… en el menú que aparece.
Ahora necesitaremos buscar una ubicación en el disco duro dentro de la cual guardar nuestra secuencia de imágenes. También podemos proporcionar un nombre personalizado para esta secuencia. Elija una ubicación a la que podamos acceder fácilmente más adelante.
Se abrirá un pequeño cuadro de diálogo que muestra el número total de fotogramas que se exportarán, junto con una serie de propiedades de salida que se pueden ajustar, como Ancho, Alto, Resolución y Colores, como se muestra en la siguiente captura de pantalla:
Haga clic en Exportar para completar la generación de nuestra secuencia de imágenes.

Los archivos ahora se crearán dentro de la ubicación especificada previamente.

Normalmente, la configuración predeterminada dentro del cuadro de diálogo Exportar secuencia PNG funcionará bien para usar en Adobe Edge Animate.

Tenga en cuenta nuevamente que estamos utilizando una animación de 24 fps al crear en Flash Professional. Estos datos simplificarán nuestras tareas de animación dentro de Edge Animate.

Usar secuencias PNG en Edge Animate

De forma similar al uso de hojas de sprites en Edge Animate, no existe una herramienta de importación para ayudar en el uso de secuencias de imágenes. Los recursos de imagen deben importarse a Edge Animate y todos los ajustes de posición y propiedades deben completarse manualmente. Por esta razón, es mejor utilizar secuencias cortas para evitar tener que realizar muchos ajustes manuales dentro del proyecto.

Hay dos pasos iniciales para que todo esto funcione dentro de una composición de Edge Animate. El primero es crear un nuevo proyecto de Edge Animate, al que importaremos la secuencia de imágenes. El segundo es ubicar las imágenes de secuencia de imágenes generadas en nuestra máquina local, como se muestra en la siguiente captura de pantalla:

La secuencia de imágenes generada por Flash Professional aparecerá como se muestra en esta captura de pantalla. Observe que cada imagen conserva el nombre de archivo proporcionado durante el proceso de exportación con un número añadido. Cada número corresponde a un solo fotograma dentro de la línea de tiempo de Flash.

Para obtener la secuencia de imágenes en Edge Animate, realice los siguientes pasos:

Cree un nuevo símbolo dentro del proyecto de Edge Animate dibujando un objeto temporal con la herramienta Rectángulo y luego eligiendo Modificar | Convertir a símbolo… en el menú de la aplicación.
Edite el símbolo haciendo doble clic en su instancia en el panel Escenario o editando a través de la ventana Biblioteca haciendo clic con el botón derecho en Símbolo y eligiendo Editar en el menú que aparece.
Elimine el activo temporal utilizado en la creación del símbolo seleccionándolo y presionando Eliminar.
Ahora seleccione todas las imágenes que forman parte de la secuencia PNG que queremos usar dentro de nuestro proyecto.
Arrastre las imágenes seleccionadas desde el explorador de archivos del sistema operativo al escenario del símbolo. Antes de soltar las imágenes dentro de Edge Animate, asegúrese de que el cursor esté alineado con el punto (0, 0) del panel Escenario en la esquina superior izquierda del símbolo:

Notará que nuestros paneles Línea de tiempo, Activos de biblioteca y Elementos ahora están llenos de imágenes secuenciadas. Ahora podemos realizar animaciones con estas imágenes en la línea de tiempo del símbolo.

Desactivaremos el modo de transición automática para activar y desactivar la propiedad Mostrar de cada imagen en una secuencia de tiempo establecida a través de la línea de tiempo. Esto es muy similar a la animación fotograma a fotograma, ya que simplemente estamos cambiando la imagen completa en intervalos de tiempo establecidos. Para este ejemplo, estamos cambiando estas propiedades en cada marca de 00.042 en la línea de tiempo, o cada 24 fotogramas por segundo.

También podemos cambiar la superposición de la cuadrícula de la línea de tiempo para ajustar fácilmente a una determinada secuencia de tiempo. En este caso, elegiremos la opción Mostrar cuadrícula y configuraremos el ajuste a 24 fps. Esto coincide con la configuración de Flash Professional.

Realice los siguientes pasos para animar nuestra secuencia de imágenes:

Desactive el modo de transición automática mediante el botón en la línea de tiempo o presionando X en el teclado.
Desactive el atributo Mostrar para todas las imágenes de la secuencia.
Con el cabezal de reproducción o los controles de visualización de la hora debajo del panel Escenario, configure la hora actual en 00:00.042.
Active el atributo Mostrar para la primera imagen de la secuencia.
Mueva el cabezal de reproducción hacia adelante a 00:00.083 y desactive el atributo Mostrar de nuestra primera imagen en la secuencia.
Active el atributo Mostrar de nuestra segunda imagen en la secuencia.
Ahora, debemos pasar por cada siguiente marcador de cuadrícula para cada imagen de la secuencia y realizar los pasos 5 y 6 para cada uno. Es un proceso que requiere mucho tiempo y los cálculos sobre cuánto tiempo es adecuado para usar entre transiciones deben calcularse con anticipación.

Una vez que todos los ajustes en la línea de tiempo se hayan configurado correctamente, al activar o desactivar cada imagen de la secuencia a intervalos establecidos, tendremos una secuencia animada resultante que debería corresponder estrechamente a la que se creó en Flash Professional.

Ejecutar nuestra composición en un navegador web producirá una instancia de símbolo totalmente animada. Tenga en cuenta que podemos utilizar varias instancias de la misma instancia de símbolo dentro de una composición para crear algunos efectos bastante sorprendentes.

Resumen

En este capítulo, hemos visto formas en que podemos construir sobre transiciones de línea de tiempo simples, utilizando una variedad de otras herramientas dentro de Edge Animate para realizar animaciones más complejas mediante el recorte, el uso de hojas de sprites y secuencias de imágenes.

En el próximo capítulo, examinaremos una serie de características con respecto a la preparación de composiciones de Edge Animate para su distribución.

Buscar este blog

Animación Publicitaria 2024