TUTORIAL PARA ELABORAR MATERIAIS EDUCACIONAIS
Este é um exemplo simples porém muito importante de há muitas forma de incrementar e inovar com novas formas de trabalhar os conteúdos de matemática na sala de aula. O adobe flash, sém dúvidas, oferece muitas ferramenta de criação, onde o professor poderá construir a maior parte de seu material de ensino, ou construir com os proprios alunos na sala.
Segue o passo a passo para a criação de um DOMINÓ VIRTUAL,produzido por:
Rudieri Turchiello
Colbek
Tânia Michel Pereira
Juliane Sbaraine
Pereira Costa
Construção de Dominó Virtual com Flash
Nesta apostila são
apresentados e descritos os passos para a construção de dominó virtual
utilizando o Flash 8. Iniciaremos pela construção
das figuras.
1º Passo:
Abra o programa Flash 8,
clique em Flash Document, com mostra a figura abaixo.
Figura 1: Criar novo documento no
Flash8.
Observação:
Se a sua
versão do Flash for posterior (CS4, CS5, etc.) a essa, faça da seguinte forma.
Abra o
seu Flash e clique em ActionScript 2.0 como mostra a
figura abaixo:
Figura 2: Criar novo documento no Flash
CS5.
As ferramentas para desenho são parecidas nas
versões do Flash (obviamente, as novas versões têm mais recursos), nós
continuaremos explicando como fazer, usando o Flash 8. Você poderá fazer da
mesma forma com as versões mais novas.
2º Passo: Salve
o arquivo como figura1.fla (o .fla é apenas a extensão do arquivo fonte, na hora
de salvar, você não precisar escrevê-lo, bastando escrever figura1).
Figura 3: Salvando documento.
Vamos começar mostrando como desenhar os dominós.
Eles terão basicamente
o seguinte formato:
Figura 4: Um dominó pronto.
Como
fazer o fundo:
a) Selecione
a ferramenta Rectangle Tool (clique no botão que aparece abaixo do botão de
Ferramenta de texto, e segure-o até aparecer o menu mostrado na figura abaixo).
Figura 5: Selecionar a ferramenta Rectangle Tool.
b) Clique
nos locais indicados pelas figuras e escolha
uma cor para o fundo, e outra para a borda respectivamente.
Figura 6: Selecionar uma cor para o
fundo.
Figura 7: Selecionar uma cor para as
linhas.
c) Faça
um retângulo com contorno do tamanho desejado. Nós usamos 225 x 85 (Largura =
225 e altura = 85).
Figura 8: Fundo desenhado.
d) Pegue
a ferramenta Line Tool e desenhe uma reta que servirá para dividir o dominó em
dois (não precisa ser no meio).
Figura 9: Selecionar ferramenta Line
Tool.
Figura 10: Adicionando uma divisória no
fundo.
e) Selecione
todo o retângulo, clique com o botão direito do mouse nele e clique em Convert
to Simbol...
Figura 11: Converter para um símbolo.
f) Selecione
a opção Graphic coloque um nome qualquer e clique em OK.
Figura 12: Colocar um nome e escolher o
tipo de símbolo.
g)
Coloque
o retângulo na posição X
= 0, Y = 0.
Figura 13: Alterar a localização do
fundo na tela.
h) Crie um novo Layer, e depois, bloqueie o
Layer1 (isso fará com que ele não possa ser editado) que contém o fundo,
clicando nos locais indicados pela figura abaixo (o cadeado deve ficar
aparecendo, como está abaixo).
|
|
Figura 14: Criar um novo Layer e
bloquear o Layer que contem o fundo.
Como
fazer o triângulo equilátero:
a) Selecione
o Layer2.
Figura 15: Selecionar o Layer que está
por cima.
b) Selecione
a Ferramenta PolyStar Tool.
Figura 16: Selecionar a ferramenta
PolyStar Tool.
c) Clique
em Options,
e escolha 3 lados.
Figura 17: Mudar número de lados do
desenho.
d) Escolha
uma cor de sua preferência, e desenhe o triângulo na tela.
Figura 18: Desenho pronto.
e) Selecione o triângulo desenhado e ajuste o
tamanho, de forma que ele caiba dentro da primeira parte do retângulo, e
arraste-o para cima do mesmo.
|
Figura 19: Ajuste de largura e altura,
com o cadeado ativo (alterar proporcionalmente).
|
Figura 20: Triângulo colocado sobre o
fundo.
f) Clique
na ferramenta de texto e depois selecione texto estático (Static text).
Figura 21: Selecionar ferramenta de
texto.
Figura 22: Escolha do tipo de caixa de
texto.
g) Crie
um campo de texto em cima da segunda parte do retângulo.
Figura 23: Escrevendo texto no dominó.
h) Deverá
ficar assim:
Figura 24: Dominó depois de desenhado.
i)
Pegue a ferramenta Selection Tool.
Figura 25: Ferramenta de seleção
padrão.
Sua
primeira figura está pronta, agora vamos explicar como salvá-la como uma
imagem.
a) Primeiro temos
que alterar o tamanho do nosso palco. O tamanho dele deverá ser o mesmo que
tamanho do fundo mais 1. No nosso caso o tamanho do fundo é 225 x 85 então o
tamanho do palco será 226 x 86. Depois de saber as dimensões que o nosso palco
deverá ter, clique em qualquer lugar do palco para largar os objetos. Então
clique no local indicado pela figura abaixo:
Figura 26: Abrir configurações da tela.
b) Coloque
as dimensões nos locais indicados e clique em OK.
Figura 27: Alterar dimensões da tela.
c)
Clique em no
menu arquivo e depois em Save para
salvar o que você fez.
d) Agora,
finalmente, vamos salvar como imagem. Para fazer isso, clique em Settings...
como mostra a figura abaixo.
Figura 28: abrir configurações de
publicação.
e) Clique
na aba Formats e deixe marcada apenas
a opção PNG Image (.png), depois clique em publish para publicar
(salvar) a imagem e clique em OK.
Figura 29: Selecionar os tipos de
arquivos para publicação.
A
primeira figura está pronta, agora faltam apenas 21 figuras...
Abra a pasta em que
você a salvou e veja o resultado.
Figura 30: pasta onde está o arquivo
foi salvo.
Vamos
fazer a segunda figura agora.
1º
passo: Vamos usar o a
figura1como modelo, então, o salvaremos com o nome figura2 clicando
em File
e depois em Save As... como mostra a figura abaixo.
Figura 31: Salvar como figura2.fla
Depois de salvo (com o
nome figura2), iremos apenas alterar a figura e o texto da peça.
A peça figura2, deverá
ter como desenho um quadrado (que é
a o equivalente ao texto escrito na figura 1) e como texto “Cubo”.
Atenção: de agora em diante será explicado
apenas como desenhar as figuras.
Como
fazer um quadrado:
a)
Veja se você
realmente salvou esse arquivo com o
nome figura2.
b)
Vamos apagar os
desenhos feitos, nesse caso apague somente o triângulo e o texto,
deixando a tela assim:
Figura 32: sua tela apenas com o fundo,
depois que você apagou os desenhos.
c)
Agora
desenharemos em o nosso Quadrado. Pegue a ferramenta Rectangle Tool.
Figura 33: Escolher a ferramenta
Rectengle Tool.
d)
Escolha as cores
e tente desenhar um quadrado. Não importa se não formar um quadrado.
Figura 34: Quadrado ou retângulo
desenhado.
e)
Selecione o
“quadrado” (não se esqueça da borda, se tiver), nas propriedades, desative o
cadeado e deixe a Largura igual à Altura. Agora sim, nosso desenho é um
quadrado.
Figura 35: Alterar dimensões do objeto.
f)
Pegue a
ferramenta de texto, selecione Static Text e crie um campo de texto com o texto
Cubo.
Figura 36: escrevendo o texto no
dominó.
g)
Clique no menu
arquivo e depois em Save para salvar
o que você fez.
h)
Pegue a ferramenta Selection Tool, clique em
qualquer lugar da tela que esteja vazio, clique em Settings... e depois, em Publish
Mais
uma figura pronta.
Vamos
fazer a terceira figura agora.
1º
passo: Nosso modelo agora é a
figura2, então, salvaremos com o nome figura3 clicando
em File
e depois em Save As... como mostra a figura abaixo.
Figura 37: Salvar arquivo com o nome
figura3.fla.
Depois de salvo (com o
nome figura3), iremos alterar a figura e o texto da peça.
A peça figura3, deverá
ter como desenho um Cubo (que é a o
equivalente ao texto escrito na figura 2) e como texto “Heptágono irregular”.
Como
fazer um cubo:
a)
Veja se você
realmente salvou esse arquivo com o nome figura3.
b)
Vamos apagar os
desenhos feitos, deixando a tela assim:
Figura 38: tela apenas com o fundo.
c)
Crie um quadrado
com borda, o transforme num Graphic descrito
na letra “e)” do item “Como fazer um triângulo”.
d)
Copie
o quadrado e cole, mova ele a um local um pouco
abaixo e ao lado do original (se você colocar muito longe ele não parecerá com
um cubo).
Figura 39: Um quadrado em cima de outro
do mesmo tamanho.
e)
Crie um novo
layer e selecione-o, como descrito na letra “h)” do item “Como criar um
triângulo”.
f)
Aumente a escala
da sua tela para 200% ou o que achar necessário.
Figura 40: Mudar a escala da tela.
g)
Pegue a
ferramenta Pen Tool.
Figura 41: selecionar a ferramenta Pen
Tool.
h)
Coloque a mesma
cor que você escolheu para as bordas do seu quadrado e clique (apenas clique, não arraste) nos 5 locais
e na ordem indicados pela figura abaixo.
Figura 42: localização dos cliques para
fechar a parte de cima do cubo.
i)
Deverá ficar
assim:
Figura 43: depois de clicar nos pontos,
deve formar essa figura.
j)
Agora, clique
nos locais indicados pela próxima figura (você ainda deve estar com a
ferramenta Pen Tool).
Figura 44: pontos em que se deve clicar
para terminar o cubo.
k)
Troque a escala
da tela para 100% e o desenho deverá ficar assim:
Figura 45: cubo pronto.
l)
Selecione tudo e
transforme num Graphic (não queremos
correr o risco de ele deformar quando formos movê-lo). Como transformar em
Graphic está descrito na letra “e)”
do item como fazer um fundo (não importa o nome que você colocar).
m)
Mova-o para cima
do fundo e redimensione de forma que ele caiba no fundo.
Figura 46: cubo colocado no lugar.
n)
No lado do
texto, crie um campo de texto estático e escreva Heptágono irregular.
Figura 47: dominó pronto.
o)
Clique em
arquivo e depois em Save para salvar
o que você fez.
p)
Vá em Settings...,
clique em Publish e depois em OK .
Mais
uma figura pronta.
Vamos
fazer a quarta figura agora.
1º
passo: Nosso modelo agora é a
figura3, então, salvaremos com o nome figura4 clicando
em File
e depois em Save As... como mostra a figura abaixo.
Figura 48: salvar figura com o nome
figura4.fla.
Depois de salvo (com o
nome figura4), iremos alterar a figura e o texto da peça.
A peça figura4, deverá
ter como desenho um Heptágono irregular
(que é a o equivalente ao texto escrito na figura 3) e como texto “Losango”.
Como
fazer um Heptágono irregular:
a)
Veja se você
realmente salvou esse arquivo com o nome figura4.
b)
Vamos apagar os
desenhos feitos.
Figura 49: tela limpa.
c)
Pegue a
ferramenta Pen Tool.
Figura 50: selecionar a ferramenta Pen
Tool.
d)
Crie um figura
com 7 lados (pelo menos um dos lados tem que ter tamanho diferente dos outros).
e)
Você escolhe o
formato da figura, desde que fique fácil de contar os lados. Veja um exemplo:
Figura 51: desenhar uma figura com 7
lados.
f)
Escreva o texto “Losango”.
Figura 52: dominó pronto.
g)
Clique em arquivo
e depois em Save para salvar o que
você fez.
h)
Vá em Settings...,
clique em Publish e depois em OK .
Mais
uma figura pronta.
Vamos
fazer a quinta figura agora.
1º
passo: Nosso modelo agora é a
figura4, então, salvaremos com o nome figura5 clicando
em File
e depois em Save As... como mostra a figura abaixo.
Figura 53: salvar como figura5.fla
Depois de salvo (com o
nome figura5), iremos alterar a figura e o texto da peça.
A peça figura5, deverá
ter como desenho um Losango (que é a
o equivalente ao texto escrito na figura 4) e como texto “Pentágono regular”.
Como
fazer um Losango:
a)
Veja se você
realmente salvou esse arquivo com o nome figura5.
b)
Vamos apagar os
desenhos feitos.
Figura 54: tela limpa.
c)
Pegue a
ferramenta Rectangle Tool, e desenhe um quadrado.
Figura 55: pegar a ferramenta Rectangle
Tool.
d)
Selecione o
quadrado, clique no menu Modify, vá até Transform e clique em Scale
and Rotate.
Figura 56: girar e mudar a escala.
e)
No campo
referente a rotação do quadrado, coloque o valor 45.
Figura 57: girar 45 graus.
f)
Deverá ficar
assim:
Figura 58: losango pronto.
g)
Coloque-o no
lugar, altere o tamanho (com o cadeado ativo) para que caiba dentro do fundo da
peça.
Figura 59: losango colocado no lugar.
h)
Coloque o texto Pentágono regular.
Figura 60: dominó pronto.
i)
Clique em
arquivo e depois em Save para salvar
o que você fez.
j)
Vá em Settings...,
clique em Publish e depois em OK .
Mais
uma figura pronta.
Vamos
fazer a sexta figura agora.
1º
passo: Nosso modelo agora é a
figura5, então, salvaremos com o nome figura6 clicando
em File
e depois em Save As... como mostra a figura abaixo.
Figura 61: salvar como figura6.fla.
Depois de salvo (com o
nome figura6), iremos alterar a figura e o texto da peça.
A peça figura6, deverá
ter como desenho um Pentágono regular
(que é a o equivalente ao texto escrito na figura 5) e como texto “Triângulo isósceles”.
Como fazer um Pentágono regular:
a)
Veja se você
realmente salvou esse arquivo com o nome figura6.
b)
Vamos apagar os
desenhos feitos.
Figura 62: tela sem os desenhos.
c)
Pegue a
ferramenta PolyStar Tool.
Figura 63: selecionar a ferramenta
Polystar Tool.
d)
Clique em
Options, escolha 5 em número de lados e clique em OK.
Figura 64: altera o número de lados do
polígono.
e)
Desenhe-o, coloque
no lugar certo e escreva o texto “Triângulo isósceles”.
Figura 65: dominó pronto.
f)
Clique em
arquivo e depois em Save para salvar
o que você fez.
g)
Vá em Settings...,
clique em Publish e depois em OK .
Mais
uma figura pronta.
Vamos
fazer a sétima figura agora.
1º
passo: Nosso modelo agora é a
figura6, então, salvaremos com o nome figura7 clicando
em File
e depois em Save As... como mostra a figura abaixo.
Figura 66: salvar com o nome figura 7.fla
Depois de salvo (com o
nome figura7), iremos alterar a figura e o texto da peça.
A peça figura7, deverá
ter como desenho um Triângulo isósceles
(que é o desenho equivalente ao texto escrito na figura 6) e como texto “Hexágono
irregular”.
Como
fazer um Triângulo isósceles:
a)
Veja se você
realmente salvou esse arquivo com o nome figura7.
b)
Vamos apagar os
desenhos feitos.
Figura 67: limpar a tela.
c)
Pegue a
ferramenta PolyStar Tool.
Figura 68: selecionar a ferramenta
Rectangle tool.
d)
Desenhe um Retângulo.
Figura 69: um retângulo.
e)
Pegue a
ferramenta Subselection Tool.
Figura 70: ferramenta Subselection Tool
(deformador).
f)
Clique em cima
da borda do retângulo, ele ficará com quatro pontos de deformação.
Figura 71: retângulo selecionado pela
ferramenta Subselection Tool.
g)
Clique em um dos
pontos da parte de cima e mova-o até centro
da reta, não é difícil mover até o centro, pois quando você chega perto, ele
“dá um pulo até lá”. O desenho deverá ficar assim:
Figura 72: ponto direito movido para o
centro.
h)
Clique no outro
ponto da parte de cima e aperte a tecla Delete do seu teclado ou se preferir, arraste-o até o centro
como foi feito com o outro ponto.
Figura 73: ponto esquerdo foi excluído,
formou um triângulo isósceles.
i)
Pegue de volta a
nossa ferramenta de seleção padrão.
Figura 74: Selecionara ferramenta de
seleção padrão.
j)
Coloque o triângulo no seu devido lugar e
escreva o texto “Hexágono irregular”.
Figura 75: dominó pronto.
k)
Clique em
arquivo e depois em Save para salvar
o que você fez.
l)
Vá em Settings...,
clique em Publish e depois em OK .
Mais
uma figura pronta.
Vamos
fazer a oitava figura agora.
1º
passo: Nosso modelo agora é a
figura7, então, salvaremos com o nome figura8 clicando
em File
e depois em Save As... como mostra a figura abaixo.
Figura 76: salvar como figura8.fla
Depois de salvo (com o
nome figura8), iremos alterar a figura e o texto da peça.
A peça figura8, deverá
ter como desenho um Hexágono irregular
(que é o desenho equivalente ao texto escrito na figura 7) e como texto “Esfera”.
Como
fazer um Hexágono irregular:
a)
Veja se você
realmente salvou esse arquivo com o nome figura8.
b)
Vamos apagar os
desenhos feitos.
Figura 77: tela sem desenhos.
c)
Pegue a
ferramenta Pen Tool.
Figura 78: selecionar a ferramenta Pen
Tool.
d)
Desenhe
livremente uma figura com 6 lados.
Figura 79: hexágono irregular
desenhado.
e)
Coloque o
Hexágono irregular no seu devido lugar e escreva o texto “Esfera”.
Figura 80: dominó pronto.
f)
Clique em
arquivo e depois em Save para salvar
o que você fez.
g)
Vá em Settings...,
clique em Publish e depois em OK .
Mais
uma figura pronta.
Vamos
fazer a nona figura agora.
1º
passo: Nosso modelo agora é a
figura8, então, salvaremos com o nome figura9 clicando
em File
e depois em Save As... como mostra a figura abaixo.
Figura 81: salvar como figura10.fla
Depois de salvo (com o
nome figura9), iremos alterar a figura e o texto da peça.
A peça figura9, deverá
ter como desenho uma Esfera (que é o
desenho equivalente ao texto escrito na figura 8) e como texto “Heptágono
regular”.
Como fazer uma Esfera:
a)
Veja se você
realmente salvou esse arquivo com o nome figura9.
b)
Vamos apagar os
desenhos feitos.
Figura 82: tela limpa.
c)
Pegue a
ferramenta Oval Tool.
Figura 83: ferramenta Oval Tool
selecionada.
d)
Desenhe um
circulo.
Figura 84: Círculo.
e)
Selecione-o e
altere a cor do fundo dele para uma das seguintes cores:
Figura 85: seleção de cores.
f)
Seu circulo
agora com efeito de cor, parecerá uma esfera J.
Figura 86: círculo com uma disposição
de cores (parece uma esfera).
g)
Coloque a Esfera
no seu devido lugar e escreva o texto “Heptágono regular”.
Figura 87: dominó pronto.
h)
Clique em
arquivo e depois em Save para salvar
o que você fez.
i)
Vá em Settings...,
clique em Publish e depois em OK .
Mais
uma figura pronta.
Vamos
fazer a décima figura agora.
1º
passo: Nosso modelo agora é a
figura9, então, salvaremos com o nome figura10 clicando
em File
e depois em Save As... como mostra a figura abaixo.
Figura 88: salvar como figura10.fla
Depois de salvo (com o
nome figura10), iremos alterar a figura e o texto da peça.
A peça figura10, deverá
ter como desenho um Heptágono regular
(que é o desenho equivalente ao texto escrito na figura 9) e como texto “Cilindro”.
Como
fazer um Heptágono regular:
a)
Veja se você
realmente salvou esse arquivo com o nome figura10.
b)
Vamos apagar os
desenhos feitos.
Figura 89: tela limpa.
c)
Pegue a
ferramenta PolyStar Tool.
Figura 90: ferramenta PolyStar Tool.
d)
Clique em
Options, escolha 7 em número de
lados e clique em OK. Como está descrito na letra “d)” do Item “Como fazer um
Pentágono regular”.
e)
Desenhe-o,
coloque-o no devido local e escreva o texto “Cilindro”.
Figura 91: dominó pronto.
f)
Clique em
arquivo e depois em Save para salvar
o que você fez.
g)
Vá em Settings...,
clique em Publish e depois em OK .
Mais
uma figura pronta.
Vamos
fazer a décima primeira figura agora.
1º
passo: Nosso modelo agora é a
figura10, então, salvaremos com o nome figura11 clicando
em File
e depois em Save As... (como mostram todas as figuras anteriores).
Depois de salvo (com o
nome figura11), iremos alterar a figura e o texto da peça.
A peça figura11, deverá
ter como desenho um Cilindro (que é
o desenho equivalente ao texto escrito na figura 10) e como texto “Triângulo
escaleno”.
Como
fazer um Cilindro:
a)
Veja se você
realmente salvou esse arquivo com o nome figura11.
b)
Vamos apagar os
desenhos feitos (não precisa mais da figura).
c)
Desenhe um
retângulo (faça ele grande para ficar melhor de mexer).
Figura 92: retângulo desenhado.
d)
Pegue a
ferramenta Oval Tool.
Figura 93: ferramenta Oval Tool
selecionada.
e)
Desenhe uma
elipse dentro do retângulo de forma com que as duas extremidades fiquem sobre
as retas do triângulo. Como mostra a figura abaixo.
Figura 94: elipse desenhada dentro do
retângulo.
f)
Pegue a
ferramenta de seleção.
Figura 95: pegar a ferramenta de
seleção padrão.
g)
Selecione as
linhas da elipse pressione a tecla Shift do seu teclado e clicando nelas.
Figura 96: selecionar as bordas do
círculo.
h)
Copie e cole no
mesmo local usando o atalho Ctrl+Shift +V ou clicando com o
botão direito do mouse em qualquer lugar da tela e depois clicando em Paste in Place.
Figura 97: colar exatamente no mesmo
lugar.
i)
Não clique em
mais nada, esqueça o mouse, apenas use a seta “Para baixo” do seu teclado para
mover a elipse para baixo sem alterar o X (se quiser mover mais rápido, use Shift + “seta para baixo”).
j)
Mova ela até
onde desejar, desde que fique dentro do retângulo.
Figura 98: elipse movida em linha reta
para baixo.
k)
Agora temos que
apagar os restos. Para fazer isso, basta clicar no que você quer apagar e
apertar a tecla Delete.
Figura 99: cilindro depois dos restos
serem apagados.
l)
Depois de apagar
os restos, ajuste o tamanho, coloque-o no seu devido lugar e escreva o texto “Triângulo
escaleno”.
Figura 100: dominó pronto.
m)
Clique em
arquivo e depois em Save para salvar
o que você fez.
n)
Vá em Settings...,
clique em Publish e depois em OK .
Mais
uma figura pronta.
Vamos
fazer a décima segunda figura agora.
1º
passo: Nosso modelo agora é a
figura11, então, salvaremos com o nome figura12 clicando
em File
e depois em Save As... como descrito nos passos anteriores.
Depois de salvo (com o
nome figura12), iremos alterar a figura e o texto da peça.
A peça figura12, deverá
ter como desenho um Triângulo escaleno
(que é o desenho equivalente ao texto escrito na figura 11) e como texto “Circulo”.
Como
fazer um Triângulo escaleno:
a)
Veja se você
realmente salvou esse arquivo com o nome figura12.
b)
Vamos apagar os
desenhos feitos.
c)
Pegue a ferramenta
Pen Tool.
d)
Desenhe um
triângulo escaleno. É só clicar em três pontos diferentes, cuide para não
formar outro tipo de triângulo.
Figura 101: triângulo escaleno
desenhado.
e)
Arraste ele para
a peça e escreva o texto “Circulo”.
Figura 102: dominó pronto.
f)
Clique em
arquivo e depois em Save para salvar
o que você fez.
g)
Vá em Settings...,
clique em Publish e depois em OK .
Mais
uma figura pronta.
Vamos
fazer a décima terceira figura agora.
1º
passo: Nosso modelo agora é a
figura12, então, salvaremos com o nome figura13 clicando
em File
e depois em Save As... como descrito nos passos anteriores.
Depois de salvo (com o
nome figura13), iremos alterar a figura e o texto da peça.
A peça figura13, deverá
ter como desenho um Círculo (que é o
desenho equivalente ao texto escrito na figura 12) e como texto “Hexágono
regular”.
Como
fazer um Círculo:
a)
Veja se você
realmente salvou esse arquivo com o nome figura13.
b)
Vamos apagar os
desenhos feitos.
c)
Essa é uma das
figuras mais difíceis de fazer. Basta pegar a ferramenta Oval Tool e desenhar.
Cuide para não colocar uma daquelas cores pré-definidas, pois seu circulo pode
virar uma esfera.
Figura 103: círculo desenhado.
d)
Arraste ele para
a peça e escreva o texto “Hexágono regular”.
Figura 104: dominó pronto.
e)
Clique em
arquivo e depois em Save para salvar
o que você fez.
f)
Vá em Settings...,
clique em Publish e depois em OK .
Mais
uma figura pronta.
Vamos
fazer a décima quarta figura agora.
1º
passo: Nosso modelo agora é a
figura13, então, salvaremos com o nome figura14 clicando
em File
e depois em Save As... como descrito nos passos anteriores.
Depois de salvo (com o
nome figura14), iremos alterar a figura e o texto da peça.
A peça figura14, deverá
ter como desenho um Hexágono regular
(que é o desenho equivalente ao texto escrito na figura 13) e como texto “Trapézio”.
Como
fazer um Hexágono regular:
a)
Veja se você
realmente salvou esse arquivo com o nome figura14.
b)
Vamos apagar os desenhos
feitos.
h)
Pegue a
ferramenta PolyStar Tool, clique em Options,
escolha 6 em número de lados e
clique em OK. Como está descrito na letra “d)”
do Item “Como fazer um Pentágono
regular”.
c)
Desenhe o
hexágono.
Figura 105: hexágono regular desenhado.
d)
Coloque-o no seu
lugar e escreva o texto “Trapézio”.
Figura 106: dominó ponto.
e)
Clique em
arquivo e depois em Save para salvar
o que você fez.
f)
Vá em Settings...,
clique em Publish e depois em OK .
Mais
uma figura pronta.
Vamos
fazer a décima quinta figura agora.
1º
passo: Nosso modelo agora é a
figura14, então, salvaremos com o nome figura15 clicando
em File
e depois em Save As... como descrito nos passos anteriores.
Depois de salvo (com o
nome figura15), iremos alterar a figura e o texto da peça.
A peça figura15, deverá
ter como desenho um Trapézio (que é
o desenho equivalente ao texto escrito na figura 14) e como texto “Triângulo
retângulo”.
Como
fazer um Trapézio:
a)
Veja se você
realmente salvou esse arquivo com o nome figura15.
b)
Vamos apagar os
desenhos feitos.
c)
Pegue a
ferramenta Rectangle Tool.
d)
Desenhe um
retângulo.
Figura 107:retângulo desenhado.
e)
Pegue a
ferramenta Subselection Tool.
Figura 108: ferramenta Subselection Tool
selecionada.
f)
Clique na borda
do retângulo, então aparecerá quatro pontos no retângulo.
Figura 109: retângulo selecionado.
g)
Clique num dos
pontos superiores e arraste-o em linha reta para dentro do desenho.
Figura 110: ponto direito movido um
pouco para a esquerda.
h)
Isso já é um
trapézio, mas vamos mexer mais um pouco. Clique no outro ponto superior e faça
o mesmo, não precisa ser a mesma distância.
Figura 111: ponto esquerdo movido um
pouco para a direita.
i)
Pegue a
ferramenta de seleção normal, arraste-o para o seu lugar e coloque o texto
“Triângulo retângulo”.
Figura 112: dominó pronto.
j)
Clique em
arquivo e depois em Save para salvar
o que você fez.
k)
Vá em Settings...,
clique em Publish e depois em OK .
Mais
uma figura pronta.
Vamos
fazer a décima sexta figura agora.
1º
passo: Nosso modelo agora é a
figura15, então, salvaremos com o nome figura16 clicando
em File
e depois em Save As... como descrito nos passos anteriores.
Depois de salvo (com o
nome figura16), iremos alterar a figura e o texto da peça.
A peça figura16, deverá
ter como desenho um Triângulo retângulo
(que é o desenho equivalente ao texto escrito na figura 15) e como texto
“Octógono regular”.
Como
fazer um Triângulo retângulo:
a)
Veja se você
realmente salvou esse arquivo com o nome figura16.
b)
Vamos apagar os
desenhos feitos.
c)
Pegue a
ferramenta Rectangle Tool e desenhe
um retângulo.
Figura 113: retângulo desenhado.
d)
Pegue a
ferramenta Sunselection Tool e
clique na borda do retângulo.
Figura 114: retângulo selecionado pela
Subselection Tool.
e)
Clique em
qualquer uma das bordas e aperte Delete. Sua figura deverá ficar assim (pronta):
Figura 115: ponto esquerdo excluído.
f)
Coloque o
triângulo retângulo no seu devido lugar e escreva o texto “Octógono regular”.
Figura 116: dominó pronto.
g)
Clique em
arquivo e depois em Save para salvar
o que você fez.
h)
Vá em Settings...,
clique em Publish e depois em OK .
Mais
uma figura pronta.
Vamos
fazer a décima sétima figura agora.
1º
passo: Nosso modelo agora é a
figura16, então, salvaremos com o nome figura17 clicando
em File
e depois em Save As... como descrito nos passos anteriores.
Depois de salvo (com o
nome figura17), iremos alterar a figura e o texto da peça.
A peça figura17, deverá
ter como desenho um Octógono regular
(que é o desenho equivalente ao texto escrito na figura 16) e como texto “Retângulo”.
Como
fazer um Octógono regular:
a)
Veja se você
realmente salvou esse arquivo com o nome figura17.
b)
Vamos apagar os
desenhos feitos.
c)
Pegue a
ferramenta PolyStar Tool, clique em Options,
escolha 8 em número de lados e
clique em OK. Como está descrito na letra “d)”
do Item “Como fazer um Pentágono
regular”.
d)
Desenhe o
Octógono regular, coloque-o no seu lugar e escreva o texto “Retângulo”.
Figura 117: dominó pronto.
e)
Clique em
arquivo e depois em Save para salvar
o que você fez.
f)
Vá em Settings...,
clique em Publish e depois em OK .
Mais
uma figura pronta.
Vamos
fazer a décima oitava figura agora.
1º
passo: Nosso modelo agora é a
figura17, então, salvaremos com o nome figura18 clicando
em File
e depois em Save As... como descrito nos passos anteriores.
Depois de salvo (com o
nome figura18), iremos alterar a figura e o texto da peça.
A peça figura18, deverá
ter como desenho um Retângulo (que é
o desenho equivalente ao texto escrito na figura 17) e como texto “Pentágono
irregular”.
Como
fazer um Retângulo:
a)
Veja se você
realmente salvou esse arquivo com o nome figura18.
b)
Vamos apagar os
desenhos feitos.
c)
Pegue a
ferramenta Rectangle Tool, desenhe o
retângulo, arraste-o para seu devido lugar e escreva o texto “Pentágono
irregular”.
Figura 118: dominó pronto.
d)
Clique em
arquivo e depois em Save para salvar
o que você fez.
e)
Vá em Settings...,
clique em Publish e depois em OK .
Mais
uma figura pronta.
Vamos
fazer a décima nona figura agora.
1º
passo: Nosso modelo agora é a
figura18, então, salvaremos com o nome figura19 clicando
em File
e depois em Save As... como descrito nos passos anteriores.
Depois de salvo (com o
nome figura19), iremos alterar a figura e o texto da peça.
A peça figura19, deverá
ter como desenho um Pentágono irregular (que
é o desenho equivalente ao texto escrito na figura 18) e como texto “Estrela de
5 pontas”.
Como
fazer um Pentágono irregular:
a)
Veja se você
realmente salvou esse arquivo com o nome figura19.
b)
Vamos apagar os
desenhos feitos.
c)
Pegue a
ferramenta Pen Tool e desenhe uma figura com 5 lados.
Figura 119: figura com 5 lados.
d)
Arraste ela até
o lugar dela e escreva o texto “Estrela de 5 pontas”;
Figura 120: dominó pronto.
f)
Clique em arquivo
e depois em Save para salvar o que
você fez.
g)
Vá em Settings...,
clique em Publish e depois em OK .
Mais
uma figura pronta.
Vamos
fazer a vigésima figura agora.
1º
passo: Nosso modelo agora é a
figura19, então, salvaremos com o nome figura20 clicando
em File
e depois em Save As... como descrito nos passos anteriores.
Depois de salvo (com o
nome figura20), iremos alterar a figura e o texto da peça.
A peça figura20, deverá
ter como desenho uma Estrela de 5 pontas
(que é o desenho equivalente ao texto escrito na figura 18) e como texto
“Triângulo eqüilátero”.
Como fazer uma Estrela de 5 pontas:
a)
Veja se você
realmente salvou esse arquivo com o nome figura20.
b)
Vamos apagar os
desenhos feitos.
c)
Pegue a
ferramenta PolyStar Tool.
d)
Clique em
Options, e escolha Star como estilo e 5 como número de lados.
Figura 121: alterando o número de lados
e o estilo de polígono.
e)
Agora é só
desenhar a estrela.
Figura 122: estrela desenhada.
f)
Arraste-a para o
seu lugar e coloque o texto “Triângulo eqüilátero”.
Figura 123: dominó pronto.
g)
Triângulo
Equilátero é o nome da primeira figura, seu dominó está pronto. Falta só fazer
a peça que esconde as outras. Mas antes...
h)
Clique em
arquivo e depois em Save para salvar
o que você fez.
i)
Vá em Settings...,
clique em Publish e depois em OK .
Ultima
figura do dominó pronta.
Vamos
fazer a “esconde tudo” agora.
1º
passo: Nosso modelo agora é a
figura20, então, salvaremos com o nome figura21 clicando
em File
e depois em Save As... como descrito nos passos anteriores.
A peça 21 é livre, faça
como bem entender, mas deve ter o mesmo tamanho das outras.
a)
Depois de
fazer-la, clique em arquivo e depois
em Save para salvar o que você fez.
b)
Vá em Settings...,
clique em Publish e depois em OK .
Todas as figuras do estão prontas, abra sua pasta
para ver como está.
|
Figura 124: pasta com as figuras e os arquivos
fonte.
|
Importante: Em
alguns computadores, as extensões dos arquivos não são mostradas, aparecendo na
tela, por exemplo, figura1, como mostra a figura abaixo.
Figura 125: arquivos com a extensão
oculta.
Não é preciso que as extensões dos arquivos apareçam,
se você quiser, pode pular esse passo, mas ensinarei como fazer...
1-
Abra uma pasta
qualquer, clique em Ferramentas, e em Opções de pasta.
Figura 126: abrindo opções de pasta.
2-
Clique em Modo de exibição procure
por “Ocultar as extensões dos tipos de arquivos
conhecidos” e desmarque-a, clique em Ok e pronto.
Figura 127: mostrando a extensão de
todos os arquivos.
ATENÇÃO:
De agora em diante você deve ter cuidado ao alterar os nomes dos seus arquivos,
pois você pode sem querer apagar a extensão. Quando for alterar o nome,
substitua apenas o que vem antes do ponto.
Figura 128: se for trocar o nome
qualquer arquivo do computador, não altere a
extensão.
Voltando ao objeto
Crie
outra pasta e copie somente as imagens para lá.
Para melhor
entendimento, nós criamos as imagens em ordem (a primeira fecha com a segunda
que fecha com a terceira...), mas você
pode criar aleatoriamente ou trocar o nome delas para que elas não apareçam
em ordem no objeto. Lembre-se, que as imagens devem ser nomeadas de figura1 a
figura21, porém não importa a ordem
de nomeação.
Objeto
Principal
Já temos as imagens do
nosso dominó, falta apenas o objeto que vai ser o dominó em si.
Ele terá as seguintes
funções:
1-
Carregar as
imagens que estão na mesma pasta que ele. Suporta arquivos dos tipos: png, jpg,
gif, bmp.
2-
Fazer com que as
imagens sejam arrastáveis.
3-
Girar 90º as
imagens quando elas são apenas clicadas.
Começando:
1-
Crie um novo
documento (se você usa Flash CS4 ou superior, deve escolher ActionScript
2.0 como descrito no inicio desta apostila).
2-
Salve ele com o
nome Domino.
3-
Copie as figuras
para a mesma pasta em que você salvou o esse arquivo.
Construção:
Passo 1: Altere o tamanho da tela para 800 x 600.
Passo 2: Teremos uma
pequena ajuda, então vamos fazer o botão que chama ela.
a)
Crie um campo de
texto estático e escreva um ponto de interrogação: ?
b)
Altere o tamanho
dele para o tamanho que você quiser.
c)
Selecione o
texto, clique com o botão direito do mouse em cima dele, e clique em Break
Apart.
Figura 129: transformando o texto em
imagem.
d)
Agora isso é uma
imagem, coloque a cor de sua.
e)
Clique com o
botão direito do mouse, e clique em Convert to Symbol.
Figura 130: converter para símbolo.
f)
Coloque o nome como “ajuda”, escolha Movie Clip e clique em OK.
Figura 131: colocar um nome.
g)
O Clip que chama
a ajuda está pronto.
Passo 3: Agora vamos fazer a ajuda.
a)
Desenhe um fundo
para a ajuda (eu fiz um retângulo) da cor que quiser.
b)
Crie um campo de
texto estático e faça com que ele fique da seguinte forma:
Figura 132: texto com a ajuda e com uma
imagem de fundo.
c)
Selecione tudo,
clique com o botão direito do mouse e clique em Convert to Symbol.
Figura 133: converter para símbolo.
d)
Coloque como
nome texto_ajuda, escolha a opção MovieClip
e clique em Advanced.
Figura 134: acessando opções avançadas.
e)
Isso irá expandir a caixa, mostrando mais
algumas opções. Nessas opções, marque as caixas de seleção Export for ActionScript e Export
in first frame e no campo identifier
escreva como nome texto_ajuda. Como
mostra a figura abaixo.
Figura 135: exportando da biblioteca
para o Action Script.
f)
Depois de clicar
em OK, delete o clipe da tela, ele ficara apenas na biblioteca. Cuidado para
não apagar o seu conteúdo.
g)
A ajuda está
pronta
.
Passo
4: Agora colocaremos os Códigos no nosso objeto. Você só precisa copiar e colar nos locais indicados. Todos
os códigos têm comentários, caso você queira saber o que faz cada linha.
Código
que fica no botão “ajuda”
//Evento: Quando o mouse "entra" no clip
on(rollOver){
/*Cria um MovieClip vazio com nome "hlp" e com a
próxima profundidade disponível.*/
_root.createEmptyMovieClip("hlp", _root.getNextHighestDepth());
/*Inseri no hlp, o MovieClip da ajuda que está na biblioteca.*/
_root.hlp.attachMovie("texto_ajuda","help",_root.getNextHighestDepth());
/*Posisão X do hlp = posição X do clipe
que o chama menos a largura do hlp*/
_root.hlp._x=this._x-_root.hlp._width;
//Posisão Y do hlp = posição Y do clip
que o chama
_root.hlp._y=this._y;
}
//Evento: Quando o mouse "sai" do clip
on(rollOut){
//Apaga o hlp
(some ajuda)
_root.hlp.removeMovieClip();
}
Código
que fica no Frame principal
// cria um objeto (um objeto pode armazenar qualquer coisa)
var obj:Object = new Object();
//cria um vetor contendo as possiveis extensões das imagens
var
extensao:Array = new
Array(".PNG",".png", ".JPG",
".jpg", ".BMP",
".bmp", ".GIF",
".gif");
/*Para adicionar mais extensões coloque ,".outraExtensão"
Exemplo:
,".JPEG", ".jpeg" */
//cria uma string (armazena texto) contendo a extensão padrão a ser
testada
var
extensaoTeste:String =extensao[0];
//Cria um numeral contendo o número da peça a ser carregada
var
numeroDaPeca:Number = 1;
//cria um numeral contendo o número de tentativas com extensões
var
tentativa:Number = 0;
//cria um numeral vazio
var
initX:Number;
//cria um numeral vazio
var
initY:Number;
//cria uma função com nome de recursor
function
recusor() {
//cria um
MovieClip vazio onde coloca-se (nomeDomovieClip, profundidade)
this.createEmptyMovieClip(String("m"+numeroDaPeca),
this.getNextHighestDepth());
//cria uma
variável tipo carregadora
var
compra:MovieClipLoader = new MovieClipLoader();
//manda carregar
(nomeDoArquivo, dentro de qual MovieClip)
compra.loadClip("figura"+numeroDaPeca+extensaoTeste,
String("m"+numeroDaPeca));
//atribui ao X
da peça carregada o valor (5 * numero dela)
eval("m"+numeroDaPeca)._x = 5*numeroDaPeca;
//adiciona ao
carregador um ouvinte (obj)
compra.addListener(obj);
//quando o obj
(ouvinte) detecta um erro
obj.onLoadError
= function() {
//se o
vetor suporta fazer mais tentativas (não foram testadas todas as extensões)
if
(tentativa<=extensao.length) {
//troca a extensão padrão para a próxima
do vetor
extensaoTeste =
extensao[tentativa];
//soma
1 a variável tentativa
tentativa++;
//executa a
função recursor (está função) novamente
recusor();
}
};
//quando o obj
(ouvinte) detecta uma peça carregada
obj.onLoadComplete = function()
{
//atribui
mais 1 ao número da peça
numeroDaPeca++;
//se o
numero da peça for menor ou igual a 21
if
(numeroDaPeca<=21) {
//Zera a variável tentativa, assim ela procura todas as
extensões novamente
tentativa=0;
//executa
a função recursor (está função) novamente
recusor();
}
else{
//executa
a função adicionaOuvinte (já terminou de carregar)
adicionaOuvinte();
}
};
}
//cria uma função com nome de adicionaOuvinte
function
adicionaOuvinte() {
//adiciona um
ouvinte (obj) ao Mouse
Mouse.addListener(obj);
//Quando o obj
(ouvinte) detecta que o mouse foi pressionado
obj.onMouseDown
= function() {
//faz uma repetição de 0 a 21 amdamdo de
1 em 1
for
(numeroDaPeca=0; numeroDaPeca<21; numeroDaPeca += 1) {
//se
a peça esta no mesmo X e Y do mouse
if (eval("m"+numeroDaPeca).hitTest(_xmouse, _ymouse)) {
//ativa o
arrastamento para a referida peça
eval("m"+numeroDaPeca).startDrag();
//guarda o valor inicial do x da peça
initX = eval("m"+numeroDaPeca)._x;
//guarda o valor inicial do y da peça
initY = eval("m"+numeroDaPeca)._y;
}
}
};
//Quando o obj
(ouvinte) detecta que o mouse foi "largado"
obj.onMouseUp
= function() {
//faz uma
repetição de 0 a 21 andando de 1 em 1
for
(var i = 0; i<21; i += 1) {
//se
a peça esta no mesmo lugar que estava antes (initX e init Y)
if (Math.abs(eval("m"+i)._x-initX)<2 and Math.abs(eval("m"+i)._y-initY)<2)
{
//gira a peça
eval("m"+i)._rotation += 90;
}
//para
de arrastar
eval("m"+i).stopDrag();
}
};
}
//começa tudo executando pela primeira vez a função recursor.
recusor();
Agora é só salvar e executar com um Ctrl
+ Enter.
E pronto!
Nenhum comentário:
Postar um comentário