Sesi sp ebook scratch by Guiii

SESI-SP e-book Scratch: imagine, programe, compartilhe.

Gerência de Educação Básica Divisão de Educação

SESI-SP e-book Scratch: imagine, programe, compartilhe.

Gerência de Educação Básica Divisão de Educação

SESI – Serviço Social da Indústria Departamento Regional de São Paulo PRESIDÊNCIA Paulo Skaf SUPERINTENDÊNCIA Walter Vicioni Gonçalves DIVISÃO DE EDUCAÇÃO Fernando Antônio Carvalho de Souza GERÊNCIA EXECUTIVA DE EDUCAÇÃO Luciana Campacci GERÊNCIA DE EDUCAÇÃO BÁSICA Anaide Trevisan COORDENAÇÃO EDITORIAL Ivanei Nunes AUTORES Filipe Escalise Flávia Cristina Dozo Gláucia Marranho Paula Dalfré

Creative Commons License

SESI-SP e-book

1. Sobre o Scratch 2. Apresentação da Interface do programa 3. Situando objetos no palco (plano cartesiano) 4. Iniciando um projeto 5. Edição de Objetos e Fundos de Tela 5.1. Incluir novos objetos no projeto 5.2. Editar um objeto existente 5.3. Criar objetos a partir de webcam 5.4. Criar um objeto 5.5. Edição de fundo de tela 6. Guia de Comandos 6.1. Entenda cada uma das categorias 6.2. Comandos de Movimento 6.3. Comandos de Aparência 6.4. Comandos de Som 6.5. Comandos de Caneta 6.6. Comandos de Controle 6.7. Comandos de Sensores 6.8. Comandos de Operadores 6.9. Comandos de Variáveis 7. Como compartilhar um projeto Scratch 7.1. Compartilhar com comunidade Scratch 7.2. Compartilhar em outras páginas web 8. Tutoriais para criação de atividades 8.1. Projeto básico: movimentando um objeto 8.2. Projeto 1: A importância da água para o corpo humano 8.3. Projeto 2: Mapas do Brasil 8.4. Projeto 3: Porcentagem 8.5. Projeto 4: Animais marinhos 8.6. Projeto 5: Jogo do Encanamento Menu

Interativo

Clique sobre o tópico que deseja ler

1. Sobre o Scratch

O Scratch é uma linguagem de programação desenvolvida no Massachusetts Institute of Technology – MIT para crianças entre 8 e 16 anos criarem seus próprios games e animações interativas, e compartilhá-los na web.

É um jeito fácil e divertido de programar. Assim, ao utilizar o Scratch, os jovens se apropriam do pensamento computacional, que é lógico e sistemático, mas também desenvolvem a criatividade, o trabalho colaborativo e a reflexão sobre o significado da palavra “autoria” e todas as questões relativas a ela.

! Com o Scratch, a programação é desenvolvida por meio de instruções representadas por blocos coloridos. Os jovens programadores encaixam esses blocos coloridos em sequências lógicas (algoritmos) que fazem com que um objeto ou cenário realize ações conforme o que foi programado, como por exemplo, mover-se na tela, emitir sons ou solicitar ao usuário determinada ação.

Página 5

Gerência de Educação Básica Divisão de Educação

Menu inicial

Clique e assista aos vídeos disponíveis no Youtube

“Presidente Barack Obama sobre a importância da programação para jovens”

Página 6

Gerência de Educação Básica Divisão de Educação

Menu inicial

1. Sobre o Scratch

1. Sobre o Scratch Ao final desta oficina, você terá feito jogos educativos e divertidos. Experimente jogar alguns dos projetos que vocês está prestes a programar!

“O que a maioria das escolas não ensina” (codeclubbrasil.org)

Conheça alguns projetos desenvolvidos e compartilhados na Comunidade Scratch. Não é necessário estar logado para visualizar e jogar os projetos disponíveis no site.

Além do mais, é uma linguagem projetada para a aprendizagem e para a educação. Ou seja, além de aprender a programar, os estudantes podem utilizar essa ferramenta para produzir diversos tipos de mídias explorando conteúdos das áreas de ensino. Dessa forma, um trabalho escolar pode se tornar muito mais atrativo, pois estamos falando de tipos de mídias condizentes com o universo dos jovens a quem chamamos de nativos digitais.

Outros pontos destacados: O programa oferece um número razoável de imagens que podem ser utilizadas como objetos ou cenários nos projetos. Também possibilita editar essas imagens ou importar outros tipos de mídia como fotos, desenhos e sons. É possível, ainda, gravar falas para os personagens ou utilizar balões de fala e pensamento nos projetos. O Grupo Lifelong Kindergarten do MIT Media LabFaz também é moderador de uma comunidade de usuários do Scratch. Nessa comunidade há diversas informações, vídeos, fóruns, tutoriais, além de uma versão melhorada on-line do programa e um espaço destinado ao compartilhamento de projetos. Ao compartilhar um projeto, outras pessoas podem visualizar o código por trás daquele game ou animação e apresentar uma nova versão chamada de remix. Assim, a interação entre os participantes não se limita aos fóruns e um jovem pode desenvolver um jogo em parceria com muitos outros jovens de qualquer parte do mundo

! Página 7

Clique aqui e acesse o site http://scratch.mit.edu/explore/?date=this_month Na maioria dos projetos, para iniciar a animação/interação, basta clicar na bandeira verde. Em casos diferentes, normalmente são dadas instruções.

Para criar animações ou games com o Scratch, há três possibilidades:

1) Você pode utilizar o editor online. Acesse o site e clique em “Criar” no menu superior. O editor online permite baixar o arquivo feito online e também fazer o uploads de arquivos do seu computador. A interface do editor online é compatível com o Scratch versão 2.0 (beta). 2) Você pode utilizar o editor off-line na versão 1.4. Essa é a versão que utilizamos nesta apostila. 3) Você pode utilizar o editor off-line na versão 2.0 (beta). Os recursos são basicamente os mesmos que a versão 1.4, garantindo que quem sabe programar em uma versão, saberá programar na outra. A principal diferença está na disposição das telas, ícones e comandos e no fato de que a versão mais nova é graficamente superior e possui biblioteca ampliada. Para fazer download do Scratch: Acesse o site http://scratch.mit.edu/scratch2download/, crie um login e baixe o editor offline do Scratch na versão que preferir. Ele é gratuito.

Para fazer parte da comunidade Scratch, acesse o site https://scratch.mit.edu/ e inscreva-se.

Gerência de Educação Básica Divisão de Educação

Menu inicial

Página 8

Gerência de Educação Básica Divisão de Educação

Menu inicial

Apresentação da interface do programa

2. Apresentação da interface do programa

Situando objetos no palco (plano cartesiano)

3. Situando objetos no palco (plano cartesiano)

O Palco é onde ocorre a execução dos movimentos. Ele tem 480 unidades de largura por 360 de altura e é associado a um sistema de eixos coordenados cartesianos x-y.

Dessa forma, você pode situar os objetos na tela e programar os movimentos pelas coordenadas cartesianas.

1. Botões de atalho: Selecionar idioma, Salvar este projeto e Compartilhar este projeto; 2. Barra de Menus; 3. Botões para editar o objeto/sprite selecionado: Duplicar, Apagar, Crescer objeto e Encolher objeto. 4. Botões de exibição da tela: possibilita alterar o tamanho de visualização do palco; 5. Seleção de Categorias de comandos: Movimento, Aparência, Som, Caneta, Controle, Sensores, Operadores e Variáveis; 6. Painel de comandos: são exibidos diversos blocos conforme a categoria selecionada no item 5; 7. Nesta caixa é possível renomear o objeto e abaixo são exibidos posição e rotação do objeto selecionado; 8. Abas para edição de comandos, trajes/fundo de tela e sons (referentes ao objeto/palco selecionado nas áreas 14 e 15); 9. Área de edição de acordo com a aba selecionada (referente ao objeto/palco selecionado nas áreas 14 e 15); 10. Botões de Iniciar comandos (bandeira verde) e Parar tudo (circulo vermelho); 11. Palco (onde é exibido o jogo/animação); 12. Botões: pintar novo objeto (desenhar), inserir um sprite/objeto e inserir um objeto surpresa; 13. Coordenadas do ponteiro do mouse; 14. Selecionar palco; 15. Lista de objetos.

Página 9

Gerência de Educação Básica Divisão de Educação

Menu inicial

Página 10

Gerência de Educação Básica Divisão de Educação

Menu inicial

5. Edição de Objetos e Fundos de tela

4. Iniciando um projeto

5. Edição de Objetos e Fundos de tela

5.1. Incluir novos objetos no projeto Para incluir objetos da própria biblioteca do editor Scratch ou outras imagens salvas no computador, procure pelo no botão ilustrado ao lado que fica abaixo do palco. A seguinte janela será exibida na tela:

O início de qualquer sequência de ações dos objetos ou dos fundos de tela deve ser indicado pelo programador. Assim, ao começar um projeto, é preciso informar ao programa quando e como a pessoa que fará uso da animação/game indicará que deseja iniciar.

Você também pode adicionar novos trajes para o mesmo objeto, clicando em “Importar” dentro da aba “Trajes”.

Existem três blocos de comandos para essa função e eles possuem um formato específico, observe:

Deseja exercitar o que aprendeu sobre como iniciar um projeto e sobre como situar um objeto na tela? Clique aqui para abrir o tutorial do projeto básico!

Há um quarto bloco com esse mesmo formato que deve ser utilizado em conjunto com outro bloco de controle. São eles:

O editor Scratch suporta várias extensões de arquivo (.jpg, .png, .bmp, .gif). Escolha a figura ou imagem e depois clique em “Ok”. Para alterar o tamanho do objeto, apagá-lo ou duplicá-lo, utilize as ferramentas dispostas acima do palco.

Esses dois blocos são utilizados para indicar o momento de iniciar outro conjunto de instruções a partir da execução de um determinado comando por outro objeto ou fundo de tela. Um exemplo de uso desse bloco é quando desejamos alterar o fundo de tela da animação/game em função de uma determinada ação de um objeto. Observe as imagens abaixo. No projeto referente a essas imagens, o objeto se movimenta pela primeira tela e ao chegar na borda direita, envia uma mensagem para o fundo de tela, que, ao receber a mensagem altera para a segunda imagem.

5.2. Editar um objeto existente Clique na aba “Trajes” e depois em “Editar”.

Clique aqui para acessar o projeto referente a essas imagens. Clique no Fundo de Tela e na aba Comando. Compare com a aba Comandos do objeto.

Página 11

Gerência de Educação Básica Divisão de Educação

Menu inicial

O programa exibirá uma nova janela com ferramentas de edição de imagens como na imagem ao lado

Página 12

Gerência de Educação Básica Divisão de Educação

Menu inicial

5. Edição de Objetos e Fundos de tela

5.4. Criar um objeto

5.3. Criar objetos a partir de webcam

Para criar um objeto, procure pelo botão ilustrado ao lado que fica abaixo do palco. Para que você crie seu desenho, a seguinte janela será exibida na tela: Você também pode abrir o editor de pintura clicando em “Pintar” dentro da aba “Trajes”.

Na aba “Trajes”, você também encontra a opção “Câmera”. Clicando nesta opção você pode fazer de uma foto tirada pela câmera de seu computador um objeto para seu projeto. A cada clique no botão da câmera, é adicionado um novo traje para o objeto. Quando terminar de tirar as fotos das posições do objeto você clica e “Feito” para concluir. Essa opção é particularmente interessante, pois permite a criação de stop motion com outros materiais que não imagens e figuras digitais ou scaneadas.

5.5. Edição de Fundo de tela

Os fundos de tela possuem praticamente as mesmas opções de edição que os objetos. Você pode criar um novo fundo, importar alguma imagem da biblioteca do Scratch ou do seu computador, editar uma imagem já existente e também utilizar as fotos da webcam como fundo de tela.

Para criar um objeto, procure pelo botão ilustrado ao lado que fica abaixo do palco. Para que você crie seu desenho, a seguinte janela será exibida na tela:

Página 13

Gerência de Educação Básica Divisão de Educação

Menu inicial

Página 14

Gerência de Educação Básica Divisão de Educação

Menu inicial

6. Guia de Comandos

6.1. Entenda cada uma das categorias:

6. Guias de Comandos

Para objetos: definem ações de movimento, sejam deslocamento ou giro. Para fundos de tela: não são aplicáveis.

Os comandos servem para determinar as ações dos objetos ou dos fundos de tela do projeto que ser quer desenvolver. Na versão 1.4 do editor off-line do Scratch, os comandos, também chamados de instruções, são divididos em 8 categorias:

Para objetos: definem trajes, camadas, tamanhos e efeitos dos objetos. Nesta categoria estão também os comandos de balão de fala e pensamento e comandos para definir quando os objetos devem aparecer ou desaparecer no projeto. Para fundos de tela: comandos para definir quando as imagens de fundo de vem mudar e também de efeitos gráficos.

Para objetos e fundos de tela: possibilidade de introduzir efeitos sonoros diver sos ou notas musicais de128 instrumentos diferentes. Comandos de configura ção de volume e ritmo. Também possibilita a gravar sons e falas ou importar outros sons.

Para objetos: Possibilita registrar os movimentos dos objetos como se fossem canetas, com diferentes cores e espessuras de traço.

Para objetos e fundos de tela: são comandos essenciais para definir quando e as condições para que as ações sejam executadas. São comandos de condição, espera e laço de repetição. Atenção: não é possível iniciar qualquer ação sem um bloco de controle.

Para objetos e fundos de tela: Por meio dos blocos de sensores, podemos idetificar ações do usuário do game ou projeto interativo. São blocos que iden tificam cliques do mouse, teclas pressionadas, volume do som, posição do ob jeto, proximidade com outro objeto ou ponteiro do mouse, temporizador etc.

Para objetos e fundos de tela: comandos de operações matemáticas, compa rativas e lógicas. Também disponibiliza operações com texto e gerador random.

Para objetos e fundos de tela: possibilita definição e a manipulação de variáveis e listas.

Página 15

Gerência de Educação Básica Divisão de Educação

Menu inicial

Página 16

Gerência de Educação Básica Divisão de Educação

Menu inicial

6. Guia de Comandos

6.2. Descrição dos comandos de Movimento Movimenta o Sprite 10 passos para frente

Altera a posição do objeto no eixo X, deslocando-o pela quantidade de pontos indicada.

Vira o Sprite 15 graus no sentido horário

Altera a posição do objeto a para coordenada do eixo x indicada, sem alterar a coordenada do eixo y.

Vira o Sprite 15 graus no sentido anti-horário

Altera a posição do objeto no eixo y, deslocando-o pela quantidade de pontos indicada.

Aponta o Sprite para uma direção (90º direita -90º esquerda – 0 cima – 180 baixo)

Altera a posição do objeto para coordenada do eixo y indicada, sem alterar a coordenada do eixo x.

Aponta para outro Sprite ou para o cursor

Faz o objeto voltar caso toque na borda (limita os movimentos de um objeto para dentro do palco)

Move o Sprite para a posição indicada

Retorna a posição x do objeto. Caso o checkbox seja marcado, a posição x do objeto é exibida na tela.

Move o objeto para junto de outro objeto ou do cursor.

Retorna a posição y do objeto. Caso o checkbox seja marcado, a posição y do objeto é exibida na tela. Retorna a direção do objeto em graus. Se marcado, mostra a posição na tela.

Desliza o objeto para a posição indicada no tempo indicado.

Página 17

Gerência de Educação Básica Divisão de Educação

Menu inicial

Página 18

Gerência de Educação Básica Divisão de Educação

Menu inicial

6. Guia de Comandos

6.3. Descrição dos comandos de Aparência Muda o traje do Sprite para o traje selecionado.

Limpa os efeitos gráficos.

Muda o traje do Sprite para o proximo traje na lista.

Muda o tamanho do Sprite.

Mostra uma mensagem em um balão do tipo fala, durante o tempo indicado.

Retorna o tamanho. Se marcado mosta o tamanho na tela.

Mostra uma mensagem em um balão do tipo fala.

Mostra o Sprite.

Mostra uma mensagem em um balão do tipo pensamento, durante o tempo indicado.

Esconde o Sprite.

Mostra uma mensagem em um balão do tipo pensamento.

Faz com que o Sprite suba uma camada, sobrepondo outro Sprite.

Adiciona um efeito gráfico.

Faz com que o Sprite desça uma camada, sobrepondo outro Sprite.

Define um efeito gráfico.

Página 19

Gerência de Educação Básica Divisão de Educação

Menu inicial

Página 20

Gerência de Educação Básica Divisão de Educação

Menu inicial

6. Guia de Comandos

6.4. Descrição dos comandos de Som Reproduz o som selecionado e continua as interações.

Muda o volume do programa.

Reproduz o som seleciona e espera até que este termine de ser reproduzido para seguir as interações.

Muda o volume do programa.

Interrompe a reprodução de todos os sons.

Mostra o volume do programa. Também pode ser usada juntamente com um operdor. Muda o número de batidas por minuto do som.

Reproduz o som selecionado durante o intervalo de tempo indicado.

Muda o ritmo do som (bpm).

Para a reprodução durante o tempo indicado. Reproduz a nota selecionada, durante o intervalo de tempo indicado.

Mostra o ritmo (ppm). Também pode ser usada juntamente com um operador.

Muda o instrumento.

Página 21

Gerência de Educação Básica Divisão de Educação

Menu inicial

Página 22

Gerência de Educação Básica Divisão de Educação

Menu inicial

6. Guia de Comandos

6.5. Descrição dos comandos de Caneta

Limpa todas as marcas deixadas na tela.

Incrementa o tom da cor escollhida.

Começa a marcar com uma “caneta” os movimentos do Sprite.

Muda o tom da cor escolhida para o valor especificado.

Interrompe a marcação da caneta. Incrementa a espessura do risco da caneta. Abre uma caixa de cores para escolher a nova cor da caneta. Muda a espessura do risco da caneta.

Incrementa o número da cor da caneta.

Carimba na tela o próprio Sprite.

Muda a cor da caneta, para a cor correspondente ao valor escolhido.

Página 23

Gerência de Educação Básica Divisão de Educação

Menu inicial

Página 24

Gerência de Educação Básica Divisão de Educação

Menu inicial

6. Guia de Comandos

6.6. Descrição dos comandos de Controle

Repete o número indicado de vezes as instruções que estão dentro do bloco.

Quando a bandeira verde for clicada inicia as interações que estão no bloco.

Quando a tecla selecionada for pressionada inicia as interações que estão no bloco.

Envia uma mensagem para todos os Sprites.

Envia uma mensagem para os Sprites e aguarda até que eles concluam as instruções que estão em seus blocos.

Quando clicar no objeto as interações que estão no bloco serão iniciadas.

“Quando eu ouvir” - Recebe uma mensagem e executa as instruções que estão no bloco.

Adiciona o tempo de espera indicado.

Repete sempre as instruções que estão dentro do bloco.

Página 25

Gerência de Educação Básica Divisão de Educação

Menu inicial

Repete sempre um conjunto de instruções, se a condição indicada for verdadeira.

Página 26

Gerência de Educação Básica Divisão de Educação

Menu inicial

6. Guia de Comandos

Executa as instruções que estão dentro do bloco se a condição indicada for verdadeira.

Repete as instruções no bloco, até que a condição se torne falsa.

Executa as instruções dentro do bloco - “se”. Se a condição for verdadeira, se a condição for falsa executa as instruções do bloco - “senão”.

Interrompe a execução das instruções daquele bloco.

Interrompe todas as execuções de todos os blocos.

Espera até que uma condição seja verdadeira para continuar a execução.

Página 27

Gerência de Educação Básica Divisão de Educação

Menu inicial

Página 28

Gerência de Educação Básica Divisão de Educação

Menu inicial

6. Guia de Comandos

6.7. Descrição dos comandos de Sensores Se o Sprinte tocar no objeto selecionado, retornará verdadeiro.

Se a tecla selecionada estiver pressionada, retornará verdadeiro. Retorna a distância do Sprite até o objeto selecionado.

Se o Sprinte tocar na cor selecionada, retornará verdadeiro. Se a cor selecionada estiver tocando na outra cor, retornará verdadeiro.

Zera o temporizador

Recebe uma resposta e mostra na tela, se usada em conjutno com a instrução “diga” ou “pense”.

Mostra o temporizador. Também pode ser usada juntamente com um operador. Retorna o valor referente a opção selecionada.

Se o mouse se movimentar no eixo “X”, retornará verdadeiro.

Página 29

Se o mouse se movimentar no eixo “Y”, retornará verdadeiro.

Mostra o volume do microfone. Também pode ser usada juntamente com um operador.

Se o mouse estiver pressionado, retornará verdadeiro.

Retorna verdadeiro se o som do microfone estiver alto. Também pode ser usada juntamente com um operador.

Gerência de Educação Básica Divisão de Educação

Menu inicial

Página 30

Gerência de Educação Básica Divisão de Educação

Menu inicial

6. Guia de Comandos

6.8. Descrição dos comandos de Operadores

Soma

Retorna verdadeiro se ao menos uma das condições estiver correta.

Subrtração

Altera a condição, se for verdadeiro se tornará falsa, se for falsa, tornará verdadeiro

Multiplicação

Concatena as duas frases.

Divisão.

Retorna a letra na posição escolhida.

Sorteia um número entre os valores escolhidos.

Retorna o número de letras na palavra.

Verifica se o 1º valor é menor do que o 2º valor.

Retorna o resto da divisão de um número por outro.

Verifica se o 1º valor é igual ao 2º valor.

Arredonde o valor desejado.

Verifica se o 1º valor é maior do que o 2º valor.

Retorna o resultado da função matemática escolhida (Raiz quadrada, seno, cosseno...)

Retorna verdadeiro se as duas condições estiverem corretas.

Página 31

Gerência de Educação Básica Divisão de Educação

Menu inicial

Página 32

Gerência de Educação Básica Divisão de Educação

Menu inicial

6. Guia de Comandos

6.9. Descrição dos comandos de Variáveis

Cria uma variável

Se marcado, mostra a lista na tela.

Apaga uma variável

Adiciona o valor escolhido na lista.

Se marcado, mostra a variável na tela.

Apaga o item escolhido da lista.

Muda o valor da variável para o valor indicado.

Insere o valor na posição indicada.

Incrementa variável.

Substitui um valor na lista.

Mostra a variável na tela.

Retorna o item escolhido da lista.

Esconde a variável Retorna o tamanho da lista. Cria uma lista Verifica se o item escolhido está contido na lista.

Apaga uma lista

Página 33

Gerência de Educação Básica Divisão de Educação

Menu inicial

Página 34

Gerência de Educação Básica Divisão de Educação

Menu inicial

7. Como compartilhar um Projeto Scratch

7. Como compartilhar um Projeto Scratch Usando o Editor online do Scratch 7.1. Compartilhar com a comunidade Scratch

Antes de tudo é preciso fazer parte da comunidade! Acesse o site https://scratch.mit.edu/about/ e inscreva-se.

Caso você tenha desenvolvido um projeto no Editor Online do SCRATCH (como na imagem abaixo), para compartilhá-lho basta clicar em “COMPARTILHAR”. Observe que na imagem abaixo o idioma do editor foi alterado para Português (Brasil). Caso o seu editor esteja em inglês. A opção aparecerá com a palavra “Share”.

Observação: opção “compartilhar” fica disponível apenas após logon.

Página 35

Gerência de Educação Básica Divisão de Educação

Menu inicial

Página 36

Gerência de Educação Básica Divisão de Educação

Menu inicial

7. Como compartilhar um Projeto Scratch

Upload de um arquivo do editor off-line

Para gerenciar seus projetos compartilhados, clique em Perfil (lado superior direito da tela) e escolha “Minhas Criações”.

Para carregar um arquivo criado no editor offline (software Scratch instalado em seu computador), você deverá acessar o editor online, ou seja, você deverá logar-se e clicar em “Criar” na página inicial. Com o editor online aberto, clique em “Arquivo” e escolha a opção “Carregar a partir do seu computador”. Então é só escolher o arquivo que deseja compartilhar!

Para alterar o idioma do editor online, clique sobre o ícone que representa um mapa-múndi (lado superior esquerdo da tela) e escolha o idioma de sua preferência.

Página 37

Gerência de Educação Básica Divisão de Educação

Menu inicial

Página 38

Gerência de Educação Básica Divisão de Educação

Menu inicial

7. Como compartilhar um Projeto Scratch

Também é possível publicar seu projeto diretamente em sua página HTML. Para tanto, utilize o código abaixo para inserir o arquivo e um javaapplet.

7.2. Compartilhar em outras páginas web

Depois de compartilhar na comunidade Scractch. Você pode utilizar o código disponibilizado pelo site Scratch.mit.edu para divulgar sua criação em outros sites. Para gerar o código clique em “incorporar”. Para compartilhar nas redes sociais Facebook e Twitter, basta clicar nos ícones disponíveis.

Entre <body> e </body>): <p> <applet id=”Proje ctApplet” style=”display:block” code=”ScratchApplet” archive=”ScratchApplet.jar” height=”387” width=”482”> <param name=”project” value=”nomedoarquivo.sb”> </applet> </p>

E preciso apenas modificar nesse código o nome do arquivo criado no Scratch. Além disso, para funcionar, você precisa do arquivo ScratchApplet.jar. Coloque o arquivo ScratchApplet.jar na mesma pasta da página HTML. Se colocar em outra pasta, deverá modificar o endereço do arquivo, indicando onde ele está: archive=”ScratchApple t.jar” Para funcionar, o navegador do computador onde a página será visualizada deverá ter o plugin do Java.

Página 39

Gerência de Educação Básica Divisão de Educação

Menu inicial

Página 40

Gerência de Educação Básica Divisão de Educação

Menu inicial

8.1. Projeto Básico: Movimentando um objeto

8. Tutoriais de Atividades

o jet o r P o sic Bá

Movimentando um objeto

Clique no projeto que deseja aprender a fazer:

o jet Pro co i s Bá

Movimentando um objeto

jet

Pro

jet

Pro

Página 41

Importância da água

jet

Pro

Porcentagem

jet

Pro

Quer jogar? Clique sobre a imagem para acessar.

Animais Marinhos

Neste projeto, faremos o gatinho Scratch andar alguns passos. Mapas do Brasil

jet

Pro

Jogo do Encanamento

Gerência de Educação Básica Divisão de Educação

Este tutorial possui

Menu inicial

Página 42

passos.

Gerência de Educação Básica Divisão de Educação

Menu inicial

8.1. Projeto Básico: Movimentando um objeto

Programar o Scratch para mudar de traje:

Ao abrir o programa, por padrão, o gatinho Scratch já vem carregado como objeto1 na coordenada (0,0).

a) Clique na aba Comandos.

Se você clicar na aba Trajes, irá perceber também que há duas versões do gatinho chamadas de trajes. A alternância entre um traje e outro dará a impressão que o gatinho movimenta as pernas. Esse será nosso primeiro passo na programação.

Gerência de Educação Básica Divisão de Educação

b) Clique na categoria de comandos “Controle” (blocos cor de laranja)

c) Arraste para a área de edição de comandos o bloco “quando (bandeira verde) clicado”.

d) Arraste também para a área de edição o bloco “Repita 10” e encaixe abaixo do primeiro.

Por ser o único objeto, observe que ele já está selecionado.

Página 43

Programar o Scratch para mudar de traje:

Menu inicial

Página 44

Gerência de Educação Básica Divisão de Educação

Menu inicial

8.1. Projeto Básico: Movimentando um objeto

Programar o Scratch para mudar de traje:

h) Arraste para a área de edição de comandos o bloco “vá para x: ( ) y: ( )” e encaixe-o acima do “Repita 10”. Altere as coordenadas para (-150,0). Esse comando fará com que o objeto sempre inicie neste local da tela.

g) Clique na categoria de comandos “Movimento” (blocos de cor azul).

e) Clique na categoria de comandos “Aparência” (blocos de cor roxa).

f) Arraste para a área de edição de comandos o bloco “próximo traje” e encaixe-o dentro do bloco “Repita 10”.

Página 45

Programar o Scratch para que se movimente:

Gerência de Educação Básica Divisão de Educação

Menu inicial

i) Arraste para a área de edição de comandos o bloco “mova 10 passos” e encaixe-o dentro do bloco “Repita 10”.

Página 46

Gerência de Educação Básica Divisão de Educação

Menu inicial

8.1. Projeto Básico: Movimentando um objeto

8.2. Projeto 1: A importância da água para o corpo humano

eto

j Pro

Visualize seu projeto:

Neste exemplo estamos programando para deslocar o objeto (Gato) 10 passos para direita e repetir essa ação 10 vezes. Experimente aumentar o número de repetições!

A importância da água

! Quer jogar? Clique sobre a imagem para acessar.

j) Clique na bandeira verde para visualizar

Para esse projeto, você precisará: • Uma imagem de fundo relacionada ao tema da água. Neste tutorial, utilizamos um fundo de tela do Power Point preenchido com textura e salvo em formato de imagem (extenção .jpg).

Este projeto possui

passos.

Agora que você já sabe como fazer um objeto se mover na tela, explore outros comandos e veja o que acontece.

Página 47

Gerência de Educação Básica Divisão de Educação

Menu inicial

Página 48

Gerência de Educação Básica Divisão de Educação

Menu inicial

8.2. Projeto 1: A importância da água para o corpo humano

Escolher um novo sprite do arquivo:

Apagar o sprite anterior:

a) Clique no ícone para adicionar um novo sprite.

b) Procure pela pasta “Peaple”. Clique com o botão direito do mouse sobre o objeto a ser deletado e escolha a opção “apagar”.

c) Selecione o objeto “Diver1”.

Página 49

Gerência de Educação Básica Divisão de Educação

Menu inicial

Página 50

Gerência de Educação Básica Divisão de Educação

Menu inicial

8.2. Projeto 1: A importância da água para o corpo humano

Importar imagem de fundo:

Programar o objeto “Diver1”:

a) Selecione o “palco”. c) Procure em seu computador a imagem a ser utilizada.

a) Selecione o objeto “Diver1”.

b) Na aba “Fundos de tela”, clique em “Importar”.

Página 51

Gerência de Educação Básica Divisão de Educação

Menu inicial

Página 52

Gerência de Educação Básica Divisão de Educação

Menu inicial

8.2. Projeto 1: A importância da água para o corpo humano

Programar o objeto “Diver1”:

b) Arraste os seguintes blocos para a área de Comandos:

Programar o objeto “Diver1”.

b) Continue inserindo os blocos de comandos:

Dica: os blocos são organizados por tipo. cada tipo tem sua cor específica.

Página 53

Gerência de Educação Básica Divisão de Educação

Menu inicial

Página 54

Gerência de Educação Básica Divisão de Educação

Menu inicial

8.2. Projeto 1: A importância da água para o corpo humano

8.3. Projeto 2: Mapas do Brasil

eto

j Pro

Mapas do Brasil

Após encaixados os blocos, a programação do mergulhador está pronta.

Quer jogar? Clique sobre a imagem para acessar.

Clique na bandeira verde para visualizar o resultado!

Para esse projeto, você precisará: • 1 imagem do mapa do Brasil; • 1 imagem do mapa político do Brasil; • 1 imagem do mapa das regiões hidrográficas do Brasil; • 1 imagem relacionada à conscientização do uso da água. Os objetos utilizados como respostas às questões foram criados no próprio editor de imagem do Scratch.

Este projeto possui

Página 55

Gerência de Educação Básica Divisão de Educação

Menu inicial

Página 56

passos.

Gerência de Educação Básica Divisão de Educação

Menu inicial

8.3. Projeto 2: Mapas do Brasil

Importar o objeto “squaregirl” do arquivo:

Desenhar as caixas de respostas

a) Clique no ícone para adicionar um novo sprite.

a) Clique em “pintar novo objeto”.

b) Selecione a ferramenta “texto” e escreva o nome do estado.

b) Procure pela pasta “Peaple”.

c) Selecione o objeto “squaregirl”.

Página 57

Gerência de Educação Básica Divisão de Educação

Menu inicial

Página 58

Gerência de Educação Básica Divisão de Educação

Menu inicial

8.3. Projeto 2: Mapas do Brasil

Desenhar as caixas de respostas

Apagar o sprite anterior:

c) Selecione a ferramenta de retângulo. d) Selecione a opção para desenhar apenas o contorno.

e) Desenhe a caixa envolta do texto. Clique com o botão direito do mouse sobre o objeto a ser deletado e escolha a opção “apagar”.

f) Repita os passos e crie 2 outras caixas de texto com nomes de estados brasileiros.

Página 59

Gerência de Educação Básica Divisão de Educação

Menu inicial

Página 60

Gerência de Educação Básica Divisão de Educação

Menu inicial

8.3. Projeto 2: Mapas do Brasil

Importar imagem de fundo:

a) Selecione o “palco”.

Programar o objeto “squiregirl”:

a) Selecione o objeto “squiregirl”. c) Procure em seu computador a imagem a ser utilizada.

b) Na aba “Fundos de tela”, clique em “Importar”.

Observação: nas imagens, os objetos foram renomeados para serem apresentados em ordem numérica. Entretanto essa configuração não é necessária neste momento.

d) Importe todos os mapas que deseja inserir no seu projeto.

Página 61

Gerência de Educação Básica Divisão de Educação

Menu inicial

Página 62

Gerência de Educação Básica Divisão de Educação

Menu inicial

8.3. Projeto 2: Mapas do Brasil

Programar o objeto “squiregirl”:

b) Arraste os blocos ao lado para a área de Comandos e configure-os conforme demonstrado:

Programar o objeto “squiregirl”:

c) Continue arrastando e configurando os blocos na área de Comandos: Dica: os blocos estão organizados por tipo. Cada tipo tem uma cor específica.

Página 63

Gerência de Educação Básica Divisão de Educação

Menu inicial

Página 64

Gerência de Educação Básica Divisão de Educação

Menu inicial

8.3. Projeto 2: Mapas do Brasil

Programar o objeto “Amazonas”:

Programar os objetos dos demais estados:

a) Selecione o objeto caixa de resposta “Amazonas”.

b) Arraste os blocos abaixo para a área de Comandos e configure-os conforme demonstrado:

Observação: nas imagens, os objetos foram renomeados para serem apresentados em ordem numérica. Entretanto essa configuração não é necessária neste momento.

a) Selecione o objeto caixa de resposta (alternativas erradas).

Programe da mesma forma todas as caixas com respostas incorretas à pergunta “a qual estado pertence a maior bacia fluvial do mundo?” Página 65

Gerência de Educação Básica Divisão de Educação

Menu inicial

Página 66

Gerência de Educação Básica Divisão de Educação

Menu inicial

8.3. Projeto 2: Mapas do Brasil

Após encaixados os blocos, a programação estará pronta.

Programar o palco:

a) Selecione o palco.

Clique na bandeira verde para visualizar o resultado! b) Arraste os blocos abaixo para a área de Comandos e configure-os conforme demonstrado:

Atente-se ao nome que você definiu para cada fundo de tela a ser trocado no palco.

Página 67

Gerência de Educação Básica Divisão de Educação

Menu inicial

Página 68

Gerência de Educação Básica Divisão de Educação

Menu inicial

8.4. Projeto 3: Porcentagem

eto

j Pro

8.4. Projeto 3: Porcentagem

Porcentagem

! Quer jogar? Clique sobre a imagem para acessar.

Importar os objetos (sprites) do arquivo:

a) Clique no ícone para adicionar um novo sprite.

Para esse projeto, você precisará: • 1 imagem de fundo; • 4 imagens de recipientes com diferentes proporções de água.

b) Procure pela pasta “Peaple”.

Neste tutorial, utilizamos um fundo de tela do Power Point preenchido com textura e salvo em formato de imagem (extenção .jpg).

c) Selecione o objeto “Roundman”.

Os recipientes podem ser criados em qualquer editor de imagem, como Paint, Gimp, Corel etc.

Este projeto possui

Página 69

passos.

Gerência de Educação Básica Divisão de Educação

Menu inicial

Página 70

Gerência de Educação Básica Divisão de Educação

Menu inicial

8.4. Projeto 3: Porcentagem

Importar os objetos (sprites) do arquivo:

d) Clique novamente no ícone para adicionar um novo sprite.

g) Insira a letra “A”.

h) Insira também as letras “B”, “C” e “D”, seguindo os mesmos passos.

i) Procure pelas imagens dos recipientes salvas em seu computador. Insira os 4 recipientes diferentes.

e) Procure pela pasta “Letters”.

f) Selecione a pasta “bubbles”.

Página 71

Gerência de Educação Básica Divisão de Educação

Menu inicial

Página 72

Gerência de Educação Básica Divisão de Educação

Menu inicial

8.4. Projeto 3: Porcentagem

Apagar o sprite anterior:

Importar imagem de fundo:

a) Selecione o “palco”.

b) Na aba “Fundos de tela”, clique em “Importar”.

Clique com o botão direito do mouse sobre o objeto a ser deletado e escolha a opção “apagar”.

Página 73

Gerência de Educação Básica Divisão de Educação

Menu inicial

c) Procure em seu computador a imagem a ser utilizada.

Página 74

Gerência de Educação Básica Divisão de Educação

Menu inicial

8.4. Projeto 3: Porcentagem

Programar o objeto “Roundman”:

Dica: os blocos estão organizados por tipo. Cada tipo tem uma cor

a) Selecione o objeto “Roundman”.

específica.

Observação: nas imagens, os objetos foram renomeados para serem apresentados em ordem numérica. Entretanto essa configuração não é necessária nesse momento.

Página 75

Gerência de Educação Básica Divisão de Educação

Menu inicial

Página 76

Gerência de Educação Básica Divisão de Educação

Menu inicial

8.4. Projeto 3: Porcentagem

Programar o objeto “Roundman”:

c) Continue arrastando e configurando os blocos na área de Comandos:

Página 77

Gerência de Educação Básica Divisão de Educação

d) Continue arrastando e configurando os blocos na área de Comandos:

Menu inicial

Página 78

Gerência de Educação Básica Divisão de Educação

Menu inicial

8.4. Projeto 3: Porcentagem

Programar o objeto “Roundman”:

f) Continue arrastando e configurando os blocos na área de Comandos:

e) Continue arrastando e configurando os blocos na área de Comandos:

Página 79

Gerência de Educação Básica Divisão de Educação

Menu inicial

Página 80

Gerência de Educação Básica Divisão de Educação

Menu inicial

8.4. Projeto 3: Porcentagem

Programar o objeto “Roundman”:

Programar os demais objetos.

g) Continue arrastando e configurando os blocos na área de Comandos: a) Posicione os recipientes e as letras conforme a imagem acima. Para isso, basta clicar com o mouse e arrastar as imagens.

b) Cada um desses objetos possue a programação ao lado. Você deverá clicar em cada um deles e programar individualmente.

Página 81

Gerência de Educação Básica Divisão de Educação

Menu inicial

Página 82

Gerência de Educação Básica Divisão de Educação

Menu inicial

8.4. Projeto 3: Porcentagem

8.5. Projeto 4: Animais Marinhos eto

j Pro

Seu projeto está pronto.

Animais Marinhos

Clique na bandeira verde para visualizar o resultado!

Quer jogar? Clique sobre a imagem para acessar.

Para esse projeto, você precisará: • Curiosidades ou informações sobre o tema “água”; • 4 imagens sobre o mesmo tema. Neste tutorial, criamos bolhas de ar utilizando o próprio editor de imagem do Scratch.

Este projeto possui

Página 83

Gerência de Educação Básica Divisão de Educação

Menu inicial

Página 84

passos.

Gerência de Educação Básica Divisão de Educação

Menu inicial

8.5. Projeto 4: Animais Marinhos

Importar os objetos (sprites) do arquivo:

c) Selecione o objeto “clam1”.

a) Clique no ícone para adicionar um novo sprite.

d) Repita as instruções para adicionar: b) Procure pela pasta “Animals”.

Página 85

Gerência de Educação Básica Divisão de Educação

crab1-a

Menu inicial

Página 86

fish3

Gerência de Educação Básica Divisão de Educação

fish4

Menu inicial

8.5. Projeto 4: Animais Marinhos

Importar os objetos (sprites) do arquivo:

Desenhar as bolhas de ar (objetos)

e) Procure no seu computador e importe para o projeto as imagens que você separou a respeito do tema “água”. Para importar você deve seguir os mesmos passos descritos anteriormente. b) Selecione a cor que deseja. a) Clique em “pintar novo objeto”.

Lembre-se: o projeto prevê a utilização de 4 imagens diferentes sobre o tema “Água”. c) Selecione a ferramenta de elipse e desenhe uma pequena circunferência.

Página 87

Gerência de Educação Básica Divisão de Educação

Menu inicial

Página 88

Gerência de Educação Básica Divisão de Educação

Menu inicial

8.5. Projeto 4: Animais Marinhos

Desenhar as bolhas de ar (objetos)

f) Faça pequenas linhas. Elas darão brilho ao desenho e farão com que se assemlhe a uma bolha.

d) Aumente no máximo o zoom da imagem. É natural que a circunferência desenhada pareça um pouco distorcida.

Após, clique em Ok.

e) Selecione a ferramenta borracha e configure-a para o menor tamanho.

Página 89

Gerência de Educação Básica Divisão de Educação

Menu inicial

Página 90

Gerência de Educação Básica Divisão de Educação

Menu inicial

8.5. Projeto 4: Animais Marinhos

Configurar os trajes dos objetos

d) Selecione a ferramenta “balde de tinta”, escolha uma cor diferente e clique sobre o desenho.

a) Selecione o objeto “bolha de ar” que acabou de criar.

Após, clique em Ok. b) Selecione a aba “Trajes” e clique em “copiar”.

c) Clique no botão “editar” do “traje2”. e) Agora, clique com o botão direito do mouse sobre o objeto e escolha a opção “duplicar”.

Você pode inserir quantas bolhas de ar desejar.

Página 91

Gerência de Educação Básica Divisão de Educação

Menu inicial

Página 92

Gerência de Educação Básica Divisão de Educação

Menu inicial

8.5. Projeto 4: Animais Marinhos

Apagar o sprite anterior:

Importar imagem de fundo:

a) Selecione o “palco”.

b) Na aba “Fundos de tela”, clique em “Importar”.

Clique com o botão direito do mouse sobre o objeto a ser deletado e escolha a opção “apagar”.

Página 93

Gerência de Educação Básica Divisão de Educação

Menu inicial

Página 94

Gerência de Educação Básica Divisão de Educação

Menu inicial

8.5. Projeto 4: Animais Marinhos

Importar imagem de fundo:

Programar o objeto “fish4”:

a) Selecione o objeto “fish4”.

Dica: os blocos estão organizados por tipo. Cada tipo tem uma cor específica.

c) Por padrão, o programa já vai abrir na pasta “Backgrounds”. Clique na pasta “Nature”.

d) Escolha a opção “underwater”.

b) Arraste os blocos ao lado para a área de Comandos e configure-os conforme demonstrado:

Observação: nas imagens, os objetos foram renomeados para serem apresentados em ordem numérica. Entretanto essa configuração não é necessária nesse momento. Página 95

Gerência de Educação Básica Divisão de Educação

Menu inicial

Página 96

Gerência de Educação Básica Divisão de Educação

Menu inicial

8.5. Projeto 4: Animais Marinhos

Programar o objeto “fish4”:

Programar o objeto “crab1”:

a) Selecione o objeto “crab1”.

c) Continue arrastando e configurando os blocos na área de Comandos:

b) Arraste os blocos a seguir para a área de Comandos e configure-os conforme demonstrado:

Dica: os blocos estão organizados por tipo. Cada tipo tem uma cor específica.

Página 97

Gerência de Educação Básica Divisão de Educação

Menu inicial

Página 98

Gerência de Educação Básica Divisão de Educação

Menu inicial

8.5. Projeto 4: Animais Marinhos

Programar o objeto “crab1”:

Programar o objeto “clam1”:

c) Continue arrastando e configurando os blocos na área de Comandos: a) Selecione o objeto “clam1”.

b) Arraste os blocos ao lado para a área de Comandos e configure-os conforme demonstrado:

Página 99

Gerência de Educação Básica Divisão de Educação

Menu inicial

Página 100

Gerência de Educação Básica Divisão de Educação

Menu inicial

8.5. Projeto 4: Animais Marinhos

Programar o objeto “fish3”:

Programar o objeto “bolha de ar”:

a) Selecione o objeto “fish3”.

a) Selecione o objeto “bolha de ar”.

b) Arraste os blocos ao lado e abaixo para a área de Comandos e configure-os conforme demonstrado.

O comando “anuncie” serve para desencadear ações de outro objeto. Assim, estão relacionados à próxima programação a ser feita.

Página 101

Gerência de Educação Básica Divisão de Educação

Menu inicial

Página 102

Gerência de Educação Básica Divisão de Educação

Menu inicial

8.5. Projeto 4: Animais Marinhos

Seu projeto está pronto.

Programar o objeto “imagem1”

Clique na bandeira verde para visualizar o resultado! a) Selecione o objeto “Imagem1”.

b) Arraste os blocos abaixo para a área de Comandos e configure-os conforme demonstrado.

A imagem irá aparecer quando a bolha de ar programada anteriormente for clicada. Neste projeto, adicionamos 4 bolhas para mostrar 4 imagens diferentes. Porém, você pode adicionar quantas bolhas e imagens desejar. Siga os mesmos passos para programá-las.

Página 103

Gerência de Educação Básica Divisão de Educação

Menu inicial

Página 104

Gerência de Educação Básica Divisão de Educação

Menu inicial

8.6. Projeto 5: Encanamento

eto

j Pro

8.5. Projeto 4: Animais Marinhos

Encanamento

! Quer jogar? Clique sobre a imagem para acessar.

Adicionar os planos de fundo:

Primeiramente adicionamos dois cenários. O primeiro com encanamentos e o posterior com mensagem de pontuação obtida:

Para esse projeto, você precisará: • 2 imagens para compôr o fundo. • Criar gotas e trincas com o editor de imagem do Scratch. O jogo consiste em uma simulação de um vazamento! O jogador deverá reparar, economizando água!

Este projeto possui

Página 105

passos.

Gerência de Educação Básica Divisão de Educação

Menu inicial

Página 106

Gerência de Educação Básica Divisão de Educação

Menu inicial

8.6. Projeto 5: Encanamento

Programar os planos de fundo :

Programar as gotas:

Esses comandos farão com que a gota desapareça ao clicar na trinca adjacente.

Página 107

Gerência de Educação Básica Divisão de Educação

Menu inicial

Página 108

Gerência de Educação Básica Divisão de Educação

Menu inicial

8.6. Projeto 5: Encanamento

Programar as trincas:

Importar o botão Iniciar:

Programar o botão Iniciar:

Observe que o tempo de 10 segundos controla o tempo que o jogador terá para reparar todos os canos!

Observe que os comado anuncie conserto1 para todos, é utilizado pela gota, fazendo ela desaparecer. O processo é análogo para as outras gotas e trincas!

Página 109

Gerência de Educação Básica Divisão de Educação

Menu inicial

Página 110

Gerência de Educação Básica Divisão de Educação

Menu inicial

8.6. Projeto 5: Encanamento

Agora que já realizou vários exercícios, crie seus próprios jogos e compartilhe com seus amigos no portal :

Importar o botão Jogar Novamente:

Programar o botão Jogar Novamente:

FIM Seu projeto está pronto! Clique na bandeira verde para testá-lo! Página 111

Gerência de Educação Básica Divisão de Educação

Menu inicial

Página 112

Gerência de Educação Básica Divisão de Educação

Menu inicial