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 – CONSTRUÇÃO DE GRÁFICOS
Rudieri Turchiello Colbek
Carlos Alberto
Brigo
Tânia Michel Pereira
Juliane Sbaraine Pereira Costa
Ijuí, março de 2010
Aqui você verá um exemplo
de como fazer gráficos usando Action Script. Nesse exemplo o aluno irá informar
o valor de a, b, c e o valor máximo admitido por x, então o computador irá
calcular e fazer o gráfico.
Figura
01: Tela do exemplo graficando.swf
Passos para implementação do objeto:
Passo1: Abra o programa e escolha a opção Flash
Document.
* Se não aparecer essa tela, pressione ctrl+N, e na caixa que abrir escolha Flash Document.
Figura 02: Tela inicial do Flash.
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 03: Como salvar
Passo 3: Precisamos
alterar o tamanho do nosso palco (tela). Para alterar essas configurações,
clique no local indicado pela figura abaixo.
Figura 04: este botão abre as
propriedades do documento.
Então abrirá
uma janela, nela você deve colocar 800
px em Width (largura) e 600 px
em height (altura), conforme mostra a seguinte imagem.
Figura 05: Aqui você troca a
quantidade de “linhas” (altura) e
“colunas” (largura) que sua tela tem.
Passo 4: Vamos criar
mais um KeyFrame, esse deve ser
Figura 06: Criando um
keyframe 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 07: Linha do tempo antes de criar o
Keyframe
2)
Selecione a opção Insert Blank Keyframe.
Figura 08: Linha do tempo depois de criado o
novo Keyframe
Passo 5: Vamos escrever os textos que
aparecerão no nosso 1º frame.
1) Pegue a
ferramenta de texto.
Figura 09: Text Tool selecionado.
2) Escolha a opção Static
Text, tamanho da fonte 19 e alinhamento justificado.
Figura 10: Alterando as configurações da caixa de
texto.
3) Desenhe a caixa
de texto e escreva o seguinte:
Função polinomial
de segundo grau
Essa função tem o
seguinte formato:
y=ax²+bx+c, onde
a, b e c pertencem ao conjunto dos números reais e com a diferente de zero.
Ex: y=4x²-3x-2
Coloque valores
para a, b e c, bem como para o valor inicial de x e clique em no botão Avançar
para ver a tabela e o gráfico dessa função.
A sua tela deverá ficar assim:
Figura 11: Sua tela depois de
escrever o texto acima.
4) Crie mais 4
campos de texto estático que servirão de rótulos para os campos de entrada, com
o tamanho da fonte igual a 12 (o resto da formatação deve ser igual), tendo
eles os seguintes textos:
a. Texto do campo 1:
a=
b. Texto do campo 2:
b=
c. Texto do campo 3:
c=
d. Texto do campo 4:
Valor máximo de x no gráfico:
Figura 12: Sua tela depois que os “rótulos” foram
escritos.
5) Clique fora da
caixa de texto para tirar a seleção (é importante).
6) Mude o tipo de
texto para Input Text.
Figura 13: Mudando a caixa de
texto para Input Text.
7) Ative a borda do
campo de texto.
Figura 14: Borda do campo de texto ativa.
8) Desenhe 4 campos
de texto ao lado dos 4 desenhados anteriormente. Como mostra a figura abaixo:
Figura 15: Sua tela depois de ter
todos os campos de entrada.
9) Coloque nomes
para as variáveis deles, os nomes são (coloque na mesma ordem dos campos
anteriores):
a. Nome da variável
do campo que está ao lado do texto
“a=”: a;
b. Nome da variável
do campo que está ao lado do texto “b=”:
b;
c. Nome da variável
do campo que está ao lado do texto “b=”:
c;
d. Nome da variável
do campo que está ao lado do texto “Valor
máximo de x no gráfico=”: Ls1;
Figura 16: declarando uma variável para o campo de
texto selecionado.
10) Instancie os campos de texto, os nomes de
instância serão:
a. Nome de instância
do campo que está ao lado do texto
“a=”: ia;
b. Nome de instância
do campo que está ao lado do texto
“a=”: ib;
c. Nome de instância
do campo que está ao lado do texto
“a=”: ic;
d. Nome de instância
do campo que está ao lado do texto
“a=”: iLs;
Figura 17: Nome de instância do campo de texto.
Passo 6: Vamos fazer um botão, ele servirá
para mandar o computador fazer o gráfico (na verdade ele só fará com que se
avance um frame).
1) Pegue a
ferramenta Rectangle Tool.
Figura 18: Rectangle Tool selecionado.
2) Escolha a cor que
desejas.
Figura 19: Cores para você
escolher.
3) Desenhe o
retângulo.
Figura 20: Retângulo desenhado.
4) Pegue a
ferramenta Text Tool.
Figura 21: Text Tool selecionado.
5) Escolha a opção Static
Text.
Figura 22: Tipo de texto alterado
para Static Text.
6) O tamanho da
fonte pode ser 16, o alinhamento
deve ser centralizado, ative negrito, e deixe desativada a opção de
texto selecionável (veja tudo na figura abaixo). Depois disso, desenhe a caixa de texto em
cima do retângulo e escreva o texto que aparecerá no botão.
Figura 23: Estão destacadas as
configurações que você deve usar.
7) Selecione tudo,
clique com o botão direito do mouse em cima da seleção e clique em Convert
to Symbol...
Figura 24: Este menu é aberto
quando se clica com o botão direito do mouse em cima de algo.
8) Aparecerá uma
caixa de diálogo, onde você colocará o nome e o tipo do símbolo. O nome nós
usamos faca e o tipo deve ser Button.
Depois de digitar o nome e escolher o tipo, clique em OK.
Figura 25: Construindo um botão.
Passo 7: Precisamos de um botão para voltar
(servirá para trocar os valores). Nós usaremos o botão feito anteriormente como
base para fazermos esse.
1) Selecione o botão
faca e o copie (não cole ainda).
Figura 26: Copiar botão.
2) Vá para o segundo
frame.
Figura 27: Segundo frame da linha
do tempo selecionado.
3) Cole o botão lá pressionando
as teclas crtl+v, ou clique com o botão direito do mouse em qualquer
lugar da tela e depois clique em Paste ou Paste in place.
4) Clique com o
botão direito do mouse em cima do botão faca
(o botão que você acabou de copiar), e clique
Figura 28: Duplicar símbolo...
5) Aparecerá um
caixa de diálogo onde você deverá colocar o nome do seu novo clipe. Nós usamos
o nome Trocar. Depois de colocar o
nome, clique
Figura 29: Nome do novo símbolo.
6) Não queremos um
clipe igual ao anterior, porque eles terão funções diferentes, então de 2 cliques
em cima do botão para abrir-lo, de 2 cliques em cima do texto, para que você
possa editar-lo. Troque o texto existente por Trocar.
Figura 30: Trocando o texto do
botão.
7) Saia do clipe,
pois esse está pronto.
Figura 31: Botão que faz você sair do clipe.
Passo 8: Vamos fazer os eixos do gráfico.
a) Eixo esquerdo do X:
1)
Pegue a ferramenta Line tool e faça uma linha na
horizontal (não importa o tamanho, pois depois nós vamos alterar o tamanho dela,
mas deve ser reta).
Figura 32: Line Tool selecionada.
2)
Pegue a ferramenta Selection Tool, clique na linha que
você desenhou para selecioná-la.
Figura 33: Selection Tool
selecionada.
3)
Altere, nas propriedades do objeto selecionado, a largura
dele para 200 pixels (W: 200).
Figura 34: Propriedades do objeto,
onde largura = 200 e altura = 0.
Lembre-se:
a)
Altura e largura referem-se ao tamanho do objeto;
b)
X e Y referem-se à posição do objeto na tela.
4)
Clique com o botão direito do mouse em cima da linha e
depois clique em Convert to Symbol...
Figura 35: Clique para transformar
num símbolo.
5)
Aparecerá uma caixa de diálogo onde você colocará o nome (usaremos exe neste exemplo) e escolherá o tipo de símbolo (escolha Movie Clip)
depois de feito isso, clique em OK.
Figura 36: Fazendo um clipe.
6)
Entre dentro do clipe que você criou clicando 2 vezes em
cima dele. Dentro dele, faça uma linha na vertical, essa deve ser bem pequena,
sua altura deve ser 4 pixels (H: 4). Você já sabe como alterar o tamanho dos
objetos (veja a figura abaixo).
Figura 37: Propriedades do objeto,
onde Largura = 0 e Altura = 4.
7)
Clique com o botão direito do mouse em cima da linha
(vertical) e depois clique em Convert to Symbol...
Figura 38: Clique para converter
para um simbolo.
8)
Na caixa de dialogo que apareceu coloque o nome do
símbolo, (nós usamos px). Selecione
a opção Movie Clip e clique em OK.
Figura 39: Fazendo mais um clipe.
9)
Faça 9 cópias dele e coloque-os na linha com espaçamento
de 20 entre eles. O primeiro tem x igual
a 0, o segundo é 20, o terceiro 40... até que cheguem as dez cópias. O y deve ser 0 para todos.
Veja como deve ficar:
Figura 40: Eixo X esquerdo com os
pontos.
10)
Saia do clipe, pois esse está pronto.
Figura 41: Botão que faz você sair do clipe.
b)
Eixo direito do X:
1)
Nós não vamos fazer tudo de novo, iremos apenas copiar o
clipe exe. Para copiar você pode
selecionar o objeto, e usar as teclas de atalho ctrl + c (copiar) e ctrl
+ v (para colar).
Figura 42: Eixo X esquerdo copiado.
2)
Selecione a cópia, clique no meu Modify, vá até Transform,
e clique
Figura 43: Invertendo a cópia do
eixo X esquerdo.
3)
Esse está pronto.
Figura 44: Cópia do X esquerdo invertida .
c)
Eixo do Y inferior:
1)
Usaremos o clipe exe para fazer esse eixo, e depois
vamos girar-lo. Para fazer isso, tire mais uma cópia do clipe exe. Já falamos sobre como copiar
coisas.
Figura 45: Mais uma cópia do X
esquerdo.
2) Agora selecione sua
nova cópia, clique no menu Modifiy, vá até Transform, e clique em Rotate
90º CCW.
Figura 46: Gira 90º (sentido
anti-horário) o eixo copiado.
3) Esse já está
pronto, e foi bem fácil.
Figura 47: Eixo depois de girado.
d) Eixo do Y inferior:
1)
Agora você deverá copiar o eixo inferior y. Depois de
copiado, selecione-o, clique em Modify, vá até transform e clique
Figura 48: Aquele eixo que está acima dos outros, é
uma cópia do eixo de baixo.
2) Selecione a cópia,
clique no menu Modific, vá até Transform, vai clicar
Figura 49: Invertendo verticalmente o objeto.
3) Pronto também.
Figura 50: Depois de invertido ele fica assim (com o clipe PX virado
para cima) .
Passo 9: Agora que os eixos estão prontos, vamos
juntar eles para que isso fique um gráfico. Vamos modificar as coordenadas (x,
y) dos objetos, para que tenhamos mais precisão do que arrastar com o mouse.
a)
Eixo esquerdo do x: Selecione o
clipe e coloque os seguintes valores:
1)
Para x, coloque 0;
2)
Para y, coloque 200.
Figura 51: Coordenadas do objeto: (0,200).
b)
Eixo direito do x: Selecione o clipe e coloque os seguintes
valores:
1)
Para x, coloque 200;
2)
Para y, coloque 200.
Figura 52: Coordenadas do objeto: (200,200).
c)
Eixo superior do y: Selecione o clipe e coloque os
seguintes valores:
1)
Para x, coloque 200;
2)
Para y, coloque 0;
Figura 53: Coordenadas do objeto:
(200,0).
d)
Eixo inferior do y: Selecione o clipe e coloque os
seguintes valores:
1)
Para x, coloque 200;
2)
Para y, coloque 200;
Figura 54: Coordenadas do objeto: (200,200).
e)
Sua tela deverá ficar assim:
Figura 55: Depois que as
coordenadas são colocadas corretamente, os eixos deverão ficar dispostos dessa
forma.
Passo 10: Agora vamos juntar tudo isso num
clipe que se chamará eixos_grafico.
1)
Selecione todos os eixos que nós
fizemos e pressione a tecla F8 do seu teclado (isso corresponde
ao comando Convert to Symbol...) ou, se preferir, clique com o botão
direito do mouse em cima da seleção e clique em Convet to Symbol..., coloque o nome, selecione a opção Movie Clip e clique em OK.
Figura 56: Clipe pronto e selecionado.
Passo 11: Selecione o clipe eixos_grafico (dê um clique nele para
selecioná-lo) e converta ele para um clipe, da mesma forma que foi feito no
passo anterior, o nome dele deverá ser grafico_geral.
Passo 12: precisamos de campos de texto para
que apareçam os valores nos eixos do gráfico. Os campos de texto devem ser
dinâmicos e sem borda visível. Os campos devem ficar dentro do clipe grafico_geral, então abra ele, com dois cliques em cima dele, antes de
começar a desenhar os campos de texto.
1)
Selecione a ferramenta Text
Tool.
Figura 57: Text Tool selecionada.
2)
Defina o tipo de caixa de texto
como Dynamic
Text e desative a opção Show border around text.
Figura 58: Configurações da sua
caixa de texto.
3)
Se você estiver mesmo dentro do
clipe grafico_geral, já pode
desenhar os campos de texto. Desenhe apenas um, ele deve ter em torno de 18.5
de altura, 55 de largura e o tamanho da fonte deve ser 10. Depois que você
desenhou o primeiro campo, coloque-o em torno do eixo x.
Figura 59: Detalhes que você deve
cuidar na hora de fazer os campos de texto.
Somente faça os seguintes passos depois de ter lido até o final do item
7 “como deves fazer”.
4)
Nós precisaremos copiar o campo de
texto e colá-lo exatamente no mesmo local onde se encontra o outro. Para fazer
isso, siga os seguintes passos:
1.
Selecione o campo, clique com o
botão direito do mouse em cima dele e clique em Copy.
2.
Clique com o
botão direito do mouse em qualquer local da tela e selecione a opção Paste
in Place, ou, se preferir, use o atalho do teclado ctrl + shift + v.
5)
Para mover a cópia para outro
local do eixo x, use as setas (esquerda ou direita) do teclado, pois assim você
não corre o risco de movê-lo acidentalmente para cima ou para baixo (isso
certamente acontecerá se você usar o mouse para movê-los). Atenção, para mover a caixa de texto com o teclado, ela deve estar como
a primeira caixa que aparece na figura abaixo (selecionada).
Figura 60: Caixa com contorno azul
(pode ser arrastada) e caixa com contorno preto (modo de edição de texto).
Mas como se faz
para que ela fique assim? Dessa forma:
a)
Depois de desenha a caixa de
texto, pegue a ferramenta de seleção (Selection
Tool).
Figura 61: Ferramenta Selection Tool selecionada.
b)
Clique na caixa de texto, e
pronto, ela está selecionada.
Figura 62: Caixa de texto selecionada.
Agora é só usar
o teclado para movê-la com mais precisão.
6)
Veja as “regras”:
·
Ficarão 5 clipes para cada lado do
gráfico.
·
No 0 não coloque nenhuma caixa de
texto.
·
Você já pode nomear as variáveis
das caixas de texto. Para isso coloque o nome que a variável do campo em
questão vai ter. Veja os nomes indicados para os campos da esquerda para a
direita, em relação ao gráfico:
·
1º campo: x-10;
·
2º campo: x-8;
·
3º campo: x-6;
·
4º campo: x-4;
·
5º campo: x-2;
·
6º campo: x2;
·
7º campo: x4;
·
8º campo: x6;
·
9º campo: x8;
·
10º campo: x10;
·
Coloque o nome no local indicado;
Figura 63: Onde você deverá
colocar o nome da variável.
·
Veja como devem ficar dispostos os
campos de texto no gráfico:
Figura 64: Locais onde deverão ser
colocados os campos de texto.
7) Como deves fazer: (isso serve para o próximo passo também, mas daí use os nomes
indicados lá).
1. Faça o primeiro campo de texto (acho que você já fez);
2. Coloque no local certo;
3. Coloque o nome da variável correspondente a ele;
4. Copie o campo e cole-o no mesmo local, você já leu sobre como fazer
isso (ctrl+c = copy / ctrl+shif+v= Paste
in Place);
5. Mova-o até o local indicado para o próximo campo;
6. Troque o nome da variável da cópia;
7. Quando você chegar no x-2,
passe para o x2 (no seu devido
lugar). Se estiver fazendo o próximo passo, faça o contrário, quando chegar no x2 passe para o x-2;
8. Repita desde o número 4 (deste item) até terminar;
Passo 13: Precisamos de campos de texto
no eixo do y, este passo será bem parecido com o anterior, parecido, não igual.
Veja as diferenças entre esse passo e o
passo anterior:
1.
A largura dos campos de texto do
eixo y deve ser 100 (não precisa ser exato);
2.
Para mover os campos use as setas
(para cima e para baixo) do teclado, ao invés de (esquerda e direita).
3.
Quanto aos nomes das variáveis (de
cima para baixo):
·
1º campo: y10;
·
2º campo: y8;
·
3º campo: y6;
·
4º campo: y4;
·
5º campo: y2;
·
6º campo: y-2;
·
7º campo: y-4;
·
8º campo: y-6;
·
9º campo: y-8;
·
10º campo: y-10;
4.
Onde colocar os campos de texto:
Figura 65: Locais onde deverão ser colocados os
campos de texto.
Faça como foi
feito no passo anterior, mudando onde é diferente. Use
o item “como fazer” do passo anterior e as configurações (nomes
de variáveis, etc.) desse passo.
Depois de feito, saia de dentro do clipe
do gráfico.
Figura 66: Botão que faz você sair do clipe.
Mova-o para o lado direito da sua tela.
Figura 67: Gráfico pronto.
Instancie o clipe do gráfico, o nome de
sua instância deve ser grafico. Para
fazer isso, selecione o clipe, e coloque o nome no local indicado.
Figura 68: Onde colocar o nome de instância do
objeto.
Passo 14: Siga os seguintes passos para fazer a
tabela:
1)
Pegue a ferramenta de texto.
Figura 69: Text Tool selecionada.
2)
O tipo de texto deve ser Dynamic
Text, e a borda do campo de texto deve ser visível, a fonte deve ser 12
e o alinhamento deve ser centralizado.
Figura 70: O que deves observar
antes de desenhar as caixas de texto.
3)
Desenhe uma caixa de texto, a
largura dela pode ser 60, e escreva nela o seguinte texto: x
Figura 71: Primeira caixa de texto
desenhada, com texto “x”.
4)
Desenhe outra caixa de texto do
lado direito da primeira, esta deve ficar sem texto, mas deverá ter o seguinte
nome na variável: fx
Figura 72: Segunda caixa criada,
esta deve ter uma variável.
5)
Faça uma caixa de texto abaixo da
que tem o texto x e coloque x-10 para o nome da variável.
Figura 73: terceira caixa de texto
criada, não se esqueça da variável.
6)
Copie a caixa anterior e cole
abaixo da mesma, colocando x-8 no
nome da variável.
Figura 74: percebeu o padrão? Qual
será o próximo nome para a variável?
7)
Repita o número 6, até o fim da
tabela. Os nomes das variáveis para os próximos
campos são: X-6; x-4; x-2; x0; x2; x4;
x6; x8; x10.
Figura 75: ultimo campo de texto
desta coluna.
8)
Faça uma caixa de texto abaixo da primeira
caixa da segunda coluna, e coloque fx-10
no nome da variável.
Figura 76: é praticamente igual à
primeira coluna, mas com um “f” na variável.
9)
Copie a caixa anterior e cole
abaixo da mesma, colocando fx-8 no
nome da variável.
Figura 77: segue o padrão.
10) Repita o número 9, até o fim da
tabela. Os nomes das variáveis para os próximos
campos são: fx-6; fx-4; fx-2; fx0; fx2; fx4;
fx6; fx8; fx10.
Figura 78: Ultimo campo de texto
da segunda coluna.
Passo
15: ActionScript... Está na hora da parte funcional desse objeto, o código.
1) Vá até o primeiro frame da linha do tempo.
Figura 79:
Frame 1 da linha do tempo selecionado.
2) Abra o lugar de colocar códigos (pode pressionar a tecla F9 do seu
teclado), ou clique no local indicado pela figura abaixo. Ele pode já estar
aberto também, daí não precisa clicar lá.
Figura 80: Actions está fechado, clique no local indicado para abrir-lo.
3) Verifique se está escrito Actions – Frame como mostra a figura
abaixo. Se não estiver, é porque tem algum objeto selecionado, para “arrumar”,
basta clicar em uma área que não tem nada.
Figura 81: Se estiver aparecendo
isso, você está no caminho certo.
4) Copie o seguinte código para lá.
stop();
a="";
b="";
Ls1="";
c="";
ia.restrict="0-9
\\-.,";
ib.restrict="0-9
\\-.,";
ic.restrict="0-9
\\-.,";
iLs.restrict="0-9";
function tira_zero(nume){ /*--Retira os
"0" que estão na frente do número (se for 0.xxx dai ele não mexe em
nada)*/
var aux:String=nume;
var
auxl=aux.length-1;
if(auxl!=0){
for
(var i=0; i<=auxl; i++){
if(aux.charAt(0)=="0"){//Se o 1º
caractere for "zero"
if(aux.charAt(1)!="."){/*Se depois do "zero" não tiver um
"ponto" ( 2º caractere diferente de "ponto")*/
aux=aux.substr(1,auxl); /* Exclui
o 1º caractere (que é o "zero")*/
}
else{/*SENÃO ( se o
número depois "zero" for um "ponto" (2º //caractere igual a
"ponto"))*/
i=auxl+1;
/* atribui a variável i um valor maior que o da
variavel auxl fazendo com que ele pare a repetição*/
}
}
else{/*Senão (Se o 1º
caractere NÃO for "zero")*/
i=auxl+1;/* atribui a variável i um valor maior que o da variável
auxl fazendo com que ele pare a repetição*/
}
}
}
return(aux);// Retorna o
número ( é String ainda) pronto.
}
5) Agora clique no botão faca,
deverá aparecer Actions-Button no lugar de Actions-Frame. Se não estiver
aparecendo, clique mais uma vez no botão, se mesmo assim, não aparecer,
verifique se você não pulou nenhum passo anterior.
Figura 82: Actions-Button
significa que se colocarmos um código ali, ele ficará no botão.
6) Coloque o seguinte código lá.
on(release){
if(Ls1==""
or Ls1=="0"){
// Se Ls1 for em branco ou zero
Ls1="10"; // Ls1 fica igual a 10
}
b=b.split(",").join("."); // Troca ","
por “.”
a=a.split(",").join(".");//é o
mesmo que em cima, só que com outra variável
b=tira_zero(b);
// chama uma função do frame que retira os zeros que
estão na esquerda do número (zeros sem valor), se tiver.
a=tira_zero(a);// leia ali em cima ||
c=tira_zero(c);// leia ali em cima ||
Ls1=tira_zero(Ls1);// leia ali em cima ||
if(b==""){
// Se b for em branco
b="0"; //b fica
igual a 0
}
if(a==""){
// mesmo comentário acima, mas com outra variável
a="1";
// mesmo comentário acima, mas com outra
variável
}
if(c==""){
// mesmo
comentário acima, mas com outra variável
c="0"; // mesmo comentário acima, mas com outra variável
}
play(); // Avança para o
próximo frame (lá é onde gera o gráfico)
}
7) Vá até o segundo frame da linha do tempo.
Figura 83: Frame 1 da linha do
tempo selecionado.
8) Verifique se está escrito Actions – Frame como mostra a figura
abaixo. Se não estiver, é porque tem algum objeto selecionado, para “arrumar”,
basta clicar em uma área que não tem nada.
Figura 84: Se estiver aparecendo
isso, você está novamente no caminho certo.
9) Copie o seguinte código para lá.
stop();
Ls=Number(Ls1);
Ls=Math.abs(Ls);//Pega o valor absoluto de Ls (número sem sinal)
a=Number(a);
b=Number(b);
c=Number(c);
function f(x:Number){
var y=0;
y=a*x*x+b*x+c; // função do problema
return y;
}
var ta=String(a);
/*Atribui a variável 'ta' o número que tem na variável
'a', mas convertido em texto. */
ta=ta.split(".").join(","); // Troca
"." por ","
//------------------------------
var tb="+"+b+"x"; // atribui
a variável 'tb' o texto "+(valor de b)x" EX: "+5x"
tb=tb.split(".").join(",");// Troca "." por ","
if(b<0)
// se b for menor que 0 (negativo).
tb=String(b)+"x";
// atribui a variável 'tb' o texto "(valor de
b)x" EX: "-5x"
if(String(b)=="0") // Se b
for igual a zero.
tb="";// Deixa a
variável 'tb' em branco.
//------------------------------
var tc="+"+c;
// atribui a variável 'tc' o texto "+(valor de
c)" EX: "+5"
tc=tc.split(".").join(",");// Troca "." por ","
if(c<0)//
se c for menor que 0 (negativo)
tc=String(c); // tc recebe o
valor de c na forma de texto EX: "-5"
if(String(c)=="0")
// se c for igual a 0
tc="";// Deixa a variável 'tc' em branco.
//-------------------------------
fx="y="+ta+"x²"+tb+tc; /*
junta tudo e forma o texto que aparece na segunda coluna da primeira linha da
tabela*/
ls=Math.ceil(Ls/10)*10
//arredonda para uma casa decimal
li=-ls
/*
* ls= limite superior de X
* li= limite inferior de X
*/
escalax=ls/10;//escala é de quanto em quanto os valores que aparecem no
eixo do X variam
for(i=-10;i<=10;i++){//porque ir até 10? R= São 10 campos de texto para
preencher.
this["grafico.x"+i]=escalax*i; //dados no eixo x
this["x"+i]=escalax*i; //dados no x da
tabela
this["fx"+i]=f(escalax*i);
//dados no y da tabela
}
function max_y(){//Essa
função acha o valor maximo possivel para Y
var max_fx=0; //
Valor maximo começa em 0
for(i=li;i<=ls;i+=1){// Vai do limite inferior de X até o limite superior de X
if(Math.abs(f(i))>max_fx)//Se
f(i) for maior que o ultimo valor maxiomo
max_fx=Math.abs(f(i)); //valor
maximo recebe f(i)
}
return max_fx//Retorna
valor máximo
}
var lsy=max_y(); // Chama a função que calcula o valor maximo de Y
escalay=Math.ceil(Math.abs(lsy))/10;// maior módulo de y
(número sem sinal)
for(i=-10;i<=10;i++){//São 10 campos no eixo y
this["grafico.y"+i]=escalay*i; //dados no eixo y
}
10) Clique no botão trocar, como no item anterior, deverá
aparecer Actions-Button no lugar de Actions-Frame. Se não estiver
aparecendo, clique mais uma vez no botão, se mesmo assim, não aparecer,
verifique se você não pulou nenhum passo anterior.
Figura 85: Actions-Button
significa que se colocarmos um código ali, ele ficará no botão.
11) Coloque o seguinte código no
botão.
on(release){
gotoAndStop(1);
}
12) Dê dois cliques no clipe do
gráfico para abri-lo e coloque o seguinte código no Actions-Frame (deve estar
aparecendo isso no seu devido lugar).
x=_parent.li;
// atribui a variável x o limite inferior de X.
razao_x=200/_parent.ls; // 200=400/2 400 é o
tamanho do clipe em pixel
razao_y=200/_parent.lsy; /* a razão é necessária
para saber quantos pixel (da tela) vale cada número.*/
if((y<=_parent.lsy
)&& (y>=-_parent.lsy)){/*Se Y está "dentro" do limite do gráfico*/
moveTo(razao_x *x+200,- razao_y*_parent.f(x)+200);/*Move
o ponto para (x, f(x)) --- por que +200? Para que o ponto “zero” seja o centro
do gráfico*/
}
else{moveTo(x*razão+200,_parent.lsy*razão+200);}/*Move para (x, lsy) onde lsy é o limite superior de y (fica
no ponto mais alto do gráfico)*/
lineStyle(1, 0xFF0000);/*linha do gráfico (largura, cor) cor= número hexadecimal*/
for(x; x<=_parent.ls; x+=0.002)
{/*Começa no menor número de x e vai até o maior. x
aumenta de 0.002 em 0.002*/
y = _parent.f(x);/*Calcula y*/
if((y<=_parent.lsy
) and (y>=-_parent.lsy))/*Se Y está
"dentro" do limite do gráfico*/
lineTo(x*razao_x+200, -y*razao_y+200);/*traça
uma linha até o ponto (x,y)*/
}
13) Saia do clipe.
Figura 86: Botão que faz você sair
do clipe.
14) Pronto, agora salve e pressione
ctrl + Enter para testar.