Óra animáció

Egyszerű számlapos óra, a mutatók az aktuális időpont szerint változtatják a helyzetüket.

ora1.jpgEbben a rövid programozási gyakorlatban egy órát készítünk el. Ehhez három szereplőre lesz szükség a három mutatóhoz. 

Nézd meg működés közben!

 

 

Rajzolás

Hozz létre a Scratch-ben egy új programot az Alkoss gombra kattintva. Ezután hozz létre új szereplőt festéssel (i_festessel.png), a Jelmezek szerkesztőablakban pedig meg kell rajzolnod a mutatót. Mivel ez egy egyszerű alakzat, érdemes vektoros eszközökkel rajzolni, hiszen azokkal könnyebb szabályos formát létrehozni és utólag is rugalmasabban szerkesztheted a rajzot. Kattints tehát a Vektoros képpé alakítás gombra.

A mutató megrajzolásához húzz egy téglalapot (i_teglalap.jpg). Ezután válts át az Átformálás eszközre (i_atformalas.jpg) és az Alt billentyűt lenyomva tartva kattints rá a téglalap egyik sarkára. Ezzel törölheted azt a sarokpontot és a téglalapból máris háromszöget kaptál. Fogd meg az Átformálás eszközzel a másik sarkát (itt már ne nyomd az Alt billentyűt) és húzd egy kicsit feljebb. valahogy így nézzen ki:

01_01.jpg

Ezután vedd elő a Duplikálás eszközt (i_duplikalas.jpg), majd kattints rá vele a háromszögre, így készíthetsz belőle egy másolatot. Figyeld meg, hogy amikor a háromszög fölé érsz az eszközzel, kék körvonalat kap, így tudod, hogy azt a rajzi elemet fogod lemásolni. A háromszög másolatát tükrözd meg a fent található Jobb-bal tükrözés gombbal (i_tukrozes.jpg), majd a Kijelölés eszközzel (i_nyil.jpg) igazítsd hozzá a másikhoz.

01_02.jpg

Jelöld ki most mindkét háromszöget és illeszd a szerkesztőablak közepére. Középen láthatsz egy halvány keresztet, az legyen a mutató vastagabb végén, de függőlegesen középen, ahogy a fenti képen pirossal bekarikázva láthatod. A másik lehetőség, hogy az ablak tetején látható középpont eszközzel (i_kozeppont.jpg) állítod be a szereplő középpontját.

Ezután már csak ki kell tölteni valamilyen színnel a két felet. Ha ugyanannak a színnek a világosabb, illetve sötétebb változatát használod, kicsit térhatású lesz az eredmény. Ha túl szélesnek vagy éppen túl keskenynek találod a végeredményt, akkor sincs gond, hisz a két háromszöget együtt kijelölve keskenyebbre vagy éppen szélesebbre veheted, csak arra ügyelj, hogy utána a középpontot állítsd vissza a helyére. Ugyanígy a hosszát is megváltoztathatod, hogy illeszkedjen a számlap méretéhez.

01_03.jpg

Az így megrajzolt szereplőt elnevezheted órának. A szereplőre az egér jobb gombjával kattintva készíts róla másolatot, azt pedig nevezd el percnek. Méretezd át egy kicsit kisebbre. Ügyelj rá, hogy a középpont is a helyére kerüljön a méretezés végén!

Végül rajzold meg a másodpercmutatót. Ezzel lesz a legkönnyebb dolgod, elég egy vízszintes, piros vonalat húzni.A középpontot itt is be kell állítani: húzd az egyik végéhez közel, de teljesen a végéhez.

Az óra számlapja a háttérre kerül. Ehhez válts át a háttérre, rajzolj egy kört és írd fel a számokat körben. Én római számokat írtam fel, de használhatsz arab számokat is. Elforgathatod a számokat, ahogy én is tettem vagy hagyhatod mindegyiket állónak. De ha valami különlegeset szeretnél, rákereshetsz óra számlapokat ábrázoló képekre és letölthetsz egyet háttérnek. Arra ügyelj, hogy olyan képet tölts le, amin nem szerepelnek a mutatók.

01_04.jpg

Programozás

A következő lépésben programblokkokat kell adnunk az egyes mutatóknak, azaz az egyes szereplőknek. Kezdjük a másodpercmutatóval, mert az a legegyszerűbb. Természetesen az elejére kell a b_zoldzaszlo.png blokk, ami után a mutatót a játéktér (és így az óralap) közepére igazítjuk: 01_06.png.

Ezután már csak arra van szükség, hogy a mutató b_mindig.png nézzen a megfelelő irányba. Mivel a körben 360 fok van, az egy percben pedig 60 másodperc, a mutató másodpercenként 6 fokot (360 / 60) kell arrébb ugorjon. Vagyis mindig nézzen a 01_07.jpg irányba. Így tehát a programja:

01_05.jpg

A percmutató programszála majdnem ugyanígy néz ki, de persze ott a jelenlegi perc értékének hatszorosát kell megadni. Hogy valamivel finomabb legyen a mutató mozgása, beleszámolhatjuk azt is, amennyit egy-egy másodperc alatt megtesz. Míg a másodpercmutató egy másodperc alatt 6 fokot fordul, addig a percmutató ennek éppen a hatvanad részét, azaz 0,1 fokot. Így a percmutató programja:

01_08.jpg

Az óramutató egy kicsit nehezebb eset. A gond az, hogy a nap 24 órából áll, de az óra számlapja csak 12 órából, így az óramutató naponta kétszer jár körbe. Itt tehát nem a tényleges jelenlegi órát, hanem annak 12-es maradékát kell vennünk. Mivel a 12 óra a 360 fokban 30-szor van meg, az óramutató egy óra alatt éppen ennyit, 30 fokot kell forduljon. Hogy itt is finomabb mozgást kapjunk, ehhez is adjuk hozzá a percenkénti haladást. A 30 fokból egy perc alatt annak 60-ad részét teszi meg, azaz percenként 0,5 fokot halad előre a mutató.

01_09.jpg

Végül én még létrehoztam egy új szereplőt, egy szürke kört, ami olyan, mint az igazi mutatókat rögzítő csavar az óra közepén. Ennek a szereplőnek igazi funkciója nincs, programblokkokat sem kap, csak a grafikát dobja fel.

 

Nézd meg, próbáld ki a Scratch műhelyemben!