FlashCriando meu 1º site

Isaac Batista

Passo 1 - Criando o Layout e as camadas principais

– Abra um novo arquivo no Flash com o tamanho do palco de 550x400;

– Renomeie a camada layer 1 para layout;– Na camada Layout, crie um retângulo (sem borda e com

preenchimento) de 118x400, nas posições x=0 e y=0;– Na mesma camada, faça outro retângulo de 432.9x51

pixels, nas posições x=118 e y=0;– Crie agora uma nova camada e renomeie-a para título,

clique no frame 1e escreva um título para o site;– Crie, na sequência, as seguintes camadas posteriores:

• Menu • Conteúdo • Ações

– Veja o resultado até aqui no próximo slide

Passo 1 - Criando o Layout e as camadas principais: Resultado

Passo 1 - Explicação

Até aqui você fez o layout da página, organizou as camadas e fez as configurações iniciais. Nos passos a seguir, veremos como adicionar conteúdo e a fazer as configurações finais.

Passo 2- Configurações das camadas e dos Movie Clips

– Bloqueie as camadas layout, título, menu e ações;– Clique no frame 1 da camada conteúdo e insira um retângulo com

as seguintes dimensões: 433x350 pixels, nas posicões: x=118.1 e y=50.3;

– Clique também no frame2, tecle F6, selecione o quadrado e troque sua cor;

– Faça isso também com os frames 3 e 4;– Volta agora até o frame 1 e o converta em Movie Clip;– Selecione-o e dê 2 cliques nele;– Dentro deste Movie Clip, renomeie a camada Layer1 para fundo, a

bloqueie; crie mais uma com o nome de título-conteúdo e mais outra com o nome de conteúdo, pois será aí que iremos inserir os textos;

– Após ter criado o primeiro movie clip, volte para o palco inicial e repita o processo de criação dos movie clips nos frames 2,3 e 4, colocando neles os seguintes nomes: conteúdo 2, conteúdo 3 e conteúdo 4.

Passo 2 - Configurações nas camadas e dos Movie Clips: Resultado das etapas 1 a 4

1. Visualização das Camadas

– Visualização do Painel Library

Passo 3 - Configurações Finais e Ações das Camadas

– Prolongue as camadas fundo, menu, título e ações até o frame 4;

– Selecione o primeiro frame da camada ações, vá até o painel Actions>Global Functions>Time Line Control>stop.

– O filme do Flash ficará parado no Frame 1 de todas as camada

– Bloqueie agora as camadas ações, conteúdo, título e fundo, como mostrado abaixo.

– Passe para o próximo passo.

Passo 4 - Criação dos BotõesCriando o botão

– Clicar no primeiro frame da camada menu;– Criar um retângulo de 110x40 pixels, nas posições com a

ferramenta Retangle Tool;– Selecionar o quadrado>Botão direito do mouse>Convert To Symbol;– Colocar um nome e escolher o tipo button;– Clicar duas vezes no símbolo que acabamos de converter.– Agora, depois de estar-mos dentro do botão, aparecerá uma

camada nova e os estados do botão: Up, Over, Down e Hit.• Renomeie esta camada para efeitos;• Vá até o segundo frame e troque a cor do retângulo;• Vá também ao terceiro frame e toque a cor do retângulo;

– Agora crie uma camada e a renomeie para texto, e– Clique no primeiro frame e escreva um texto sobre o

retângulo.–– Teste o filme.

Passo 4 - Criação dos BotõesDuplicando o botão

– Abrir o painel Library (Menu Window > Library)– Selecionar o botão criado;– Clicar com o botão direito e:

• escolher a opção duplicate,• colocar o nome do segundo botão,• deixar marcado a opção button, e• Clicar em OK.

– Pronto. Arraste o novo botão para o palco, clique duas vezes nele e troque o texto do botão.

– Teste o filme.

Passo 5 - Ações nos Botões Adicionando Ações

– Selecione o primeiro botão da camada menu;– Vá até o painel Actions e digite as seguintes linhas de códigos:

– Ou Vá até o Painel Actions>Botão Script Assist>TimeLine Control>Goto

Passo 5 - Ações nos BotõesAdicionando Ações

4 . Selecione a opção Go To And Stop e a Opção Frame 1. Pois quando se clicar no botão vai disparar a ação de ir (Go To) e parar (Stop) no frame 1, exibindo seu conteúdo, onde estão os Movie Clips com as cores diferentes.

5. Pronto. Agora basta clicar nos outros botões e colocar a ação acima, para exibir os conteúdos dos frames 2, 3 e 4.