C0. Animazione Nome


Creiamo un'animazione.



Benvenuto futuro programmatore! Oggi inizieremo la nostra prima avventura insieme.

Questo primo progetto è molto semplice ed è utile per un primo approccio al linguaggio di programmazione scratch. Questo primo progetto consiste nell'animare una parola.


Prima di tutto bisogna creare una nuova pagina di progetto andando su https://scratch.mit.edu/ e cliccando su "Crea" in alto a destra.


PROGETTAZIONE

Adesso che ci troviamo sulla pagina del progetto possiamo iniziare inserendo un nuovo sprite (oggetto, personaggio o animale che andremo ad animare), in questo caso una lettera, dalla libreria offerta da scratch cliccando in basso a destra sull'icona raffigurante il viso di un gatto. Le lettere si trovano in fondo alla pagina, per evitare di scorrere tutta la pagina potete cliccare sul filtro "LETTERE" in alto a destra.

Inserire una lettera alla volta, io ho scelto di scrivere la parola "LEARN", e le disponiamo in ordine. Notiamo che lo sprite del gattino rimane sullo sfondo, per cancellarlo basta cliccare sul gattino e successivamente sul pattume.

Adesso vado ad inserire lo sfondo: clicco in basso a destra sull’icona della cornice con i monti, seleziono lo sfondo (io ho scelto lo sfondo che si chiama “STRIPES”).


PROGRAMMAZIONE

È arrivato il momento di scrivere un po' di codice, o meglio di trascinare blocchi di comandi sull'area del codice.

Per prima cosa selezionare la lettera, nel mio caso la "L", a cui daremo le prime istruzioni, una volta selezionata comparirà un contorno azzurro.

Voglio che la "L" cambi colore quando viene cliccata dal giocatore. Vado nella categoria Situazioni e prendo l'istruzione "quando si clicca questo sprite" di colore giallo. Per far cambiare colore al mio sprite prendo dalla categoria Aspetto il comando "cambia effetto colore di 25" di colore viola e lo ripeto più volte con il comando "ripeti 10 volte" di colore arancione nella categoria Controllo.

Dopo aver inserito queste istruzioni cliccate sulla lettera dello schermo e vedrete la vostra prima animazione.

Adesso tocca alla seconda lettera, seleziono la lettera "E" (deve avere il contorno azzurro). Voglio che la "E" si sposti quando viene cliccata.

Decido di posizionare la mia lettera un po' più in basso, la trascino nel punto di partenza da me scelto e vado ad inserire "quando si clicca su bandiera verde" di colore giallo nella categoria Situazioni seguito da un "vai a x: y:" nella categoria Movimento. I valori delle coordinate potranno essere diversi dai miei, dipende da dove avrete posizionato la lettera. Ricordarsi di posizionare prima l'oggetto sul punto di partenza dello sfondo e prendere solo dopo il "vai a x: y:". Adesso che ho inserito la posizione iniziale, al mio click la lettera questa dovrà posizionarsi alla stessa altezza delle altre. In questo caso prendere prima nella categoria Situazioni l'istruzione "quando si clicca questo sprite" e dopo nella categoria Movimento l'istruzione"scivola in x secondi a x: y:". Anche in questo caso posiziono prima la lettera e poi prendo lo scivola con i valori che mi suggerisce scratch.

Adesso tocca alla lettera "A", quindi la seleziono. La "A" avrà uno strano effetto ad occhio di pesce, anche se per me da più l'idea di un rigonfiamento che alla fine scoppia.

Vado nella categoria Situazioni e prendo l'istruzione "quando si clicca questo sprite" di colore giallo. Per far cambiare effetto al mio sprite prendo dalla categoria Aspetto il comando "cambia effetto colore di 25" di colore viola e clicco sulla freccia di fianco a colore e seleziono "fish-eye di 25", inserisco il 50 al posto del 25 e lo ripeto più volte con il comando "ripeti 12 volte" di colore arancione nella categoria Controllo. Alla fine per riportare la lettera alla forma iniziale inserire "rimuovi effetti grafici" dalla categoria Aspetto.


Siamo arrivati alla lettera "R" che ruoterà su se stessa.Vado nella categoria Situazioni e prendo l'istruzione "quando si clicca questo sprite" di colore giallo. Per far ruotare il mio sprite prendo dalla categoria Movimento il comando "ruota di 30 gradi" di colore blu e lo ripeto più volte con il comando di colore arancione nella categoria Controllo "ripeti 12 volte" per completare un giro completo di 360° gradi. Alla fine per riportare la lettera alla direzione iniziale, nel caso in cui rimanga storta, inserire "punta in direzione 90°" dalla categoria Movimento.

Ultimo sforzo! Lettera "N": la faremo ingrandire e poi ridurre.

Vado nella categoria Situazioni e prendo l'istruzione "quando si clicca questo sprite" di colore giallo. Per far cambiare dimensione al mio sprite prendo dalla categoria Aspetto il comando "cambia dimensione di 10" di colore viola e lo ripeto più volte con il comando "ripeti 10 volte" di colore arancione nella categoria Controllo. Per ridurlo inserisco le stesse istruzioni con un "cambia dimensione di 10" che verrà modificato con -10. Alla fine per riportare la lettera alla dimensione iniziale inserire "porta dimensione al 100%" dalla categoria Aspetto.

Clicca su ogni lettera per eseguire le istruzioni appena inserite!

Ecco il link del progetto completo: Animazione Nome

(clicca su "Guarda dentro" per vedere le istruzioni)


108 visualizzazioni