• +55 11 4551 0059
  • contato@planetcode.com.br

Aprenda a fazer um Cartão Animado com Scratch

Que tal presentear seus amigos e parentes com um cartão animado e personalizado ? Criar um vídeo deste cartão e compartilhar nas redes sociais ? Além de dar um presente único e inesquecível, de quebra aprenderá muito sobre programação.

Cartão de Aniversário Animado com Scratch

Utilizaremos a linguagem de programação Scratch para criar este cartão, para isso acesse o link abaixo, crie seu login de acesso e abra o editor:

Editor Scratch

Elementos do Cartão

Primeiro vamos adicionar todos os elementos e objetos necessários para o cartão, eles são basicamente o Palco, os Atores e os Sons. 

Abaixo vamos configurá-los passo a passo.

Passo 1 - Palco

O palco é o cenário onde as ações ocorrem, você pode escolher um palco da biblioteca do Scratch, selecionar uma foto ou figura do seu computador, desenhar no editor ou ainda tirar uma foto instantaneamente para servir como palco.

A definição do palco é feita através dos botões localizados no canto inferior esquerdo:

Vamos selecionar aqui nosso palco, neste exemplo vamos pegar uma foto da biblioteca:

Passo 2 - Atores

Os atores são todos os elementos que aparecem no palco realizando alguma ação, podem ser personagens, objetos, letras, números ou figuras de qualquer natureza.

Assim como o palco, os atores podem ser alguma imagem já existente na biblioteca, um desenho que pode criar manualmente, uma imagem do seu computador ou uma foto que pode tirar na hora.

Os atores são configurados na parte inferior ao lado direito da configuraçõa do palco:

 

Em nosso cartão os atores serão:

– bolo de aniversário

– letras P, A, R, A, B, É, N e S

– 4 balões de festas

– 6 serpentinas

Não vamos utilizar o “Gato”, desta forma você pode excluí-lo clicando com o botão direito do mouse e selecionando a opção “apagar”.

Passo 3 - Posicionando os Atores

Na área de exibição você posicionará todos os atores no local onde as ações irão ocorrer.

Neste exemplo vamos posicionar o bolo ao centro, as letras ao redor do bolo, os balões na parte de baixo e as serpentinas no topo. 

Passo 4 - Sons

Para deixar nosso cartão mais animado vamos colocar uma música, para isso vamos selecionar o palco escolhido e carregar a música escolhida na aba “Sons”.

Uma dica importante, você pode utilizar em suas criações músicas que não tem direito autoral, o YouTube disponibiliza uma biblioteca com diversas músicas no canal abaixo:

Em nosso cartão vamos utilizar a música abaixo, mas fique à vontade para escolher a que mais lhe agrada:

Na descrição do vídeo você vai encontrar o link para download: 

No canto inferior esquerdo selecione o palco escolhido:

Em seguida, selecione a aba “Sons” logo abaixo do menu principal ao lado direito. Uma vez selecionada carregue o arquivo escolhido para o seu projeto:

Programação

Agora que já inserimos todos os elementos vamos fazer a programação. A programação é o conjunto de comandos para que os elementos realizem as ações desejadas.

O nosso cartão executará uma sequência de ações determinadas, esta sequência deve ser definida antes do início da programação, da seguinte forma:

a – A animação começa com o Palco totalmente pixelado, nenhum elemento é mostrado e a música é iniciada

b – Aos poucos a imagem do Palco volta ao normal

c – Quando o Palco voltar ao normal as letras aparecerão de forma sequêncial, obedecendo a ordem da palavra

d – Um efeito visual será atribuído a cada letra que aparecer

e – Quando todas as letras aparecerem o bolo surgirá e piscará algumas vezes

f – Quando o bolo parar de piscar as serpentinas cairão e os balões subirão simultâneamente

g – Ao final da música a animação é encerrada

 

Após definir os passos que sua animação irá executar é hora de fazer a programação, confira abaixo:

Passo 1 - Início da Animação

A animação tem início quando a bandeira verde, posicionada na parte superior direita da área de exibição, é pressionada. Quando isto ocorre todos os comandos (scripts) de cada elemento irão ser executados de acordo com sua ordem e lógica.

Neste projeto vamos configurar a primeira ação no Palco, ele será responsável por comandar o início da animação, para isso vamos inserir o seguinte script neste elemento:

Quando a bandeira verde for pressionada o Palco irá enviar uma mensagem a todos os elementos do projeto, ao receber esta mensagem cada elemento irá executar sua sequência de comandos.

Aqui criamos a mensagem “iniciou”:

Passo 2 - Execução da Música e Fim da Animação

Em nosso projeto o tempo de duração da animação vai corresponder ao tempo de execução da música que escolhemos, para isso vamos incluir os seguintes comandos na área de script do Palco para execução da música:

Informamos que ao receber a mensagem “iniciou” a música será executada até seu fim e quando terminar todos os scripts de todos os elementos do projeto serão finalizados.

Passo 3 - Efeito do Palco

Vamos adicionar um efeito de “pixelização” ao nosso Palco, ele vai aparecer totalmente pixelizado e aos poucos a imagem toma sua forma normal.

Vamos começar criando uma variável chamada “efeito” para controlar o grau de pixelização do Palco, para isso iremos no bloco de comandos “Variáveis” e selecionamos o botão “Criar uma variável”:

 

O valor do efeito de pixelização vai começa em 100 e deve chegar à 0 (imagem normal), para isso iremos inserir uma “repetição” onde a cada passagem o valor da variável diminuirá em 2, para isso vamos inserir o seguinte bloco de comandos:

– Assim que o bloco receber a mensagem de início ele vai mudar a imagem e vai pixelizar para o valor 100. 

– Iremos atribuir o valor da variável “efeito” ao comando “mude o efeito”, onde deve ser selecionado o efeito “pixelização”.

– A repetição terminará assim que o valor da variável for 0.

– A repetição irá acontecer em ciclos de 0.1 segundos.

– Ao final da repetição será enviada a mensagem “passo1” (que deve ser criada) para que a próxima sequência de acontecimentos ocorra.

Passo 4 - Efeito das Letras

Todas as letras ficarão invisíveis no início da animação e começarão a aparecer aos poucos, de forma sequencial. Para que as letras fiquem invisíveis devemos inserir o seguinte bloco de comandas na sessão “Scripts” de todas elas:

Quando o efeito de pixelização no Palco terminar as letras serão exibidas de forma sequencial com intervalo de 1 segundo entre elas, funcionando da seguinte forma: 

a – letra “P” recebe a mensagem “passo1” do Palco, aguarda 1 segundo e envia a mensagem “passo2”;

b – letra “A” recebe a mensagem “passo2” da letra “P”, aguarda 1 segundo e envia a mensagem “passo3”;

c – letra “R” recebe a mensagem “passo3” da letra “A”, aguarda 1 segundo e envia a mensagem “passo4”;

…e assim por diante.

Desda forma devemos insegir os seguintes blocos de comandos na sessão “script” de cada letra:

Agora vamos configurar os efeitos de cada letra em nossa animação, ficando:

P – girar 

A – crescer e diminuir

R – mudar de cor

A – dançar de um lado para outro

B – balançar de um lado para outro

É – inchar e desinchar

N – torcer

S – sumir e aparecer

 

Letra P - Girar

A letra “P” irá girar sem parar, utilizaremos o comando “repetir sempre” e o comando “girar”, antes porém vamos exibir a letra que está oculta

Desta forma vamos inserir o seguinte script na letra “P”:

Como o elemento vai se movimentar durante a execução, vamos incluir também o comando para ele voltar a posição inicial quando executarmos o programa novamente, para isso no script da letra vamos adicionar:

Letra A - Crescer e Diminuir

Após receber a mensagem da letra “P” vamos iniciar os comandos da letra “A”, utilizaremos o comando “adicione x ao tamanho” com números positivos para crescer e com números negativos para diminuir.

Essas ações acontecerão dentro de 3 repetições, uma principal que não terá fim (“sempre”) e outras 2 para os comandos de crescer e diminuir.

Colocamos aqui estas 2 repetições para que o movimento fique mais suave, dando um aspecto de movimento mais natural.

Desta forma vamos inserir o seguinte script na letra “A”:

Vamos também adicionar um comando para restaurar o seu tamanho natural no início de cada execução, para isso no script da letra vamos adicionar:

Letra R - Mudar de Cor

Após receber o mensagem da letra anterior vamos alterar a cor da letra através do comando “adicione ao efeito”, selecionando o efeito “cor”.

Este comando estará dentro de uma repetição infinita (“sempre”), alterando continuamente a cor através do valor 5.

Desta forma vamos inserir o seguinte script na letra “R”:

Letra A - Dançar de um Lado para Outro

Vamos usar aqui o comando de movimento “adicione n a x” com n sendo um número positivo para se deslocar para direita e n negativo para ir para esquerda.

Estes comandos serão executado após receberem a mensagem da letra anterior e também estarão dentro de 3 repetições para que se movimentem de forma mais natural.

Desta forma vamos inserir o seguinte script na letra “A”:

Posicionaremos também o elemento em seu local original a cada início de execução, para isso no script da letra vamos adicionar:

Letra B - Balançar de um Lado para Outro

Utilizaremos os comandos “gire p/dir” e “gire p/esq” para dar o efeito de balanço, estes comandos estarão dentro de uma repetição infinita (“sempre”) separados por um intervalo de tempo de 0.2 segundos para criar um efeito de movimento mais natural da letra.

A posição original da letra é reta, iremos fazer ele balançar para direita 15 graus, voltar a sua posição original (“gire p/esq” 15 graus), balançar para a esquerda (“gire p/esq” 15 graus) e voltar a posição original (“gire p/dir” 15 graus) para repetir toda a sequência novamente.

Desta forma vamos inserir o seguinte script na letra “B”:

Iremos também colocar a letra em sua posição original no início da execução, para isso no script da letra vamos adicionar:

Letra É - Inchar e Desinchar

Os efeitos inchar e desincher são criados utilizando o comando “adicione ao efeito” com o efeito “olho de peixe”, para inchar vamos adicionar 15 ao seu valor e para desinchar -15.

Para tornar o efeito mais suave e natural vamos colocar os comandos em 3 repetições, a principal será infinita (“sempre”) para que a letra fique inchando e desinchando sem parar.

As outras 2 repetições serão para os comandos de inchar e desinchar, vão executar sequencialmente 10 vezes cada.

Desta forma vamos inserir o seguinte script na letra “É”:

Para retornar ao estado original da letra vamos adicionar o comando “apague os efeitos gráficos” no início da execução do programa, para isso no script da letra vamos adicionar:

Letra N - Torcer

Na letra “N” vamos utilizar o comando “adicione ao efeito” com o efeito “rodamoinho”, para torcer para direita vamos adicionar 15 ao seu valor e para esquerda -15.

Para tornar o efeito mais suave e natural vamos colocar os comandos em 4 repetições, a principal será infinita (“sempre”) para que a letra siga fazendo o efeito de torção sem parar.

As outras 3 repetições serão para:

1 – torcer para esquerda (10 repetições de 15)

2 – voltar ao estado normal e torcer para direita (20 repetições de -15)

3 – voltar ao estado normal torcendo para esquerda (10 repetições de 15)

 

Desta forma vamos inserir o seguinte script na letra “N”:

Para retornar ao estado original da letra vamos adicionar o comando “apague os efeitos gráficos” no início da execução do programa, para isso no script da letra vamos adicionar:

Letra S - Sumir e Aparecer

A letra “S” terá um efeito de sumir e aparecer gradual, para isso vamos utilizar o comando “adicione ao efeito” com o efeito “fantasma” com o valor de 5 para sumir e -5 para aparecer.

Os comandos estarão dentro de 3 repetições para a animação ocorrer continuamente, com a repetição “sempre” e o efeito ser suave e natural através das outras 2 repetições que serão executadas 10 vezes cada.

Os comandos da letra ficam da seguinte forma:

Para retornar ao estado original da letra vamos adicionar o comando “apague os efeitos gráficos” no início da execução do programa, para isso no script da letra vamos adicionar:

Passo 5 - Efeito do Bolo

Após todas as letras aparecerem na animação o Bolo irá receber a mensagem “passo 9” e irá executar suas ações, o Bolo irá aparecer e desaparecer no centro do Palco 6 vezes.

Para ajustar o tamanho da figura do Bolo ao Palco vamos adicionar o comando “mude o tamanho para x %” com o valor de 60, este comando ficará no script de inicialização do Bolo:

Vamos colocar os comandos “mostre” e “esconda”, separados por um intervalo de 0.4 segundos, dentro do comando “repetição x vezes” com o valor de 6:

Passo 6 - Efeito das Serpentinas

As Serpentinas cairão do topo da animação após o efeito do Bolo terminar, simultaneamente com os Balões que irão subir.

Para isso vamos primeiro posicionar todas as serpentinas na coordenada “y:180” (topo da tela), a coordenada “x” pode ser qualquer uma.

Desta forma o seguinte script deve ser inserido em todas as 6 Serpentinas (lembrando que a coordenada “x” deve ser diferente em cada uma delas):

 

O Bolo enviará a mensagem “passo10” quando terminar de executar seu efeito, as Serpentinas irão receber esta mensagem e executar suas ações.

Para realizar o efeito de queda das Serpentinas vamos usar o comando “deslize por n seg até x: a y: b”, onde informaremos em quanto tempo a Serpentina deve percorrer o trajeto de sua posição atual até as coordenadas definidas aqui para “x” e “y”.

Vamos fazer com que as Serpentinas caiam de diferentes formas para simular a realidade, para isso vamos usar números aleatórios entre 1.5 e 2.5 para o tempo de descida.

As Serpentinas devem descer até a coordenada “y:-180” (base da tela), a coordenada “x” não deve ser alterada.

Desta forma o script para todas as Serpentinas deve ser:

Passo 7 - Efeito dos Balões

Os Balões irão subir da base da tela ao topo, fazendo o movimento contrário das Serpentinas, assim que o Bolo terminar sua animação.

Para isso vamos primeiro posicionar os Balões na base da tela com o comando “vá para x: a y: b”, onde “y” terá o valor de “-180” e “x” qualquer um, onde cada balão terá o seu.

Além disso vamos deixar cada Balão com uma cor diferente, para isso utilizaremos o comando “adicione ao efeito” com o efeito “cor”, onde cada Balão terá um valor(cor) distinto:

– Balão 1 = 25

– Balão 2 = 50 

– Balão 3 = 75

– Balão 4 = 100

O script de cada Balão ficará da seguinte forma (lembrando que os valores de “x” e “cor” serão diferentes entre eles):

Assim como as Serpentinas, vamos fazer com que o voo dos Balões pareça natural utilizando números aleatórios para o tempo de subida até o topo da tela, para isso vamos usar números aleatórios entre 1.5 e 2.5 para o tempo de subida.

Os Balões devem subir até a coordenada “y:180”, desta forma o script para cada Balão ficará da seguinte forma (lembrando que o valor de “y” será diferente para cada Balão):

 

Passo 8 - Execução

Para verificar o resultado do seu trabalho clique na bandeira verde e veja sua animação completa:

Passo 9 - Gravar Vídeo

Parabéns, seu cartão animado já está pronto. Agora vamos gravar um vídeo para enviar seu presente, para isso basta ir na opção “Gravar & exportar vídeo” no menu “Arquivo”:

Após o término da gravação salve o arquivo localmente.

Passo 10 - Compartilhe seu Cartão Animado

O vídeo é gravado no formato de arquivo LFV, além de ser muito grande, normalmente esse formato não pode ser compartilhado nas mídias sociais, para isso vamos primeiro convertê-lo.

Existem sites que fazem a conversão gratuitamente, um exemplo é o abaixo:

https://online-convert.com

Selecione o formato MP4:

 

Escolha o seu vídeo:

E mande converter, não é necessário ajustar nenhuma configuração:

Após a conversão seu arquivo será salvo localmente e estará pronto para ser compartilhado.

Aproveite !!!

Do NOT follow this link or you will be banned from the site!
error: SITE PROTEGIDO !!!

AULA GRATUITA ONLINE

Preencha com as informações abaixo para receber sua aula gratuita online.

AULA GRATUITA ONLINE

Preencha com as informações abaixo para receber sua aula gratuita online.

AULA GRATUITA ONLINE

Preencha com as informações abaixo para receber sua aula gratuita online.

AULA GRATUITA ONLINE

Preencha com as informações abaixo para receber sua aula gratuita online.

AULA GRATUITA ONLINE

Preencha com as informações abaixo para receber sua aula gratuita online.

AULA GRATUITA ONLINE

Preencha com as informações abaixo para receber sua aula gratuita online.