GRADIENTES. f lash TRABALHANDO COM. Guilherme Marconi

Transcrição

1 f lash TRABALHANDO COM GRADIENTES Muito bem, vamos parar de falar sobre essa ferramenta espetacular e colocarmos logo a mão na massa. Neste exercício, nós veremos o que se pode criar com uma boa noção de gradientes. Eu aconselho que antes de tentar fazer esse exercício, você leitor, dê uma olhadinha nas ferramentas do programa para se familiarizar com a interface e ferramentas de desenho. Com o Flash aberto, vamos começar a configurar o nosso movie para ficar de acordo com o exercício (figura1). Já com o nosso movie configurado, vamos então criar agora um circulo no centro do movie, lembre-se que ele não deve conter nenhum tipo de contorno (figuras 2 e 3). Já com a circulo criado, vamos trabalhar em cima do primeiro gradiente, que será usado para dar volume a nossa futura esfera; o gradiente terá as configurações de modo: Radial e alhpas em tom branco de 0% e 45% (figura 4). Após o nosso gradiente ser aplicado ao circulo, precisamos fazer os ajustes para que ele fique de modo correto no mesmo, para isso usaremos a ferramenta marcada em vermelho para ajustar as configurações necessárias para que o gradiente fique do modo mais correto possível (figura 5). Vamos criar novapor Guilherme Marconi acordo com a King Brown & Partners (uma firma independente de pesquisa) que realizou um estudo para determinar quantos navegadores da Web contavam com o Flash pré-instalado. Os resultados mostram que 76,8% dos usuários da Web poderão ter acesso ao conteúdo do Flash sem ter que descarregar ou instalar um controlador. E para alegria de todos, qualquer mortal pode criar arquivos do flash, pois ele roda em qualquer PC com um Processador Pentium de 133 MHz com 32MB de RAM, Windows 95/98, NT4 ou mais avançado, e para usuários de MAC basta um Power Macintosh com o MacOS 7.5 ou mais avançado e 32MB de RAM. Para quem não conhece o produto ainda, vou dar uma breve introdução do que ele pode fazer: O Flash é a única ferramenta que permite que você crie sites com gráficos vetoriais e bitmaps, movimento, áudio MP3 e interatividade com um tamanho incrivelmente pequeno. Quem nunca viu ou ouviu falar em sites totalmente animados e interativos produzidos por um tal Flash?? Essa tecnologia vem dando muito o que falar na web, principalmente pelo sua velocidade de carregamento e pelo alto impacto visual que pode ser obtido. Muitas das maiores empresas nacionais e internacionais, já apostam no poder dessa tecnologia para prenderem os usuários o maior tempo possível em seus WebSites, e fixar o seu nome na cabeça dos usuários. O Macromedia Flash é uma boa pedida para os webmasters que queiram explorar o máximo da sua criatividade e, ao mesmo tempo, uní-la a uma ferramenta que se tornou febre no mercado da internet. Além do mais,o flash já atingiu mais de 100 milhões de usuários, isso de Figura 1 Figura 2 Figura 3 46

2 Figura 4 Figura 5 Figura 6 Figura 7 mente, mais um circulo do mesmo tamanho que o primeiro, só que agora em um novo layer (figura 6). Depois do circulo pronto, é hora de trabalhar no novo gradiente para essa esfera, ele terá as configurações de modo: Radial e alhpas em tom branco de 0% e 70% (figura 7). Agora repetiremos o processo de ajustes de gradiente do primeiro circulo só que com uma diferença, as configurações tem que estar parecidas com a Figura8. Repetiremos o processo de criar mais um circulo, só que agora o layer deve ficar abaixo de todos os outros, uma dica: trave os outros layers dos círculos para facilitar o trabalho (Figura 9). Iremos agora para o terceiro e último gradiente, ele terá as configurações de modo: Linear e alhpas 40% e 100%, dessa vez você escolhe a cor que preferir. Repetiremos o processo de ajustes de gradiente do primeiro circulo, mas lembre-se, os ajustes devem estar como o da figura11. Nossa esfera já está pronta, mas vamos aproveitar a ocasião para aprender como usar texturas em objetos no flash. Crie um Figura 8 Figura 9 novo layer e posicione ele por baixo de todos os outros, agora de um import (File>Import) e escolha uma imagem que você goste tipo uma paisagem ou qualquer coisa do gênero (figura12). Após ter importado a sua imagem, vamos convertê-la em vetor do Flash usando o atalho CTRL+B, logo depois iremos usar o nosso contagotas para transformar a imagem que importamos em tinta (figura 13). Após termos feito isso, é hora de deletar a imagem importada pois não precisaremos mais dela, isso porque transformamos a mesma em tinta, com o layer limpo vamos criar o quarto e último circulo e neles iremos aplicar a tinta (imagem que importamos) e com nossa já conhecida ferramenta de ajuste de gradientes, iremos posicionar a paisagem do melhor modo possível (figura 14). Pronto, agora você tem uma esfera. CRIANDO GRÁFICOS E MOVIES CLIPES Agora já com a esfera pronta, iremos converter cada objeto nos layers em um gráfico usando a tecla F8 (figura 15), após termos convertido todos os objetos em gráficos separadados, iremos transformar os mesmos em um único gráfico chamado esfera (figura 16). Com esse passo concluído, iremos deletar todos os layers inúteis, deixando apenas um layer que usaremos para criar o chão da animação, com um simples retângulo ocupando o movie todo (figura 17). Continuaremos trabalhando Figura 11 Figura 12 Figura

3 Figura 13 Figura 14 Figura 15 com gradientes, mas dessa vez de uma maneira mais simples, as cores do gradiente usadas ficam a seu critério, mas lembre-se de que ele deve ter as configurações modo: radial alpha 100% e 100% (figura 18). Com o gradiente aplicado ao nosso retângulo, iremos ajustar as propriedades do gradiente do jeito que ele fique como na (figura 19). Iremos trabalhar agora com o nossa esfera, teremos que a diminuir para que ela fique como na (figura 20). Com essa tarefa concluída iremos criar o primeiro movie clipe do exercício (figura 21), e iremos chamar esse movie clipe de Esfera animada. Iremos então editar o nosso movie, para isso basta clicar com o botão direito do mouse e pedir a opção Edit in Place ; Dentro do movie clipe iremos aprender como usar a guia do flash, para isso clique com o butão direito do mouse no respectivo layer que esta a nossa esfera, e use a opção Add Motion Guide, após ter feito isso você vai reparar que foi criado um layer logo acima do que esta a esfera, chamado Guide: (nome do seu layer). Pronto com essa tarefa concluída, iremos desenhar uma guia como a da figura (figura 22). Agora para darmos mais realidade a nossa animação, vamos fazer uma sombra, para isso criaremos um novo layer abaixo do layer existente que esta a nossa esfera, com isso pronto teremos que desenhar um circulo como a da (figura 23), mais uma vez usaremos recursos de gradientes para darmos mais realismo a sombra, ass configurações são as seguintes modo: Radial alpha 65% 0% (figura 24). Com o gradiente aplicado, iremos configurá-lo para obtermos um melhor aproveito do mesmo (figura 25). Após termos feito isso, iremos transformar a sombra em um gráfico, para quem não lembra basta teclar F8, Iremos chamar esse gráfico por Sombra. Agora repetiremos o mesmo processo de criação de guia para a esfera, so que para a sombra que acabamos de Figura 18 Figura 16 Figura 17 Figura 21 Figura 19 Figura 20 Figura 22 48

4 Figura 24 Figura 23 Figura 25 Figura 27 Figura 26 criar, a guia deve ser como a da (figura 26). Iremos criar agora os quadros da animação, para isso usaremos a tecla F6 na linha de tempo do novo Movie Clipe, basta seguir o exemplo (figura 27). Definiremos primeiro a posição da esfera em cada quadro, aconselho você a deixar os outros layers invisíveis, para isso basta clicar no olhinho dos layers que você não ira utilizar no momento, e aconselho também a ligar o magnetic no programa, para isso basta clicar no imã na barra de ferramentas do programa; voltando o assunto, iremos configurar a posição de da esfera em cada quadro, o frame 10 ela deve ficar como na (figura 28), após colocarmos na devida posição iremos configurar seu alpha, para isso devemos clicar com o botão direito na esfera e depois em Properties depois Color Effect e finalmente Alpha, com o Alpha selecionado devemos defini-lo com 80% (figura 29). Com esse passo pronto é hora de posicionarmos a esfera no frame 20 (figura 30) e definirmos seu Alpha como 0%. Após termos terminado isso, iremos selecionar todos os frames do layer que a esfera esta, e faremos o seguinte: iremos criar a animação entre os frames que configuramos, para isso clicaremos com o botão direito na mesma e usaremos a seguinte opção: Properties isso abrira uma caixa com o rotulo de Frame Properties então escolheremos na opção Tweening o modo Motion (figura 31). Iremos configurar a nossa sombra agora, no frame 5 ele terá que ficar como na (figura 32), lembre-se que a sombra deve sofre ajustes de escala conforme a altura da esfera. No frame 10 ela deve ficar como na (figura 33). No frame 15 (figura 34). No frame 20 (figura 35). Com Figura 28 todos os frames da sombra configurados, iremos usar os mesmo processo de animação da esfera, para isso clicaremos com o botão direito na sombra e usaremos a seguinte opção: Properties isso abrira uma caixa com o rotulo de Frame Properties então escolheremos na opção Tweening o modo Motion (figura 36). USANDO TELL TARGET E BOTÕES Com tudo pronto, iremos voltar a nossa cena principal Scene1. Iremos agora aprender a criar botões, criaremos um novo layer na nossa cena principal, após termos feito isso criaremos uma elipse usando o circulo do programa. Com o cir- Figura 30 Figura 31 Figura

5 Figura 32 Figura 33 Figura 34 Figura 35 Figura 36 Figura 37 culo pronto irmos convertê-lo em botão usando a tecla F8 (figura 37). Iremos clonar os botões, para isso arrastaremos nosso botão com o ALT pressionado. Iremos agora rotular os botões, para isso iremos usar a ferramenta de texto, devemos escrever ON e OFF (figura 38). Esses botões serão usados para Animar e Parar a Animação do nosso movie clipe. Após os butões criados e rotulados, iremos nomear no target, para isso basta puxar as propriedades da nossa esfera e no sua propriedade Instance Name vamos colocar o seguinte nome: esfera. Após termos terminado isso vamos criar as opções extra de um botão, para isso clicaremos com o botão direito em qualquer um dos dois botões e depois em Edit in Place, Figura 38 Figura 39 agora iremos melhorar o nosso botão, adicionando uma movimento para quando o usuário passar o mouse sobre nosso botão (figura 39) a cor fica a seu gosto, após fazermos isso voltaremos a nossa cena principal Scene1. Com esse passo concluído, passaremos a conhecer um pouco da programação no flash, para isso vamos clicar com botão direito do mouse no nosso botão que serio o ON, depois vamos acessar as propriedades do mesmo, e depois Actions, nos actions iremos inserir o seguinte comando (figura 40): On (Press) Begin Tell Target ( /esfera ) Play End Tell Target End On E no botão OFF o seguinte comando: On (Press) Begin Tell Target ( /esfera ) Stop End Tell Target End On Após termos terminado isso, vamos testar nosso movie para ver o resultado. Esse tipo de técnica é muito usado para se criar jogos e interatividade no flash. Guilherme Marconi meshsmooth@uol.com.br IRC: Server: irc.elogica.com.br Canal: #pontoflash - apareça! Figura 40 50