Guia do Usuário Cancelar

Adicionar interatividade com snippets de código no Animate

 

O painel Snippets de código foi programado para facilitar o uso de simples JavaScript e ActionScript 3.0 rapidamente por usuários que não sejam programadores. Ele permite adicionar código ao arquivo FLA a fim de ativar a funcionalidade comum. Usar o painel Snippets de código não exige conhecimentos do JavaScript ou ActionScript 3.0.

Com o painel Snippets de código, você pode:

  • Adicionar código que afete o comportamento de um objeto no Palco

  • Adicionar código que controle o movimento da cabeça de reprodução na Linha do tempo

  • (somente CS5.5) - Adicione um código que permita a interação com a tela sensível ao toque.

  • Adicionar novos snippets de código que você cria no painel

O uso dos snippets de código incluídos com o Animate também é uma boa maneira de começar a aprender o JavaScript ou ActionScript 3.0. Analisando o código e seguindo as instruções do snippet, você pode começar a compreender a estrutura e o vocabulário do código.

Opção de snippets de código no Animate
Opção de snippets de código no Animate

Antes de começar

Ao trabalhar com o painel Snippets de código, é importante compreender estes princípios do Animate:

  • Muitos dos snippets de código requerem que você personalize alguns itens no código. No Animate, é possível executar esta ação no painel Ações. Cada snippet contém instruções específicas para essa tarefa.

  • Todos os snippets de código incluídos são JavaScript ou ActionScript 3.0.

  • Alguns snippets afetam o comportamento de um objeto, o que permite que ele seja clicado ou faz com que ele se mova ou desapareça. Esses snippets são aplicados ao objeto no Palco.

  • Alguns snippets fazem com que uma ação ocorra imediatamente quando a cabeça de reprodução entra no quadro que contém o snippet. Você aplica esses snippets a um quadro de Linha do tempo.

  • Quando você aplica um snippet de código, o código é adicionado ao quadro atual da camada Ações na Linha do tempo. Se você não tiver criado uma camada Ações, o Animate adicionará essa camada acima de todas as outras na Linha do tempo.

  • Para o ActionScript controlar um objeto no Palco, o objeto precisa ter um nome de instância atribuído no Inspetor de propriedades.

  • Você pode clicar nos botões Exibir Descrição e Exibir Código que aparecem ao selecionar um snippet no painel.

Adicionar um snippet de código a um objeto ou quadro de Linha do tempo

Para adicionar uma ação que afete um objeto ou a cabeça de reprodução:

  1. Selecione um objeto no Palco ou um quadro na Linha do tempo.

    Se você selecionar um objeto que não seja uma instância de símbolo, o Animate converterá o objeto em um símbolo de clipe de filme quando você aplicar o snippet.

    Se você selecionar um objeto que ainda não tenha um nome de instância, o Animate adicionará um quando você aplicar o snippet.

  2. No painel Snippets de código (Janela > Snippets de código), clique duas vezes no snippet que deseja aplicar.

    Se você tiver selecionado um objeto no Palco, o Animate adicionará o snippet ao painel Ações nos quadros que contêm o objeto selecionado.

    Se tiver selecionado um quadro da Linha do tempo, o Animate adicionará o snippet apenas àquele quadro.

  3. No painel Ações, exiba o código recém-adicionado e substitua quaisquer itens necessários de acordo com as instruções na parte superior do snippet.

Snippet de código no painel Ações

Adicione novos snippets ao painel Snippets de código

Há duas maneiras de adicionar novos snippets de código ao painel Snippets de código:

  • Insira um snippet na caixa de diálogo Criar novo snippet de código.

  • Importar um arquivo XML de snippet de código.

Para usar a caixa de diálogo Criar novo snippet de código:

  1. No painel Snippets de código, escolha Criar novo snippet de código no menu do painel.

  2. Na caixa de diálogo, insira o título, o texto da dica de ferramenta e o código JavaScript ou ActionScript 3.0 de seu snippet.

    Você pode adicionar qualquer código selecionado no momento no painel Ações clicando no botão Preenchimento automático.

  3. Selecione a caixa de seleção Substituir automaticamente nome_da_instância_aqui se seu código incluir a sequência de caracteres “nome_da_instância_aqui” e você quiser que o Animate a substitua pelo nome de instância correto quando o snippet for aplicado.

    O Animate adiciona o novo snippet ao painel Snippets de código em uma pasta chamada Personalizado.

Para importar um snippet de código no formato XML:

  1. No painel Snippets de código, escolha Importar XML de snippets de código no menu do painel.

  2. Selecione o arquivo XML que deseja importar e clique em Abrir

Para ver o formato XML correto dos snippets de código, escolha Editar XML de snippets de código no menu do painel.

Para excluir um snippet de código, clique com o botão direito do mouse no snippet no painel e escolha Excluir snippet de código no menu de contexto.

Animações interativas com HTML5

Determinadas animações exigem snippets de código para permitir várias plataformas de publicação. Quer saber mais sobre como usar snippets de código para tornar a animação interativa? Assista ao tutorial no fim deste exemplo e siga estas etapas.

  1. Em Biblioteca, clique em Configurações de publicação.

  2. Selecione JavScript/HTML.

  3. Na guia HTML/JS, clique em Exportar e escolha as seguintes opções:

    • Nome: digite o nome do arquivo.
    • Tipo: selecione HTML.
  4. Clique em OK.

Como melhorar suas animações interativas em HTML5

Assista ao vídeo para saber como editar os códigos.

Receba ajuda com mais rapidez e facilidade

Novo usuário?