Introdução ao Scratch

Horário dos Encontros

Horário	Segunda	Terça	Quarta	Quinta	Sexta
14:00 - 14:55		ATENDIMENTO			Scratch
14:55 - 15:50		ATENDIMENTO			Scratch
-	I n t e r v a l o	I n t e r v a l o	I n t e r v a l o	I n t e r v a l o	I n t e r v a l o
16:10 - 17:05		ATENDIMENTO			Scratch
17:05 - 18:00		ATENDIMENTO			Scratch

Aulas

AULA 1 - O ambiente (4h)

AULA 2 - Efeitos sonoros (4h)

AULA 3 - Operadores(4h)

AULA 4 - Array(4h)

AULA 5 - Eventos(4h)

AULA 6 - Objetos (4h)

AULA 7 - Estruturas de Controle(4h)

AULA 8 - Funções(4h)

AULA 9 - Trabalhando com páginas web Aula 1 (4/8h)

AULA 10 - Trabalhando com páginas web Aula 2 (8/8h)

REFERÊNCIA RÁPIDA: - Funções mais usadas

---

Atendimento paralelo

O atendimento extra-classe às alunas será realizado nas quartas-feiras, das 10:00

Material de apoio

Apostila de Introdução à JavaScript - Adriano Lima

Apostila JavaScript - Canal Fessor Bruno

Apostila de Introdução à JavaScript - Dinis Santos

Apostila de Introdução à JavaScript - Grillo e Fortes

Apostila de Introdução ao HTML e JavaScript

Acesso ao Scratch

Você poderá acessar o aplicativo neste link: http://scratch.mit.edu.

Você pode utilizar a versão on-line, ou instalar o aplicativo no seu computador.

A tela inicial é esta:

Você também pode optar por criar seus programas direto pela web, ou antes criar um perfil e acessá-lo, para só daí começar a criar.

Vale ressaltar que se você não criar um perfil, poderá utilizar a plataforma apenas para explorar as criações dos demais usuários e fazer suas criações, porém não poderá compartilhar e comentar, ou seja, não poderá utilizar todo o potencial da plataforma.

Criando um perfil

Para criar um perfil, siga estes passos:

Aspectos básicos

Clique no menu superior "Criar", conforme abaixo, e vamos lá!!!

Idioma

Você vai ser levado para a tela abaixo.

Em primeiro lugar, caso esteja tudo em inglês, vamos mudar o idioma para o Português brasileiro.

Áreas de trabalho

A área principal de trabalho do Scratch é dividida em 3 abas:

• 1. Aba Código : é onde estão organizados os blocos de programação, formados por nove

categorias distintas, organizadas por cores;

• 2. Aba Fantasias : é a área onde podemos editar as imagens dos personagens e cenários

utilizados no projeto, fazendo as alterações que nos interessarem;

• 3. Aba Sons : é o local destinado à edição dos sons utilizados no projeto, sejam eles

associados aos personagens ou aos cenários.

A área de "CÓDIGO", por sua vez, é dividida em 3 áreas principais:

A área marcada em vermelho é onde estão disponíveis as instruções e ferramentas que o Scratch disponibiliza. Estas instruções irão modificar o estado do ator que, no caso, é o gatinho.

A área marcada em verde é a área de programação (marcada com o número 10 na figura acima). As instruções são arrastadas para cá, na ordem determinada. É o espaço onde podemos adicionar, ver e editar os blocos de programação utilizados para cada personagem ou cenário.

A área marcada em azul é a área de execução, onde as instruções são executadas (marcada com o número 11 na figura acima). É a área que funciona como uma mini tela, onde podemos visualizar e testar a execução do projeto.

Os principais conceitos são:

• 4. Ator: é cada personagem ou objeto que utilizamos no projeto, que podem ser

modificados na aba “Fantasias”;

• 5. Palco: é a área que aciona os cenários para que possamos editá-los na área de

programação;

• 6. Cenários: são os planos de fundo que utilizamos no nosso projeto. Quando a edição de

cenários está ativa a aba “Fantasias” muda de nome para “Cenários”;

• 7. Mochila: é a área do editor que comporta as três abas mencionadas e mais o espaço de

programação;

• 8. Botão Ir : é onde se inicia a execução do projeto na Área de visualização, para que

possamos testar se tudo está saindo de acordo com o que planejamos;

• 9. Botão Pare : é o botão que para a execução do projeto na Área de visualização;
• 12. Nome do projeto: é o espaço reservado para colocarmos o nome do nosso projeto – por

padrão ele vem com a denominação Untitled;

• 13. Botão Veja a Página do Projeto: é o botão que, quando clicado, alterna entre o

modo de edição do projeto e o modo de compartilhamento, que mostra o projeto como os outros usuários irão vê-lo na plataforma;

• 14. Botão Selecione um ator : é o botão que mostra as opções que temos para

escolher, criar ou adicionar personagens ao nosso projeto;

• 15. Botão Selecionar Cenário : é o botão que mostra as opções que temos para a

escolher, criar ou adicionar cenários ao nosso projeto

Além de compreender as funcionalidades apresentadas, é importante compreender as funções de cada categoria de blocos de programação e, claro, como criamos o código que vai dar vida aos atores e cenários do nosso projeto. Também é essencial conhecer as características da área de programação para poder fazer uso correto dos blocos. Assim, evitamos que o projeto tenha algum erro.

INSTRUÇÕES

As instruções são separadas por tipo, e cada tipo é identificado por uma cor:

- MOVIMENTO - servem para alterar a posição do ator.

- APARÊNCIA - alteram a aparência do ator e do cenário.

- SOM - insere e altera o(s) som(s) cadastrado(s) no programa. Estes sons podem ser acessados pela Aba "Sons":

- EVENTOS - insere rotinas em caso de ocorrência de evento.

- CONTROLE - são as instruções de controle de fluxo, programação, propriamente ditas.

- SENSORES - identifica características do programa e execução.

- OPERADORES - instruções para cálculos e comparações.

- VARIÁVEIS - permite a criação de variáveis.

- MEUS BLOCOS - permite a criação de blocos (funções, classes, etc) customizados.

Blocos de Movimento

Os blocos de movimento são relacionados ao posicionamento e deslocamento dos componentes (atores, palcos) pelo espaço da tela. São no total dezoito blocos:

Blocos de Aparência

Os blocos de aparência são vinte e relacionam-se ao aspecto visual dos componentes, como tamanho, cor, aparecer ou desaparecer, camada de posicionamento, ações de fala escrita e mudanças de fantasia ou de cenário.

Blocos de Som

Além dos textos, é possível também atribuir sons, tanto para simular a fala como para simular efeitos sonoros das ações e interações dos atores e dos cenários. Os blocos de som, num total de nove, são:

Blocos de Eventos

Utilizamos sempre um bloco de evento no início de um grupo de blocos para determinar a condição para que a programação em questão comece a ser iniciada, por exemplo. Utilizados em conjunto com os demais blocos, eles marcam a situação específica que ativa o código.

Se não utilizarmos um bloco de evento, por exemplo, uma ação pode ocorrer de forma indefinida, ou mesmo nem ocorrer.

Blocos de Controle

Esses blocos têm a função de organizar a execução das ações dos componentes, por exemplo, determinando quantas vezes determinada ação será realizada. É o caso do bloco denominado “repita ___ vezes”, o segundo na coluna da direita abaixo. Todos os demais blocos que estiverem englobados por ele repetirão suas ações tantas vezes quantas estiverem estipuladas por você. Eles ajudam também, em associação com outras categorias de blocos, a determinar o condicionante para que a ação aconteça. Repare abaixo em sua aparência e nos comandos que representam:

Os três últimos blocos dessa categoria têm uma função especial. São direcionados para lidar com os “clones”, que são as duplicatas de algum ator que pode surgir devido a alguma condicionalidade ou mesmo à programação dos blocos. Eles lembram os blocos de eventos, mas por uma determinação do programador do Scratch, ficaram agrupados nessa categoria de controle.

Blocos de Sensores

Essas interações podem ser, por exemplo, um ator de um jogo se aproximar de outro ou tocá-lo. Também poderia ser o usuário clicando com o mouse ou apertando determinada tecla e isso ser o fator determinante para uma ação de algum componente. Confira os blocos de sensores logo abaixo:

Os formatos dos blocos de sensores já denunciam que alguns têm locais específicos para se encaixarem junto aos blocos de outras categorias. Por exemplo: o bloco “tocando na cor...?” necessariamente deve associar-se aos blocos de controle para determinar o que ocorre se o ator em questão tocar na cor escolhida por você.

Alguns dos blocos de controle que têm formato arredondado podem ser acoplados a outros blocos das categorias anteriores para determinar um valor numérico específico, como por exemplo o ano atual.

Blocos de Operadores

Os blocos de operadores têm função lógica e matemática, utilizada em associação com os demais grupos de blocos. Essa utilização associada dos grupos de blocos é importante quando se quer determinar números que dependem de outros componentes, sua posição na tela, entre outros fatores. São dezoito os blocos de operadores, que podemos conferir a seguir:

Blocos de Variáveis

As variáveis servem para armazenar números e sequência de letras na memória do computador, como o resultado de um cálculo matemático, ou o nome do usuário, por exemplo. Pode ser utilizada para um ator se referir ao usuário pelo nome, por exemplo.

Meus Blocos

Nessa área, antes que criemos blocos novos, apenas aparece o seguinte botão:

Esse grupo de blocos serve para criarmos blocos novos e agruparmos outros grupos de blocos que executam comandos que vamos utilizar mais vezes, simplificando a programação posterior.

Assim, quando formos reutilizar o mesmo tipo de comando, bastará adicionar apenas o novo bloco único criado, evitando ter de repetir todo um grupo enorme de blocos de programação novamente.

Palco

O palco é onde ficarão os atores, ou sprites e onde serão mostradas as histórias, jogos e animações.

Os Sprites podem mover-se e interagir, uns com os outros, no palco.

O palco tem 480 unidades de largura e 360 unidades de altura e está dividido entre as coordenadas X e Y .

O centro do palco tem as coordenadas 0 em "X" e 0 em "Y" .

Para saber a posição de um determinado ponto dentro do palco, mova o mouse até o ponto desejado e observe logo abaixo do palco no canto inferior direito.

Pela imagem abaixo, indica-se que o cursor está no ponto X:100 e Y: 50.

Sistema de coordenadas e orientações

Como falado acima, o palco tem 480 unidades de largura e 360 unidades de altura e é dado pelo sistema ortogonal XY.

Podemos perceber isto melhor através da figura ao lado, que mostra bem melhor este sistema de coordenadas.

Neste sistema, o centro é dado a posição X:0 Y:0.

Se percebermos bem na figura, notamos que, para cima, o Y ficará positivo e para baixo o Y ficará negativo.

A mesma coisa ocorre semelhantemente para a coordenada Y.

Para a esquerda, ficará o X negativo e para direita ficará positivo.

Para sistema de direções, como mostra a figura abaixo, mostra o movimento em graus.

É através das direções que vamos girar o nosso objeto dentro do palco. Guarde bem estes duas ultimas figuras que mostram tanto o sistema de coordenadas como o sistema de direções.

Iremos perceber para o que elas realmente servem na prática.

PROGRAMAÇÃO

O programa Scratch é a sequência lógica de instruções, que são carregadas para cá, numa ordem determinada.

Como o scratch é orientado a Eventos, o programa deve iniciar com alguma AÇÃO, ou EVENTO.

Um exemplo é o EVENTO "Quando for clicado":

Esta instrução vai funcionar para iniciar a execução do programa.

Porém, quando você clicar na bandeira verde (BOTÃO "Ir"), aparentemente nada acontecerá, uma vez que não há outra instrução.

Então, vamos adicionar algum movimento ao ator, o Gato laranja, de forma que possamos visualizar a execução do código.

Note que, ao acrescentarmos a instrução de MOVIMENTO "Mova 10 passos", o gatinho se deslocou levemente pra direita. Isso acontece porque o cenário de execução dos programas é configurado para iniciar os atores no centro e ter, mais ou menos, 200 passos para trás, e 200 passos para a frente.

Então, um movimento de apenas 10 passos causa um deslocamento bem pequeno.

Teste alterar esse valor para 100 passos, ou -50, por exemplo!!!!!

Agora, provavelmente, você está se questionando se esse movimento tem que ser assim, tão artificial. Afinal, o gatinho se move uma certa distância como se estivesse sendo "arrastado", sem mover seu corpo também, né?

Por isto, vamos agora investigar as Fantasias, que é como o Scratch chama as diferentes figuras (com diferentes movimentos de corpo, roupa, acessórios, etc) relacionadas ao mesmo ator.

Clique na Aba "Fantasias".

Este gatinho já tem outra fantasia disponível.

Vamos usá-la no nosso programa, através da instrução de APARÊNCIA "próxima fantasia".

Nosso gatinho vai mover-se 20 passos, trocar de fantasia, e mover-se novamente, mais 20 passos, para que a sua caminhada fique mais natural. Entre estas instruções, vamos inserir também a instrução de CONTROLE "espere 1 segundo", pelo simples fato de que, se esta não for inserida, as outras instruções vão ser executadas tão rápido, que você não vai perceber!!!

Por fim, vamos tornar este programa mais interessante, repetindo esta sequência de passos mais vezes, de forma que não seja executada uma única vez, e fim.

Para isto, vamos utilizar a instrução de CONTROLE "repita 10 vezes", inserir todo o bloco das outras instruções dentro deste, e executar novamente nosso programa.

Agora sim!!!! Nossa animação está muito mais interessante e natural!!! O gatinho se deslocou ao longo de toda a tela, trocando de avatar e parecendo estar caminhando, de verdade.

Iniciando a execução com outras instruções

Para iniciar a execução de um programa, além de usar a bandeira verde (Botão Ir), é possível determinar uma tecla do teclado que funcione como disparadora do script.

Desta forma, quando a tecla for pressionada, o script inicia sua execução.

Para determinar que o início da execução será determinado por uma tecla, você precisa arrastar para o início de um programa o controle:

escolher a tecla do teclado que vai disparar a execução, usando a flechinha do bloco, e pronto!

Exercício

1. Altere o tempo de espera do bloco de instruções do exemplo acima. O que acontece?
2. Altere o número de vezes que o bloco de instruções é repetido. O que acontece?
3. Teste a instrução de SOM "toque o som Meow até o fim" no seu programa.
4. Investigue outras instruções de MOVIMENTO e de aparência.

---

<< Página do Projeto Meninas Cientistas	AULA 1 - INTRODUÇÃO AO SCRATCH	AULA 2 - Efeitos Sonoros>>