Animación de giro de página Kwik

• Abril 29, 2024

En los últimos tutoriales, hemos estado trabajando en la plantilla de página para nuestra aplicación de libros Kwik. Tenemos una cosa más para agregar a la plantilla, que es la animación lineal que emula una vuelta de página.

Queremos que esta animación se reproduzca inmediatamente cuando se cargue la página. Ya tenemos el gráfico para la animación en la capa kwkpgTurn en la página1. Además, esta capa se ha configurado como un activo compartido para que funcione a través de la aplicación del libro.

Animacion Lineal

En este punto, crearemos una animación muy simple y usaremos la mayoría de las configuraciones predeterminadas. Pero aprenderemos mucho sobre animaciones lineales a medida que agreguemos muchas de ellas al libro.

Una animación lineal mueve un objeto de un punto en la pantalla a otro. Por lo tanto, la configuración principal para una animación lineal son los puntos de inicio y finalización. Kwik establecerá automáticamente el punto de partida para la animación como la posición actual del objeto en la capa. Tendremos que establecer el punto final para la animación.

También estableceremos la duración de la animación en segundos, ya que esto determinará qué tan rápido se mueve el objeto. Finalmente, configuraremos la animación para que comience cuando se cargue la página.

Animación de giro de página

1. En la sección Página / Componentes del panel Kwik, seleccione página1. Debería ver "@ page1" en la parte superior de la sección.
   
   
2. Haga clic en el Cambie al icono Vista de componentes para ver su lista de componentes ya agregados a esta página.
   
   
3. Seleccione la capa kwkpgTurn en el panel Capas.
   
   
4. Desde la barra de Categoría, haga clic en el Icono de animaciones
   
   
5. Haga clic en el Icono de animación lineal (primer icono en la primera fila de herramientas).
   
   
6. En el cuadro de diálogo Animación lineal, cambie el nombre de la animación "pgTurn".
   
   
7. Capa kwkpgTurn: Esto le dice a Kwik que use el gráfico en la capa kwkpgTurn para la animación. Mantenga esto seleccionado
   
   

En la sección Propiedades, Kwik nos muestra las posiciones X e Y para el objeto en la capa kwkpgTurn y el ancho y alto del objeto gráfico. Debido a que queremos mover todo el gráfico fuera de la pantalla, necesitaremos moverlo al menos el mismo número de píxeles que el ancho del gráfico (732 px). Movámoslo 732 píxeles hacia la izquierda. Debido a que la posición X actual es 0. Esto dará como resultado un número negativo para la posición final. No queremos mover el objeto verticalmente, por lo que mantendremos la posición Y establecida en 0. Esto hará que el objeto se mueva solo horizontalmente.

8. Posición final:
   x -732
   y 0
   
   
9. Posición final aleatorizada: no utilizaremos esta función, así que déjelo configurado en los valores predeterminados.
   
   
10. Duración: Queremos que el gráfico se mueva muy rápido para dar el efecto de voltear. Así que configuremos esto en 1 segundo y .25 segundos de retraso.
    
    
11. Marque la casilla Pausado cuando finalice.
    
    
12. Loop: establezca esta opción en l time.
    
    
13. Comienza: establezca esto en Cuando la página comienza.
    
    
14. Haz clic en Crear.
    
    
15. Debería ver que la animación pgTurn se ha agregado a la lista de componentes de esta página.
    
    

Ahora es un buen momento para probar el proyecto. Haga clic en el botón Publicar en el panel Kwik. Pruebe los botones de navegación y la animación de cambio de página.

Derechos de autor 2018 Adobe Systems Incorporated. Todos los derechos reservados. Las capturas de pantalla del producto Adobe se reimprimieron con permiso de Adobe Systems Incorporated. Adobe, Photoshop, Álbum de Photoshop, Photoshop Elements, Illustrator, InDesign, GoLive, Acrobat, Cue, Premiere Pro, Premiere Elements, Bridge, After Effects, InCopy, Dreamweaver, Flash, ActionScript, Fireworks, Contribute, Captivate, Flash Catalyst y Flash Paper es / es [una] marca registrada [s] o una marca registrada [s] de Adobe Systems Incorporated en los Estados Unidos y / u otros países.
El producto Kwik, el logotipo de Kwik y Kwiksher son propiedades de Kwiksher.com - Copyright 2011. Capturas de pantalla utilizadas con permiso.

Estos tutoriales son para la versión anterior de Kwik 2 y pueden no ser de mucha ayuda cuando se utiliza Kwik 3 y superior. Si tiene problemas, utilice el foro Kwik.

Instrucciones De Vídeo: LOGOS 3D con PHOTOSHOP y animados con ELEMENT 3D TUTORIAL | AFTER EFFECTS (Abril 2024).