Inscreva-se no Canal!

Jogue aqui: https://scratch.mit.edu/projects/694266610/

Tutorial produzido pelo grupo “Hello World” Do ACT/LIAG

Descrição do material

A HQ do Patinho feio é uma HQ desenvolvida na plataforma Scratch referente ao tradicional conto de fadas do autor dinarmaques Hans Christian Andersen. A história segue a mesma ordem do que é encontrado em livros e vídeos ensinados para as crianças.

Objetivos do material

Promover a reflexão dos ensinamentos e morais tradicionais do conto aliado a animação com figuras e ambientes; colocar uma história tipicamente infantil para ser criada na plataforma Scratch.

Tutorial de elaboração

I. CONFIGURANDO OS CENÁRIOS:

Será necessário para esta HQ a utilização de três cenários, sendo eles o Woods, Garden-rock e Water And Rocks. Para preparar o ambiente, deve ser feito:

  1. Inicialmente, para adicionar um cenário a lista de cenários do projeto, vá até a seção Palco (localizada no canto inferior direito), clique em “Selecionar cenário” e selecione o cenário “Woods”.
  2. Seguindo os mesmos passos citados anteriormente, adicione os cenários “Garden-rock” e “Water And Rocks”.
  3. Após a adição dos cenários, verifique se a seção Palco está selecionada e clique na aba “Cenários” (presente no canto superior esquerdo), para abrir a tela de configuração das informações dos cenários adicionados.
  4. Nesta aba, será possível observar a presença de três cenários adicionados no projeto. Como apenas o “Water And Rocks”, o “Garden-rock” e o “Woods” serão utilizados, remova o primeiro cenário clicando sobre e na lixeira que aparece logo em seguida.

II. CONFIGURANDO OS ATORES:

Para a realização deste jogo serão necessários dez atores, sendo que todos serão adicionados por meio das imagens disponibilizadas para cada ator. Para prepará-los, deverá ser feito:

  1. Como o ator padrão do Scratch não será utilizado, começaremos o removendo. Indo até a área dos atores (localizada ao lado da seção Palco), selecione o “Ator1” e em seguida clique na lixeira.
  2. Para a narração da história, será utilizado o ator “Narração” disponibilizado na pasta. Para adicionar um ator que não está presente no site do Scratch, coloque o mouse sobre o botão “Selecione um Ator” e em seguida clique em “Enviar Ator”. Selecione o arquivo “Narração.sprite3” presente na pasta disponibilizada e em “Abrir”.
  3. O ator “Narração” conterá todos os textos narrando a história e, dessa forma, começaremos adicionando o texto referente a primeira narração. Verifique se o ator está selecionado e clique na aba “Fantasias” (presente no canto superior esquerdo). Para escrever o texto a ser apresentado, é preciso clicar no símbolo “T”, selecionar a cor do texto (nesse caso preto) e clicar sobre a imagem na posição desejada. Para a primeira narração, o texto é “Era uma vez uma mamãe pata que botou cinco ovos e esperava ansiosamente pelo dia em que os ovos chocassem.”. Coloque o texto em várias linhas para que fique somente no espaço do retângulo e, após, centralize o texto no espaço utilizando a marcação existente ao centro quando está a arrastar o texto.
  4. Para adicionar as demais narrações e manter a mesma estrutura do ator, clique com o botão direito sobre a fantasia “narracao1”, depois em “duplicar” e assim teremos a fantasia “narracao2”. Para modificar o seu texto e colocar a segunda narração, confirme que o símbolo “T” está selecionado, clique sobre o texto e altere conforme necessário. Para a segunda narração, o texto é “Quando o grande dia chegou, os ovos da mamãe pata começaram a chocar um por um.”. Ao final, faça os ajustes necessários.
  5. Repita as instruções do passo 4 para incluir as demais narrações. Ao final, todas as narrações que estarão presentes no ator são:
  6. Era uma vez uma mamãe pata que botou cinco ovos e esperava ansiosamente pelo dia em que os ovos chocassem.
  7. Quando o grande dia chegou, os ovos da mamãe pata começaram a chocar um por um.
  8. O último ovo estava demorando mais para chocar e a mamãe pata começou a ficar preocupada.
  9. Finalmente, a casca do último ovo se abriu e, para surpresa da mamãe pata, o patinho que saiu de lá era diferente de todos os outros.
  10. Os dias iam se passando e, por ele não ser igual aos demais, seus irmãos não eram muito legais e viviam zombando dele.
  11. Patinho Feio ficava muito triste por causa de tudo isso, se sentia mal por não ser igual aos outros e, cansado dessa situação, pensou:
  12. Ele resolveu fugir de casa para encontrar um lugar onde pudesse se sentir amado e acolhido.
  13. No meio do caminho, uma linda cisne viu que ele estava triste e veio a seu encontro.
  14. A cisne começou a rir e o Patinho Feio ficou sem entender nada. Até que então ela disse:
  15. De repente, os filhotes da cisne apareceram e ficaram ao seu lado falando o quanto ele era belo.
  16. Ele não se aguentava de alegria, encontrou uma família que o amava e o achava lindo, mas, o principal foi que ele encontrou a si mesmo e percebeu que não era feio.
  17. Seguindo as instruções do passo 2, adicione o ator “Mãe pata” por meio do arquivo “Mãe pata.sprite3” disponibilizado. Após incluirmos, é possível observar as suas configurações atuais. Para colocarmos o ator no local desejado, coloque para X o valor -140 e para o Y o valor -80. Como ainda iremos adicionar outros atores, para ficar mais fácil de visualizá-los, deixe-o invisível clicando na segunda imagem presente em “mostrar”.
  18. Inclua o ator “Cisne” por meio do arquivo “Cisne.sprite3” e coloque como configurações iniciais X igual a 158, para o Y igual a -7 e deixe-o invisível.
  19. Inclua o ator “Patinho feio” por meio do arquivo “Patinho feio.sprite3”. Será possível ver que este ator possui 3 fantasias. Para as configurações iniciais coloque X igual a 166, para o Y igual a -84 e deixe-o invisível.
  20. Inclua os 4 patinhos, insira 4 atores “Patinho” por meio do arquivo “Patinho.sprite3”. Estes atores também possuem 3 fantasias. Para as configurações iniciais coloque, respectivamente, X igual a 75 e Y igual a -136, X igual a 103 e Y igual a -91, X igual a 186 e Y igual a -147 e X igual a 127 e Y igual a -151. Ao final,  deixe-os invisível.
  21. Para o primeiro filhote de cisne, inclua o arquivo “Patinho feio.sprite3”. Para as configurações, renomeie indo no campo “Ator” como “Filhote de cisne”, coloque X igual a 264, para o Y igual a 20 e direção -90 para espelhar a imagem. Para ele nós iremos utilizar somente a fantasia “patinho feio”. Portanto, vá em fantasias e remova as outras duas fantasias.
  22. Para o segundo filhote de cisne, clique com o botão direito sobre o primeiro e, em seguida, duplicar. Para as configurações, coloque X igual a 264, para o Y igual a -86 e deixe os dois filhotes invisíveis.

III. LÓGICA DE CRIAÇÃO DA HQ:

      Para a criação da HQ, foi seguido um padrão de passos para determinadas ações como mudar de cena ou transmitir uma fala, ou pensamento. Sendo assim, como o processo se repete, será primeiramente explicado como as ações devem ser executadas e, posteriormente, o tutorial completo baseado nessas ações. Dessa forma, os passos padronizados são:

  • Narração da história: para ficar mais organizado, a história foi dividida em cenas conforme a  narração. Isso não é necessário, porém fica mais fácil de se localizar no andamento da HQ.
    • As cenas iniciarão sempre que forem chamadas. Dessa forma, coloque um bloco de controle “quando eu receber” com a nova mensagem “Cena 1”.
    • Caso queira mudar o cenário, coloque um bloco “mude para o cenário” com a opção desejada.
    • Para exibir a narração e esperar até que a tecla seja pressionada para removê-la, coloque um bloco de aparência “mude para a fantasia” com a opção desejada, como, por exemplo, “narracao1”, seguido do bloco “mostre”.
    • Caso queira colocar em cena alguma fala, pensamento ou animação, insira um bloco personalizado “Atualizar a cena” seguido do bloco de aparência “esconda”. Após esse bloco que deve ser colocado as ações desejadas.
    • Ao final das ações desejadas, para dar continuidade a próxima cena, coloque um bloco personalizado “Atualizar a cena” (explicado no passo III.2) seguido de um bloco de evento “transmita” com a mensagem para a cena seguinte (“Cena 2”).
  • Mudança de Cena: para a mudança de cena, será utilizado um conjunto de blocos que permita identificar quando a tecla “seta para direita” for pressionada somente uma vez, desconsiderando o caso da tecla permanecer pressionada.
    • Primeiramente é preciso um bloco que espera até o momento no qual a tecla não está sendo pressionada e, para isso, coloque um bloco de controle “espere até que” com um bloco operador “não” preenchido com um bloco de sensor “tecla pressionada” com a opção “seta para direita” selecionada.
    • Em sequência, para detectar quando a tecla for pressionada, a lógica é similar ao passo anterior, porém sem a presença do bloco operador “não”.
    • Como iremos utilizar com uma grande frequência esse conjunto de blocos no ator “Narração”, para não ficar tendo repetição de toda essa estrutura, será criado um bloco personalizado. Utilizando blocos personalizados é possível descrever o que deverá acontecer sempre que um script em execução invocá-lo, porém, os blocos criados só ficam disponíveis para o ator onde foi criado. Dessa forma, para criá-lo, selecione o ator “Narração”, vá na seção “Meus Blocos” e clique em “criar um bloco”. Coloque o nome “Atualizar a cena” e confirme.
    • Tudo que deverá ser executado quando o bloco “Atualizar a cena” for invocado deverá estar na sequência do script “defina Atualizar a cena”. Dessa forma, coloque a estrutura de blocos criados nos passos III.2.1 e  III.2.2 logo em sequência.
  • Todos os blocos personalizados, após criados, estarão presentes na seção “Meus Blocos” e seu uso seguirá a mesma lógica dos demais.
  • Falas: as falas executadas por algum dos atores serão chamadas por meio de mensagens partindo do ator “Narração” e, para cada fala, uma estrutura deverá ser seguida nos respectivos atores. Vamos utilizar como exemplo o ator “Patinho feio”.
    • Para que a fala aconteça, no ator “Narração”, na posição desejada coloque um bloco de evento “transmita“ com uma nova mensagem de nome “Patinho feio – Fala 1”. Para separar as falas, pode ser usado um bloco personalizado “Atualizar a cena” entre as falas.
    • No ator que conterá a fala, no caso “Patinho feio”, deverá colocar um bloco de evento “Quando eu receber” com a opção “Patinho feio – Fala 1”. Em sequência, coloque um bloco de aparência “diga” com a fala a ser apresentada.
    • Para remover a fala da tela quando for pressionado a tecla para trocar de cena, insira as mesmas estruturas descritas nos passos III.2.1 e III.2.2 e, por fim, um bloco “diga” sem nada em seu conteúdo.

OBS.: se houver várias falas ou pensamentos em um ator, é melhor criar um bloco personalizado assim como mencionado em III.2.3.

  • Pensamentos: A lógica usada é a mesma das falas, porém, ao invés de utilizar o bloco “diga” será utilizado o bloco “pense”.
  • Animações: as animações executadas por algum dos atores também serão chamadas por meio de mensagens partindo do ator “Narração” ou no início de alguma cena e, nos atores, só estarão presentes os passos relacionados a animação.
    • Para que a animação ocorra, no ator “Narração”, na posição desejada coloque um bloco de evento “transmita e espere“ com uma nova mensagem com um nome relacionado a animação que será executada. Na sequência, pode ser colocado alguma fala ou pensamento se desejar.

IV. CRIANDA A HQ

  • Quando a bandeira verde for clicada: o ator “Narração” dará início a história:
    • Para iniciar o código, vamos começar pelo ator “Narração”. Assim que a bandeira verde for clicada, deverá ser apresentada a primeira cena. Portanto, coloque o bloco de evento “quando (bandeira verde) for clicado” na área de código e, em seguida, um bloco “transmita” com a nova mensagem “Cena 1”.
    • Para garantir que os atores “Cisne”, “Filhote de cisne” e “Filhote de cisne2”, que não são necessários na primeira cena, estejam escondidos quando iniciar, coloque em cada um, um bloco de evento “quando (bandeira verde) for clicado” seguido de um bloco de aparência “esconda”.
  • Cena 1:
    • Para a cena 1, como ela não conterá nenhuma fala ou animação, coloque uma estrutura de narração descrita em III.1 contendo a opção III.1.2 com as opções para quando receber igual a “cena 1”, de cenário “Woods”, com a fantasia ”narracao1” e transmitindo a nova mensagem “cena 2”.
    • Para que o ator “Mãe pata” esteja visível assim que começar a cena 1, coloque um bloco “quando eu receber” com a opção “cena 1” seguido de um bloco “mostre”.
    • Para que o ator “Patinho feio” esteja visível na posição correta e com o visual “ovo” assim que começar a cena 1, coloque um evento “quando eu receber” com a opção “cena 1”, um bloco de aparência “mude para fantasia” com a opção “ovo” e, para a posição, um bloco de movimento “vá para x: y:” com os valores 166 e -84. Para ajustar o direcionamento coloque um bloco “aponte para direção“ com o valor -90. Por fim coloque um bloco de aparência “mostre”.
    • Para os atores patinhos, siga as mesmas instruções do passo anterior mudando apenas o posicionamento. Os respectivos posicionamentos são: “Patinho”: X igual a 75 e Y igual a -136; “Patinho2”: X igual a 103 e Y igual a -91; “Patinho3”: X igual a 186 e Y igual a -147; “Patinho4”: X igual a 127 e Y igual a -151.
  • Cena 2:
    • Para a cena 2, como conterá a animação dos ovos se abrindo, coloque uma estrutura de narração descrita em III.1 contendo a opção III.1.4 com as opções para quando receber igual a “cena 2”, com a fantasia ”narracao2” e transmitindo a nova mensagem “cena 3”. Após o bloco “esconda”, coloque um evento “transmita e espere” com a nova mensagem para a animação “Abrir ovos”.
    • Para cada ator patinho, coloque um bloco de evento “quando eu receber” com a opção “Abrir ovos” seguido de um bloco “espere seg” com o valor igual a sua numeração (“Patinho2” igual a 2) e um bloco de aparência “mude para fantasia” com a opção “pato nascendo”.
  • Cena 3:
    • Para a cena 3, como conterá uma fala, coloque uma estrutura de narração descrita em III.1 contendo a opção III.1.4 com as opções para quando receber igual a “cena 3”, com a fantasia ”narracao3” e transmitindo a nova mensagem “cena 4”. Após o bloco “esconda”, siga os passos para uma fala descritos em III.3 para o ator “Mãe pata”. Como nome da mensagem coloque o nome “Mãe pata – Fala 1” e como fala “Por que será que este último ovo está demorando tanto para chocar?”.
    • Para o início da cena, cada ator “Patinho” irá se deslocar até próximo da “mãe pata”. Para isso, coloque um bloco de evento “quando eu receber” com a opção “Cena 3” seguido de um bloco de aparência “mude para fantasia” com a opção “pato”. Para a posicionamento, coloque um bloco de movimento “deslize por segs até x: y:” com o tempo de 1 segundo e as respectivas posições: “Patinho”: X igual a -21 e Y igual a -116; “Patinho2”: X igual a 32 e Y igual a -79; “Patinho3”: X igual a 111 e Y igual a -129; “Patinho4”: X igual a 48 e Y igual a -147. Por fim, eles irão virar para o ovo que ainda não abriu e para isso, coloque um bloco “aponte para direção“ com o valor 90.
  • Cena 4:
    • Para a cena 4, como conterá a animação dos ovo do patinho feio se abrindo, coloque uma estrutura de narração descrita em III.1 contendo a opção III.1.4 com as opções para quando receber igual a “cena 4”, com a fantasia ”narracao4” e transmitindo a nova mensagem “cena 5”. Após o bloco “esconda”, coloque um evento “transmita e espere” com a nova mensagem “Patinho feio nascendo”.
    • No ator “Patinho feio”, coloque um bloco de evento “quando eu receber” com a opção “Patinho feio nascendo”. Coloque um bloco de aparência “mude para fantasia” com a opção “patinho nascendo” seguido de um bloco “espere seg” com o valor 1 e mais um bloco de aparência “mude para fantasia” com a opção “patinho feio”.
  • Cena 5:
    • Para a cena 5, como irá trocar de cenário e conterá algumas falas, coloque uma estrutura de narração contendo todos os elementos descritos em III.1. Como opções, coloque para quando receber igual a “cena 5”, para o cenário “Garden-rock”, para a fantasia ”narracao5” e transmitindo a nova mensagem “cena 6”. Após o bloco “esconda”, siga os passos para uma fala descritos em III.3 para o ator “Patinho” com a nova mensagem “Patinho – Fala 1” e fala “Olha só como ele é diferente” seguido de um bloco “Atualizar a cena” e, por fim, outra fala só que do ator “Patinho2” e com a mensagem “Patinho2 – Fala 1” e fala “Ele é um patinho muito feio”.
    • O ator “Mãe pata” não deve mais aparecer nesta cena em diante e, para isso ocorrer, coloque um bloco de evento “quando eu receber” com a opção “Cena 5” seguido de um bloco “esconda”.
    • Para o ator “Patinho feio” iniciar na posição correta no novo cenário, coloque um bloco de evento “quando eu receber” com a opção “Cena 5” seguido de um bloco de movimento “vá pa x: y:” com os valores 115 e -112.
    • Assim como “Patinho feio”, os atores patinhos deverão estar na nova posição. Sendo assim, faça o mesmo do passo anterior para cada um deles seguindo as respectivas posições: “Patinho”: X igual a -148 e Y igual a -73; “Patinho2”: X igual a -58 e Y igual a -101; “Patinho3”: X igual a -21 e Y igual a -160; “Patinho4”: X igual a -138 e Y igual a -154.
  • Cena 6:
    • Para a cena 6, como conterá um pensamento e uma animação, coloque uma estrutura de narração descrita em III.1 contendo a opção III.1.4 com as opções para quando receber igual a “cena 6”, com a fantasia ”narracao6” e transmitindo a nova mensagem “cena 7”. Após o bloco “esconda”, coloque um bloco “transmita e espere” com a nova mensagem “Esconder” seguido dos passos para um pensamento descritos em III.4 para o ator “Patinho feio”. Como nome da mensagem coloque o nome “Patinho feio – Pensamento 1” e como pensamento “O que vou fazer? Para onde posso ir para que me deixem em paz?”.
    • Para a animação ”Esconder”, vá no ator “Patinho feio” e coloque o bloco de evento “quando eu receber” com a opção ”Esconder” seguido de um bloco de movimento “deslize por segs até x: y:” com o tempo de 2 segundo e a posição X igual a 90 e Y igual a 36.
    • Quando é emitido a mensagem “Patinho feio – Pensamento 1”, os atores “Patinho2” e “Patinho3” devem se virar. Para isso, coloque o bloco de evento “quando eu receber” com a opção “Patinho feio – Pensamento 1” seguido do bloco de movimento  “aponte para direção“ com o valor -90.
  • Cena 7:
    • Para a cena 7, como conterá a animação do patinho feio fugindo, coloque uma estrutura de narração descrita em III.1 contendo a opção III.1.4 com as opções para quando receber igual a “cena 7”, com a fantasia ”narracao7” e transmitindo a nova mensagem “cena 8”. Após o bloco “esconda”, coloque um evento “transmita e espere” com a nova mensagem “Fugir”. OBS.: Caso a narração fique atrás do ator “Patinho feio”, basta selecionar o ator “Narração” e clicar no bloco de aparência “vá para a camada da frente”.
    • No ator “Patinho feio”, para a animação dele fugindo da cena, coloque um evento “quando eu receber” com a opção “Fugir”, um bloco “aponte para direção“ com o valor 90 para mudar seu direcionamento, um bloco de movimento “deslize por segs até x: y:” com o tempo de 2 segundo e a posição  X igual a 280 e Y igual a 36 e, por último, um bloco “esconda“.
  • Cena 8:
    • Como o cenário será mudado, os atores patinhos deverão se esconder. Para isso, coloque um bloco “quando eu receber” com a opção “cena 8” seguido do bloco “esconda”.
    • Assim que a cena for iniciada, o ator “Cisne” deverá estar aparecendo na tela na posição correta e, para isso, coloque um bloco “quando eu receber” com a opção “cena 8” seguido do bloco “vá para x: y:” com os valores 158 e -7 e, por fim, o bloco “mostre”.
    • Para a cena 8, como irá trocar de cenário e conterá uma animação e algumas falas, coloque uma estrutura de narração contendo todos os elementos descritos em III.1. Como opções, coloque para quando receber igual a “cena 8”, para o cenário “Water And Rocks”, para a fantasia ”narracao8” e transmitindo a nova mensagem “cena 9”. Após o bloco “esconda”, para a animação, coloque um bloco “transmita e espere” com a nova mensagem “Encontro com cisne”. Após isso, siga os passos para uma fala descritos em III.3 para o ator “Cisne” com a nova mensagem “Cisne – Fala 1” e fala “Porque está chorando meu pequeno?” seguido de um bloco “Atualizar a cena” e, por fim, outra fala só que do ator “Patinho feio” e com a mensagem “Patinho feio – Fala 1” e  a fala “Porque sou um pato muito feio e ninguém me ama!”.
    • Para a animação do ator “Patinho feio”, coloque um evento “quando eu receber” com a opção “Encontro com cisne”, um bloco de movimento “vá para x: y:” com os valores -265 e -114, um bloco “mostre” e, por fim, um bloco “deslize por segs até x: y:” com o tempo de 4 segundo e a posição X igual a -126 e Y igual a -107.
    • Para a animação do ator “Cisne”, coloque um evento “quando eu receber” com a opção “Encontro com cisne”, um bloco de movimento “deslize por segs até x: y:” com o tempo de 4 segundo e a posição X igual a -2 e Y igual a -49.
  • Cena 9:
    • Para a cena 9, como conterá uma fala, coloque uma estrutura de narração descrita em III.1 contendo a opção III.1.4 com as opções para quando receber igual a “cena 9”, com a fantasia ”narracao9” e transmitindo a nova mensagem “cena 10”. Após o bloco “esconda”, siga os passos para uma fala descritos em III.3 para o ator “Cisne”. Como nome da mensagem coloque o nome “Cisne – Fala 2” e como fala “Primeiramente você não é um pato, você é um cisne, na verdade um lindo cisne.”.
  • Cena 10:
    • Para a cena 10, como conterá uma animação e algumas falas, coloque uma estrutura de narração descrita em III.1 contendo a opção III.1.4 com as opções para quando receber igual a “cena 10”, com a fantasia ”narracao10” e transmitindo a nova mensagem “cena 11”. Após o bloco “esconda”, para a animação, coloque um bloco “transmita e espere” com a nova mensagem “Filhotes chegam”. Após isso, siga os passos para uma fala descritos em III.3 para o ator “Filhote de cisne” com a nova mensagem “Filhote de cisne – Fala 1” e fala “Um novo cisne para brincarmos” seguido de um bloco “Atualizar a cena” e, por fim, outra fala só que do ator “Filhote de cisne2” e com a mensagem “Filhote de cisne2 – Fala 1” e fala “E olha como ele é bonito”.
    • Para a animação do ator “Filhote de cisne”, coloque um evento “quando eu receber” com a opção “Filhotes chegam”, um bloco de movimento “vá para x: y:” com os valores 264 e 20, um bloco “mostre” seguido de um bloco de movimento “deslize por segs até x: y:” com o tempo de 4 segundo e a posição X igual a 45 e Y igual a -7.
    • Já para a animação do ator “Filhote de cisne2”, siga as mesmas instruções do passo anterior porém com os valores da primeira posição como sendo 264 e -86, de tempo igual a 2 segundos e da, segunda posição, igual a 144 e a -126.
  • Cena 11:
    • Para a cena 11, como ela encerrará a história, coloque apenas as estruturas de narração descritas em III.1.1 e III.1.3 com as opções para quando receber igual a “cena 11” e, com a fantasia ”narracao11”.

Pontos de atenção

  1. As posições informadas foram apenas para replicar o que foi feito, porém podem ser escolhidas mais facilmente sem ser colocado manualmente nos blocos de movimento. Uma opção para ficar mais fácil é arrastar o ator até a posição desejada e, após isso, adicionar o bloco ao script. Fazendo isso, os valores registrados neles serão da posição atual do ator.
  2. A lógica por trás da HQ é simples, porém, devido aos passos repetidos a cada etapa deixou o material extenso. Logo, pode ser usada apenas a etapa III junto de algumas cenas para explicar como funciona e, posteriormente, executar uma atividade para exercitar a criação da continuidade da história.
  3. Para validar se tudo está funcionando corretamente, ao final de cada cena, execute o código e visualize se está funcionando conforme o esperado.

Links úteis

Imagens originalmente obtidas em: