O Macromedia Flash MX 2004 oferece várias maneiras de criar sequências de animação:
Efeitos de animação - o próprio programa cria uma sequência de frames que simula este ou aquele efeito em relação a algum objeto;
Animação quadro a quadro - o usuário cria cada quadro da animação futura;
Animação interpolada automática ou animação de transformação - o usuário define os quadros inicial e final, e o próprio programa cria quadros intermediários com base na interpolação de software.
Efeitos de animação
O Flash MX 2004 inclui efeitos de linha do tempo de animação predefinidos que permitem criar animações complexas com um mínimo de etapas. Você pode aplicar a função Efeitos da linha do tempo para os seguintes objetos:
Objetos gráficos, incluindo formas, objetos agrupados e símbolos gráficos;
Bitmaps;
Quando você adiciona efeitos de animação a um objeto, o Flash cria automaticamente a camada apropriada e todas as transformações de movimento e forma necessárias para esse efeito são implementadas nessa camada. A nova camada recebe automaticamente o mesmo nome do efeito.
Como exemplo, vamos criar um efeito de explosão aplicado ao texto. Para isso, digitamos alguma frase ou palavra (Fig. 1), selecionamos com a ferramenta Seta e executamos o comando Insert \u003d\u003e Timeline Effects \u003d\u003e Effects \u003d\u003e Explode.
Figura: 1. Objeto de texto selecionado
Como resultado, o painel com o mesmo nome aparecerá (Fig. 2), o que fornece a capacidade de ajustar vários parâmetros de efeito.
Figura: 2. Painel de explosão
A presença de uma janela de antevisão permite-lhe analisar diferentes variações de efeitos sem sair do painel Explodir... Depois de selecionar os parâmetros necessários, clique no botão Está bem e obter algo como esta animação.
Efeitos semelhantes podem ser aplicados a um bitmap. Vamos considerar um exemplo com o desaparecimento suave de uma imagem bitmap. Importando um bitmap para a cena por comando Arquivo \u003d\u003e Importar \u003d\u003e Importar para o estágio (Fig. 3) e aplique o efeito Desfoque por comando Insert \u003d\u003e Timeline Effects \u003d\u003e Effects \u003d\u003e Blur rolo.
Figura: 3. Bitmap importado para a cena
Para editar o efeito de animação, selecione o objeto associado ao efeito na cena e na janela que aparece Propriedadesaperte o botão Editar (fig. 4) - como resultado, o painel aparecerá Borrão.
Figura: 4. Botão Editarlocalizado na parte inferior do painel Propriedades
No painel Borrãovocê pode alterar os parâmetros do efeito novamente e salvar as novas configurações (Fig. 5).
Figura: 5. Painel Borrão permite que você altere as configurações de efeito
Animação quadro a quadro
Vamos considerar o exemplo mais simples - uma folha se move de um ponto da tela para outro com uma rotação em torno de seu eixo.
Figura: 6. Primeiro quadro-chave da animação
Vamos desenhar uma folha de bordo, por exemplo, como mostrado na fig. 6, - a moldura correspondente no painel Linha do tempo ficará cinza e um ponto aparecerá dentro dele para indicar que este é um quadro-chave. Um quadro-chave é um quadro no qual o conteúdo é colocado ou modificado.
Figura: 7. Crie o segundo quadro arrastando e transformando o primeiro
Em seguida, clique com o botão direito do mouse no quadro adjacente e insira outro quadro-chave usando o comando Inserir quadro-chave... Como resultado, uma cópia da folha aparecerá neste quadro; mova-o para baixo (usando a ferramenta Seta) e gire-o usando o comando Modificar \u003d\u003e Transformar \u003d\u003e Transformação Livre (fig. 7).
Vamos repetir o procedimento para que no 6º quadro a folha tome sua posição final (Fig. 8).
Figura: 8. Último quadro da animação
Preste atenção ao painel Propriedades (Fig. 8) - o tipo de objeto é indicado no lado esquerdo do mesmo. Em cada quadro, a folha é um objeto do tipo Forma (forma), outros tipos de objetos serão discutidos um pouco mais tarde.
Para exportar um filme como um arquivo SEF (formato nativo da Macromedia para filmes Flash), execute o comando Arquivo \u003d\u003e Exportar \u003d\u003e Exportar filme... Como resultado, obtemos o seguinte filme leave1.fla). Você pode assistir ao filme resultante sem deixar o Flash no comando Controle \u003d\u003e Testar filme... Além disso, para ver quanto espaço os quadros individuais do filme ocupam, você deve executar o comando. Como resultado, veremos que cada um dos seis quadros tem cerca de 600 KB (Fig. 9). Portanto, o tamanho de todo o filme é 3686 bytes.
Figura: 9. Assistindo a um filme no modo Bandwidth Profiler
Para avaliar se isso é muito ou pouco, considere como um filme semelhante pode ser feito usando animação automática ou animação de transformação de movimento.
Animação automática
Figura: 10. O objeto se transforma automaticamente em um símbolo gráfico
Vejamos como você pode fazer a mesma animação e obter um arquivo de saída mais compacto. Selecione a folha desenhada na tela com a ferramenta Seta e execute o comando Inserir \u003d\u003e Linha do tempo \u003d\u003e Criar interpolação de movimento, como resultado, a folha será colocada em uma moldura, e no painel Propriedades aparecerá uma mensagem de que o objeto selecionado tem propriedades Grafic (fig. 10). Isso significa que o objeto animado é automaticamente convertido em um símbolo gráfico. Agora não é mais possível editá-lo arbitrariamente com a ferramenta Seta como um objeto do tipo Forma. O uso de símbolos é um conceito importante no Flash. Depois que um símbolo é criado, ele pode ser usado várias vezes em um filme sem aumentar o tamanho do arquivo resultante. Os símbolos são divididos em gráficos, símbolos de botão e clipes de filme. Nesta lição, consideraremos um símbolo gráfico e retornaremos a outros tipos de símbolos posteriormente. Cada novo símbolo torna-se imediatamente parte da biblioteca do documento atual (Fig. 11).
Figura: 11. Cada novo símbolo torna-se parte da biblioteca
Se você executar o comando Janela \u003d\u003e Biblioteca, você pode ter certeza de que o símbolo aparece na biblioteca e é nomeado por padrão Tween 1. Para atribuir um nome diferente a um símbolo, basta clicar duas vezes no nome e substituí-lo pelo desejado. Depois de formar o símbolo gráfico, vá para o quadro final da nossa animação (seja o 15º quadro) e insira um quadro-chave (pelo comando Inserir Quadro-chave) Neste quadro, uma cópia do símbolo irá aparecer, que iremos mover e girar em torno do eixo (pelo comando Modificar Transformação \u003d\u003e Transformação Livre) como no exemplo anterior. Como pode ser visto na Fig. 12, todos os quadros entre os dois quadros-chave ficaram azuis e uma seta se estende do primeiro ao último, o que indica a criação da animação Interpolação de movimento.
Figura: 12. Uma seta em um fundo azul indica a criação de animação Interpolação de movimento
Executando o comando Controle \u003d\u003e Testar filme, obtemos as informações apresentadas na Fig. 13
Figura: 13. Assistindo a um filme no modo Bandwidth Profiler
Apesar de neste exemplo termos 15, e não seis frames, como no anterior, e a animação ter ficado mais suave, o tamanho do arquivo resultante é menor - apenas 900 bytes. Como pode ser visto no diagrama (Fig. 13), as informações sobre o objeto são armazenadas apenas no primeiro quadro, sendo que a cada novo quadro é necessário lembrar apenas as novas posições da folha. Isso leva em média apenas 20 bytes.
A fim de ilustrar a queda da folha com uma rotação em torno do plano da folha, repetimos o exemplo anterior, somente ao modificar o último quadro-chave, adicione o comando Modificar \u003d\u003e Transformar \u003d\u003e InverterHorizontal. Como resultado, temos o seguinte filme.
Agora vamos ver um exemplo em que uma folha se aproxima do visualizador. Para fazer isso, em vez de espelhar ( Virar na horizontal) vamos aumentar o tamanho da folha. Para evitar a sensação de desaceleração quando o objeto se aproxima do observador, a velocidade de seu movimento deve ser aumentada. Para obter este efeito, você precisa clicar no primeiro quadro e consultar a seção Facilidade no painel Propriedades... Valores positivos para o parâmetro Ease irão desacelerar o movimento, enquanto valores negativos irão acelerar. Vamos escolher a aceleração máxima do objeto.
Figura: 14. Vamos escolher a aceleração máxima do objeto Ease \u003d -100
Para fazer isso, defina o valor do parâmetro Facilidade igual a -100 (fig. 14). O resultado é um filme. Observe que o primeiro quadro pode ser colocado atrás da cena, então obteremos um filme no qual a folha voará para dentro do quadro e se moverá em direção ao visualizador. Você pode simular a rotação da folha em torno de um centro de simetria deslocado. Esperançosamente, o leitor será capaz de experimentar por conta própria, tornando mais difícil modificar o quadro final e, assim, mudando a natureza do movimento da folha.
A partir dos exemplos apresentados, é óbvio que a animação automática do movimento é eficaz quando a transformação de um objeto durante o seu movimento é definida por funções simples (rotação, dimensionamento, etc.). Se você precisa animar movimentos complexos (por exemplo, o movimento da mão de um personagem de desenho animado), a animação da transformação do movimento não é aplicável. Cada quadro deve ser desenhado manualmente, ou seja, aplicamos a animação quadro a quadro que consiste em um conjunto de quadros principais. Assim, a animação quadro a quadro é a mais versátil, mas, ao mesmo tempo, o tipo de animação mais demorado, além de criar os arquivos mais "pesados". Sempre que você puder substituir animações quadro a quadro por automáticas, isso é preferível. Vejamos alguns exemplos que permitem que você use interpolações automáticas para simular o vôo.
Movimento ao longo de uma determinada trajetória
O Flash permite definir o movimento de um objeto ao longo de um caminho especificado. Para definir esta trajetória, execute o comando Inserir \u003d\u003e Linha do tempo \u003d\u003e Guia de movimento.
Como resultado, uma camada especial aparecerá acima da camada atual, que por padrão terá o nome Camada Guia 1.
Clique na camada de trajetória e use a ferramenta Lápis para desenhar uma linha ao longo da qual você planeja mover a folha (Fig. 15).
Figura: 15. Um exemplo de definição da trajetória do movimento
Agora vamos para o primeiro quadro (clique nele com o mouse) e no painel que aparece Propriedades Verifica a caixa Snap (define o modo de ligação para a trajetória do movimento) - fig. 16
Figura: 16. Parâmetro Snapdefine o modo de ajuste ao caminho de movimento
Depois de marcar a caixa Snap, o centro da folha está alinhado com a trajetória. Usando a ferramenta Seta, você pode mover a folha ao longo da curva de movimento, mas se você tentar arrancar a folha do caminho e colocá-la ao lado dela, ela será puxada para trás e "colará" no caminho de movimento novamente (Fig. 17).
Figura: 17. O objeto parece aderir à trajetória de seu centro
Vá para o último quadro e da mesma forma amarre a folha no ponto final da trajetória. Adicione uma transformação para fazer o filme parecer tridimensional. Virar na horizontal, - como resultado, temos um filme.
Quando a folha se move ao longo da trajetória, não é importante para nós como ela será girada na direção do movimento. Mas se definirmos a trajetória de vôo do pássaro da mesma maneira, então em algumas partes da curva descobrimos que o pássaro voa com a cauda para a frente.
Obviamente, se quisermos animar o vôo de um avião ou de um pássaro, precisamos que eles movam o nariz para a frente o tempo todo. No Flash, esse tipo de movimento é muito fácil de definir (Figura 18).
Figura: 18. Se você marcar a caixa Orientar para o caminho, o pássaro vai voar de cabeça primeiro
Verifica a caixa Orientar para o caminho, e o movimento do pássaro mudará para um completamente familiar (a fonte para este vídeo é o voo de um pássaro.fla).
Figura: 19. Adicionando um fundo de cor sólida
Se você quiser adicionar um fundo monocromático, clique no fundo e no painel que aparece Propriedades (fig. 19) no campo fundo selecione a cor de fundo desejada.
Se quisermos adicionar uma imagem de fundo, precisamos de uma camada separada para isso. Em princípio, o Flash oferece a capacidade de criar um sistema de camadas semelhante à animação clássica, em que o fundo e vários objetos em movimento são desenhados em uma camada de transparência diferente.
Colocando a imagem de fundo e cada objeto animado em sua própria camada, é muito mais fácil obter controle sobre eles. Portanto, para adicionar uma imagem de fundo, crie uma nova camada para ela. Para fazer isso, clique com o botão direito do mouse na camada mostrada na Fig. 19 é designado como camada 1 e, no menu suspenso, selecione a linha Inserir camada. Na camada adicionada, desenhe o sol. Para não se confundir com os números das camadas, vamos chamar a camada de "plano de fundo". Para fazer isso, clique no nome atual e digite o nome desejado (Fig. 20).
Figura: 20. Em uma nova camada, crie um objeto de fundo estacionário.
Como pode ser visto na Fig. 20, o pássaro está atrás do sol, o que é contrário ao bom senso. Para trocar as camadas, basta arrastar e soltar a camada com o nome "fundo" para baixo.
Vamos editar os objetos do filme (para que o pássaro circule contra o fundo do sol, mude a trajetória de seu vôo e mude a proporção dos tamanhos do sol e do pássaro) e obtenha o seguinte vídeo.
Figura: 21. Crie uma camada separada para animação em nuvem
Agora vamos adicionar objetos em movimento à nossa animação, como uma nuvem. Para a nuvem, crie uma nova camada e defina uma animação de transformação de movimento nela. Para que a nuvem entre na cena, posicione-a conforme mostrado na Fig. 21. Como resultado, obtemos o seguinte filme (a fonte deste filme está no arquivo anexado
Até agora, vimos filmes em Flash que foram reproduzidos sem intervenção do visualizador do início ao fim. No entanto, o Flash também permite que você crie aplicativos interativos onde o usuário pode controlar a apresentação do conteúdo. Nesta lição, vamos começar a nos familiarizar com os elementos da linguagem de script Action Script e ver como você pode usá-la para criar aplicativos interativos. Como exemplo, vamos criar um álbum de fotos com elementos de uma interface interativa. Mas antes de prosseguir para a descrição do Action Script, é necessário falar sobre mais um tipo de símbolo que deixamos sem atenção até agora - são símbolos de botão. Eles são essenciais para a construção de uma interface interativa.
Criando botões
O botão é um clipe de filme interativo de quatro quadros. Quando definimos um símbolo para um tipo de botão, o Flash cria uma linha do tempo de quatro quadros para o novo símbolo:
O estado ativo é um quadro que corresponde à situação em que o botão não está pressionado e o ponteiro do mouse não está sobre o botão;
Sobre estado - um quadro que ilustra a aparência de um botão quando o ponteiro do mouse está sobre o botão, mas o botão não está pressionado;
Estado inativo - este quadro mostra a aparência do botão quando pressionado;
Hit-state - define a área em que o botão reage ao clique do mouse; esta área não é visível no clipe.
Para criar um botão, execute o comando Inserir \u003d\u003e Novo Símbolo (você pode digitar o atalho de teclado Control + F8). Na caixa de diálogo Criar Novo Símbolo que aparece, insira um nome para o símbolo de botão (por exemplo, but1) e selecione o tipo de símbolo de Botão.
O Flash mudará para o modo de edição de símbolo, fornecendo os quadros Up, Over, Down e Hit. O primeiro quadro, Up, torna-se um quadro-chave vazio. Vamos desenhar uma visão não comprimida do botão neste quadro (Fig. 1).
Figura: 1. Quadro do botão PARA CIMA
Vamos selecionar o segundo quadro, marcado como Sobre e correspondendo ao estado quando o cursor é colocado sobre o botão. Vamos inserir um quadro-chave neste quadro (pelo comando Inserir \u003d\u003e Quadro-chave), como resultado do qual um quadro-chave aparece, repetindo completamente o conteúdo do quadro-chave. Vamos mudar a cor do botão como mostrado na fig. 2
Fig 2. Sobreposição do botão
Da mesma forma, adicione o próximo quadro (quadro abaixo) e desenhe o estado pressionado do botão (Fig. 3).
Figura: 3. Botões de quadro inferior
Não desenharemos nada no quadro Hit ainda, mas retornaremos a este quadro um pouco mais tarde.
Vamos para a cena principal, chame a biblioteca pelo comando Window \u003d\u003e Library e crie uma instância do símbolo do botão arrastando-o para a cena (Fig. 4.)
Figura: 4. Vamos criar uma instância do botão arrastando-o da biblioteca
Como resultado, temos o seguinte filme. Como você pode ver neste filme, o botão é pressionado não apenas quando clicamos na área central (de trabalho) do botão, mas também quando clicamos no quadro ao redor dele. Isso se deve ao fato de que, se o Hit-frame não for desenhado, a área de trabalho do botão corresponderá ao Up-frame.
Para que o botão seja pressionado apenas na área de trabalho, é necessário definir esta área no Hit-frame, ou seja, desenhar um botão sem moldura (ver Fig. 5)
Figura: 5. Hit-frame do botão
Depois de adicionar o Hit-frame necessário, obteremos o próximo filme, no qual pressionar o frame não pressiona o botão.
Para tornar um botão interativo, é necessário associar o fato de pressionar o botão à execução de determinados comandos, ou seja, descrever um determinado cenário. Para scripts em Flash, existe uma linguagem especial chamada Action Script. Nesta lição, abordaremos apenas uma pequena parte dos recursos dessa linguagem e, no futuro, retornaremos à estrutura e sintaxe do Action Script à medida que os exemplos de criação de filmes interativos em Flash se tornam mais complexos.
Compreendendo o Action Script
Action Script é uma linguagem de script, um conjunto de instruções que controla os elementos de um filme Flash. Os scripts de ação podem ser incorporados ao filme ou armazenados em um arquivo de texto externo com a extensão AS.
Quando você incorpora um script em um filme, você pode incorporá-lo em diferentes partes do filme. Mais especificamente, os scripts de ação podem conter quadros-chave, instâncias de botão e instâncias de clipe de filme. Da mesma forma, os scripts são chamados de scripts de Frame Action, scripts de Button Action e de MovieClip Action.
Os scripts de ação são executados quando certos eventos são disparados pelo usuário ou pelo sistema. O mecanismo que informa ao Flash qual instrução executar quando ocorre um evento é chamado de manipulador de eventos.
Action Script tem sua própria sintaxe, bem como JavaScript. O Flash MX 2004 oferece suporte a Action Script de todas as versões anteriores do Flash.
Um dos conceitos básicos do Action Script é Actions - comandos que emitem instruções durante a execução de um arquivo SWF. Por exemplo, gotoAndStop () envia a reprodução (Reprodução) para um quadro ou rótulo específico. O nome do idioma vem da palavra Actions - Action Script (literalmente - action script). Iremos nos familiarizar com a maioria dos conceitos desta linguagem em exemplos específicos.
Álbum de fotos interativo
Vamos demonstrar como usar botões para controlar um álbum de fotos - crie um conjunto de fotos e adicione dois botões que irão rolar a foto para frente e para trás.
Coloque a primeira foto na linha do tempo principal e adicione um botão do conjunto padrão. Para acessar a pasta desejada, execute o comando Windows \u003d\u003e Control Panels Common Libraries \u003d\u003e Buttons (Fig. 6).
Figura: 6. Adicione um botão da biblioteca padrão
Como resultado da execução deste comando, um painel aparecerá contendo um grande conjunto de botões pré-desenhados de vários tipos. Vamos selecionar, por exemplo, Key Buttons (botões que se parecem com as teclas do teclado), abrir a pasta correspondente, selecionar o botão key-left (Fig. 7) e criar uma instância deste botão (arrastando-o para o palco).
Figura: 7. Itens na pasta Key Buttons
Observe que quando você posiciona o segundo botão (tecla à direita) no palco e o move para alinhar com o primeiro botão, o programa fornece uma dica (linha tracejada) que permite posicionar o botão com precisão (Figura 8).
Figura: 8. Alinhamento automático de botões no mesmo nível
Para adicionar um script, você precisa chamar o editor de Action Script pelo comando Window \u003d\u003e Development Panels \u003d\u003e Actions ou pressionando a tecla F9. Se você vai escrever scripts com frequência, vale a pena lembrar este comando de teclado. Como resultado, o editor Action Script aparecerá (Fig. 9).
Figura: 9. Painéis do editor Action Script
Se você experimentar realçar diferentes elementos na cena enquanto monitora as mensagens nos painéis do editor do Action Script, descobrirá que o programa pergunta em qual elemento você pode "travar" o código. Se você selecionar um quadro na cena, então no canto superior esquerdo do painel do editor aparecerá a inscrição Ações - Quadro, se você clicar no botão, então a inscrição Ações - Botão aparecerá, ou seja, o programa avisa que o código inserido fará referência ao script do botão. E se você selecionar uma foto, então no campo destinado à entrada de um script, aparecerá uma mensagem: A seleção atual não pode ter ações aplicadas a ela (o script não pode ser aplicado a este objeto selecionado).
Iremos atribuir um script a um botão. Em versões recentes do ActionScript, você tem a capacidade de escrever código centralizado, ou seja, código que reside em um lugar, para que possa entender melhor programas grandes. No entanto, nos exemplos simples (que estamos vendo), atribuir um script a um botão é bom.
Assim, para o botão com a seta para a esquerda, precisamos formalizar o seguinte cenário: “Se o botão for solto em um determinado frame, a partir deste frame é necessário ir para o frame anterior”. De acordo com a sintaxe da linguagem do Action Script (Fig. 10), terá a seguinte aparência:
A primeira linha contém o manipulador de eventos do botão on (), que tem o seguinte formato:
Agora vamos adicionar vários quadros-chave para que os botões criados no primeiro quadro sejam copiados para eles e colocar as fotos necessárias nos quadros recém-criados.
Se lançarmos o filme criado para execução, os frames serão reproduzidos continuamente um após o outro e, portanto, em primeiro lugar, precisamos dar o comando “Stop” no primeiro frame. Para fazer isso, adicione o comando apropriado ao primeiro quadro (Fig. 11).
Figura: 11. Script atribuído ao primeiro quadro
Nota: o comando já não é atribuído ao botão, mas sim à moldura. O fato de um script ter sido atribuído ao quadro é anotado na linha do tempo principal - uma letra minúscula "a" aparece acima do ponto em negrito na designação do quadro.
Como resultado, temos o seguinte filme.
Se tivermos apenas alguns quadros no álbum de fotos, então dois botões - "Avançar" e "Voltar" - são suficientes, mas se o conjunto de fotos for grande, então é desejável ter também botões que enviam para o início e o fim do filme. No próximo exemplo, adicionaremos os botões correspondentes: "Ao primeiro quadro" e "Ao último quadro". Você pode selecionar os botões de um mnemônico adequado na biblioteca padrão de botões da pasta Botões circulares (Fig. 12).
Usando este exemplo, vamos nos familiarizar com outro comando gotoAndStop (), que permite ir até o frame desejado e depois parar.
Figura: 12. Botões da pasta Botões do Círculo
No botão para ir para o primeiro quadro (o terceiro da esquerda na Fig. 13) vamos adicionar o código, conforme mostrado na Fig. 13
Figura: 13. Cenário para o botão "Para o primeiro quadro"
No caso de um álbum de fotos de cinco molduras, adicione o script de transição "à última moldura" ao último botão:
Scripting automatizado
Até agora, digitamos todos os comandos manualmente, mas os painéis do editor do ActionScript fornecem uma variedade de serviços de script automatizados. Vamos considerar essas possibilidades.
Figura: 14. Ferramentas de script automatizadas
O painel Action Script Editor permite selecionar, arrastar e soltar, reorganizar e excluir comandos.
Vamos mostrar como você pode escrever o mesmo script para o botão "Avançar" no modo automatizado. Selecionando a pasta Movie Clip Control (janela superior esquerda na Fig. 14), você pode acessar o manipulador de eventos on e clicar duas vezes no item correspondente ou arrastar a expressão para o campo de escrita do script no modo Arrastar e Soltar.
Figura: 15. Dica para completar a expressão
Como resultado, a expressão necessária e uma dica do formulário irão aparecer no campo de trabalho (Fig. 15): você seleciona o comando desejado no menu e a expressão é completada automaticamente. Como você pode ver no menu, você pode selecionar não apenas a condição associada aos botões na tela - você também pode selecionar no menu fig. 15 cláusulas keyPress “
Figura: 16. Acessando um botão do teclado
Usando o comando keyPress “
Figura: 17. O comando nextFrame pode ser encontrado na pasta Timeline Control
Para o botão que transfere o filme para o início do álbum de fotos, você pode selecionar pressionando a tecla Home do menu como um evento e, em seguida (Fig. 18) arrastar o comando gotoAndStop para o campo, como resultado disso, mais uma dica sobre a possível sintaxe desse comando aparecerá.
As setas na dica de ferramenta mostram diferentes opções de sintaxe. O programa oferece duas opções (Fig. 18 e 19), ou seja, oferece a configuração de uma cena e um quadro, ou apenas um quadro. No nosso caso, basta especificar apenas o quadro (Quadro). Se o nome da cena for omitido, por padrão, a transição para o quadro da cena atual é realizada.
Figura: 18. Dica sobre a possível sintaxe de comando
Figura: 19. O triângulo de seta permite que você visualize as opções de sintaxe
Depois de atribuir todos os botões aos botões correspondentes do teclado, obteremos o próximo filme, onde a paginação das fotos ocorrerá a partir do teclado e clicar nos botões na tela não causará quaisquer consequências.
É possível fornecer um cenário em que diferentes eventos levem às mesmas ações? Acontece que é possível - para isso, no manipulador de eventos on, você deve enumerar a lista de nomes de eventos. Se você colocar uma vírgula na lista de eventos após o primeiro evento, o próprio programa apresentará um menu (Fig. 20).
Figura: 20. Quando você insere uma vírgula na lista de eventos, um menu de comandos adicionais aparece automaticamente
Adicione um segundo evento ao primeiro (pressionando o botão do teclado) (liberando o botão na tela):
on (keyPress " |
Vamos repetir o procedimento para o resto dos botões e como resultado teremos um álbum de fotos, no qual a paginação das fotos será feita tanto com o mouse quanto com o teclado (o arquivo FLA original pode ser obtido no link).
No exemplo considerado, utilizamos a transição por número de quadro, mas este método nem sempre é conveniente: se a numeração dos quadros mudar durante o processo de edição, a lógica pode ser quebrada. É mais conveniente usar a transição por marca de quadro. Considere um exemplo que requer não apenas folhear o álbum, mas também mover para diferentes seções, ou seja, uma navegação mais complexa.
Deixe o álbum consistir em desenhos, computação gráfica e fotografias.
O primeiro quadro da seção "imagens" será rotulado como Imagens, da mesma forma que os primeiros quadros das outras seções, atribuiremos aos rótulos gráficos e fotos.
Crie uma camada de colocação de rótulo e denomine Lables. Para colocar uma marca em uma moldura, no painel Propriedades é necessário selecionar o tipo de Nome da marca e anotar o seu nome. No nosso caso, Imagens (Fig. 21). Coloque as etiquetas da mesma forma nos quadros 5 e 10 (Fig. 22).
Figura: 21. Um exemplo de atribuição de um rótulo a um quadro
Agora adicione uma nova camada e nomeie-a Actions. No primeiro quadro-chave da camada Actions, chame o painel Actions Frame (pressionando o botão F9) e digite o comando stop () (veja a Fig. 22)
Figura: 22. Cenário do primeiro quadro
Vamos adicionar outra camada chamada Assuntos, na qual daremos títulos aos quadros correspondentes: "Imagens" (Fig. 23), "Gráficos" e "Fotos".
Figura: 23. Título para os frames da seção "Imagens"
Agora adicione na lateral do menu botões com os mesmos nomes, que colocaremos em uma nova camada chamada Menu.
Vamos imprimir o primeiro item do menu "Imagens" da borda esquerda e traduzi-lo em um símbolo de botão. Usando a ferramenta Seta, selecione o bloco de texto "Imagens" e execute o comando Modificar \u003d\u003e Converter em Símbolo (você também pode executar este comando usando a tecla F8), no painel Converter em Símbolo, defina o tipo de símbolo de Botão e defina seu nome como Botão de imagem (Fig. 24 )
Figura: 24. Atribua o nome do pictureButton ao botão da transição para a seção de imagens
Vamos criar quatro quadros para o botão "Imagens": o primeiro representará simplesmente o texto original (Fig. 25), o segundo - o mesmo texto apenas em azul, vamos pular o terceiro quadro (neste caso, o quadro Abaixo será igual ao Sobre-quadro ), e no Hit-frame desenharemos uma área retangular que definirá a área de pressionamento do botão (Fig. 26).
Figura: 25. Up-frame do pictureButton
Figura: 26. Hit frame do pictureButton
Agora precisamos travar o script no botão recém-criado. Para fazer isso, selecione o botão na Cena 1 e, pressionando F9, chame o painel Ações e, em seguida, adicione o código mostrado na Fig. 27
Figura: 27. Transição do script para um quadro com um rótulo
Apesar de a maioria dos recursos de treinamento serem projetados especificamente para a versão em inglês, consideraremos a versão em russo, uma vez que existe um crack no pacote do Macromedia Flash 8 para facilitar o trabalho.
Figura 1.3.1 - Janela do editor do Macromedia Flash 8 com um documento não aberto
Na Figura 1.3.1, vemos uma janela do editor recém-iniciada com barras de ferramentas inativas até que um documento seja criado ou aberto, e uma barra de menu. A janela mostra uma tela com uma proposta para abrir os últimos documentos editados, criar um novo documento e criar a partir de amostras preparadas. Também nesta tela há links para recursos de treinamento em flash e uma caixa de seleção para desabilitar a exibição dessa mesma tela quando o editor é iniciado. Se você marcar esta caixa, o Flash iniciará sem uma tela de boas-vindas e aguardará suas ações com um espaço de trabalho vazio.
Figura 1.3.2 - Janela do editor Macromedia Flash 8 com um documento não aberto
A Figura 1.3.2 mostra a janela de um editor recém-lançado com barras de ferramentas inativas até que um documento seja criado ou aberto, e uma barra de menu. A janela mostra uma tela com uma proposta para abrir os últimos documentos editados, criar um novo documento e criar a partir de amostras preparadas. Também nesta tela há links para recursos de treinamento em flash e uma caixa de seleção para desabilitar a exibição dessa mesma tela quando o editor é iniciado. Se você marcar esta caixa, o Flash iniciará sem uma tela de boas-vindas e aguardará suas ações com uma área de trabalho vazia.
Camadas
Como outros editores gráficos mais poderosos que o MS Paint, o Macromedia Flash trabalha com camadas. As camadas podem ser criadas, organizadas (incluindo estar ciente das pastas, organizando uma hierarquia), excluídas, com visibilidade alternada e reorganizadas no painel esquerdo da Linha do tempo usando os botões apropriados. As camadas superiores da lista se sobrepõem às camadas inferiores da imagem. Apenas uma animação pode ser criada em uma camada.
Animação
Existem dois tipos de animação em flash: movimento e transformação.
Ao transformar uma forma, você pode controlar a própria transformação e a mudança de cor. Não funciona com símbolos e grupos
Ao mover, você pode alterar o matiz, a opacidade e o tamanho. Requer um caractere ou grupo em quadros-chave.
Camadas especiais
O Flash 8 destaca camadas de guia, máscaras de camada e camadas de caminho.
O tipo mais simples de camadas especiais no Flash são as chamadas camadas de guia. Seu único propósito é ajudar a desenhar diferentes objetos e colocar símbolos em flash.
As máscaras podem ter áreas não transparentes de forma arbitrária, através das quais as camadas mascaradas serão visíveis, a parte da camada mascarada que está localizada sob a parte transparente da camada de máscara ficará oculta atrás de um preenchimento sólido. As máscaras podem participar da animação. Normalmente usado para mostrar uma parte de uma imagem ou para fazer uma camada mascarada aparecer ou deslizar com eficácia.
Camadas de caminho são uma ferramenta muito poderosa para criar animações no Flash. A tecnologia Flash permite definir as trajetórias de movimento dos objetos graficamente, simplesmente "desenhando" na tela, e é possível definir a orientação do objeto movido em relação ao caminho. A camada de caminho é chamada de mestre, a camada anexada ao caminho é a escrava.
Símbolos
Existem três tipos de símbolos no Flash: clipe de filme, botão, gráfico. Esses não são exatamente símbolos no sentido usual. O primeiro e mais comum deles é o clipe de filme. Observe que o vídeo principal pode conter quantos outros vídeos você quiser! Esse tipo de símbolo de flash é comumente referido como "clipe" na comunidade de desenvolvedores. Essa palavra se tornou bastante comum. Tanto é assim que muitos consideram que passou das gírias para o número de termos estabelecidos. Um clipe pode conter qualquer elemento que o filme principal possa conter. Em geral, é um filme separado que vive sua própria vida. Por exemplo, parar a reprodução do vídeo principal não afeta a reprodução dos clipes de forma alguma. O segundo tipo de símbolo de flash, também amplamente utilizado, é o Botão. Um botão é um objeto especial orientado para a interatividade: normalmente assume-se que o usuário "pressiona" o botão com um clique do mouse e algo acontece. Quando o usuário passa o mouse sobre o botão, ele muda sua forma para um "pé", assim como tradicionalmente acontece quando o mouse passa sobre um hiperlink em um navegador. Verdade, isso não significa que nada acontecerá quando você pressionar o botão no vídeo. Para tornar o botão "ativo", é necessário programar as ações que são executadas ao ser pressionado (bem como ao soltar, etc.). E, finalmente, o terceiro tipo de símbolo de flash é chamado de objeto gráfico ou simplesmente gráfico. Não pense que tais objetos contêm apenas gráficos estáticos. Eles também podem conter animação, mas ao contrário dos clipes de filme, eles estão sempre sincronizados com o filme principal (ou clipe "pai", se os gráficos estiverem localizados dentro dele). Se, por exemplo, o vídeo principal parar de ser reproduzido; paradas e animação em todos os objetos gráficos localizados nele.
Os botões diferem dos símbolos anteriormente considerados em sua linha do tempo. Possui 4 frames - cima, cima, baixo, acerto. O conteúdo de cada um desses quadros corresponde ao estado do botão em eventos, respectivamente: 1 - o cursor do mouse está fora do botão, 2 - o cursor do mouse está sobre o botão e os botões do mouse não são pressionados, 3 - o cursor do mouse está pairando sobre o botão, o botão esquerdo é pressionado, 4 - a figura é selecionada, na presença do cursor, sobre o qual o botão funcionará (pode não coincidir com a imagem do botão na forma ou na posição). script de ação macromedia flash
Todos os símbolos do filme são colocados na biblioteca de símbolos do filme. O símbolo contido na biblioteca é denominado padrão. Uma amostra colocada na área de trabalho do documento é chamada de instância. As instâncias são úteis quando você precisa de muitas cópias de um símbolo. É verdade que quando a amostra é alterada, todas as cópias serão automaticamente alteradas para a atualizada. As instâncias são muito limitadas na personalização. Eles podem alterar o brilho, matiz, transparência. Você também pode atribuir um comportamento a uma instância como um clipe, botão ou gráfico, independentemente do tipo que realmente seja. A biblioteca permite catalogar amostras (pastas são permitidas), criar, importar, excluir e até mesmo substituir uma amostra por outra. Vamos agora nos voltar para o Action Script.
Todas as razões possíveis para andar estão atrasadas, o quinto semestre da minha caderneta de notas está completamente preenchido, fora da janela está -25 graus - simplesmente não tenho razão para adiar o cumprimento da minha promessa feita a vocês antes do Ano Novo em "KB"50 ... Portanto, vamos continuar nossa conversa sobre a tecnologia Flash e o popular pacote para criação de aplicativos interativos Macromedia Flash Professional 8. Hoje vamos nos concentrar em técnicas de desenho complicadas.
Devo avisá-lo imediatamente que você não encontrará uma enumeração tediosa de ferramentas Flash com uma descrição das propriedades e métodos de cada uma. Essas informações podem ser facilmente encontradas em tutoriais, livros de referência eletrônicos e ajuda em Flash ". Tentei coletar as técnicas mais interessantes que são usadas por usuários avançados e que serão do interesse de usuários novatos e designers de Flash experientes. Bem, vamos ao que interessa!
Botões modificadores
Digamos que você queira criar um retângulo arredondado na linha do tempo do Flash 8. Esta forma geométrica é desenhada usando a Rectangle Tool (R), para a qual o raio do fillet é definido usando o botão modificador "Set Corner Radius" que aparece na parte inferior da barra de ferramentas (na seção "Options"). Este método pode ser usado com sucesso para escrever botões simples rapidamente.
Ao ativar qualquer ferramenta no Flash, você deve prestar atenção aos botões modificadores, que podem mudar radicalmente a forma como a ferramenta de pintura selecionada funciona. Por exemplo, um lápis (ferramenta Pencil) pode funcionar em um dos três modos: endireitar linhas (Endireitar), suavizar cantos agudos (Smooth) e desenhar com tinta (Ink). Cada um dos modos acima é definido usando o botão modificador e pode ser útil no caso de tremor excessivo do mouse na mão ao desenhar. A ferramenta Borracha também possui vários modos de operação que permitem configurá-la para apagar linhas (modo "Apagar linhas"), áreas preenchidas com cor (modo "Apagar preenchimentos"), etc. Normalmente, o nome do botão modificador vem logo após seu propósito.
Bloqueio de preenchimento
Se você usar a ferramenta Paint Basket para pintar vários objetos com o botão modificador Fill Lock, a textura ou gradiente usado para preencher a forma será repetido em cada objeto subsequente. Em outras palavras, bloquear o preenchimento permite criar a sensação de que as formas a serem pintadas são cortadas de uma única folha de papel colorida. A ferramenta Pincel (B) também possui esta propriedade.
O bloqueio de preenchimento é útil quando você deseja ver outras pessoas através de alguns objetos. Dessa forma, você pode criar facilmente uma vista da janela para o céu noturno na lua cheia.
Grosso modo, em cada caixilho da janela (e na janela também) o observador deve ver partes da mesma imagem - o céu noturno e o disco lunar, cujo brilho enfraquece com a distância. Este efeito é obtido bloqueando o preenchimento. Vamos começar em ordem. Desenhei a própria janela usando retângulos vazios (a ferramenta Retângulo) e linhas de lápis (ferramenta Lápis) com espessura variável e preenchimento gradiente (as cores necessárias foram selecionadas na janela -\u003e painel Misturador de cores). Todos os elementos da janela estão localizados em uma camada. Em seguida, selecionei o lado direito da janela e preenchi (ferramenta Paint Basket) com um gradiente radial preto-azul-preto, ativando o modo de bloqueio de preenchimento (o botão modificador "Bloqueio de preenchimento"). Usando a ferramenta Gradient Transform Tool ("Configurando o gradiente"), selecione a melhor forma de sobrepor o gradiente. A folha da janela e a segunda metade da janela foram pintadas com o mesmo conteúdo do Paint Basket. E o toque final é a lua. Para fazer isso, pegue a ferramenta Oval ("Elipse"), remova o contorno, mantenha pressionada a tecla shift e desenhe um círculo regular no ponto mais brilhante do céu. Adicione estrelas a gosto. :)
O mesmo poderia ser feito com uma camada de máscara, sobre a qual se localizam retângulos, garantindo a visibilidade do céu nas caixilharias da janela. Mas, neste caso, você vê, mais barulho. E assim sobrevivemos com apenas uma camada.
Preenchimento de bitmap
Vamos voltar aos resultados da lição anterior e desenhar padrões de inverno no vidro.
Para fazer isso, selecione uma textura selecionando "Bitmap" na lista "Tipo" da janela "Misturador de cores". Preencha todas as janelas e use a ferramenta Gradient Transform para ajustar a posição, tamanho e inclinação da textura. Aparentemente, a geada está ficando mais forte! :)
Deixe alguém tentar olhar pela janela e limpar alguma área de geada, como costumamos fazer no inverno em transporte. Pegue um brush (Brush Tool), carregue um bitmap para ele (vista da janela) e aplique alguns traços, ligando o modo "Fill Lock". Essa é a "varinha mágica"! Nos locais onde o pincel funcionou, abriu-se uma paisagem de inverno. No entanto, você não deve se deixar levar por texturas de bitmap - o tamanho do arquivo de saída cresce aos trancos e barrancos. :)
A sombra de um objeto em movimento
Os métodos discutidos anteriormente (filtro e efeito de linha do tempo de Sombra) fazem com que o assunto projete uma sombra apenas no plano vertical. Ou seja, se pegarmos nosso clipe ou imagem gráfica e levá-lo para uma parede iluminada por uma fonte de luz arbitrariamente posicionada, a sombra estará localizada em uma superfície vertical (parede) atrás do objeto. No entanto, muitas vezes é necessário posicionar a sombra em qualquer outro plano (no chão, superfície inclinada, etc.). E aqui as ferramentas padrão já são inúteis.
Vamos pensar logicamente. Qualquer tipo de objeto (Gráfico, Botão e MovieClip) pode ser usado para as seguintes operações: redimensionar, girar, inclinar, etc. (menu Modificar -\u003e Transformar). São gráficos vetoriais! Digamos que você tenha um vídeo (vamos pegar um vídeo padrão com um macaco balançando em um galho da pasta "Amostras e tutoriais"). A biblioteca do clipe contém o símbolo do clipe e a linha do tempo contém sua representação (imagem). Quem está nos impedindo de arrastar outra representação deste clipe para a área de trabalho, preenchendo-a com preto e colocando-a no plano desejado usando o procedimento "Rotate And Skew" do menu Modify -\u003e Transform? Ninguém! E, ao mesmo tempo, a sombra corresponderá totalmente ao seu objeto - um macaco giratório e um galho, no nosso caso. Então, vamos fazê-lo.
Para preencher todo o clipe com preto, você pode seguir duas maneiras: redesenhar todos os detalhes do vídeo, o que, é claro, levará muito tempo, ou no painel de propriedades do clipe (Janela -\u003e Propriedades -\u003e Propriedades ou "Ctrl + F3") na lista de cores escolha Tint com 100% preto. O último é claramente preferível. :) Como resultado, todo o clipe ficará preto. No entanto, a sombra não tem um contorno claro, então o filme resultante precisa ser desfocado. Para fazer isso, selecione o filtro Desfoque e defina o desfoque horizontal BlurX \u003d 50, Desfoque vertical \u003d 4 e defina a qualidade como baixa (Qualidade \u003d Baixa), de forma que, ao reproduzir o clipe inteiro, a carga no hardware do PC seja menor. Agora, a sombra precisa ser posicionada no plano necessário (plano do solo). Uma animação complexa, na qual objetos em movimento projetam uma sombra de acordo com as leis da física, é criada da maneira descrita acima.
Interação de objeto
Uma característica distintiva do Flash como editor de vetor é a interação de objetos gráficos localizados na mesma camada do quadro. A natureza de sua interação depende do tipo e da posição relativa. Por exemplo, formas de cores semelhantes ficam juntas quando sobrepostas, e uma linha regular pode cortar um objeto em pedaços. O último é freqüentemente usado para subdividir uma área de preenchimento, que por sua vez pode produzir resultados impressionantes. Para excluir a interação de objetos, eles devem ser colocados em camadas diferentes.
Registro de inscrições
Em alguns casos, é útil transformar caixas de texto em gráficos para aproveitar as vantagens das técnicas de design que não são aplicáveis \u200b\u200bao texto normal. No entanto, a conversão deve ser realizada apenas quando as linhas estiverem completamente prontas para processamento posterior: as palavras são escritas sem erros, a fonte necessária é selecionada, etc. Então não será possível voltar ao tipo de dados de texto e corrigir essas falhas com as ferramentas padrão da ferramenta Texto.
Então, vamos supor que temos uma legenda de texto em nosso espaço de trabalho, a partir da qual precisamos fazer um logotipo ou um cabeçalho para um site. E o Flash, como qualquer editor de gráficos vetoriais completo, permitirá que você faça isso facilmente. Vamos dividir a frase em letras usando o comando Modificar -\u003e Separar (para esses fins, você também pode usar a combinação "Ctrl + B"). Como resultado, o bloco de texto original foi dividido em várias partes, cujo número é igual ao número de caracteres no fragmento de texto original. Para converter cada símbolo em gráfico, repetiremos este procedimento. As letras agora são representadas por áreas de preenchimento e podem ser manipuladas da mesma forma que com objetos gráficos. Por exemplo, trace um caminho. Para fazer isso, você precisa ativar a ferramenta Ink Bottle ("Inkwell"), selecionar a espessura e a cor da linha e clicar em cada letra. O texto de contorno (letras vazias) é criado excluindo áreas de preenchimento. Além disso, cada letra ou palavra pode ser completamente deformada, etc. Todos os símbolos são coletados em um bloco gráfico usando o comando Modificar -\u003e Converter em símbolo ou a tecla "F8".
Otimizando gráficos
Existem várias maneiras no Flash de reduzir o tamanho do arquivo de saída (aplicável aos formatos FLA, SWF e MOV). Primeiramente, ao publicar um vídeo, você pode selecionar o grau de compressão das imagens raster, bem como habilitar a compressão adicional do documento (menu Arquivo -\u003e Configurações de Publicação). Esta opção naturalmente não é adequada para FLA, o tipo de arquivo Flash interno. Em segundo lugar, o usuário pode remover formas desnecessárias e linhas extras da cena, bem como reduzir o número de símbolos usados \u200b\u200bao mínimo, tendo pensado sobre a estrutura de cada objeto com antecedência e removendo símbolos desnecessários da biblioteca. Em terceiro lugar, você pode usar o otimizador de linha embutido, que permitirá que você trabalhe com o número mínimo de linhas, reduzindo assim a quantidade de dados necessários para lembrar. Para fazer isso, selecione o documento inteiro ("Ctrl + A") e vá para o menu Modificar -\u003e Forma -\u003e Otimizar. Na caixa de diálogo que aparece, você pode definir os parâmetros de otimização necessários. Corri o assistente para a visualização da lua. O arquivo original continha informações sobre 91 curvas e, após a otimização, o número de linhas curvas diminuiu para 43. o tamanho do arquivo SWF de saída foi reduzido à metade. Essas ações, é claro, não afetaram de forma alguma a qualidade da imagem, porque neste caso a descrição estereotipada da imagem está sendo otimizada. Se você substituir as linhas compostas por uma linha sólida em gráficos vetoriais e endireitar um pouco as curvas, precisará de menos informações para descrever todo o desenho.
Em vez de uma conclusão
Isso é tudo por hoje. Quando trabalhei nesta obra, parti do fato de o leitor já estar familiarizado com os artigos anteriores sobre Flash, publicados na "KB" №№ - / 2005. Portanto, hoje eu não dei nenhuma referência a material passado. No entanto, se algo não estava claro para você, talvez a chave estivesse oculta nos números anteriores.
Aspera Symfonia
