egyszerű interaktív animációkprognyelv1.elte.hu/downloads/eloadas/scratch-animacio.pdf · a...
TRANSCRIPT
![Page 1: Egyszerű interaktív animációkprognyelv1.elte.hu/downloads/eloadas/Scratch-Animacio.pdf · A projektek megosztása A projektek az online felhasználói felületen készíthetők](https://reader034.vdocuments.site/reader034/viewer/2022052013/602a06bc0bf34c7836015fbb/html5/thumbnails/1.jpg)
Scratch – Animációkészítés
Programozási nyelvek 1.
![Page 2: Egyszerű interaktív animációkprognyelv1.elte.hu/downloads/eloadas/Scratch-Animacio.pdf · A projektek megosztása A projektek az online felhasználói felületen készíthetők](https://reader034.vdocuments.site/reader034/viewer/2022052013/602a06bc0bf34c7836015fbb/html5/thumbnails/2.jpg)
A Scratch bemutatása
![Page 3: Egyszerű interaktív animációkprognyelv1.elte.hu/downloads/eloadas/Scratch-Animacio.pdf · A projektek megosztása A projektek az online felhasználói felületen készíthetők](https://reader034.vdocuments.site/reader034/viewer/2022052013/602a06bc0bf34c7836015fbb/html5/thumbnails/3.jpg)
A Scratch
▪ A Scratch programozási környezetben objektumalapúan és eseményvezérelten készíthetők multimédiás programok.
▪ Az amerikai MIT (Massachusetts Institute of Technology) Media Labfejleszti 2002 óta, és a 3.0-s verziónál tartanak.
▪ Online és asztali változattal is rendelkezik, és ingyenesen használható.
Bernát Péter: Scratch – Animációkészítés 3
![Page 4: Egyszerű interaktív animációkprognyelv1.elte.hu/downloads/eloadas/Scratch-Animacio.pdf · A projektek megosztása A projektek az online felhasználói felületen készíthetők](https://reader034.vdocuments.site/reader034/viewer/2022052013/602a06bc0bf34c7836015fbb/html5/thumbnails/4.jpg)
A Scratch objektumai
▪ A Scratch objektumai a képernyőn mozgatható és változtatható kinézetű szereplők, valamint a teljes képernyőnek megfelelő játéktér.
▪ A szereplők legfontosabb tulajdonságai a helyük és az irányuk, az aktuálisan viselt jelmezük, a méretük, és a láthatóságuk (láthatók vagy láthatatlanok).
▪ A játéktér leglényegesebb tulajdonsága az aktuális háttérkép.
Bernát Péter: Scratch – Animációkészítés 4
![Page 5: Egyszerű interaktív animációkprognyelv1.elte.hu/downloads/eloadas/Scratch-Animacio.pdf · A projektek megosztása A projektek az online felhasználói felületen készíthetők](https://reader034.vdocuments.site/reader034/viewer/2022052013/602a06bc0bf34c7836015fbb/html5/thumbnails/5.jpg)
A projektek megosztása
▪ A projektek az online felhasználói felületen készíthetők el (de van offline változat is) és a honlapon le is játszhatók. Kezdetben nincsenek megosztva, de megoszthatók.
▪ A megosztott projektek kódja minden felhasználó számára nyilvános és a módosítását „remixként” elmenthetik. A kódot mindenki a saját anyanyelvén látja.
▪ Létrehozhatók műhelyek, amelyekben a meghívott felhasználók elhelyezhetik projektjeiket.
Bernát Péter: Scratch – Animációkészítés 5
![Page 6: Egyszerű interaktív animációkprognyelv1.elte.hu/downloads/eloadas/Scratch-Animacio.pdf · A projektek megosztása A projektek az online felhasználói felületen készíthetők](https://reader034.vdocuments.site/reader034/viewer/2022052013/602a06bc0bf34c7836015fbb/html5/thumbnails/6.jpg)
Egyszerű interaktív animációkAz egyszerű interaktív animációkban a szereplők a kinézetük megváltoztatásával, vagy hang lejátszásával reagálnak az egérkattintásra vagy egy billentyű lenyomására.
![Page 7: Egyszerű interaktív animációkprognyelv1.elte.hu/downloads/eloadas/Scratch-Animacio.pdf · A projektek megosztása A projektek az online felhasználói felületen készíthetők](https://reader034.vdocuments.site/reader034/viewer/2022052013/602a06bc0bf34c7836015fbb/html5/thumbnails/7.jpg)
Példaprogram: Emodzsikészítő
Emodzsikészítő
Bernát Péter: Scratch – Animációkészítés 7
![Page 8: Egyszerű interaktív animációkprognyelv1.elte.hu/downloads/eloadas/Scratch-Animacio.pdf · A projektek megosztása A projektek az online felhasználói felületen készíthetők](https://reader034.vdocuments.site/reader034/viewer/2022052013/602a06bc0bf34c7836015fbb/html5/thumbnails/8.jpg)
Eseménykezelés
Érzékeljük valamely billentyű lenyomását, vagy a szereplőn való kattintást, az esemény hatására pedig megváltoztatjuk a szereplő kinézetét, vagy lejátszunk egy hangot.
Játéktér Szempár
Bernát Péter: Scratch – Animációkészítés 8
![Page 9: Egyszerű interaktív animációkprognyelv1.elte.hu/downloads/eloadas/Scratch-Animacio.pdf · A projektek megosztása A projektek az online felhasználói felületen készíthetők](https://reader034.vdocuments.site/reader034/viewer/2022052013/602a06bc0bf34c7836015fbb/html5/thumbnails/9.jpg)
Példaprogram: Karácsonyi képeslap
Karácsonyi képeslap
Bernát Péter: Scratch – Animációkészítés 9
![Page 10: Egyszerű interaktív animációkprognyelv1.elte.hu/downloads/eloadas/Scratch-Animacio.pdf · A projektek megosztása A projektek az online felhasználói felületen készíthetők](https://reader034.vdocuments.site/reader034/viewer/2022052013/602a06bc0bf34c7836015fbb/html5/thumbnails/10.jpg)
Animáció folyamatos jelmezváltással
A jelmezeket folyamatosan váltogatjuk rövid várakozással néhányszor, vagy a program leállításáig.
Tűz Csengettyű
Bernát Péter: Scratch – Animációkészítés 10
![Page 11: Egyszerű interaktív animációkprognyelv1.elte.hu/downloads/eloadas/Scratch-Animacio.pdf · A projektek megosztása A projektek az online felhasználói felületen készíthetők](https://reader034.vdocuments.site/reader034/viewer/2022052013/602a06bc0bf34c7836015fbb/html5/thumbnails/11.jpg)
Az egyszerű interaktív animációk parancsai
Jelmezváltás Beszéltetés
Bernát Péter: Scratch – Animációkészítés 11
![Page 12: Egyszerű interaktív animációkprognyelv1.elte.hu/downloads/eloadas/Scratch-Animacio.pdf · A projektek megosztása A projektek az online felhasználói felületen készíthetők](https://reader034.vdocuments.site/reader034/viewer/2022052013/602a06bc0bf34c7836015fbb/html5/thumbnails/12.jpg)
Az egyszerű interaktív animációk parancsai
Láthatóság Grafikus hatások Méret
Bernát Péter: Scratch – Animációkészítés 12
![Page 13: Egyszerű interaktív animációkprognyelv1.elte.hu/downloads/eloadas/Scratch-Animacio.pdf · A projektek megosztása A projektek az online felhasználói felületen készíthetők](https://reader034.vdocuments.site/reader034/viewer/2022052013/602a06bc0bf34c7836015fbb/html5/thumbnails/13.jpg)
Az egyszerű interaktív animációk parancsai
Hang
Bernát Péter: Scratch – Animációkészítés 13
![Page 14: Egyszerű interaktív animációkprognyelv1.elte.hu/downloads/eloadas/Scratch-Animacio.pdf · A projektek megosztása A projektek az online felhasználói felületen készíthetők](https://reader034.vdocuments.site/reader034/viewer/2022052013/602a06bc0bf34c7836015fbb/html5/thumbnails/14.jpg)
Az egyszerű interaktív animációk parancsai
Perifériás események Várakoztatás és számlálós ciklus
Bernát Péter: Scratch – Animációkészítés 14
![Page 15: Egyszerű interaktív animációkprognyelv1.elte.hu/downloads/eloadas/Scratch-Animacio.pdf · A projektek megosztása A projektek az online felhasználói felületen készíthetők](https://reader034.vdocuments.site/reader034/viewer/2022052013/602a06bc0bf34c7836015fbb/html5/thumbnails/15.jpg)
Egyjelenetes animációk
Az egyjelenetes animációkban már a helyüket is megváltoztatni képes szereplők játszanak el valamilyen rövid történetet.
![Page 16: Egyszerű interaktív animációkprognyelv1.elte.hu/downloads/eloadas/Scratch-Animacio.pdf · A projektek megosztása A projektek az online felhasználói felületen készíthetők](https://reader034.vdocuments.site/reader034/viewer/2022052013/602a06bc0bf34c7836015fbb/html5/thumbnails/16.jpg)
Példaprogram: Valentin-napi képeslap
Valentin-napi képeslap
Bernát Péter: Scratch – Animációkészítés 16
![Page 17: Egyszerű interaktív animációkprognyelv1.elte.hu/downloads/eloadas/Scratch-Animacio.pdf · A projektek megosztása A projektek az online felhasználói felületen készíthetők](https://reader034.vdocuments.site/reader034/viewer/2022052013/602a06bc0bf34c7836015fbb/html5/thumbnails/17.jpg)
Szereplő mozgatása két pont között
Az egyik lehetőség, hogy a megfelelő kezdőhelyből és kezdőiránnyal indítva egy kis lépést ismétlünk rövid várakozással (és jelmezváltással).
Hercegnő
Bernát Péter: Scratch – Animációkészítés 17
![Page 18: Egyszerű interaktív animációkprognyelv1.elte.hu/downloads/eloadas/Scratch-Animacio.pdf · A projektek megosztása A projektek az online felhasználói felületen készíthetők](https://reader034.vdocuments.site/reader034/viewer/2022052013/602a06bc0bf34c7836015fbb/html5/thumbnails/18.jpg)
A két pont közötti mozgatás két lehetősége
Relatív helyre mozgatás a szereplő helyének és irányának megfelelően
Abszolút helyre mozgatás a szereplő helyétől és irányától függetlenül
A haladás pillanatszerű, ezért általában egy kis lépést ismétlünk
A haladás folyamatos
Egyszerűbb a szereplő jelmezét közben váltogatni
A szereplő jelmeze csak párhuzamosan futó eljárással váltogatható
Bernát Péter: Scratch – Animációkészítés 18
![Page 19: Egyszerű interaktív animációkprognyelv1.elte.hu/downloads/eloadas/Scratch-Animacio.pdf · A projektek megosztása A projektek az online felhasználói felületen készíthetők](https://reader034.vdocuments.site/reader034/viewer/2022052013/602a06bc0bf34c7836015fbb/html5/thumbnails/19.jpg)
Különböző szereplők tevékenységeinek végrehajtása egymás után vagy egyszerre
Lejön Párbeszéd
Párbeszéd
Inicializálás
Inicializálás
Inicializálás Megjelenik
Elszalad
Felirat
Hercegnő
Herceg
A különböző szereplők tevékenységeit üzenetküldésekkel lehet egymás után vagy egyszerre végrehajtatni.
pár
be
szé
d
els
zala
d
Bernát Péter: Scratch – Animációkészítés 19
![Page 20: Egyszerű interaktív animációkprognyelv1.elte.hu/downloads/eloadas/Scratch-Animacio.pdf · A projektek megosztása A projektek az online felhasználói felületen készíthetők](https://reader034.vdocuments.site/reader034/viewer/2022052013/602a06bc0bf34c7836015fbb/html5/thumbnails/20.jpg)
Párbeszéd
Hercegnő Herceg
A párbeszéd a két szereplő egyszerre induló és megfelelő várakozásokat tartalmazó eljárásaiból alakul ki.
Bernát Péter: Scratch – Animációkészítés 20
![Page 21: Egyszerű interaktív animációkprognyelv1.elte.hu/downloads/eloadas/Scratch-Animacio.pdf · A projektek megosztása A projektek az online felhasználói felületen készíthetők](https://reader034.vdocuments.site/reader034/viewer/2022052013/602a06bc0bf34c7836015fbb/html5/thumbnails/21.jpg)
Az egyjelenetes animációk új parancsai
Irány és iránytól függő mozgatás Hely és helytől függő mozgatás
Bernát Péter: Scratch – Animációkészítés 21
![Page 22: Egyszerű interaktív animációkprognyelv1.elte.hu/downloads/eloadas/Scratch-Animacio.pdf · A projektek megosztása A projektek az online felhasználói felületen készíthetők](https://reader034.vdocuments.site/reader034/viewer/2022052013/602a06bc0bf34c7836015fbb/html5/thumbnails/22.jpg)
Többjelenetes animációk
A hosszabb történeteket elmesélő animációk jellemzően különböző helyszíneken játszódnak. Ebben a feladattípusban az animáció jelenetekre osztása az újdonság.
![Page 23: Egyszerű interaktív animációkprognyelv1.elte.hu/downloads/eloadas/Scratch-Animacio.pdf · A projektek megosztása A projektek az online felhasználói felületen készíthetők](https://reader034.vdocuments.site/reader034/viewer/2022052013/602a06bc0bf34c7836015fbb/html5/thumbnails/23.jpg)
Példaprogram: Végtelen történet
Végtelen történet
Bernát Péter: Scratch – Animációkészítés 23
![Page 24: Egyszerű interaktív animációkprognyelv1.elte.hu/downloads/eloadas/Scratch-Animacio.pdf · A projektek megosztása A projektek az online felhasználói felületen készíthetők](https://reader034.vdocuments.site/reader034/viewer/2022052013/602a06bc0bf34c7836015fbb/html5/thumbnails/24.jpg)
Jelenetekre osztás
▪ Egy történet jeleneteiben eltérő szereplőket, vagy ugyanazon szereplőket máshogyan szeretnénk használni.
▪ A jelenetekhez üzeneteket rendelhetünk: 1. jelenet, 2. jelenet stb.
▪ Az első jelenethez tartozó üzenetet (például) a Játéktér küldheti ki, majd minden további jelenetet az előző jelenetben utoljára cselekvő szereplő indíthatja el.
Bernát Péter: Scratch – Animációkészítés 24
![Page 25: Egyszerű interaktív animációkprognyelv1.elte.hu/downloads/eloadas/Scratch-Animacio.pdf · A projektek megosztása A projektek az online felhasználói felületen készíthetők](https://reader034.vdocuments.site/reader034/viewer/2022052013/602a06bc0bf34c7836015fbb/html5/thumbnails/25.jpg)
Jelenetekre osztás
Inicializálás
Pico
Űrhajó
Bolygó
Macska
Laptop
Játéktér
Eltűnik
Megjelenik
Eltűnik
Eltűnik
Háttér beállítása
… Landol
Inicializálás
Eltűnik
Inicializálás
Inicializálás
Háttér beállítása
Sétál Párbeszéd
Párbeszéd
Laptop nagyítása
1. j
ele
net
2. j
ele
net
séta
pár
be
széd
lap
top
nő
Bernát Péter: Scratch – Animációkészítés 25
![Page 26: Egyszerű interaktív animációkprognyelv1.elte.hu/downloads/eloadas/Scratch-Animacio.pdf · A projektek megosztása A projektek az online felhasználói felületen készíthetők](https://reader034.vdocuments.site/reader034/viewer/2022052013/602a06bc0bf34c7836015fbb/html5/thumbnails/26.jpg)
Egy szereplő párhuzamos tevékenységei
Esetenként egy szereplő több tevékenységét egyszerre kell elindítani. Ekkor az egyes tevékenységeknek ugyanaz az üzenet küldhető.
Űrhajó
Bernát Péter: Scratch – Animációkészítés 26
![Page 27: Egyszerű interaktív animációkprognyelv1.elte.hu/downloads/eloadas/Scratch-Animacio.pdf · A projektek megosztása A projektek az online felhasználói felületen készíthetők](https://reader034.vdocuments.site/reader034/viewer/2022052013/602a06bc0bf34c7836015fbb/html5/thumbnails/27.jpg)
Egy szereplő párhuzamos tevékenységei
Esetenként egy szereplő több tevékenységét egyszerre kell elindítani. Ekkor az egyes tevékenységeknek ugyanaz az üzenet küldhető.
Laptop
Bernát Péter: Scratch – Animációkészítés 27