Em funcionamento com o Hype lynda.com

• Pode 2, 2024

Neste curso de treinamento em vídeo da lynda.com intitulado Instalando e executando com o Hype, o instrutor Jake Stroh, aborda os conceitos básicos do Hype. Quando você concluir este curso de 1 hora e 37 minutos, terá a base para criar animação simples no Hype.

Stroh começa com um rápido tour pela interface do usuário do Hype, da barra de ferramentas à linha do tempo. Ele então demonstra como criar sua primeira animação, que é mover um retângulo para a tela com um efeito de desbotamento, usando o recurso Gravar. Ele o orienta no processo de definir os valores das propriedades de posição e opacidade para os quadros-chave iniciais e finais.

Com base nesse exemplo simples, Stroh discute a seguir que tipos de imagens podem ser animadas no Hype e como importá-las através do menu Elementos. A imagem de amostra importada é um avião e ele demonstra como criar um caminho de animação para o avião voar pela tela e como convertê-lo em um caminho de movimento. Ele termina o segundo exemplo adicionando texto à cena, estilizando o texto e enquadrando-o com um desbotamento.

Na próxima seção, Stroh inicia uma discussão aprofundada de como as animações html5 e css3 são criadas pelo animador usando o recurso Timeline, Keyframes e Record. Ele aborda vários exemplos de aplicação de quadros-chave às propriedades do elemento. Ele também discute como usar alguns dos controles na Linha do tempo para fazer ajustes finos na sua animação.

O próximo tópico é flexibilização e como usar seis tipos de flexibilização para adicionar física do mundo real à sua animação. O exemplo que ele discute é como obter uma animação de bola quicando combinando vários efeitos de relaxamento. Nos próximos exemplos, Stroh demonstra como criar animação de transformação e como usar a ferramenta Capo para refinar a animação de uma sequência de elementos na Linha do tempo. Ele também discute como reutilizar animações na mesma cena e como contornar a limitação de que o Hype não tem uma ferramenta de ponto de ancoragem para animação de rotação. Por fim, ele discute o uso de filtros de máscara, corte e CSS em suas animações.

A próxima seção apresenta interatividade. Stroh começa com uma discussão sobre os tipos de botões internos e como adicionar ações a seus estágios. Em seguida, ele explica como adicionar ações às imagens para funcionarem como botões na tela. Ele rapidamente passa a controlar animações com várias linhas do tempo e como adicionar botões à linha do tempo principal para controlar linhas do tempo adicionais. Ele também demonstra como criar uma linha do tempo em loop.

Para criar animações mais complexas, Stroh discute como trabalhar com cronogramas relativos e encadeamento de ações. Nos próximos exemplos, ele demonstra como trabalhar com arquivos de áudio e controlar a reprodução com as ações dos botões. Ele também demonstra as diferenças entre o uso de várias linhas do tempo e apenas a linha do tempo principal para controlar uma apresentação de slides da galeria de imagens interativa.

A seguir, o exemplo do projeto é uma galeria de produtos. Stroh discute os prós e os contras de duas opções, várias linhas do tempo ou cenas, para criar isso no Hype.

Agora você está pronto para colocar seu projeto na web. Stroh demonstra como exportar e incorporar seu projeto Hype e as várias opções para um site independente ou adicionar o projeto a um site existente.

Este não é um curso de aprendizado aprofundado para o Hype. No entanto, este curso lhe dará uma idéia dos tipos de animação que podem ser criados usando o software Hype. Se você estiver familiarizado com clipes de filme no Adobe^R Instantâneo^R, você apreciará a discussão de Stroh sobre cronogramas de aninhamento, cronogramas relativos e encadeamento de ações.

//www.lynda.com/Hype-tutorials/Up-Running-Hype/135360-2.html

Divulgação: não fui compensado financeiramente por este artigo. As opiniões são completamente minhas com base na minha experiência.