Inténtelo: crear animaciones superpuestas

La estructura de la escala de tiempo en Expression Blend le permite ejecutar más de una escala de tiempo de animación al mismo tiempo en la aplicación. En el procedimiento siguiente se muestra cómo crear una animación de una mariposa que se mueve continuamente en un círculo, pero que agita las alas cuando el usuario pasa el mouse por encima de ella.

Para crear animaciones que se superponen

1. En Microsoft Expression Blend, abra o cree un nuevo proyecto. Para obtener más información, vea Crear un nuevo documento o proyecto.

2. Presione F6 para cambiar al área de trabajo de animación. (F6 cambiará entre el Área de trabajo de diseño y el Área de trabajo de animación. En el Área de trabajo de animación, el panel Interacción se encuentra debajo de la mesa de trabajo.)

3. Seleccione el botón Cerrar guión gráfico  en Objetos y escala de tiempo.

   [!NOTA]

   Siempre que seleccione una escala de tiempo distinta del Valor predeterminado, se grabará automáticamente un fotograma clave en la escala de tiempo cada vez que realice cualquier cambio en las propiedades.

4. Seleccione la herramienta Elipse en el cuadro de herramientas. Dibuje dos círculos pequeños en la parte derecha de la mesa de trabajo. Puede hacer que las propiedades Alto y Ancho tengan el mismo valor en la categoría Diseño del panel Propiedades para que las elipses sean círculos perfectos. Si observa que se recortan, ajuste las propiedades Margen.

5. Elija la herramienta Selección en el cuadro de herramientas y acerque los dos círculos, como se muestra en la siguiente imagen:

   Dos círculos dibujados en la mesa de trabajo

   

6. Para trabajar con ambos círculos al mismo tiempo, seleccione un círculo en Objetos y escala de tiempo, mantenga presionada la tecla CTRL para poder seleccionar también el otro círculo, haga clic con el botón secundario en los círculos, seleccione Agrupar en y, a continuación, haga clic en Cuadrícula.

   Se abre un nuevo panel de cuadrícula en Objetos y escala de tiempo que contiene los dos círculos.

7. Para cambiar el nombre de la cuadrícula, haga clic sobre ella con el botón secundario del mouse y elija Cambiar nombre. Cambie el nombre a Butterfly.

8. Para crear la animación circular, use la herramienta Convertir en guía de movimiento para generar una escala de tiempo de animación a partir de un trazado. Dibuje una tercera elipse en el centro de la mesa de trabajo cuyo ancho sea aproximadamente la mitad de la superficie de la mesa de trabajo.

9. Con la nueva elipse seleccionada en Objetos y escala de tiempo, seleccione Trazado en el menú Objeto y haga clic en Convertir en guía de movimiento.

   Aparecerá el cuadro de diálogo Convertir en guía de movimiento.

10. Seleccione la cuadrícula Butterfly en la lista de objetos que se encuentran en la mesa de trabajo y haga clic en Aceptar.

    Se creará una nueva escala de tiempo. Expression Blend cambia al modo de grabación de la nueva escala de tiempo; haga clic en el botón Reproducir para ver la animación en la mesa de trabajo. El destino (la mariposa) se mueve recorriendo la guía del movimiento que se generó a partir de la elipse. Observe que si la propiedad Relleno de la elipse está establecida en un pincel, cubrirá parte del objeto Butterfly.

11. La tercera elipse ya no es necesaria, por lo que puede eliminarla.

12. En Objetos y escala de tiempo, expanda los nodos de los elementos Butterfly, RenderTransform y Translation para ver el intervalo de tiempo de Guía de movimiento. Haga clic con el botón secundario en el elemento Guía de movimiento o en la barra gris que representa el intervalo de tiempo y, a continuación, haga clic en Editar número de repeticiones.

    Aparecerá el cuadro de diálogo Editar repeticiones.

13. Para que la escala de tiempo se repita constantemente, haga clic en el botón Establecer para siempre y, a continuación, haga clic en Aceptar.

    Cuando se ejecute esta animación, se repetirá indefinidamente.

14. En Objetos y escala de tiempo, haga clic en el botón Nuevo .

    Aparece el cuadro de diálogo Crear recurso Guión gráfico.

15. En el campo Nombre de recurso (clave) escriba el nombre Flap y, a continuación, haga clic en Aceptar.

    Expression Blend cambia al modo de grabación de la nueva escala de tiempo con el cabezal de reproducción en la marca de 0 segundos. Mientras esté en el modo de grabación, cualquier propiedad que se configure grabará automáticamente un fotograma clave en la escala de tiempo.

16. Para establecer un fotograma clave en la posición de 0 segundos, seleccione la cuadrícula Butterfly y haga clic en el botón Registrar fotograma clave.

    Aparecerá un fotograma clave en la escala de tiempo de la fila correspondiente a la cuadrícula Butterfly.

17. Arrastre el cabezal de reproducción hasta la marca de 1 segundo y grabe otro fotograma clave.

    De este modo, se definen las posiciones inicial y final de la animación.

18. Arrastre el cabezal de reproducción hasta la marca de 0,5 segundos, entre los dos fotogramas clave anteriores.

19. Elija la herramienta Selección del cuadro de herramientas, mantenga presionada la tecla ALT y, en la mesa de trabajo, expanda el alto y comprima el ancho de la cuadrícula Butterfly hasta que adquiera el aspecto que se muestra en la siguiente imagen.

    Dado que Expression Blend se encuentra en el modo de grabación de la escala de tiempo de la animación Flap, la acción de modificar la cuadrícula establece nuevos fotogramas clave en la marca de 0,5 segundos para las propiedades ScaleX y ScaleY de la cuadrícula.

    Expandir la cuadrícula de círculos en la mesa de trabajo

    

20. En Objetos y escala de tiempo, expanda los nodos de la cuadrícula Butterfly hasta que vea los nodos ScaleX y ScaleY. Seleccione los nodos uno a uno, haga clic con el botón secundario en ellos, seleccione Editar número de repeticiones y, a continuación, en el cuadro de diálogo Editar repeticiones, escriba 2 para que la escala de tiempo se ejecute dos veces. A continuación, haga clic en Aceptar.

21. Haga clic en el botón Reproducir para probar la animación en la mesa de trabajo. Tenga en cuenta que el valor de la repetición no formará parte de la reproducción en la mesa de trabajo. Si desea ajustar la duración de la animación, mueva los fotogramas clave en la barra de intervalo de tiempo gris.

    [!NOTA]

    Si no hay espacio suficiente para ver toda la escala de tiempo, use el cuadro de texto Zoom de escala de tiempo para alejar la escala de tiempo. También puede cambiar el ancho de los paneles para ver mejor el panel Objetos y escala de tiempo.

22. En este momento, puede establecer los desencadenadores de las animaciones. Cualquier escala de tiempo nueva creada en la raíz del documento hará que se agregue un desencadenador de eventos predeterminado en Desencadenadores para el evento Window.Loaded que se produce al iniciar la aplicación.

    Puede mantener este desencadenador para la escala de tiempo circular y agregar uno nuevo para la escala de tiempo Flap.

23. En Desencadenadores, seleccione el desencadenador Window.Loaded. Las acciones del desencadenador se muestran debajo de Cuando se origina Window.Loaded. Haga clic en el signo menos junto a Flap.Begin para eliminar esa acción.

    De este modo, la animación circular seguirá iniciándose cuando arranque la aplicación, pero la animación Flap no se iniciará.

    [!NOTA]

    Es posible que tenga que ajustar el tamaño del panel Desencadenadores para ver la sección Propiedades cuando está activo. Para ajustar el tamaño, haga clic y arrastre los bordes del panel y el borde interior dentro del panel.

    Eliminar la animación Flap del desencadenador Window.Loaded

    

24. Para agregar el desencadenador de la animación Flap, haga clic en el botón Agregar desencadenador de evento en Desencadenadores.

    Se crea un nuevo desencadenador Window.Loaded.

25. Seleccione el elemento de cuadrícula Butterfly en Objetos y escala de tiempo y, a continuación, en Desencadenadores, use los cuadros desplegables para cambiar el nuevo desencadenador de Cuando se origina Window.Loaded a Cuando se origina Butterfly.MouseEnter.

26. Haga clic en el botón Agregar nueva acción situado junto a Cuando se origina Butterfly.MouseEnter y, a continuación, use los cuadros desplegables para cambiar la nueva acción a Flap.Begin.

    Ahora, cuando el usuario mueva el cursor del mouse sobre la mariposa, comenzará la escala de tiempo de la animación Flap.

    Crear un nuevo desencadenador para el evento MouseEnter de la cuadrícula

    

27. Para ver el comportamiento de las escalas de tiempo de animación y del desencadenador de eventos que acaba de crear, puede probar la escena si hace clic en Probar Proyecto, en el menú Proyecto.

    [!NOTA]

    Si la animación circular se ejecuta demasiado rápido, puede ajustar el tiempo de ejecución de la escala de tiempo. En Objetos y escala de tiempo, seleccione la escala de tiempo de la guía de movimiento en el cuadro desplegable, expanda los nodos de la cuadrícula hasta que vea el nodo Guía de movimiento, seleccione el extremo derecho de la barra gris de intervalo de tiempo y arrástrelo hacia la derecha para ampliar el tiempo de finalización.

    Otra opción sería eliminar la escala de tiempo circular, crear una nueva escala de tiempo y comenzar en el paso 8 (dibujar una elipse) para crear la guía de movimiento. (Si no crea una escala de tiempo nueva antes de comenzar en el paso 8, la animación circular se agregará a la escala de tiempo de la animación Flap.)