UNIVERSIDADE REGIONAL DO NOROESTE DO ESTADO DO RIO GRANDE
DO SUL
DEPARTAMENTO DE FÍSICA, ESTATÍSTICA E MATEMÁTICA
ELABORAÇÃO DE MATERIAL DIDÁTICO VIRTUAL INTERATIVO COM
FLASH PARA O ENSINO DE MATEMÁTICA NA EDUCAÇÃO BÁSICA – SUBSTITUIÇÃO
DE CARACTERES
Tarcisio Monegat de
Almeida
Tânia Michel Pereira
Juliane Sbaraine
Pereira Costa
Ijuí, fevereiro de 2011
Nessa
apostila será mostrado um exemplo de um objeto onde é necessário efetuar a
substituição de caracteres. Nesse exemplo específico é feita a substituição do
“ponto” pela “vírgula” e vice-versa. Porém é possível substituir qualquer
caractere ou eliminar espaços
O que será implementado?
O programa a ser implementado deverá
apresentar um problema que informa o preço unitário de uma mercadoria e a
quantidade considerada. O aluno terá que obter o valor total da mercadoria. O
problema deverá possibilitar que o aluno resolva problemas similares com novos
valores.
Para
atender as necessidades acima, o preço unitário e a quantidade devem ser
gerados pelo programa através de números aleatórios.
Figura
1: Tela do exemplo substituicao.swf
Passos
para implementação do objeto:
Figura 2: Tela
inicial do Flash.
Passo1: Abra o programa e
escolha a opção ActionScript 2.0.
* Se não aparecer essa tela, pressione ctrl+N, e na caixa que abrir escolha ActionScript 2.0.
Passo2: Depois de aberto o programa Flash, salve-o pela
primeira vez para facilitar o trabalho de salvamentos futuros. Veja como fazer
isto na figura abaixo.
Figura 3: Como
salvar
Passo 3: Siga os passos mostrados na figura 4,
para criar um Keyframe:
Figura 4: Criando
um Keyfreme em branco.
1)
Clique com o botão direito do mouse em cima do primeiro
frame (uma bolinha branca) que está na linha do tempo.
Figura 4.1: Linha do tempo antes
de criar o Keyframe
2)
Selecione a opção Insert Blank Keyframe, isso irá inserir
uma nova “tela” em branco no seu objeto.
Figura
4.2: Linha do tempo depois de criado o novo Keyframe
Passo 4: Siga os passos mostrados na figura 5,
para criar dois campos de texto dinâmico no segundo frame (este frame é
o que nós criamos antes).
Figura 5: Criando
campos de texto dinâmico (onde o computador irá escrever).
1)
Clique no segundo
frame que aparece na linha do tempo.
Figura 5.1: Depois
que você clicou no segundo frame.
2)
Clique na
ferramenta de caixa de texto (é em forma de T).
Figura 5.2:
Ferramenta de texto selecionada.
3)
Escolha a opção Dynamic text.
Figura 5.3: Selecionando a propriedade
Dynamic text.
4)
Selecione a opção Multiline, no local indicado na figura 3.
Figura 5.4:
Selecionando a propriedade Multiline.
5)
Desenhe as duas
caixas de texto.
Obs: O tamanho, a cor e o
tipo da fonte ficam ao seu critério.
Passo
5: Agora
que já temos nossos dois campos de texto dinâmico, vamos nomear as variáveis
deles (ver figura 6).
Figura 6:
Declarando as variáveis para os campos de texto.
1)
Clique na ferramenta de seleção (uma seta
preta).
Figura 6.1:
Ferramenta de seleção selecionada.
2)
Clique no primeiro campo de texto, ele deve
ficar com uma borda azul (isso significa que ele foi selecionado, ver figura 6).
3)
Dê um nome a variável, pode ser qualquer
nome (desde que comece com uma letra e não tenha caracteres especiais), nós
nomeamos como problema.
Figura 6.2:
Declarando uma variável para a primeira caixa de texto.
4)
Faça o mesmo com o segundo campo de texto,
mas não com o mesmo nome da variável anterior. Nós usaremos corrige
como nome para essa variável.
Figura 6.3:
Declarando uma variável para a segunda caixa de texto.
Se
você colocar outro nome para as variáveis, terá que mudar o nome delas no
código também.
Passo 6: Agora vamos inserir um campo de texto estático para
informar onde deverá ser digitada a resposta (ver figura 7).
Figura 7: Criando
campo de texto estático (o computador não pode alterá-lo).
1)
Clique na
ferramenta de texto (simbolizada pela letra T).
Figura 7.1:
Ferramenta de texto selecionada.
2)
Escolha a opção Static text, conforme indica a figura 5.
Figura 7.2:
Propriedade Static Text selecionada.
3)
Clique e escreva o
texto, qualquer texto, desde que o
aluno entenda que ao lado deste campo deve-se digitar a resposta.
Figura 7.3: Texto
escrito na tela.
* O texto que você
escrever num campo de texto estático, é só para aparecer na tela. Como você
pode ver, na figura 5, o nosso texto é resposta,
logo, você pode escrever o que quiser, pois isso não vai alterar em nada o
funcionamento do programa.
Passo 7: Vamos inserir um campo de texto de entrada, que será o
local onde a resposta deverá ser digitada (ver figura 8).
Figura 8: Criando um campo de texto de
entrada (onde o aluno digitará a resposta).
1)
Clique na
ferramenta de texto.
Figura 8.1:
Ferramenta de texto selecionada.
2)
Selecione a opção Input text conforme está indicado na
figura 8.
Figura 8.2: Propriedade Input Text selecionada.
3)
Este botão indica
se a borda do campo de texto é visível ou não. Deixe-o marcado (visível), pois
se estiver invisível o aluno não verá onde deve digitar sua resposta.
Figura 8.3: Deixe esse botão ligado,
assim a caixa de texto terá uma borda e um fundo branco (o aluno poderá ver que
ela esta ali).
4)
Desenhe-o ao lado
do campo estático que você fez antes.
Figura 8.4: Como ficará sua tela
depois de desenhado o seu campo de texto de entrada.
5)
Você deve colocar
um nome para a variável desse campo, faça como foi explicado no Passo 4. Nós
usaremos resposta como nome.
Figura 8.5: Declarando variável para o
campo de texto de entrada.
Passo
8:
Que tal inserir uma imagem?
Figura
9: importando uma imagem.
Ou simplesmente
pressionando Ctrl + R.
OBS:
Você deverá ter uma imagem em seu computador se quiser colocar no objeto!
1)
Clique
no menu File (veja
a figura 9).
2)
Vá até Import.
3)
E clique em Import to Stage.
4)
Na janela que abriu, procure a imagem que
você deseja colocar no objeto, depois de achá-la, selecione-a (como mostra a figura 9.1).
5)
Clique em Abrir e pronto, sua imagem já está no objeto.
Figura 9.1:
Importando um arquivo de imagem.
Passo
9:
Precisamos de botões! Primeiro vamos desenhá-los.
Figura
10: Desenhando um botão.
1)
Clique na ferramenta de fazer retângulos (veja figura 10).
Figura 10.1: Ferramenta de retângulos
selecionada.
2)
Escolha uma cor para o fundo do botão.
Figura 10.2: Escolhendo uma cor para o
plano de fundo do seu botão.
3)
Desenhe o retângulo.
4)
Clique na ferramenta de texto.
Importante:
a caixa de texto deve ser estática (Static
Text) como aquela do Passo 6.
5)
Coloque o texto em cima do retângulo que
você desenhou. Nós usamos Confere como
texto (esse texto sim, você pode mudar sem ter que mexer em mais nada, é apenas
um “rótulo”).
10.3: Escrevendo o texto que aparecerá
no botão.
Passo 10: Já temos o desenho do botão, agora temos que
transformar esse desenho num botão.
Figura 11: Transformando o desenho num
botão.
1)
Selecione todos os componentes que farão parte do botão (veja
figura 11).
Figura 11.1: Pressione o botão
esquerdo do mouse e arraste sobre os itens para selecioná-los.
2)
Clique no menu “Modify” e em Convert to Symbol. Isso irá abrir uma
caixa onde você fará a conversão. Ou simplesmente pressione a tecla F8.
3)
Nesse campo você deve informar o nome que
terá o botão. Nós usamos Bt_Conferir.
Figura 11.3: Depois de clicar em Convert to Symbol..., aparecerá essa
caixa de diálogo, onde você colocara o nome do símbolo e escolherá o tipo
(nesse caso escolha Button).
4)
Aqui você deve escolher o tipo de símbolo.
Como nós queremos um botão, clique em Button.
Figura 11.4: Selecionando
Button no tipo (type) de símbolo.
5)
Clique em OK e pronto, seus desenhos são um botão agora.
Figura 11.5: Aqui
esta ele depois de pronto.
Agora
siga os mesmos passos acima para fazer outro botão. Esse terá como texto Bt_trocar (se quiser pode ser outro
nome), ele servirá para trocar os
valores do produto.
Figura 11.6: Fazendo o segundo botão.
Figura
12: Procurando o local onde você vai escrever o código.
Passo 11: Os botões estão prontos, mas se você
testar seu objeto verá que se clicar neles, não acontece nada (isso se você
conseguir clicar). Isso significa que esta na hora de fazermos nosso código.
Vamos fazer a
primeira parte dele, essa parte deverá ficar no primeiro frame da sua linha do tempo.
1)
Clique no frame 1 da linha do tempo para
selecioná-lo (veja figura 12).
2)
Pressione F9 (se for notebook FN + F9) para
que apareça o lugar onde você digitará o seu código.
Depois de feito isso sua tela deverá
ficar parecida com isso:
Figura
13: Encontramos!
1)
Aqui é onde você deve digitar seu código (Ver figura 13).
Aqui está o código que você deverá
digitar (se quiser copiar, pode).
Para
saber o que cada linha faz, leia os comentários!
play();
var n1=int(Math.random()*10+1);
// Gera um número inteiro de
var n2=int((Math.random()*20+5)*10)/10;
// Gera um número de
function
substituirVirgula(numero){// Valor que será
manipulado
numero=numero.split(",").join(".");
// Troca , por .
numero=numero.split(" ").join("");
// Troca "espaço" por "nada"
return
numero; // Depois de pronto ele é retornado.
}
function
substituirPonto(numero){ // Valor que será
manipulado
numero=String(numero);
// Transforma o número em String.
// Por que
transformar em String?
// ‘split’ só funciona com String.
numero=numero.split(".").join(",");
// Troca . por ,
numero=numero.split(" ").join(""); // Troca "espaço" por "nada"
return
numero; // Depois de pronto ele é retornado.
}
A primeira parte do
seu código esta pronto, vamos fazer a segunda parte agora.
Nesse código, nós
precisamos atribuir eventos aos botões. Para fazer isso, devemos instanciá-los.
Isso se faz da seguinte forma:
Faça isso com os dois
botões:
1)
Clique no segundo frame da linha do tempo.
Figura 14 – clicando com o botão
esquerdo do mouse e indo pra o segundo frame.
2)
Clique com o botão esquerdo do mouse no botão que deseja instanciar (veja figura 14.1).
3)
Clique no campo indicado (quando o botão
ainda não esta instanciado, aparece
escrito <Instance
name>) e digite um nome para o botão.
Figura
14.1: Nesse local você deve digitar o nome de instância do botão.
Nós usamos ok em letras minúsculas (isso é muito importante, pois
ok≠OK).
Importante: Nós
usamos ok como nome de instancia
para o botão que confere a resposta e troca
para o botão que altera os valores do problema.
Se você colocar um nome diferente,
terá que mudar o nome no código também. Onde estava escrito ok, deverá ficar escrito o nome que
você digitou, o mesmo serve para troca.
Depois de instanciá-los, vamos
escrever o código no segundo frame.
1)
Clique no segundo
frame (ver figura 15).
2)
Pressione F9 (FN + F9 se for notebook). Vai aparecer a seguinte janela:
Figura
15: Onde ficará a segunda parte do seu código.
Aqui
esta o código que você deve digitar (pode copiar
se quiser, é mais rápido):
stop();
resposta=""; // Apaga a
resposta anterior (Se você já fez uma vez, isso faz com que não apareça no //campo
a resposta que foi digitada antes)
corrige=""; // Apaga a
resposta anterior (Mesma coisa)
if(n2==int(n2)){ // Se a parte
decimal for igual a inteira, acrescenta 0.1 ( 16.0 == 16 )
n2=n2+0.1; //
Pra que? --> Para quando der um número inteiro não aparecer no texto da //pergunta
por ex: R$ 16, 0 se acrescentarmos 0.1, o texto ficará assim: R$ 16,10)
}
var n2S=substituirPonto(n2);//Chamando a função que substitui o ponto pela virgula.
// entre parênteses (n2) ß isso é o
número que queres manipular
problema="O preço de um quilo de peixe é R$ "+n2S+"0. Qual é o valor de "+n1+" quilos?";
// Lembra-se de quando foi declarada a variável problema no campo de texto?
// Agora estamos atribuindo o texto acima a ela, logo aparecerá na
tela aquele texto ali.
troca.onPress=function(){// Evento do botão trocar ( onde troca é o nome de
instância que você //deu ao botão)
prevFrame();// Volta para o frame anterior ( para que sejam sorteados
novos valores), você //nem percebe que volta, pois vogo ele avança denovo.
}
ok.onPress=function(){
// Evento do botão confere.
// Onde ok é o nome que você colocou
//Isso significa: Botão Ok. Quando pressionado faz o que está na
função entre {}
if(resposta==undefined or resposta==""){
// Se o campo estiver em branco
// or significa ou
corrige="Digite a resposta no local indicado!" // Definindo texto quando o campo
//da resposta está em branco
}
else{
// Senão
var
resposta1=substituirVirgula(resposta);//Chamando a
função que substitui
//vírgula por ponto;
if(Math.abs(resposta1-(n1*n2))<0.01){// Se a diferença entre a resposta do
//aluno e a resposta certa
for menor que 0.01
corrige="Parabéns, sua resposta esta correta!"; // Define texto para
//resposta certa
}
else{
//Senão
corrige="Refaça seus cálculos!";// Define texto para resposta errada
}
}
}
Agora
é só testar, pressione ctrl+Enter.
Se
não funcionar, não se preocupe, erros acontecem.
Bom
trabalho!
Atividade
Elabore
um programa similar ao apresentado, onde o programa mostra um problema
fornecendo preço novo e preço antigo de uma mercadoria e pergunta-se a
porcentagem de aumento.
Os
dados do problema devem ser gerados de forma aleatória, o aluno deve calcular a
resposta, informando-a num campo determinado pelo programa e o programa fornece
o feedback se a resposta informada pelo aluno está correta ou não.