Usando cenas

 

Objetivos: Ensinar a criar e manipular cenas.

 

Autor: Carlos Vitor de Castro

 

Um documento Flash pode ter uma ou mais cenas, usamos cenas para simplificar o trabalho de criação de animações ou sites muito grandes, imagine a se fizéssemos um site com preloader, introdução e conteúdo, tudo isto numa única linha de tempo, ia ficar confuso demais e obviamente poderia criar falhas em seu projeto. Para resolver este problema especificamente poderíamos ter uma cena para o preloader, outra para a introdução e uma última para o conteúdo do site, cada cena com sua linha de tempo sem que uma interferisse com a outra.

 

O painel Scene

 

 

Obs.: Para renomear a cena clique duas vezes sobre seu nome.

 

Exemplo prático

 

1. Crie um novo arquivo com 400 pixels de largura por 200 pixels de altura.

 

2. Exiba o painel Scene clicando no menu Window/Design panels/Scene.

 

3. Mude o nome da única cena para “primeira”.

 

4. Crie uma animação de uma bola andando de um lado para outro no palco, nada muito complicado.

 

5. Clique no botão que cria uma nova cena.

 

6. Modifique o nome da nova cena para “segunda”.

 

7. Faça nesta cena um retângulo se mover pelo palco, como da outra vez nada complicado.

 

8. Crie uma nova cena e modifique seu nome para “terceira”.

 

9. Faça uma interpolação de forma nesta cena.

 

10. Teste seu filme.

 

Podemos notar que quando a terceira cena acaba, por padrão, a primeira cena roda outra vez, para evitar que isto aconteça devemos usar Action Script para fazer a ultima cena parar ao final de sua animação.

 

Como fazer

 

1. Mostre a última cena.

 

2. Dê um clique no último quadro da linha de tempo e pressione F9 para mostrar o painel Actions.

 

 

3. A ação stop(); quando colocada num quadro da linha de tempo interrompe a execução do programa.

 

Usando cenas para criar um site

 

Criaremos um currículo online em que teremos uma página principal e 4 páginas internas, com os dados pessoais, escolaridade, cursos e experiência profissional, cada página interna será uma cena e a navegação será feita por botões em todas as cenas, vamos usar nestes botões a action gotoAndPlay(nomedacena).

 

Como fazer

 

1. Crie um novo arquivo com 760 pixels de largura e 430 pixels de altura.

 

2. Troque o nome da cena para “principal”

 

3. Desenhe uma interface como abaixo.

 

 

13. Insira a action stop(); no primeiro quadro da linha de tempo.

 

14. Clique em cada um dos botões, pressione F9 e digite a action abaixo:

 

on (release)

      {

      gotoAndStop(“dados”,”dados1”)

      }

 

15. Esta ação tem de ser colocada em cada um dos botões, alterando-se somente o nome da cena. Como é uma ação para um botão devemos associá-la a um evento, neste caso, o evento release, que assim como o press equivale a “ao clicar”, a ação propriamente dita é o gotoAndStop (vá para e pare), estamos pedindo que o Flash abra a cena e rode a partir do quadro nº 1.

 

16. Abra a paleta de cenas e clique no botão Duplicate scene.

 

 

6. Clicando neste botão duplicamos integralmente a cena número 1, fizemos isto para não ter de redesenhar toda a interface e aproveitar as actions que já foram associadas aos botões.

 

7. Troque o nome da cena para “dados”

 

8. Apague do centro desta cena duplicada a mensagem de boas vindas e a elipse inclinada.

 

9. Modifique a interface para que fique como abaixo:

 

 

10. Duplique esta cena, modifique seu nome para “cursos” e modifique sua aparência para que fique como abaixo.

 

 

11. Duplique esta cena, modifique o nome da cena para “escolaridade” e modifique sua aparência para que fique como a da próxima figura.

 

 

12. Duplique esta cena, modifique seu nome para “experiência” e modifique sua aparência para que fique como abaixo:

 

 

13. Retorne a cena principal e selecione o primeiro quadro da linha de tempo, dê o nome de “principal1”, ao Frame label, que está posicionado a esquerda da barra de propriedades.

 

14. Faça a mesma com todas as  outras cenas, em cada primeiro quadro dê um nome para o frame label, este nome deve ter o nome da cena seguido do número 1, sem espaços.

 

 

Salve seu arquivo como site.fla, exporte o filme como site.swf.

 

Inserindo o arquivo .SWF num arquivo .HTM pelo Dreamweaver

 

Depois de gerar seu arquivo SWF no Flash, abra o Dreamweaver para finalizarmos o trabalho, criando o arquivo HTM com o arquivo do Flash.

 

Peça um novo arquivo no Dreamweaver e grave-o com o nome de index.htm dentro da pasta onde você gravou o arquivo .SWF.

 

Para inserir o arquivo Flash, dentro do Dreamweaver é muito simples, clique em Insert/Media/Flash,

 

 

Escolha o arquivo SWF, que você criou no Flash.

 

Fazendo desta forma o seu trabalho vai ficar posicionado no alto a esquerda da página, para inserir o arquivo centralizado verticalmente e horizontalmente na página devemos criar uma tabela com uma linha e uma coluna, com 100% de largura e 100% de altura, com o vertical para MIDDLE e horizontal para CENTER.

 

Para fazer:

 

1. Peça um novo arquivo, e salve-o como index2.htm

 

2. Clique em Insert/Table e configure como na imagem abaixo.

 

 

3. Clique na linha de borda da tabela para seleciona-la.

 

 

4. No Inspetor de propriedades, modifique a altura da tabela para 100%

 

 

5. Clique no meio da tabela e modifique o alinhamento vertical para MIDDLE e o horizontal para CENTER.

 

 

6. Clique em Insert/Media/Flash.

 

7. Insira o arquivo .SWF, ele entrará centralizado na página.

 

Resultado