Untitled - Educartec

AMBIENTE DE AUTORIA DE APLICATIVOS
EDUCACIONAIS
A Educartec adaptou o aplicativo SCRATCH (MIT - Massachusetts Institute of
Technology) para conseguir ler informações da Mesa Educacional (Imagem01).
O Scratch é um ambiente de programação visual muito simples e intuitivo, podendo
ser usado por principiantes, jovens ou adultos, que queiram iniciar-se no mundo da
programação de computadores e desenvolvimento de atividades interativas.
OBJETIVO:
Este tutorial tem como objetivo orientar no entendimento do ambiente SCRATCH,
permitindo a construção de atividades pedagógicas com interação da Mesa
Educacional.
1
2
Sumário
Introdução ao Desenvolvimento de................................................................................. 5
atividades interativas......................................................................................................... 5
Conhecendo o ambiente de desenvolvimento do SCRATCH........................................ 8
Produzindo ou Importando Cenários............................................................................... 10
Produzindo ou importando personagens....................................................................... 14
Detalhando um pouco mais o Armazém de Comandos.............................................. 16
Características dos Blocos de Comandos....................................................................... 17
Animando e movimentando o personagem pelo cenário............................................ 19
Mudando a aparência do personagem......................................................................... 26
Praticando - I....................................................................................................................... 29
Controlando a Aplicação e Personagens........................................................................ 33
Só existem dois valores lógicos: verdadeiro / falso....................................................... 35
Trabalhando com listas..................................................................................................... 38
Praticando - II...................................................................................................................... 39
Trabalhando com Desenhos e Sons................................................................................ 42
Praticando - III..................................................................................................................... 42
Praticando - IV.................................................................................................................... 49
Dando Sensibilidade e Interatividade aos Personagens............................................... 50
Conhecendo os Últimos Operadores.............................................................................. 61
Trabalhando com a Mesa Educacional e o Scratch....................................................... 65
Criando Aplicativos Educacionais para a Mesa............................................................. 67
APLICATIVO EDUCACIONAL DOS SONS INICIAIS............................................................... 69
CONCLUSÃO....................................................................................................................... 92
3
4
Introdução ao Desenvolvimento de
atividades interativas
Elementos básicos de uma atividade
Uma atividade pedagógica no SCRATCH pode conter alguns elementos básicos:
Uma imagem de fundo
É uma imagem que fica de fundo no cenário e onde tudo acontece sobre ela. Esta
imagem deve ter coerência com o assunto que está sendo tratado.
Por exemplo, para uma atividade que tenha como objetivo permitir que o aluno
ordene números de 0 a 9, a imagem de fundo ideal é algo que lembre números em
sequência, e até mesmo dê dicas para o aluno sobre a solução do que está sendo
solicitado.
Os personagens
Os personagens são os elementos que irão interagir na cena, neste exemplo os
personagens seriam os números de 0 a 9.
Poderíamos ter aqui ainda outros tipos de personagens, tais como animais,
pessoas, etc.
5
IMPORTANTE: para que o personagem se encaixe perfeitamente no cenário, o
ideal é que o arquivo seja no formato PNG, ou seja, com transparência.
Trilhas de áudio
As trilhas de áudio podem ou não existir dentro de uma atividade.
São na verdade arquivos de áudio gravados e utilizados dentro da atividade.
Podem ser utilizados para:
1) Representar a fala de um personagem;
2) Dar uma instrução ao aluno;
3) Representar um som ambiente.
Planejando a atividade:
Para desenvolver uma atividade pedagógica o primeiro passo é pensar em um
roteiro básico para sua criação. Vamos a um exemplo prático:
Criar uma atividade que permita ao aluno completar uma sequência numérica,
indo de 0 a 9.
Rabisque uma estória para sua atividade, pois assim será possível entender a
usabilidade do que você está criando.
6
Complete de 0 a 9.
Complete de 0 a 9.
7
Conhecendo o ambiente de desenvolvimento do
SCRATCH
Para abrir o Scratch dê um duplo clique no ícone EDUCARTEC em sua
área de trabalho:
Você terá então o ambiente aberto em sua tela:
Armazém de Comandos - com oito diferentes caixas cheias
de comandos, sendo: MOVIMENTO / APARÊNCIA / SOM /
CANETA / CONTROLE / SENSORES / OPERADORES / VARIÁVEIS.
Comandos – esta é a área dos comandos. Os comandos
variam conforme o bloco aberto do Armazém de Comandos.
Neste caso os comandos abertos são os de Sensores, de cor
azul claro.
Para abrir novos comandos basta dar um duplo clique
no bloco desejado no armazém de comandos.
8
Área de programação – é aqui que são arranjados os
blocos de comandos, os personagens (trajes) e os sons,
cada um em uma aba da janela.
Barra de menu – é por meio da barra de menus que você
abre, salva e exporta projetos, define a velocidade de
execução da atividade e comprime imagens e sons para
ocuparem menos espaço de armazenamento.
Palco - é onde tudo acontece. Similar ao palco de um teatro,
onde os cenários e os atores aparecem, interagindo com
falas e ações, neste caso, por meio das programações dos
blocos de comandos.
Bastidores – é onde ficam armazenados os personagens
(atores) que participarão da atividade que se desenvolverá
no palco.
Cenários – é nesta parte que ficam as imagens que servirão
de fundo de tela (cenário) para o ambiente da estória.
Ferramentas de Manipulação – para manipulação dos
personagens, permitindo clonar, apagar, aumentar e
diminuir.
Ferramentas de Criação – permite desenhar um
personagem (sprite) ou então abrir um pronto que esteja em
um arquivo de imagem, preferencialmente do tipo PNG com
transparência.
9
Produzindo ou Importando Cenários
Os cenários como já sabemos, são as imagens de fundo de tela que irão compor
nossa cena.
Estas imagens podem ser criadas com recursos internos de desenho
ou importadas de arquivos de imagens externos. Para criar uma imagem
de cenário dê um duplo clique na miniatura do palco (quadrado branco)
na área de cenários.
Neste momento a aba de fundo de tela aparecerá na
parte superior da área de programação. Caso esta aba
não esteja selecionada dê um clique para selecionar e
expor seu conteúdo.
Você pode dar um nome para este cenário criado.
Para criar novos cenários dentro do aplicativo você tem três opções:
1) Criar um desenhando com editor de pintura;
2) Importar um pronto usando um arquivo externo de imagem;
3) Capturar um cenário com a webcam (tirar uma foto).
Vamos dar uma olhada no editor de
pintura, para tal clique no botão Pintar.
Será aberta a tela do editor:
O editor é uma espécie de Paint do
Windows, com alguns recursos bem
interessantes. Veja abaixo a função de
cada ícone.
Ampliar todos os objetos desenhados na tela ou somente
a parte selecionada.
Reduz todos os objetos desenhados na tela ou somente a
parte selecionada.
Rotaciona no sentido anti-horário todos os objetos
desenhados ou somente o selecionado.
Rotaciona no sentido horário todos os objetos desenhados
ou somente o selecionado.
10
Inverte horizontalmente (espelhar horizontal) todos os
objetos desenhados ou somente o selecionado.
Inverte verticalmente (espelhar vertical) todos os objetos
desenhados ou somente o selecionado.
Seleciona o pincel de pintura de mão livre e seu tamanho.
Seleciona a borracha e seu tamanho.
Seleciona a ferramenta de preenchimento. Você pode
optar pelo tipo de preenchimento chapado ou gradiente.
Seleciona a ferramenta de desenho de retângulo ou
quadrado. Você pode optar ainda pelo tipo com e sem
preenchimento.
Para desenhar um quadrado
pressionada a tecla SHIFT.
perfeito
mantenha
Seleciona a ferramenta de desenho de elipse ou
circunferência. Você pode optar ainda pelo tipo com e
sem preenchimento.
Para desenhar uma circunferência perfeita mantenha
pressionada a tecla SHIFT .
11
Seleciona a ferramenta de desenho de linha e sua
expessura de traço.
Para desenhar uma reta em ângulo de 90 graus mantenha
pressionada a tecla SHIFT.
Seleciona a ferramenta de texto e seu arquivo de fonte e
tamanho.
Ferramenta de seleção de parte do desenho. Com esta
ferramenta é possível que a ação executada reflita
somente na parte selecionada, como por exemplo a ação
de reduzir e ampliar.
Ferramenta que permite selecionar uma área que servirá
logo após como uma espécie de carimbo.
Ferramenta de seleção de uma cor.
Paleta de seleção de cores. Ao clicar no ícone lateral você
alterna entre os dois tipos de paleta de cores.
Com esta ferramenta você alterna entre duas cores
predefinidas.
Com esta ferramenta você insere na tela duas linhas guias
que indicam o centro da imagem desenhada.
Ferramenta de zoom mais e zoom menos de tela. Permite
trabalhar as imagens em detalhes.
12
Para importar uma imagem de fundo de tela já
pronta, basta clicar no botão Importar.
Será aberta a caixa de diálogos Importar imagem de fundo. Selecione o diretório
onde está a imagem e logo após dê um clique sobre a imagem desejada e outro
clique sobre o botão ok.
Você terá agora seu palco com a nova imagem
de fundo (novo cenário). Observe que o SCRATCH
automaticamente coloca sua resolução de imagem
para 480 x 385 pontos de tela (pixels).
Você pode ainda editar a imagem de fundo
usando o editor ou criar uma cópia idêntica da
imagem.
Uma outra opção para produzir a imagem de
fundo para seu cenário é capturando uma imagem
com sua webcam. Pode ser uma imagem impressa ou uma cena real.
Posicione a imagem que você deseja capturar
da melhor maneira possível e clique no botão com
desenho de uma câmera fotográfica e depois no
botão Feito.
Você pode usar
as ferramentas de
edição para ajustar
da melhor maneira a
imagem capturada.
13
Produzindo ou importando personagens
Os passos para desenhar, importar ou capturar uma imagem para servir de
personagem são similares aos passos para a produção de imagens de fundo de
cenário, porém antes de prosseguir, temos que entender alguns conceitos de um
personagem.
Os personagens são formados por um ou mais sprites. Os sprites são quadros da
animação de movimeto de um personagem. Um personagem com um único sprite
é um personagem estático, já um personagem com vários sprites pode simular um
movimento.
Veja o exemplo de personagem abaixo e seus sprites:
Se você observar bem verá que existem apenas quatro imagens, sendo que a
posição 1 é igual a posição 6, ou seja, a posição inicial é igual a posição final, e a
posição 2 é igual a posição 5. Esta técnica permite a ilusão de um movimento contínuo
(em loop), onde o personagem inicia e finaliza o movimento na mesma posição.
IMPORTANTE - Quanto maior for o número de quadros intermediários simulando
posições diferentes do movimento, maior será a qualidade da animação na tela.
Vamos a um exemplo passo a passo para montar o personagem “Menino” com
os sprites do exemplo citado acima. Este exemplo subentende que você já possui em
seu computador os quadros na animação necessários (sprites).
Baixando os arquivos para os projetos:
Para o desenvolvimento das atividades de todo o livro, entre no link abaixo e faça
download do pacote de arquivos de imagens e projetos Scratch.
www.educartec.com.br/imagemambienteautoria
IMPORTANTE – salve os arquivos em um diretório conhecido, pois você necessitará
localizar estes arquivos dentro do SCRATCH.
Vamos agora a uma sequência passo a passo para a criação do personagem
com animação dentro do SCRATCH:
1) Clique no botão Escolha um Sprite do Arquivo
14
;
2) Selecione a imagem do primeiro sprite;
Será criado então o objeto para o personagem.
Você pode dar um nome ao objeto que lembre o
personagem, neste caso usamos o nome Menino. Acesse
o guia Trajes e veja que o personagem possui apenas um
sprite.
Para inserir os demais quadros da animação (sprites),
clique no botão importar
e carregue as demais
imagens: per2.png, per3.png,- per4.png, per5.png e per6.
png.
Pronto, temos agora o personagem pronto para ser
animado com seus seis sprites.
15
Detalhando um pouco mais o Armazém de Comandos
O Armazém de comandos é formado por oito grupos de comandos, sendo:
Comandos para trabalhar movimentação, posicionamento e
rotação de personagens e objetos no palco.
è De cor azul
Comandos para animar personagens, mudar a cor, aplicar
efeitos gráficos, mudar o tamanho, ocultar e apresentar objetos
e personagens, mostrar mensagens em tela e para mudar a
camada dos objetos.
è De cor roxa
Comandos para tocar sons diversos e narrações, notas musicais
de diversos instrumentos, definir volume e definir ritmo.
è De cor pink
Comandos para desenhar no palco, mudando a cor e a
espessura do traço, bem como usar o recurso de carimbo.
è De cor verde
Comandos que controlam a ordem e o momento que as
ações serão executadas dentro da sua criação.
è De cor laranja
Estes comandos, como o próprio nome sugere, permite que
os persongens virtuais ganhem sentidos, tais como tato e
audição. Com estes comandos é possível dar ao personagem
a capacidade de perceber o ambiente, como por exemplo,
saber a distância entre os demais elementos do palco, fazer
perguntas e aguardar respostas.
è De cor azul claro
Estes comandos darão acesso aos operadores matemáticos,
operadores condicionais e operadores de texto. Os comandos
condicionais complementam os comandos de Controle no
fluxo de acontecimento das ações.
è De cor azul verde claro
Os comandos de variáveis criam espaços na memória do
computador para guardar informações que podem ser
registradas, alteradas e acessadas enquanto o aplicativo
está em execução. São recursos muito úteis na criação de
uma atividade interativa.
è De cor laranja escuro
16
Características dos Blocos de Comandos
Tal como vimos no armazém de comandos, os blocos são agrupados por cores.
Existem características dos blocos de comandos que podem ser identificadas pelo
formato dos blocos, veja abaixo:
Empilhamento:
Estes blocos têm uma cavidade na parte de cima e uma saliência na base, tal
como
. Estas saliências e encaixes servem para empilhar os blocos de
forma ordenada e lógica, criando uma ideia de sequência de acontecimento.
Encaixe:
Os blocos que permitem encaixe de outros
blocos tem um formato de “C” e recebem
dentro deles diversos arranjos de blocos com
capacidade de empilhamento.
Veja a composição criada.
Entrada de informações digitada:
A entrada de informações digitada é feita em blocos que possuem um pequeno
campo branco de bordas arredondadas, tal como
. Neste caso, o
número 10 é digitado e comandará que o personagem vá para a coordenada 10 do
eixo X do palco.
Entrada de informações por escolha em uma lista dinâmica ou lista fixa:
A entrada de informações por lista ocorre, por
exemplo, com o comando ao mude para o traje.
Este comando permite criar animações de
personagens utilizando diversas imagens que
representam os quadros da animação. Os nomes
apresentados
na
lista
são
carregados
dinamicamente com os nomes das imagens importadas para formar a animação do
personagem.
As listas podem também apresentar informações fixas.
17
É importante informar que este tipo de lista
também aceita uma entrada de valor diferente
dos valores predefinidos, como por exemplo, 75 graus.
Tipo de dados
Existem três tipos básicos de entrada de informações, sendo:
TIPO
ACEITA
Numérico
Números digitados e
bloco de comando que
retorne números.
EXEMPLO
- bloco com
cantos arredondados.
Alfanuméricos
Lógicos
(boleanos)
Números e letras digitados
ou escolhidos em uma
caixa de seleção ou ainda
blocos de comando que
retornem números, letras
e condições lógicas.
Aceitam apenas blocos de
comando que informem
verdadeiro ou falso.
Entrada de informações por bloco de comando
Antes de ver este tipo de entrada temos que saber que existem os blocos que
possuem a característica de repórteres, ou seja, dão alguma informação para ser
usada dentro da composição dos blocos de comando.
Por exemplo, poderíamos criar uma composição de comandos que mudará a
posição X do personagem de forma dinâmica, tal como
. Este recurso
dá a entrada da nova posição do personagem pelo comando que retorna a posição
atual do ponteiro do mouse no eixo X, bastando encaixar
um dentro do outro, fazendo com que o personagem siga
o ponteiro do mouse no eixo X (veremos este assunto de
forma mais completa mais a frente).
Para usar este tipo de composição de blocos de
comando temos que seguir a regra de encaixe:
18
Monitoramento:
Alguns blocos tipo repórter tem uma caixa de checagem
. Se a caixa
for selecionada aparecerá no palco um monitor, mostrando o valor do repórter na
.
ocasião e atualizando esse valor, à medida que for mudando
Geralmente este recurso é utilizado para mostrar a pontuação alcançada em
uma atividade (veremos este assunto mais em detalhes).
Ponto de partida:
Os blocos de comandos de pontos de partida possuem sua parte superior
arredondada e servem para dar o início em uma ou mais ações e sempre iniciam
com o termo Quando...
São eles:
Quando clicado o ícone iniciar comandos (bandeira verde na
parte superior direita do palco).
Quando pressionada a tecla especificada na lista, no caso do
exemplo da imagem, a tecla <espaço>.
Quando um personagem ouvir de outro uma solicitação (um
anúncio).
Quando clicado com o botão esquerdo do mouse sobre o
objeto no palco.
Animando e movimentando o personagem pelo cenário
Importante salientar que a animação de um personagem é feita por meio da ação
de mostrar e esconder os sprites de forma sequencial e a movimentação é realizada
por um comando de programação para mudar a posição do personagem na tela.
Vamos construir passo a passo cada forma de animação e movimentação:
Animando um personagem:
Para animar um personagem utilizaremos os primeiros comandos de bloco.
Selecione no Armazém de Comandos o
bloco de comandos Controle com um clique
.
Logo em seguida arraste o comando de
blocos Quando tecla ... pressionada e o
comando de bloco Espere ... segundos para
a área de comandos.
19
Observe que o primeiro comando serve para identificar qual
tecla está sendo pressionada. Como padrão é configurado a tecla
<espaço>, mas podemos configurar qualquer tecla, bastando clicar
na seta e logo em seguida na tecla desejada.
Configure o segundo comando com o tempo de 0.05 segundos
(use ponto e não vírgula).
Este tempo é que define a velocidade da animação do
personagem.
Mude agora para o bloco de comando Aparência
a área de Comandos o comando de bloco Mude para o traje ...
e arraste para
.
Altere o traje para o sprite per2, pois o sprite per1 é o
que já está na tela.
Arraste e aproxime os blocos para que fique com a
formação igual a da imagem.
Quando você aproxima os dentes de encaixe dos
blocos eles se atraem, como um ímã que atrai um
metal. Basta arrastar, aproximar e soltar o bloco.
Vamos agora completar a animação, para tal temos que duplicar os blocos de
animação do personagem para ir até o último Sprite, no caso o Traje per6.
Clique com o botão direito sobre o bloco mude para
o traje... e logo em seguida clique sobre o comando
duplicar.
O bloco de comando duplicado ficará colado no
ponteiro do mouse. Posicione na parte inferior dos
blocos iniciais e clique com o botão esquerdo do
mouse para colar os blocos duplicados. Logo em
seguida altere o
sprite para per3.
Você terá no final a seguinte construção
de blocos de comandos na tela. Faça o teste
pressionando a tecla de <espaço>, seu
personagem deverá realizar o movimento no
palco.
20
Movendo o personagem pelo cenário
Antes de entender como usar os comandos para
movimentar um personagem pela tela, temos que
entender o sistema de coordenadas e posicionamento
dos objetos (personagens, etc) no
palco.
O centro do palco é o ponto 0,0.
Para direita e para cima são valores positivos, já para
baixo e para esquerda são valores negativos. Podemos
considerar que temos uma resolução de 480 por 360
pontos para a tela do palco.
Mas como saber a coordenada X,Y de um
ponto específico do palco?
Basta posicionar o ponteiro do mouse neste
ponto e olhar a coordenada indicada na base da
janela do palco.
Vamos agora conhecer o bloco de comandos
de Movimento
, para tal dê um
clique sobre ela para abrir seus comandos.
Soma o número especificado na coordenada X do
personagem.
Posiciona o personagem na coordenada X
especificada.
Soma o número especificado na coordenada Y do
personagem.
Posiciona o personagem na coordenada Y
especificada.
Posiciona o personagem na coordenada X, Y
especificada.
Leva o personagem da sua posição atual
até a posição especificada dentro do tempo
determinado, criando posições intermediárias.
Apresenta no palco um painel que informa a
posição da coordenada X do objeto (-240 a 240).
21
Apresenta no palco um painel que informa a
posição da coordenada X do objeto (-180 a 180).
Gira o personagem no sentido horário o número
de graus especificado.
Gira o personagem no sentido anti-horário
o número de graus especificado, de forma
acumulativa.
Aponta o personagem para a direção especificada.
Apresenta no palco um painel que informa a
direção do personagem em graus dentro do palco.
Muda a direção do personagem em 180º quando
tocar na borda do palco.
Muda o personagem para a posição do cursor do
mouse ou de outro personagem dentro do palco.
Aponta o personagem para a direção do cursor
do mouse ou de outro personagem dentro do
palco.
Antes de começar a usar os comandos de movimento, temos que entender e
configurar os bloqueadores de rotação dos personagens.
Estilos de Rotação
Estes três botões controlam as limitações e permições de giro do personagem
quando este muda de direção:
Rotação: permitida a rotação do personagem sem restrição.
Esquerda-Direita: restringe a rotação do personagem para esquerda e
direita.
Sem Rotação: personagem sem nenhum tipo de rotação.
Animando um personagem:
São inúmeras as combinações de comandos de blocos que podem ser arranjados
para programar a movimentação de um personagem ou objeto pelo palco.
Outro entendimento que devemos ter antes de animar um personagem ou objeto
22
é a vista utilizada. No mundo 2D, onde movimentamos no eixo X e eixo Y apenas,
podemos animar um personagem na vista SUPERIOR ou na vista FRONTAL (existe
também a vista ortogonal, que não será tratada neste livro).
VISTA
MOVIMENTO NO EIXO
DESLOCAMENTO PARA
Superior
X
Esquerda /Direita
Superior
Y
Para frente / para trás
Frontal
X
Esquerda /Direita
Frontal
Y
Para cima / para baixo
Vamos construir um conjunto de blocos de forma simples, porém eficiente, que
permitirá a movimentação do personagem para todos os lados. Vamos usar em
nosso exemplo a vista superior.
1) Você pode usar uma imagem vista de cima. Para nosso exemplo vamos usar
a imagem de um carro (para baixar a imagem acesse www.educartec.com.br/
imagens/carro.png);
2) Clique no ícone de escolha de sprite
;
3) Acesse a pasta onde está a imagem, selecione a mesma e clique ok;
4) Acesse a guia trajes e clique no botão Copiar;
23
5) Clique no botão Editar do segundo sprite (o copiado) e gire a imagem. Para
tal no editor de pintura clique três vezes no botão
para deixar o carro virado
totalmente para a esquerda e clique Ok;
6) Repita esta operação até ter os quatro sprites, conforme a imagem;
7) Vamos agora programar a movimentação do nosso carro. Para tal acesse a
guia Comandos;
Importante – entenda que estamos dentro da programação do personagem
carro. Tudo que for feito aqui influenciará a princípio e por padrão o comportamento
deste personagem somente.
Abra o bloco de comandos
bloco
e arraste para a área de comandos o
.
8) Abra o bloco de comandos
bloco
.
e arraste para a área de comandos o
9) Abra o bloco de comandos
bloco
.
e arraste para a área de comandos o
10) Organize os blocos conforme a imagem abaixo:
Configure a tecla <seta para a direita>, o traje carro3 e o valor para incrementar
o eixo X do personagem em 3 pontos no palco.
O carro3 é o sprite que tem sua posição virada para a direita.
Quanto maior o valor de incremento do eixo X, maior é a velocidade do carro.
24
11) Repita estes passos até ter os comandos que movimentam o personagem
carro para a esquerda, para cima e para baixo. Utilize o botão direito do mouse
sobre o comando de controle (amarelo) e selecione o comando duplicar. Arraste e
solte a cópia no local desejado.
No final do trabalho você deverá ter:
Lembre-se de alterar as teclas de movimentação para setas para direita,
esquerda, acima e para baixo, bem como para retornar no eixo X (para esquerda) e
Y (para baixo) basta usar o valor negativo, no caso -3.
Temos um problema para resolver, nosso carro ultrapassa os limites do palco.
Para resolver esta situação, vamos usar o conjunto de comandos abaixo:
Vamos entender o que foi feito:
Usamos o bloco Se
para avaliar se uma situação é verdadeira, ou seja,
se a posição do carro no eixo X for maior (símbolo >) que 205. Esta condição se
confirma quando o personagem carro chega ao final do palco e o valor da posição
no eixo X ultrapassa o valor de 205.
Quando isso acontece é executado o comando que está dentro do bloco amarelo
de condição Se, ou seja, ele decrementa (subtrai) a posição do carro em 3 pontos,
mantendo o carro estático, mesmo que pressionemos a tecla <seta para direita>.
Para criar a condição foi usado o bloco do tipo
que permite comparar
se um valor é maior que outro
. No operador direito da comparação colocamos
o comando do tipo repórter que informa a posição X do personagem
e do
lado esquerdo o valor máximo que o personagem deve atingir, neste caso 205.
25
Use estes blocos e a lógica utilizada e construa a mesma estrutura de blocos para
as demais situações de movimentação do personagem carro. No final você terá algo
como:
IMPORTANTE: Tome cuidado com os números negativos dos eixos X e Y. Vamos
relembrar: o número -209 é menor que o número -206, por isso construa sua lógica
com cuidado.
Vamos voltar a ver em mais detalhes os comandos
(lógicos).
condicionais
Mudando a aparência do personagem
Para mudar a aparência de um personagem, ou até mesmo do palco, utilizamos
o bloco de comandos
. Veremos a finalidade de cada comando a seguir:
Como já foi visto anteriormente, o personagem
pode ter várias imagens, conhecidas como
Sprite e chamadas de Trajes internamente
em nosso ambiente de autoria.
Este comando realiza a seleção do traje
que vai ser mostrado no palco.
Se selecionada sua caixa, coloca um painel
no palco que informa o número do traje que
está em uso no momento. Pode ser usado
nos arranjos de comando para informar o
número do traje.
26
Muda o traje do personagem para o próximo
da lista. Se estiver usando o último traje da
lista, retornará para o primeiro traje.
Coloca na tela um balão de conversa (tipo
revista em quadrinhos) pelo tempo especificado
(em segundos) e com o conteúdo digitado.
Coloca na tela um balão de conversa (tipo
revista em quadrinhos) com o conteúdo
digitado e fixo (sem tempo para desaparecer).
Coloca na tela um balão de pensamento (tipo
revista em quadrinhos) pelo tempo especificado
(em segundos) e com o conteúdo digitado.
Coloca na tela um balão de pensamento
(tipo revista em quadrinhos) com o conteúdo
digitado e fixo (sem tempo para desaparecer).
Incrementa ou decrementa o efeito
selecionado, neste caso o efeito fantasma,
que aplica ao personagem um efeito de
transparência. Este comando também pode
ser aplicado às imagens do palco.
Muda o valor do efeito selecionado para o
valor digitado. Este comando também pode
ser aplicado às imagens do palco.
Limpa os efeitos gráficos aplicados ao
personagem ou ao palco.
Incrementa ou decrementa o tamanho do
personagem, aumentando ou diminuindo
seu tamanho conforme o valor digitado. Para
diminuir o tamanho utilize valores negativos.
Redimensiona o tamanho do personagem
utilizando porcentagem. No exemplo de 110%
estamos aumentando em 10% o tamanho real
do personagem, pois 100% é o tamanho original.
Se colocassemos -50% estaríamos reduzindo
pela metade o tamanho do personagem.
27
Se selecionada sua caixa, coloca um
painel no palco que informa o tamanho
atual do personagem, sendo que o valor
100 representa o tamanho original do
personagem. Pode ser usado nos arranjos
de comando para informar o tamanho atual
do personagem.
Faz o personagem desaparecer e não ser
detectado pelos demais elementos do palco.
Faz o personagem reaparecer e voltar a ser
detectados pelos demais elementos do palco.
Os objetos e personagem ao serem inseridos
no palco assumem cada um uma camada, ou
seja, o último objeto inserido assume a camada
mais superior, sobrepondo e escondendo
os demais. Este comando coloca o objeto ou
personagem sobre os demais, independente
da camada que se encontra no momento.
OBS: quando movemos um objeto ou
personagem como o arrastar do mouse no
palco, este também assume a camada mais
superior.
Muda para trás de outros objetos ou
personagens o número de camadas
especificado.
COMANDOS EXISTENTES SOMENTE PARA SEREM USADOS NO PALCO
Muda para o fundo (cenário) de tela cujo
nome for especificado.
Muda para o fundo de tela seguinte (cenário
seguinte).
Se marcada a caixa de seleção coloca
um painel no palco informando o número
do fundo de tela utilizado no momento.
Serve ainda para informar comandos que
necessitem receber o número correspondente
ao fundo de tela atual.
28
Praticando - I
Precisamos criar uma atividade onde um professor pergunta e um aluno
responde operações simples de soma entre dois números que podem variar entre
1 a 10. Não podemos usar números fixos, ou seja, a cada vez que a professora
pergunta ela escolhe números diferentes.
Para criar esta atividade vamos necessitar conhecer mais sobre variáveis. Tal
como citado anteriormente sabemos que uma variável é um espaço na memória
que guarda uma informação. Este espaço na memória recebe um nome para poder
ser acessado e alterado quando necessário.
Para criar uma variável no Scratch acesse o bloco de comandos
e
clique no comando
, quando será aberta a caixa de diálogo abaixo:
Considerando que a professora passará para o aluno dois números para serem
somados, vamos criar duas variáveis, uma com nome de Operador1 e outra com
nome de Operador2.
Deixe marcada a opção para todos os objetos para que esta variável possa
ser usada pelos demais personagens, no caso o aluno. Se colocássemos para este
objeto apenas as vairáveis criadas poderiam ser usadas apenas pelo personagem
criador, no caso a professora.
Teremos então no lado esquerdo da tela as variáveis criadas, as
quais na verdade se tornaram comandos do tipo repórter, ou seja,
podem informar a qualquer momento o valor que está contido em cada variável.
Vamos agora posicionar os personagens. O aluno você provavelmente já tenha
em seu computador, pois em atividades
anteriores já foi baixado. A professora você
deve baixar em www.educartec.com.br/
imagens/professora
Posicione
e
redimensione
os
personagens no palco de maneira que
fiquem similar a imagem:
Renomeie os
Professora e Aluno
.
personagens
para
29
Vamos agora conhecer alguns novos comandos. Clique no personagem Professora
para acessar a guia de Comandos. Abra o bloco de comandos
e arraste
para a área de comandos os comandos
e o comando
anuncie para todos
. Clique na lista, quando será aberta a
opção novo..., clique sobre ela e entre com o nome da mensagem.
Este comando é a forma que o personagem, no caso a professora, vai se
comunicar com os demais personagens no palco. O comando Anuncie...Responda
é o mesmo que quando uma pessoa dá um sinal para outra executar algo, neste
caso ela dá um sinal ao aluno para que ele responda.
Teremos então na área de comandos do personagem professora.
É importante entender que a palavra usada responda poderia ser qualquer outra,
como por exemplo, resolva.
Bom, agora vamos colocar na área de comandos os blocos repórter
que informar o valor da variável Operador1 e Operador2. Lembrando
que estas variáveis estão vazias, pois ainda não receberam nenhum valor dentro
delas.
Temos um problema a ser resolvido, como a professora vai escolher números
entre 1 a 10. Para solucionar esta questão acesse o bloco de comandos
e arraste para a área de comandos dois comandos:
Estes comandos realizam um sorteio aleatório (randômico) de um número que
esteja entre o número inicial definido, no caso o número 1, e o segundo número, no
caso o número 10. Estes dois números sorteados servirão para ocupar as variáveis
Operador1 e Operador2.
30
Precisamos agora de um comando que coloque estes valores nas variáveis. Acesse
novamente o bloco de comandos
e arraste para tela de comandos
duas cópias do comando
. Logo após configure para que
um dos comandos mude a variável Operador1 e outro mude a variável Operador2.
Falta agora fazer a professora falar para o aluno qual a soma ele deve realizar.
Acesse
o
bloco de comandos
e insira o
. Este comando coloca na tela um balão de fala.
comando
Mas o que exatamente a professora tem que dizer ao aluno?
Ela tem que dizer qual a operação de soma ele deve realizar, algo como:
Some (Operador1) + (Operador2)
Precisamos
então
.
juntar
estas
Para tal acesse o bloco de comandos
área de comandos o comando
informações
dentro
do
comando
e arraste três vezes para a
Pronto, temos tudo que necessitamos para programar os comandos do
personagem professora:
31
Vamos então começar a montar nosso fluxo de comando.
Primeiramente vamos colocar os valores sorteados nas variáveis...
Teremos então...
Agora temos que compor o texto que será inserido no balão de fala da professora.
Temos três blocos de comandos junte. Vamos usar inicialmente dois para compor...
Digite Some no primeiro espaço e coloque o
comando Operador1 no segundo.
Digite + no primeiro espaço e coloque o comando Operador2 no segundo.
Por final use o último bloco junte e insira as composições acima em cada espaço.
Teremos então...
Agora
coloque
toda
.
a
composição
criada
dentro
do
comando
Depois altere o tempo para 3 segundos.
Finalize então toda a programação da personagem professora, juntando os
blocos na seguinte ordem.
Depois altere o tempo para 3 segundos.
Começaremos agora a construir os comandos do personagem
Aluno, para tal dê um clique sobre o personagem para acessar sua
guia de comandos.
32
Crie a estrutura de comandos abaixo:
O comando
é um recurso que fica aguardando o comando
ser acionado (este comando está no bloco de comandos
da personagem professora).
Para somar os valores existentes dentro das duas variáveis
e
usamos o comando de soma
do bloco
.
Compomos então
...
E depois finalizamos a composição com
.
O que esse conjunto de comandos vai executar
na verdade é o somatório dos números inseridos
nas variáveis e apresentar dentro de um balão
de fala do personagem Aluno, toda a vez que o
personagem professora anunciar Responda.
Controlando a Aplicação e Personagens
Vamos conhecer agora de forma completa os blocos de comandos de
e dar alguns exemplos de uso.
É com estes comandos que colocamos uma espécie de Inteligência Artificial em
nossos aplicativos educacionais.
Como já visto, os comandos que disparam uma ação são:
Quando clicado o ícone iniciar comandos (bandeira
verde na parte superior direita do palco).
Quando pressionada a tecla especificada na lista, no
caso do exemplo da imagem, a tecla <barra de espaço>.
33
Quando um personagem ouvir de outro uma solicitação
(um anúncio)
.
Quando clicado com o botão esquerdo do mouse
sobre o objeto no palco. Neste comando a palavra
objeto... assume o nome do objeto.
Ação contínua (loop contínuo)
Em diversas situações vamos necessitar para criar nossa aplicação educacional
algo que funcione ininterruptamente dentro de nosso fluxo de ações. Para estes
casos usaremos:
Este comando executa ininterruptamente o conjunto de blocos abrangidos em
seu interior e só para se for clicado ou se for acionado o comando de parada .
Vamos a um exemplo simples:
Vamos fazer com que uma imagem, no caso um balão vermelho, excute pequenos
movimentos contínuos na tela, como se estivesse flutuando.
Abra
a imagem de um balão vermelho para servir de sprite para um novo
. Baixe esta imagem do endereço - www.educartec.com.br/
personagem
imagens/balao_vermelho.png
Crie agora na guia de comandos do personagem a seguinte estrutura de blocos.
O que ocorrerá na verdade é que ininterruptamente (sempre) ocorrerá um
pequeno movimento para cima e para baixo, conforme os blocos de comando
deslize em ... segundos para X , Y. Este bloco de comandos somente será finalizado
se pressionada a tecla <p>.
Lembre-se, o comando
todos os personagens e do palco.
34
realmente irá parar todos os comandos, de
Ação contada (loop limitado)
É comum necessitarmos executar uma ação por um número definido de vezes.
Para estes casos usamos:
O número de vezes pode ser digitado ou fornecido por um bloco de
comando repórter, que retorne um número.
Vamos a um exemplo simples:
Neste exemplo, quando a personagem receber
um clique, sua imagem irá piscar na tela, ou seja,
aparecer e desaparecer pelo números de vezes,
que pode variar entre 1 e 5 vezes.
Antes de darmos sequência no aprendizado dos blocos de
conhecer mais sobre os blocos
lógicas.
, vamos
que retornam resultados de operações
Mas o que é uma operação lógica?
Usamos operações lógicas o dia todo em nossas vidas. Por exemplo, quando
falamos assim: se eu comprar esta TV esse mês não vai sobrar dinheiro e eu não
poderei pagar a mensalidade da faculdade.
Só existem dois valores lógicos: verdadeiro / falso.
Nas operações lógicas podem participar números, letras ou valores lógicos.
Por exemplo:
1 > 2 - retorna falso
2 > 1 - retorna verdadeiro
2 = 1 - retorna falso
Casa = Caza - retorna falso
Existem comandos operadores do tipo repórter que nos informam se uma
operação lógica retorna verdade ou retorna falso.
As comparações lógicas são realizadas utilizando operadores matemáticos:
=
>
<
De comparação
Maior que
Menor que
35
Veja a aplicação com os comandos:
O número 1 é menor que o número 2, por isso retorna
verdade.
A letra f não é menor que a letra a, por isso retorna
falso (a letra a vem antes no alfabeto, por isso tem valor
menor que f).
O conjunto de caracteres Alexandre é igual ao conjunto
de caracteres alexandre, por isso retorna verdade.
Veja que o Scratch não diferencia letras maiúsculas
de minúsculas.
Foi dito acima que podemos fazer operações lógicas com valores lógicos e que
retornam valores lógicos. Mas como é isso?
Vamos analizar a tabela abaixo:
Temos na tabela acima todas as possíveis situações de combinação entre
operações com valores lógicos.
Vamos dar mais exemplos do cotidiano:
1) Só vamos ao cinema se for ao domingo e se você pagar a entrada. Nestas
condições, o passeio só acontecerá se as duas condições forem satisfeitas;
2) Só vamos ao cinema se for ao domingo ou se você pagar a entrada. Nestas
condições, o passeio ocorrerá se uma ou outra condição for cumprida.
Vamos voltar a ver o restante do bloco
.
Repetição condicional (loop limitado ou ilimitado)
Quando necessitamos criar uma espécie de chave liga/desliga que executa um
conjunto de bloco de comandos utilizamos:
36
Com estes conjuntos de comandos criamos uma espécie de chave lógica.
Criamos uma variável chamada Ligada. Esta variável assume o valor 1 ou valor 2,
conforme a tecla precionada <b> ou <a>.
No bloco sempre se ... colocamos uma comparação que retorna verdadeiro ou
falso, dependendo do valor da variável Ligado.
Se Ligado = 1, retorna verdadeiro, pois 1 = 1;
Se ligado = 2, retorna falso, por 1 é diferente de 2.
Sendo assim, o personagem irá girar de forma ininterrupta somente quando a
condição lógica for verdadeira.
Avaliação condicional
Existem dois tipos de avaliação condicional, a que executa um bloco de comandos
somente para a condição verdadeira e a avaliação condicional que executa um bloco
de comando para a condição verdadeira e outro bloco de comando para a condição
falsa.
Somente atende se a condição for
verdadeira.
Atende se a condição for verdadeira
ou falsa, porém com um bloco de
comando distinto para cada situação.
Vamos a um exemplo prático:
Quando o personagem gato receber um clique ele fará uma pergunta e
aguardará uma resposta. Assim que respondida a resposta vai para dentro do
comando
.
O comando Se... compara se a resposta está correta, ou seja, igual a 5. Se
verdadeiro diz “Você acertou” e se falso (senão) diz “Você errou”.
37
Trabalhando com listas
Vamos conhecer agora o que é uma lista dentro do Scratch. Já sabemos o que é
uma variável, ou seja, um espaço na memória do computador que recebe um nome
para armazenar uma informação e pode ser acessada e alterada.
Uma lista nada mais é do que uma coleção de variáveis agrupadas, uma espécie
de tabela. Veja o exemplo abaixo:
As listas são dinâmicas e podem receber novas informações a qualquer momento,
inclusive durante a execução da aplicação.
Permite criar e nomear uma lista; com a
lista são criados automaticamente os 9
blocos abaixo.
Comando repórter que informa o valor atual
da lista. Importante lembrar que a lista pode
ser formada por várias linhas e todas serão
mostradas. Se a caixa ao lado do nome da
lista for marcada um painel com o valor
atual da lista é mostrado no palco.
Insere na última posição da lista o valor
digitado ou o valor inserido por outro
comando.
Apaga da lista a posição especificada
pelo número, a última posição ou todos os
elementos da lista.
Insere um novo elemento na posição do
número digitado, na última posição ou em
uma posição aleatória qualquer. Neste caso
a lista irá aumentar de tamanho.
38
Substitui o valor do elemento na posição
do número digitado, na última posição ou
em uma posição aleatória qualquer. Neste
caso a lista não irá aumentar de tamanho.
Informa o valor do elemento na posição do
número digitado, na última posição ou em
uma posição aleatória qualquer.
Informa o tamanho da lista, ou seja, o
número de elementos inserido nela.
Retorna verdadeiro se a lista especificada
conter o valor digitado ou informado e falso
senão conter.
Apaga a lista selecionada.
Praticando - II
Precisamos criar uma atividade onde o professor tem uma forma de inserir
perguntas e respostas para que depois estas perguntas e respostas sejam
apresentadas para os alunos responderem.
Vamos dividir este desenvolvimento em duas etapas. A primeira será o conjunto
de comandos que permitirá o professor inserir as questões e suas respostas.
Primeiramente vamos criar duas listas
e outra com nome de Respostas.
, uma com nome de Perguntas
Teremos então:
39
Vamos agora criar o conjunto de comandos que irá permitir a inserção de
perguntas e respostas em suas respectivas listas.
Primeiramente insira no palco a personagem professora e entre em sua guia de
comandos e crie a estrutura de blocos de comando abaixo:
Vamos entender o que ocorre no bloco de
comandos acima:
Quando clicamos a <barra de espaços>
no teclado é acionado o primeiro comando do
bloco pergunte .... e espere, quando então será
apresentado no palco a imagem ao lado.
Após você digitar a pergunta ela é inserida
dentro do comando repórter
.
Atenção, não confunda, o que é digitado na tela para servir de pergunta é inserido
no comando
. Veja o esquema abaixo:
A pergunta digitada é então inserida na lista Perguntas.
Da mesma forma é inserida a resposta. Importante destacar que a pergunta e
sua respectiva resposta devem estar na mesma posição de cada lista.
Com este conjunto de comandos criamos uma programação que permite inserir
novas perguntas e respostas toda a vez que desejarmos, basta apenas pressionar a
tecla <barra de espaço>.
Vamos agora criar os comandos para que a professora faça as perguntas aos
alunos.
40
Vamos entender o que foi feito:
Sabemos que temos duas listas, uma com as perguntas e outra com as respostas
e podemos inserir novas perguntas e respostas a hora que bem quisermos. Sendo
assim, como saberemos qual pergunta deve ser feita para o aluno?
Para tal teremos que criar uma variável
para armazenar o
número da questão que será sorteada e apresentada ao aluno.
Criamos então a variável
.
Quando clicamos na personagem professora no palco o primeiro bloco de
comando é então executado...
A junção destes comandos insere na variável
um valor sorteado
que pode ir de 1 ao tamanho da lista de perguntas, ou seja, o número máximo é a
quantidade de perguntas inseridas, com isso não existe o perigo de tentar acessar
uma pergunta que não existe.
Após ter o número da questão definido o próximo passo é acessar o item da lista
com esse número, para tal utilizamos o comando item...de Perguntas, fazendo com
que este item da lista de perguntas seja apresentado na tela utilizando o comando
pergunte ... e espere.
Agora o que precisamos fazer é comparar a resposta do que foi digitado com a
lista de respostas.
Se verdadeiro, ou seja, se a resposta digitada for igual a resposta do item da lista
respostas é exibida a mensagem “Você acertou. Parabéns”, senão, ou seja, se a
resposta for falsa, é apresentada a mensagem “Você errou”.
41
Trabalhando com Desenhos e Sons
Vamos agora completar o conhecimento dos comandos que faltam dos blocos
e
.
Veja os comandos de escrita em tela.
Importante entender que para desenhar em tela é necessário pelo menos um
sprite (um personagem de uma única tela), pois os comandos do bloco
estão disponíveis somente quando entramos em um personagem.
Abaixa a caneta do sprite, permitindo-o desenhar no Palco.
Tira a caneta do sprite, não permitindo que desenhe no Palco.
Limpa todos os traços e carimbos do Palco.
Muda a cor para a que está selecionada.
Muda a cor da caneta para o valor especificado.
Muda o tom da caneta pelo incremento especificado.
Muda o tom da caneta pelo incremento especificado.
Muda o tom da caneta para o valor especificado.
especificado.
especificado.
Muda a espessura do traço da caneta pelo incremento
Muda a espessura do traço da caneta para o valor
Carimba a imagem do sprite no Palco.
Praticando - III
Para entender o uso dos comandos da
vamos criar um pequeno
editor de imagens para que o aluno possa exercitar sua criatividade.
Crie então os seguintes sprites:
42
Depois posicione no palco conforme a
imagem. Os círculos coloridos servirão para a
seleção das cores e os traços servirão para a
seleção da espessura do traço desenhado no
palco.
Vamos agora criar os comandos que permitirão a seleção de cores, a seleção do
traço e o desenho em tela.
Selecionando as cores:
A seleção de cor é realizada por sprite, sendo que o sprite que escreverá em tela
é o cursor.
Para que a cor de escrita da caneta do sprite cursor seja alterada ao clicar
nos sprites que representam as cores teremos que usar o recurso de anunciar ...
escutar...
Para cada sprite de cor crie o bloco de comandos abaixo:
Crie um anúncio para cada cor.
Teremos então:
Quando o sprite
for clicado
Quando o sprite
for clicado
Quando o sprite
for clicado
Quando o sprite
for clicado
anunciará preto
anunciará azul
anunciará vermelho
anunciará verde
43
Quando o sprite
for clicado
anunciará amarelo
Quando o sprite
for clicado
anunciará traco1
Quando o sprite
for clicado
anunciará traco2
Quando o sprite
for clicado
anunciará traco3
Vamos agora programar a ação de ouvir do sprite
desenho.
para seleção da cor de
Vamos agora programar a ação de ouvir do sprite
do traço de desenho.
para seleção espessura
Toda a programação de seleção de cor e de espessura de traço está pronta.
Vamos agora programar a ação de desenhar em tela.
O primeiro passo é criar a estrutura de comandos que irá dar
início no aplicativo de desenho e manterá o loop de execução,
para tal crie a seguinte estrutura de comando.
Temos agora que limitar a ação de desenhar em tela somente se a tecla do mouse
estiver pressionada e limitar esta área para que não seja possível desenhar sobre os
botões de seleção de cor no canto esquerdo da tela.
Para saber se o mouse está pressionado e se estamos fora da área dos botões
utilizamos o seguinte arranjo de comandos de comparação lógica:
44
Quando analisamos se o posicionamento do mouse no eixo X é maior que -190
estamos garantindo que o ponteiro do mouse está fora da área dos botões de
seleção de cores.
Teremos então a composição de comandos.
Esta composição é na verdade uma operação lógica, onde:
Mouse Pressionado?
Mouse X > -190
Sim
Retorna verdadeiro
Não
Retorna falso
Sim
Retorna verdadeiro
Não
Retorna falso
Para que os comandos de desenho em tela sejam acionados temos que ter as
duas situações como verdadeira, ou seja, o mouse pressionado e fora da área dos
botões de cores, onde o valor da posição do mouse no eixo X deve ser maior que -190.
Se as duas condições forem verdadeiras então serão executados os comandos
que movimentarão o sprite cursor
e os comandos de desenho em tela.
Estes comandos fazem com que o sprite cursor siga o movimento do ponteiro do
mouse nas suas posições X e Y no palco e abaixa a caneta para desenhar em tela,
ou seja, habilita o desenho em tela quando o sprite se movimenta.
A composição completa de comandos ficará então:
45
Resumindo o que ocorre é o seguinte: ao clicar na bandeira de verde de iniciar
comandos ele entre num loop contínuo (sempre) e se o mouse estiver pressionado
e o ponteiro posicionado fora da área de seleção de cores o sprite cursor passa a
acompanhar o movimento do mouse e a desenhar em tela (abaixe a caneta), senão
ele apenas levanta a caneta para não mais desenhar em tela com o sprite cursor.
Para complementar e finalizar foi inserido nos comandos do sprite cursor
uma composição de comandos para limpar a tela caso a tecla <barra de espaço>
seja pressionada.
Vamos agora conhecer os comandos de áudio e som
.
Podem ser gravados novos sons ou importados de arquivos de som. Scratch pode
ler arquivos MP3, WAV não zipados, AIF e AU (desde que não sejam de 24 bits).
Temos ainda acesso a uma biblioteca muito rica de sons de instrumentos que
podem variar seu som pela nota musical e pelo rítimo (batimentos por minuto).
Gravando um novo som ou narração:
Para gravar um novo som acesse a guia
Sons do personagem ou do palco e clique no
botão Gravar.
Será aberta então a janela do Gravador
de Som.
Clique no botão gravar para gravar sua trilha de áudio.
Clique no botão parar para parar a gravação ou a execução da trilha de
áudio.
Clique no botão tocar para tocar a trilha de áudio.
Depois de gravada a trilha clique no botão Ok para confirmar o salvamento da
trilha ou no botão Cancelar para anular a gravação.
Para importar um áudio já gravado em arquivo clique no botão
será aberta a caixa de diálogo importar som:
46
, quando
Selecione o arquivo de áudio
desejado e clique no botão Ok.
Scratch pode ler arquivos MP3, WAV
não zipados, AIF e AU (desde que não
sejam de 24 bits).
Você pode também renomear
as trilhas de áudio para organizar
melhor o seu projeto.
Para excluir um som basta clicar no “X” no
canto direito.
Para exportar um som gravado basta clicar
com o botão direito do mouse, quando será aberto
o comando “Exportar esse som”. Clique neste
comando e salve o áudio em um arquivo.
Vamos conhecer agora os blocos de comandos de
:
Este bloco reproduz um som definido e passa
para a execução do próximo bloco mesmo que
a execução do som não tenha chegado ao fim.
Este bloco reproduz um som definido e aguarda
o final da execução do som para executar o
próximo bloco.
Este bloco para a execução de todos os sons
que estão sendo executados na aplicação.
Incrementa ou decrementa o valor no volume.
Por exemplo, se o volume atual estiver 25 e for
usado este bloco, o volume passará a valer 15
(25 – 10 = 15). O som vai de 0 (zero) que equivale
a mudo até 100 que equivale a volume máximo.
Configura o volume por porcentagem, indo de
0% (mudo) a 100% volume máximo.
Bloco de comando repórter que informa o valor
atual do volume para o objeto. Se a caixa de
seleção for marcada colocará no palco um
painel informando o valor atual do volume.
47
Antes de continuarmos a explicação dos demais blocos de comando de som,
temos que ter uma rápida introdução sobre ritmo e batidas.
Para um som se transformar em música e trilha sonora ele tem que assumir um ritmo.
O ritmo para a música pode ser entendido como um conjunto de sons em
intervalos regulares ou irregulares, fortes ou fracos, longos ou breves.
Dentro do ritmo temos uma batida, que na verdade é uma pulsação de som em
um determinado tempo. O tempo na música é medido em bpm (batidas por minuto).
Vamos agora aos blocos que trabalham o ritmo da trilha de áudio.
Este bloco de comando determina quantas
batidas teremos em um minuto. Não confunda
com número de vezes que o instrumento irá
tocar.
Incrementa ou decrementa o ritmo conforme o
número especificado.
Bloco de comando do tipo repórter que informa
qual o ritmo atual. Se a caixa de seleção for
marcada coloca um painel no palco para
expor o valor do ritmo atual.
O bloco vai tocar o instrumento específico
para a quantidade especificada de segundos,
utilizando uma bateria MIDI. Mesmo que o
bloco usa a palavra “tambor”, as opções no
menu drop-down são muitos instrumentos
de percussão diferentes, incluindo bateria,
triângulo, etc.
Os segundos dependerão da configuração
do bloco que configura o bpm (batimentos por
minuto). Por exemplo, se os bpm’s estiverem
configurados para 60 e você definir que o
tambor vai bater por 1 batida, significa que o
tempo será 1 segundo.
Este bloco de comando irá interromper
a execução dos comandos pelo tempo
especificado em batidas e não somente dos
sons. O tempo em segundos dependerá
da configuração dos bpm’s (batimentos por
minuto). Por exemplo, se os bpm’s estiverem
configurados para 30, o tempo de parada
neste caso será de 30 segundos, pois cada
batida leva 2 segundos.
48
Este bloco de comando seleciona entre os
128 diferentes instrumentos musicais e sons.
Importante citar que um Sprite pode tocar
apenas um tipo de instrumento por vez.
A mudança de instrumentos não afeta o
bloco tambor.
Falta agora conhecer o bloco de comandos que dá acesso às notas musicais.
Neste bloco as notas musicais são representadas por números.
Segue abaixo uma relação das notas para facilitar o uso deste bloco:
Mesmo que o teclado drop-down mostre apenas duas oitavas de notas (48 a 72),
um número pode ser colocado manualmente para obter qualquer nota. Para alterar
oitavas, basta adicionar ou subtrair 12 ao valor digitado.
Praticando - IV
Para entender o uso dos blocos de comando para o uso de sons, trilhas e
notas musicais, vamos criar abaixo uma pequena composição musical.
49
Vamos entender o script anterior:
Quando teclamos a letra “t” será repedida duas vezes a nota 62 por meio segundo,
logo em seguida será repetida por duas vezes a nota musical 69 por meio segundo,
logo em seguida será repetida por duas vezes a nota musical 81 por meio segundo e
por final será executada a nota musical 69 também por meio segundo.
Afirmamos aqui que 0.5 batidas é o mesmo que 0.5 segundos pois por padrão o
ritmo configurado é de 60 bpm.
Onde 1 batimento leva um segundo para ser executado, sendo assim 0.5
batimento leva 0.5 segundo para ser executado.
Dando Sensibilidade e Interatividade aos Personagens
Veremos agora uma parte muito importante do Scratch, onde permitiremos que
nossos personagens tenham a possibilidade de sentir o ambiente virtual a sua volta
e interagir com ele, criando uma espécie de inteligência artificial (A.I) em nossos
aplicativos educacionais.
Personagem realizando uma pergunta e registrando a resposta
Já utilizamos em uma situação anterior estes comandos, porém agora vamos
detalhar mais estes blocos.
O bloco pergunte...e espere apresenta no palco o balão da pergunta e o campo
de resposta. Quando o usuário responde e tecla <enter> ou clica no ícone de
confirmação a resposta é inserida e armazenada no bloco repórter resposta.
Caso a caixa de seleção do bloco resposta seja marcada é
colocado no palco um painel que registra a resposta dada pelo
usuário a pergunta realizada.
Movimentação do personagem com o uso do mouse
Temos dois blocos de comando do tipo repórter que informam as posições X e Y
do ponteiro do mouse.
e
Vamor criar um script de blocos de comando que faça o personagem seguir o ponteiro
do mouse e aprender um pequeno truque para mudar o eixo central da imagem.
50
Vamos usar a seguinte imagem como sprite. O centro da
imagem é o ponto por onde ela é movimentada no palco, o que
causa uma estranhesa, pois o correto é que ela seja movimentada
pelo cabo.
Para resolver este
problema vamos anexar na imagem três
quadrados brancos do mesmo tamanho da
imagem, um na lateral esquerda e mais dois
abaixo, fazendo com que o ponto central seja
a ponta do cabo da raquete. Veja a imagem e
entenda o que deve ser feito:
Tome o cuidado de recortar todo o fundo e
usar um padrão de arquivo com transparência
(PNG / GIF).
Crie os blocos de comando dentro do script do sprite raquete
para que quando o aplicativo for iniciado sempre a posição X e Y
do sprite seja a mesma posição X e Y do ponteiro do mouse, com
isso o sprite seguirá o ponteiro do mouse.
Prevendo a Colisão do Personagem
Caso tenhamos que identificar dentro de nosso script quando o personagem
se aproxima de outro personagem ou objeto no palco, podemos utilizar o bloco de
comando
.
Este é um bloco repórter que informa a distância do personagem (sprite) que
possui o script até o objeto selecionado em seu campo drop-down:
Veja um exemplo de aplicação:
O valor da distância é medido em pixel (pontos na tela). Já sabemos que o palco
possui 480 de largura por 385 pixels de altura, com isso podemos concluir que o valor
que deverá ser digitado para a comparação dependerá do tamanho do mesmo.
No nosso exemplo o valor foi 50 pixels. Faça testes e tire suas conclusões.
51
O bloco
pode ser usado também para medir a distância
do sprite até o ponteiro do mouse. Veja o exemplo abaixo onde criamos um script
que faz o personagem fugir do ponteiro do mouse, reposicionando aleatoriamente o
personagem no palco.
Medindo o tempo da tomada de ação do usuário dentro da aplicação
Em muitos casos pode ser necessário saber o tempo transcorrido para a tomada
de uma decisão ou uma resposta do usuário. Para esta finalidade temos o bloco
repórter
, o qual informa em segundos o tempo transcorrido a partir
do momento que o aplicativo / arquivo foi aberto. Caso sua caixa de seleção esteja
marcada é colocado no palco um painel que informa o tempo transcorrido. Este
comando trabalha similar a um cronômetro.
Caso seja necessário zerar este cronômetro e reiniciar a contagem usamos o
bloco
.
Para exemplificar seu uso, vamos criar um script onde a professora realiza uma
pergunta e aguarda uma resposta em no máximo 10 segundos.
Veja o script abaixo:
52
Vamos entender toda a lógica que está sendo construída com os blocos de
comando:
Quando o personagem professora recebe um clique é anunciado “perguntado”
para os demais scripts, iniciando sua execução. Logo após é feita a pergunta “Qual
a capital do Brasil” e aguardada uma resposta, a qual após ser digitada é inserida
no bloco resposta.
Ao iniciar o script “Quando ouvir perguntado” a primeira ação é zerar o
cronômetro
. O próximo passo é iniciar um loop contínuo que será
executado até que o comando
seja encontrado.
Com este arranjo de blocos de comandos criamos uma condição lógica que
realiza um conjunto de blocos de comando caso não exista resposta (zero letras na
resposta) e outro conjunto de blocos de comando caso exista uma resposta (resposta
tem pelo menos um caractere).
Temos agora que nos preocupar com a limitação de tempo para dar a resposta,
pois caso ele seja ultrapassado, o aluno deverá ser reprovado e a professora deverá
informar o término do tempo ao aluno.
53
Se o tempo for maior que 10 segundos será dito pela professora “Seu tempo
acabou” durante 2 segundos e logo em seguida todo o script será parado (pare
tudo).
Mas se algo for digitado na resposta o fluxo lógico senão será acessado. Neste
ponto do script teremos duas situações, ou o aluno respondeu de forma correta e
dentro do tempo ou respondeu de forma errada também dentro do tempo.
Caso o aluno responda corretamente teremos...
Se a resposta for “Brasilia” e o tempo passado for menor que 10 segundos a
professora dirá “Parabéns, você acertou.”
Caso o aluno responda de forma errada teremos...
Se a resposta NÃO for “Brasilia” e o tempo passado for menor que 10 segundos
a professora dirá “Estude mais, você errou.”
Após o aluno acertar ou errar a resposta o bloco
e limpa a resposta do bloco repórter
.
54
para todo o script
Personagem percebendo o volume do som na aplicação
Temos dois blocos que nos permitem saber qual o volume do som capturado pelo
microfone instalado no computador, sendo:
Bloco repórter que relata o quão alto está o som capturado
pelo microfone, variando de 1 a 100. Caso você não tenha um
microfone habilitado em seu computador, este bloco poderá
retornar volume 0 ou -1. Se sua caixa de seleção estiver marcada,
será colocado no palco um painel informando o valor atual do
volume capturado pelo microfone.
Este é um bloco lógico (boleano) que retorna verdadeiro se o som
estiver igual a 30 ou superior e falso se o som capturado pelo
microfone estiver abaixo de 30.
Para testar a aplicação destes blocos de comando vamos
construir um script que identifica o nível de volume capturado pelo
microfone e altera o tamanho e brilho de um ícone tipo microfone.
Veja o script:
aumentará conforme o volume
Após iniciada a aplicação o tamanho do sprite
do áudio capturado pelo microfone e se o som for considerado alto, ou seja, com
valor igual ou superior a 30, o brilho do ícone aumentará em 100 pontos.
Conhecendo as características dos objetos
Em muitos casos é útil conhecer as características de cada objeto usado no palco,
seja ele um personagem ou um objeto simples. Para esta finalidade temos o bloco
repórter abaixo:
Não confunda a propriedade volume do sprite com o volume de captura de áudio
do microfone
. Esta propriedade é do volume do áudio que pode ser
executado pelo sprite
.
55
Inserindo a sensibilidade de tato no personagem
Um dos grandes recursos do Scratch que permite criar interação com o cenário
e inteligência artificial (A.I) dentro da aplicação são os blocos que identificam colisão.
São eles:
Este bloco lógico (boleano) retorna verdadeiro
se o personagem está tocando no ponteiro
do mouse, nas bordas do palco ou em outro
personagem previamente selecionado na lista.
Este bloco lógico (boleano) retorna verdadeiro se
o personagem está tocando na cor especificada.
Para selecinar uma nova cor clique no pequeno
quadrado de cor para acessar o conta-gotas
e logo após clique sobre a cor desejada.
Este bloco lógico (boleano) retorna verdadeiro
se uma determinada cor no personagem está
tocando em outra cor de outro personagem, de
outro objeto ou do próprio palco. Para selecionar
as cores desejadas use o conta-gotas.
Vamos a um exemplo bastante interessante onde
criaremos um script em que uma bola se movimentará
ao colodir contra as paredes de um recepiente circular
de quatro cores. Importante salientar que todos os
blocos de comando estão dentro do sprite bola.
56
Vamos entender este script:
Criamos duas variáveis
para guardar os valores de deslocamento da
bola nos eixos X e Y;
O primeiro arranjo de comandos é iniciado quando a bandeirola verde iniciar
comandos é acionada, quando então inserimos nas variáveis
valores
aleatórios de 1 a 5;
Logo em seguida é anunciado para todos Iniciado.
Após a construção do primeiro bloco que dá início e
aplicação, vamos construir o bloco que é o motor de colisão
da aplicação e é iniciado pelo bloco do tipo chapéu;
Para garantir a execução contínua dos blocos de comando foi
usado o bloco sempre...
Teremos agora duas situações para ser
tratadas, uma onde a bola se movimenta sem
colidir em nada e a outra quando a bola colide
nas paredes do círculo:
Se a bola não colidir os valores da posição X e
Y serão incrementados pelas variáveis
.
Considerando que o círculo possui quatro cores, temos que montar um conjunto de
blocos com várias operações de comparação lógica que retorne apenas verdadeiro
ou falso, ou seja, está ocorrendo a colisão com uma das cores do círculo ou não está
ocorrendo uma colisão.
Basta agora montar os blocos tocando nas cores do círculo...
57
Teremos então a avaliação lógica que indicará se a bola está tocando em uma ou
em outra cor do círculo e retornará verdadeiro ou falso.
Temos agora que criar os blocos de comando que serão executados caso a bola
toque em uma das cores do círculo. O que na verdade tem que ocorrer de imediato
é a inversão da direção de deslocamento da bola e nesta ação entra a boa e velha
matemática básica.
O que dá a velocidade e a direção de deslocamento da bola são as variáveis
. Sabemos ainda que inicialmente elas podem ser preenchidas com valores
que variam de 1 a 5. Para inverter o deslocamento toda a vez que a bola bate na
parede do círculo basta multiplicar as variáveis por -1, invertendo seu sinal entre +
(mais) e – (menos).
Para que a bola perca o contato de imediato com o círculo, inserimos comandos
de movimento para a bola com a inversão de
, onde incrementamos em
alguns pontos a posição da bola para se afastar do círculo.
58
Para que a bola não fique em um movimento único de vai e volta, sem variar sua
, porém temos um
trajetória, será necessário escolher novos valores para
problema, as variáveis não alteram mais seu valor entre 1 e 5, mas sim podem estar
na faixa de -5 e 5. Se estiver com valores negativos ela estará descendo e se for
positivo estará subindo.
Para resolver este problema, antes de escolher um novo valor para
identificamos se as variáveis são negativas (bola descendo) ou positivas (bola
subindo).
Vamos analisar os cálculos matemáticos que usamos para descobrir se um
número é negativo ou positivo. Tivemos que realizar estes cálculos pelo fato de que o
Scratch não possui um bloco de comando que faça isso diretamente.
Se um número somado ao seu valor absoluto der zero é porque ele é negativo.
Vejamos:
Número: -3
-3 + 3 = 0 (igual à zero)
Se der maior que zero é porque ele é positivo. Vejamos:
Número: 5
5 + 5 = 10 (maior que zero)
Saiba que: o valor absoluto de um número nada mais é do que ele mesmo
sem sinal.
Teremos então:
59
Temos agora que alterar os valores das variáveis
para que a bola
execute um trajeto diferente do que foi realizado antes de colidir com as paredes do
para que a bola inverta sua
círculo, bem como alterar o sinal das variáveis
direção (suba se estiver descendo ou desça se estiver subindo).
são negativos, pois
Primeira situação:
verdadeiro, ou seja, o resultado é igual à zero.
Arranjando os blocos teremos agora:
60
é
O que falta agora são os blocos que serão acionados quando
são positivas:
retornar falso, ou seja, as variáveis
Concluímos então todo o script necessário para realizar o movimento aleatório da
bola dentro do círculo.
Conhecendo os Últimos Operadores
Antes de entrar no assunto principal deste livro, a interação com a Mesa Educacional
, sendo eles:
Multimídia, vamos conhecer os últimos comandos
Este bloco junta dois pedaços de textos ou
caracteres isolados. Esta operação é conhecida
como concatenação de strings e neste caso
retornaria o texto: olá meu querido aluno.
A palavra que está do lado direito do bloco
possui uma posição para cada caractere. Se
definirmos 1 no primeiro parâmetro o retorno
deste bloco seria a letra E, assim como se o valor
fosse 6 seria a letra R.
61
Este bloco retorna um número que equivale
ao total de caracteres da palavra inserida no
parâmetro, neste caso a palavra EDUCARTEC,
retornando o valor 9.
Este bloco retorna o resto da divisão de um
número pelo outro. Se colocarmos 100 no
primeiro parâmetro e 3 no segundo, o retorno
desse bloco é 1, pois este é o resto da divisão de
100 por 3. Em programação este tipo de cálculo
é chamado de Mod.
Este bloco arredonda um número seguindo a
seguinte regra: se o número à direita do ponto
(pois é padrão americano, não se usa vírgula) for
igual ou maior que 5 o número é arredondado
para cima e se for menor que 5 é arredondado
para baixo. Por exemplo, se o número for 3.4999
será arredondado para 3, mas se for 3.5 será
arredondado para 4.
Este bloco de comando executa diversas funções
sobre um número, sendo: abs (valor absoluto),
raiz quadrada, sin (seno), cos (coseno), tan
(tangente), asin (aseno), acos (acoseno), atan
(atangente), In (logaritmo natural), log (logaritmo),
e^(número de Euler elevado a...) e 10^(base 10
elevada a potência...).
Vamos exemplificar:
Vamos calcular se um ano é bissexto ou não. Chama-se ano bissexto o ano ao
qual é acrescentado um dia extra, ficando ele com 366 dias, um dia a mais do que
os anos normais de 365 dias, ocorrendo a cada quatro anos (exceto anos múltiplos
de 100 que não são múltiplos de 400).
Os cálculos matemáticos para se saber se um ano é bissexto são os seguintes:
1) Divida o ano por 4, se o resto for 0 o ano poderá ser bissexto, caso contrário,
não é bissexto;
2) Se ele passar na primeira regra (divisível por 4), temos que saber se ele termina
62
em 00 e se é divisível por 400.
Vamos montar então os blocos:
Primeiramente criamos uma variável para guardar o número de caracteres da
data digitada.
Logo após criamos o script para realizar a pergunta, acionar a validação da data
e o script que identifica se o ano é bissexto ou não.
A validação da data é feita somente identificando se ela está entre o ano 100 e o
ano 3000 (datas válidas para este script).
Caso a data digitada seja validada é acionado o script que calcula se o ano é
bissexto ou não.
A primeira coisa a ser feita é inserir na variável
caracteres da data digitada:
a quantidade de
63
A próxima etapa é saber se a data digitada é divisível por 4 e sem ter resto na
divisão:
Se tiver resto na divisão já podemos concluir que o ano não é bissexto.
Porém se a divisão retornar zero, o próximo passo é saber se a data digitada é
finalizada por 00.
O script abaixo extrai os dois últimos dígitos da data e verifica se são iguais a zero,
retornando um valor verdadeiro ou falso.
Para fins de exemplo vamos simular que a
64
tenha sido 2010.
Se o ano for divisível por 4 e não acabar em 00 (duplo zero) o ano é bissexto, tal
como calcula o script abaixo:
Agora falta realizar só mais uma verificação, ou seja, se é divisível por 4,
acabando em 00 e divisível por 400. Se todas estas condições forem verdadeiras o
ano é bissexto, caso contrário não.
Teremos então o script completo:
Trabalhando com a Mesa Educacional e o Scratch
O que é a Mesa Educacional?
A Mesa Educacional Multimídia Educartec é um
hardware pedagógico que se conecta ao computador por
uma porta USB.
Ela é composta pelo tablado de 15 posições e
um conjunto de peças plásticas que representam os
símbolos gráficos, podendo ser letras, números ou
65
qualquer outro símbolo, como por exemplo, notas musicais, bandeiras de países, etc.
O bloco de comando que faz a leitura das 15 posições da mesa é do tipo
, sendo o bloco
.
Para ler qualquer uma das posições basta mudar o valor do campo, indo de 1 a
15.
A conexão da mesa educacional com a atividade pedagógica desenvolvida
dentro do Scratch ocorre de forma bastante simples:
1) Estando com a Mesa Educacional Multimídia ligada (luz verde piscando
rapidamente);
2) Abra o aplicativo desejado;
3) Clique com o botão direito do mouse sobre o bloco de comando
(no lado esquerdo da tela – Armazém de Comandos) e clique sobre mostrar
observador da mesa;
4) Será aberto no palco o painel da Mesa Educacional;
5) Observe que a conexão está desligada. Para conectar a mesa com à aplicação
basta clicar com o botão direito do mouse agora sobre o painel da mesa (painel
vermelho) e escolha a opção selecionar porta serial/usb;
6) Selecione o número da porta serial onde a mesa foi instalada (caso
você não saiba, consulte o manual de instalação);
7) Neste momento o painel passa a ter o status ligado e a luz verde
da mesa passa a piscar mais lentamente indicando que a mesa está
conectada com o computador;
66
8) Pronto, a mesa está conectada e pronta para ser usada em sua aplicação.
Caso você queira sumir com o painel da mesa, basta clicar novamente com o botão
direito do mouse sobre ele e escolher a opção desapareça.
Criando Aplicativos Educacionais para a Mesa
Após todo esse conhecimento absorvido, chegou a hora de criar nosso primeiro
aplicativo educacional para ser usado em conjunto com a Mesa Educacional
Multimídia Educartec.
A primeira ação é juntar em uma única palavra todos os caracteres inseridos nas
15 posições. Vejamos como faremos isso:
Para montar a palavra construída pelas peças no tablado da mesa vamos usar
quatro variáveis.
Crie as variáveis visíveis à todos os objetos:
Considerando que são muitas posições para serem juntadas em um único bloco
, vamos dividir esta tarefa em três etapas, por isso a
necessidade das variáveis
.
Teremos então:
Colocaremos estes valores concatenados (posições 1, 2, 3, 4 e 5) da mesa na
.
variável
Faremos este mesmo procedimento para juntar as posições 6, 7, 8, 9 e 10 na
67
variável
e as posições 11, 12, 13, 14 e 15 na variável
.
Com estes blocos de comando capturamos qualquer informação inserida no
tablado da mesa, porém ainda estão divididas em três partes dentro das variáveis
.
Vamos juntar estas partes dentro da variável
.
Teremos então:
Logo após basta inserir tudo dentro de um bloco de execução contínua:
Com este script tudo que for construído na mesa será lido pelo Scratch.
Vamos agora criar nosso aplicativo educacional de exemplo, completo e
totalmente funcional.
68
APLICATIVO EDUCACIONAL DOS SONS INICIAIS
Objetivos didáticos:
1) Entender que as palavras são compostas por unidades sonoras e que estas
unidades podem ser pronunciadas separadamente;
2) Comparar palavras quanto às semelhanças sonoras em suas sílabas iniciais;
3) Perceber que palavras diferentes possuem partes sonoras iguais;
4) Identificar a sílaba como unidade fonológica;
5) Desenvolver a consciência fonológica, por meio da exploração dos sons das
sílabas iniciais das palavras (aliteração).
Público-alvo:
Alunos em fase de alfabetização que precisam perceber que a palavra é
constituída de significado e unidades sonoras e que é necessário refletir sobre as
propriedades sonoras das palavras, desenvolvendo a percepção fonológica.
Processo de aplicação da atividade:
Serão apresentadas na tela cartas em pares que possuem unidades sonoras
iniciais semelhantes e nos casos apresentados a mesma sílaba inicial, porém
posicionadas de forma aleatória. O aluno deverá identificar estas cartas semelhantes
e arrastar as mesmas para a posição tracejada na parte de baixo da tela, formando
os pares de cartas.
Após formar os pares o aluno deverá montar na mesa educacional as letras que
compõem a unidade sonora inicial da palavra que coincidentemente são as sílabas
iniciais das palavras.
Esclarecemos que as palavras VASSOURA e JARRO possuem como sílaba oral inicial
o [VA] e o [JA], respectivamente. Não se deve confundir a sílaba oral dessas palavras
com a sua segmentação escrita; pois, nesse caso, por a sílaba seguinte iniciar-se
com os dígrafos SS e RR, convencionalizou-se que essas letras iguais são separadas.
As telas do aplicativo:
1) Tela de exemplo de uso
2) Tela de
desenvolvimento da
atividade
3) Tela de finalização e
conclusão da atividade
69
Fluxo de scripts da tela de Exemplo de Uso:
Fluxo de scripts da tela de Desenvolvimento da Atividade:
Na tela de desenvolvimento do aplicativo teremos três elementos básicos, sendo:
PRIMEIRO ELEMENTO - CARTA
As oito cartas com as imagens e as palavras que devem ser
arrastadas para a parte carta cinza pontilhada e combinadas de duas
a duas.
Cada carta é composta por todas as imagens, a diferença é que estão
posicionadas em trajes (sprites) diferentes. Veja abaixo:
Isto é necessário para que possamos acessar as cartas pelo bloco repórter
, o qual informa o número do traje do objeto e que consequentemente passa
a ser o número de cada carta. Por exemplo, a carta cadeira é acessada pelo número
1 (traje 1), já a carta sapato é acessada pelo número 2 (traje 2), e assim ocorre com
as demais cartas.
As cartas terão todas os mesmos script, sendo:
70
Script de movimento da carta
Script para acionamento da função Posicionar
Antes de detalhar este Script, saiba que as funções são acionadas pelo bloco
Quando eu ouvir...
Script para acionamento da função Ocultar início
Script para acionamento da função Esconder
71
SEGUNDO ELEMENTO – ÁREA CINZA
São as duas áreas onde as duas cartas com as mesmas unidades
sonoras devem ser posicionadas para serem avaliadas.
Veja que cada carta possui uma borda vermelha exatamente para permitir esta
identificação, ou seja, quando a cor vermelha toca a área cinza.
Script para acionamento da função Ocultar início
Script para acionamento da função Finalizar
Script para acionamento da função Iniciar
TERCEIRO ELEMENTO – ÍCONE
São três ícones que representam qual ação o aluno deve tomar ou o resultado
desta ação:
Traje que representa a necessidade de uma ação do aluno para
completar o exercício.
Traje que representa o erro do aluno.
Traje que representa o acerto do aluno.
72
Estes ícones são na verdade trajes (sprites) de um mesmo objeto na tela.
Script para o loop principal (execute sempre) do aplicativo educacional
Script para Inicialização de variáveis
Para que nosso aplicativo educacional funcione e tenha total interatividade com o
aluno serão necessárias diversas variáveis de memória.
Segue abaixo a lista de variáveis de memória que serão necessárias, sua
visibilidade e finalidade:
VARIÁVEIS TIPO LISTAS
NOME DA VARIÁVEL
VISIBILIDADE
FINALIDADE
posx
Para todos os objetos
Guardar a posição das cartas no
eixo X no palco.
posy
Para todos os objetos
Guardar a posição das cartas no
eixo X no palco.
Silaba_inicial
Para todos os objetos
Guardar a unidade sonora inicial
(sílaba inicial) de cada palavra.
73
VARIÁVEIS TIPO SIMPLES
74
NOME DA VARIÁVEL
VISIBILIDADE
FINALIDADE
Acertos
Para todos os
objetos
Guardar o número de acertos realizados
pelo aluno.
Carta1-preenchida
Para todos os
objetos
Guardar a situação lógica que define se a
área cinza à esquerda está preenchida por
uma carta ou não.
Carta2-preenchida
Para todos os
objetos
Guardar a situação lógica que define se
a área cinza à direita está preenchida por
uma carta ou não.
Silaba_carta1
Para todos os
objetos
Guardar o número da carta (no caso
o número do traje) da carta que está
ocupando a área cinza à esquerda.
Silaba_carta2
Para todos os
objetos
Guardar o número da carta (no caso
o número do traje) da carta que está
ocupando a área cinza à direita.
mesa
Para todos os
objetos
Guardar os caracteres inseridos na mesa
educacional.
som_esta_correto
Somente para o próprio objeto Guardar a
Somente para o
situação lógica se o som “está correto” já
próprio objeto
foi tocado.
som_esta_correto
Somente para o próprio objeto Guardar a
Somente para o
situação lógica se o som “está errado” já
próprio objeto
foi tocado.
Script para identificar o número de letras em uma unidade sonora (sílaba)
Temos um pequeno detalhe para resolver, pois algumas palavras possuem a
unidade sonora inicial com duas letras e outras com três letras e esta situação deve
ser identificada previamente dentro do aplicativo.
PASSO A PASSO PARA A CONSTRUÇÃO DO APLICATIVO EDUCACIONAL NO SCRATCH
1) Primeiramente vamos construir os oito objetos carta. Abra a primeira imagem
para a carta, no caso a imagem de uma cadeira;
2) Acesse a guia Traje do novo objeto e importe
os demais trajes, na
seguinte ordem: sapato, lápis, chuveiro, chupeta, lata, sapo e casa;
75
3) Teremos então a primeira carta (primeiro objeto) com oito trajes. Deixe o primeiro
Traje como o Sprite ativo (Traje 1). Não se esqueça de dar um nome ao objeto, neste
caso CADEIRA;
4) Duplique este objeto mais sete vezes, totalizando oito cartas. Altere o Traje ativo
de cada carta para que fique com a imagem correta e renomeie a mesma para os
nomes de referência (cadeira, lápis, chuveiro, chupeta, lata, sapo e casa);
Clique com o botão direito sobre a imagem da carta para acessar o menu e o
comando duplicar...
5) Vamos agora criar os objetos das áreas cinza para onde as cartas devem
a imagem da carta cinza e crie o objeto carta1. Logo em
ser arrastadas. Abra
seguida duplique o objeto e altere seu nome para carta2;
6) Vamos agora criar o objeto ícone, o qual terá três
Trajes.
Renomeie os trajes para: duvida_slim, errado_slim e
certo_slim.
7) Importe as telas de fundo para o palco;
76
8) Outro passo que deve ser executado é a importação das trilhas de áudio para
seus respectivos objetos:
ARQUIVO
OBJETO
NOME DA TRILHA
Cadeira.wav
Carta cadeira
11
Narrar a
cadeira
palavra
Sapato.wav
Carta Sapato
21
Narrar
sapato
palavra
Lapis.wav
Carta Lápis
31
Narrar a palavra lápis
Chuveiro.wav
Carta Chuveiro
41
Narrar a
chuveiro
palavra
Chupeta.wav
Carta Chupeta
51
Narrar a
chupeta
palavra
Lata.wav
Carta Lata
61
Narrar a palavra lata
Sapo.wav
Carta Sapo
71
Narrar a palavra sapo
Casa.wav
Carta Casa
81
Narrar a palavra casa
Comando_inicial.
wav
Ícone
Comando_inicial
Instruir o usuário
de como deve ser
executada a atividade
Esta_correto.wav
Ícone
Esta_correto
Narrar
que
a
combinação
de
sílabas está correta
Esta_errado.wav
Ícone
Esta_errado
Narrar
que
a
combinação
de
sílabas está errada
Coloque_na_mesa.
wav
Ícone
FINALIDADE
a
Instruir o usuário
para montar a sílaba
Coloque_na_mesa
correta na mesa
educacional
9) Para que toda a interatividade de nosso aplicativo educacional funcione
perfeitamente, temos que configurar o valor inicial de nossas variáveis simples e
variáveis do tipo lista. Este assunto já foi introduzido anteriormente no item Script
para Inicialização de variáveis.
Para que possamos preencher nossas variáveis com os
valores iniciais corretos, temos que entender como irá ocorrer o
posicionamento dos objetos na tela, principalmente dos objetos
carta.
Devemos lembrar que o palco possui 480 pixels de largura
77
por 360 pixels de altura e cada uma de nossas cartas possuem o tamanho de 68
pixels de largura por 89 pixels de altura.
Uma informação que deve ser levada em consideração é que os objetos são
posicionados na tela a partir de seu ponto central.
O script abaixo deve ser construído no objeto ícone
, para tal acesse sua guia
de Comandos.
Conhecendo o tamanho do palco e das cartas e após alguns cálculos matemáticos
é possível definir o valor das posições originais de cada carta
para preenchimento das listas posx e posy.
Para iniciar o preenchimento da lista, por ela ser
acumulativa a cada vez que o
Scratch é iniciado, devemos zerar seu
conteúdo com o seguinte script:
Após já podemos preencher os
itens das listas com:
Outra lista que deve
ser zerada inicialmente
e depois preenchida é a
lista de silabas_iniciais
(exatamente nesta ordem).
Foram inicializadas as variáveis do tipo lista, agora temos que inicializar as
variáveis comuns, sendo:
10) Vamos iniciar agora a construção dos blocos de comandos (scripts). Clique na
guia Comandos do Palco e construa a seguinte estrutura de blocos de comando:
78
Lembre-se que este conjunto de blocos de comando já foi detalhado acima no
assunto Fluxo de scripts da tela de Exemplo de Uso.
O que este conjunto de blocos de comando faz quando o usuário inicia o aplicativo
bandeirola verde é basicamente o seguinte:
clicando na
a) Esconde todos os objetos da tela;
b) Muda o fundo de tela para a tela de exemplo;
c) Toca a narração de explicação;
d) Muda novamente o fundo de tela para a tela branca de nome fundo;
e) Anuncia Iniciar, ou seja, manda executar a função Iniciar existentes nos demais
objetos.
f) Quando este script ouvir finalizar irá mudar o fundo de tela para final e tocar a
narração final1.
11) Conforme identificamos acima, o aplicativo será de fato iniciado por uma
. Vamos
função denominada Iniciar, a qual estará localizada no objeto Ícone
então construir este script acessando a guia Comandos do objeto.
a) Primeiramente temos que inicializar as variáveis listas e simples:
79
b) Devemos criar também duas novas funções (quando ouvir) que esconda o
objeto ao iniciar e ao finalizar o aplicativo:
c) Antes de construir o script do loop principal, temos que criar um script auxiliar, o
qual foi detalhado anteriormente no item Script para identificar o número de letras
em uma unidade sonora (sílaba);
Este script aciona a função loop (anuncia o loop), posiciona as cartas com a função
posicionar (anuncia posicionar), muda o traje do objeto para
e exibe o objeto que
estava oculto.
Importante salientar que a função posicionar será construída na sequência,
quando for construído o script das cartas.
Surge aqui uma dúvida, como saber se a sílaba inicial é de três ou de duas letras?
80
Basta entender parte do script acima, onde usamos as variáveis
, as quais guardam a posição da referida sílaba dentro da lista de
.
sílabas da variável lista
Veja a tabela abaixo que representa a variável lista Silaba_inicial:
POSIÇÃO NA LISTA
CONTEÚDO
1
ca
2
sa
3
la
4
chu
5
chu
6
la
7
sa
8
ca
As posições 4 e 5 da lista são as que possuem três sílabas, as demais possuem
apenas duas, por tal motivo construímos o script que identifica estas posições:
Se a sílaba for de três letras (posições 4 e 5 da lista) a variável mesa receberá
as três posições de caracteres da mesa educacional, caso contrário, apenas duas
posições.
d) Podemos agora construir o script do loop principal.
Crie a estrutura inicial que garantira a execução contínua
do loop;
O próximo passo é criar uma estrutura condicional lógica que se certifique se as
duas áreas cinza possuem cartas posicionadas em seu interior;
81
Lembre-se que as variáveis silaba_carta1 e silaba_carta2 são iniciadas ambas
com o valor “nenhuma”, desta forma inicialmente esta condição é falsa, pois:
Esclarecemos que o bloco de comando
era verdadeiro passará a ser falso e vice-versa.
inverte a situação lógica, se
No caso do nosso script a condição final será verdadeira somente quando as
duas variáveis silaba_carta1 e silaba_carta2 forem diferentes de nenhuma, ou seja,
quando houver cartas nas áreas cinza.
Como o valor é falso a opção senão será o fluxo escolhido e os blocos de
comandos serão executados.
As variáveis som_esta_correto e som_esta_
errado servem para indicar que o som já foi
executado (tocado) ou não. Se o valor da variável
for 0 (zero) indica que não foi tocado, mas se for 1
(um) indica que já foi tocado.
Caso as duas áreas cinza possuam uma carta que foi arrastada pelo aluno e a
condição lógica passe a ser verdadeiro, executaremos uma nova verificação, ou
seja, veremos se as sílabas iniciais das duas cartas são iguais.
82
Os valores que estão armazenados nas variáveis silaba_carta1 e silaba_carta2
deixam de ser “nenhuma” quando as áreas cinza são preenchidas por uma carta e
da carta.
passa a ter o número da carta, mais especificamente o número do
Este número serve de índice para acessar a sílaba inicial da carta na variável do
tipo lista denominada Silaba_inicial.
Veja como seria:
Sendo o resultado falso, ou seja, as cartas posicionadas possuem sílabas iniciais
diferentes (tal como na imagem de exemplo), será
executado o script abaixo:
Sendo o resultado verdadeiro teremos que comparar a sílaba inicial das cartas
posicionadas na tela e a sílaba que deve ser construída na Mesa Educacional
Multimídia usando as peças móveis.
Porém antes de iniciar o bloco de comandos que irá repetir a operação até que o
aluno consiga acertar as peças na mesa educacional de forma que iguale a sílaba
inicial das cartas, teremos um script (conjunto de blocos de comandos) que realizará
uma tarefa auxiliar:
83
Este script será executado somente se a trilha de áudio “som_esta_correto” ainda
não tenha sido executada, ou seja, o valor ainda esteja em 0 (zero):
1) Será alterado o traje para
;
2) Será executada (tocada) a trilha de áudio “Esta_correto” e será aguardado seu
término antes de prosseguir com o script;
3) Será executada (tocada) a trilha de áudio “Coloque_na_mesa” e será aguardado
seu término antes de prosseguir com o script;
4) Será alterado o valor da variável “som_esta_correto” para 1 (um), ou seja, já
executado.
Após este script auxiliar será executado o script que de fato executará a repetição
de leitura dos dados da mesa educacional até que a sílaba correta seja escrita.
Vamos entender este script:
84
O que este script faz é muito simples, ou seja, executa de forma contínua o que
está dentro do bloco repita até enquanto a sílaba das cartas posicionadas na tela
nas áreas cinza não seja escrita (montada) de forma correta na mesa educacional.
Para saber se a sílaba escrita é a correta é usado um bloco condicional se...
senão.
Se a sílaba montada na mesa estiver errada a pergunta “Qual a sílaba?” será
apresentada por 3 segundos e repetida caso a montagem da sílaba na mesa
educacional continue errada.
Senão (caso contrário), ou seja, caso a sílaba montada esteja correta, será
executado o seguinte script:
1) As cartas serão escondidas;
2) Incrementa um ponto na variável Acertos;
3) Executa (toca) a trilha sonora Esta_correto até terminar;
4) Retorna o traje para .
O que falta agora é um script que identifique quando a atividade educacional é
concluída, ou seja, quando o aluno conseguir realizar as quatro combinações de
cartas e escrever as sílabas iniciais na mesa educacional.
O script que realizará esta conferência segue
abaixo:
Quando o número de acertos chegarem a quatro
é porque todas as cartas foram combinadas e as
sílabas acertadas na mesa educacional, sendo assim,
escondemos o painel da variável Acertos e anunciamos
finalizar para os demais objetos.
85
Caso esta condição ainda seja falsa é porque ainda faltam cartas para serem
combinadas e sílabas para serem montadas na mesa educacional, sendo assim é
anunciado loop, o que faz com que tudo volte para o início do script.
12) Vamos agora analisar e construir o script das cartas. Basta construir um e
copiar para as demais cartas:
a. Teremos que construir alguns scripts auxiliares do script principal de arrasta da
carta pelo palco. O primeiro script auxiliar é o de posicionar (quando ouvir posicionar).
O que este script faz quando algum outro objeto anuncia posicionar é:
1) Exibir a carta;
2) Mover a carta para a posição original que está especificada na variável do tipo
lista denominada posx e posy. O bloco
serve como o índice para localizar
qual a posição das coordenadas X e Y dentro da variável posx e posy.
b. Outro script auxiliar é o que oculta a carta quando outro objeto anuncia
ocultar_inicio.
c. O último script auxiliar é o que esconde as cartas após o aluno ter acertado a
combinação de cartas e a escrita da sílaba na mesa educacional quando um objeto
deve anuncia Esconder.
As variáveis silaba_carta1 ou silaba_carta2 guardam o índice da sílaba na
de cada carta.
lista Silaba_inicial e também coincidem com o número do
Desta forma este script identifica qual carta deve ser ocultada quando o valor na
das cartas
variável silaba_carta1 ou silaba_carta2 coincide com o valor do
posicionadas na área cinza.
d. Por final vamos construir o script principal das cartas responsável pela
movimentação e posicionamento das cartas no palco:
Este script é acionado quando a carta recebe um clique do
mouse sobre ela.
86
Para que a carta siga o ponteiro do mouse quando
este estiver pressionado usamos o seguinte script.
Caso a carta tenha sido movimentada pelo palco, temos
que saber onde o usuário largou a carta, pois para que a
comparação de sílabas ocorra as cartas arrastadas devem ser
posicionadas nas áreas cinza (cartas cinza).
Para realizar esta verificação, ou seja, se a carta arrastada está tocando uma das
áreas cinza (carta1 ou carta2), utilizamos o seguinte script.
Estes comandos retornam verdadeiros se a
carta arrastada estiver tocando qualquer uma
das áreas cinza.
87
Porém se arrastarmos a carta e não posicionarmos sobre uma das cartas cinza
ela deverá retornar para sua posição original por meio do script abaixo.
Vamos agora construir o script no caso da carta arrastada tocar uma das áreas
cinza.
O que construirmos para a carta1 (área cinza 1), valerá para a carta2 (área cinza2).
Vamos detalhar este script:
Caso o valor de
executado o seguinte script:
88
seja não, ela não está preenchida e será
1) A carta arrastada irá deslizar em meio segundo até a posição de carta1 (área
cinza1 – posição X -113 e posição Y 1111);
2) Mudará a variável carta1_preenchida para sim;
3) Mudará a variável Silaba_carta1 para o valor do
na área cinza;
4) Para o fluxo do comando.
Caso o valor de
o seguinte script:
da carta posicionada
seja sim, ela está preenchida e será executado
1) A carta arrastada irá deslizar em meio segundo de volta para sua posição
original;
2) Aparecerá um balão de fala com “Retire a outra carta”;
3) Para o fluxo do comando.
Teremos então o script completo para carta1:
Crie na sequência um script semelhante, porém para carta2. Teremos então:
89
Juntando tudo teremos o script completo para a movimentação das cartas:
90
O que falta agora é replicar todos os scripts para as demais cartas. Não seria
nada fácil ter que criar tudo novamente carta por carta. Para resolver este problema
existe um recurso que permite duplicar os scripts entre os objetos.
Clique e arraste cada conjunto de bloco por vez de uma carta para a outra, até
que todas as cartas tenham o mesmo conjunto de scripts, mas atenção, realize a
rolagem da tela para verificar se realmente o conjunto de blocos de comando foi
duplicado no objeto destino.
Somente solte os blocos sobre o novo objeto quando perceber uma linha cinza
circulando o mesmo. Após estes passos todas as cartas deverão estar com seu script
completos.
13) Construiremos agora o último script, contidos nos objetos carta1.
a. Os primeiros são scripts auxiliares para finalizar, iniciar e ocultar:
b. Por final vamos construir o script principal e responsável por liberar as variáveis
carta1_preenchida e silaba_carta1 quando não houver carta na área cinza de carta1:
Este script será executado sempre que NÃO
houver cor vermelha tocando a carta1 (carta1
cinza).
c. Copie (arraste e largue) todos os scripts da carta1 para carta2, mas não esqueça
de alterar as variáveis:
91
CONCLUSÃO
Após todos estes passos dados e conhecimentos absorvidos, acreditamos que
você esteja pronto para desenvolver novos aplicativos educacionais.
Não se limite apenas neste estudo, pois o Scratch é um aplicativo com uma
comunidade Mundial de usuários muito ativa e você encontrará com facilidade
ótimos tutoriais na web.
Parabéns por ter chegado até aqui e boa sorte em sua jornada educacional.
Ass: Equipe Educartec.
92