FIREWORKS – Criando um Menu Pop-up.

Nesta aula vamos criar um Menu Pop-up, utilizando quadros para gerar cada uma das fases da apresentação.

VAMU LA!!! VALENDO!!!!

Solicite um documento com as características abaixo:
Largura: 800 px
Altura: 25 px
Resolução: 72 px/inch
Cor do CANVAS: #FF6600

Agora digite os textos do seu menu, com as características abaixo:

Fonte: Verdana

Tamanho: 14

Estilo: Negrito

Cor: #000000

Além dos textos, procure adicionar um objeto ao lado deles para destacar seu Menu.

Veja como ficou o meu exemplo:

Agora transformaremos todos os texto e imagens em botões. Lembre-se que seu botão é composto por texto e imagem, logo, na hora de converter, selecione os 02 objetos.

Selecione os objetos, pressione F8, defina o nome e edite as fases. Em caso de dúvidas, consulte como criar botões em capítulos anteriores.

No meu exemplo, no estágio OVER (Mouse sobre), alterei a cor do objeto do botão para destacar esta fase. Veja:

Agora, selecione o botão que mostrará outros itens abaixo dele, quando colocarmos o mouse sobre ele, gerando assim um Menu Pop-up.

No meu caso, utilizarei o botão “Produtos”.

Quando selecionamos um botão para adicionar uma ação neste, devemos verificar se a visualização dos SLICES está habilitada na barra de ferramentas. Verifique no botão abaixo:

Com o botão selecionado e os SLICES ativos, vamos verificar que no centro do botão, existe um marcador de destaque. Veja:

Agora clique neste marcado e verifique o menu que surgirá, nele selecione a opção ADD POP-UP MENU (Adicionar Menu Pop-up):

 Seremos direcionados para tela a seguir:

Repare que nesta janela temos 04 guias: CONTENT (inserimos os textos que aparecerão no Pop-up, além do link e do local onde o link será aberto), APPEARANCE (definimos a aparência do Pop-up – cores – tipo de letra), ADVANCED (definimos os tamanhos do Pop-up – largura – altura e margens) e POSITION (definimos onde o Pop-up aparecerá em relação ao botão).

Na guia CONTENT, vamos inserir os textos, links e target’s necessários para o exercício. Veja como ficou o meu:

Na guia APPEARANCE, vou personalizar as cores e fontes que utilizarei. Veja o exemplo:

Na guia ADVANCED, deixarei as larguras automáticas, pois não sabemos o quanto (em pixel) representa os textos contidos no Pop-up. Veja minhas marcações:

Para finalizar, na guia POSITION, colocarei o menu abaixo do botão, mas esta posição pode ser alterada manualmente na lona de trabalho. Veja os itens selecionados:

Após ter personalizado todos os Pop-up, vamos clicar no botão DONE (Concluído) no final da tela para confirmar a execução do Pop-up.

Note que o Pop-up aparece abaixo do seu botão e você pode movimentá-lo manualmente para ajustar sua nova posição.

Pressione F12 e veja na web como ficou:

Se você não gostou do resultado, você pode selecionar novamente o botão, clicar no marcador no centro dele e escolher a opção EDIT POP-UP MENU (Editar o Menu Pop-up). As guias aparecerão novamente para que você possa alterá-las. Não se esqueça de clicar em DONE para que as alterações sejam aplicadas. Veja:

__________________________________________________________________________________
DICAS>>>>>>>>
Não escolha tipos de fontes incomuns, pois esta ferramenta não dispõe de muitas fontes em sua lista disponível.

_________________________________________________________________________________

FUIOS!

FIREWORKS - Efeitos em Imagens

Nesta aula vamos trabalhar com efeitos em imagens, aplicando transparências em algumas regiões.

VAMU LA!!! VALENDO!!!!

Primeiramente vamos buscar algumas imagens na internet para podermos utilizar neste exercício. Neste caso, vou utilizar a bandeira de 02 países para gerar o efeito desejado. Vou utilizar as bandeiras de PAPUA NOVA GUINE e BOTSUANA.

e 

Por se tratar de bandeiras, vamos manter uma proporção para as mesmas, criando um documento com:

W: 680

H: 480
Qualidade: 72
Cor de Fundo: Transparente

Agora importe as duas imagens, redimensionando-as conforme abaixo, sem nos preocuparmos com quem ficará a frente de quem:
W: 680
H: 480
X: 0
Y: 0

Em seguida, selecione a imagem que estiver a frente e vá até o MENU COMMANDS (MENU COMANDOS), aponte para CREATIVE (CRIATIVO) e clique em FADE IMAGE (DESBOTAR IMAGEM):

Veja a janela que aparecerá:

Clique sobre o 1º exemplo nesta janela e em seguida clique em OK.

Note que aparecerá uma linha sobre a imagem com um pequeno CIRCULO em uma ponta e um pequeno QUADRADO em outra, que significam respectivamente, início e fim do efeito.

Vamos modificá-los, arrastando-os até que fiquem como na imagem abaixo:

Muito simples não?

Veja o resultado final:

__________________________________________________________________________________
DICAS>>>>>>>>
O modelo utilizado no primeiro exercício foi LINEAR, que distribui as cores de forma horizontal ou vertical, mas você encontra outras maneiras de distribuir as cores na janela do FADE IMAGEM, experimente-as.
_________________________________________________________________________________
FUIOS!

FIREWORKS - Criando Banners Animados

Nesta aula vamos criar um Banner Animado, utilizando quadros para gerar cada uma das fases da apresentação.

VAMU LA!!! VALENDO!!!!

Solicite um documento com as características abaixo:
Largura: 400 px
Altura: 400 px
Resolução: 72 px/inch
Cor do CANVAS: #000000

Digite FIREART com as características abaixo:

Fonte: Arial Rounded

Tamanho: 68

X: 47

Y: 15

Cor: #CC6600

Cor de Contorno: #FF9900

Este é nosso desenho inicial para o Banner. Agora vamos dar seqüência na criação das outras fases.

Vá ao MENU WINDOWS e escolha a opção FRAMES (QUADROS). Veja a janela do painel:

Note que existe apenas um quadro com o nome FRAME1. Dê um clique duplo no nome do quadro e altere para INÍCIO.

Acesse o MENU do painel e clique em DUPLICATE FRAME (DUCPLICAR QUADRO). Veja:

Na janela de diálogo que aparecerá, encontraremos 04 opções. São elas:

NUMBER (NUMERO) – Indica o numero de copias que faremos do quadro selecionado. – Neste caso 30

ATT THE BEGINNING (NO INICIO)– Indica que o novo quadro será criado no inicio da animação, ficando como o 1º quadro da animação.

BEFORE CURRENT FRAME (ANTES DO QUADRO ATUAL) – Indica que o novo quadro será criado acima do quadro atual.

AFTER CURRENT FRAME (APÓS O QUADRO ATUAL) – Indica que o novo quadro será criado após o quadro atual.

AT THE END (NO FINAL) – Indica que o novo quadro será criado no final da animação.

No nosso caso, utilizaremos a opção para duplicar o quadro após o atual.

Note que os novos quadros aparecerão com o mesmo nome do original. Altere o 2º para ILUSTRACOES.

Agora digite ILUSTRAÇÕES com as características abaixo:

Fonte: Gabriola

Tamanho: 50

X: 24

Y: 102

Cor: #663366

Aplique um efeito de GLOW na cor branco com leve aparência (1 x 100% x 3) como segue abaixo:

Veja como ficou:

Agora transformaremos nosso texto em animação para poder dar movimento neste. Selecione o texto ILUSTRAÇÕES e pressione uma vez a tecla F8. Dê o nome de “ilustracao_anima” e clique em ANIMATION (ANIMAÇÃO). Veja a janela da transformação:

Na janela que aparecerá aplique as seguintes características:

FRAMES (QUADROS) – Indica quantos quadros terá esta animação – Neste caso 08.

MOVE (MOVIMENTO) – Indica se o objeto terá movimento em pixels. Neste caso usaremos o valor 100.

DIRECTION (DIREÇÃO) – Indica em ângulo a direção do movimento – Neste caso utilizaremos “0”.

SCALE TO (ESCALA PARA) – Indica se o objeto sofrerá alterações em seu tamanho, utilizando escala em porcentagem – Neste caso não alteraremos o tamanho, mantendo em 100 (100%).

OPACITY (OPACIDADE) – Indica se o objeto sofrerá alterações em sua opacidade no decorrer da animação onde o primeiro campo refere-se à opacidade inicial da animação e o segundo a opacidade final do objeto na animação. Neste caso não alteraremos, mantendo 100 (100%) no inicio e fim da animação.

ROTATE (ROTAÇÃO) – Indica se o objeto rotacionará durante a animação e quantas voltas ele dará, sendo o valor de 360 (360°) para cada volta. Você pode ainda definir se o giro será no sentido horário CW (CLOCK WISE) ou anti-horário CCW (COUNTER CLOCK WISE). Neste caso não alteraremos.

Agora renomeie do quadro 03 ao 09 com o nome de “ilustrações”.

Agora clique no quadro nº 10 no painel Frames e digite o texto LOGOMARCAS com as características abaixo:

Fonte: Maiandra GD

Tamanho: 50

X: 24

Y: 156

Cor: #FFFFFF

Aplique um efeito Inner Bevel.

Veja como ficou:

Transforme o texto em símbolo com as características abaixo:

Tipo: Animation

Nome: logomarcas_anima

FRAMES: 10

MOVE: 150

DIRECTION: 270

SCALE: 400

OPACITY: 100 para 10

ROTATE: 0

Agora renomeie do quadro 10 ao 19 com o nome de “logomarcas”.

Agora clique no quadro nº 20 no painel Frames e digite o texto Imagens com as características abaixo:

Fonte: Viner Hand ITC

Tamanho: 50

X: 93

Y: 206

Cor: #FF0000

Aplique um efeito Raised Emboss.

Veja como ficou:

Transforme o texto em símbolo com as características abaixo:

Tipo: Animation

Nome: imagens_anima

FRAMES: 10

MOVE: 0

DIRECTION: 0

SCALE: 100

OPACITY: 100 para 100

ROTATE: 720 (CW)

Agora renomeie do quadro 20 ao 29 com o nome de “imagens”.

Por fim, clique no quadro nº 30 e digite o texto com as caracteristicas abaixo:

Tudo (enter)

para (enter)

o (enter)

visual (enter)

da sua (enter)

EMPRESA!

Fonte: Arial Rounded

Tamanho: 50

X: 65

Y: 87

Cor: #FFFFFF

Agora renomeie o quadro 30 com o nome de “fim”.

Veja como ficou:

Agora vamos acertar o tempo de nossa animação. Localize a barra de visualização de animações do FIREWORKS:

Pressione o botão PLAY para visualizar a animação e o botão STOP para parar.

Note que o tempo e velocidade não estão nada corretos para as apresentações.

Localize o tempo de cada quadro ao lado dos Frames no painel. Repare que inicialmente o FIREWORKS sugere 7 (centesimos de segundo).

Clique duas vezes sobre o tempo (nº 7) do Frame 1 (início) para alterarmos. Veja a janela que se abre para tal alteração:

Altere para 100 no tempo.

Do quadro 02 à 08 altere para 15 no tempo.

Altere o quadro 09 para 100 no tempo.

Altere o quadro 10 para 100 no tempo.

Do quadro 11 à 19 altere para 15 no tempo.

Altere o quadro 20 para 70 no tempo.

Do quadro 21 à 28 altere para 12 no tempo.

Altere o quadro 29 para 70 no tempo.

Altere o quadro 30 para 400 no tempo.

Agora é só assistir usando a barra de visualização.

__________________________________________________________________________________
DICAS>>>>>>>>
Voce pode mudar o tempo de vários Frames ao mesmo tempo, selecionando-os com a tecla SHIFT.

_________________________________________________________________________________

FUIOS!

FIREWORKS - Criando um Menu Completo.

Nesta aula vamos criar um Menu Completo, utilizando botões, como aprendido na aula anterior.

VAMU LA!!! VALENDO!!!!

Solicite um documento com as características abaixo:
Largura: 130 px
Altura: 400 px
Resolução: 72 px/inch
Cor do CANVAS: White

Personalize o plano de fundo a sua escolha, como no exemplo abaixo:

Agora crie um botão com o texto TECNOLOGIA e defina as fases de transformação a seu gosto (UP – OVER – DOWN – OVER WHILE DOWN e ACTIVE AREA).

Veja:

No meu exemplo, utilizei um retângulo com chanfros e estilos, alem do texto em Arial Rounded – Centralizado. Decidi apenas acrescentar ao texto, no estágio OVER, um efeito de GLOW (NEVOA) na cor do texto para destacá-lo.

Agora que criamos o primeiro botão, vamos aprender a MULTIPLICAR o mesmo, alterando apenas os textos.

Abra sua biblioteca (MENU WINDOWS – LIBRARY), assim veremos nosso botão disponível nela. Veja abaixo:

Na sua biblioteca, localize e clique no MENU para podermos duplicar o botão já criado. Em seguida clique em DUPLICATE (DUPLICAR). Veja o MENU da biblioteca:

Em seguida, na janela de diálogo que apareceu, definia o nome do novo botão (neste caso – RECURSOS), marque a opção BUTTON e em seguida clique em OK. Note que na biblioteca aparecerá este segundo botão. Veja:

Duplique mais 07 botões para podermos ter todos os botões de nosso MENU. São eles:

HOME

SOFTWARES

HARDWARES

CONTATO

EMPRESA

PRODUTOS

PARCEIROS

Após terminarmos as duplicações, teremos uma biblioteca como a seguir:

Note que não importa a ordem como criarmos os botões, automaticamente a biblioteca organizará em ORDEM ALFABETICA CRESCENTE.

Vamos agora alterar os textos dos botões para terminarmos a edição destes.

Farei pela ordem da biblioteca. Selecione na biblioteca o botão CONTATO e em seguida dê um clique duplo no exemplo deste, acima da lista. Note que seremos direcionados para as fases do botão:

Confira sempre o nome do símbolo em que você está trabalhando. Note que o texto contido no botão é igual ao primeiro botão que criamos.

Agora vamos utilizar a ferramenta TEXT TOOL (FERRAMENTA TEXTO) para alterarmos os textos. Clique no texto atual do botão e faça a alteração digitando o novo texto.

Ao terminar de digitar clique uma vez na ferramenta de seleção e note a mensagem que aparecerá:

Esta janela está te perguntando se você deseja que o FIREWORKS escreva o novo texto automaticamente em todas as fases restantes do botão. Note ainda, que existe um visto para você marcar confirmando este resposta em todas as vezes que você alterar um bota de hoje em diante. Se você marcar, não terá mais volta a não ser corrigindo a instalação do programa pelo Painel de Controle de seu computador.

Clique em YES para confirmar ao FIREWORKS que você deseja que ele escreva o novo texto em todas as fases deste botão (OVER – DOWN – OVER WHILE DOWN) para que você não tenha o trabalho de digitar 04 vezes cada texto.

Após a alteração automática do FIREWORKS, vamos clicar no botão DONE (CONCLUIDO) para retornarmos a lona de trabalho principal.

Repita estes processos para todos os outros botões da biblioteca, lembrando que os botões TECNOLOGIA e CONTATO já estão prontos.

Agora basta arrastar os botões da biblioteca para sua tela, organizando como abaixo:

Não se preocupe com a distribuição e alinhamento, faremos via recursos.

Agora que temos todos os botões dispostos na tela, vamos alinhar e distribuir para que o visual fique coerente. Selecione todos os botões com cuidado para não selecionar nosso plano de fundo.

Vá ao MENU WINDOW e escolha o item ALIGN (ALINHAMENTO) e nesta janela, clique nos botões em destaque abaixo:

Note que os botões na tela ficaram todos alinhados a mesma ESQUERDA e com distancias iguais:

Para finalizar, pressione F12 para visualizar em seu navegador e confira todos os botões.

__________________________________________________________________________________
DICAS>>>>>>>>
Antes de criar os botões verifique muito bem suas medidas para ter a certeza que cabem em sua lona de trabalho.

Comece sempre pelo botão que contem o maior texto, assim você garante que todos os textos dos demais botões caberão nas estruturas que você definiu.

_________________________________________________________________________________

FUIOS!

FIREWORKS - Criando Botões e Menu

Nesta aula vamos aprender criar botões, gerando um menu completo.

VAMU LA!!! VALENDO!!!!

Solicite um novo documento com as características abaixo:
Largura: 160 px
Altura: 400 px
Resolucao: 72 px/inch
Cor do CANVAS: White

Insira um retângulo para servir de plano de fundo da página e personalize com as cores e texturas que você desejar. Veja um exemplo abaixo:

Digite: MENU PRINCIPAL e aplique as características abaixo:

Arial Rounded MT Bold
Tamanho: 12
Negrito
Cor: BRANCO (desde que apareça em seu plano de fundo)

Insira um BEVELED RECTANGULE (RETANGULO CHANFRADO), encontrado no mesmo botão do RETANGULO, com as características abaixo:

W: 137
Y: 36
X: 12
Y: 27

Agora aplique um estilo sobre este objeto, no exemplo abaixo, foi utilizado o estilo TEXT EFFECT MEDIUM 016 (ou outro estilo que combine com seu trabalho). Veja como ficou:

Digite o texto : Novidades. Aplique as características abaixo:

Arial Rounded MT Bold
Tamanho: 15
Negrito
Cor: #680066 (desde que apareça em seu trabalho)

Veja o resultado:

Agora transformaremos estes objetos em um botão.
Selecione os 02 objetos (RETANGULO CHANFRADO e TEXTO) e em seguida vá até o Menu Modify, aponte para Symbol (SIMBOLO) e clique em CONVERT TO SYMBOL (CONVERTER EM SIMBOLO).
Na janela de diálogo que aparecerá escreva e marque as características abaixo:

Automaticamente aparecerá uma SLICE sobre o botão criado:

Agora vamos editar nosso botão:
Dê um duplo clique no botão, evitando clicar na are central do SLICE. Note que seremos direcionados para uma nova janela conforme abaixo:

Vamos identificar e anotar algumas características desta janela:
1º - A ABA tem o mesmo nome dado ao botão, isso indica que estamos trabalhando dentro dele;
2º - Apareceram novas guias (UP – OVER – DOWN – OVER WHILE DOWN – ACTIVE AREA);
3º - O nosso plano de fundo ficou oculto.

Agora vamos editar estas GUIAS. Primeiro a guia UP:

UP – representa a forma como o botão aparecerá no site ao carregar. (não precisamos editar esta fase, pois já definimos isso ao criarmos os objetos no CANVAS).

Clique na guia OVER:

OVER – representa como o botão ficará quando o internauta colocar o MOUSE sobre este. (geralmente utilizamos algo discreto como alterar uma cor ou adicionar negrito ao texto)
Quando clicamos em OVER, temos a seguinte janela:

Nela clicaremos no botão que fica na parte inferior da janela para podermos copiar os objetos que temos no estágio anterior (COPY UP GRAPHIC – COPIAR OS GRAFICOS DO ESTAGIO UP).

Agora que já temos os gráficos vamos alterar o texto, modificando sua cor para #6600CC. Basta.

Clique na guia DOWN:

DOWN – representa o momento em que o usuário clicar no botão. Como o clique é muito rápido não aconselho alterações nas características.
Clique apenas no botão COPY OVER GRAPHIC para termos os mesmos objetos do estágio anterior (OVER).

Clique na guia OVER WHILE DOWN:

OVER WHILE DOWN – representa a fase em que o internauta coloca o mouse em um botão que esta sendo utilizado no momento. Também não aconselho mudanças, pois tornariam “poluídos” nossos objetos.

Clique na guia ACTIVE AREA:

ACTIVE AREA – é a área útil do botão, ou seja, onde o internauta pode clicar para que o botão funcione. Devemos ser muito exatos nesta guia, para que a área de clique de um botão não sobressaia a outro.
Note na imagem abaixo, que a área de clique sugerida pelo FIREWORKS é bem maior que nosso botão, isso ocorre porque utilizamos estilos e estes geralmente tem sobras que influenciam na área automática.
Neste caso, mudaremos a área pré-definida pelo FIREWORKS, mas devemos avisá-lo, retirando o visto da opção SET ACTIVE AREA AUTOMATICALLY (DEFINIR A AREA ATICA AUTOMATICAMENTE), como segue na imagem abaixo:

Após desmarcar a opção de área automática, utilize as linhas em vermelho ao redor do botão para redimensionar a área de clique como no exemplo abaixo:

Para finalizarmos a edição deste botão, clique no botão DONE (CONCLUÍDO) que fina abaixo do CANVAS:

Note que a área do SLICE já estará modificada após a conclusão do botão:

Finalmente teste seu botão, pressionando F12 para visualizar em seu navegador e passe o mouse sobre o botão, clique, pressione F5 para atualizar e teste novamente.
Se você gostou prosseguiremos, se você não gostou, volte ao FIREWORKS e dê um clique duplo novamente sobre o botão e edite as fases mais uma vez, até agradar.

Crie os demais botões.

Nesta lição, desejo que você crie todos os botões de seu Menu, um a um, para fixarmos este importantíssimo exercício.

Invente outras formas, cores, textos e experimente também alterar todos os estágios dos botões.
__________________________________________________________________________________
DICAS>>>>>>>>
Você pode transformar objetos em botões pressionando apenas a tecla F8.
Se você entendeu bem e domina criar botões, na próxima aula explicarei com este mesmo exemplo, como duplicar e criar os demais com AGILIDADE.
_________________________________________________________________________________
FUIOS!