animasi sederhana, Adobe animate cc

Tutorial Membuat Animasi Sederhana Menggunakan Adobe Animate

Tutorial membuat animasi sederhana hello monster menggunakan salah satu software animasi 2D yang mudah digunakan yaitu Adobe Animate CC 2020.

Berikut merupakan tutorial membuat animasi sederhana menggunakan Adobe Animate CC. Yuk simak penjelasan lengkapnya! 

Apa itu Animasi?

Apa yang terlintas dalam pikiran kita, saat mendengar kata Animasi  Disney? Dreamworks? Pixar?

Ya, itu adalah beberapa studio besar pembuat animasi terbaik dunia. Atau judul film animasi yang kita sukai seperti Doraemon, Shinchan, Attack of Titan, Barbie, Spongebob, dan lain sebagainya.

Sebenarnya, apa itu animasi?

Animasi merupakan gambar bergerak yang disusun secara terampil dan teratur dalam hitungan waktu. Animasi bisa berupa benda hidup, benda mati, abstrak, atau tulisan.

Menurut asal katanya, animasi berasal dari bahasa inggris yaitu animate yang berarti menghidupkan benda mati. Oleh karena itu objek yang tadinya diam, kita gerakan menggunakan software sehingga terbentuklah animasi bergerak.

Animasi yang sering kita lihat sehari-hari yaitu pada film animasi (Doraemon, Naruto, Shinchan, dll), iklan, presentasi, media pembelajaran, game, dan masih banyak lagi.

Peran animasi sangat besar dalam mempromosikan produk menjadi lebih menarik dimata konsumennya, atau menarik para player dalam bermain sebuah game. Adanya elemen animasi memberikan dampak positif bagi audience dalam visual, auditory, dan kinesthetics. Pesan yang ingin disampaikan terasa lebih hidup dan menarik.

Software untuk Membuat Animasi 2D

Terdapat banyak aplikasi/software yang dapat kita gunakan untuk membuat animasi untuk pemula sampai profesional. Software-software tersebut ada yang gratis atau open source, ada juga yang berbayar. Kebanyakan software adalah berbayar, namun kita diperbolehkan mencoba software tersebut dengan tenggat waktu (free trial) .

Berikut adalah contoh software untuk membuat Animasi 2D

1. Adobe Animate CC / Adobe Flash Professional (Berbayar)
2. Synfig Studio (Gratis)
3. Animation Paper(Gratis)
4. Pencil (Gratis)
5. Toon Boom
6. Draw Plus
7. Anime Studio

Membuat Animasi Sederhana Menggunakan Adobe Animate CC

Adobe Animate merupakan salah satu produk dari Adobe yang berawal dari Macromedia, kemudian menjadi Adobe Flash, dan kini berganti nama menjadi Adobe Animate CC. Fitur yang lebih lengkap dan user interface yang lebih baik dari Adobe Flash membuat Adobe Animate CC menjadi software yang handal bagi para animator 2D. Kita dapat membuat animasi sederhana hingga animasi yang sangat rumit menggunakan Adoba Animate CC ini. Berikut merupakan tampilan awal dari Adobe Animate CC 2020.

Pada setting lembar kerja awal, Pilih preset HD 1280 x 720 , frame rate 30 fps (frame per second yaitu 1 detiknya ada 30 frame yang akan berjalan), kemudian klik Create.

Tampilan lembar kerja awal di Adobe Animate seperti di atas.

Pertama-tama kita harus menggambar objek menggunakan pen tool atau brush sesuai keinginan.

Untuk bagian-bagian yang nantinya kita ingin animasikan, kita harus mengubahnya menjadi symbol.

Selectsemua bagian dari objek kemudian klik kanan > Convert to Symbol

 

Kemudian akan muncul popup setting symbol, kemudia isikan nama symbol, tipe symbol kita pilih Movie Clip (karena kita akan memberikan animasi ke dalam symbol ini ).

Registration pilih titik tengah, kemudian Klik OK.

Kemudian kita membuat bagian-bagian tubuh karakter dan memisahkannya menjadi layer yang terpisah. Fungsinya agar memudahkan dalam proses animasinya nanti. Buatlah layer seperti di bawah ini.

 

Setelah layer sudah siap, dan semua bagian sudah di-convert/diubah menjadi MovieClip.

Selanjutnya adalah proses animasi.

Animasi Sayap

Pada bagian Timeline, klik layer Sayap

Kemudian pada frame ke 15 dan 30 , klik kanan lalu pilih Insert Keyframe

Pada Keyframe 15 kita ubah bentuk sayap sedikit turun, kemudian pada frame ke1 klik kanan dan pilih Create Shape Tween.

Lakukan hal yang sama pada sayap kanan.

Setelah itu kembali ke Scene 1, dan Insert Frame di frame 30

Caranya select frame 30 di semua layer, klik kanan dan pilih Insert Frame atau F5.

Kemudian lakukan di semua layer

Kita bisa mengaktifkan Onion Skin untuk melihat Keyframe pertama sebagai pembanding animasi.

Onion Skin
 

Kemudian di frame 1 dan 15 kita klik kanan dan insert Classic Tween

Kita bisa memodifikasi letak dan posisi karakter sehingga animasinya lebih menarik.

Tambahkan Background dan dekorasi sehingga animasi lebih menarik.

Jika sudah selesai, untuk melihat hasil animasi kita bisa klik Menu Control > Test atau Control > Play atau Enter.

Save Project dengan Cara Klik File > Save

Kemudian Export Animasinya dalam bentuk swf atau Gif sesuai keinginan.

Klik Menu File > Export > Export Movie > Pilih Save as type “SWF”

Atau bisa dengan Export > Export Video/Media

Yey. Selamat !!

Pertanyaan Multimedia interaktif

Assallamualaikum wr.wb.

Selamat datang di blog saya,,,

Ada pertanyaan pada saat saya PPG di UPI, pertannyaan dari dosen….

Tuliskan sebuah project multimedia interaktif yang sangat bermanfaat untuk dipakai di sekolah, jelaskan bagian interaktifnya di sebelah mana?!!!..

Jawaban saya seperti ini,

Pembelajaran dengan memanfaatkan multimedia interaktif memiliki tujuan untuk membantu mengatasi permasalahan-permasalahan yang terjadi dalam proses belajar mengajar. Tenaga pendidik dapat melakukan sebuah inovasi dengan berpikir lebih kreatif agar perkembangan dari teknologi dapat dimanfaatkan sebagai salah satu media pembelajaran yang menyenangkan. Penggunaan media pembelajaran, termasuk penggunaan multimedia interaktif akan mendukung keberhasilan pembelajaran, karena pembelajaran dengan menggunakan multimedia interaktif dapat meningkatkan efisiensi, meningkatkan motivasi, memfasilitasi belajar aktif, memudahkan siswa untuk memahami konsep, konsisten dengan belajar yang berpusat pada siswa, dan memandu untuk belajar lebih efektif. Berdasarkan pengertian dari beberapa ahli, dapat diambil kesimpulan bahwa multimedia interaktif merupakan salah satu media pembelajaran berbasis komputer yang dapat difungsikan sebagai sarana untuk menyampaikan ilmu pengetahuan yang cukup efektif, karena dapat menyajikan materi secara visual dengan mengintegrasikan unsur teks, audio, video, grafik, dan animasi dalam satu kesatuan tampilan.

Project multimedia interaktif yang sangat bermanfaat untuk dipakai di sekolah, menurut saya dan telah dipakai oleh sekolah kami, ialah membuat media multimedia interaktif tentang pembelajaran E-learning, company profil dan CD interaktif. Media multimedia pembelajaran didalamnya menggabungkan beberapa item multimedia seperti teks, suara/audio, efect, video, animasi dan lain-lain, sehingga pembelajaran lebih menarik dan tidak monoton. Selain itu juga, Project multimedia interaktif juga sangat bermanfaat apabila di dukung sarana dan prasarana dan sebagai sarana pendukung untuk terciptanya pembelajaran yang efektif, membantu pendidik agar lebih kreatif dalam menyampaikan dan merancang pembelajaran, merangsang pikiran, perasaan, perhatian, kemauan belajar peserta didik dan dapat berperan sebagai salah satu sumber belajar mandiri bagi peserta didik, sehingga multimedia interaktif secara sengaja bertujuan untuk memusatkan perhatian peserta didik terhdap materi yang sedang dipelajari dan dapat diterima dengan baik oleh peserta didik.

bagian interaktif  pada project ini, fungsi pembelajaran interaktifnya pada view juga content pada media tersebut, dan disertai tombol navigasi untuk mempermudah peserta didik dan Umum belajar secara mandiri, bahkan project multimedia interaktif ini dapat melengkapi dan berfungsi sebagai informasi, interaksi dan penggati guru sebagai sumber belajar. Contoh yg telah di project : game interaktif, dapat dikembangkan lagi dengan variasi yang lebih menarik dan tidak membosankan, namun tetap menyesuaikan karakterisktik mata pelajaran dan karakter siswanya. 

Wassallamualaikum wr.wb

Terimakasih

Membuat Pre Loader

1.       Buka Software Adobe Flash cs6

2.       Buatlah Stage baru dengan cara klik File > New / Ctrl+N, untuk ukuran stagenya bisa kamu sesuaikan sesuai selera

3.       Aktifkan Oval Tool lalu tekan Shift+Drag, untuk membuat bulatan sempurna dan beri warna #0099CC

4.       Atur posisi bulatan menjadi center pada stage dengan cara klik bulatan kemudian tekan Ctrl+K, kemudian klik tombol yang ditandai warna merah pada gambar di bawah

5.       Buat bulatan lagi dengan warna yang berbeda dan dengan ukuran yang lebih kecil dari bulatan pertama, seperti gambar berikut

6.       Kemudian atur posisi bulatan yang kedua menjadi center pada stage juga, caranya sama seperti langkah ke 4

7.       Setelah itu klik sembarang pada stage. klik lagi bulatan kedua (yang lebih kecil) lalu tekan Delete, maka hasilnya akan seperti dibawah ini

8.       Buatlah 4 buah kotak persegi panjang dengan menggunakan Rectangle Tool dan beri warna seperti pada gambar dibawah

9.       Setelah itu tempatkan ke-4 kotak persegi panjang tadi seperti gambar dibawah ini

1.   Pilih salah satu kotak persegi panjang tadi maka kotak yang lainnya pun akan ikut terpilih, tekan Delete pada Keyboard, dan hasilnya akan seperti ini

1.   Pilih salah satu potongan bulat tadi, tekan F8 > pada pilihan Type pilih Movie clip dan untuk nama bisa kamu sesuaikan (misalnya “pt1”)

1.   Buatlah layer baru, beri nama (contoh : pt1) untuk penempatan potongan bulat tadi yang sudah diubah menjadi Movie clip dengan cara  klik kanan Cut > pilih layer baru (layer pt1) > klik kanan pada stage Paste in Place / Ctrl+Shift+V

1.   Double klik pada potongan bulat yang sudah diubah menjadi Movie clip tadi maka akan muncul tampilan timeline baru yang masih kosong

  

1.   klik kanan pada frame 16 lalu pilih Insert Keyframe

1.   Klik kanan antara frame 1-16 lalu pilih Create Motion Tween

1.   Klik frame 16 lalu klik pada potongan bulatnya, pada Panel Properties  pilih Color : Alpha 0%, Lihat gambar dibawah

 

17.   Lalu klik klik tombol Scene 1 untuk kembali ke stage utama

1.    Ulangi langkah ke 11-17 untuk potongan bulat yang lainnya secara berurut, lihat gambar dibawah

1.   Kemudian hapus Layer 1

2.   Setelah itu atur posisi setiap frame hingga seperti gambar dibawah

Insert Keyframe dengan urutan layer secara berurut, frame 3, 5, 7, 9, 11, 13, 15, 17

2.   Kemudian buat layer baru dan beri nama “angka”

2.   lalu buat sebuah kotak Dynamic Text dan static Text untuk angka persen dan symbol persen. Atur ketentuan dan posisi seperti gambar dibawah

2.   Buatlah layer baru, beri nama (contoh : loop) dan posisikan layer di atas layer angka, lalu pada frame 17 dan frame 31/frame akhir klik kanan > Insert Keyframe

2.   Masih dilayer loop pada frame 17 buka Panel Properties lalu pada frame label beri nama loop, fungsi loop tersebut untuk mengulang!

2.   pada frame 31 buka Panel Actions (F9) lalu masukkan script berikut :
                                  gotoAndPlay("loop");

2.   kemudian buat layer baru beri nama “teks” dan posisikan layer diantar layer loop dan layer angka

2.   lalu buat sebuah Static Text teks dengan tulisan  “loading” dan posisikan seperti gambar di bawah

2.   kemudian convert teks loading yang baru dibuat tersebut menjadi Movie Clip dengan cara tekan F8 > pada pilihan Type pilih Movie clip dan beri nama loading

2.   Double klik pada tulisan loading yang sudah diubah menjadi Movie clip tadi maka akan muncul tampilan timeline baru yang masih kosong

3.   lalu Insert Keyframe(F6)  pada frame 10 dan frame 20

3.   blok frame 1-20 dengan cara tekan dan tahan tombol Shift lalu klik tulisan Layer 1. Kemudian klik kanan pada salah satu frame lalu pilih Create Motion Tween

3.   klik pada frame 10 kemudian klik objek tulisan “loading”nya lalu ubah pada Panel Properties warna Alpha nya pada menjadi 0 %

3.   kembali ke stage utama dengan cara meng-klik tulisan Scene 1

3.   Buat sebuah layer baru dan beri nama “actions”

3.   Kemudian buka Panel Actions (F9) lalu masukkan script berikut :

angka = Number(0);

onEnterFrame = function(){

            counter = 5;

            time = random(10);

            if(counter >= time){

                        angka = Number(angka)+1;

            }

            if(angka == 100){

                        gotoAndStop(32);

            }

}

               

3.   Terakhir buat sebuah layer baru kemudian Insert Keyframe pada frame 32 dan buat sebuah teks dengan tulisan apa saja  (misalnya tulisan “berhasil”) untuk menandai bahwa actions script nya berjalan benar atau tidak. Contoh lihat gambar di bawah

3.   Tekan Ctrl+Enter untuk melakukan Test Movie..

#SelamatMencoba