1. Ana Alexandra Nunes da Silva
Francisco Josué Mendes Gonçalves
Jogo Interactivo de Matemática
(Cálculo de operações)
Engenharia Informática
Setembro 2008
-
2. Jogo Interactivo de Matemática
(Cálculo de operações)
Relatório da Disciplina de Projecto
Engenharia Informática
Escola Superior de Tecnologia e de Gestão
Ana Silva, Francisco Gonçalves
Setembro 2008
-
3. A Escola Superior de Tecnologia e Gestão não se responsabiliza pelas opiniões expressas
neste relatório.
- iii -
4. Certifico que li este relatório e que, na minha opinião, é adequado no seu
conteúdo e forma como demonstrador do trabalho desenvolvido no
âmbito da disciplina de Projecto.
___________________________________________
Prof. Luísa Augusta Vara Miranda Orientadora
Certifico que li este relatório e que, na minha opinião, é adequado no seu
conteúdo e forma como demonstrador do trabalho desenvolvido no
âmbito da disciplina de Projecto.
___________________________________________
Prof. Maria João Tinoco Varanda Pereira Co-Orientadora
Certifico que li este relatório e que, na minha opinião, é adequado no seu
conteúdo e forma como demonstrador do trabalho desenvolvido no
âmbito da disciplina de Projecto.
___________________________________________
<Nome do Arguente> Arguente
Aceite para avaliação da disciplina de Projecto
- iv -
5. Agradecimentos
Da mesma forma, a realização deste trabalho não seria possível sem a colaboração de algumas
pessoas, às quais nos cabe agradecer:
À Prof. Luísa Miranda pelos seus ensinamentos e colaboração, bem como pela
paciência que teve connosco.
À Prof. Maria João Varanda pelos seus ensinamentos e colaboração.
Aos Pais e familiares pela compreensão e dedicação, apesar das muitas horas passadas
à frente do computador.
Às muitas pessoas que fazem manuais e os distribuem livremente, dando assim
possibilidade de outros poderem aprender e evoluir.
-v-
6. Conteúdo
1 Introdução ..................................................................................................................... 1
2 Objectivos ...................................................................................................................... 2
3 Conteúdos Utilizados..................................................................................................... 3
3.1 Programa do 3.º Ano do 1º Ciclo do Ensino Básico................................................... 3
3.2 Programa do 4.º Ano do 1º Ciclo do Ensino Básico................................................... 4
4 Software Utilizado ......................................................................................................... 5
4.1 Macromedia Flash Profissional 8 .............................................................................. 5
4.1.1 Ferramentas de desenho ..................................................................................... 6
4.1.2 TimeLine – Linha Temporal............................................................................... 7
4.1.3 Símbolos ............................................................................................................ 8
4.1.4 Acções ............................................................................................................... 8
4.2 Piano ........................................................................................................................ 9
4.3 Audacity ..................................................................................................................10
4.4 Adobe Photoshop CS2 .............................................................................................10
5 Estrutura e Funcionamento do Site .............................................................................12
5.1 Página Principal .......................................................................................................12
5.1.1 Página Principal em HTML ...............................................................................12
5.1.2 Página Principal em Flash .................................................................................12
5.1.2.1 Como foi implementada .................................................................................13
5.2 Jogo das Operações .................................................................................................14
5.2.1 Descrição do Jogo .............................................................................................14
5.2.2 Competências ....................................................................................................16
5.2.3 Como foi implementado ....................................................................................16
5.3 Jogo do Dinheiro .....................................................................................................17
5.3.1 Descrição do Jogo .............................................................................................17
5.3.2 Competências ....................................................................................................18
5.3.3 Como foi implementado ....................................................................................18
5.4 Jogo dos Múltiplos...................................................................................................19
5.4.1 Descrição do Jogo .............................................................................................19
5.4.2 Competências ....................................................................................................21
- vi -
7. 5.4.3 Como foi implementado ....................................................................................21
5.5 Jogo das Fracções ....................................................................................................22
5.5.1 Descrição do Jogo .............................................................................................22
5.5.2 Competências ....................................................................................................23
5.5.3 Como foi implementado ....................................................................................23
5.6 Jogo da Ordenação...................................................................................................24
5.6.1 Descrição do Jogo .............................................................................................24
5.6.2 Competências ....................................................................................................26
5.6.3 Como foi implementado ....................................................................................27
5.7 Jogo das Horas.........................................................................................................27
5.7.1 Descrição do Jogo .............................................................................................27
5.7.2 Competências ....................................................................................................29
5.7.3 Como foi implementado ....................................................................................29
6 Teste ao Software .........................................................................................................31
7 Conclusões ....................................................................................................................32
Bibliografia .........................................................................................................................33
A Código ActionScript .....................................................................................................34
A.1 Jogo das Operações .................................................................................................34
A.1.1 Página Inicial ....................................................................................................34
A.1.1.1 Botão “Menu” ................................................................................................34
A.1.1.2 Botão “Nível 1” .............................................................................................34
A.1.1.3 Botão “Nível 2” .............................................................................................34
A.1.2 Nível 1 ..............................................................................................................35
A.1.2.1 Camada de acções ..........................................................................................35
A.1.2.2 Botão “Operação seguinte” ............................................................................40
A.1.2.3 Botão “Início” ................................................................................................40
A.1.3 Nível 2 ..............................................................................................................41
A.1.3.1 Camada de acções ..........................................................................................41
A.1.3.2 Botão “Limpar”..............................................................................................44
A.1.3.3 Botão “Operação seguinte” ............................................................................45
A.1.3.4 Botão “Início” ................................................................................................45
A.1.3.5 Clipe de filme “pisca1” ..................................................................................46
A.1.3.6 Clipe de filme “pisca2” ..................................................................................46
A.1.3.7 Botão “Verifica se acertaste”..........................................................................47
A.2 Jogo do Dinheiro .....................................................................................................49
A.2.1 Página Inicial ....................................................................................................49
A.2.1.1 Botão “Iniciar” ...............................................................................................49
A.2.1.2 Botão “Menu” ................................................................................................49
A.2.2 Página dos Problemas ........................................................................................50
A.2.2.1 Camada de acções ..........................................................................................50
A.2.2.2 Botão “Início” ................................................................................................54
A.2.2.3 Botão “Corrigir” ............................................................................................54
- vii -
8. A.2.2.4 Botão “Verifica se acertaste”..........................................................................55
A.2.2.5 Botão “Problema seguinte” ............................................................................55
A.2.2.6 Botão “Problema anterior” .............................................................................56
A.2.2.7 Clipe de filme “Nota de 500 €” ......................................................................56
A.2.2.8 Clipe de filme “Nota de 200 €” ......................................................................57
A.2.2.9 Clipe de filme “Nota de 100 €” ......................................................................57
A.2.2.10 Clipe de filme “Nota de 50 €” .....................................................................58
A.2.2.11 Clipe de filme “Nota de 20 €” .....................................................................58
A.2.2.12 Clipe de filme “Nota de 10 €” .....................................................................59
A.2.2.13 Clipe de filme “Nota de 5 €” .......................................................................59
A.2.2.14 Clipe de filme “Moeda de 2 €” ....................................................................60
A.2.2.15 Clipe de filme “Moeda de 1 €” ....................................................................60
A.2.2.16 Clipe de filme “Moeda de 50 cent.” ............................................................61
A.2.2.17 Clipe de filme “Moeda de 20 cent.” ............................................................61
A.2.2.18 Clipe de filme “Moeda de 10 cent.” ............................................................62
A.2.2.19 Clipe de filme “Moeda de 5 cent.” ..............................................................62
A.2.2.20 Clipe de filme “Moeda de 2 cent.” ..............................................................63
A.2.2.21 Clipe de filme “Moeda de 1 cent.” ..............................................................63
A.3 Jogo dos Múltiplos...................................................................................................64
A.3.1 Página Inicial ....................................................................................................64
A.3.1.1 Botão “Iniciar” ...............................................................................................64
A.3.1.2 Botão “Menu” ................................................................................................64
A.3.2 Página das perguntas .........................................................................................64
A.3.2.1 Camada de acções ..........................................................................................64
A.3.2.2 Botão “Início” ................................................................................................67
A.3.2.3 Botão “Verdadeiro”........................................................................................67
A.3.2.4 Botão “Falso” ................................................................................................68
A.3.2.5 Botão “Seguinte” ...........................................................................................69
A.4 Jogo das Fracções ....................................................................................................70
A.4.1 Página Inicial ....................................................................................................70
A.4.1.1 Botão “Menu” ................................................................................................70
A.4.1.2 Botão “Fácil” .................................................................................................70
A.4.1.3 Botão “Médio” ...............................................................................................70
A.4.1.4 Botão “Difícil” ...............................................................................................70
A.4.2 Fácil ..................................................................................................................71
A.4.2.1 Camada de acções ..........................................................................................71
A.4.2.2 Botão “Início” ................................................................................................73
A.4.2.3 Clipe de filme “pisca1” ..................................................................................73
A.4.2.4 Clipe de filme “pisca2” ..................................................................................73
A.4.2.5 Clipe de filme “Corrigir” ................................................................................74
A.4.2.6 Botão “1,2,3,4,5,6,7,8,9,0” .............................................................................74
A.4.2.7 Clipe de filme “” .........................................................................................75
A.4.2.8 Clipe de filme “” ........................................................................................76
A.4.3 Médio................................................................................................................77
A.4.3.1 Camada de acções ..........................................................................................77
A.4.3.2 Botão “Início” ................................................................................................81
A.4.3.3 Clipe de filme “pisca1” ..................................................................................81
A.4.3.4 Clipe de filme “pisca2” ..................................................................................81
A.4.3.5 Clipe de filme “Corrigir” ................................................................................82
- viii -
9. A.4.3.6 Botão “1,2,3,4,5,6,7,8,9,0” .............................................................................82
A.4.3.7 Clipe de filme “” .........................................................................................82
A.4.3.8 Clipe de filme “” ........................................................................................84
A.4.4 Difícil................................................................................................................86
A.4.4.1 Camada de acções ..........................................................................................86
A.4.4.2 Botão “Início” ................................................................................................89
A.4.4.3 Clipe de filme “pisca1” ..................................................................................89
A.4.4.4 Clipe de filme “pisca2” ..................................................................................90
A.4.4.5 Clipe de filme “Corrigir” ................................................................................90
A.4.4.6 Botão “1,2,3,4,5,6,7,8,9,0” .............................................................................90
A.4.4.7 Clipe de filme “” .........................................................................................91
A.4.4.8 Clipe de filme “” ........................................................................................92
A.5 Jogo da Ordenação...................................................................................................94
A.5.1 Página Inicial ....................................................................................................94
A.5.1.1 Botão “Menu” ................................................................................................94
A.5.1.2 Botão da parte 1 “Nível 1” .............................................................................94
A.5.1.3 Botão da parte 1 “Nível 2” .............................................................................94
A.5.1.4 Botão da parte 2 “Nível 1” .............................................................................94
A.5.1.5 Botão da parte 2 “Nível 2” .............................................................................95
A.5.2 Parte 1 Nível 1 ..................................................................................................95
A.5.2.1 Camada de acções ..........................................................................................95
A.5.2.2 Botão “Início” .............................................................................................. 123
A.5.2.3 Botão “Seguinte” ......................................................................................... 123
A.5.3 Parte 1 Nível 2 ................................................................................................ 123
A.5.4 Parte 2 Nível 1 ................................................................................................ 124
A.5.4.1 Camada de acções ........................................................................................ 124
A.5.4.2 Botão “Início” .............................................................................................. 159
A.5.4.3 Botão “Seguinte” ......................................................................................... 159
A.5.5 Parte 2 Nível 2 ................................................................................................ 160
A.6 Jogo das Horas....................................................................................................... 160
A.6.1 Página Inicial .................................................................................................. 160
A.6.1.1 Botão “Menu” .............................................................................................. 160
A.6.1.2 Botão “Nível 1” ........................................................................................... 160
A.6.1.3 Botão “Nível 2” ........................................................................................... 160
A.6.2 Nível 1 ............................................................................................................ 161
A.6.2.1 Camada de acções ........................................................................................ 161
A.6.2.2 Clipe de filme “relógio digital 1” ................................................................. 168
A.6.2.3 Clipe de filme “relógio digital 2” ................................................................. 169
A.6.2.4 Clipe de filme “relógio digital 3” ................................................................. 170
A.6.2.5 Clipe de filme “relógio digital 4” ................................................................. 171
A.6.2.6 Botão “Início” .............................................................................................. 172
A.6.2.7 Botão “Seguinte” ......................................................................................... 172
A.6.3 Nível 2 ............................................................................................................ 172
A.6.3.1 Camada de acções ........................................................................................ 172
A.6.3.2 Caixa de selecção (comboBox) .................................................................... 179
A.6.3.3 Botão “Verifica” .......................................................................................... 179
A.6.3.4 Botão “Início” .............................................................................................. 180
A.6.3.5 Botão “Seguinte” ......................................................................................... 180
- ix -
11. Lista de Figuras
Figura .1 - Macromedia Flash Profissional 8 ......................................................................... 6
Figura .2 - Barra de Ferramentas do Macromedia Flash. ....................................................... 7
Figura .3 - Linha do tempo. .................................................................................................. 7
Figura .4 - Janela de converter símbolos. .............................................................................. 8
Figura .5 - Janela do Piano.................................................................................................... 9
Figura .6 - Janela do Audacity. ............................................................................................10
Figura .7 - Janela do Adobe Photoshop CS2. .......................................................................11
Figura .8 - Fundo do site. .....................................................................................................12
Figura .9 - Ecrã da página inicial do jogo em Flash. .............................................................13
Figura .10 - Ecrã inicial do jogo das Operações. ..................................................................14
Figura .11 - Ecrã do início do jogo com uma resposta certa. ................................................15
Figura .12 - Ecrã do fim do jogo no “Nível 1”. ....................................................................15
Figura .13 - Ecrã do jogo no “Nível 2” com exemplo de uma resposta certa.........................16
Figura .14 - Ecrã inicial do jogo do Dinheiro. ......................................................................17
Figura .15 - Ecrã do jogo á medida que vai sendo jogado. ....................................................18
Figura .16 - Ecrã inicial do jogo dos Múltiplos. ...................................................................20
Figura .17 - Ecrã do jogo á medida que vai sendo jogado. ....................................................20
Figura .18 - Ecrã final do jogo dos Múltiplos. ......................................................................21
Figura .19 - Ecrã inicial do jogo das Fracções. .....................................................................22
Figura .20 - Ecrã do jogo no nível “Fácil” com animação do jogo em si. ..............................23
Figura .21 - Ecrã inicial do jogo da Ordenação. ...................................................................25
Figura .22 - Ecrã do jogo á medida que o utilizador vai jogando. .........................................25
Figura .23 - Ecrã final do jogo no “Nível 1” da “Parte 1”. ....................................................26
Figura .24 - Ecrã do jogo na “Parte 2” no “Nível 2” mostrando o processo do jogo. .............26
Figura .25 - Ecrã inicial do jogo das Horas. .........................................................................28
Figura .26 - Ecrã do jogo no “Nível 1” mostrando como acertou..........................................28
Figura .27 - Ecrã do jogo no “Nível 2”.................................................................................29
- xi -
12.
13. CAPÍTULO 1. Introdução
Capítulo 1
1 Introdução
O projecto teve como objectivo construir um jogo/site interactivo, inteligente e evolutivo
dedicado ao ensino e aprendizagem da matemática para alunos do 3º e 4º ano do 1º Ciclo do
Ensino Básico, com especial destaque para conteúdos relacionados com números e operações.
A aplicação deve evoluir dinamicamente e com complexidade crescente, face aos
conhecimentos demonstrados pelos utilizadores e disponibilizar formas de avaliação de
conhecimentos.
No desenvolvimento de software educativo a interface gráfica, a forma como os conteúdos
são expostos e o grau de interactividade são factores críticos de sucesso para o
desenvolvimento cognitivo de um público-alvo. A aplicação será então orientada para
utilizadores com características próprias, crianças, muito dependentes do ambiente e dos
recursos que têm à sua disposição e muito exigentes em termos de experimentação e
manipulação dos meios que utilizam. Assim sendo, este tipo de projecto não constitui apenas
um desafio tecnológico, mas também um projecto com preocupações pedagógicas.
As grandes finalidades do ensino da Matemática no Ensino Básico que devem estar sempre
presentes ao longo dos quatros anos do 1º ciclo são desenvolver a capacidade de raciocínio,
de comunicação e de resolução de problemas, neste projecto teve-se estes critérios em conta
durante a sua implementação.
A resolução de problemas coloca os alunos numa atitude activa de aprendizagem quer dando-
lhes a possibilidade de descoberta de novos conceitos, quer à construção de possíveis
respostas aos problemas levantados.
As crianças interessam-se por jogos com problemas práticos que se relacionam com a sua
vida na escola, com o seu universo familiar ou com a comunidade. Estes problemas ajudam as
crianças a raciocinar e a tornar mais fácil a interacção com os mesmos.
Em relação ao desenvolvimento do projecto, começou-se por recolher bibliografia sobre as
características específicas de software educativo, realizar a modelação do sistema, aprender a
trabalhar com o software Macromedia Flash fazendo vários exercícios para a criação,
manipulação e movimentação de objectos de forma a se estar preparado para poder
implementar os jogos com qualidade. Por último, realizaram-se testes para validar o sistema
relativamente à forma como funciona, aos desenhos, cores e sons usados.
1
14. CAPÍTULO 2. Objectivos
Capítulo 2
2 Objectivos
O objectivo deste projecto é construir um jogo/site interactivo, inteligente e evolutivo
desenvolvido em linguagem Flash.
Os jogos devem ser dedicados ao ensino de aprendizagem da matemática para os alunos do 3º
e 4º ano do 1º Ciclo do Ensino Básico mas de forma engraçada e mais compreensiva para as
crianças.
A aplicação deve evoluir dinamicamente e com complexidade crescente, face aos
conhecimentos demonstrados pelos utilizadores e disponibilizar formas de avaliação de
conhecimentos.
O jogo deverá focalizar-se em situações problemáticas que envolvam os alunos em estratégias
de exploração e descoberta.
Só há aprendizagem quando as crianças reagem dinamicamente a uma questão que levante o
seu interesse e responda à sua curiosidade, teve-se isso em conta, tendo como objectivo no
desenvolvimento dos jogos, manifestar a curiosidade para resolução de problemas simples e
práticos do dia-a-dia.
Com os jogos tenta-se favorecer as crianças no desenvolvimento da memória, na agilidade de
raciocínio, no gosto pelo desafio e na capacidade de aceitar e seguir uma regra.
Como o cálculo mental tem muita importância no 1º Ciclo teve-se esse objectivo em conta ao
longo do projecto levando as crianças a utilizá-lo na maioria dos jogos.
Como objectivos pedagógicos para o jogo/site interactivo também se teve em conta:
Estudar as relações entre números e operadores matemáticos (somas, diferenças,
subtracções e produtos).
Aprofundar os conhecimentos e capacidade de lidar com problemas do dia-a-dia que
englobam dinheiro, compras e vendas.
Desenvolver a capacidade de ordenar números por ordem crescente e decrescente.
Reconhecer a equivalência entre partes de uma unidade de um objecto e o quociente
de dois números (fracções).
Identificar e consultar as horas.
2
15. CAPÍTULO 3. Conteúdos Utilizados
Capítulo 3
3 Conteúdos Utilizados
Para a realização deste projecto teve-se em consideração o programa e as competências do 1º
Ciclo do Ensino Básico relativamente ao 3º e 4º ano da área curricular de Matemática, para os
números e operações.
De seguida serão apresentados os programas e competências específicas.
3.1 Programa do 3.º Ano do 1º Ciclo do Ensino Básico
Ler e escrever os números ordinais até 30.º.
Ordenar números inteiros em sequências crescentes e decrescentes.
Ler e escrever números.
Utilizar a numeração romana para representar números (até MM).
Explorar situações que levem à descoberta de números decimais.
Ler e escrever números decimais (com um máximo de 2 algarismos à direita da
vírgula).
Numa recta graduada, dado o número correspondente a um ponto, atribuir o número
correspondente a outros pontos.
Estabelecer relações de ordem entre números e utilizar a simbologia >, <, =.
Relacionar dezena, centena, milhar, décima e centésima com a unidade e entre si.
Explorar e usar regularidades e padrões na adição, subtracção e multiplicação.
Decompor os números em somas, diferenças e produtos.
Fazer a composição de dois operadores numéricos.
Estimar ordens de grandeza de um resultado antes de efectuar o cálculo.
Procurar estratégias diferentes para efectuar um cálculo (utilizando, espontaneamente,
as propriedades das operações).
Explicitar oralmente e representar por escrito os passos seguidos ao efectuar cálculos.
Construir e memorizar as tabuadas da multiplicação por 6, 7, 8 e 9.
Reconhecer o múltiplo de um número natural.
Utilizar subtracções sucessivas para a repartição de quantidades.
Descobrir a existência de resto em certas repartições.
Explorar situações que envolvam a divisão (subtracções sucessivas, adições e
produtos).
3
16. CAPÍTULO 3. Conteúdos Utilizados
Utilizar o sinal “:” na representação de quocientes (representação horizontal a: b).
Utilizar a notação 1/3 ×, 1/5 × e 1/10 × para representar o inverso de 3 ×, 5 ×, 10 ×.
Reconhecer a equivalência entre:
: 2 e 1/2 ×;
: 3 e 1/3 ×;
: 4 e 1/4 ×;
: 5 e 1/5 ×.
Explorar situações que levem a reconhecer que a operação inversa da multiplicação é a
divisão.
Reconhecer a equivalência entre 1/10 ×, 0,1 × e : 10.
Descobrir a regra para calcular o produto de um número por 0,1.
Descobrir a regra para calcular o produto de um número por 100 e por 1000.
3.2 Programa do 4.º Ano do 1º Ciclo do Ensino Básico
Ler e escrever os números ordinais até ao 50.º.
Ler e escrever os números ordinais 100.º e 1000.º.
Identificar ordens e classes da milésima ao milhão.
Ler e escrever números.
Ordenar números em sequências crescentes e decrescentes.
Estabelecer relações de ordem entre números e utilizar a simbologia <, >, =.
Representar números decimais numa recta graduada (até à décima).
Numa recta graduada, dado o número correspondente a um ponto, atribuir o número
correspondente a outro ponto.
Fazer a composição de operadores numéricos.
Utilizar tabelas de duas entradas da multiplicação para a divisão.
Estimar a ordem de grandeza de um resultado antes de efectuar o cálculo.
Procurar estratégias diferentes para efectuar um cálculo.
Explicitar oralmente e representar por escrito os passos seguidos ao efectuar cálculos.
Reconhecer múltiplos de um número natural.
Reconhecer a equivalência entre:
× 0,01 e : 100
× 0,001 e : 1000
Descobrir a regra para calcular o quociente de um número por 100 e 1000.
Descobrir a regra para calcular o produto de um número por 0,01 e 0,001.
Reconhecer a equivalência entre:
: 0,1 e ×10
: 0,01 e ×100
: 0,001 e ×1000
4
17. CAPÍTULO 4. Software Utilizado
Capítulo 4
4 Software Utilizado
Neste capítulo são abordadas as tecnologias que foram necessárias ao desenvolvimento do
projecto.
4.1 Macromedia Flash Profissional 8
O Macromedia Flash desenvolvido em 1996 pelo Shockware Flash é uma ferramenta de
edição de imagens vectoriais com animação, som e interactividade.
Depois de trabalhado o Flash expandiu para além de simples animações, também para uma
ferramenta de desenvolvimento de aplicações completas. Isso graças aos avanços na
linguagem ActionScript, que é a linguagem de programação utilizada em aplicações de
arquivos flashes que são gerados em extensão “.swf” (de Shockware Flash File).
É a tecnologia mais utilizada no Web que permite a criação de animações vectoriais e o uso
de gráficos vectoriais permite demorar pouco tempo para serem carregados.
Os gráficos vectoriais, nos quais uma imagem é representada a partir de linhas ou vectores
que possuem determinadas propriedades. A qualidade deste tipo de gráficos não depende do
zoom ou do tipo de resolução com o qual se olha para o gráfico.
Uma vantagem do desenho vectorial é que o tamanho do ficheiro não depende do tamanho
dos objectos e uma desvantagem é que não permite representar imagens fotográficas.
O Macromedia Flash passou a designar-se Adobe Flash a partir de 2005 e suporta vídeo, som,
imagem e animação vectorial.
O editor é composto por:
Timeline – Linha temporal onde decorre a acção, é dividida em quadros (frames) e em
camadas (layers).
Tools – Ferramentas de desenho, visualização, cor e opções.
Bibliotecas – Objectos do flash (Simbols, clips).
Properties – Painel de alteração das propriedades.
Color Mixer – Alteração da cor.
Actions (ActionScript), components (Componentes), Behavior (ActionScript).
5
18. CAPÍTULO 4. Software Utilizado
Figura .1 - Macromedia Flash Profissional 8
No Flash é possível dividir os filmes em cenas, em que cada cena pode conter os seus
próprios objectos ou personagens, e automaticamente são colocados em ordem, podendo
também ser chamadas através de botões ou através de acções colocadas directamente nas
frames (quadros).
O Flash também possui vários tipos de animação, sendo elas: quadro a quadro, interpolação
de movimento e de forma. A animação quadro a quadro consiste em alterar os objectos
(actores) no palco usando a linha temporal. A animação interpolação de movimento permite
criar animações através da interpolação dos quadros chave (KeyFrames) ao contrário da
animação quadro a quadro não é necessário desenhar todas as frames da animação. Na
animação de forma as camadas (Layers) tem um papel fundamental para organizar os objectos
e para a sobreposição e usa-se um percurso desenhado na camada guia para fazer deslocar um
determinado objecto.
4.1.1 Ferramentas de desenho
A área de ferramentas é composta por botões de desenho e manipulação dos desenhos feitos
na área de desenho do Flash. Quando se posiciona a ponta do rato sobre uma ferramenta ela
mostra o nome da ferramenta e uma letra entre parênteses, ao pressionar a tecla corresponde à
letra ela será marcada como activa automaticamente.
A área de visualização permite modificar a forma de visualizar a área de desenho do flash
permitindo mover o desenho ou ampliá-lo com a lupa.
Na área de cores podemos definir cores de linhas e cores de preenchimento dos desenhos
feitos no Flash.
Estas ferramentas de desenho foram utilizadas para desenhar personagens, objectos, criação
de botões entre outras coisas.
De seguida apresentamos cada ferramenta com a explicação da sua utilidade.
6
19. CAPÍTULO 4. Software Utilizado
Figura .2 - Barra de Ferramentas do Macromedia Flash.
4.1.2 TimeLine – Linha Temporal
A Linha do tempo é utilizada na criação de animações. Através dela podemos definir qual
será a mudança e/ou caminho a ser especificado pelo objecto do filme. Podemos também
através da linha do tempo utilizar camadas para melhor agrupamento e movimento dos
objectos.
Figura .3 - Linha do tempo.
7
20. CAPÍTULO 4. Software Utilizado
4.1.3 Símbolos
Para podermos trabalhar melhor com animações no flash o melhor é converter os objectos em
símbolos (Figura .4). Quando criado um símbolo ele vai automaticamente para a biblioteca
dos símbolos. Os símbolos podem ser de três tipos gráficos (Graphic), botões (Button) e
clipes de filme (Movie Clip).
O tipo de símbolo Gráfico (Graphic) é o símbolo mais básico, pois ele é praticamente estático
e é muito utilizado também dentro de outros símbolos.
O tipo de símbolo Botão (Button) é utilizado para chamar acções e pode receber valores
diferentes para estado do botão, normal, ao rolar sobre, pressionado e oculto.
Por fim, o tipo de símbolo Clipe de Filme (Movie Clip) permite que se crie um filme dentro
do símbolo com a vantagem de que ele carrega todo o clipe de filme primeiro e mostra o
mesmo no filme todo de uma vez.
Figura .4 - Janela de converter símbolos.
Os Botões (Buttons) são elementos que respondem a eventos do rato, exemplo cliques simples
ou a simples passagem do ponteiro sobre o botão, disparando acções dentro do filme. Eles
têm uma linha do tempo própria com quatro tipos de frames que estão identificados como Up,
Over, Down e Hit. O Up representa o botão no seu estado natural, sem nenhuma modificação.
O Over representa o botão quando o rato é colocado sobre ele. O Down representa a forma
que o botão assume quando seleccionado com o rato e o Hit é quando o conteúdo dessa área
fica invisível.
Os Clipes de Filmes (Movie Clips) são pequenos intervalos de animação que trabalham
independentes da linha do tempo do filme principal. Eles podem ter sons, controlos
interactivos e instâncias de outros Clipes de Filmes. Os mesmos podem ser controlados por
botões, por acções de quadros, ou por outros Clipes de Filmes e tem a capacidade de ser
usados em botões, na sua criação.
Uma das grandes vantagens dos Clipes de Filmes é que se pode editá-los separadamente do
filme principal, facilitando a organização da animação, além de que o Clipe de Filme é
carregado por completo no filme.
4.1.4 Acções
As acções são scripts utilizados pelo Flash para dar mais interactividade aos filmes e um
melhor controlo sobre os mesmos, a linguagem de scripts do Flash é conhecida por
8
21. CAPÍTULO 4. Software Utilizado
ActionScript, ou seja, uma linguagem orientada a objectos como o caso do Java Script. Isso
significa que as acções controlam objectos quando ocorre um determinado evento. Com o
ActionScript podemos configurar o filme para os eventos que queremos, como cliques em
botões e uso de teclas, activando os scripts para informar ao filme a acção a ser executada.
O painel de acções pode ser usado para auxílio na criação de scripts simples e permite criar e
editar acções para um objecto ou frame.
No ActionScript, os objectos podem conter dados ou podem ser representados graficamente
no palco como Clipes de Filme.
As classes predefinidas do ActionScript são chamadas de objectos, em que cada objecto
permite acesso a determinados tipos de informação. Os Clipes de Filmes são os objectos mais
importantes de um filme do Flash, pois têm linhas de tempo que são executadas
independentemente umas das outras.
As principais acções são:
Stop () – Pára a execução do filme
Play () – Reproduz o filme a partir da posição actual
gotoAndPlay () – Salta para determinada frame e continua a reprodução
gotoAndStop () – Salta para determinada frame e pára
nextFrame() – Passa para a frame a seguir
prevFrame () – Salta para a frame anterior
stopAllSounds () – Pára todos os sons
4.2 Piano
Este programa contém um teclado virtual que permite tocar piano, órgão e outros
instrumentos à escolha do utilizador, no computador podendo-se utilizar o teclado do
computador para tocar.
Figura .5 - Janela do Piano.
Esta aplicação serviu para criar os sons que foram inseridos nos jogos.
9
22. CAPÍTULO 4. Software Utilizado
4.3 Audacity
O Audacity serve para gravar, editar e reproduzir sons. Usa-se para editar sons, cortar, copiar
e colar fragmentos de som, com a possibilidade de retroceder para qualquer ponto anterior.
Figura .6 - Janela do Audacity.
Esta aplicação serviu para gravar e editar os sons criados com o programa anterior (piano),
para serem inseridos nos jogos. Esta gravação foi feita fazendo uma ligação com um cabo da
saída dos auscultadores à entrada do microfone do computador, o resto do processo de
gravação é feita neste programa.
4.4 Adobe Photoshop CS2
O Adobe Photoshop CS2 é um aplicativo para a edição profissional de imagens
bidimensionais.
10
23. CAPÍTULO 4. Software Utilizado
Figura .7 - Janela do Adobe Photoshop CS2.
Esta aplicação serviu para editar todas as imagens inseridas nos jogos do projecto.
11
24. CAPÍTULO 5. Estrutura e Funcionamento do Site
Capítulo 5
5 Estrutura e Funcionamento do Site
5.1 Página Principal
5.1.1 Página Principal em HTML
Começou-se por criar a página base em HTML com o nome index.html, a qual vai suportar o
resto da aplicação em Flash. Esta página serve de fundo para o site, sendo esse fundo alusivo
ao formato das paredes da Escola Superior de Tecnologia e de Gestão de Bragança (Figura
.8).
Figura .8 - Fundo do site.
5.1.2 Página Principal em Flash
De seguida, criou-se a página inicial em Flash que tem como funcionalidade fazer a ligação
para os jogos criados (Figura .9).
12
25. CAPÍTULO 5. Estrutura e Funcionamento do Site
Esta página é constituída por uma animação no canto superior esquerdo, pelo texto
“Matemática Divertida” que contém uma animação a sua volta, pela mensagem de boas
vindas “Olá Bem vindo, vem aprender com a Matemática divertida.”, por um desenho que
contém uma paisagem e duas animações (a animação do peixe a nadar pelo lago e a animação
das personagens), por uma botão para ligar e desligar a música de fundo e por sete botões que
quando se passa o rato por cima mostra-se a imagem do jogo correspondente e quando se
selecciona é iniciado o jogo.
Figura .9 - Ecrã da página inicial do jogo em Flash.
5.1.2.1 Como foi implementada
A página inicial ou a página de apresentação dos jogos contém algumas animações que são
clipes de filme com interpolações de movimento tais como o peixe que está dentro do lago,
bem como essa mesma paisagem, a animação que está no canto superior esquerdo, a
animação que contém uma bola a rodar, um círculo oval, a animação que contém o texto
“Matemática Divertida” com uma interpolação de cores, a apresentação das personagens e um
botão para ligar e desligar a música de fundo. O código ActionScript destas animações passa
basicamente por utilizar as funções gotoAndPlay() e stop() e por manipular a música de fundo
quando seleccionado o botão do som utilizando o evento OnRelease e dentro deste as funções
get/setVolume() (Apêndice A.7.9 Clipe de filme “Com/Sem Som”).
Esta página contém um botão para ligação com a página inicial de um projecto de jogos de
matemática do primeiro e segundo ano do primeiro ciclo do Ensino Básico, já feito no ano
lectivo anterior pelo aluno Nuno Afonso e um outro botão que quando pressionado apresenta
seis botões que fazem a ligação com os jogos deste projecto.
Existe um outro clipe de filme que contém as imagens de todos os jogos e da página principal
do outro projecto, que foi utilizado para o utilizador visualizar a imagem do jogo
correspondente ao botão com o nome desse mesmo jogo. Essa visualização é reproduzida
quando o utilizador coloca o ponteiro do rato em cima do botão do respectivo jogo fazendo
desvanecer a paisagem que está no centro da página e fazendo aparecer a imagem do jogo
através da propriedade _alpha, isto é feito dentro do evento OnRollOver, o contrário também
13
26. CAPÍTULO 5. Estrutura e Funcionamento do Site
acontece quando o utilizador afasta o ponteiro do rato, do botão, utilizando também a
propriedade _alpha dentro do evento OnRollOut.
Cada jogo é carregado quando o botão que contém o nome do respectivo jogo é pressionado,
isto é feito através da função loadMovie() que tem como um dos parâmetros o nome do
ficheiro do jogo a carregar, sendo esta função, invocada dentro do evento OnRelease de cada
botão.
5.2 Jogo das Operações
5.2.1 Descrição do Jogo
Inicialmente, aparece a página inicial do jogo (Figura .10) onde estão contidos três botões, o
botão “Nível 1”, o botão “Nível 2” e o botão “Menu”, onde o utilizador poderá optar por um
dos níveis ou regressar ao menu principal. No nível um, a dificuldade das expressões será
menor devido à necessidade de um único operador para completar. Quanto ao nível dois, as
expressões podem-se tornar mais difíceis necessitando de completar dois operadores e não um
como no nível um, o que poderá tornar mais difícil chegar ao resultado pretendido.
Figura .10 - Ecrã inicial do jogo das Operações.
Depois de pressionado o botão “Nível 1”, aparecerá a página principal do jogo (Figura .11)
com expressões incompletas onde o utilizador deverá escolher um operador de maneira a
acertar no resultado pretendido. As expressões foram guardadas num conjunto (array) e são
recuperadas aleatoriamente. Após escolhido o operador, aparecerá uma mensagem de texto a
indicar se a resposta está certa ou errada.
14
27. CAPÍTULO 5. Estrutura e Funcionamento do Site
Figura .11 - Ecrã do início do jogo com uma resposta certa.
Caso o utilizador acerte, a maça é comida pela minhoca e deve pressionar o botão “Operação
seguinte” para passar para a próxima expressão, mas se a resposta estiver errada aparecerá
uma mensagem de texto a indicar que está errada com o resultado errado e só avança quando
o utilizador acertar. O jogo repete-se sempre de igual modo até a maça estar comida e
aparecer mensagem de texto a indicar que o jogo acabou (Figura .12).
Figura .12 - Ecrã do fim do jogo no “Nível 1”.
Se pressionado o botão “Nível 2”, aparece a página principal do jogo (Figura .13) onde o
utilizador deverá preencher os dois operadores seleccionando-os na minhoca de maneira a
acertar no resultado pretendido. Para verificar a veracidade da resposta o utilizador
pressionará o botão “Verifica se acertaste” e de igual modo aparecerá uma caixa de texto a
indicar se a resposta está certa ou errada. Quanto ao resto do processo de jogo e de
apresentação será da mesma forma que no nível um.
15
28. CAPÍTULO 5. Estrutura e Funcionamento do Site
Figura .13 - Ecrã do jogo no “Nível 2” com exemplo de uma resposta certa.
5.2.2 Competências
Este jogo tem como objectivo desenvolver o raciocínio do utilizador a partir da utilização das
operações: adição, subtracção, multiplicação e divisão. O facto de poder trabalhar em
simultâneo com mais do que uma operação proporciona-lhes condições para o
desenvolvimento de competências cognitivas.
5.2.3 Como foi implementado
Houve a preocupação de trabalhar e enriquecer a parte gráfica em termos de desenhos e de
animações. Foram criadas várias caixas de texto para receberem os parâmetros das expressões
(operandos, operadores e resultado) e o resultado do jogo.
Foi criada uma página inicial num ficheiro à parte que contém uma animação criada no
espaço de tempo através da interpolação de movimento e contém dois botões para abrir o
ficheiro correspondente ao nível que se quer jogar. Estes botões contêm um evento OnRelease
que chama uma função loadMovie(), que recebe como parâmetro o nome com o caminho do
ficheiro a carregar e o local onde vai ser carregado (Apêndice A.1.1 Página Inicial).
De seguida, tanto no nível um como no nível dois, desenhou-se uma minhoca em que a sua
estrutura é composta por quatro botões que permitem escolher o operador a introduzir na
expressão existente na caixa de texto correspondente. Esta caixa de texto encontra-se
juntamente com um clipe de filme composto por um rectângulo que alterna entre a cor verde e
branca aquando o aparecimento de cada expressão para que o utilizador escolha um operador.
O código ActionScript deste jogo baseia-se na criação de um array de expressões do tipo
string, em que cada expressão é gerada aleatoriamente através da função random(), aquando o
início do jogo e quando o utilizador passa para a expressão seguinte. Quando é gerada uma
16
29. CAPÍTULO 5. Estrutura e Funcionamento do Site
nova expressão do array, cada elemento dessa expressão é separado através da função split()
para ser inserido na caixa de texto correspondente da expressão.
No primeiro nível a validação do operador é feita quando este é escolhido, através do código
implementado no evento OnRelease de cada botão da minhoca (Apêndice A.1.2.1 Camada de
acções).
No segundo nível existe um evento OnRelease em cada clipe de filme do rectângulo
correspondente à caixa de texto dos operadores para por o clipe de filme a alternar entre cores
tal como no nível um, e onde vai ser usada uma variável para saber qual o clipe de filme que
foi seleccionado para assim, quando for seleccionado o operador, a caixa de texto
correspondente a esse clipe de filme tomar o valor do operador escolhido (Apêndices A.1.3.5
e A.1.3.6 Clipes de filme “pisca1” e “pisca2”). Neste nível a validação é feita no botão
“Verifica se acertaste” dentro do evento OnRelease devido ao facto de termos mais do que um
operador para completar (Apêndice A.1.3.7 Botão “Verifica se acertaste”).
5.3 Jogo do Dinheiro
5.3.1 Descrição do Jogo
Quando o utilizador escolhe o jogo do Dinheiro aparece a página inicial que contém o botão
“Iniciar”, o botão “Menu” e a explicação de como se joga (Figura .14).
Figura .14 - Ecrã inicial do jogo do Dinheiro.
Depois de, o utilizador pressionar o botão “Iniciar”, aparecerá a página principal do jogo que
contém problemas. O jogo consiste em responder às perguntas utilizando o dinheiro
apresentado e colocando-o na máquina registadora. Neste jogo o grau de dificuldade dos
problemas vai aumentando, sendo necessário, em alguns casos, pegar num papel e lápis para
os resolver.
17
30. CAPÍTULO 5. Estrutura e Funcionamento do Site
O utilizador terá que seleccionar o dinheiro que pretende e arrastá-lo até a máquina
registadora. Depois de arrastado o dinheiro o utilizador deverá pressionar o botão “Verifica se
acertaste” e então, aparecerá no Troca Tintas a mensagem se acertou ou não (Figura .15).
Figura .15 - Ecrã do jogo á medida que vai sendo jogado.
Caso não acerte, ou melhor caso o utilizador arraste dinheiro a menos para a máquina
registadora aparecerá a mensagem a avisar “O dinheiro que deste não chega, tens que dar
mais dinheiro.”. Se arrastar dinheiro a mais aparecerá a mensagem “Não temos trocos clica
em corrigir e tenta outra vez.”.
Nos casos em que o utilizador insere dinheiro a menos ou a mais pode sempre pressionar o
botão “Corrigir” e voltar a resolver o problema.
Durante o jogo o utilizador pode querer mudar de problema ou voltar a página principal do
jogo tendo três botões, o botão “Problema anterior”, o botão “Problema seguinte” e o botão
“Início” que permite a qualquer altura do jogo voltar à página inicial do jogo.
5.3.2 Competências
Este jogo desenvolve competências relacionadas com a prática de resolução de problemas
juntamente com interacção com dinheiro, permitindo assim ao utilizador usar as notas e
moedas com mais naturalidade.
5.3.3 Como foi implementado
Tal como no jogo anterior e nos seguintes, neste jogo foi criada uma página inicial que
contém um botão para iniciar o jogo usando o evento OnRelease e dentro deste a função
loadMovie() (Apêndice A.2.1.1 Botão “Iniciar”). Na página do jogo, para além da criação de
todo o aspecto gráfico foram criados vários clipes de filmes que contêm as notas e moedas do
jogo, um clipe de filme que contém uma caixa registadora e vários clipes de filme que contêm
as perguntas do jogo.
18
31. CAPÍTULO 5. Estrutura e Funcionamento do Site
Neste jogo foi criado um array de clipes de filme para que cada pergunta do jogo seja
associada a um índice deste array e foi criado outro array para guardar os valores correctos
das perguntas para efeito de validação.
Para os clipes de filme das notas e moedas serem arrastados é utilizada a função startDrag()
no evento OnPress de cada clipe de filme e para deixar de arrastar é utilizada a função
stopDrag() no evento OnRelease de cada clipe de filme. Para detectar a colisão entre o clipe
de filme do dinheiro (nota ou moeda) e o clipe de filme da caixa registadora é utilizada a
função hitTest() que retorna true or false caso exista ou não, entre os objectos. Esta função é
chamada periodicamente durante a execução do jogo através da função setInterval()
(Apêndice A.2.2.1 Camada de acções).
Cada clipe de filme do dinheiro tem uma animação de desaparecer quando existe a colisão
com a caixa registadora ao mesmo tempo que é largado o botão do rato voltando ao local
inicial, isto acontece porque no decorrer desta animação são guardadas as coordenadas X e Y
iniciais do clipe de filme, isto também acontece quando, ao largar o botão do rato, não existe
colisão entre o dinheiro e a caixa registadora.
A passagem das perguntas é feita através das acções do botão “Problema seguinte” (Apêndice
A.2.2.5 Botão “Problema seguinte”) e do botão “Problema anterior” (Apêndice A.2.2.6 Botão
“Problema anterior”) dentro do evento OnRelease onde é incrementado o índice da pergunta
escondendo a anterior e mostrando a seguinte através da propriedade _visible.
Foram criadas duas caixas de texto dinâmicas, uma para ver o valor do dinheiro arrastado para
a caixa registadora e outra para aparecer o resultado quando é seleccionado o botão “Verifica
se acertaste”. Este botão faz a validação da igualdade do valor somado do dinheiro arrastado
para a caixa registadora com o valor do array de valores correspondente ao índice da pergunta
em questão, mostrando assim o resultado (Apêndice A.2.2.4 Botão “Verifica se acertaste”).
Existe também um botão “Corrigir” para o caso de o utilizador querer corrigir o valor do
dinheiro arrastado, nesse caso o valor é inicializado a zero (Apêndice A.2.2.3 Botão
“Corrigir”).
5.4 Jogo dos Múltiplos
5.4.1 Descrição do Jogo
Ao escolher este jogo, inicialmente aparece a página inicial (Figura .16) que contém uma
explicação relativa ao jogo, ou seja, poderá ser uma mini história em que o Riscas apanhou
um peixe no rio e precisa de ajuda para mudar o peixe do saco onde o trouxe, para o aquário.
19
32. CAPÍTULO 5. Estrutura e Funcionamento do Site
Figura .16 - Ecrã inicial do jogo dos Múltiplos.
A página inicial deste jogo também contém um botão “Iniciar” que depois de pressionado fará
aparecer a página principal do jogo e um botão “Menu” que quando pressionado volta para o
menu principal. Neste jogo o utilizador terá que escolher a veracidade das expressões
pressionando um dos dois botões “Verdadeiro” ou “Falso”.
Consoante o utilizador vai acertando ou não, aparecerá o Riscas a dizer, e á medida que vai
acertando vai conseguindo passar a água do saco para o aquário (Figura .17). Para passar para
a próxima expressão o utilizador deve pressionar o botão “Seguinte” e para voltar à página
inicial a qualquer altura do jogo deve pressionar o botão “Início”.
Figura .17 - Ecrã do jogo á medida que vai sendo jogado.
Quando o utilizador acerta em todas as expressões o peixe salta para o aquário, terminando o
jogo com a animação e com uma mensagem de felicitação (Figura .18).
20
33. CAPÍTULO 5. Estrutura e Funcionamento do Site
Figura .18 - Ecrã final do jogo dos Múltiplos.
5.4.2 Competências
Com o jogo dos Múltiplos pretende-se, de um modo particular, desenvolver competências
relacionadas com o reconhecimento de múltiplos de um número natural.
5.4.3 Como foi implementado
Neste jogo existe também uma página inicial que chama a página de resolução do jogo tal
como nos jogos anteriores e segue o mesmo objectivo.
Este jogo contém um clipe de filme com a animação entre o peixe, o aquário e o saco, dois
botões (“Verdadeiro” e ”Falso”) que validam o valor lógico da expressão mediante a escolha
do utilizador, um botão para passar para a expressão seguinte quando o utilizador acerta, uma
caixa de texto dinâmica para o resultado e clipes de filmes para as expressões.
Quanto às acções e ao código ActionScript, este jogo contém um array de clipes de filme das
expressões e um array de valores booleanos correctos correspondentes às expressões. Os
clipes de filmes das expressões são gerados aleatoriamente (Apêndice A.3.2.1 Camada de
acções). A escolha do botão de verdadeiro ou falso é validada através do evento OnRelease do
mesmo (Apêndices A.3.2.3 Botão “Verdadeiro” e A.3.2.4 Botão “Falso”).
O código ActionScript do botão “Seguinte” deste jogo, permite gerar outra expressão
aleatoriamente, mostrando-a e escondendo a anterior, através da propriedade _visible e
permite incrementar a animação que contém o peixe, o saco e o aquário (Apêndice A.3.2.5
Botão “Seguinte”).
21
34. CAPÍTULO 5. Estrutura e Funcionamento do Site
5.5 Jogo das Fracções
5.5.1 Descrição do Jogo
Quando o utilizador escolhe o jogo das Fracções aparece a página inicial (Figura .19) que
contém três botões referentes a diversos níveis de dificuldade (Fácil, Médio e Difícil) e um
botão “Menu” que permite voltar para o menu principal.
Figura .19 - Ecrã inicial do jogo das Fracções.
O nível “Fácil” contém uma pizza dividida em oito fatias onde o utilizador terá que
seleccionar primeiro os quadrados e escolher os números que acha que são correctos no
telemóvel. De seguida, no telemóvel aparecerá a piscar a tecla “” que serve de botão de
verificação e que, depois de pressionado faz aparecer no visor do telemóvel uma mensagem
de texto a dizer se acertou ou não. Caso acerte aparecerá uma animação do Troca Tintas a
comer uma fatia de pizza, depois começa a piscar a tecla “” que serve para passar para a
fracção seguinte, como mostra na figura seguinte:
22
35. CAPÍTULO 5. Estrutura e Funcionamento do Site
Figura .20 - Ecrã do jogo no nível “Fácil” com animação do jogo em si.
Se o utilizador não acertar na fracção, aparecerá no visor do telemóvel uma mensagem de erro
e o respectivo resultado, o qual pode ser corrigido ao pressionar o botão “Corrigir” que
aparece a piscar.
No nível “Médio” poderá aparecer uma pizza dividida em quatro, seis ou oito fatias onde o
utilizador terá o mesmo sistema para identificação das fracções.
Neste nível, o grau de dificuldade do jogo aumenta uma vez que muda tanto o número de
fatias que sobram como o número de fatias da pizza.
Por fim, no nível “Difícil” já não aparecerá só uma pizza mas duas, o que tornará o jogo mais
difícil uma vez que o utilizador terá que somar as fatias que sobram das duas pizzas. O resto
do processo do jogo é igual aos outros níveis.
Cada uma das actividades do jogo termina com uma mensagem de felicitação no visor do
telemóvel. Em todos os níveis o utilizador pode voltar para a página inicial do jogo
pressionando o botão “Início”.
5.5.2 Competências
Este jogo tem como objectivo desenvolver tarefas associadas a fracções correspondentes a
quantidades, nomeadamente relacionar as partes com o todo e identificar porções que são
traduzidas por fracções equivalentes.
5.5.3 Como foi implementado
Este jogo para além da página inicial que segue a mesma metodologia dos outros jogos foi
implementado com três níveis de dificuldade: nível Fácil, nível Médio e nível Difícil. Contém
vários clipes de filme com animações e outros que se baseiam mais em acções contendo
também animações.
23
36. CAPÍTULO 5. Estrutura e Funcionamento do Site
Neste jogo existe uma metodologia semelhante ao jogo das Operações, pois usam-se dois
clipes de filme com um rectângulo que alterna entre cores para o utilizador inserir um número
na caixa de texto dinâmica que lhe está sobreposta.
Todos os botões do telemóvel contêm o código dentro do evento OnRelease, que permite
adicionar o número correspondente ao botão seleccionado, na caixa de texto correspondente
ao rectângulo seleccionado anteriormente.
No clipe de filme do botão de verificação do telemóvel é feita a validação dos dois números
inseridos dentro do evento OnRelease, fazendo a divisão dos mesmos e comparando-a com o
valor da variável que contém o valor correcto do número de fatias que sobram aparecendo o
resultado numa caixa de texto dinâmica no visor do telemóvel. Se o utilizador errar aparece o
resultado errado na caixa de texto anterior e aparece o botão “Corrigir” que basicamente
inicializa as caixas de texto dos valores inseridos a zero. Se o utilizador acertar além da
mensagem que aparece de felicitação no visor do telemóvel, o clipe de filme do botão de
passar à pergunta seguinte fica activo permitindo através do evento OnRelease passar para a
pergunta seguinte.
Neste jogo as perguntas são as frames do clipe de filme da pizza que contêm as fatias que
sobram bem como o valor que lhes corresponde atribuído a uma variável, isto no nível fácil e
no nível difícil, no nível médio os valores estão guardados num array. O número da frame é
gerado aleatoriamente através da função random(), no início do jogo e ao passar para a
pergunta seguinte utilizando o número gerado para carregar a frame correspondente a esse
número através da função gotoAndStop()(Apêndice A.4 Jogo das Fracções).
5.6 Jogo da Ordenação
5.6.1 Descrição do Jogo
Quando o utilizador escolhe o jogo da Ordenação aparece a página inicial (Figura .21) que
contém um botão “Menu” que serve para voltar para o menu principal e duas partes “Parte 1”
e “Parte 2”, em que cada uma tem dois níveis “Nível 1” e “Nível 2” referentes a uma
dificuldade diferente.
24
37. CAPÍTULO 5. Estrutura e Funcionamento do Site
Figura .21 - Ecrã inicial do jogo da Ordenação.
O utilizador, neste jogo, ao escolher a “Parte 1” tanto no “Nível 1”, como no “Nível 2”,
encontrará um conjunto de números que serão usados para ser ordenados por ordem crescente
ou decrescente. Preenchendo os espaços em branco (Figura .22), com os números adequados,
o utilizador vai ganhando peças, peças essas que no final do jogo, irão estar interligadas para
representar um veículo.
Figura .22 - Ecrã do jogo á medida que o utilizador vai jogando.
No “Nível 1” o veículo a ser construído é uma mota e no “Nível 2” é um carro. A diferença
entre os dois níveis é o grau de dificuldade das tarefas, aumentando a ordem de grandeza dos
números. Durante o jogo aparecerão mensagens de texto a indicar se o utilizador vai
acertando ou não. No fim do jogo aparecerá o Riscas a indicar como se comportou o
utilizador com a respectiva pontuação e o veículo construído como mostra a seguinte figura:
25
38. CAPÍTULO 5. Estrutura e Funcionamento do Site
Figura .23 - Ecrã final do jogo no “Nível 1” da “Parte 1”.
A “Parte 2” do jogo tem como funcionalidade completar sequências de números. Para cada
espaço (rectângulo) em branco pressionado, aparecerá quatro números, para o utilizador
escolher o correcto (Figura .24) formando de igual forma os veículos.
Figura .24 - Ecrã do jogo na “Parte 2” no “Nível 2” mostrando o processo do jogo.
Em qualquer altura e em qualquer nível do jogo o utilizador pode pressionar o botão “Início”
e voltará à página inicial do jogo.
5.6.2 Competências
Este jogo tem como objectivo, desenvolver tarefas associadas à ordenação de números em
sequências crescentes e decrescentes, ao estabelecimento de relações de ordem entre números
e à utilização da simbologia > e <.
26
39. CAPÍTULO 5. Estrutura e Funcionamento do Site
5.6.3 Como foi implementado
Como já foi dito, este jogo está dividido em duas partes. Na primeira parte existe um array de
caixas de texto dinâmicas dos clipes de filme dos rectângulos a arrastar pertencente ao clipe
de filme da pergunta. Cada pergunta tem os seus valores correctos guardados num array
tendo assim um array para cada pergunta. Na segunda parte, também existe um array de
caixas de texto dinâmicas dos clipes de filme dos rectângulos a arrastar, existe um array de
valores correctos guardados para cada pergunta e existem quatro arrays de números para cada
pergunta, para a escolha do número correcto a arrastar para o rectângulo.
Tal como no jogo do Dinheiro, neste jogo tanto na parte um como na parte dois, também é
usada também a função startDrag() no evento OnPress e a função stopDrag() no evento
OnRelease de cada clipe de filme do número da pergunta. Foi também usada a função
hitTest() para detectar a colisão entre os números da pergunta e os rectângulos onde se quer
colocar esses números, função que vai ser também processada periodicamente através da
função setInterval(). No evento OnRelease dos números das perguntas são guardadas as
coordenadas inicias destes e as coordenadas de cada um dos rectângulos onde os números vão
ser colocados para o caso de existir colisão e os números poderem ficar colocados nesses
rectângulos e caso não exista colisão ou não seja permitida a colocação do número no
rectângulo o número volta à posição inicial, podendo o utilizador verificar isso mediante a cor
com que o rectângulo fica quando ocorre a colisão. Neste jogo tanto na parte um como na
parte dois as perguntas são geradas aleatoriamente e existe uma pontuação a atribuir ao
utilizador mediante o número de tentativas para acertar na colocação dos números. Essa
pontuação é atribuída numa caixa de texto dinâmica quando por fim o utilizador acerta na
colocação do número. À medida que o utilizador erra na colocação do número vai aparecendo
numa caixa de texto dinâmica uma mensagem de erro e quando o utilizador acerta aparece na
mesma caixa de texto uma mensagem de felicitação com o número de tentativas falhadas. A
pontuação máxima a atribuir por cada número colocado é de 125 unidades e o desconto da
pontuação do utilizador mediante o número de tentativas falhadas é calculado da seguinte
maneira: se o utilizador falhar uma única vez perde 25 unidades, se o utilizador falhar duas ou
mais vezes a pontuação a atribuir vai ser a pontuação máxima a dividir pelo número de
tentativas falhadas (Apêndice A.5 Jogo da Ordenação).
5.7 Jogo das Horas
5.7.1 Descrição do Jogo
Quando o utilizador escolhe o jogo das Horas aparece a página inicial (Figura .25) que
contém três botões, o botão “Menu” que serve para voltar para o menu principal, o botão
“Nível 1” e o botão “Nível 2”. Nos dois níveis, o utilizador tem que escolher as horas certas
que marca o relógio de ponteiros.
27
40. CAPÍTULO 5. Estrutura e Funcionamento do Site
Figura .25 - Ecrã inicial do jogo das Horas.
No “Nível 1” aparecerão quatro relógios despertadores dos quais só um indica a hora certa
correspondente à hora marcada no relógio de ponteiros. À medida que o utilizador vai
jogando, o Troca Tintas aparecerá a dizer se acertou ou não, como se pode observar na figura
seguinte:
Figura .26 - Ecrã do jogo no “Nível 1” mostrando como acertou.
No “Nível 2” aparecerá uma caixa de selecção que contém várias horas por extenso e só uma
indica a hora certa marcada no relógio de ponteiros. Depois de seleccionada uma hora
aparecerá um botão “Verifica” com animação, que quando pressionado, o Troca Tintas indica
se o utilizador acertou ou não, como se pode ver na seguinte figura:
28
41. CAPÍTULO 5. Estrutura e Funcionamento do Site
Figura .27 - Ecrã do jogo no “Nível 2”.
Por fim, nos dois níveis aparecerá uma mensagem indicativa de fim de jogo e um botão
“Início” que permite voltar para a página inicial do jogo.
5.7.2 Competências
Com este jogo pretendeu-se desenvolver competências associadas à utilização de
instrumentos da vida corrente relacionados com o tempo. O utilizador deverá ser capaz de ler
e comparar as horas apresentadas em diferentes meios.
5.7.3 Como foi implementado
Nos dois níveis deste jogo foi criado um relógio de ponteiros onde cada frame contém o
relógio com os ponteiros numa determinada hora. Neste jogo, as perguntas também são
geradas aleatoriamente através da função random(), por isso, o número aleatório gerado
dentro do intervalo de números das perguntas vai ser o número da frame do clipe de filme do
relógio de ponteiros que vai ser mostrada através da função gotoAndStop().
No primeiro nível foram criadas quatro instâncias de um relógio despertador que é um clipe
de filme e contém duas caixas dinâmicas, uma para a hora e outra para os minutos. Estes
relógios despertadores permitem ser seleccionados para fazer a correspondência entre a hora
destes e a hora do relógio de ponteiros. Como estes relógios despertadores permitem ser
seleccionados, fazem o papel de botões, mas, não o são devido ao facto de conterem caixas de
texto dinâmicas as quais não permitem ser pressionadas, podendo ser pressionada somente a
área do relógio despertador não preenchida com a caixa de texto. Assim os relógios
despertadores ficaram como clipes de filme podendo ser pressionada toda a área deles
incluindo as suas caixas de texto dinâmicas e alterar o seu estado (por exemplo a cor) ao
posicionar o rato em cima dele através do evento OnRollOver, ao posicionar o rato fora dele
29
42. CAPÍTULO 5. Estrutura e Funcionamento do Site
através do evento OnRollOut, ao pressionar o botão do rato através do evento OnPress, e ao
soltar o botão do rato através do evento OnRelease. Estas mudanças de estado é a cor que o
relógio despertador tem numa das suas frames que é reproduzida através da função
gotoandPlay(). Quando é seleccionado um dos relógios despertadores é verificada a igualdade
entre a hora deste e a hora do relógio de ponteiros. O código de validação está dentro do
evento OnRelease de cada uma dos relógios despertadores (Apêndice A.6.2 Nível 1).
No segundo nível foi criada uma instância de uma componente que o flash disponibiliza que é
a ComboBox (caixa de selecção), que vai conter várias hipóteses para o utilizador escolher,
em que essas hipóteses são horas escritas por extenso, sendo uma delas correspondente à hora
marcada pelos ponteiros do relógio. A validação de cada pergunta deste nível é feita ao
pressionar um botão animado, chamado “Verifica”, que contém o código de validação dentro
do evento OnRelease (Apêndice A.6.3 Nível 2).
30
43. CAPÍTULO 6. Teste ao Software
Capítulo 6
6 Teste ao Software
Os testes realizados aos jogos, foram feitos por seis crianças da familia e amigos entre os oito
e os dez anos que frequentavam o 3º ano e 4º ano.
No geral, as crianças acharam os ambientes criados, as animações, as personagens e as cores
dos jogos interessantes achando alguns difíceis, mas sempre com alguma curiosidade para
saber o que ia acontecer quando ganhavam.
Quanto ao jogo das Operações, as crianças gostaram do ambiente e acharam fácil o nível 1,
mas no nível 2 acharam um pouco difícil ter que fazer as contas mentalmente.
No jogo do Dinheiro as crianças começaram por pegar num caderno e por resolver os
problemas à medida que iam aparecendo, gostando dos desenhos, dos sons e conhecendo bem
o dinheiro, mas, tiveram muitas dificuldades na resolução dos últimos problemas.
O jogo dos Múltiplos foi interpretado e jogado com facilidade pelas crianças, elas gostaram
do jogo e acharam bastante engraçada a animação do peixe a saltar para o aquário.
As crianças no jogo das Fracções, começaram pelo nível fácil e depois foram jogando,
gostando do jogo em todos os níveis e achando o jogo com dificuldade média.
No jogo da Ordenação as crianças começaram por escolher o nível 1 da parte 1 achando o
jogo acessível e gostaram bastante dos veículos. Também gostaram do restantes níveis
achando particularmente os níveis da parte 2 (que eram para completar), um pouco mais
complicados.
Por fim, no jogo das Horas, as crianças gostaram dos sons e acharam o nível 1 mais fácil que
o nível 2 devido à dificuldade em relacionar as horas do relógio dos ponteiros com as horas
por extenso, enganando-se um pouco mais na sua escolha. Depois de jogarem e serem
questionadas, a maioria das crianças escolheu o jogo das Fracções como preferido.
Mediante os resultados destes testes foram feitos pequenos ajustes à aplicação.
31
44. CAPÍTULO 7. Conclusões
Capítulo 7
7 Conclusões
Este projecto foi desenvolvido utilizando o software Macromedia Flash 8, o qual se mostrou
indispensável para o desenvolvimento do site/jogo, visto que, é uma ferramenta robusta e
fantástica em termos de desenho vectorial (o qual foi necessário para a elaboração gráfica do
site/jogo) e em termos de linguagem de programação ActionScript (a qual foi necessária para
dar interactividade ao site/jogo).
No desenvolvimento do projecto, alguns jogos foram mais difíceis de implementar do que
outros. Para ultrapassar essas dificuldades recorreu-se ao apoio de alguns sites, tutoriais e
manuais referentes à ferramenta Macromedia Flash 8.
Os tópicos abordados na aplicação basearam-se no programa de Matemática do 1º Ciclo do
Ensino Básico. Nomeadamente, números e operações habitualmente abordados no 3º e 4º ano
de escolariedade.
Esses conteúdos foram apresentados de forma a motivar as crianças para a aprendizagem da
Matemática usando desenhos e animações que eles costumam apreciar.
Assim sendo, este projecto traduziu-se para enriquecimento pessoal não só ao nível das
tecnologias, mas também ao nível da interacção pedagógica, fundamental no desenvolvimento
de software educativo.
32
45. Bibliografia
Bibliografia
[EM 03] ESTEVES, Maria Emília - Projecto Vila Moinho Caderno de Actividades Matemática 3º Ano, 2.ª
Edição, Departamento de Investigações e Edições Educativas da Constância Editores, S.A, 2003
[GA 03] GONÇALVES, Armando - Projecto Vila Moinho Matemática 4º Ano, 2.ª Edição, Departamento
de Investigações e Edições Educativas da Constância Editores, S.A, 2003
[EM 03] ESTEVES, Maria Emília - Projecto Vila Moinho Caderno de Actividades Matemática 4º Ano, 2.ª
Edição, Departamento de Investigações e Edições Educativas da Constância Editores, S.A, 2003
[LM 04] LOURENÇO, Manuela - Organização Curricular e Programas Ensino Básico – 1.º Ciclo,
Departamento da Educação Básica, Janeiro 2004
[FR 00] FRANCESCATO Rosana [et al.] - macromedia FLASH 5.Guia de Referência do ActionScript, 1ª
Edição, San Francisco, Macromedia, Inc., Setembro 2000 de
http://www.apostilando.com/download.php?cod=98&categoria=Flash. 12 Mar. 2008
[FR 03] FRANCESCATO Rosana [et al.] - macromedia FLASH MX 2004. Guia de referência do
ActionScript, 1ªEdição, San Francisco, Macromedia, Inc., Outubro 2003 de
http://download.macromedia.com/pub/documentation/br/flash/mx2004/fl_actionscript_reference.
pdf. 17 Jul. 2008
[FP 04] FERREIRA, Pedro Cid – FLASH MX 2004. Conceitos e Prática, Lisboa, FCA – Editora de
Informática, Lda, 2004
[LM 07] LINHARES, Miguel – Exercícios de FLASH 8 & MX 2004, Lisboa, FCA – Editora de
Informática, Lda, Abril 2007
[URL1] http://israelswf.blogspot.com/2006/04/aula-1-comeando-no-flash.html
[URL2] http://www.adobe.com/support/flash/action_scripts_dict.html
[URL3] http://flashmasters.net/index.php?option=com_frontpage&Itemid=1
[URL4] http://www.orkut.com
[URL5] http://www.google.pt
[URL6] http://www.bananadesign.com.br/conteudo.asp?secao=1&subsecao=1&materia=17&id_secao=1
[URL7] http://www.truquesedicas.com/tutoriais/index.php
[URL8] http://www.eduteka.org/MI/master/interactivate/
[URL9] http://www.kirupa.com/developer/flash/index.htm
33
46. Apêndice A – Código ActionScript
Apêndice A
A Código ActionScript
A.1 Jogo das Operações
A.1.1 Página Inicial
A.1.1.1 Botão “Menu”
on(release){
loadMovie("./paginaPrincipal.swf",_root)
}
A.1.1.2 Botão “Nível 1”
on(release){
loadMovie("minhoca1.swf",_root);
}
A.1.1.3 Botão “Nível 2”
on(release){
loadMovie("minhoca2.swf",_root);
}
34
47. Apêndice A – Código ActionScript
A.1.2 Nível 1
A.1.2.1 Camada de acções
_root.acabou_mc._visible=false;
errado1_mc._visible = false;
certo1_mc._visible = false;
opseguinte1_btn._visible = false;
var operando1:String;
var operador:String;
var operando2:String;
var resultado:String;
var conclusao:String;
var cont:Number=0;
operador_txt._visible = false;
///***Array de operações***
arrayContas = new Array();
var i:Number;
arrayContas[0] = "25,"+mbchr(215)+",2,=,50";
arrayContas[1] = "30,"+mbchr(247)+",2,=,15";
arrayContas[2] = "48,-,31,=,17";
arrayContas[3] = "14,+,23,=,37";
arrayContas[4] = "30,-,11,=,19";
arrayContas[5] = "17,+,8,=,25";
arrayContas[6] = "3,"+mbchr(215)+",15,=,45";
arrayContas[7] = "16,"+mbchr(247)+",4,=,4";
arrayContas[8] = "10,"+mbchr(215)+",3,=,30";
arrayContas[9] = "65,"+mbchr(247)+",5,=,13";
arrayContas[10] = "72,+,26,=,98";
//***Função para inserção dos numeros da operação aleatória
gerada***
var jaux:Number= 0;//para nao repetir as operações
i = GerarOperacao(arrayContas);
35
52. Apêndice A – Código ActionScript
function bloquearMinhoca(b:Boolean){
_root.minhoca_mc.dividir1_btn.enabled=b;
_root.minhoca_mc.mais1_btn.enabled=b;
_root.minhoca_mc.menos1_btn.enabled=b;
_root.minhoca_mc.vezes1_btn.enabled=b;
}
function sons(s:String){
var som:Sound= new Sound();
som.attachSound(s);
som.start();
}
A.1.2.2 Botão “Operação seguinte”
on (release) {
i = GerarOperacao();
_root.pisca1.play();
operador="";
conclusao="";
_root.errado1_mc._visible=false;
bloquearMinhoca(true);
_root.certo1_mc._visible=false;
opseguinte1_btn._visible=false;
}
A.1.2.3 Botão “Início”
on (release) {
loadMovie("inicioMinhoca.swf", _root);
}
40
53. Apêndice A – Código ActionScript
A.1.3 Nível 2
A.1.3.1 Camada de acções
_root.bloquearMinhoca(false);
_root.acabou_mc._visible=false;
errado1_mc._visible = false;
certo1_mc._visible = false;
opseguinte1_btn._visible = false;
_root.verifica_btn._visible = false;
_root.limpar_btn.enabled=false;
var operador:String;
var operador2:String;
operador="";
operador2="";
var operando1:String;
var operando2:String;
var operando3:String;
var resultado:String;
var conclusao:String;
_global.op=0;
var cont:Number;
cont = 0;
//para nao aparecer o cursor de texto e
//aparecer a mao para seleccionar o pisca
operador_txt._visible = false;
operador2_txt._visible = false;
///***Array de operações***
arrayContas = new Array();
var i:Number;
arrayContas[0] = "8,"+mbchr(215)+",6,+,12,=,60";
arrayContas[1] = "3,"+mbchr(247)+",3,+,9,=,10";
arrayContas[2] = "4,-,3,+,10,=,13";
arrayContas[3] = "13,+,20,-,5,=,28";
41
54. Apêndice A – Código ActionScript
arrayContas[4] = "30,-,15,+,16,=,31";
arrayContas[5] = "17,+,5,+,18,=,40";
arrayContas[6] = "9,"+mbchr(215)+",4,+,11,=,47";
arrayContas[7] = "45,"+mbchr(247)+",5,"+mbchr(215)+",3,=,27";
arrayContas[8] = "7,"+mbchr(215)+",6,"+mbchr(247)+",2,=,21";
arrayContas[9] = "62,"+mbchr(247)+",2,+,19,=,50";
arrayContas[10] = "38,-,11,-,4,=,23";
//***Função para inserção dos numeros da operação aleatória
gerada***
var jaux:Number = 0;
i = GerarOperacao();
//++++++++++Funções++++++++++++
function GerarOperacao():Number {
var indice:Number = random(11);
while (indice == jaux) {
indice = random(11);
}
jaux = indice;
operando1 = arrayContas[indice].split(",")[0];
operando2 = arrayContas[indice].split(",")[2];
operando3 = arrayContas[indice].split(",")[4];
resultado = arrayContas[indice].split(",")[6];
return indice;
}
//***funções dos botoes da minhoca***
this.minhoca_mc.mais1_btn.onRelease = function() {
if (op==1) {
operador_txt._visible = true;
operador = "+";
_root.pisca1.gotoAndPlay(10);
_root.pisca1.stop();
} else if (op==2) {
operador2_txt._visible = true;
operador2 = "+";
_root.pisca2.gotoAndPlay(10);
_root.pisca2.stop();
42
