Kreatif dan Produktif di Internet :Pengenalan dan Pelatihan Scratch

Direktorat Pemberdayaan InformatikaDirektorat Jenderal Aplikasi InformatikaKementerian Komunikasi dan Informatika

Apa itu Scratch?• Scratch adalah toolkit pemrograman

gratis yang memungkinkan pelajaruntuk membuat mainan, animasi danseni interaktif mereka sendiri

• Para pelajar dapat berbagi hasilkreasinya melalui Internet

• Scratch adalah toolkit pemrogramangratis yang memungkinkan pelajaruntuk membuat mainan, animasi danseni interaktif mereka sendiri

• Para pelajar dapat berbagi hasilkreasinya melalui Internet

Apa itu Scratch?• Scratch dibuat mencontoh tradisi

dari permainan lego namun mengambilkeuntungan dari ide komputasi dankemampuan dari komputer yangmempermudah pelajar terutama anak– anak untuk belajar pemrogramanserta dapat menciptakan sebuahkreasi unik hasil buatan sendiri

• Scratch dibuat mencontoh tradisidari permainan lego namun mengambilkeuntungan dari ide komputasi dankemampuan dari komputer yangmempermudah pelajar terutama anak– anak untuk belajar pemrogramanserta dapat menciptakan sebuahkreasi unik hasil buatan sendiri

Apa itu Scratch?• Tujuan dari Scracth :

– membantu pelajar untuk lancarmenggunakan media digital

– melakukan pemberdayaan pemanfaatanTIK dan Internet

– mengekspresikan ide kreatif parapelajar

• Tujuan dari Scracth :– membantu pelajar untuk lancar

menggunakan media digital– melakukan pemberdayaan pemanfaatan

TIK dan Internet– mengekspresikan ide kreatif para

pelajar

Apa itu Scratch?• Scratch adalah sebuah platform

pemrograman yang dibangun oleh AlanKay

Apa itu Scratch?• Scratch kemudian oleh grup peneliti

yang tergabung dalam LifelongKindergarten di MIT Media Lab,bekerjasama dengan KIDS researchgroup di UCLA Graduate School ofEducation & Information Studies.

• Scratch kemudian oleh grup penelitiyang tergabung dalam LifelongKindergarten di MIT Media Lab,bekerjasama dengan KIDS researchgroup di UCLA Graduate School ofEducation & Information Studies.

Menggunakan Scratch• Kita dapat secara online menggunakan

Scratch dihttps://scratch.mit.edu/projects/editor/?tip_bar=getStarted

• Untuk penggunaan secara offlinedapat mendownload Scratch dihttps://scratch.mit.edu/scratch2download/

• Kita dapat secara online menggunakanScratch dihttps://scratch.mit.edu/projects/editor/?tip_bar=getStarted

• Untuk penggunaan secara offlinedapat mendownload Scratch dihttps://scratch.mit.edu/scratch2download/

Mari Kita Lihat VideoScratch!

Mari kita mulai!• Untuk menjalankan Scratch, klik dua

kali pada icon Scratch (gambarkucing) atau klik Scratch.exe

Memulai ScratchSesudah meng-klik Scratch, kamu akan

melihat tampilan sebagai berikut :

Interface Scratch

Pilih Sprite!• Kamu akan menemukan bahwa sprite

standar scratch yaitu kucing berwarnaoranye.(sprite adalah grafis kecil yang dapatdigerakkan secara independen pada layardan memproduksi efek animasi)

• Kamu dapat memilih sprite yang berbedadari library di Scratch atau kamu dapatmenggambar sendiri Sprite-mu! Kamudapat membuat Sprite-mu sendiri nanti.

• Kamu akan menemukan bahwa spritestandar scratch yaitu kucing berwarnaoranye.(sprite adalah grafis kecil yang dapatdigerakkan secara independen pada layardan memproduksi efek animasi)

• Kamu dapat memilih sprite yang berbedadari library di Scratch atau kamu dapatmenggambar sendiri Sprite-mu! Kamudapat membuat Sprite-mu sendiri nanti.

Pilih Sprite-mu !• Untuk memilih

Sprite dari libraryScratch, klik iconfolder denganbintang. Ketikakamu mengarahkanmousemu ke iconitu akan muncultulisan “Pilih SpriteBaru dari File”.

• Untuk memilihSprite dari libraryScratch, klik iconfolder denganbintang. Ketikakamu mengarahkanmousemu ke iconitu akan muncultulisan “Pilih SpriteBaru dari File”.

Pilih Sprite-mu!Buka folder dariberbagai kategoriSprite. Pilih salah satuyang ingin kamugunakan dengan doubleclick pada spritetersebut. Kamu bisamenggunakan lebihdari satu sprite dianimasimu

Buka folder dariberbagai kategoriSprite. Pilih salah satuyang ingin kamugunakan dengan doubleclick pada spritetersebut. Kamu bisamenggunakan lebihdari satu sprite dianimasimu

Pilih Sprite-mu!• Ketika kamu sudah memilih

Sprite yang ingin di prigram,kamu dapat menghapus Spritekucing dengan mengklik iconbergambar gunting dan klikpada Sprite kucing

• Kamu juga bisa melakukan klikkanan dari Sprite dan pilihhapus untuk membuang Sprite

• Ketika kamu sudah memilihSprite yang ingin di prigram,kamu dapat menghapus Spritekucing dengan mengklik iconbergambar gunting dan klikpada Sprite kucing

• Kamu juga bisa melakukan klikkanan dari Sprite dan pilihhapus untuk membuang Sprite

Rubah Ukuran Sprite-mu!• Kamu dapat mengubah ukuran

Spritemu dengan menggunakan icon“besarkan Sprite” atau “kecilkanSprite”

• Klik Icon tersebut dan klik padaSprite untuk merubah ukuran

• Kamu dapat mengubah ukuranSpritemu dengan menggunakan icon“besarkan Sprite” atau “kecilkanSprite”

• Klik Icon tersebut dan klik padaSprite untuk merubah ukuran

Pilih Background!• Saat ini kamu memiliki background

layar berwarna putih. Membosankanbukan?

• Kamu juga dapat mengubahbackground layar dengan memilih darilibrary Scratch atau buatbackgroundmu sendiri

• Saat ini kamu memiliki backgroundlayar berwarna putih. Membosankanbukan?

• Kamu juga dapat mengubahbackground layar dengan memilih darilibrary Scratch atau buatbackgroundmu sendiri

Pilih Background!• Klik pada Stage:

• Pilih,tab“Backgrounds” !

• Klik pada Stage:

• Pilih,tab“Backgrounds” !

Rubah Background!• Kamu dapat bereksperiment dengan

membuat atau mengimpor backgroundmilikmu nanti, tapi saat ini gunakansalah satu background dari librarydengan memilih Import.

• Kamu dapat bereksperiment denganmembuat atau mengimpor backgroundmilikmu nanti, tapi saat ini gunakansalah satu background dari librarydengan memilih Import.

Rubah Background!Dari layar ini, kamu dapat memilihsalah satu dari folder kategori, pilihbackground yang kami suka

Sekarang, Kita siapmelakukan pemrograman!

Saat ini kamu seharusnya sudahmempunyai Sprite dan Backgroundyang siap digunakan untuk membuatanimasi

Saat ini kamu seharusnya sudahmempunyai Sprite dan Backgroundyang siap digunakan untuk membuatanimasi

Pemrograman di Scratch• Hal pertama yang harus dilakukan yaitu klik

pada Sprite yang ingin di program dan pilihtab “Scripts”.

• Karena hanya sprite yang dapatdianimasikan, pastikan Sprite telah dipilih

• Area Script adalah tempat dimana kamumelakukan pemrograman dengan blokprogram

• Hal pertama yang harus dilakukan yaitu klikpada Sprite yang ingin di program dan pilihtab “Scripts”.

• Karena hanya sprite yang dapatdianimasikan, pastikan Sprite telah dipilih

• Area Script adalah tempat dimana kamumelakukan pemrograman dengan blokprogram

Pemrograman di Scratch• Di bagian atas kiri dari interface scratch,

kamu akan melihat 8 tombol• Setiap tombol memilik blok program• Kita akan bereksperimen dengan tombol

motion atau gerakan

• Di bagian atas kiri dari interface scratch,kamu akan melihat 8 tombol

• Setiap tombol memilik blok program• Kita akan bereksperimen dengan tombol

motion atau gerakan

Gerakan• Ketika kamu klik tombol motion, kamu

akan melihat blok program yang dapatdigunakan di Sprite-mu.

• Kita coba dengan satu blok programdahulu dan kemudian silahkanbereksperimen dengan Motion

• Ketika kamu klik tombol motion, kamuakan melihat blok program yang dapatdigunakan di Sprite-mu.

• Kita coba dengan satu blok programdahulu dan kemudian silahkanbereksperimen dengan Motion

Gerakan• Geser blok “bergerak sebanyak 10 step” ke

area script

• Ubah angka “10” menjadi “50” denganmengklik blok tersebut dan ketikkan angka50

• Untuk melihat sprite-mu bergerak 50pixel, double klik pada blok di area script.Keren bukan?

• Geser blok “bergerak sebanyak 10 step” kearea script

• Ubah angka “10” menjadi “50” denganmengklik blok tersebut dan ketikkan angka50

• Untuk melihat sprite-mu bergerak 50pixel, double klik pada blok di area script.Keren bukan?

Gerakan• Kamu juga bisa men-set angka dengan

angka negatif dengan mengetikantombol “-” sebelum angka

• Dengan melakukan hal tersebut, akanmenggerakkan sprite-mu sejumlahangka ke arah yang berlawanan

• Kamu juga bisa men-set angka denganangka negatif dengan mengetikantombol “-” sebelum angka

• Dengan melakukan hal tersebut, akanmenggerakkan sprite-mu sejumlahangka ke arah yang berlawanan

Apa itu Pixel?• Pixel adalah satu satuan unit kecil yang

membuat gambar di komputer atau layartelevisi

• Kata Pixel berasal dari kata picture(gambar) and element (elemen) untukmembentuk satu Pixel

• Pixel adalah satu satuan unit kecil yangmembuat gambar di komputer atau layartelevisi

• Kata Pixel berasal dari kata picture(gambar) and element (elemen) untukmembentuk satu Pixel

Layar Scratch• Ukuran Layar Scratch adalah 480 pixel

lebar dan 480 pixel lebar dan 360 pixeltinggi

180

-240 240

-180

Gerakan - lanjutan!• Sekarang, tambahkan blok “berputar

15 derajat” di bawah blok lainnya• Ketika kamu melihat garis putih

diantara 2 blok, kamu dapat melepasmouse. Tanda putih tersebut berarti2 blok akan terhubung satu sama lain

• Sekarang, tambahkan blok “berputar15 derajat” di bawah blok lainnya

• Ketika kamu melihat garis putihdiantara 2 blok, kamu dapat melepasmouse. Tanda putih tersebut berarti2 blok akan terhubung satu sama lain

Gerakan - lanjutan!• Kamu bisa merubah derajat dengan

mengklik blok dan merubah angkanya• Double klik pada blok untuk melihat

Sprite bergerak dan berputar

• Kamu bisa merubah derajat denganmengklik blok dan merubah angkanya

• Double klik pada blok untuk melihatSprite bergerak dan berputar

Bereksperimen dengan Gerakan!• Kita telah menggunakan 2 Blok dari kategori

Gerakan.• Untuk 15 menit, silahkan bereksperimen dengan

berbagai blok di tombol Gerakan.• Jika ingin melihat apa efek dari blok, cukup klik

kanan dari blok dan pilih tolong, penjelasan darifungsi blok akan muncul.

• Jika ingin menghapus code cukup menggeser codetersebut dari area Script

• Selamat mencoba selama 15 menit

• Kita telah menggunakan 2 Blok dari kategoriGerakan.

• Untuk 15 menit, silahkan bereksperimen denganberbagai blok di tombol Gerakan.

• Jika ingin melihat apa efek dari blok, cukup klikkanan dari blok dan pilih tolong, penjelasan darifungsi blok akan muncul.

• Jika ingin menghapus code cukup menggeser codetersebut dari area Script

• Selamat mencoba selama 15 menit

Kontrol!• Kategori berikutnya dari tombol

pemrograman yang akan kitaexperimenkan adalah kategori Kontrol

• Kategori ini sangat penting karenamengatur berapa lama event terjadi,berapa kali terjadi, atau kapan eventterjadi

• Kategori berikutnya dari tombolpemrograman yang akan kitaexperimenkan adalah kategori Kontrol

• Kategori ini sangat penting karenamengatur berapa lama event terjadi,berapa kali terjadi, atau kapan eventterjadi

Kontrol!• Blok pertama yang kita coba gunakan

adalah “ketika bendar di klik”:

• Geser blok ini dan pasangkan di atas blokyang telah ada di area script

• Blok pertama yang kita coba gunakanadalah “ketika bendar di klik”:

• Geser blok ini dan pasangkan di atas blokyang telah ada di area script

Kontrol!• Dengan blok

tersebut, selaindouble klik padablok code, kamucukup mengklikgambar benderawarna hijau dibagian kanan atas

Klik di sini untuk memulai

• Dengan bloktersebut, selaindouble klik padablok code, kamucukup mengklikgambar benderawarna hijau dibagian kanan atas

Mode Presentasi• Ketika kamu mengklik tombol Presentasi, animasi

akan memenuhi seluruh layar

• Untuk keluar dari Mode Presentasi, cukupmenekan tombol Esc

• Ketika kamu mengklik tombol Presentasi, animasiakan memenuhi seluruh layar

• Untuk keluar dari Mode Presentasi, cukupmenekan tombol Esc

Kembali ke Kontrol!

• Blok yang sangat bermanfaat darikategori Kontrol adalah blok yangmenangani conditional statements.

• Conditional statements pada umumnyadicontohkan dengan “pernyataan jikax” atau pernyataan “jika x maka y”

• Blok yang sangat bermanfaat darikategori Kontrol adalah blok yangmenangani conditional statements.

• Conditional statements pada umumnyadicontohkan dengan “pernyataan jikax” atau pernyataan “jika x maka y”

Conditional Statements

Kode ini berarti, saat bendera dijalankan, apabila tombol aditekan, Sprite bergerak 30 langkah

Sensor!• Conditional statements harus

digunakan bersamaan dengan bloksensor. (Perhatikan bentuk dari bloksensor. Jika bentuknya cocok dan pas,memiliki 6 sisi, maka dapat diletakkandalam Conditional Statement)

• Conditional statements harusdigunakan bersamaan dengan bloksensor. (Perhatikan bentuk dari bloksensor. Jika bentuknya cocok dan pas,memiliki 6 sisi, maka dapat diletakkandalam Conditional Statement)

Kembali ke Kontrol!• Untuk 15 menit, silahkan

bereksperimen dengan kategori padatombol Gerakan, Kontrol, and Sensor.

• Ingat, apabila membutuhkanketerangan dari blok program, cukupklik kanan dan pilih “tolong” untukmendapatkan fungsi dan bantuan dariblok tersebut.

• Untuk 15 menit, silahkanbereksperimen dengan kategori padatombol Gerakan, Kontrol, and Sensor.

• Ingat, apabila membutuhkanketerangan dari blok program, cukupklik kanan dan pilih “tolong” untukmendapatkan fungsi dan bantuan dariblok tersebut.

Suara!• Mari kita tambahkan suara di animasi yang

kita buat• Terdapat banyak cara untuk mendapatkan

suara di animasi yang akan dibuat• Cara pertama, kita akan bereksperimen

dengan mengimport suara dari libraryScratch.

• Mari kita tambahkan suara di animasi yangkita buat

• Terdapat banyak cara untuk mendapatkansuara di animasi yang akan dibuat

• Cara pertama, kita akan bereksperimendengan mengimport suara dari libraryScratch.

Mengimpor Suara dariLibrary Suara

• Klik pada Sprite yang ingin diberikansuara.

• Klik pada Tab semua jenis suara.

• Klik pada Sprite yang ingin diberikansuara.

• Klik pada Tab semua jenis suara.

Library Suara Scratch• Kamu akan melihat kategori berbeda

dari suara yang dapat digunakan padaanimasimu. Pilih suara yang kamu suka.

Memasukkan Suara• Setelah kamu memilih suara yang

kamu suka. Klik OK• Kamu akan melihat suara yang kamu

pilih akan muncul di bawa “Suarabaru”

• Setelah kamu memilih suara yangkamu suka. Klik OK

• Kamu akan melihat suara yang kamupilih akan muncul di bawa “Suarabaru”

Memainkan Suara• Juka ingin memainkan suara, klik

tombol play dan suara akan keluar• Jangan lupa kecilkan volume laptopmu

ya

• Juka ingin memainkan suara, kliktombol play dan suara akan keluar

• Jangan lupa kecilkan volume laptopmuya Klik Play

Menambahkan Suara keAnimasi-mu

• Ok, kamu telah siap untukmenambahkan suara ke animasi-mu.

• Klik Sprite yang ingin ditambahkansuara

• Kemudian pilih tombol Suara

• Ok, kamu telah siap untukmenambahkan suara ke animasi-mu.

• Klik Sprite yang ingin ditambahkansuara

• Kemudian pilih tombol Suara

Menambahkan Suara• Apabila kamu memasukkan beberapa suara,

maka pada blok mainkan suara di klik padapilihan dan pilih suara mana yang akandigunakan

• Apabila kamu memasukkan beberapa suara,maka pada blok mainkan suara di klik padapilihan dan pilih suara mana yang akandigunakan

Jika ingin merekamsuara, klik Rekam

• Klik pada tab semuasuara

• Klik pada tombol Rekam• Klik pada tombol merah• Klik tombol kotak untuk

menghentikan rekaman• Kamu dapat merubah

nama suara sesukamu

• Klik pada tab semuasuara

• Klik pada tombol Rekam• Klik pada tombol merah• Klik tombol kotak untuk

menghentikan rekaman• Kamu dapat merubah

nama suara sesukamu

Masukkan Suara keAnimasi-mu!

Ketika kamu klik bendera maka lebah akanmengeluarkan suara sambil bergerak .

Operator!• Banyak efek animasi yang dapat

dibuat menggunakan Operator diScratch.

• Salah satu contoh efek yaitu gerakanacak/random dari sprite.

Adventures in Animation

• Banyak efek animasi yang dapatdibuat menggunakan Operator diScratch.

• Salah satu contoh efek yaitu gerakanacak/random dari sprite.

Gerakan Acak• Ingat, area animasi scratch adalah

480 pixel lebar dan 360 pixel tinggi• Berarti jarak sumbu horinsontal dari

-240 ke 240.• Jarak sumbu vertikal dari

-180 ke 180.

• Ingat, area animasi scratch adalah480 pixel lebar dan 360 pixel tinggi

• Berarti jarak sumbu horinsontal dari-240 ke 240.

• Jarak sumbu vertikal dari-180 ke 180.

Gerakan Acak• Ini adalah contoh blok code yang

digunakan jika ingin Sprite secaraacak bergeser diseluruh area layarScratch

• Ini adalah contoh blok code yangdigunakan jika ingin Sprite secaraacak bergeser diseluruh area layarScratch

Saatnya bermain!• Selama 15 menit, silahkan bereksperimen

dengan Gerakan, Kontrol, Sensor, Suaradan Operator.

• Terdapat 2 Kategori Tombol lainnyayaitu Pena dan Variabel.

• Untuk Pena diperlukan stylus agardapat digunakan

• Sedangkan Variabel digunakan untukmengeksekusi kemungkinan –kemungkinan saat membuat Game

• Silahkan dieksplorasi secara mandiri2 kategori tersebut

• Terdapat 2 Kategori Tombol lainnyayaitu Pena dan Variabel.

• Untuk Pena diperlukan stylus agardapat digunakan

• Sedangkan Variabel digunakan untukmengeksekusi kemungkinan –kemungkinan saat membuat Game

• Silahkan dieksplorasi secara mandiri2 kategori tersebut

SELAMATBERKREASI

SELAMATBERKREASI