EXERCICIOS PARA FLASH, 30 EXEMPLOS

ÍNDICE

EXERCÍCIO 01 - MOVIMENTEÇÃO ENTRE OBJETOS

EXERCÍCIO 02 - MOVIMENTO COM TEXTO

EXERCÍCIO 03 - MOVIMENTO SENTIDO HORÁRIO

EXERCÍCIO 04 – EFEITO FADE

EXERCÍCIO 05 – ANIMAÇÃO COM DOIS OBJETOS

       ADD GUIDE LAYER – ADICIONAR GUIA A CAMADA(MOTION GUIDE)

EXERCÍCIO 06 – ADICIONAR GUIA A CAMADA

EXERCÍCIO 07 – DANÇA DAS LETRAS

       FORMA DE DEFORMAÇÃO

EXERCÍCIO 08 - MOVIMENTO DE DEFORMAÇÃO

EXERCÍCIO 09 – DEFORMAÇÃO COM TEXTOS

EXERCÍCIO 10 – DEFORMAÇÃO COM IMAGENS

EXERCÍCIO 11 – DEFORMAÇÃO COM AUXILIO DE MARCADORES

       BOTÃO SIMPLES

EXERCÍCIO 12 – BOTÃO SIMPLES

       TRATAMENTO DE IMAGENS

       COMO TRANSFORMAR UMA IMAGEM BITMAP COMO VETORIAL

       COMO SIMULAR TRANPARENCIA

       COMO USAR UMA IMAGEM COM TEXTURA

       COMO USAR IMAGEM EM 3D

       MOVIE CLIP

EXERCÍCIO 13 – MOVIE CLIP

EXERCÍCIO 14 – MOVIE CLIP COM IMAGEM

       MASK – MÁSCARA

EXERCÍCIO 15 – BANNER ANIMADO I

EXERCÍCIO 16 – BANNER ANIMADO II

EXERCÍCIO 17 – BANNER ANIMADO III

EXERCÍCIO 18 – BANNER ANIMADO IV

       SOM

       PAINEL DE SOM

EXERCÍCIO 19 – SOM EM BOTÃO

EXERCÍCIO 20 – BOTÃO LIGA/DESLIGA SOM

EXERCÍCIO 21 – CENAS USANDO GOTO

EXERCÍCIO 22 – HTML COM FRAMES USANDO GETURL

       PUBLICAÇÃO

       PUBLICAR PAGINA HTML

       PROPRIEDADES DO ARQUIVO.SWF

EXERCÍCIO 23 - IMAGENS CARREGANDO

EXERCÍCIO 24 – IMAGENS CARREGANDO EM PORCENTAGE

EXERCÍCIO 25 – ARQUIVO EM FLASH PARA IMPRESSÃO

EXERCÍCIO 26 - ARQUIVO EM FLASH COMO SCREENSAVER

EXERCÍCIO 27 - COMO CRIAR GIF ANIMADO

EXERCÍCIO 28 - ACTIONCSRIPT IF FRAME IS LOADED

EXERCÍCIO 29 – CONTADOR

EXERCÍCIO 30 – CONTADOR/ MOVIE CLIP

EXERCÍCIO 31 – AREA RESTRITA

EXERCÍCIO 32 – SCROOL AREA

EXERCÍCIO 33 – SCROOL AREA/TEXTO EXTERNO

EXERCÍCIO 34 – TEXTO E ANIMAÇÕES

EXERCÍCIO 35 – LOAD VARIABLE

EXERCÍCIO 01 - MOVIMENTO ENTRE OBJETOS

01. Desenhe uma bola

02. Selecione a bola > Insert – Inserir > Convert to Symbol – Converter para Símbolo ou F8

03. Será exibido uma Caixa de Diálogo:

04. Selecione a linha de tempo 50 deste layer – camada

05. Insert – Inserir > Keyframe – Chave de Quadro ou F6

06. Mantendo selecionado a linha de tempo 50, mude a pocição da bola

07. Clique com botão direito do mause entre a linha de tempo 1 e 50 > Create Motion Tweening – Criar Movimento entre Objetos

08. Observe que será exibido uma seta entre os dois quadros com fundo roxo

09. Salve a animação como exer01.fla

10. Para testar a animação > File – Arquivo > Export Movie – Exportar Animação ou Ctrl+Enter, isto é, automaticamente o arquivo exer01.fla será criado um arquivo compactado em shockwave exer01.swf

11. Clique em File - Arquivo > Close - Fechar ou Ctrl+F4 para voltar à Cena

12. Clique com botão direito do mouse em qualquer parte da área de trabalho (cena) > Movie Properties - Propriedades da Animação

13. Background Color - Cor de Fundo > escolha uma cor

14. Clique OK

15. Salve a animação > Ctrl+Enter e teste sua animação

16. Vamos verificar as Propriedades do Quadro!

17. Window - Janela > Panels - Painéis > Frame - Quadro

    - Label - Rótulo

    - Tweening - Entre Objetos > Motion - Animação

    - Easing - Aceleração > está em zero, default do Flash

    - Rotate - Rotação: Automatic - Automática

      A Rotação pode ser também Clockwise - Sentido Horário e Counterclockwise - Sentido Anti-Horário

    - Options - Opções

EXERCÍCIO 02 - MOVIMENTO COM TEXTO

01. Digite uma palavra

02. Selecione a palavra > Insert - Inserir > Convert to Symbol - Converter para Símbolo ou F8

03. Será exibido uma Caixa de Diálogo:

    Name - Nome: digite texto1

    Behavior - Comportamento > (x) Graphic - Gráfico

04. Selecione a linha de tempo 50 deste layer - camada

05. Insert - Inserir > Keyframe - Chave de Quadro ou F6

06. Mantendo selecionado a linha de tempo 50, mude a posição do texto

07. Clique com botão direito do mouse entre a linha de tempo 1 e 50 > Create Motion Tweening - Criar Movimento entre Objetos

08. Observe que será exibido uma seta entre os dois quadros com fundo roxo

09. Salve a animação como exer02.fla

10. Clique na linha de tempo 1

11. Selecione o texto > Modify - Modificar > Transform - Transformar > Scale and Rotate - Escala e rotação > Escala: 500

12. Arraste o texto para fora da Cena, na parte superior à esquerda

13. Salve a animação > Ctrl+Enter e teste sua animação

EXERCÍCIO 03 - MOVIMENTO SENTIDO HORÁRIO

01. Desenhe uma bola e pinte de uma cor gradiente, em caso de dúvida de como criar uma cor gradiente, reveja módulo 02

02. Selecione a bola > Insert - Inserir >Convert to Symbol - Converter para Símbolo ou F8

03. Será exibido uma Caixa de Diálogo:

    Name - Nome: digite bola2

    Behavior - Comportamento > (x) Graphic - Gráfico

04. Selecione a linha de tempo 50 deste layer - camada

05. Insert - Inserir > Keyframe - Chave de Quadro ou F6

06. Mantendo selecionado a linha de tempo 50, mude a posição da bola

07. Clique com o botão direito do mouse entre a linha de tempo 1 e 50 > Create Motion Tweening - Criar Movimento entre Objetos

08. Observe que será exibido uma seta entre os dois quadros com fundo roxo

09. Salve a animação como exer03.fla

10. Clique na linha de tempo 1

11. Selecione na Barra de Base > Show Instance - Exibir Instância

12. Será exibido o Painel de Instância:

13. Selecione Frame - Quadro

14. No painel dos Frames - Quadro:

    - Tweening - Entre Objetos > Motion - Animação

    - Rotate - Rotação: Automatic - Automática mude para Clockwise - Sentido Horário ou se preferir Counterclockwise - Sentido Anti-Horário

    - Times - Quantas vezes irá rodar > digite 4

15. Feche o painel do Frame - Quadro

16. Clique em Frame Rate - Medida do Quadro

    mude a cor de fundo

17. Salve a animação > Ctrl+Enter e teste sua animação

EXERCÍCIO 04 - EFEITO FADE

01. Clique em Frame Rate - Medida do Quadro

    mude a cor de fundo da animação para preto

02. Digite uma palavra em branco

03. Selecione a palavra > Insert - Inserir > Convert to Symbol - Converter para Símbolo ou F8

04. Será exibido uma Caixa de Diálogo:

    Name -  Nome: digite texto2

    Behavior - Comportamento > (x) Graphic - Gráfico

05. Selecione o texto > Window - Janela > Panels - Painéis > Align - Alinhar ou Ctrl+K ou   e centralize o texto no meio da área de trabalho (Cena)

06. Selecione a linha de tempo 50 deste layer - camada

07. Mantendo selecionado a linha de tempo 50 > com o botão direito do mouse sobre o texto > Panels - Painéis > Effect - Efeito

08. Selecione Alpha > digite 0 (zero)

09. Salve a animação > Ctrl+Enter e teste sua animação

EXERCÍCIO 05 - ANIMAÇÃO COM DOIS OBJETOS

01. Clique em Frame Rate - Medida do Quadro

02. Desenhe uma bola com cores gradientes

03. Selecione a bola > Insert - Inserir > Convert to Symbol - Converter para Símbolo ou F8

04. Será exibido uma Caixa de Diálogo:

    Name - Nome: digite bola3

    Behavior - Comportamento > (x) Graphic - Gráfico

05. Selecione a linha de tempo 50 deste layer - camada

06. Insert - Inserir > Keyframe - Chave de Quadro ou F6

07. Mantendo selecionado a linha de tempo 50, mude a posição da bola

08. Clique com botão direito do mouse entre a linha de tempo 1 e 50 > Create Motion Tweening - Criar Movimento entre Objetos

09. Observe que será exibido uma seta entre os dois quadros com fundo roxo

10. Clique na linha de tempo 1

11. Selecione na Barra de Base > Show Instance - Exibir Instância

12. Será exibido o Painel da Instância:

13. Selecione Frame - Quadro

14. Salve a animação como exer05.fla

15. No painel dos Frame - Quadro:

    - Tweening - Entre Objetos > Motion - Animação

    - Rotate - Rotação: Automatic - Automática mude para Clockwise - Sentido Horário ou se preferir Counterclockwise - Sentido Anti-Horário

    - Times - Quantas vezes irá rodar > digite 10

16. Selecione a linha de tempo 51 > Insert - Inserir > Blank KeyFrame - Chave de Quadro em Branco ou F7

17. Desenho um quadrado

18. Selecione o quadrado > Insert - Inserir > Convert to Symbol - Converter para Símbolo ou F8

19. Será exibido uma Caixa de Diálogo:

    Name - Nome: digite quadrado

    Behavior - Comportamento > (x) Graphic - Gráfico

20. Selecione a linha de tempo 1000 deste layer - camada

21. Insert - Inserir > Keyframe - Chave de Quadro ou F6

22. Mantendo selecionado a linha de tempo 100, mude a posição do quadrado

23. Clique com botão direito do mouse entre a linha de tempo 51 e 100 > Create Motion Tweening - Criar Movimento entre Objetos

24. Observe que será exibido uma seta entre os dois quadros com fundo roxo

25. Clique na linha de tempo 51

26. Selecione na Barra de Base > Show Instance - Exibir Instância

27. Será exibido o Painel da Instância:

28. Selecione Frame - Quadro

29. No painel dos Frame - Quadro:

    - Tweening - Entre Objetos > Motion - Animação

    - Rotate - Rotação: Automatic - Automática mude para Clockwise - Sentido Horário ou se preferir Counterclockwise - Sentido Anti-Horário

    - Times - Quantas vezes irá rodar > digite 10

30. Salve a animação > Ctrl+Enter e teste sua animação

Dicas:

 - Quando a animação tem na linha de tempo um tempo transcorrido maior, a animação ficará mais lenta

 - Quando a animação tem na linha de tempo um tempo transcorrido menor, a animação ficará mais rápida

 - Para aumentar a linha de tempo de uma animação > clique no meio de dois frames - quadros e aperte F5

 - Para diminuir a linha de tempo de uma animação > clique no meio de dois frames - quadros e aperte Shift+F5

ADD GUIDE LAYER - ADICIONAR GUIA À CAMADA

Add Guide Layer - Adicionar Guia à Camada é um efeito que cria os caminhos por onde passará sua animação, mas para que ocorra esse efeito, é necessário criar primeiramente o Motion Tweening - Movimento entre Objetos

EXERCÍCIO 06 - ADICIONAR GUIA À CAMADA

01. Desenhe uma bola

02. Selecione a bola > Insert - Inserir > Convert to Symbol - Converter para Símbolo ou F8

03. Será exibido uma caixa de Diálogo:

    Name - Nome: digite bola4

    Behavior - Comportamento > (x) Graphic - Gráfico

04. Selecione a linha de tempo 50 deste layer - camada

05. Insert - Inserir > Keyframe - Chave de Quadro ou F6

06. Mantendo selecionado a linha de tempo 50, mude a posição da bola

07. Clique com o botão direito do mouse entre a linha de tempo 1 e 50 > Create Motion Tweening - Criar Movimento entre Objetos

08. Observe que será exibido uma seta entre os dois quadros com fundo roxo

09. Salve a animação como exer06.fla

10. Salve a animação > Ctrl+Enter e teste sua animação

11. Uma vez que esteja rodando a animação, devemos adicionar guia à camada!

12. Clique Ctrl+F4 e volte à Cena

    Clique no ícone Add Guide Layer - Adicionar Guia à Camada   (folha roxa)

13. Clique no ícone Edit Multiple Frame - Editar Múltiplos Quadrados

14. Será exibido duas guias na linha de tempo

15. Arraste as guias para extremidade da animação, ou seja, uma para linha de tempo 1 e a outra para a linha de tempo 50

16. Será exibido a bola na posição dos dois quadros!

17. Clique no ícone Pencil Tool - Ferramenta Lápis

18. Clique na ferramenta opcional do Lápis > ícone Pencil Mode - Modo do Lápis > selecione a opção Smooth - Suavizar

19. Desenhe um traçado por onde deseja que passe a bola

    - Atenção! O traçado deve iniciar no meio do símbolo, no caso a bola, no sinal + da linha de tempo 1 e terminar no meio da outra bola na linha de tempo 50

Dicas:

 - O traçado deve ser feito sempre com o Layer Guide - Guia à Camada acionado

 - Nunca faça o traçado no Layer - Camada somente, pois não irá funcionar!   

20. Desative o ícone Edit Multiple Frame - Editar Múltiplos Quadros

21. Salve a animação > Ctrl+Enter e teste sua animação

 - Center Frame - Centralizar Quadro

 - Onion Skin - Casca de Cebola - exibe a trajetória por onde o objeto irá passar

 - Onion Skin Outlines - Contornos da Casca de Cebola - exibe a trajetória somente dos contornos do objeto por onde irá passar

 - Edit Multiple Frame - Editar Múltiplos Quadros - para criar a trajetória entre os objetos

 - Modify Onion Markers - Modificar os Marcadores da Cebola    

EXERCÍCIO 07 - DANÇA DAS LETRAS

01. Digite a palavra PAZ em Arial Black, 60 e com espaço entre as letras

02. Selecione o texto > Modify - Modificar > Break Apart - Quebrar ou Ctrl+B, ou seja, a palavra PAZ não é mais uma texto, e sim um objeto

03. Clique em Paint Bucket Tool - Ferramenta Balde e pinte cada letra com uma cor diferente

04. Selecione a letra P > Insert - Inserir > Convert to Symbol - Converter para Símbolo ou F8

05. Será exibido uma Caixa de Diálogo:

    Name - Nome: digite P

    Behavior - Comportamento > (x) Graphic - Gráfico

06. Selecione a letra A > Insert - Inserir > Convert to Symbol - Converter para Símbolo ou F8

07. Será exibido uma Caixa de Diálogo:

    Name - Nome: digite A

    Behavior - Comportamento > (x) Graphic - Gráfico

08. Selecione a letra Z > Insert - Inserir > Convert to Symbol - Converter para Símbolo ou F8

09. Será exibido uma Caixa de Diálogo:

    Name - Nome: digite Z

    Behavior - Comportamento > (x) Graphic - Gráfico

10. Selecione a linha de tempo 1 > botão direito do mouse > Copy Frame - Copiar Quadro

11. Clique no ícone Add Layer - Adicionar Camada (folha branca)

12. Clique na linha de tempo 1 do Layer 2 - Camada 2 > botão direito do mouse > Paste Frame - Colar Quadro

13. Clique no ícone Add Layer - Adicionar Camada (folha branca)

14. Clique na linha de tempo 1 do Layer 3 - Camada 3 > botão direito do mouse > Paste Frame - Colar Quadro

15. Conclusão: são três letras e é por isto que criamos 3 layers - camadas

16. Selecione a linha de tempo 50 dos Layers - Camadas 1,2 e 3

17. Insert - Inserir > Keyframe - Chave de Quadro ou F6

18. Clique no Layer 3 - Camada 3 duas vezes e renomeie para P

19. Clique no Layer 2 - Camada 2 duas vezes e renomeie para A

20. Clique no Layer 1 - Camada 1 duas vezes e renomeie para Z

21. Com a ferramenta Olho > esconda os Layers - Camadas A e Z

22. Agora vamos trabalhar somente com a Camada P!

23. Selecione a linha de tempo 1 e delete as letras A e Z e mude a posição da letra P 

24. Selecione a linha de tempo 50 e delete as letras A e Z e deixe a letra P como está

25. Com a ferramenta Olho > esconda os Layers - Camadas P e Z

26. Agora vamos trabalhar somente com a Camada A!

27. Selecione a linha de tempo 1 e delete as letras P e Z e mude a posição da letra A 

28. Selecione a linha de tempo 50 e delete as letras P e Z e deixe a letra A como está

29. Com a ferramenta Olho > esconda os Layers - Camadas P e A

30. Agora vamos trabalhar somente com a Camada Z!

31. Selecione a linha de tempo 1 e delete as letras P e A e mude a posição da letra Z

32. Selecione a linha de tempo 50 e delete as letras P e A e deixe a letra Z como está

33. Salve a animação como exer07.fla

34. Clique com botão direito do mouse na Camada P entre a linha de tempo 1 e 50 > Create Motion Tweening - Criar Movimento entre Objetos

35. Clique com botão direito do mouse na Camada A entre a linha de tempo 1 e 50 > Create Motion Tweening - Criar Movimento entre Objetos

36. Clique com botão direito do mouse na Camada Z entre a linha de tempo 1 e 50 > Create Motion Tweening - Criar Movimento entre Objetos

37. Salve a animação > Ctrl+Enter e teste sua animação

38. Clique Alt+F4 e volta à Cena

39. Agora vamos fazer a Dança das Letras!

40. Clique na ferramenta Olho e esconda as camadas A e Z

41. Selecione a camada P

42. Clique no ícone Add Guide Layer - Adicionar Guia à Camada (folha roxa)

43. Clique no ícone Edit Multiple Frame - Editar Múltiplos Quadros

44. Será exibido duas guias na linha de tempo

45. Arraste as guias para extremidade da animação, ou seja, uma para linha de tempo 1 e a outra para linha de tempo 50

46. Será exibido a letra P na posição dos dois quadros

47. Clique no ícone Pencil Tool - Ferramenta Lápis

48. Clique na ferramenta opcional do Lápis > ícone Pencil Mode - Modo do Lápis > selecione a opção Smooth - Suavizar

49. Clique Ctrl+Enter e teste sua animação!

50. Clique Alt+F4 e volte à Cena

51. Clique na ferramenta Olho e esconda as camadas P e Z

52. Clique na ferramenta Olho e esconda a trajetória da letra P

53. Selecione a camada A

54. Faça o mesmo procedimento mencionados nos itens 42 à 48 com a camada A

55. Clique Ctrl+Enter e teste sua animação!

56. Clique Alt+F4 e volte à Cena

57. Clique na ferramenta Olho e esconda as camadas P e A

58. Clique na ferramenta Olho e esconda a trajetória da letra A

59. Selecione a camada Z

60. Faça o mesmo procedimento mencionados nos itens 42 à 48 com a camada Z

61. Clique na linha de tempo 50 da camada P > botão direito do mouse > Actions - Ações > Basic Actions - Ações Básicas > Stop

62. Clique Ctrl+Enter e teste sua animação!

    - Quando se trabalha com vários layers - camadas e queira editar somente uma camada, no caso, a camada P, clique nas outras camadas na coluna do olho (veja imagem ao lado)

    - Se clicar no olho diretamente > esconderá todas as camadas

    - Sempre que terminar uma animação é recomendável, clicar diretamente no cadeado para trancar as camadas e evitar problemas futuros

FORMA DE DEFORMAÇÃO

Shape ou Forma de Deformação, conhecido também como morphing, cria deformações entre objetos, mas atenção: os objetos não podem ser símbolos!

- Para controlar melhor a deformação é usado Add Shape Hints - Adicionar Marcadores na Forma

EXERCÍCIO 08 - MOVIMENTO DE DEFORMAÇÃO

01. Desenhe um quadrado sem borda (Imagem 01)

02. Selecione a linha de tempo 10 deste layer - cama da

03. Insert - Inserir > Keyframe - Chave de Quadro ou F6

04. Com a ferramenta de Seta modifique o formato do quadrado, mas sempre na área do formato original (Imagem 02)

05. Selecione a linha de tempo 20 deste layer - camada

06. Insert - Inserir > Keyframe - Chave de Quadro ou F6

07. Com a ferramenta de Seta modifique o formato do quadrado, mas sempre na área do formato original (Imagem 03)  

08. Selecione a linha de tempo 30 deste layer - camada

09. Insert - Inserir > Keyframe - Chave de Quadro ou F6

10. Com a ferramenta de Seta modifique o formato do quadrado, mas sempre na área do formato original (Imagem 04)

11. Selecione a linha de tempo 40 deste layer - camada

12. Insert - Inserir > Keyframe - Chave de Quadro ou F6

13. Com a ferramenta de Seta modifique o formato do quadrado, mas sempre na área do formato original (Imagem 05)

14. Window - Janela > Panels - Painéis > Frame - Quadro ou Ctrl+F

15. Clique entre a linha de tempo 1 e 10

16. No painel Frame - Quadro

    - Tweening - Movimento > Shape - Forma

    - Easing - Aceleração > deixe como está!

    - Blend Type - Tipos de Mistura: (x) Angular

      - Distributive - Distributivo - os objetos dos quadros do meio da animação ficam irregulares e suaves

      - Angular - os objetos dos quadros do meio da animação mantém as linhas e os cantos

17. Clique entre a linha de tempo 11 e 20

18. No painel Frame - Quadro

    - Tweening - Movimento > Shape - Forma

    - Easing - Aceleração > deixe como está!

    - Blend Type - Tipos de Mistura: (x) Angular

19. Clique entre a linha de tempo 21 e 30

20. No painel Frame - Quadro

    - Tweening - Movimento > Shape - Forma

    - Easing - Aceleração > deixe como está!

    - Blend Type - Tipos de Mistura: (x) Angular

21. Clique entre a linha de tempo 31 e 40

22. No painel Frame - Quadro

    - Tweening - Movimento > Shape - Forma

    - Easing - Aceleração > deixe como está!

    - Blend Type - Tipos de Mistura: (x) Angular

23. Observe que será exibido uma seta entre os quadros com fundo verde

24. Salve a animação como exer08.fla

25. Salve a animação > Ctrl+Enter e teste sua animação

 

 

EXERCÍCIO 09 - DEFORMAÇÃO COM TEXTOS

01. Digite a palavra FLASH em arial black, tamanho 48 e em azul

02. Selecione o texto e Modify - Modificar > Break Apart - Quebrar ou Ctrl+B, logo o texto será agora uma imagem!

    Selecione a linha de tempo 50 deste layer - camada

03. Insert - Inserir > Keyframe - Chave de Quadro ou F6

04. Digite a palavra ANIMAÇÂO em arial black, tamanho 48, vermelho e em outra posição

05. Selecione ANIMAÇÂO e Modify - Modificar > Break Apart - Quebrar ou Ctrl+B, logo o texto será agora uma imagem!

06. Mantendo selecionado a linha de tempo 50

07. Selecione a palavra FLASH e delete

08. Window - Janela > Panels - Painéis > Frame - Quadro ou Ctrl+F

09. Clique entre a linha de tempo 1 e 50

10. No painel Frame - Quadro

    - Tweening - Movimento > Shape - Forma

    - Easing - Aceleração > deixe como está!

    - Blend Type - Tipos de Mistura: (x) Distributive - Distributivo

11. Observe que será exibido uma seta entre os quadros com fundo verde

12. Salve a animação como exer09.fla

13. Salve a animação > Ctrl+Enter e teste sua animação

EXERCÍCIO 10 - DEFORMAÇÃO COM IMAGEM

01. File - Arquivo > Import - Importar > importe uma imagem > (Imagem 01)

02. Selecione a imagem > Modify - Modificar > Break Apart - Quebrar ou Ctrl+B

03. Selecione a linha de tempo 15 deste layer - camada

04. Insert - Inserir > Keyframe - Chave de Quadro ou F6

05. Com a ferramenta Seta modifique o formato da imagem, mas sempre na área do formato da imagem original (Imagem 02)

06. Selecione a linha de tempo 30 deste layer - camada

07. Insert - Inserir > Keyframe - Chave de Quadro ou F6

08. Com a ferramenta Seta modifique o formato da imagem, mas sempre na área do formato da imagem original (Imagem 03)

09. Selecione a linha de tempo 45 deste layer - camada

10. Insert - Inserir > Keyframe - Chave de Quadro ou F6

11. Com a ferramenta Seta modifique o formato da imagem, mas sempre na área do formato da imagem original (Imagem 04)

12. Window - Janela > Panels - Painéis > Frame - Quadro ou Ctrl+F

13. Clique entre a linha de tempo 1 e 15

14. No painel Frame - Quadro

    - Tweening - Movimento > Shape - Forma

    - Easing - Aceleração > deixe como está!

    - Blend Type - Tipos de Mistura: (x) Distributive - Distributivo

15. Clique entre a linha de tempo 16 e 30

16. No painel Frame - Quadro

    - Tweening - Movimento > Shape - Forma

    - Easing - Aceleração > deixe como está!

    - Blend Type - Tipos de Mistura: (x) Distributive - Distributivo

17. Clique entre a linha de tempo 31 e 45

18. No painel Frame - Quadro

    - Tweening - Movimento > Shape - Forma

    - Easing - Aceleração > deixe como está!

    - Blend Type - Tipos de Mistura: (x) Distributive - Distributivo

19. Observe que será exibido uma seta entre os quadros com fundo verde

20. Salve a animação como exer10.fla

21. Salve a animação > Ctrl+Enter e teste sua animação

EXERCÍCIO 11 - DEFORMAÇÃO COM AUXÍLIO DE MARCADORES

01. Desenhe um quadrado sem borda

02. Selecione a linha de tempo 15 deste layer - camada

03. Insert - Inserir > Keyframe - Chave de Quadro ou F6

04. Selecione a linha de tempo 30 deste layer - camada

05. Insert - Inserir > Keyframe - Chave de Quadro ou F6

06. Selecione a linha de tempo 45 deste layer - camada

07. Insert - Inserir > Keyframe - Chave de Quadro ou F6

08. Selecione a linha de tempo 15

09. Selecione a ferramenta Imã

10. Selecione a ferramenta Line Tool - Ferramenta Linha

11. Desenhe um triângulo dentro do quadrado

12. Pinte o triângulo de outra cor

13. Selecione a parte fora do triângulo e delete

14. Delete também as bordas do triângulo

15. Selecione a linha de tempo 30

16. Mantenha selecionada a ferramenta Imã

17. Selecione a ferramenta Line Tool - Ferramenta Linha

18. Desenhe um losângo dentro do quadrado

19. Pinte o losângo de outra cor

20. Selecione a parte de fora do losângo e delete

21. Delete também as bordas do losângo

22. Selecione a linha de tempo 45

23. Desative a ferramenta Imã

24. Selecione a ferramenta Oval Tool - Ferramenta Oval

25. Desenhe uma bola dentro do losângo

26. Pinte a bola de outra cor

27. Selecione a parte fora da bola e delete

28. Delete também as bordas da bola

29. Window - Janela > Panels - Painéis > Frame - Quadro ou Ctrl+F

30. Clique entre a linha de tempo 1 e 15

31. No painel Frame - Quadro

    - Tweening - Movimento > Shape - Forma

    - Easing - Aceleração > deixe como está!

    - Blend Type - Tipos de Mistura: (x) Distributive - Distributivo

32. Clique entre a linha de tempo 16 e 30

33. No painel Frame - Quadro

    - Tweening - Movimento > Shape - Forma

    - Easing - Aceleração > deixe como está!

    - Blend Type - Tipos de Mistura: (x) Distributive - Distributivo

34. Clique entre a linha de tempo 31 e 15

35. No painel Frame - Quadro

    - Tweening - Movimento > Shape - Forma

    - Easing - Aceleração > deixe como está!

    - Blend Type - Tipos de Mistura: (x) Distributive - Distributivo

36. Observe que será exibido uma seta entre os quadros com fundo verde

37. Salve a animação como exer11.fla

38. Salve a animação > Ctrl+Enter e teste sua animação

39. Clique Alt+F4 e volte à Cena

40. Agora vamos usar os marcadores para auxiliar a deformação!

41. Selecione a linha de tempo 1

42. Selecione o quadrado

43. Modify - Modificar > Transform - Transformar > Add Shape Hints - Adicionar Marcadores à Forma

44. Será exibido uma bola vermelha com o marcador A

Dicas:

 - Sempre iniciar com o marcador A na parte superior à esquerda do objeto

 - Os outros marcadores devem ser inseridos no sentido horário

 - O Flash permite que você possa inserir até 26 marcadores

45. Arraste o marcador A para uma extremidade do quadrado (na parte superior à esquerda)

46. Clique sobre o marcador A > botão direito do mouse > Add Hints - Adicionar Marcadores

47. Será exibido uma bola vermelha com o marcador B

48. Arraste o marcador B para uma extremidade do quadrado (na parte superior à direita)

49. Repita o mesmo processo e insira os marcadores C e D

50. Selecione a linha de tempo 15

51. Será exibido o marcador D no meio do polígono

52. Arraste para extremidade do triângulo os marcadores

53. Selecione a linha de tempo 30

54. Selecione o losângo

55. Repita o mesmo procedimento mencionado nos itens 43 à 49

56. Selecione a linha de tempo 45

57. Selecione a bola

58. Arraste para extremidade da bola os marcadores

59. Salve a animação

60. Salve a animação > Ctrl+Enter e teste sua animação

EXERCÍCIO 12 – BOTÃO SIMPLES

Geralmente o botão tem quatro estágios:

 - Up - como o botão aparece na sua forma inicial

 - Over - como o botão aparece quando o mouse passa por cima do botão

 - Down - como o botão aparece quando você clica no botão

 - Hit - define a área "clicável" do botão, ou seja, a área em que ele é acionado

Existe duas formas de botão:

 - Track as Button - Botão é um botão independe ou seja as ações nele inserida não depende de outros botões

 - Track as Menu Item - Botão Item de Menu é um botão dependente, ou seja, é um submenu de um botão principal

Em todos os botões são usados a ActionScript OnMouseEvents

EXERCÍCIO 12 - BOTÃO SIMPLES

01. Até agora você criava símbolos, selecionando o objeto e apertando F8

02. Vamos criar um símbolo agora de outra forma, que é a mais recomendável!

03. Window - Janela > Library - Biblioteca ou Ctrl+L

04. Options - Opções > New Symbol - Novo Símbolo

05. Será exibido uma Caixa de Diálogo:

    Name - Nome: digite botao (sem acento)

    Behavior - Comportamento > (x) Button - Botão

06. Observe que será aberta uma área para edição do botão com os quatro estágios: Up, Over, Down e Hit

07. Desenhe uma bola sem bordas com cores gradientes em Linear, sendo que uma das cores seja a preta: exemplo azul e preto! (Imagem 1)

08. Selecione a bola > Ctrl+K e centralize a bola no meio do sinal +

09. Selecione a bola novamente > Ctrl+D para duplicar

10. Arraste a cópia da bola para fora

11. Selecione a cópia da bola > Modify - Modificar > Transform - Transformar > Scale and Rotate - Escala e Rotação > Escala: 90 Rotação: 180 (Imagem 2)

12. Selecione a cópia da bola > Ctrl+K e centralize a cópia da bola no meio do sinal +, ou seja por cima da bola original (Imagem 3)

13. Digite sobre o botão: Clique (em cor branca)

14. Selecione o texto > Ctrl+K e centralize a bola no meio do sinal +

15. Selecione a linha de tempo o estágio Over > F6

16. Selecione a linha de tempo o estágio Down > F6

17. Selecione a linha de tempo o estágio Hit > F6

18. Selecione a linha de tempo o estágio Over > selecione somente o texto e mude a cor do texto

19. Selecione a linha de tempo o estágio Down > selecione somente o texto e mude a cor do texto

20. Selecione a linha de tempo o estágio Over > selecione todo botão

21. Modify - Modificar > Transform - Transformar > Scale and Rotate - Escala e Rotação > Escala: 120 Rotação: 0

22. Selecione a linha de tempo o estágio Down > selecione todo botão

23. Modify - Modificar > Transform - Transformar > Scale and Rotate - Escala e Rotação > Escala: 80 Rotação: 0

24. Clique no ícone Scene - Cena e volte à Cena

25. Selecione o botão na Biblioteca e arraste para área da trabalho (Cena)

26. Salve a animação como exer12.htm > Ctrl+Enter e teste sua animação

(No módulo sobre Botões Avançados, vamos aprender como inserir ações nos botões e como criar botões e submenus)

TRATAMENTO DE IMAGENS

Para inserir uma imagem em sua animação:

01. File - Arquivo > Import - Importar

02. Selecione a imagem e importe para seu arquivo

03. Window - Janela > Library - Biblioteca e observe que a imagem está armazenada na biblioteca

 - As extensões de imagem aceitas no Flash são: .bmp, .gif, .jpg e .png

 - A extensão mais recomendável é a .png com imagem de resolução 72 à 150 dpi

 - Quando se importa uma gif animada para o Flash, ele aceita toda a sequência da animação e exibe todos os quadros - frames

 - Imagem transparente em .gif importadas para o Flash também são aceitas

 - Todas as vezes que vamos testar uma animação no Flash com uma imagem, ou seja, o arquivo.swf; independentemente da extensão original, a extensão da imagem se tornará .jpg

COMO TRANSFORMAR UMA IMAGEM BITMAP EM VETORIAL

01. Todas as extensões mencionadas acima são de uma imagem Bitmap

02. Bitmap é uma imagem formada em pixels

03. Vetorial é uma imagem formada por cálculos matemáticos no computador

04. Uma vez importada a imagem Bitmap para a animação

05. Selecione a imagem

06. Modify - Modificar > Trace Bitmap - Traçar Bitmap

07. Será exibido uma caixa de diálogo:

    - Color Threshold - Percentual de Cores - para controlar cores de tons semelhantes e uma única cor. Default do Flash é 10 e quanto maior for dado para este controle, menor será o controle das cores

    - Minimum Area - Área Mínima - determina quantidade de pixels em torno de um ponto, ou seja, quanto menor valor, menor será os detalhes que esteja trabalhando com uma imagem

    - Curve Fit - Ajuste da Curva - determina as curvas da imagem que pode ser: Pixels, Very Tight - Muito Apertado, Tight - Apertado, Normal, Smooth - Suave, Very Smooth - Muito Suave

    - Corner Threshold - Percentual do Canto - determina os cantos das curvas da imagem que pode ser: Many Corners - Muitos Cantos, Normal e Few Corners - Poucos Cantos

COMO SIMULAR TRANSPARÊNCIA

01. Uma vez importada a imagem para o Flash

02. Selecione a imagem

03. Modify - Modificar > Break Apart - Quebrar ou Ctrl+B

04. Selecione a ferramenta Lasso

05. Nas ferramentas opcionais do Lasso > selecione Magic Wand Properties - Propriedades da Varinha Mágica > Default do Flash é 10

06. Clique em Magic Wand - Varinha Mágica

07. Selecione as cores semelhantes que deseja excluir da imagem

08. Delete

COMO USAR UMA IMAGEM COM TEXTURA

01. Uma vez importada a imagem para o Flash

02. Selecione a imagem

03. Modify - Modificar > Break Apart - Quebrar ou Ctrl+B

04. Selecione a ferramenta Dropper - Conta Gotas

05. Clique na imagem e a textura será exibida na ferramenta Balde

    Desenhe uma bola

06. Observe que a textura foi aplicada no preenchimento da bola

COMO USAR IMAGEM EM 3D

Para usar Imagens em 3D (Tridimensionais) seja estática ou animada existem alguns programas na qual você pode criar suas imagens em 3D e importar para Flash:

 - Aviel http://www.aviel.com

 - Illustrate que é um plugin para 3DS Max 2.5 que renderiza a sua animação 3D diretamente em swf em gráficos vetoriais. http://www.davidgould.com

 - Swift 3D http://www.swift3d.com

 - Vecta 3D http://www.vecta3d.com

Dica:

 - No CD do Flash 5.0 vem um programa chamado Swish na versão demo que cria Efeitos para Textos no Flash

 - O programa custa US$30 http://www.swishzone.com

MOVIE CLIP

Movie Clip é um trecho de animação criado na edição do Símbolo e inserido na ária de trabalho - Cena

EXERCÍCIO 13 - MOVIE CLIP

01. Window - Janela > Library - Biblioteca ou Ctrl+L

02. Options - Opções > New Symbol - Novo Símbolo

03. Será exibido uma Caixa de Diálogo: 

    Name - Nome: digite bola

    Behavior - Comportamento > (x) Graphic - Gráfico

    (que será o modelo original para o Movie Clip)

04. Desenhe uma bola e pinte de cor gradiente

05. Selecione a bola > Ctrl+K para centralizar a bola no meio do sinal + na edição do símbolo

06. Options - Opções > New Symbol - Novo Símbolo

07. Será exibido uma Caixa de Diálogo: 

    Name - Nome: digite bola_movie

    Behavior - Comportamento > (x) Movie Clip

08. Arraste da biblioteca a bola gráfica para edição do movie clip

09. Selecione a bola > Ctrl+K para centralizar a bola no meio do sinal

10. Selecione a linha de tempo 20 na edição do movie clip > F6

11. Window - Janela > Panels - Painéis > Frame - Quadro ou Ctrl+F

12. Clique entre a linha de tempo 1 à 20

13. No painel do Quadro:

    Tweening - Entre Objetos > Motion - Movimento

    Counterwise - Sentido Horário

    Times - Vezes > digite 4

14. Clique no ícone Scene - Cena e volte à cena

15. Selecione na biblioteca o símbolo bola_movie e arraste para Cena

16. Selecione a linha de tempo 40 da Cena > F5 (inserir frame - quadro)

17. Salve a animação como exer13.htm > Ctrl+Enter e teste sua animação

EXERCÍCIO 14 - MOVIE CLIP COM IMAGEM

01. File - Arquivo > Import - Importar e importe a imagem cena1.png\

    que seguem, anexo a este módulo

02. Selecione a imagem

03. Modify - Modificar > Break Apart - Quebrar ou Ctrl+B

04. Selecione a ferramenta Lasso

05. Nas ferramentas opcionais do Lasso > selecione

    Magic Wand Properties - Propriedades da Varinha Mágica > 10

06. Clique em Magic Wand - Varinha Mágica

07. Clicando na tela do celular

08. Mantendo selecionada a tela do celular > F8 >

    símbolo > digite: tela (x) graphic - gráfico

09. Clique OK

10. Delete a tela do celular na Cena

11. Window - Janela > Library - Biblioteca ou Ctrl+L

12. Options - Opções > New Symbol - Novo Símbolo

13. Será exibido uma Caixa de Diálogo:

    Name - Nome: digite tela_movie

    Behavior - Comportamento > (x) Movie Clip

14. Selecione a biblioteca o símbolo tela e arraste para a edição da tela_movie

15. Selecione a tela > Ctrl+K para centralizar no meio do sinal + na edição do símbolo

16. Selecione a linha de tempo 2 na edição do movie clip > F6

17. Selecione a linha de tempo 3 na edição do movie clip > F6

18. Selecione a linha de tempo 4 na edição do movie clip > F6

19. Selecione a linha de tempo 2 na edição do movie clip > selecione o desenho da tela > botão direito do mouse > Panels - Painéis - Effect - Efeito > Alpha=50%   

20. Selecione a linha de tempo 3 na edição do movie clip > selecione o desenho da tela > botão direito do mouse > Panels - Painéis - Effect - Efeito > Alpha = 75%

21. Selecione a linha de tempo 4 na edição do movie clip > selecione o desenho da tela > botão direito do mouse > Panels - Painéis - Effect - Efeito > Alpha = 0%

22. Clique no ícone Scene - Cena e volte à Cena

23. Selecione a biblioteca a tela_movie e arraste exatamente para sua posição original na imagem celular (use as setinha do teclado para posicionar corretamente)

24. Clique no rodapé da área de trabalho a porcentagem da tela de 100% para 400%

25. Selecione a ferramenta Lasso

26. Nas ferramentas opcionais do Lasso > Selecione Magic Wand Propertis - Propriedades da Varinha Mágica > 10

27. Clique em Magic Wand - Varinha Mágica

28. Clique na lente da câmera digital

29. Mantendo selecionada a tela celular > F8 > símbolo > digite: lente (x) graphic - gráfico

30. Clique OK

31. Delete a lente da câmera digital na Cena

32. Windows - Janela > Library - Biblioteca ou Ctrl+L

33. Options - Opções > New Sybol - Novo Símbolo

34. Será exibido uma Caixa de Diálogo:

     Name - Nome: digite lente_movie

     Behavior - Comportamento > (x) Movie Clip

35. Selecione da biblioteca o símbolo lente e arraste para a edição da lente_movie

36. Selecione a lente > Ctrl+K para centralizar no meio do sinal + na edição do símbolo

37. Selecione a linha de tempo 2 na edição do movie clip > F6

38. Selecione a linha de tempo 3 na edição do movie clip > f6

39. Selecione a linha de tempo 4 na edição do movie clip > f6

40. Clique na área de trabalho a porcentagem da tela de 100% para 400%

41. Selecione a linha de tempo na edição do movie clip > selecione o desenho da lente > botão direito do mouse > Panels - Painéis - Effect - Efeito > Tint - Tinta > selecione a cor vermelha

42. Selecione a linha de tempo 2 na edição do movie clip > selecione o desenho da lente > botão direito do mouse > Panels - Painéis - Effect - Efeito > Tint - Tinta > selecione a cor amarela 

43. Selecione a linha de tempo3 na edição do movie clip > selecione o desenho da lente > botão direito do mouse > Panels - Painéis - Effect - Efeito > Tint - Tinta > escolha cor de rosa

45. Clique no ícone Scene - Cena e volte à Cena

46. Clique no rodapé da área de trabalho a porcentagem da tela de 100% para 400%

47. Selecione da biblioteca a lente_movie e arreste exatamente para sua posição original na imagem da câmera digital (use a setinha do teclado para posicionar corretamente)

48. Para que a imagem seja exibida somente do tamanho que foi criada, vamos inserir uma ação FSCommand!

49. Selecione a linha de tempo 1 da Camada 1 > botão direito do mouse > Action - Ações > Basic Actions - Ações Básicas > Duplo clique em FSCommand digite: Command - Comando : allowscale   Arguments - Argumentos: false

50. Salve a animação como exer14.htm > Ctrl+Enter e teste sua animação

MASK - MÁSCARA

Mask ou Máscara são camadas que escondem parte da animação

EXERCÍCIO 15 - BANNER ANIMADO I

01. Clique em 12.0 fps e coloque as dimensões de animação: 300x40 e a cor de fundo (background) em azul escuro

02. Clique OK

03. Salve a animação como exer15.fla

04. Digite: BANNER ANIMADO I em arial black, 26 e em laranja

05. Selecione o texto > Ctrl+K e centralize o texto na área de trabalho

06. Selecione a linha de tempo desta camada > botão direito do mouse > Copy Frames - Copiar Quadros

07. Clique na folha branca a baixo das camadas e insira uma nova camada(camada2)

08. Selecione a linha de tempo 1 da Camada 2 > botão direito do mouse > Paste  Frames - Colar Quadros

09. Esconda a Camada 1

10. Troque a cor do texto da Camada 2 para amarelo

11. Selecione a linha de tempo numero 50  da camada 1  > F5 (Inserir um Frame - Quadro), repita para a camada 2

12. Clique na folha branca abaixo das camadas e insira uma nova camada (Camada3)

13. Posicione a Camada 3 acima de todas as Camadas

14. Selecione a linha de tempo 1 da Camada 3 e desenhe uma bola sobre a letra B da palavra BANNER

15. Esconda as camadas 1 e 2

16. Selecione a bola > F8 > símbolo gráfico

17. Exiba as camadas 1 e 2

18. Selecione a bola e arraste para fora(à esquerda) da palavra BANNER

19. Selecione a linha de tempo 50 da Camada 3 > F6 (Keyframe - Quadro de Chave)

20. Posicione a bola após a palavra ANIMADO I

21. Clique com botão direito do mouse entre a linha de tempo 1 e 50 > Create Motion Tweening - Criar Movimentos entre Objetos

22. Clique com o botão direito do mouse sobre a camada 3 > Mask - Máscara

23. Para que o banner seja exibido somente do tamanho que foi criado, vamos inserir uma ação FSCommand

Na caixa de parâmetros digite: Command - Comando: Allowscale    Argumentes - Argumentos: False

25. Observe que será exibido um a (de ação) na linha de tempo 1

26. Salve a animação > Ctrl+Enter e teste sua animação

      Dicas:

*Quando se aplica uma máscara, o Flash insere automaticamente o cadeado entre duas camadas e sempre a máscara será aplicada na camada da parte de cima sob a camada da parte de baixo

*Caso deseja reeditar, você deve destrancar as camadas e assim que concluído a edição, deve-se trancar novamente as camadas

EXERCÍCIO 16 - BANNER ANIMADO II

01. Clique em 12.0 fps e coloque as dimensões da animação: 300 x 40 e a cor de fundo (background) em azul claro

02. Clique OK

03. Salve sua animação como exer16.fla

04. Digite: BANNER ANIMADO II em arial black, 26 e em preto > dê Enter digite TESTANDO 1 > dê Enter digite TESTANDO 2 > dê Enter

     digite TESTANDO 3 > dê Enter

     digite TESTANDO 4

05. Selecione o texto > F8 > símbolo gráfico

06. Selecione a linha de tempo 100 Camadas 1 > F6 (Keyframe - Quadro de Chave)

07. Clique na folha branca a baixo das camadas e insira uma nova camada(Camada 6)

08. Esconda a camada 1

09. Desenhe na camada 2 um retângulo do tamanho da área de trabalho

10. Esconda camada 2

11. Exiba a camada 1 > selecione a linha de tempo 100

12. Mude a posição do texto para fora na parte inferior área de trabalho

13. Selecione a linha de tempo 100

14. Mude a posição do texto para fora na parte superior da área de trabalho

15. Clique com o botão direito do mouse entra a linha de tempo 1 e 100 > Create Motion Tweening - Criar Movimento entre Objetos

16. Clique com o botão direito do mouse sobre a Camada 2 > Mask - Máscara

17. Para que o banner seja exibido somente do tamanho que foi criado, vamos inserir uma ação FSCommand!

18. Selecione a linha de tempo 1 da camada 2 > botão direito do mouse > Actions - Ações > Basic Actions - Ações Básicas > duplo clique em FSCommand digite:

Command - Comando: allowscale    Arguments - Argumentos: false

19. Salve a animações > Ctrl+Enter e teste sua animação

EXERCÍCIO 17 - BANNER ANIMADO III

01. Clique em 12.0 fps e coloque as dimensões da animação: 200 x 150 e a cor de fundo(backgrond) em branco

02. Clique OK

03. Salve sua animação como exer17.fla

04. File - Arquivo > Import - Importar e importe a imagem ipanema.jpg que segure anexo a este módulo

05. Selecione a imagem > F8 > símbolo gráfico

06. Posicione a imagem no canto superior à esquerda, observe que parte da imagem ficará fora da área de trabalho

07. Selecione a linha de tempo 50 da camada 1 > F6 (Keyframe - Quadro de Chave)

08. Selecione a imagem > Modify - Modificar > Transform - Transformar Scale and Rotate - Escala e rotação > Escala: 60

09. Posicione a imagem no meio da área de trabalho

10. Clique com o botão direito do mouse entre a linha de tempo 1 e 50 > Create Motion Tweening - Criar Movimento entre objetos

11. Clique na Folha Branca abaixo das camadas e insira uma nova camada (camada 2)

12. Esconda a Camada 1

13. Desenhe a camada 2 um retângulo do tamanho da área de trabalho

14. Clique com o botão direito do mouse sobre a camada 2 > Mask Máscara

15. Para que o banner seja exibido somente do tamanho em que foi criado, vamos inserir uma ação FSCommand!

16. Selecione a linha de tempo 1 da camada 2 > botão direito do mouse > Action - Ações > Basic Actions - Ações Básicas > duplo clique em FSCommand digite:     Command - Comando: allowscale Arguments - Argumentos : false

17. Salve a animação > Ctrl+Enter e teste sua animação

EXERCÍCIO 18 - BANNER ANIMADO IV

01. Clique em 12.0 fps e coloque as dimensões da animação: 300 x 40 e a cor de fundo(background) em branco

02. Clique em OK

03. Salve sua animação como exer18.fla

04. Desenhe um retângulo em cinza claro que ocupe a área de trabalho

05. Digite: BANNER ANIMADO IV em arial black, 24 e em preto

06. Selecione o texto > Ctrl+K e centralize o texto na área de trabalho

07. Selecione a linha de tempo 50 > F5 (inserir um Frame - Quadro)

08. Clique na folha a branco a baixo das camadas e insira uma nova camada (camada 2)

09. Selecione a linha de tempo 1 da camada 2 e desenhe uma bola sobre a letra B da palavra BANNER

10. Esconda a camada 1

11. Selecione a bola > F8 > símbolo gráfico

12. Exiba as camadas 1 e 2

13. Selecione a bola e arraste para fora(à esquerda) da palavra BANNER

14. Selecione a linha de tempos 50 da camada 2 > F6(Keyframe- Quadros de Chaves)

15. Posicione a bola após a palavra ANIMADO IV

16. Clique com o botão direito do mouse entre a linha de tempo 1 e 50 > Create Motion Tweening - Criar Movimento entre Objetos

17. Clique com o botão direito do mouse sobre a camada 2 > Masck - Máscara

18. Para que o banner seja exibido somente do tamanho que foi criado, vamos inserir uma ação FSCommand!

19. Selecione a linha de tempo 1 da Camada 2 > botão direito do mouse > Action - Ações > Basic Actions - Ações Básicas > duplo clique em FSCommand. Na caixa de parâmetros digite: Command - Comando: allowscale    Arguments - Argumentos: false

20. Clique em 12.0 fps e troque a cor de fundo(backgroud) para preto

21. Salve a animação > Ctrl+Enter e teste sua animação

SOM

Os sons podem ser inseridos em botões, na linha de tempo, independentemente da animação, mas é um recurso que se deve ter cuidado, pois aumenta consideravelmente o tamanho do arquivo.

As extensões aceitas de som são .wav e o mp3

MPEG (Picture Experts Group), mais conhecido como MP3 é um conjunto de técnicas de compressão para áudio e vídeo que reduz o tamanho dos arquivos 1/12 do original. Para tocar um arquivo MP3 é necessário utilizar um player; os mais conhecidos são WinAmp 2.10 e o Microsoft Media Player 4.0 que vem junto com o Windows 98.

O Winamp 2.10(shareware) é considerado o melhor player, pois tem mecanismo que transforma um som wav em compressão MP3. http://www.winnamp.com

 *Para transformar um som de wav para MP3

 01. Abra o Winamp 2.10

 02. Menu > Options

 03. Preference > Plug-ins

 04. Output > Nullsoft Disk Writer

 05. Clique em configure > e selecione onde irá armazenar o arquivo.wav

Outro programa para Som é o KillerSond que vem no CD do Flash 5 uma versão demo http://www.killersound.com

*Como inserir um som no Flash:

01. File - Arquivo > Import - Importar

02. Importe seu arquivo de som.wav ou mp3

03. Windows - Janela > Library - Biblioteca - observe que o arquivo do som está na biblioteca

04. Selecione o som na biblioteca e arraste para sua animação

05. Uma vez na animação > será exibido na linha de tempo uns riscados em azul, isto é, neste quadro há um som na animação

PAINEL DO SOM

01. Clique quadro na linha de tempo onde foi inserido o som

02. Clique com o botão direito do mouse > Panels - Painéis > Sound - Som

03. Será exibido o Painel do Som

04. Neste painel você poderá fazer as configurações e efeitos que desejar:

 - Sound - Som > nome do arquivo do Som

 - Effect - Efeitos

 - Synchronize - Sincronizar

 - Loops - Quantas vezes irá rodar o som.

 - Edit Envelope - Editar Envelope

*Effect - Efeitos

None - Nenhum efeito

Left chanel - Canal esquerdo - o som sai na caixa de som da esquerda

Right chanel - Canal direito - o som sai na caixa de som da direita

Fade Left to Right - Esquerda e desaparece na direita - o som começa na caixa de som à esquerda e termina na direita

Fade Right to Left - Direita e desaparece na esquerda - o som começa na caixa de som à direita e termina na esquerda

Fade In - Aumentar  som - o som vai aumentando aos poucos

Fade Out - Diminuir som - o som vai diminuindo aos poucos

Custom - Personalizar o efeito

 *Synchronize - Sincronizar

Event - Evento - o som toca até que a animação pare de rodar

Start - Iniciar som

Stop - Parar som

Stream - Corrente - o som toca até terminar, mesmo que a animação não esteja mais rodando

*Edi Evelope - Editar envelopes - para mixar som, fazendo as configurações  personalizadas

EXERCÍCIO 19 - SOM EM BOTÃO

01. Windows - Janela > Library - Biblioteca ou Ctrl+L

02. Option - Opções > New Symbol - Novo Símbolo

03. Será exibido uma Caixa de Dialogo: Name - Nome : digite botão (sem acento) Behavior - Comportamento > (x) Button - Botão

04. Desenhe o botão > Ctrl+K para centralizar no meio do sinal + na edição do símbolo

05. Insira Keyframe - Chave de quadros > F6 nos estágios Over, Down e Hit

06. Os sons são inseridos somente nos estágios Over e Down

07. Selecione o Estágio Over

08. File - Arquivo > Import - Importar e importe um som

neste exemplo vamos aproveitar os sons que vem no Flash 5

09. Windows - Janela > Common Libraries - Bibliotecas comuns Sound - Som

10. Selecione um som e arraste para cima do botão

11. Selecione o estágio Down

12. Selecione outro som e arraste para cima do botão

13. Clique no ícone Scene - Cena e volte à Cena

14. Selecione o botão na Biblioteca e arraste para área de trabalho(Cena)

15. Salve a animação como exer19.htm > Ctrl+Enter e teste sua animação

EXERCÍCIO 20 - BOTÃO LIGA/DELIGA SOM

01. Windows - Janela > Library - Biblioteca ou Ctrl+L

02. Option - Opções > New Symbol - Novo Símbolo

03. Será exibido uma Caixa de Diálogo:

Name - Nome: digite botão(sem acento)

Beharvior - Comportamento > (x) Button - Botão

04. Selecione o botão > Ctrl+K para centralizar no meio do sinal + mas na edição do símbolo

05. Insira Keyframe - Chave de Quadro > F6 nos estágios Over, Down e Hit

06. Option - Opções > New Symbol - Novo Símbolo

07. Será exibido uma Caixa de Diálogo:

Name - Nome: digite botao_liga_desliga(sem acento)

Behavior - Comportamento > (x) Movie Clip

08. Arraste da biblioteca o símbolo botão para a edição do botão liga/desliga

09. Selecione o botão > Ctrl+K para centralizar no meio do sinal + na edição do símbolo

10. Insira Keyframe - Chave de Quadro > F7 na linha do tempo 10 e 20

11. Renomeie o layer para botão

12. Selecione a linha do tempo 1 > botão direito do mouse > Action - Ação > Stop

13. Selecione a linha do tempo 10 > botão direito do mouse > Action - Ação > Stop

14. Selecione a linha do tempo 1 > botão direito > Panels - Painéis > Frame - Quadro > Label - Rótulo > digite liga

15. Selecione a linha do tempo 10 > botão direito > Panels - Painéis > Frame - Quadro > Label - Rótulo > digite desliga

16. Observe que será exibido duas bandeirinhas vermelhas marcando os rótulos: liga e desliga

17. Selecione a linha do tempo 1 > clique sobre o botão > Action - Ação > On Mouse Events (x) Press Stop All Sounds

Go to > Type - Tipo > Frame label - Quadro Rótulo > Frame - Quadro > digite liga()Go to and Play(deixe desmarcado) ficando Go to and Stop

19. Insira um layer - camada abaixo e renomeie som

20. Insira um Blank Keyframe - Cave de Quadro em Branco > F7 > na linha de tempo 10 e 20

21. Selecione a linha de tempo 1 do quadro som

22. File - Arquivo > Import - Importar um som com extensão .wav ou .mp3

23. Observe que quando se importa um som para o Flash, o som vai para Library - Biblioteca > selecione o som da biblioteca e arraste para o botão

24. Selecione a linha de tempo 1 do layer som > Panels - Painéis > Sound - Som

Effect - Efeito > None - Nenhum

Synchronize - Sincronização > Event

Loops digite 500

25. Volte à Cena 1

26. Renomeie o layer para botão_liga_desliga

27. Arraste da biblioteca o movie clip botão_liga_desliga

28. Insira um layer abaixo e renomeie de peixe

29. Nesta etapa você deveria criar um movie clip, mas vamos aproveitar um movie clip que vem no Flash!

30. Windows - Janela > Common Libraries - Bibliotecas Compartilhadas > Movie clips > selecione Fish Movie Clip - Peixe Movie Clip

31. Arraste da Biblioteca o movie clip do peixe

32. Mantendo selecionada a linha do tempo 1 da camada peixe > Action - Ação > Stop

33. Salve a animação como exer20.htm > Ctrl+Enter e teste sua animação clicando no botão

EXERCÍCIO 21 - CENAS USANDO ACTION GO TO

01. Salve sua animação como exer22.fla

02. Desenhe uma bola

03. Selecione a bola > F8 > Símbolo gráfico

04. Selecione a linha de tempo 50 e mude a posição da bola

05. Clique entre a linha de tempo 1 e 50 > botão direito do mouse > Create Motion Tween - Criar movimento entre

06. Insert - Inserir > Scene - Cena

07. Será exibida a Cena 2

08. Digite CENA 2

09. Selecione o texto > F8 > Símbolo Gráfico

10. Selecione a linha de tempo 50 e mude a posição do texto

11. Clique entre a linha de tempo 1 e 50 > botão direito do mouse > Create Motion Tween - Criar movimento entre

12. Selecione a linha de tempo 1

13. Selecione o texto > Modify - Modificar > Transform - Transformar > Scale and Rotate - Escala e Rotação > Escala: 10

14. Insert - Inserir > Scene - Cena

15. Será exibida a Cena 3

16. Windows - Janela > Common Libraries - Bibliotecas Compartilhadas > Movie Clip > selecione o Fish Movie Clip - Peixe e arraste para Cena 3

17. Selecione a linha de tempo 50 e mude a posição do peixe

18. Windows- Janela > Library - Biblioteca

19. Option - Opção > New Symbol - Novo Símbolo

20. Crie um botão escrito SEGUIR

21. Não esqueça de colocar > F6 > nos estágios Over, Down e Hit

22. Option - Opção > New Símbolo - Novo Símbolo

23. Crie um botão escrito VOLTAR

24. Não esqueça de colocar > F6 > nos estágios Over, Down, Hit

25. Volte à Cena 1

26. Insira um layer - camada acima e arraste da biblioteca o botão SEGUIR

27. Volte à Cena 2

28. Insira um layer - camada acima e arraste da biblioteca o botões: VOLTAR e SEGUIR

29. Volte à Cena 3

30. Insira um layer - camada acima e arraste da biblioteca o botão VOLTAR

31. Ctrl+Enter e teste sua animação!

32. Observe que as Cenas são exibidas automaticamente em Loop

33. Vamos parar cada cena e programar para que seja exibida outra somente se clicarmos nos botões SEGUIR e VOLTAR

34. Para que as Cenas sejam exibidas somente do tamanho que foram criadas, vamos inserir uma ação FSCommand, mas só necessário inserir na Cena 1

35. Selecione a linha de tempo 1 da cena 1  > botão direito do mouse > Actions - Ações > Basic Actions - Ações Básicas > duplo clique em FSCommand

Na caixa de parâmetros digite: Command - Comado: allowscale    Arguments - Argumentos: false

36. Agora vamos programar para que pare cada Cena e que ela fiquem em loop até que seja clicado os botões SEGUIR e VOLTAR

37. Selecione a linha de tempo 50 da Cena 1 > botão direito do mouse > Actions - Ações > Basic Actions - Ações Básicas > duplo clique em Stop

Goto com os seguintes parâmetros:

Scene 1 - Cena 1

Type - Tipo > Frame Number - Quadro Número

Frame - Quadro: 1

(x) Go to and Play - Ir e Rodar

38. Selecione a linha de tempo 50 da Cena 2 > botão direito do mouse > Actions - Ações > Basic Actions - Ações Básicas > duplo clique em Stop

Goto com os seguintes parâmetros:

Scene 2 - Cena 2

Type - Tipo > Frame Number - Quadro Número

Frame - Quadro: 1

(x) Go to and Play - Ir e Rodar

39. Selecione a linha de tempo 50 da Cena 3 > botão direito do mouse > Actions - Ações > Basic Actions - Ações Básicas > duplo clique em Stop

Goto com os seguintes parâmetros:

Scene 3 - Cena 3

Type - Tipo > Frame Number - Quadro Número

Frame - Quadro: 1

(x) Go to and Play - Ir e Rodar

40. Selecione o botão SEGUIR na Cena 1 > botão direito do mouse > Actions - Ações > Basic Actions - Ações Básicas > duplo clique em Goto com os seguintes parâmetros:

Scene 2 - Cena 2

Type - Tipo > Frame Number - Quadro Número

Frame - Quadro: 1

(x) Go to and Play - Ir e Rodar

41. Selecione o botão SEGUIR na Cena 2 > botão direito do mouse > Actions - Ações > Basic Actions - Ações Básicas > duplo clique em Goto com os seguintes parâmetros:

Scene 3 - Cena 3

Type - Tipo > Frame Number - Quadro Número

Frame - Quadro: 1

(x) Go to and Play - Ir e Rodar

42. Selecione o botão SEGUIR na Cena 1 > botão direito do mouse > Actions - Ações > Basic Actions - Ações Básicas > duplo clique em

Goto com os seguintes parâmetros:

Scene 1 - Cena 1

Type - Tipo > Frame Number - Quadro Número

Frame - Quadro: 1

(x) Go to and Play - Ir e Rodar

43. Selecione o botão SEGUIR na Cena 3 > botão direito do mouse > Actions - Ações > Basic Actions - Ações Básicas > duplo clique em Goto com os seguintes parâmetros:

Scene 2 - Cena 2

Type - Tipo > Frame Number - Quadro Número

Frame - Quadro: 1

(x) Go to and Play - Ir e Rodar

44. Salve sua animação e Ctrl+Enter para testa-la

EXERCÍCIO 22 - HTML COM FRAMES USANDO GET URL

01. Neste exemplo requer conhecimentos de HTML!

02. Criar a página index.htm em um editor de HTML ou no Bloco de Notas:

<html>

<head>

<title>EXERCÍCIO 23</title></head>

<frameset cols="100,*" framespacing="0" border="0" frameborder="0">

<framename="menu" target="menu" scr="munu.htm" scrolling="no"noresize>

<framename="apre" target="apre" scr="apre.htm" scrolling="auto" noresize>

<noframes>

<body>

<p>Esta página usa quadros mas seu navegador não aceita quadros.</p>

</body>

</noframes>

</frameset>

</html>

*Observe que demos o nome ao target - alvo de apre referente a página apre.htm

03. Crie uma página apre.htm em um editor de HTML ou Bloco de Notas:

<html>

<head>

<title>Apresentação</title></head>

<base target="apre">

<body>

<h1 aling="center">Apresentação</h1>

</body>

</html>

04. Crie uma página produtos.htm em um editor de HTML ou Bloco de Notas:

<html>

<head>

<title>Produtos</title></head>

<body>

<h1 aling="center">Produtos</h1>

</body>

</html>

05. Crie uma página clientes.htm em um editor de HTML ou Bloco de Notas:

<html>

<head>

<title>Clientes</title><head>

<body>

<h1 aling="center">Clientes</h1>

</body>

</html>

06. Abra o Flash, pois vamos criar os botões do menu!

07. Salve sua animação como menu.fla

08. Clique no ícone 12.0 fps e troque o tamanho da animação de 100 x 400 e com a cor de fundo para azul escuro

09. Windows- Janela > Library - Biblioteca

10. Options - Opções > New Symbol - Novo Símbolo

11. Crie um botão escrito Apresentação

12. Não esqueça de colocar > F6 > nos estágios Over, Down e Hit

13. Options - Opções > New Symbol - Novo Símbolo

14. Crie um botão escrito Produtos

15. Não esqueça de colocar > F6 > nos estágios Over, Down e Hit

16. Options - Opções > New Symbol - Novo Símbolo

17. Crie um botão escrito Clientes

18. Não esqueça de colocar > F6 > nos estágios Over, Down e Hit

19. Options - Opções > New Symbol - Novo Símbolo

20. Crie um botão escrito Email

21. Não esqueça de colocar > F6 > nos estágios Over, Down e Hit

22. Volte à Cena 1

23. Arraste da biblioteca os botões: Apresentação, Produtos, Clientes e Email, posicionando um abaixo do outro

24. Selecione o botão Apresentação > botão direito do mouse > Actions - Ações > Basic Actions - Ações Básicas > duplo clique em GETurl com os seguintes parâmetros:

URL: digite apre.htm

Windows - Janela: digite apre (observe que o alvo original que demos na página index.htm foi target="apre")

25. Selecione o botão Produtos > botão direito do mouse > Actions - Ações > Basic Actions - Ações Básicas > duplo clique em GETurl com os seguintes parâmetros:

URL: digite produtos.htm   Windows - Janela: digite apre

26. Selecione o botão Clientes > botão direito do mouse > Actions - Ações > Basic Actions - Ações Básicas > duplo clique em GETurl com os seguintes parâmetros:

URL: digite clientes.htm   Windows - Janela: digite apre

27. Selecione o botão Email > botão direito do mouse > Actions - Ações > Basic Actions - Ações Básicas > duplo clique em GETurl com os seguintes parâmetros:

URL: digite seu Email > mailto:nome@provedor.com.br

Windows - Janela: digite apre

28. Salve a animação!

29. File - Arquivo > Publish Settings - Configurações de publicação

30. Será aberta a caixa de diálogo para Publicação:

31. Para publicar uma página HTML, você precisa de dois arquivos: menu.swf e menu.htm

32. Mantendo a caixa de diálogo para Publicação aberta:

33. Selecione a pasta Formats - Formatos

34. (x) Flash (.swf) e (x) HTML (.html)

35. Deselecione (   ) Use Default Names - Usar Nomes Padrão

36. No item HTML troque menu.html para menu.htm

37. Publish - Publicar

38. Clique OK e foi criados os arquivos: menu.swf e menu.htm

39. Abra a página indes.htm nos navegador e teste os botões

*Dica: se as páginas em HTML não são em frames, quando for configurar

as ações dos botões no Flash:

GetURL com os seguintes parâmetros:

URL > digite o nome da página arquivo.htm

Windows - Janela > deixe em branco

PUBLICAÇÃO

01. Salve seu arquivo.fla

02. File - Arquivo > Publish Settings - Configurações de Publicação

03. Será aberta a caixa de diálogo para Publicação:

04. Vamos detalhar as formas de Publicação:

PUBLICAR PÁGINA HTML

01. Para Publicar uma página HTML, você precisa de dois arquivos: arquivo.swf e arquivo.htm

02. Mantendo a caixa de diálogo para publicação aberta:

03. Selecione a pasta Formats - Formatos

04. (x) Flash (.swf) e (x) HTML (.html)

05. Deselecione (   ) Use Default Names - Usar Nomes Padrão

06. No item HTML troque arquivo.html para arquivos.htm

07. Puplish - Publicar

08. Clique OK e foi criado os arquivos: arquivo.swf e arquivo.htm

PROPRIEDADES DO ARQUIVO.SWF

Quando se seleciona a forma de publicação para arquivo.swf é exibida uma pasta chamada Flash que tem as seguintes propriedades:

EXERCICIO 23 - IMAGENS CARREGANDO

01. Window - Janela > Library - Biblioteca ou ctrl +l

02. Options - Opções > New Symbol - novo sïmbolo

03. Será  exebido uma caixa de diálogo:

Name - Nome ? digite texto

Behavior - Comportamento > (X) Graphic - gráfico

04. Digite ? Imagens Caregando...

05. selecine o texto >  ctrl + K para centralizar em cima do sinal +

06. Options - opções > New Symbol - Novo Símbolo

07. Será exebido uma Caixa de Diálogo:

    Name - Nome ? Digite texto_movie

    Behavior - Comportamento > (X) Movie Clip

08. Arrasta da biblioteca o texto para edição do texto_movie

09. Selecione o texto > ctrl+K para centralizar em cima do sinal +

10. Selecione as linha de tempo 5 e 10 > F6 (individualmente)

11. Selecione na linha de tempo 5

12. Selecione o texto > botão direito do mouse > Panel- Painéis > Effect - Efeito > alpha= 50%

13. Selecione na linha de tempo 10

14. Selecione o texto > botão direito do mouse > Panel- Painéis > Effect - Efeito > alpha= 25%

15. Clique entra a linha de tempo 1 e5 > botão tireito do mouse Create Movie Tween - Criar Movimento Entre

16. Clique entra a linha de tempo 5 e 10 > botão tireito do mouse Create Movie Tween - Criar Movimento Entre

17. Volte a cena 1

18. Arraste da Biblioteca o s;imbolo texto_movie para Cena 1

19. Selecione as linhas de tempo 5 e10 >F6 (individualmente)

20. Selecione na linha de tempo 11> F7 (Blank Keyframe- Chave de Quadro em Branco)

21. Obeserve que a animação irá se iniciar na linha de tempo 1

22. Crie uma animação até a linha de tempo 100

23. Salve sua animação como exer33.fla

24. Selecione a linha de tempo 5 > ação > if Frame if Loaded Scene - Cena > Scene 1 - Cena 1

Type - Tipo > Frame Number - Quadro Número

Frame - Quadro > 100

Clique +

Go To

Scene - Cena > Scene 1 - Cena 1

Type - Tipo > Frame Number - Quadro Número

Frame - Quadro > 11

(X) Go To and play - ir e rodar

25. Selecione a linha de tempo 10 > Ação > Go To

Scene - Cena > Scene 1 - Cena 1

Type - Tipo > Frame Number - Quadro Número

Frame - Quadro > 1

( x ) Go To and Play - ir e rodar 

26. Selecione a linha de tempo 100 > Ação > Go To

Scene - Cena > Scene 1 - Cena 1

Type - Tipo > Frame Number - Quadro Número

Frame - Quadro > 11

( x ) Go To and Play - ir e rodar 

27. Salve o arquivo e ctrl+ enter e teste sua animação

EXERCÍCIO 24: IMAGENS CAREGANDO EM PORCETAGEM

01. Window - Janela > Library - Biblioteca ou Ctrl+ L

02. Options  -Opções > New Symbol - Novo Símbolo

03. Será exebodo uma caixa de diálogo ?

Name - Nome : digite 100%

Behavior - comportamento > ( X ) Graphic - Gráfico

04. View - Visualizar > Grid -Grande > Show Grid - exibir Grande

05. Desenhe um retêngulo de 10 x 1 quadradinhos, pintando um quadradinho de azul escuro e outro de azu claro, sucessvamente.

06. Selecione o retângulo > ctrl + G para agrupar

07. Selecione o retângulo > ctrl +K para centralizar em cima do sinal +

08. Digite abaixo do retângulo 100%

09. Selecione o símbolo 100% na biblioteca

10. Options - opções > Duplicate - Duplicar Símbolo

Name - Nome ? digite 90%

Behavior - comportamento > ( X ) Graphic -Gráfico

11. Duplo clique sobre o símbolo sobre 90% na biblioteca para ser ativado sua edição

12. Observe na parte superior foi exibido a edição  do síbolo 90%

13. Selecine o retângulo >  ctrl +Shft+g para desagrupar

14. Apague o Último quadrinho da direita

15. Digite abixo do retângulo 90% no lugar de 100%

16. Selecione o sïmbolo  90%  na biblioteca

17. Options - Opções > Duplicate - Duplicar símbolos

Name - Nome ? digite 80%

behavior - Comportamento > ( X ) Graphic - Gráfico

18. Duplo Clique sobre o símbolo 80% na Biblioteca para ser ativado sua edição

19. Observe se na parte superior foi exibido a edição do símbolo 80%

20. Apague o ultimo quadrinho da direita

21. Digite abaixo do retângulo 80% no lugar de 90%

22. Repita o mesmo procedimento , a cada vez retirando um quadrinho , e crie os símbolos 70%, 60%, 50%, 40%, 30%, 20% e 10%

23. Volte à cena 1

24. Selecione na biblioteca o símbolo 10% e arraste para Cena1

25. Selecione o símbolo 10% na Cena 1 > ctrl +K para centralizar

26. Selecione as linhas de tempo  5e 10 > F6 (individualmente)

27. Selecione a linha de tempo 11> F7

28. Selecione na Biblioteca o Símbolo 20% e arraste para Cena 1

29. Selecione o sïmbolo 20% na Cena 1 > ctrl +K para centralizar

30. Selecione as linhas de tempo  15e 20 > F6 (individualmente)

31. Selecione a linha de Tempo 21 > F7

32. Selecione na biblioteca o símbolo 30%e aaste para cena 1

33. Selecione o símbolo 30% na Cena 1 > ctrl + k para Centralizar

34. Selecione as linhas de tempo 25 e 30 > F6 (individualmente )

35. Selecine a linha de tempo 31 > F7

36. Selecione na biblioteca o símbolo 40% e arraste para Cena 1

37. Selecione o símbolo 40% na Cena 1 > ctrl + K para centralizar

38. Selecione as linhas de tempo 35 e 40 > F6 (individualmente)

39. Selecione a linha de tempo 41> F7

40  Selecione na biblioteca o símbolo 50% e arraste para cena 1

41. Selecione o símbolo 50% na cena 1 > ctrl + K para centralizar

42. Selecione as linhas de tempo 45 e 50 > F6 (lndividualmente>

43. Selecione a linha de tempo 51 > F7

44. Selecione na biblioteca o símbolo 60% e arraste para Cena1

45. Selecione i símbolo 60% na Cena 1 > ctrl +K para centralizar

46. Selecione as linha de tempo 55 e 60 > F6 (individualmente)

47. Selecione a linha de tempo 61 > F7

48. Selecione na Biblioteca o símbolo 70% e arraste para Cena 1

49. Selecione o símbolo 70% na cena 1> ctrl +K para centralizar

50. Selecione as linha de tempo 65 e 70 > F6 (individualmente)

51. Selecione a linha de tempo 71> F7

52. Selecione na Biblioteca o símbolo 80% e arraste para cena 1

53. Selecione o símbolo de 80% na cena 1 > ctrl +K para centralizar

54. Selecione as linha de tempo 75 e 80 > F6 (individualmente )

55. Selecione a linha de tempo 91 > F7

56. Selecione na biblioteca o símbolo 90% e arraste para Cena 1

57. Selecione o símbolo de 90% na cena 1 > ctrl +K para centralizar

58. Selecione as linha de tempo 85e 90 > F^6 (individualmente )

59. Selecione a linha de tempo 91 > F7

60. Selecione na biblioteca o símbolo de 100% e arraste para a Cena 1

61. Selecione o símbolo 100% na cena 1 > ctrl +K para centralizar

62. Selecione as linha de tempo 95 e 100 > F6 ( individualmente)

63. Salve sua animação como exer34.fla

64. Insert - Inserir > Scene - Cena > Scene 2 - Cena 2

65. Crie uma animação até a linha de tempo 50 na cena 2

66. Insira as cenas 3 até 11

67. Crie uma animação ate a linha de tempo 50 em cada Cena

68. Volte à Cena 1

69. Seleciona a linha de tempo 5 > Ação > If Frame is Loaded

Scene - cena > Scene - Cena 2

Type- Tipo > Frame Number- Quadro Número

Frame - Quadro > 50

Clique +         

Go To

Scene- Cena > Scene 1 - Cena 1

Type - Tipo > Frame number - Quadro Número

FRAME - QUADRO > 11

( x ) Go To and Play - Ir e Rodar

70. Selecione a linha de tempo 10 > Ação > Go To

Scene - Cena > Scene 1 - Cena 1

Type - Tipo > Frame Number - Quadro Númerico

Frame - Quadro > 1

( X ) Go To and Play - Ir e Rodar

71. Selecione a linha de tempo 15 > Ação > If Frame is Loaded

Scene - Cena > Scene 3 - Cena 3

Type - Tipo > Frame Number - Quadro Númerico

Frame - Quadro > 50 clique +

Go To

Scene- Cena > Scene 1 - Cena 1

Type - Tipo > Frame number - Quadro Número

FRAME - QUADRO > 21

( x ) Go To and Play - Ir e Rodar

72. Selecione a linha de tempo 20 > Ação > Go To

Scene - Cena > Scene 1 - Cena 1

Type - Tipo > Frame Number - Quadro Númerico

Frame - Quadro > 11

( X ) Go To and Play - Ir e Rodar

73. Selecione a linha de tempo 25 > Ação > If Frame is Loaded

Scene - Cena > Scene 4 - Cena 4

Type - Tipo > Frame Number - Quadro Númerico

Frame - Quadro > 50

clique +

Go To

Scene- Cena > Scene 1 - Cena 1

Type - Tipo > Frame number - Quadro Número

FRAME - QUADRO > 31

( x ) Go To and Play - Ir e Rodar

74. Selecione a linha de tempo 30 > Ação > Go To

Scene - Cena > Scene 1 - Cena 1

Type - Tipo > Frame Number - Quadro Númerico

Frame - Quadro > 21

( X ) Go To and Play - Ir e Rodar

75. Selecione a linha de tempo 35 > Ação > If Frame is Loaded

Scene - Cena > Scene 5 - Cena 5

Type - Tipo > Frame Number - Quadro Númerico

Frame - Quadro > 50

clique +

Go To

Scene- Cena > Scene 1 - Cena 1

Type - Tipo > Frame number - Quadro Número

FRAME - qUADRO > 41

( x ) Go To and Play - Ir e Rodar

76. Selecione a linha de tempo 40 > Ação > Go To

Scene - Cena > Scene 1 - Cena 1

Type - Tipo > Frame Number - Quadro Númerico

Frame - Quadro > 31

( X ) Go To and Play - Ir e Rodar

77. Selecione a linha de tempo 45 > Ação > If Frame is Loaded

Scene - Cena > Scene 6 - Cena 6

Type - Tipo > Frame Number - Quadro Númerico

Frame - Quadro > 50

clique +

Go To

Scene- Cena > Scene 1 - Cena 1

Type - Tipo > Frame number - Quadro Número

FRAME - qUADRO > 51

( x ) Go To and Play - Ir e Rodar

78. Selecione a linha de tempo 50 > Ação > Go To

Scene - Cena > Scene 1 - Cena 1

Type - Tipo > Frame Number - Quadro Númerico

Frame - Quadro > 41

( X ) Go To and Play - Ir e Rodar

79. Selecione a linha de tempo 55 > Ação > If Frame is Loaded

Scene - Cena > Scene 7 - Cena 7

Type - Tipo > Frame Number - Quadro Númerico

Frame - Quadro > 50

clique +

Go To

Scene- Cena > Scene 1 - Cena 1

Type - Tipo > Frame number - Quadro Número

FRAME - qUADRO > 61

( x ) Go To and Play - Ir e Rodar

80. Selecione a linha de tempo 60 > Ação > Go To

Scene - Cena > Scene 1 - Cena 1

Type - Tipo > Frame Number - Quadro Númerico

Frame - Quadro > 51

( X ) Go To and Play - Ir e Rodar

81. Selecione a linha de tempo 65 > Ação > If Frame is Loaded

Scene - Cena > Scene 8 - Cena 8

Type - Tipo > Frame Number - Quadro Númerico

Frame - Quadro > 50

clique +

Go To

Scene- Cena > Scene 1 - Cena 1

Type - Tipo > Frame number - Quadro Número

FRAME - QUADRO > 71

( x ) Go To and Play - Ir e Rodar

82. Selecione a linha de tempo 70 > Ação > Go To

Scene - Cena > Scene 1 - Cena 1

Type - Tipo > Frame Number - Quadro Númerico

84. Selecione a linha de tempo 80 > Ação > Go To

Scene - Cena > Scene 1 - Cena 1

Type - Tipo > Frame Number - Quadro Númerico

Frame - Quadro > 71

( X ) Go To and Play - Ir e Rodar

85. Selecione a linha de tempo 85 > Ação > If Frame is Loaded

Scene - Cena > Scene 10 - Cena 10

Type - Tipo > Frame Number - Quadro Númerico

Frame - Quadro > 50

clique +

Go To

Scene- Cena > Scene 1 - Cena 1

Type - Tipo > Frame number - Quadro Número

FRAME - QUADRO > 91

( x ) Go To and Play - Ir e Rodar

86. Selecione a linha de tempo 90 > Ação > Go To

Scene - Cena > Scene 1 - Cena 1

Type - Tipo > Frame Number - Quadro Númerico

Frame - Quadro > 81

( X ) Go To and Play - Ir e Rodar

87. Selecione a linha de tempo 95 > Ação > If Frame is Loaded

Scene - Cena > Scene 11 - Cena 11

Type - Tipo > Frame Number - Quadro Númerico

Frame - Quadro > 50

clique +

Go To

Scene- Cena > Scene 2 - Cena 2

Type - Tipo > Frame number - Quadro Número

FRAME - qUADRO > 1

( x ) Go To and Play - Ir e Rodar

88. Selecione a linha de tempo 100 > Ação > Go To

Scene - Cena > Scene 1 - Cena 1

Type - Tipo > Frame Number - Quadro Númerico

Frame - Quadro > 91

( X ) Go To and Play - Ir e Rodar

89. Selecione a linha de tempo 50 da cena 11 > Ação > If Frame is Loaded

Go To

Scene- Cena > Scene 2 - Cena 2

Type - Tipo > Frame number - Quadro Número

FRAME - QUADRO > 1

( x ) Go To and Play - Ir e Rodar

90. Salve seu arquivo e Ctrl+ Enter  para testar sua animação , mas observe que o efeito só será visualizado se voçê publicar esta animação na internet

Frame - Quadro > 61

( X ) Go To and Play - Ir e Rodar

83. Selecione a linha de tempo 75 > Ação > If Frame is Loaded

Scene - Cena > Scene 9 - Cena 9

Type - Tipo > Frame Number - Quadro Númerico

Frame - Quadro > 50

clique +

Go To

Scene- Cena > Scene 1 - Cena 1

Type - Tipo > Frame number - Quadro Número

FRAME - QUADRO > 81

( x ) Go To and Play - Ir e Rodar

EXERCÍCIO 25 -  ARQUIVO EM FLASH PARA IMPRESSÃO

10. Selecione o estágio Over , Down e Hit > F6 (individualmente)

11. Volte a cena

12. Selecione a linha de tempo 1

13. Arraste da Bibliotece o Botão para Cena

14. Agora vamos determinar o frame - quadro que sera impresso

15. Selecione a linha de tempo 1> botão direito do mouse >

    Panels - Painéis > Frame - Quadro > Label - Rótulo > digite #p

16. Insira um layer - camada acima

17. Selecione a linha de tempo 10 da camada 2 > F7

18. Mantendo selecionado a linha de tempo 10 > digite não imprimir esta parte

19. Agora vamos determinar o frame - quadro que não será impresso

20. Selecine a linha de tempo 10 > botão direito do mouse > Panels - Paineis > Frama- Quadro > Label - Rótulo > digite !#p

21. Selecione a linha de tempo 1 > selecione o botão imprimir> Ação - Ação novemente > print 

22. Será exibida a caixa sobre a impressão?

Print - impressão   pode ser ?

As vectors- como vetores - que imprime em altaqualidade e sem transparencia , ou seja , objetos que contém transparência ou efeitos de cor não podem ser impressos nesta opção

           

As Bitmap - como Bitmap - imprime o canal alpha ou efeito de cor e é melhor opção para uma impressão de alta resolução

Location - Localização - especifica qual a linha de tempo a ser impressa?

Level- Nível- especifica o número do arquevo.swf a ser caregado

Target - Alvo - especifica o alvo

(X) Target - Alevio > digite#p

Bounding - Limites da Impressão

Movie - Animação - arquivo.swf que deve ter m Label-Rótulo >#b

Frame - Quadro - determina o quadro que pode ser impresso

Max determina todos os frames - quadros  poderão ser impressos

Selecione Frame - Quadro

23. Observação ? a ação para imprimir pode ser feita no botão ou em movie clip

24. File - Arquivo> Pubish Settings- comfigurações de publicação

25. Será aberta a caixa de diálogo para Publicação?

(X) exer39.swf e exer39.html

26. Deselecione ( ) Use Default Names - Usar Nomes Padrão

27. No item HTML troque exer39.html para exer39.htm

28. Selecine a pasta HTML > deselecine Display Menu - Exebir Menu

Isto permite que o menu do Flash não será exebido

29. Publish - Pubicar

30. Clique OK

31. Abra o navegador do arguivo exer39.htm

32. Clique no botão Imprimir e imprima a animação

EXERCÍCIO 26: ARQUIVO EM FLASH COMO SCREENSAVER

Para criar um ScreenSaver ou Proteção de Tela para seu computador , siga as seguntes intruções:

01. Crie sua animação no Flash

02. Insira na linha de tempo 1> Açao > Ação Básica FSCommand> Command - Comando > digite Fullscreen Argument - Argumento > digite true

03. Com esta ação a animação ocupará dota tele do computador

04. Salve seu arquivo

05. File - Arquivo > Publish Settings - comfiguraçõe de publicação

06. Será aberta a caixa de diálogo para Publicacão

07. Agora temos que criar um arquivo executável

Exite duas formas de publicação para criar arquivos executaveis ?

Window Projector (arquivo.exe)- para Windows

Macintosh Projector (arquivo .hqx) - para Macintosh

08. Clique Publish - Publicar e está criado um arquivo executavel!

09. Com o arquivo .exe é necessário transformar este  para  arquivo .scr através de programas de ScreenSaver,  faça dowload do programa:

Screnweaverv v. 2.051 Http://screenweaver.com/

10 Faça a transformação

EXERCÍCIO 27: COMO CRIAR GIF ANIMADO

Quando se seleciona a forma de pulicação para GIF Image - Imagem Gif  (arquivo.gif) é exibida uma pasta chamada Gif que tem as seguintes propriedades:

Dimensions - Dimenções - determina as dimensões  da imagem :

Width- Largura e Height - Altura

Match Movie - animação Original - determina que a imagem será exibida no tamanho original que foi criada

Playback

Static - Estatistica - determina imagem estática

Animated - Animado - datermine imagem animada (Selecine esta opcão)

Loop Continuosly - Loop Contínuo (selecione esta opção)

Repeat X temes - repetir x vezes

Options - Opções

Optimize Colors - cores otimizadas (selecione esta opção )

Interiace - Interlaçar

Smooth - suavizar (selecione esta opção)

Dither Solids - especifica em pixel as cores disponíveis  serã compinadas para simular uma cor não disponivel na paleta de cores

Remove Gradients - Remover Gradientes - remove cores gradientes

Transparent - Transparente

Opaque- Opaco

Transparent - Transparent (selecione esta poção para criar um gif animado transparente)

Alpha

Palleta Type - tipo de Paleta

web 216- usar as 216 cores do  navegador (selecione esta opção )

Adptative - adaptável

Web Snap Adaptative - mesma coisa que o item adaptavel , mas ele comverte cores similares em 216 cores (no case de imagens com 256 cores)

Custom - Personalizar

pallet- paleta de cores , case seja selecionado o item Personalizar

clique Pblish - publicar e está criado seu gif animado!

EXERCÍCIO 28: ACTIONSCRIPT IF FRAME IS LOADED

If Frame is loaded - permite que a animação comece a rodar, somente depois que for totalmente caregada no navegador do usuario, isto é, efeito conhecido como  "Imagens Caregando ..."

Nas linha de tempo 1.5.10> Texto Imagens Caregando ...

Na linha de tempo 11> onde se inicia a animação propriamente dita

Na linha de tempo 100 > final da animação

Na linha de tempo 5 > Ação >  se caregou o último quadro , neste caso = 100,  vá para o nicio da animação, neste caso = 11 se esta declaração não for verdadeira permita  que a animação  continue rodando

Na linha de tempo 10> Ação > voltar ao inicio, neste caso =1, pois a declaração é falsa, a animação não foi carregada!

Suponhamos que a animação já foi carregada no navegador e quando passar na linha de tempo 5> ela pula para a linha de tempo 11 e começa a rodar a aminação

Quando chega na linha de tempo 100> não é necessário mais voltar para o Texto Imagens Caregando ...> ir para linha de tempo 11 > que é  animação propriamente dota, ficando em loop (entr 11 e 100)

Atenção : Este efeito só é visualizado quando a animação estiver publicada na Internet

EXERCÍCIO 29 - CONTADOR

Crie um novo filme contendo um único Frame.

Selecione a ferramenta Text Tool  e digite o número 0 (zero) no Stage.

Em seguida abra o painel Text Options em menu Window > Panels > Text Options. No painel, altere o tipo para Dynamic Text.

No campo Variable, escreva um nome que este textfield receberá. Exemplo: contador. Deixe desmarcadas as opções HTML, Border/Bg Selectable.

Este campo de texto será uma variável chamada contador, cujo valor inicial é o valor 0 (zero) que está digitando nele.

No Stage insira um botão. Você pode inserir um botão presente na biblioteca Button, se desejar.

Em seguida clique um avez nesse botão, para inserirmos o Action. Portanto, abra o ainel Actions. Nele, clique duas vezer na ação chamada Actions (logo abaixo de Basic Actions). Na listagem que aparecerá, clique 2x no ítem setVariable.

Abrirá na parte inferior do Painel Object Actions, os parâmetros para você configurar. No campo Variable, digite contador, que é o nome da variável que queremos alterar. No campo value, digite: int(contador + 10)

Marque a caixa Expression. Com isso estamos informando que queremos que o valor de contador aumente 10 cada vez que o botão for pressionado.

Usamos a função int na frente para informar que o conteúdo se trata de uma variável numérica. Caso contrário o resultado seria 10101010.

Salve e teste.

EXERCÍCIO 30: INTERAGINDO UM CONTADOR COM UM MOVIE CLIP

Vamos usar o exercício anterior. Abra o exercício 36. Vá ao menu File > Save as. Salve como ex37.

Escolha a ferramenta Arrow Tool e selecione e textfield contador. Em seguida transforme-o em Movie Clip apertando F8. Com isso estamos fazendo com que o contador fique dentro do Movie Clip, podendo ser acionado tanto por botões e por outros Movie Clips dentro do filme.

Coloque o nome da instância, na janela Instance, desse Movie Clip como sendo a palavra qtd.

Clique no botão e veja o painel Object Actions. Apague o Action inserido e aplique os Actions Tell Target, colocando em Target o Movie Clip qtd e em seguida, aplique o Action Set Variable passando como Variable a palavra contador e em Value: int(contador + 10). No campo Value marque a opção Expression.

Abra a biblioteca de Movie Clips (menu Window > Common Libraries > Movie Clips). Nessa janela, clique no ítem Fish Movie Clip e arraste para o Stage.

Clique duas vezer no peixe no Stage para editá-lo.

clique no último Frame deste Movie Clip e insira o Action Tell Target. No campo Target digite ../qtd

Em seguida aplique o Action SetVariable passando como argumento:

Variable: contador

Value: int(contador – 50) Marque a opção Expression.

Salve e teste o Movie.

Quando o Movie Clip Fish rodar o último Frame dele, o contador subtrairá 50. Como o Movie Clip está em Loop, de tempos em tempos o contador diminuirá 50. Quando você pressionar o botão, o contador aumentará 10.

Nota: Observe que a referenciação do comando Tell Target de um Movie Clip para outro muda. Você deve inserir “../” para informar que aquele Movie Clip que você está querendo acessar está presente na Timeline principal.

Então quando usar “../”? Quando você estiver acessando um Movie Clip a partir de outro Movie Clip.

Se você estiver acessando o Movei Clip a partir de um botão ou de um Frame inserido na Timeline principal, você não precisa usar esta referenciação.

Estes dois exercícios mostram um uso básico do Action Script, ou seja, efetuar contas simples como soma e subtração.

Esses cálculos, entre outros, é feito usando os operadores. No Action Script, os operadores estão presentes no ítem Operators do painel Actions.

Se você tem conhecimentos em pregramação saberá usar uma boa parte desses operadores, caso contrário veremos em alguns exercícios do curso.

Além dos operadores, o Aciton Script apresenta ainda, as funções (Action Functions), as propriedades (Action Properties) e os objetos (Action Objects).

Durante os capítulos do livro veremos alguns desses Actions, fazendo exercícios práticos de sua utilização.

Todo acesso a cada tipo de Action sempre será feito da mesma maneira, ou seja, clicando 2x no Action que quer aplicar e  “setar” as suas propriedades, argumentos ou parâmetros que aparecem no painel.

EXERCÍCIO 31: CRIANDO UMA ÁREA RESTRITA DENTRO DO FLASH

Crie um novo filme contendo 3 Frames. Em cada Frame insira um Keyframe. Insira um Action Stop em cada Keyframe.

Clique no Frame 1, selecione a ferramenta Text tool e digite a palavra Senha:

em seguida crie com a mesma ferramenta, uma área para digitação da senha.

Detalhe: a palavra senha, deixe-a como Static Text (no Painel Text Options). O campo de texto para receber a senha, deixe como Input Text e escolha o tipo Password. No campo Variable, escreva senha. No campo Max Chars. digite 5, para que o campo possa receber no máximo 5 caracteres. Marque a opção Border/Bg e o primeiro ícone de Embed Fonts. Em seguida crie um botão. Coloque o Action If (<not set yet>){

No campo Condition, digite: senha ==”abc12”

(atenção nos dois sinais de igual). Em seguida aplique o Action Go To and Stop Frame 2.

Aqui informamos: se a senha form abc12, então vá para o Frame 2.

Agora, clique na linha } else {

Aplique o Action Go To and Frame 3.

Aqui informamos, se a senha não for abc12, então vá para o Frame 3.

Clique no Frame 2. Digiet no Stage a frase: “Área Restrita”.

Clique no Frame 3. Digite a frase “Senha errada. Tente novamente.” E crie um botão com Action para retornar ao Frame 1.

Salve e teste!

EXERCÍCIO 32: CRIANDO UMA SCROLL AREA (ÁREA DE TEXTO ROLÁVEL)

Uma Scroll Area seria um campo de texto com botões de rolagem. Neste exercício criaremos uma Scroll Area para entrada de dados.

Crie um novo filme contendo um Frame.

Selecione a ferramenta Text Tool e clique no Stage. Em seguida redimensione a área de texto para um tamanho onde o usuário possa entrar alguns dados.

No Painel Text Options, mude o campo e texto para o tipo Input Text e do tipo Multiline. Marque as opções Word Wrap e Border/Bg. Em Max. char. digite um valor como 100. Coloque o nome no campo Variable de texto.

Em seguida crie dois botões e insira um em cada extremidade no lado direito do campo de texto.

Clique no botão de cima. Insira o Action Set Variable. No campo Variable digite a palavra texto e aplique o Action Scroll persente no [item Functions. No campo Value, digite texto, aplique o Action Scroll. Em seguida subtraia o valor 1. Marque a opção Expression.

Clique on botão de baixo e aplique o mesmo Action, porém neste caso somando o valor 1. Em outras palavras: aplique um Set Variable. No campo Variable, digite texto e aplique o Action Scroll e some 1.

O resultado deste botão:   texto.scroll = texto.scroll + 1;

Salve o teste. Digite bastante no seu campo de texto e depois pressione os botões.

Nota: Posteriormente faremos um exercício de Scroll usandoum texto já inserido no campo.

EXERCÍCIO 33: CARREGANDO O CONTEÚDO DE UM ARQUIVO EXTERNO DENTRO DO FLASH

Crie um novofilme com um Frame.

Selecione a ferramenta Text Tool e clique no Stage. Aumente a área de texto para que ele possa receber uma quantidade suficiente de texto. Em Text Options, deixe esta área como Dynamic Text. Escolha o tipo Multiline. Em Variable digite texto. Marque as opções HTML  e Word Wrap. Os outros ítens deixe desmarcado (inclusive o Embed Fonts).

Clique no Frame 1 e aplique um Action diretamente no Frame: aplique o Aciton Loadvariables.

No campo URL digite o nome do arquivo: textoexterno.txt

Em Location deixe level e marque 0 (zero).

Pronto. Salve o exercício.

Agora falta montar o arquivo texto.

Antes de prosseguirmos com o exercício sempre é bom deixar claro que o arquivo txt deverá Ter a seguinte estrutura:

Nome da variável (mesmo nome do campo de texto)=Palavra1 palavra2, etc.

Então, vamos editar o arquivo textoexterno.txt. Abra o bloco de notas e escreva na mesmalinha:

texto=Este texto está inserido no arquivo de texto externo ao Flash.

Salve o arquivo como textoexterno.txt no mesmo diretório que o arquivo Flash.

Teste seu filme!

Observe que nas opções do texto (Text Options), você marcou a caixa HTML. Isso significa que você pode inserir comandos HTML dentro do arquivo texto que ele setá carregado dentro do campo texto! Se quiser testar, altere seu arquivo textoexterno.txt para:

texto=Este<b>texto</>está<u>inserido</u>no arquivo de<font color=”#FF00CC”>texto externo</font>ao<font size=”20”>Flash</font>.

EXERCÍCIO 34: CARREGANDO VÁRIOS TEXTOS NO STAGE E CRIANDO ANIMAÇÕES

Crie um novo filme com 3  Layers. Cada um com 20 Frames.

Clique no Frame 1 do Layer 2 e insira outra área de texto do tipo Dynamic Text. Coloque o nome em Variable de texto2.

No Layer 3 aplique o Action no Frame 1: Load Variables. No campo URL digite: textos.txt e coloque level 0.

Clique no Frame 20 do Layer 1. Crie um Keyframe. Arraste o campo de texto deste Layer para uma outra posição. Em seguida, clique no Frame 1 e aplique o Tweening Motion.

Agora clique no Farme 1 do Layer 2. Selecione o campo de texto 2 e transforme-o em Symbol do tipo Graphics (F8). Em seguida, clique no Frame 20 e crie um Keyframe. Clique no Frame 1 e clique 1x no campo de texto2. Aplique um efeito chamado Brigtness com valor 100% (presente no panel Effects), em seguida, ainda no Frame 1, aplique um Tweening Motion. Se quiser, posicione o símbolo em outra posição no Stage. Salve o exercício.

Vamos criar o arquivo texto. Abra o bloco de notas. Dikgite o seguinte conteúdo na mesma linha:

Texto1=Flash 5&texto2= <a href=”http://www.macromedia.com”>Macromedia </a>

Salve como textos.txt. E teste o seu filme! Observe que a palavra Macromedia contém um link!

Notas: Os campos de textos podem ser inseridos do tipo Multiline também. Neste caso, devem vir com as opções Word Wrap e HTML marcadas.

Atenção ao sinal & presente no arquivo de texto. Esse sinal irá informar ao programa que nesse arquivo tem outra variável. Todas as vezer que quisermos inserir “n” variáveis no mesmo arquivo, basta inserir o & em seguida manter a mesma estrutura do arquivo, ou seja, variável=palavra palavra, etc. Procure não deixar espaço entre o & e o nome da noma variável. Isso evita a ocorrência de bugs.

EXERCÍCIO 35: CRIANDO UM SCROLL AREA COM LOAD VARIABLES

Crie um novo filme com um Frame.

Insira no Stage uma área de texto do tipo Dynamic Text Multiline com o nome texto. Na caixa Text Options, marque os ítens HTML, Border/Bg e Word Wrap. Deixe desmarcado o ítem Embed Fonts.

Crie dois botões para criar o Scroll, como foi visto no exercício 42. Inclusive coloque os mesmos Actions nos dois botões.

Clique no Frame 1 e insira o Action Loadvariables. No campo URL e digite: scroll.txt. Deixe level 0 (zero).

Salve o exercício.

Agora crie o arquivo scroll.txt com o seguinte conteúdo, digitando tudo na mesma linha:

Texto=Este é um exemplo de Scroll Area carregando um teot externo. Você pode acessar esta área para cima ou para baixo clicando nos botões ao lado.

Após a última palavra, insira vários “enters” para o Scroll funcionar, já que a quantidade de texto é pequena. Salve e teste o exercício!

Nota: Lembre-se que você pode alterar a fonte a as suas características no painel Character, como também é possível alterar o tipo de alinhamento do campo de texto no painel Paragraph.