Exemplo: parte de portfólio de animação (Flash Professional)

Este exemplo foi criado para lhe oferecer uma oportunidade de ver pela primeira vez como é possível juntar partes do ActionScript para obter um aplicativo completo. A parte de portfólio de animação é um exemplo de como você poderia pegar uma animação linear existente e acrescentar alguns elementos interativos menores. Por exemplo, você poderia incorporar uma animação criada para um cliente em um portfólio on-line. O comportamento interativo que você vai adicionar à animação inclui dois botões nos quais o espectador poderá clicar: um para iniciar a animação e outro para navegar em uma URL separada (como o menu do portfólio ou a home page do autor).

O processo de criar essa peça pode ser dividido nestas seções principais:

  1. Preparar o arquivo FLA para adicionar elementos interativos e do ActionScript.

  2. Criar e adicionar os botões.

  3. Escrever o código do ActionScript.

  4. Testar o aplicativo.

    Preparação para adicionar interatividade

    Para que você possa adicionar elementos interativos à sua animação, é bom configurar o arquivo FLA criando alguns locais para adicionar o novo conteúdo. Essa tarefa inclui criar espaço real no Palco em que os botões podem ser colocados. Também inclui a criação de "espaço" no arquivo FLA para manter separados os itens que são diferentes.

    Para configurar o FLA para adicionar elementos interativos:

    1. Crie um arquivo FLA com uma animação simples, como uma interpolação de movimento ou uma interpolação de forma. Se você já tiver um arquivo FLA contendo a animação que está apresentando no projeto, abra esse arquivo e salve-o com um novo nome.

    2. Decida onde na tela você vai querer que os dois botões apareçam. Um botão serve para iniciar a animação e o outro, para criar um link para o portfólio do autor ou para a home page. Se necessário, limpe o Palco ou adicione espaço para esse novo conteúdo. Se a animação já não tiver uma, você pode criar uma tela de inicialização no primeiro quadro. Nesse caso, você provavelmente vai querer trocar a animação, para que comece no Quadro 2 ou depois disso.

    3. Adicione uma nova camada, acima das outras camadas na Linha de tempo, e nomeie-a como buttons. É nessa camada que você vai acrescentar os botões.

    4. Adicione uma nova camada, acima das camadas de botões, e renomeie-a como actions. Nela, você adicionará o código do ActionScript para seu aplicativo.

    Criação e adição de botões

    Em seguida, você vai criar e posicionar os botões que formam o centro do aplicativo interativo.

    Para criar e adicionar botões ao FLA:

    1. Usando as ferramentas de desenho, crie a aparência visual do seu primeiro botão (o botão "reproduzir") na camada de botões. Por exemplo, desenhe uma figura oval na horizontal com texto em cima.

    2. Usando a ferramenta Seleção, selecione todas as partes gráficas do botão sozinho.

    3. No menu principal, escolha Modificar > Converter em símbolo.

    4. Na caixa de diálogo, escolha Botão como o tipo de símbolo, dê um nome ao símbolo e clique em OK.

    5. Com o botão selecionado, no Inspetor de propriedades, dê ao botão o nome de ocorrência playButton.

    6. Repita as etapas de 1 a 5 para criar o botão que leva o espectador à home page do autor. Chame este botão de homeButton.

    Gravação do código

    O código do ActionScript para este aplicativo pode ser dividido em três conjuntos de funcionalidade, embora todos o insiram no mesmo lugar. O código faz três coisas:

    • Parar o indicador de reprodução assim que o arquivo SWF carregar (quando o indicador de reprodução entrar no Quadro 1).

    • Monitorar um evento para iniciar a reprodução do arquivo SWF quando o usuário clicar no botão de reprodução.

    • Monitorar um evento para enviar o navegador à URL apropriada quando o usuário clicar no botão da home page do autor.

    Para criar um código que pare o indicador de reprodução quando ele entrar no Quadro 1:

    1. Selecione o quadro-chave no Quadro 1 da camada de ações.

    2. Para abrir o painel Ações, no menu principal, escolha Janela > Ações.

    3. No painel Script, digite o seguinte código:

      stop();

    Para escrever código para iniciar a animação quando o botão de reprodução for clicado:

    1. No fim do código digitado nas etapas anteriores, adicione duas linhas vazias.

    2. Digite o seguinte código na parte inferior do script:

      function startMovie(event:MouseEvent):void 
{ 
    this.play(); 
}

      Este código define uma função chamada startMovie(). Quando startMovie() é chamado, elefaz com que a linha de tempo principal comece a reproduzir.

    3. Na linha seguinte ao código adicionado na etapa anterior, digite esta linha de código:

      playButton.addEventListener(MouseEvent.CLICK, startMovie);

      Esta linha de código registra a função startMovie() como um ouvinte para o evento click de playButton. Em outras palavras, com ela, sempre que o botão chamado playButton é clicado, a função startMovie() é chamada.

    Para escrever o código por meio do qual o navegador acessa uma URL quando o botão da home page for clicado:

    1. No fim do código digitado nas etapas anteriores, adicione duas linhas vazias.

    2. Digite este código na parte inferior do script:

      function gotoAuthorPage(event:MouseEvent):void 
{ 
    var targetURL:URLRequest = new URLRequest("http://example.com/"); 
    navigateToURL(targetURL); 
}

      Este código define uma função chamada gotoAuthorPage(). Essa função primeiro cria uma instância URLRequest que representa o URL http://exemplo.com/. Em seguida, ela passa esse URL para a função navigateToURL(), fazendo com que o navegador do usuário abra esse URL.

    3. Na linha seguinte ao código adicionado na etapa anterior, digite esta linha de código:

      homeButton.addEventListener(MouseEvent.CLICK, gotoAuthorPage);

      Esta linha de código registra a função gotoAuthorPage() como um ouvinte para o evento click de homeButton. Em outras palavras, com ela, sempre que o botão chamado homeButton é clicado, a função gotoAuthorPage() é chamada.

    Teste do aplicativo

    Agora, o aplicativo está completamente funcional. Vamos testá-lo para ver se isso é verdade.

    Para testar o aplicativo:

    1. Do menu principal, escolha Controlar > Testar filme. O Flash Professional cria o arquivo SWF e o abre em uma janela do Flash Player.

    2. Tente os dois botões para verificar se eles agem conforme o esperado.

    3. Se os botões não funcionarem, veja algumas coisas que você pode verificar:

      • Os dois botões têm nomes de ocorrência distintos?

      • As chamadas de método addEventListener() usam os mesmos nomes que os nomes de ocorrência dos botões?

      • Os nomes de evento corretos foram usados nas chamadas de método addEventListener()?

      • Foi especificado o parâmetro correto para cada uma das funções? (Os dois métodos precisam de um único parâmetro com o tipo de dados MouseEvent.)

      Todos esses erros e a maioria de outros erros possíveis resultam em uma mensagem de erro. A mensagem de erro pode aparecer quando você escolh o comando Testar filme ou quando você clica no botão enquanto está testando o projeto. Analise o painel Erros do compilador para ver os erros (aqueles que ocorrem quando você escolhe pela primeira vez o Testar filme). Verifique se há erros em tempo de execução no painel Saída, os quais ocorrem enquanto o conteúdo está sendo reproduzido, por exemplo, quando clica em um botão.