Kwik Page Turn Animation
Nos últimos tutoriais, trabalhamos no modelo de página do nosso aplicativo de livros Kwik. Temos mais uma coisa a acrescentar ao modelo, que é a animação linear que emula uma virada de página.

Queremos que essa animação seja reproduzida imediatamente quando a página for carregada. Já temos o gráfico para a animação na camada kwkpgTurn na página1. Além disso, essa camada foi definida como um ativo compartilhado para que funcione no aplicativo de livros.

Animação linear

Neste ponto, criaremos uma animação muito simples e usaremos a maioria das configurações padrão. Mas aprenderemos muito sobre animações lineares à medida que adicionamos muitas delas ao livro.

Uma animação linear move um objeto de um ponto na tela para outro. Portanto, as principais configurações para uma animação linear são os pontos inicial e final. O Kwik definirá automaticamente o ponto inicial da animação como a posição atual do objeto na camada. Precisamos definir o ponto final da animação.

Também definiremos a duração da animação em segundos, pois isso determinará a rapidez com que o objeto se move. Por fim, definiremos a animação para iniciar quando a página for carregada.

Animação de virada de página

  1. Na seção Página / Componentes do painel Kwik, selecione a página1. Você deverá ver "@ page1" na parte superior da seção.

  2. Clique no Alterne para o ícone Exibição de componentes para ver sua lista de componentes já adicionados a esta página.

  3. Selecione a camada kwkpgTurn no painel Camadas.

  4. Na barra Categoria, clique no botão Ícone de animações.

  5. Clique no Ícone de animação linear (primeiro ícone na primeira linha de ferramentas).

  6. Na caixa de diálogo Animação linear, renomeie a animação "pgTurn".

  7. Camada kwkpgTurn: Isso informa ao Kwik para usar o gráfico na camada kwkpgTurn para a animação. Manter isso selecionado

Na seção Propriedades, o Kwik mostra as posições X e Y do objeto na camada kwkpgTurn e a largura e altura do objeto gráfico. Como queremos mover o gráfico inteiro para fora da tela, precisamos movê-lo pelo menos com o mesmo número de pixels que a largura do gráfico (732 px). Vamos movê-lo 732 pixels para a esquerda. Como a posição X atual é 0. Isso resultará em um número negativo para a posição final. Como não queremos mover o objeto verticalmente, manteremos a posição Y definida como 0. Isso fará com que o objeto se mova apenas horizontalmente.

  1. Posição final:
    x -732
    y 0

  2. Posição final aleatória: não usaremos esse recurso, portanto, deixe-o definido nos padrões.

  3. Duração: queremos que o gráfico se mova muito rápido para dar o efeito de inversão. Então, vamos definir isso para 1 segundo e 0,25 segundo de atraso.

  4. Marque a caixa Pausado quando concluído.

  5. Loop: Defina esta opção para l time.

  6. Inicia: defina como Quando a página é iniciada.

  7. Clique em Create.

  8. Você deve ver que a animação pgTurn foi adicionada à lista de componentes desta página.

Agora é uma boa hora para testar o projeto. Clique no botão Publicar no painel Kwik. Teste os botões de navegação e a animação de virar a página.

Direitos autorais 2018 Adobe Systems Incorporated. Todos os direitos reservados. As capturas de tela do produto Adobe foram impressas com permissão da Adobe Systems Incorporated. Adobe, Photoshop, Álbum do Photoshop, Photoshop Elements, Illustrator, InDesign, GoLive, Acrobat, Cue, Premiere Pro, Premiere Elements, Bridge, After Effects, InCopy, Dreamweaver, Flash, ActionScript, Fireworks, Contribute, Captivate, Flash Catalyst e Flash Paper é / é [a] marca registrada ou marca comercial da Adobe Systems Incorporated nos Estados Unidos e / ou em outros países.
O produto Kwik, o logotipo Kwik e Kwiksher são propriedades de Kwiksher.com - Copyright 2011. Capturas de tela usadas com permissão.

Estes tutoriais são para a versão mais antiga do Kwik 2 e podem não ser de grande ajuda ao usar o Kwik 3 e superior. Se você estiver tendo problemas, use o fórum Kwik.


Instruções De Vídeo: SKETCHBOOK TOUR 2019! (Pode 2024).