ALURA - Ensino Médio 1 ANO - Curso 1 do 1 Bimestre - Aula 11

Prévia do material em texto

Botões brilhantes
Aula 11
Habilidades trabalhadas nesta aula:
(EF07MA04) Resolver e elaborar problemas que envolvam operações com números inteiros.
(EF07MA13) Compreender a ideia de variável, representada por letra ou símbolo, para expressar relação en-
tre duas grandezas, diferenciando-a da ideia de incógnita.
(EF07CO01) Criar soluções de problemas para os quais seja adequado o uso de registros e matrizes unidi-
mensionais para descrever suas informações e automatizá-las usando uma linguagem de programação.
(EF07CO02) Analisar programas para detectar e remover erros, ampliando a confiança na sua correção.
(EF07CO05) Criar algoritmos fazendo uso da decomposição e do reúso no processo de solução de forma 
colaborativa e cooperativa e automatizá-los usando uma linguagem de programação.
Listas: criando o seu jogo de 
cartas com listas e padrões
 Unidade
2
Adicionar efeito de brilho aos botões.
Replicar códigos usando a Mochila.
Organizar os blocos do projeto.
O que vamos aprender?
ACOMPANHE O VÍDEO DA AULA
https://cursos.alura.com.br/course/scratch-criando-jogo-cartas-listas-padroes/task/134378
3
Efeitos nos botões
Anteriormente, conseguimos deixar 
nosso projeto funcionando com as 
fantasias automatizadas e gerando 
atributos aleatórios somados aos 
pontos dos acessórios da frente 
e de trás das personagens das 
cartas do nosso jogo. Nesta aula, 
adicionaremos alguns efeitos 
visuais aos botões. Para isso, vamos 
configurar mudanças a aparência 
dos botões de atributo com blocos 
de controle, além de replicá-los 
utilizando o recurso Mochila 
no Scratch.
Professor, para iniciar a aula, sugere-se uma retomada com os estu-
dantes sobre o que foi realizado no projeto até o momento. O efeito 
visual é um dos elementos que mais chamam a atenção dos usuá-
rios, por isso, criaremos um efeito para destacar os botões de atribu-
to, portanto, pode ser interessante perguntar aos estudantes como 
eles gostariam de destacar os botões de atributos. É esperado que 
eles façam sugestões sobre como estilizar os botões utilizando blo-
cos de aparência, como mudar tamanho, cor, brilho etc. Nesta aula, 
faremos uma mudança no brilho.
4
Nosso projeto está funcionando: as cartas estão sendo compostas 
por diferentes atores que compõem o corpo das personagens e seus 
respectivos acessórios, que já estão configurados para mudarem os 
atributos de acordo com as fantasias selecionadas. 
Agora, adicionaremos alguns efeitos visuais para comparar a nossa carta 
com a carta do oponente. Queremos que, quando algum botão de atributo 
for clicado, esse botão ganhe destaque para deixar claro quais atributos 
estão sendo comparados. É importante observar que existem várias formas 
de fazer isso, mas, nesta aula, optaremos apenas por uma: alterar o brilho.
Vamos começar selecionando o ator Inteligência, localizado no canto 
inferior direito da tela: 
Pense que, ao clicamos em algum botão, precisamos antes passar o 
mouse por cima dele. Assim, é necessário criar uma condicional antes 
que a carta seja clicada, mas que mude o efeito 
visual dela se estivermos passando o mouse por 
cima desse ator. Para isso, vamos editar o script 
que recebe o início da rodada:
5
Da seção Sensores, arrastaremos o bloco 
para a Área de Código, posicionando-o próximo ao script mencionado.
Em seguida, arrastaremos, da seção Controle, o bloco de repetição 
 para o fim do script. Ainda da seção Controle, arrastaremos o 
bloco condicional para dentro do bloco de repetição. Feito isso, 
seu script ficará da seguinte maneira:
6
Como queremos adicionar um efeito visual que deve ser ativado quando 
este ator inteligência estiver sendo tocado pelo ponteiro do mouse, 
adicionaremos o sensor que havíamos deixado na Área de Código à 
lacuna bloco condicional, como mostra a imagem:
Feito isso, iremos na seção Aparência, pois todos os efeitos visuais estão 
nessa seção. Arrastaremos o bloco para o espaço 
vago do bloco condicional:
Mudaremos o valor do bloco de efeito, substituindo o valor 0 por 20.
7
Ao testar essa etapa do código, quando clicarmos na bandeira verde 
do Palco, observaremos que esse script está sendo executado, pois sua 
borda na Área de Código está amarela: 
Assim, quando passamos o mouse por cima do atributo inteligência, 
ele muda de cor, porém, quando o mouse não está mais passando por 
cima dele, o efeito de cor continua. Assim, precisamos configurar o que 
ocorrerá se a condicional não for atendida. 
Para isso, arrastaremos, da seção Aparência, o bloco 
para o segundo espaço do bloco condicional.
A seguir, configuraremos para que, em vez de alterar a cor, alteremos o 
brilho quando o ponteiro do mouse estiver tocando o botão.
Neste momento, os estudantes podem 
ser questionados sobre em que lugar do 
script deveremos realizar essa mudança. 
É esperado que os estudantes respon-
dam que será preciso alterar o bloco “de-
fina o efeito [cor] como (20)”. Além disso, 
é importante considerar que, além do 
brilho, existem outros efeitos que podem 
ser utilizados no Scratch. São eles: olho 
de peixe, turbilhão, pixelado, mosaico e 
fantasma. Fique à vontade para testá-los 
com a turma!
8
Vamos selecionar um novo efeito visual clicando no bloco de aparência 
que define esse efeito. Para isso, basta clicar no menu suspenso e mudar 
o tipo de efeito, escolhendo a opção brilho.
Agora sim, quando passarmos o mouse por cima desse ator, e até 
mesmo quando clicamos nele, o brilho será alterado. Porém, quando 
clicamos e tiramos o mouse de cima do atributo, ele perde o efeito visual. 
Queremos, porém, que, quando esse botão for clicado, a mudança no 
brilho permaneça até que se inicie uma nova rodada.
Para resolver isso, precisamos que o script em execução seja pausado 
quando o botão for clicado. Repare que, na seção Controle, existe o bloco 
. Arraste-o para a Área de Código.
9
Em seguida, clicaremos no menu suspenso desse bloco e 
selecionaremos a opção outros scripts no ator. Isso fará com que, 
quando o ator for clicado, o script que inicia rodada pare, fazendo com 
que o brilho permaneça até que se inicie uma nova rodada. 
Agora, arrastaremos esse bloco para dentro da condicional que está 
no script que indica o clique no ator. Feito isso, seu bloco ficará como 
mostra a imagem a seguir:
10
Podemos testar nosso jogo e verificar que o botão inteligência está 
funcionando conforme desejado. Quando passamos o mouse por cima 
dele, o brilho se altera e, quando clicamos nesse botão, o efeito de brilho 
permanece até que se inicie uma nova rodada, mesmo depois de termos 
tirado a seta do mouse de cima dele.
Agora que fizemos isso com o botão de inteligência, precisamos fazer o 
mesmo com os outros botões. Para isso, podemos replicar o script que 
recebe a rodada utilizando o recurso da Mochila. Além disso, também 
precisamos adicionar o bloco individualmente a cada um dos 
atores que representam os atributos da nossa carta.
11
Vamos começar abrindo a Mochila, localizada no rodapé da página.
Arrastaremos para dentro dela o script que recebe o início da rodada, até 
que a área da Mochila fique azul.
Quando soltarmos o script, repare que ele aparecerá como o primeiro 
item da esquerda para a direita na Mochila.
Feito isso, vamos selecionar o ator força: 
Então, deletaremos o script que recebe o início da rodada nesse ator, 
pois ele será substituído pelo script atualizado que acabamos de 
adicionar à Mochila.
12
Na Mochila, clicaremos no bloco que acabamos de adicionar e o 
arrastaremos para a Área de código até que ela fique azul:
Feito isso, vamos organizar nossa Área de Código clicando com o 
botão direito em algum espaço sem blocos e, em seguida, na opção 
Organizar Blocos:
13
Em seguida, assim como fizemos com o ator inteligência, da seção 
Controle, arrastaremos o bloco e mudaremos o menu 
suspenso para a opção outros scripts no ator. Em seguida, colocaremos 
esse bloco dentro da condicional do script que se inicia quando o ator é 
clicado, como mostra a imagem a seguir:
Podemostestar nosso programa clicando na bandeira verde. Ao fazer 
isso, perceberemos que o botão de força também está funcionando da 
maneira adequada.
Para finalizar, faremos o mesmo processo para o botão de velocidade. 
Professor, observe, juntamen-
te com estudantes, que o bloco 
que para o script muda seu for-
mato quando alteramos o menu 
suspenso da opção todos para 
outros scripts do ator. Questione 
os estudantes sobre a transfor-
mação desse bloco, verificando 
se todos compreenderam sua 
lógica. Espera-se que eles perce-
bam que, quando a opção todos 
está selecionada, este bloco só 
pode ser encaixado ao final do 
script, correspondendo ao co-
mando indicado. Ao realizarmos 
a alteração, é possível encaixá-lo 
em meio a outros blocos.
14
Começaremos selecionando o ator velocidade: . Em seguida, 
deletaremos o bloco que inicia a rodada que está neste ator, pois ele 
deverá ser substituído pelo script atualizado que está na Mochila.
Feito isso, organizaremos a Área de Código desse ator por meio da 
ferramenta Organizar Blocos.
E, por último, adicionaremos o bloco ao bloco condicional 
do script que se inicia pelo bloco 
, trocando a opção 
todos, no menu suspenso do bloco de 
controle, pela opção outros scripts no ator.
Agora, podemos testar nosso 
programa. Vamos perceber que todos 
os botões estão funcionando da 
maneira adequada!
 Desafio
15
Nesta aula, adicionamos efeitos visuais aos botões de atributo. 
Quando passamos o mouse por cima de algum desses botões, eles 
mudam o brilho e, se tirarmos o mouse, eles voltam ao normal. 
Além disso, quando os botões de atributo forem clicados, tanto a 
nossa carta quanto a do oponente ficarão em destaque até que se 
inicie uma nova rodada.
Diante disso, seu desafio será configurar outros efeitos visuais para 
quando o mouse passar por cima dos botões de atributos.
CLIQUE AQUI PARA AVALIAR ESTE MATERIAL
Espera-se que os estudantes alterem o bloco de mudança de brilho para outros tipos de efeito. Ao realizar essa atividade, eles podem de-
senvolver a capacidade de identificar padrões e personalizar seus projetos. Além disso, os valores dos blocos também podem ser alterados.
https://docs.google.com/forms/d/e/1FAIpQLSdj6D4ophEVDczMqZKzLL0_9vCK5C2UoSKSxaMr-1os8-B8-A/viewform