interaktív alkalmazások készítése...

21
Interaktív alkalmazások készítése Scratch-ben Interaktív alkalmazások készítése Scratch-ben az előző foglalkozás összefoglalása változók szereplők mozgatása, érintés érzékelése távolság és idő érzékelése szöveg bekérése felhasználótól

Upload: others

Post on 28-Jun-2020

11 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: Interaktív alkalmazások készítése Scratch-benszentendre.coderdojo.hu/wp-content/uploads/scratch-interaction-201… · Interaktív alkalmazások készítése Scratch-ben Ismétlés

Interaktív alkalmazások készítése Scratch-ben

Interaktív alkalmazásokkészítése Scratch-ben

az előző foglalkozás összefoglalása

változók

szereplők mozgatása, érintés érzékelése

távolság és idő érzékelése

szöveg bekérése felhasználótól

Page 2: Interaktív alkalmazások készítése Scratch-benszentendre.coderdojo.hu/wp-content/uploads/scratch-interaction-201… · Interaktív alkalmazások készítése Scratch-ben Ismétlés

Interaktív alkalmazások készítése Scratch-ben

Ismétlés

• animációs lehetőségek

– szereplők mozgatása, jelmezük váltása

– „mondd” és „gondold” utasítások

– háttér váltása (különböző színterek)

– időzítés és szinkronizáció

• mini-projekt: animációs film készítése

2

Page 3: Interaktív alkalmazások készítése Scratch-benszentendre.coderdojo.hu/wp-content/uploads/scratch-interaction-201… · Interaktív alkalmazások készítése Scratch-ben Ismétlés

Interaktív alkalmazások készítése Scratch-ben

Lehetőségek szereplők mozgatására

3

koordináta-rendszer:

Page 4: Interaktív alkalmazások készítése Scratch-benszentendre.coderdojo.hu/wp-content/uploads/scratch-interaction-201… · Interaktív alkalmazások készítése Scratch-ben Ismétlés

Interaktív alkalmazások készítése Scratch-ben

Lehetőségek szereplők mozgatására

4

irányok:

270o =

Page 5: Interaktív alkalmazások készítése Scratch-benszentendre.coderdojo.hu/wp-content/uploads/scratch-interaction-201… · Interaktív alkalmazások készítése Scratch-ben Ismétlés

Interaktív alkalmazások készítése Scratch-ben

Megjelenés és jelmezváltás

5

Page 6: Interaktív alkalmazások készítése Scratch-benszentendre.coderdojo.hu/wp-content/uploads/scratch-interaction-201… · Interaktív alkalmazások készítése Scratch-ben Ismétlés

Interaktív alkalmazások készítése Scratch-ben

„mondd” és „gondold”

6

Page 7: Interaktív alkalmazások készítése Scratch-benszentendre.coderdojo.hu/wp-content/uploads/scratch-interaction-201… · Interaktív alkalmazások készítése Scratch-ben Ismétlés

Interaktív alkalmazások készítése Scratch-ben

Időzítés

7

1 2 3 4 5 6 7 8 9 10 11

Page 8: Interaktív alkalmazások készítése Scratch-benszentendre.coderdojo.hu/wp-content/uploads/scratch-interaction-201… · Interaktív alkalmazások készítése Scratch-ben Ismétlés

Interaktív alkalmazások készítése Scratch-ben

Szinkronizáció

8

1 2 3 4 5 6 7 8 9 10 11

„első mondat” üzenet

„második mondat” üzenet

Page 9: Interaktív alkalmazások készítése Scratch-benszentendre.coderdojo.hu/wp-content/uploads/scratch-interaction-201… · Interaktív alkalmazások készítése Scratch-ben Ismétlés

Interaktív alkalmazások készítése Scratch-ben

Animált főcím

9

Készíts egy olyan animációt, melyben a neved betűi különböző módon jelennek meg, repülnek vagy csúsznak be a képernyőre, mint egy film elején a főcím betűi!

1. Minden betű legyen egy külön szereplő! Állítsd be a betűk méretét és forgási stílusát!

2. Kezdéskor minden betű tűnjön el!3. Jelenjen meg az első betű az indulási helyén, majd mozogjon a végső helyére! A

végén küldjön üzenetet, ami jelzi a következő betűnek, hogy indulhat!4. Minden betű a fentihez hasonlóan viselkedjen! 5. Mutasd be a társaidnak mit csináltál! Te is nézd meg ők mit csináltak! Ha jó

ötletet figyeltél meg, építsd be a saját animációdba!

Ezzel a gyakorlattal az szinkronizációt és a szereplők mozgatását, valamint a megjelenést és az eltűnést gyakoroljuk. Ezeket az előző foglalkozáson tanultuk.

Page 10: Interaktív alkalmazások készítése Scratch-benszentendre.coderdojo.hu/wp-content/uploads/scratch-interaction-201… · Interaktív alkalmazások készítése Scratch-ben Ismétlés

Interaktív alkalmazások készítése Scratch-ben

Változók

10

• egy változóra gondolhatsz úgy, mint egy névvel ellátott tárhelyre

• a változóban valamilyen értéket tárolhatsz (pl. egy számot vagy egy szöveget)

• a tárolt értéket a változó nevét viselő blokk hasznátaval hívhatod elő

• a változó értékét bármikor felülírhatod

Page 11: Interaktív alkalmazások készítése Scratch-benszentendre.coderdojo.hu/wp-content/uploads/scratch-interaction-201… · Interaktív alkalmazások készítése Scratch-ben Ismétlés

Interaktív alkalmazások készítése Scratch-ben

Példák változók használatára

11

Page 12: Interaktív alkalmazások készítése Scratch-benszentendre.coderdojo.hu/wp-content/uploads/scratch-interaction-201… · Interaktív alkalmazások készítése Scratch-ben Ismétlés

Interaktív alkalmazások készítése Scratch-ben

Interaktív alkalmazások jellemzői

• szereplők mozgatása

– billentyűkkel

– egérrel

• érintés érzékelése

• távolság és idő érzékelése

• szöveg bekérése felhasználótól

12

Page 13: Interaktív alkalmazások készítése Scratch-benszentendre.coderdojo.hu/wp-content/uploads/scratch-interaction-201… · Interaktív alkalmazások készítése Scratch-ben Ismétlés

Interaktív alkalmazások készítése Scratch-ben

Szereplők mozgatása billentyűkkel

13

mozgás jobbra-balra ugrás a magasba

Page 14: Interaktív alkalmazások készítése Scratch-benszentendre.coderdojo.hu/wp-content/uploads/scratch-interaction-201… · Interaktív alkalmazások készítése Scratch-ben Ismétlés

Interaktív alkalmazások készítése Scratch-ben

Szereplők mozgatása billentyűkkel

14

forgás és előre mozgás

Page 15: Interaktív alkalmazások készítése Scratch-benszentendre.coderdojo.hu/wp-content/uploads/scratch-interaction-201… · Interaktív alkalmazások készítése Scratch-ben Ismétlés

Interaktív alkalmazások készítése Scratch-ben

Szereplő mozgatása egérrel

15

mozgás egér kattintás irányábaaz egér követése

Page 16: Interaktív alkalmazások készítése Scratch-benszentendre.coderdojo.hu/wp-content/uploads/scratch-interaction-201… · Interaktív alkalmazások készítése Scratch-ben Ismétlés

Interaktív alkalmazások készítése Scratch-ben

Érintés érzékelése

• másik szereplőt

• játéktér szélét

• egérmutatót

• valamilyen színű dolgot

16

Page 17: Interaktív alkalmazások készítése Scratch-benszentendre.coderdojo.hu/wp-content/uploads/scratch-interaction-201… · Interaktív alkalmazások készítése Scratch-ben Ismétlés

Interaktív alkalmazások készítése Scratch-ben

Távolság és idő érzékelése

• távolság

• idő

17

Page 18: Interaktív alkalmazások készítése Scratch-benszentendre.coderdojo.hu/wp-content/uploads/scratch-interaction-201… · Interaktív alkalmazások készítése Scratch-ben Ismétlés

Interaktív alkalmazások készítése Scratch-ben

Szöveg bekérése felhasználótól

18

Page 19: Interaktív alkalmazások készítése Scratch-benszentendre.coderdojo.hu/wp-content/uploads/scratch-interaction-201… · Interaktív alkalmazások készítése Scratch-ben Ismétlés

Interaktív alkalmazások készítése Scratch-ben

Szöveg bekérése felhasználótól

19

Page 20: Interaktív alkalmazások készítése Scratch-benszentendre.coderdojo.hu/wp-content/uploads/scratch-interaction-201… · Interaktív alkalmazások készítése Scratch-ben Ismétlés

Interaktív alkalmazások készítése Scratch-ben

Készíts interaktív játékot!

20

1. Kik lesznek a szereplők? Mi lesz a szereplők feladata? Mi a játék célja?2. Válaszd ki a megfelelő háttereket és szereplőket az előre elkészített elemeket

tartalmazó könyvtárból! Állítsd be a szereplők méretét, helyét, forgási stílusát!3. Írd meg a szereplők programját! Használd azokat a blokkokat, amiket ma

tanultunk! • szereplők mozgatása billenytűkkel vagy egérrel• érintés és távolság érzékelése• életerő vagy elért pontszám tárolása változóban, tárolt érték módosítása

4. Akadályok és önállóan mozgó szereplők mozgatásához használd az animáció készítése során tanult elemeket!

5. Mutasd be a társaidnak mit csináltál! Te is nézd meg ők mit csináltak! Ha jó ötletet figyeltél meg, építsd be a saját játékodba!

Page 21: Interaktív alkalmazások készítése Scratch-benszentendre.coderdojo.hu/wp-content/uploads/scratch-interaction-201… · Interaktív alkalmazások készítése Scratch-ben Ismétlés

Interaktív alkalmazások készítése Scratch-ben

Készítette:Buttyán Levente

[email protected] Szentendre

2017

21