Aprenda a criar sites interativos no Muse com animações e efeitos de rolagem criados no Adobe Edge Animate.

Observação:

O Adobe Muse não está mais adicionando novos recursos e suspenderá o suporte em quinta-feira, 26 de março de 2020. Para obter informações detalhadas e assistência, consulte a a página de fim de serviço do Adobe Muse.

O Adobe Edge Animate é uma ferramenta de design de interação na Web que permite colocar conteúdos animados em sites usando padrões da Web, como o HTML5. É possível utilizar a interface da linha do tempo intuitiva com o Animate para construir visualmente animações atraentes em HTML5 que podem ser reproduzidas em todos os navegadores modernos.

Preparar animações no Animate

Antes de usar conteúdo do Animate no Muse, você pode fazer algumas alterações para preparar o arquivo do Animate, fazendo com que a incorporação no Muse seja perfeita. Faça o seguinte:

  1. Inicie o Animate. A janela Introdução é exibida.

  2. Clique em Abrir arquivo e navegue até um arquivo de projeto de amostra que você baixou com a extensão .an. Ou, se preferir, abra um arquivo do Animate que você tenha criado.

    O Adobe Muse permite incorporar animações do Edge Animate.
    Clique no link Abrir arquivo na janela Introdução.

  3. Clique em Abrir para abrir o arquivo .an e feche a caixa de diálogo Abrir. O projeto aparece na área de trabalho do Animate.

    O projeto é exibido
    O projeto do Animate é exibido no estágio.

    Animações criadas utilizando o Animate são configuradas para serem reproduzidas automaticamente (autoplay) ou para solicitar que você clique em uma imagem estática para reproduzir a animação ao ser carregada. O exemplo do SkyScraper é definido como reprodução automática e não requer interação do usuário. No entanto, quando a reprodução automática for desativada, uma imagem estática será exibida na página até que a animação seja clicada. Para ver um exemplo de uma animação que não executa reprodução automática, visite o Animate Showcase.

    Observação:

    Para controlar se uma animação será reproduzida imediatamente, selecione o estágio e, em seguida, marque ou desmarque a caixa de seleção Reprodução automática no painel Propriedades.

    Opção de reprodução automática
    Ative a reprodução automática selecionando a propriedade Reprodução automática.

  4. Clique na imagem de fundo para selecioná-la no estágio. Quando for selecionada, uma caixa delimitadora azul aparecerá, e o painel Propriedades à esquerda exibirá as propriedades da imagem (chamada de Imagem2 neste exemplo). Pressione Backspace (Windows) ou Delete (Mac) para remover o arquivo de imagem de fundo.

    Caixa delimitadora azul
    Selecione a imagem de fundo e exclua-a.

  5. Com o estágio ainda selecionado, clique no chip de cor do estágio no painel Propriedades e defina a opção Transparente.

    Opção transparente
    Defina a propriedade de fundo do estágio como transparente.

    Observação:

    O conteúdo no estágio exibe um fundo branco; você não verá o plano de fundo transparente exibido no estágio, a menos que você exporte ou visualize a animação.

  6. Selecione Arquivo > Salvar para salvar as alterações recentes.

  7. Escolha Arquivo > Publicar configurações para abrir a caixa de diálogo Publicar configurações.

  8. Na coluna Destino de publicação à esquerda, desmarque a caixa de seleção Web e selecione a opção Pacote de implementação do Animate.

  9. Clique em Salvar para salvar as alterações e fechar a caixa de diálogo Publicar configurações.

  10. Escolha Arquivo > Publicar para publicar o projeto.

  11. Pare o Animate. Use o Windows Explorer (ou no Mac OS Finder) para localizar a pasta do projeto do Animate no disco rígido. Depois de publicar o projeto, encontre uma pasta chamada Pacote do Animate. O arquivo .OAM desta pasta será usado para adicionar o conteúdo do Animate ao site do Muse.

  12. Copie o arquivo .OAM e salve-o na pasta na área de trabalho que contém todas as outras imagens e itens do seu site. Depois de publicar a animação e salvar o arquivo na pasta do site, vá para a próxima seção para inserir o conteúdo do Animate em uma página.

Colocar animações criadas usando o Animate em uma página da web do Muse

Siga estas etapas para adicionar a animação a uma página no site do Muse:

  1. Inicie o Adobe Muse e abra o site que você deseja editar.

  2. No modo de exibição Plano, clique duas vezes no nome da página em que deseja adicionar a animação.

  3. Escolha Arquivo > Inserir… e navegue para selecionar o arquivo .OAM na pasta do site.

  4. Clique uma vez na página para inserir a animação.

    Observação:

    Ao contrário de inserir imagens, não é possível clique-arrastar ao inserir uma animação do Animate para redimensionar. Para inserir o conteúdo em um tamanho diferente, atualize o projeto do Edge e publique novamente o arquivo .OAM.

  5. Use a ferramenta Seleção para posicionar a animação na página no local desejado. Observe que, embora o fundo da animação seja exibido em opaco no Muse, o fundo é transparente quando você visualiza ou publica a página.

  6. Escolha Arquivo > Visualizar página no navegador para assegurar que a animação seja exibida conforme esperado. Se quiser fazer alterações, retorne ao Muse e reposicione os elementos da página. Se observar o painel Itens, verá que o arquivo .OAM agora aparece como um item. Animações criadas usando o Edge Animate podem ser vinculadas novamente e atualizadas assim como qualquer outro item do site.

    Por exemplo, se você retornar para o Animate, pode abrir o projeto e alterá-lo. Depois disso, ao republicar o arquivo .OAM e substituir a versão na pasta do site, o painel Ativos exibirá o ícone do link expirado. Isso indica que o arquivo original foi editado desde que o ativo foi colocado na página.

    Para atualizar o arquivo inserido, clique com o botão direito no nome de arquivo .OAM no painel Itens e escolha Revincular.

    A opção Revincular atualiza o item inserido para corresponder ao arquivo de origem editado. Essa é uma maneira mais fácil de atualizar rapidamente a animação, diferentemente de excluir e substituir arquivos manualmente.

  7. Clique no link Publicar no painel de Controle. Escolha as opções desejadas e clique em OK para publicar as atualizações do site.

Para saber mais sobre a criação do conteúdo da Web HTML5 e animações com o Adobe Edge Animate, confira os Recursos do Adobe Edge Animate. Para obter mais dicas sobre como trabalhar com o Muse, visite a página de Ajuda e Tutoriais do Muse para obter tutoriais ou a página de Eventos do Muse para ver seminários ao vivo e tutoriais em vídeo gravados.

Incorporar conteúdo de mídia avançada para adicionar animação ao site

  1. No modo de exibição Plano, clique duas vezes na miniatura do MasterFlash para abri-la para edição no modo de exibição Design. Observe que, como você duplicou anteriormente a página-mestre A, a imagem estática do logotipo ainda está ali. Você pode usar a imagem estática para corresponder à posição do retângulo de animação. Entretanto, certifique-se de excluir a imagem estática do logotipo inserido após incorporar o elemento rich media.

  2. Escolha Arquivo > Posicionar. Na caixa de diálogo Importar, navegue dentro da pasta Kevins_Koffee_Kart e selecione o arquivo denominado logo.swf.

  3. Coloque o arquivo SWF no canto superior esquerdo, combinando o local do arquivo de imagem de logotipo existente.

  4. Depois de alinhar a nova janela SWF que você acabou de posicionar com o logotipo estático antigo, exclua o logotipo estático, selecionando-o e pressionando a tecla Delete.

  5. Para analisar como todo o site é exibido com as novas alterações na página inicial, escolha Arquivo > Visualizar site no navegador para testar a exibição do logotipo em várias páginas. Sem publicar o site, você pode trabalhar localmente no computador e depois visualizar o site em um navegador para clicar nas páginas na navegação do site. Observe que a animação (arquivo SWF) aparece uma vez e depois para na página inicial. Se você clicar em outras páginas, somente o logotipo estático será exibido.

    Observação:

    Se escolher Arquivo > Visualizar página no navegador, a nova janela do navegador carregará mais rapidamente para exibir a Página inicial, mas só visualizará a página ativa (Inicial). Escolha esta opção se quiser verificar uma página do site, e não o site inteiro.

Adicionar efeitos de rolagem a animações

O Adobe Muse permite que você adicione animações criadas utilizando o Adobe Edge Animate a páginas da Internet. A primeira etapa para a utilização do recurso de efeitos de rolagem do Adobe Edge é criar uma animação específica para essa finalidade.

O Adobe Muse permite que você adicione efeitos de rolagem a arquivos OAM, para que haja um efeito nas animações inseridas na linha do tempo principal. Você pode criar a animação estrategicamente, de modo que, somente os itens que desejar mover ao navegar pela página estarão na linha do tempo principal, onde você poderá criar animações interativas. É implícito que o resto dos elementos terão de ser colocados dentro de linhas do tempo aninhadas. Enquanto os visitantes rolam a página, as configurações de efeito de rolagem só controlam a reprodução de elementos animados na linha do tempo principal.

Para obter mais informações sobre os Efeitos de rolagem no Adobe Muse, consulte Efeitos de rolagem.

Siga estas etapas para trabalhar com a guia Apresentação de slides no painel Efeitos de rolagem:

  1. Exporte o arquivo OAM do Animate e salve-o em sua pasta do site. Para obter informações sobre como exportar arquivos OAM a partir do Animate, consulte Colocar animações no Adobe Muse.
  2. Inicie o Muse e clique duas vezes em uma página para abri-la na exibição de Design. Certifique-se de que a página seja longa o suficiente para navegar por ela atualizando as configurações de altura mínimas na caixa de diálogo Propriedades da página.
  3. Escolha Arquivo >Posicionar e navegue para selecionar o arquivo OAM da pasta do site.
  4. Abra o painel Efeitos de rolagem. Clique na guia Adobe Edge Animate (quarta guia a partir da esquerda) e revise as configurações desta seção.
  5. Quando o arquivo OAM for selecionado, ative a caixa de seleção Edge Animate.
Painel Efeitos de rolagem
Defina a animação Edge Animate para iniciar a reprodução quando a página rolar para um local específico ou defina-a para alternar os quadros toda vez que a página rolar para baixo, para uma distância específica (em pixels).

Na imagem acima, a posição-chave é definida como 700 pixels. Você pode arrastar a alça T ou digitar um valor diferente no campo de posição-chave para ajustá-la.

Depois de definir a posição-chave, você pode controlar a reprodução da animação usando duas opções:

  • Reprodução automática: Quando essa opção é selecionada, a animação na linha do tempo principal é iniciada assim que o navegador é rolado para a posição-chave, independentemente do número de quadros na linha do tempo principal. A animação continua a ser reproduzida até que a rolagem da página ultrapasse a posição-chave.
  • Alternar quadros a cada: quando essa opção é selecionada, a animação da linha do tempo principal avançará um quadro sempre que a página for rolada após um número específico de pixels. Por exemplo, se você criar uma página com 3000 pixels de altura e inserir o número 10, a animação da linha do tempo principal será reproduzida na taxa de 1 quadro a cada 10 pixels cada vez que a página for rolada. Se o visitante rolar a página para baixo rapidamente, a velocidade da animação aumentará.

Observação:

As configurações de Efeito de rolagem não afetam os objetos animados que estão aninhados dentro ou vinculados a partir da linha do tempo principal na composição do Animate. Consequentemente, você pode escolher um plano de fundo estático ou mais elementos aninhados de repetição contínua que estão se movendo consistentemente, independentemente da interação do usuário com a página de rolagem.

  1. Após escolher as configurações na guia Edge Animate do painel Efeitos de rolagem, escolha Arquivo > Visualizar página no navegador (ou clique no botão Visualizar). Teste a página rolando para cima e para baixo para exibir a reprodução do conteúdo de animação do Edge Animate (que foi adicionado à linha do tempo principal).
  2. Se for necessário fazer quaisquer alterações, retorne ao Muse (ou clique no botão Design) e atualize as configurações do painel Efeitos de rolagem.

Exemplo

Este exemplo ilustra como controlar arquivos OAM exportados do Adobe Edge Animate usando efeitos de rolagem. Neste exemplo, a página é preenchida com um gradiente vertical que começa com uma cor clara e as transições de turquesa em azul escuro. Você pode fazer o download do arquivo de amostra do site ScrollEffects.com.

Uma combinação de configurações aplicadas nas guias Movimento e Edge Animate cria o efeito animado.

Três instâncias do mesmo arquivo OAM são colocadas lado a lado horizontalmente, para criar uma linha de compassos animados. Quando vir a amostra do site em um navegador, todos os três compassos se movem para a exibição e permanecem na posição. Cada um dos três compassos parece ser fixado em velocidade diferente, mas são as configurações do painel Efeitos de rolagem, não a criação do arquivo de animação do Edge, que fazem com que se movimentem em velocidades diferentes.

Siga estas etapas para criar um efeito semelhante com três arquivos OAM inseridos:

  1. Na visualização Design, escolha Página > Propriedades da página. Defina o campo Altura mínima para um valor muito maior. No exemplo do site, a altura mínima de página é definida como 7.465 pixels.
  2. Selecione as três ocorrências de bússola na página. Na guia Movimento do painel Efeitos de rolagem, você pode ver que os três arquivos OAM têm as mesmas configurações de movimento e posição-chave, porque todos os valores são exibidos.
As mesmas posições principais e configurações de movimento
As bússolas sobem até que a página role para sua posição-chave, e permanecem no lugar enquanto a página continua a rolar para baixo.

Se você visualizar o exemplo em um navegador, verá os três elementos OAM saltarem em uníssono e permanecerem em uma linha, apesar de terem sido fixados.

  1. Clique fora da bússola para desmarcar todos os três, e selecione apenas a bússola à esquerda. Mantenha pressionada a tecla Shift ao selecionar a bússola da direita, para que ambas sejam selecionadas. Abra a guia Edge Animate do painel Efeitos de rolagem para revisar as configurações.
Alternar quadros a cada 350 pixels
As bússolas nos dois lados são configuradas para alternar os quadros a cada 350 pixels.

As duas bússolas laterais são configuradas para percorrer a animação da linha do tempo e avançar para o próximo quadro cada vez que a página rolar 350 pixels para baixo.

  1. Desmarque as duas bússolas externas. Selecione bússola central e olhe na guia Edge Animate novamente para ver se o campo Alternar quadros a cada está definido como 400 pixels. Essa configuração faz com que a animação central se mova mais lentamente em comparação com as duas bússolas externas.
Alternar quadros a cada 400 pixels
O arquivo AM é definido para alternar quadros a cada 400 pixels.

Você pode criar efeitos de animação interessantes variando a velocidade de várias animações do Edge Animate, em relação à velocidade de rolagem da página. Por exemplo, você pode criar um cardume de peixes, um céu preenchido com nuvens em movimento, ou outros efeitos adicionando várias iterações do mesmo arquivo OAM com diferentes configurações de efeito de rolagem aplicados.

Esta obra está licenciada sob uma licença não adaptada da Creative Commons Attribution-Noncommercial-Share Alike 3.0  As publicações do Twitter™ e do Facebook não são cobertas pelos termos do Creative Commons.

Avisos legais   |   Política de privacidade online