Inténtelo: crear animaciones superpuestas

La estructura de la escala de tiempo en Microsoft Expression Blend 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.

[!NOTA]

El procedimiento siguiente usa desencadenadores en un proyecto de Windows Presentation Foundation (WPF) para controlar los guiones gráficos. Como alternativa, puede usar el control de comportamiento ControlStoryboardAction para controlar los guiones gráficos, tanto en WPF como en Microsoft Silverlight. Para obtener información acerca del uso de comportamientos, vea Agregar un control de comportamiento a un objeto.

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 proyecto nuevo.

2. Cambie al área de trabajo Animación. Presione F6 para cambiar entre las áreas de trabajo disponibles. En el área de trabajo Animación, el panel Objetos y escala de tiempo está situado debajo de la mesa de trabajo.

3. Si hay un guión gráfico abierto, haga clic en Cerrar guión gráfico  en el panel 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 panel 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 Margin.

5. Elija Selección en el panel Herramientas y mueva los círculos para juntarlos, como en la imagen siguiente:

   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 Grid.

   Se abre un nuevo panel de diseño de cuadrícula (Grid) en el panel Objetos y escala de tiempo que contiene los dos círculos.

7. Para cambiar el nombre del objeto Grid, haga clic con el botón secundario en él 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 el objeto Grid 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 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 Establecer para siempre y, a continuación, haga clic en Aceptar.

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

14. En el panel Objetos y escala de tiempo, haga clic en 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 el objeto Grid Butterfly y haga clic en Registrar fotograma clave.

    Aparecerá un fotograma clave en la escala de tiempo de la fila correspondiente al objeto Grid 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 en el panel Herramientas, mantenga presionada la tecla ALT y, en la mesa de trabajo, estire el alto y comprima el ancho del objeto Grid 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 el objeto Grid Butterfly establece nuevos fotogramas clave en la marca de 0,5 segundos para las propiedades ScaleX y ScaleY del objeto Grid.

    Estiramiento del objeto Grid en la mesa de trabajo

    

20. En Objetos y escala de tiempo, expanda los nodos del objeto Grid 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 el panel 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 el panel 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 Agregar desencadenador de evento en el panel Desencadenadores.

    Se crea un nuevo desencadenador Window.Loaded.

25. Seleccione el objeto Grid Butterfly en el panel Objetos y escala de tiempo y, en el panel 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 Agregar nueva acción 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 puntero sobre la mariposa, comenzará la escala de tiempo de la animación Flap.

    Creación de un nuevo desencadenador para el evento MouseEnter del objeto Grid

    

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 el panel Objetos y escala de tiempo, seleccione la escala de tiempo de la guía de movimiento en el cuadro desplegable, expanda los nodos bajo el objeto Grid 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.)