Jogo Interactivo de Matemática (Cálculo de operações)

Ana Alexandra Nunes da Silva Francisco Josué Mendes Gonçalves Jogo Interactivo de Matemática (Cálculo de operações) Setembro 2008 Engenharia Informática -

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 -

A Escola Superior de Tecnologia e Gestão não se responsabiliza pelas opiniões expressas neste relatório. - iii -

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 -

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 -

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 -

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 -

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 -

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 -

A.7 Página Principal... 181 A.7.1 Camada de acções... 181 A.7.2 Botão 1º e 2º ano... 181 A.7.3 Botão 3º e 4º ano... 182 A.7.4 Botão Operações... 182 A.7.5 Botão Dinheiro... 183 A.7.6 Botão Múltiplos... 183 A.7.7 Botão Fracções... 184 A.7.8 Botão Ordenação... 184 A.7.9 Botão Horas... 185 A.7.10 Clipe de filme Com/Sem Som... 185 - x -

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 -

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 dandolhes 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

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

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

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

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

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

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

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

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

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

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

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

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

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

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