Crie um novo documento de mais ou menos 300x300Selecione a ferramenta Elipse tool (elipse U)

Transcrição

1 Animação

2 Crie um novo documento de mais ou menos 300x300Selecione a ferramenta Elipse tool (elipse U)

3 Crie uma bola segurando a tecla SHIFT com uma cor qualquer Duplique essa bola através do menu Editar > Duplicar ou segure a tecla ALT e clique e arraste para o lado.

4 Selecione os dois objetos e vá no menu Modificar > Combinar traçado> Perfurar

5 Seu objeto ficará assim.

6 Duplique ela ate ficar como a imagem do lado.

7 Pegando o exemplo acima, selecione os 3 objetos e duplique elas.selecione elas e rotacione deixando como a imagem ao lado. Modificar > Transformar

8 Agora vamos aplicar o efeito de movimento.vá no menu janelas > Moldura

9 Nesta janela vamos duplicar os objetos. Veja na imagem ao lado, clique onde indica a seta em destaque, irá aparecer algumas opções, selecione Duplicate Frame (duplicar moldura).

10 Irá aparecer esta tela, no campo Número coloque 4, deixe o resto como está.

11 Veja como ficou a tela de Moldura ao lado.

12 Selecione o primeiro Frame e pinte somente as pontas, como mostra a figura ao lado.

13 Agora selecione o segundo Frame e pinte de outra cor, veja a imagem.

14 Faça isso no terceiro frame.

15 No quarto frame pinte a bola de outra cor.

16 No último frame, só pra enfeitar desenhei um objeto acima da bola.

17 Agora selecione todos os frames segurando a tecla SHIFT e clique duas vezes na coluna onde tem um número que geralmente é o 7, neste caso esta 15.

18 Irá aparecer esta tela menor, coloque em torno de 20 ou 30, esse número pode variar de acordo com o que você quer fazer.

19 Agora é só clicar no botão PLAY e ver sua animação.

20 Efeito de Envelhecimento de imagem

21 1º- Abra a imagem que você deseja fazer esse efeito no Macromedia Fireworks, nesse tutorial, irei usar uma foto das PANTERAS 2º- Clique na imagem para seleciona-la

22 3º- Agora vá ao menu Filtros> Ajustar cor> matiz/saturação

23 4º- Irá abrir uma janelinha, você deverá configurar como mostra a imagem abaixo:

24

25 1º- Selecione a imagem e vá no menu Filters> Adjust Color> Hue/Saturation... 2º- Irá abrir como no efeito anterior a mesma janelinha, mais desta vez, você deverá configurar do seguinte modo da imagem abaixo:

26 3º- Você terá o seguinte resultado:

27 4º- Com essa imagem o efeito preto e branco deixou muito escura a imagem, talvez porque a imagem original é bem clara. Se caso a sua imagem também acontecer isso, proceda da seguinte forma: a- Vá ao menu Filtros> Ajustar cor Color> níveis automáticos

28

29

30 Banner Flutuante Dreamweaver

31 Começamos com um arquivo em branco no Dreamweaver MX. Para que o banner apareça sobre a página, precisamos inserir uma camada a mais no arquivo HTML. Selecione o menu Inserir e depois a opção Camada. Surge então um retângulo no arquivo HTML. Tudo que estiver nessa caixa aparecerá sobre o conteúdo da página.

32 O passo seguinte é inserir a imagem dentro da camada. Basta acionar o menu Inserir e a opção Imagem, escolhendo o arquivo desejado. Esse exemplo foi feito com um GIF animado, mas pode ser também uma imagem estática ou uma animação em Flash (nesse caso, acionamos o menu Inserir/Mídia). Não se esqueça de reservar um espaço para o botão Fechar.

33 Agora é hora de movimentar o banner. Clique na alça do canto superior esquerdo da camada (tenha cuidado para não selecionar apenas a imagem). Depois clique com o botão direito. Escolha a opção Gravar Caminho. Surgirá a janela Linhas de Tempo, que veremos adiante. Clique na alça da camada e a arraste pela tela, traçando o percurso desejado. O Dreamweaver exibe uma linha que acompanha seus movimentos. Quando completar o caminho, solte o botão do mouse.

34 Passamos agora para a janela Linhas de Tempo, que controla a velocidade e acompanha a posição da camada em cada instante da animação. É importante marcar a caixa Execução Automática, para que a animação seja ativada assim que a página for carregada. A caixa Loop faz com que a animação se repita indefinidamente, mas essa não é a intenção nesse exemplo. Tecle F12 para testar. Se tudo foi feito corretamente, seu banner já está dançando na página. Mas por enquanto não serve pra muita coisa, já que não tem nenhuma área clicável.

35 Para resolver o problema, precisamos criar duas áreas de clique na imagem: uma manda o usuário para o site desejado e a outra fecha o banner. Isso é feito com o recurso de mapeamento de imagem do Dreamweaver (quem usa uma animação Flash deve mapeá-la dentro do próprio aplicativo).

36 Selecione a imagem e, na janela de Propriedades, clique na seta do canto inferior direito para exibir todas as opções. Escolha uma das alternativas de mapeamento (reto, circular ou desenho livre) e marque a área do link na imagem. Nesse exemplo, definimos um retângulo em torno da cabeça do boneco que tem nas mãos o Guia da Foto Digital. Um sombreamento indica a área mapeada. Na caixa Link, insira o endereço do site (com Na área Destino, escolha a opção _blank para que o link seja aberto numa janela nova. Com isso, a primeira parte da imagem está mapeada.

37 Para demarcar a segunda parte, o procedimento é semelhante. Clicamos na opção de mapeamento desejada e contornamos a área do botão Fechar.

38 Nesse ponto, o procedimento é um pouco mais complicado. A segunda área mapeada não é um link para outro site, mas sim um comando para fechar o banner. Para que isso funcione, precisamos usar um evento JavaScript. Selecione a área mapeada em torno do botão Fechar, acione o menu Janela/Comportamento e clique na aba Comportamento. Essa janela possui duas colunas: Evento (quando acontecerá) e Ação (o que acontecerá). Clique no botão + para acrescentar uma ação à área selecionada. Escolha a opção Mostrar/Ocultar Camada. Na janela seguinte, clique em Ocultar e depois em OK. Dessa forma definimos a ação (fechar a janela), mas não o evento. O Dreamweaver, por padrão, incluirá o evento onmouseover

39 Assim, a imagem será fechada quando o mouse passar sobre a área do botão Fechar. Mas queremos que o banner desapareça apenas quando o usuário clicar no botão. Por isso, mudamos o evento para onclick, clicando na seta ao lado da palavra onmouseover.

40 Pronto, o banner flutuante agora está completo. Tecle F12 para testar a animação e os links. Para inserir o banner em qualquer página, basta copiar a camada e colar no arquivo HTML desejado. O único cuidado extra é checar se o arquivo já tem uma camada com o mesmo nome da que foi criada para o banner.