Windows Vista - Curso Completo - 1476 páginas

Você está aqui: Principal » Lista Completa de Tutoriais

Sobre este Tutorial

Autor:	Carlos Vitor de Castro Silva
Data:	25-04-2006
Categoria:	Web Design
Assunto:	FLASH - BÁSICO
Visitas:	17727

Componentes

Os componentes são clipes de filme complexos que contém Action Script e elementos gráficos, e podem ser personalizados com parâmetros definidos quando o filme Flash é criado. Cada componente possui um conjunto de métodos Action Script que nos permitem a você definir parâmetros e opções adicionais no tempo de execução.

Vamos ver os componentes mais comuns.

Scroll Pane

O Componente Scroll Pane exibe clipes de filme e jpg’s numa área de rolagem.

Exemplo prático

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

2. Clique no menu Window/Development panels/Components.

3. O componente que precisamos está na opção UI Components, como mostrado na figura abaixo.

4. Selecione o Scroll pane e arraste-o para o palco.

5. Use o inspetor de propriedades para alterar a largura e a altura para os mesmos valores do filme (200x200) e os valores de X e Y para zero.

6. Clique no menu Insert/New symbol, escolha Movie Clip, e ligue a opção Export for Action Script. Em Identifier escreva “rolagem”, este é o identificador deste símbolo para ser reconhecido posteriormente pela Scroll pane.

7. Desenhe uma caixa de texto e escreva um texto com mais de 30 linhas, pode copiar e colar de alguma coisa na web ou até escrever seu nome e copiar e colar.

8. Clique no menu File/import/Import to stage, e importe uma imagem.

9. Posicione esta imagem abaixo do texto e redimensione-a para que não ultrapasse a largura do texto. Quando terminar de posicionar converta a imagem em símbolo gráfico.

10. A posição do texto dentro do clipe de filme é importante, depois de inserir a imagem, pressione CTRL A para selecionar todo o conteúdo, diminua o zoom para 50% e posicione como mostrado da próxima figura.

11. Retorne à cena principal e selecione o componente Scroll pane em seu palco. No inspetor de propriedades escreva “rolagem” em Content path.

Experimente seu filme com CTRL ENTER

Exercício

Vamos combinar neste exercício loadMovie e componente scroll pane.

1. Vamos criar um site sobre Vinicius de Moraes que terá a página principal e mais quatro páginas internas, cada uma destas páginas internas terá uma foto e um soneto do poeta dentro de um componente Scroll Pane.

2. Para o site vamos precisar e três sonetos e 4 fotos, use os sonetos e as fotos abaixo.

1. Crie um novo arquivo com 450 pixels de largura e 300 pixels de altura.

2. Desenhe um quadrado de 290 por 230 e posicione-o em X=160 e Y=70, converta-o em clipe de filme e dê o nome de “alvo” à instância.

3. Crie quatro botões e digite o título como mostrado na figura abaixo:

4. O nome dos sonetos nos botões pode variar de acordo com os sonetos que você encontrar na web.

5. Salve o arquivo como index.fla.

6. Crie um novo arquivo com 290 pixels de largura e 230 pixels de altura, este é o único arquivo que não usará o componente Scroll Pane.

7. Neste arquivo insira uma das fotos do Poeta, dimensione a foto para o mesmo tamanho do arquivo.

8. Converta a foto para símbolo gráfico e modifique seu Alpha para 0.

9. Clique no quadro 20 da linha de tempo e pressione F6 para criar um quadro-chave.

10. Com a agulha da linha de tempo apontada para 0 quadro 20, dê um clique na imagem e modifique seu Alpha para 100.

11. Aplique uma interpolação de movimento da linha de tempo.

12. Insira uma ação stop(); no último quadro da animação.

13. Salve o arquivo como principal.fla e exporte o arquivo como principal.swf e feche o arquivo.

14. Crie outro arquivo com 290 pixels de largura e 230 pixels de altura.

15. Insira um componente Scroll pane no palco e dimensione-o para o mesmo tamanho do arquivo.

16. Clique em Insert/New Symbol, marque a opção Movie Clip e marque também a opção Export for ActionScript e dê o nome de rolagem ao Identifier e OK.

17. Dentro da edição do clipe de filme, insira uma foto do poeta e dimensione para 210 por 210, posicione o canto superior esquerdo da foto em cima da pequena cruz no centro do palco, converta esta imagem para símbolo gráfico.

18. Selecione a ferramenta texto, verifique nas propriedades se o tipo de texto é o Static Text e desenhe uma caixa de texto, abaixo da imagem e um pouco mais estreita que esta imagem.

19. Copie um dos sonetos e cole dentro desta caixa de texto, a fonte deve ser pequena e legível.

20. Retorne a cena 1

21. Selecione o Scroll Pane e, nas propriedades modifique a opção Content Path para rolagem.