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.