Adobe Animate

Masing-masing program Adobe CC memiliki fitur unggulan yang disesuaikan dengan berbagai
macam kebutuhan visual. Adobe Animate sendiri merupakan program yang lahir untuk
menggantikan Adobe Flash yang dihentikan pengembangannya. Adobe Animate menjadi
software yang dapat digunakan untuk mengolah ilustrasi menjadi animasi bergerak. Namun, apa
saja fitur yang bisa digunakan pada Adobe Animate untuk mengolah ilustrasi menjadi animasi
tersebut? Simak selengkapnya pada artikel berikut ini!

Apa itu Adobe Animate?

Adobe Animate merupakan salah satu program Adobe CC yang dirilis pada bulan Desember
2020 untuk menggantikan program Adobe lainnya yaitu Adobe Flash. Sesuai dengan namanya,
fungsi Adobe Animate adalah untuk memenuhi kebutuhan dan memudahkan animator dalam
mengolah rangkaian ilustrasi yang telah dibuat menjadi gambar bergerak dalam format
Flash/AIR, HTML5 Canvas, WebGL yang bisa diakses melalui seluler maupun desktop.

Fungsi Tools pada Adobe Animate

Untuk dapat mengoperasikan Adobe Animate, tentu kamu perlu mengenali terlebih dahulu fitur-
fitur yang ada di dalamnya beserta fungsinya. Berikut ini adalah beberapa fitur yang paling
sering digunakan pada Adobe Animate, diantaranya:

Selection Tool

Untuk menyeleksi/memilih objek pada Adobe Animate menggunakan tool seleksi atau Selection
Tool.

Brush (Kuas)

Brush tool digunakan untuk menyesuaikan bentuk dan sudut dari gambar yang kamu buat. Kamu
dapat memilih, menyunting, dan membuat brush khusus melalui Property Inspector.

Bone (Tulang)

Bone Tool ini digunakan untuk menghubungkan gerakan-gerakan yang akan saling berurutan.

Camera (Kamera)

Fungsi kamera pada Adobe Animate adalah mengatur stimulasi gerakan kamera yang dapat
memberikan tampilan animasi yang lebih realistis. Kamu juga dapat menambahkan tween atau
keyframes pada lapisan kamera. Selain itu, fitur kamera juga dapat digunakan untuk menggeser
dengan subjek bingkai, memperbesar objek yang diinginkan untuk efek dramatis, memodifikasi
titik fokus, menambahkan filter dan warna.

Ellipsis

Ellipse tool digunakan untuk menggambar lingkaran dan oval.

Pencil

Pencil tool digunakan untuk menggambar dan mengedit garis tangan bebas.

Pen
Pen tool digunakan untuk menggambar garis lurus dan melengkung untuk membuat objek.
Shortcut yang bisa kamu gunakan adalah tombol (P).

Rectangle

Rectangle tool digunakan untuk menggambar persegi dan persegi panjang. Shortcut yang bisa
kamu gunakan adalah tombol (M).

Transformation Anchor

Transformation anchor digunakan untuk menghubungkan setiap segmen yang ada dalam aset.
Kamu juga dapat memindahkan garis arah pada titik halus, segmen melengkung di kedua sisi
titik disesuaikan secara bersamaan.

Transform

Transform tool digunakan untuk mengatur skala, memutar, atau memiringkan objek yang dipilih.
Shortcut yang bisa kamu gunakan adalah tombol (E).

Belajar Cara Menggunakan Adobe Animate

Sebagai pemula, kamu perlu menerapkan strategi untuk dapat belajar mengoperasikan Adobe
Animate dengan cepat. Beberapa langkah yang bisa kamu ikuti untuk mulai belajar
menggunakan Adobe Animate yaitu:

Kenali dan pahami fungsi dari masing-masing tools

Dalam tampilan lembar kerja Adobe Animate kamu akan menemukan banyak tools yang
ditampilkan dalam bentuk ikon-ikon sederhana. Langkah pertama yang dapat kamu lakukan
adalah mengenali nama dan fungsi tools dari ikon yang ditampilkan.

Kuasai penggunaan tools dasar

Menguasai basic tools akan berpengaruh pada kecepatan kamu dalam menggunakan Adobe
Animate maupun program lainnya. Hal itu dikarenakan basic tools merupakan alat-alat yang
akan sering digunakan dalam mengolah animasi kedepannya.

Praktikan terus-menerus penggunaan tools yang kamu pelajari

Belajar sambil mempraktikkan dianggap lebih efektif sekaligus memiliki retensi daya ingat yang
lebih panjang. Dengan sering mempraktikkan apa yang kamu pelajari, maka kamu juga akan
terlatih bekerja lebih cepat.

MyEduSolve menyediakan layanan Adobe Certified Professional - Adobe Animate yang akan
memvalidasi kemampuan kamu dalam mengoperasikan fitur-fitur dasar hingga fitur–fitur
advanced. Kamu juga dapat memilih jadwal ujian sendiri. Ujian sertifikasi akan dilaksanakan
secara daring dan bisa kamu akses di mana pun kamu berada asalkan terhubung dengan jaringan
internet.
 Membuat karakter sederhana dengan Adobe
Animate

Dalam membuat sebuah karakter, diperlukan kesabaran, keuletan dan tentu saja ketelitian.
Sebagai pemula kita harus memiliki modal utama yaitu pantang menyerah dan tidak pernah
merasa takut untuk melakukan kesalahan dalam menggambar. Pada kesempatan kali ini kita
mencoba untuk menggambar karakter sederhana seperti gambar disamping ini dengan software
Adobe Animate atau kita juga bisa menggukan software versi sebelumnnya yaitu Adobe Flash.

Berikut langkah langkah langkahnnya, Buka Abobe Animate, Pilih Insert New Symbol

Selanjutnya pada panel create new symbol sesuaikan name atau beri dengan nama karakter yang
kita buat dan pastikan type pilih graphic. dilanjutkan dengan menekan tombol OK
Sebelum menggambar pastikan fill color dalam kondisi tanpa warna, ingat tanpa warna bukan
warna putih. Tujuan kita menonaktifkan warna pada fill color ini agar kita nantinnya mudah
dalam melakukan penggambaran dan pengeditan suatu objek.
Mulailah menggambar karakter diatas dengan mengikuti langkah langkah berikut. Pertama tama
gambarlah sebuah lingkaran pada stage dengan menggunakan Oval Tool, ini kita asumsikan
sebagai gambar kepala dari karakter kita
Selanjutnya gambarlah badan dengan menggukan line tool atau rectanggle tool, aturlah
sedemikian rupa agar menyerupai bentuk badan sesuai contoh dibawah.
Satukan objek badan dan kepala menjadi satu dengan cara menggeser objek ke kiri
menggunakan Free Transform Tool sehingga kepala dan badan menjadi satu.

BACA JUGA
  Penyebab Gambar Animasi Tidak bisa diberi warna pada Adobe Animate
 Dasar Menggambar pada Adobe Animate
 Membuat Elemen Gambar Pupleter
lanjutkan menggambar tangan dengan menggunakan line tool, kita bisa mengtur besar kecilnya
stroke atau garis pada panel properties.

Lanjukan menggambar tangan dan lainnya nya, geser dan letakkan pada karakter yang kita sudah
buat Free Transform Tool.
Lanjutkan Menggambar lainnya dengan cara sama seperti diatas sehingga tampak gambar
karakter utuh seperti dibawah.

Hapus garis yang didak diperlukan dengan cara pilih selection Tool kemuadian klik garis yang
ingin dihapus selanjutnya tekan tombol DELETE pada keyboard.
Setelah semua terhapus maka karakter kita siap untuk diberi warna.

Lakukan Pewarnaan Sesuai selera kita dengan menggunakan Paint Bucket Tool dan pilih warna
pada fill color sesuai selera. disini admin menggunakan warna putih dan hitam.
Selesai mewarnai lakukan Group atau penyatuan objek dengan cara seleksi seluruh objek
kemudian tekan CTRL+G pada keybord. Selanjutnya klik Scene 1.

Maka Kita Akan dibawa ke stage utama. Pada Stage tentu gambar yang kita buat tidak ada
karena kita belum memasukan gambar karakter dari panel library. Buka Panel library klik dan
tahan dan drag karakter ke stage.
Pada tahap ini kita sudah selesai mebuat karater sederhana dengan adobe Animate.
 Cara Menambahkan dan
Menggunakan Scene di Adobe
Animate CC
Scene Merupakan Halaman Kerja atau tempat dibuatnya suatu Project. Scene ini biasanya
digunakan untuk memudahkan dalam membuat suatu kejadian yang dimana di setiap
scene nya bisa berbeda,
Penggunaan Scene di adobe animate CC berfungsi untuk memudahkan dalam
mengelompokan suatu karya. Misalnya, Ketika kamu akan membuat suatu game maka
kamu bisa membuat Stage atau level di Scene yang berbeda dengan aturan stage 1 level 1
di Scene 1, Stage 2 level 2 di scene 2 dan seterusnya. jadi Ketika game tersebut berpindah
Level kesulitan, Maka kamu hanya perlu membuat tombol untuk pergi ke scene
selanjutnya.
Setelah kamu memahami dasar dari adobe animate CC maka kamu akan siap untuk
mempelajari cara membuat dan menggunakan Scene di adobe animate cc.

Cara Membuat Scene di Adobe Animate CC

Membuat atau menambahkan Scene bisa dilakukan dengan mudah. Yang Pertama kamu
bisa membuat scene di awal tampilan ketika pertama masuk ke adobe animate. Disana
kamu akan memilih device dan akan mendapatkan 1 scene.

Tapi bagaimana Cara Menambahkan Scene di adobe animate ?

Cara Menambahkan Scene di adobe animate CC :

1. Klik Insert
2. Kemudian Pilih Scene
3. Maka Scene nya akan bertambah
Cara Menggunakan Scene di Adobe Animate CC

Cara menggunakan scene di adobe animate sama halnya dengan ketika kamu membuat
suatu projek di adobe animate. Scene ini adalah bagian halaman kerja dari adobe animate
yang bisa kamu tambah. Namun untuk menghubungkan Scene 1 ke scene 2 dan
seterusnya memerlukan Script AS3 yang menjadi landasannya.

Menghubungkan Antar Scene di Adobe Animate :


Buatlah Scene baru dengan Cara Klik Insert > Scene
 Kemudian Buatlah Tombol Serta Konten di Scene 1 dan Scene 2, Contohnya :

Penjelasan di Scene 1 :
– Buatlah Tombol dan Beri nama pada Instance Name nya, Sebagai contoh “tombol1“

Penjelasan di Scene 2 :
– Buatlah Tombol dan Beri nama pada Instance Name nya, Sebagai contoh “tombol2“

 Di Scene 1, Buatlah Script nya dengan cara :

Penjelasannya :
– Klik Tombolnya
– kemudian masuk ke Actions
– Pilih Code Snippets
– Kemudian Pilih TimeLine Navigation > Click To Go Scene And Play > add to frame

 Setelah Mengikuti langkah di atas maka Script nya akan muncul di bagian Actions
Penjelasannya :
– tombol1 adalah Instance Name dari Tombol yang digunakan
– (1, “Scene 2”) adalah Scene Tujuan dari tombol tersebut. Jadi kita akan berpindah ke Scene 2
Frame 1.

 Lakukan hal yang sama di Scene Berikutnya.

 Selesai

Membuat Object 3D Menggunakan Adobe Animate CC

Objek 3D dibuat dengan menggunakan Rectangle Tools, Poly Star tool, dan
beberapa tools dukungan lainnya. Berikut merupakan langkah-langkah membuat
objek 3D di Adobe Animate :

1. Buka Adobe animate nya dan buat projek baru

2. Setelah berada di halaman kerja, Gunakan Polystar tools > Options >
Polygon Number Of side 3 kemudian tekan OK

Di bagian ini maksud nya, ketika menggunakan Poly star tools kita bisa
mengatur jumlah sudutnya. Dikarnakan kita akan membuat bentuk
Segitiga 3D maka kita gunakan 3 sudut.
 3. Buatlah 2 bentuk Segitiga, Kemudian ikuti langkah-langkah pada gambar
di bawah ini :

Gunakan Subselection tools untuk Klik dan Drag bagian sudut nya.

4. Selesai untuk membuat Segitiga 3D

Berikutnya kita akan membuat suatu objek Persegi Panjang 3D

Persegi panjang 3D dibuat dengan menggunakan Rectangle Tools dan

subselection Tool, Perhatikan langkah-langkah berikut ini :

1. Buatlah 3 kotak dengan menggunakan Rectangle Tool

2. Kemudian gunakan Subselection Tool untuk mengatur sudut nya.
Perhatikan gambar di bawah ini :

Ikuti langkahnya hingga ke gambar terakhir.

3. Selesai, Untuk membuat Persegi Panjang

 Membuat Animasi Sederhana
Menggunakan Adobe Animate
CC +Gambar
Membuat Animasi menggunakan Adobe Animate CC bisa menggunakan
beberapa tehnik salah satunya adalah dengan menggunakan Classic Tween dan
Shape Tween.

Classic Tween Merupakan Jenis animasi yang bisa berjalan sesuai arah jarum
jam. Bisa Berputar ataupun bergerak lurus kedepan. Dalam Metode ini kita
menggunakan Keyframe sebagai pemuat data di antara awal dan akhir
pergerakan objek. Sedangkan Shape Tween Berfungsi untuk merubah suatu
Objek dalam satu layer.

Shape Tween digunakan untuk merubah bentuk suatu objek. Sebagai Contoh,
ketikan kita membuat suatu objek segitiga dan dirubah menjadi bentuk lainnya.
Nah itu adalah fungsi dari Metode Shape Tween dalam adobe animate.

Tutorial Membuat Animasi di Adobe Animate CC

Metode Pertama yang akan kita gunakan adalah Classic Tween. Dimana kita
akan menggerakan suatu objek dari kiri ke kanan dengan menggunakan fitur
Classic Tween di Adobe animate.

Cara Membuat animasi Classic Tween di Adobe animate CC :

1. Siapkan 2 Gambar di stage, Sebagai contoh lihat gambar di bawah ini :

 Gambar 1 yaitu bola yang akan kita gerakan ke arah kanan dan gambar ke
2 adalah landasan dari bola tersebut bisa berupa tanah atau hanya garis
seperti pada gambar di atas

2. Kedua Gambar tersebut harus berbeda Layer, Perhatikan gambar berikut :

3. Pada Layer Bola dan Jalur, Klik kanan di frame 30 (atau bisa lebih panjang
lagi) dan pilih insert frame, Maka hasilnya akan seperti ini :

4. Di layer Bola, Klik kanan di frame dan pilih Create Classic Tween, Jika
Berhasil maka penampilannya akan seperti berikut :

5. Masih di Layer Bola. Di Frame terakhir yaitu frame 30, Pindahkan Bola ke
ujung Jalur : Jika berhasil frame nya akan berubah seperti ini :
 6. Kemudian Langkah Terakhir, Klik di frame Bola dan tambahkan Rotate
CW di Property

7. Selesai, Coba jalankan animasi nya dengan cara tekan CTRL+ENTER

Jika Kamu ingin memutar bola secara bolak-balik, Maka kamu hanya perlu
menambahkan 30 frame baru dan kemudian di 30 frame yang baru kamu ganti
rotate nya menjadi CCW dan arahnya kembalikan dari kanan ke kiri.

Metode yang kedua adalah dengan menggunaka Shape Tween. Dengan

menggunakan meode ini kita bisa merubah bentuk suatu objek dengan animasi.
Jadi Ketika kita mmebuat suatu objek seperti bintang di frame 1 maka kita bisa
merubahnya di frame akhir (misalkan frame 30) dengan gambar lingkaran.

Cara Membuat Animasi Perubahan bentuk di adobe animate CC dengan metode

Shape Tween :

1. Buatlah Suatu objek di frame 1

2. Kemudian Klik kanan di frame 30 dan pilih inser keyframe, Maka
tampilannya akan seperti ini :
3. Buat Suatu Objek berbeda di frame terakhir yaitu frame 30

4. Kemudian Klik kanan di frame dan pilih Shape Tween, Misalnya di frame
1 dan jangan di frame akhir (frame 30)
5. Selesai, lihat hasilnya dengan cara menekan Tombol CTRL+ENTER
 Membuat Animasi Dengan
Classic Motion Guide di Adobe
Animate CC
Classic Motion Guide merupakan metode pembuatan suatu animasi yang
berjalan mengikuti jalur yang telah di tentukan. Jadi kamu bisa mengatur arah
berjalannya animasi sesuai dengan keinginan atau kebutuhan dalam suatu
Project.
Penggunaan Classic Motion Guide harus dibarengi dengan pembuatan animasi
classic tween. Hal itu dikarnakan kita membutuhkan gerakan awal untuk
membuat animasinya berjalan sesuai keinginan kita.

Cara Membuat Animasi Classic Motion Guide dengan adobe animate CC :

1. Buatlah suatu Objek yang akan digunakan untuk animasinya

2. Kemudian gerakan objek tersebut ke sebelah kanan dengan
menggunakan metode Classic Tween, kalau berhasil maka hasilnya akan
seperti ini :

3. Klik kanan di bagian Layernya dan pilih Add Classic Motion Guide
4. Klik Bagian Guide nya, dan buatlah suatu garis lurus menggunakan Line
Tool

Penjelasannya :
– Klik bagian layer nya
– Gunakan Line tool
– Buatlah Garis Lurus seperti pada gambar di atas

5. Setelah itu, Kamu hanya tinggal mengatur garis nya saja. Sebagai contoh
lihat gambar berikut :

Jadi Objek bergeraknya akan mengikuti garis yang kita buat. kamu bisa
mengatur garisnya sesuai kebutuhan dan objeknya akan mengikuti garis
kemanapun arah tujuannya.
*Ketika di publish Garisnya akan menghilang

6. Selesai, untuk melihatnya tekan CTRL+ENTER

 Tutorial Membuat Animasi
Masking Menggunakan Adobe
Animate CC

Tutorial Membuat Animasi Masking dengan Menggunakan Adobe Animate CC

1. Buka aplikasi adobe animate nya

2. kemudian buatlah 1 Tulisan dan 1 Object Bitmap, Contohnya :

Penjelasannya : (perhatikan gambar di atas)

– Object Bitmap di simpan pada Layer Object
– Tulisan di simpan pada Layer Tulisan
– Object Bola Merah di atas di simpan di bagian kiri tulisan dengan tujuan
untuk menampilkan animasi masking dari kiri ke kanan

3. Buatlah Masing-masing menjadi 25 Frame, Dengan cara klik kanan di

frame 25 kemudian pilih Insert Frame
4. Kemudian di Layer Object, Buatlah animasi Classic Tween. Dengan cara
Klik kanan kemudian pilih Create Classic Tween
5. Kemudian di frame terakhir (frame 25) Gerakan Objectnya ke sebelah
kanan, Jika berhasil maka tampilannya akan seperti ini :
6. Klik Kanan di Layer Object kemudian Pilih Mask

7. Selesai,, Jika berhasil maka penampilannya akan seperti ini :

Cara Membuat Animasi Burung
Terbang di Adobe Animate
Membuat Animasi Burung Terbang menggunakan adobe animate cc memang
sangat mudah, yang di butuhkan hanya desain dari burung per adegan kepakan
sayapnya. Animasi ini sangat berguna untuk keperluan pembuatan aplikasi,
game atau media pembelajaran menggunakan adobe animate khususnya yang
ber tema’kan Alam atau binatang.
Dari pengalaman yang saya alami, Animasi burung di pakai untuk
mempercantik dan menghidupkan tampilan projek yang saya buat kemudian
animasi ini menjadi sangat hidup ketika di berikan effek suara (jika di perlukan).
Nah Animasi ini bisa di terapkan dalam projek desktop maupun mobile (saya
menggunakannya untuk keperluan game android).
Ok… Tutorial membuat animasi burung menggunakan adobe animate, berikut
langkah-langkahnya :
1. Buka Adobe Animate nya dan buatlah projek baru
2. Siapkan Gambar Adegan burung terbangnya, sebagai contoh lihat gambar
berikut :

3. Kemudian buatlah Movie Clip, Caranya Insert > New Symbol > Type
Movie Clip
4. Nah Setelah membuat Movie Clip, Langkah selanjutnya adalah
menempatkan setiap adegan burung di setiap frame :
 Perhatikan Gambar di atas :
– Setiap Adegan burung, di tempatkan dalam 1 frame (seperti pada
gambar di atas, merupakan adegan 1)
– Adegan ke 2 dan seterusnya di simpan dalam Frame berikutnya sampai
ke frame 10, untuk lebih jelasnya seperti ini :
Adegan 1 di Frame 1
Adegan 2 di Frame 2
Adegan 3 di Frame 3
Adegan 4 di Frame 4
Adegan 5 di Frame 5
Adegan 6 di Frame 6
Adegan 7 di Frame 7
Adegan 8 di Frame 8
Adegan 9 di Frame 9
Adegan 10 di Frame 10
Nah Untuk Posisi setiap Adegan bisa di sesuaikan, Contohnya adegan 1 di
atas dan adegan ke 2 dan seterusnya ke bawah. dan kemudian, untuk
lebih lama burungnya terbang kita bisa melakukan adegan 1-10 di frame
selanjutnya (seperti nampak pada gambar di atas).

– kemudian yang terakhir, Tambahkan Script di akhir frame (seperti pada

gambar di atas) :
Caranya, Klik kanan di frame terakhir > Actions kemudian masukan script
berikut :
stop()

5. Selesai, Sekarang tinggal di coba Movie Clip Burung terbangnya.

Mudahkan? hhhe memang mudah sih, soalnya hanya menambahkan gambar di
setiap frame dan kemudian di jalankan dah. Untuk Lebih bagusnya gambar
burungnya harus bagus yah dan usahakan menggunakan effek suara, Terus
gerakan burung nya harus menyerupai burung terbang yang asli.
 Tutorial Membuat Animasi
Orang Berjalan di Adobe
Animate CC | Frame By Frame
rame By Frame merupakan salah satu dari tehnik adobe animate cc yang
menjadikan frame sebagai fokus utamanya. Dalam Pembuatan Animasi dengan
tehnik frame by frame, Kamu hanya perlu menggunakan 1 Gambar yang
berbeda di setiap Frame nya. Perhatikan Gambar di Bawah ini :

Pada Gambar di atas bisa dilihat setiap gerakan dari seseorang yang sedang
berlari. Jadi kamu hanya perlu menempatkan 1 gambar di 1 frame dan letakan
hingga selesai (gamabr 8). Untuk lebih jelasnya perhatikan langkah-langkah
pembuatannya di bawah ini :

Cara Membuat Animasi Berjalan Menggunakan Adobe Animate CC Dengan

Tehnik Frame By Frame :

1. Buka Adobe Animate nya dan buatlah project baru

2. Siapkan Gambar seperti pada Contoh di atas, Kemudian Letakan Setiap
Gambar di Frame yang berbeda.
3. Frame 1, Masukan Gambar 1 :
 Perhatikan gambar di atas, Gambar no 1 di letakan di Frame 1. Lanjutkan
di frame berikutnya.

4. Frame 2, Masukan Gambar 2. Letakan di Sebelah kanan gambar 1

5. Frame 3, Masukan Gambar 3. Letakan di Sebelah kanan gambar 2
6. Frame 4, Masukan Gambar 4. Letakan di Sebelah kanan gambar 3
7. Frame 5, Masukan Gambar 5. Letakan di Sebelah kanan gambar 4
8. Frame 6, Masukan Gambar 6. Letakan di Sebelah kanan gambar 5
9. Frame 7, Masukan Gambar 7. Letakan di Sebelah kanan gambar 6
10. Frame 8, Masukan Gambar 8. Letakan di Sebelah kanan gambar 7
11. Selesai …. dan mainkan dengan cara Tekan Ctrl+Enter
Penempatan Gambar nya Berbeda, Jadi Gambar 2 di letakan di sebelah kanan
Gambar 1 dan seterusnya. Letakan Gambar Seperti seseorang sedang berjalan
saja.
 Cara Membuat Animasi Pemutar Musik Di
Adobe Animate CC
Untuk membuat suatu animasi pemutar musik kita membutuhkan beberapa
bahan seperti musiknya. Kemudian kita juga membutuhkan suatu movie Clip
animasinya. Jadi ada beberapa persiapan yang perlu kamu lakukan untuk
menyelesaikan Project ini. Ikuti langkah-langkah berikut ini :

Masukan Media Suara (Lagu/Musik) ke dalam Adobe Animate CC :

1. Klik File
2. Pilih Import > Import To Library
3. Pilih Musik / Lagu yang ingin kamu gunakan
4. Kemudian Tekan Open
Buat Suatu Movie Clip :

1. Buat Suatu Movie Clip dengan Cara Klik Insert > New Symbol
2. Kemudian Pilih Type Symbol : Movie Clip
3. Kemudian Tekan OK
Buatkan Animasi Music Bar di dalam Movie Clip :

1. Masuk ke bagian Movie Clip yang tadi di buat dengan cara, Pergi ke
bagian Library > Klik kanan di Movie Clip nya > Pilih Edit
2. Buatkan Suatu objek menggunakan Rectangle Tools di Setiap Frame nya,
Contohnya :

Penjelasannya : Di dalam Movie Clip.

– Masukan Adegan 1 di frame 1
– Masukan Adegan 2 di frame 2
– Masukan Adegan 3 di frame 3
– Masukan Adegan 4 di frame 4
– Masukan Adegan 5 di frame 5
– Masukan Adegan 6 di frame 6
– Masukan Adegan 7 di frame 7
– Masukan Adegan 8 di frame 8
 Jadi kamu hanya perlu membuat suatu objek berbeda di setiap frame nya.
Namun Object tersebut harus menyerupai Bar Musik Seperti contoh pada
gambar di atas.

3. Setelah selesai, Kembali lagi ke Scene 1

Membuat Animasi Pemutar Musik di Adobe Animate CC :

Nah setelah menyelesaikan langkah-langkah di atas. Maka langkah selanjutnya

adalah menggabungkan semua komponen yang telah dibuat sebelumnya,
Dengan cara :

1. Buat 2 Layer dan Insert Frame di Frame 30 (contohnya)

2. Klik Layer Movie Clip kemudian Seret Movie Klip yang tadi dibuat ke Stage
:

Setelah Movie Clip ada di Stage, atur Posisinya sesuai keinginan ..

3. Klik Layer Music kemudian Seret Musiknya Ke Stage :

4. Di Frame Akhir Layer Music, Beri Script untuk mencegah terjadinya

penumpukan suara.
Klik kanan di frame akhiir layer music > actions > masukan Script stop()
5. Selesai… Untuk mencobanya tekan CTRL+ENTER
Tutorial Membuat Button Back,
Next & Home di Adobe Animate
Tutorial Membuat Tombol Kembali dan Tombol Home menggunakan Adobe
Animate CC

Kali ini saya akan berbagi mengenai cara membuat tombol back dan home di
adobe animate, script dan caranya sama seperti pembuatan terjemahan bahasa
inggris yaitu dengan menggunakan tehnik “Pergi ke Frame..” untuk lebih jelasnya
bisa di lihat Disini terjemahan di adobe animate. Nah Kali ini kita akan membuat
tombol asli yang mengarah ke suatu frame dimana hal ini hanya perpindahan
frame saja.

Kita langsung saja ke tutorial cara membuat button di adobe animate :

1. Buka adobe animate nya

2. Buatkan :
– Frame 1 Untuk Home
– Frame 2 Untuk Halaman 1
– Frame 3 Untuk Halaman 2
3. Frame Pertama yaitu Home, Buatlah 1 tombol Untuk menuju ke Frame 2
yaitu “Hal 1” :
– Buat Button, bisa dari gambar/text/Button default. Kali ini saya
menggunakan Text sebagai Button (untuk contoh saja)
– Buat Suatu Text, kemudian jadikan Button. Caranya Klik Kanan >
convert to symbol (F8) > Type Button
-Kemudian Isi Instance Name nya, Contohnya “kehal1”

Kemudian Klik Kanan di Frame 1 > Actions dan Masukan Script berikut :

stop()

kehal1.addEventListener(MouseEvent.CLICK, hal1);

function hal1(event:MouseEvent):void{

gotoAndPlay(2);

4. Lanjut ke Frame 2 yaitu “Hal 1” :

– Buat 2 Button, Button 1 untuk pergi ke Home dan Button ke 2 Untuk
Pergi ke Frame selanjutnya.
– Buat Suatu Text (untuk contoh saja), kemudian jadikan Button.
Caranya Klik Kanan > convert to symbol (F8) > Type Button
– Kemudian Isi Instance Name dari kedua button tersebut.
Button Home Instance name nya “kehome”
Button Next Instance Name nya “next1”
 Setelah selesai membuat button (jangan lupa memberi instance name nya
sesuai langkah sebelumnya, kemudian klik kanan di Frame 2 >
Actions dan masukan Script berikut :

stop()

kehome.addEventListener(MouseEvent.CLICK, home1);

function home1(event:MouseEvent):void{

gotoAndPlay(1);

next1.addEventListener(MouseEvent.CLICK, hal2);

function hal2(event:MouseEvent):void{

gotoAndPlay(3);

5. Ok yang terakhir. Selanjutnya ke Frame 3 yaitu “Hal2” dan buatkan 2

Button.
Button 1 Yaitu Tombol Home (caranya seperti langkah sebelumnya)
Button 2 Yaitu Tombol Back (caranya seperti langkah sebelumnya)
 – Instance Name untuk Home di Frame 3 ini beri nama “home2”
– Instance Name Untuk Back “back”

Setelah semuanya siap, Klik kanan di frame 3 > Actions dan masukan
Script berikut :

stop()

home2.addEventListener(MouseEvent.CLICK, homee2);

function homee2(event:MouseEvent):void{

gotoAndPlay(1);

back.addEventListener(MouseEvent.CLICK, hal3);

function hal3(event:MouseEvent):void{

gotoAndPlay(2);

6. Selesai. Sekarang tinggal kalian Coba ……

Tutorial Membuat Button Exit &
Notification di Adobe Animate
CC
Tombol Exit biasa digunakan dalam suatu aplikasi dan game, dan menurut saya
pribadi tombol ini sangat penting untuk projek yang akan kita buat. COntohnya
ketika saya membuat suatu game android, Saya menggunakan dan
menambahkan tombol exit beserta notifikasinya karna itu sangat membantu dan
sangat berpengaruh dalam kenyamanan dan kualitas projek yang saya buat.
Untuk Tehnik pembuatanya masih tetep menggunakan tehnik button dan di
tambah movie klip untuk bagian notifikasinya. Tehnik yang di gunakan ini sangat
sederhana dan mudah, Ok kita langsung ke tutorialnya :
1. Buka Adobe Animate nya dan kemudian buka dokemen baru, (boleh untuk
desktop, maupun Air For Android/Aplikasi android), Untuk tutorial ini saya
menggunakan Air For Android
2. Kemudian Buatkan atau masukan suatu Gambar, Saya menggunakan
Gambar Exit standar. Kemudian Jadikan Button.

– Gambar yang telah di pilih kemudian di jadikan Button, Caranya Klik

Kanan Pada Gambar > Convert To Symbol (F8) > Pilih Button
– Beri nama Instance Name nya dengan “keluar”, Seperti yang tertera
dalam Gambar di atas.
– Setelah itu Klik Kanan di Frame 1 > Actions, Kemudian Masukan Script
berikut :
import flash.events.MouseEvent;
stop();
notifexit.gotoAndStop(1);
keluar.addEventListener(MouseEvent.CLICK, ke_bt);
function ke_bt(event:MouseEvent):void{
{
 notifexit.gotoAndStop(2);

}
}
3. Setelah Selesai membuat Button Exit, selanjutnya adalah membuat Movie
Clip Untuk Notifikasi Exit nya.
– Pilih Insert > New Symbol (Ctrl+F8) > Kemudian Pilih Type Movie
Clip
– di Dalam Movie Clip tersebut, Buatlah 2 Button. Button Pertama “YA”
Button kedua “Tidak”

Perhatikan Gambar di atas !

– Button “YA” beri Instance Name = yakeluar
– Button “TIDAK” Beri Instance Name = tidakkeluar
– Kemudian di Frame 1 Masukan Script Berikut :
stop()
– DI Frame ke 2, Masukan Script berikut :

import flash.events.MouseEvent;
stop();
tidakkeluar.addEventListener(MouseEvent.CLICK, ke_btq);
function ke_btq(event:MouseEvent):void{
{
gotoAndStop(1);

}
}
function keluarrrw (event:MouseEvent):void
{
NativeApplication.nativeApplication.exit(0);
}
yakeluar.addEventListener(MouseEvent.CLICK, keluarrrw)
4. Setelah selesai membuat notifikasinya, sekarang tinggal memasukan
Notifikasi tersebut ke bagian Scene 1. Caranya Library > notifexit (Pilih
 Movie Clip yang tadi kita buat), Kemudian Drag ke bagian area kerja
seperti pada gambar di bawah ini :

Movie Clip tersebut di beri nama Instance Name nya dengan : notifexit
5. Selesai ….Sekarang Tinggal di Coba…..
Tutorial Membuat Tampilan Full
Screen di Adobe Animate CC
Tutorial membuat tombol Full Screen di adobe animate CC bisa dilakukan
dengan menggunakan beberapa langkah saja. Pembuatan Tombol Full Screen
dan Restore ini menggunakan Actions Script 3 di adobe animate CC / adobe
Flash.

Tombol Full Screen dan Restore digunakan untuk keperluan aplikasi dan game
berbasis desktop. Seperti yang kita tau bahwa dalam aplikasi atau game
berbasis desktop selalu ada tombol untuk menampilkan Layar Penuh atau
Minimize. Jadi Pembuatan Tombol ini sangat bermanfaat untuk kamu pelajari
dan kuasai.

(AS3) Actions Script 3 digunakan untuk membuat Tampilan Full Screen. Actions
Scrip 3 Full Screen ini sudah banyak digunakan karna penggunaan Actions
Script 2 sudah lama di tinggalkan (jarang digunakan).

Membuat Tombol Full Screen di Adobe Animate CC

Cara ini menggunakan Actions Script 3 Full Screen. Langkah-langkah

pembuatannya bisa kamu ikuti disini :

1. Buka Adobe animate nya

2. Buatlah 2 Tombol,Tombol Full Screen dan Restore Down

* Tombol 1 : Tombol Full Screen, Beri Instance Name nya btn

* Tombol 2 : Tombol Restore Down, Beri Instance Name nya btn2

3. Kemudian Masukan Script berikut di Actions

Actions Script Full Screen :
import flash.events.MouseEvent;
btn.addEventListener(MouseEvent.CLICK,fullscreen);
function fullscreen(e:MouseEvent) {
fscommand(“fullscreen”, “true”);
}
 import flash.events.MouseEvent;
btn2.addEventListener(MouseEvent.CLICK,restore);
function restore(e:MouseEvent) {
fscommand(“fullscreen”, “false”);
}
Jika script di atas ada yang error, Perhatikan cara penulisannya seperti
pada gambar di bawah ini :

4. Selesai….
5. Cek hasilnya menggunakan Aplikasi Flash Player….
Tutorial Adobe Animate :
Membuat Aplikasi & Game
Android | Panduan Pertama
Kali ini Saya mau berbagi cara membuat aplikasi atau game android
menggunakan adobe Animate CC, Tentunya kita sudah tidak asing lagi dengan
yang namanya aplikasi atau game karna dalam keseharian kita banyak sekali hal
yang berkaitan dengan itu semua. Pada dasarnya adobe animate banyak
digunakan untuk pembuatan animasi, namun taukah kalian bahwa adobe
animate itu bisa di jadikan alat untuk pembuatan aplikasi, media pembelajara
ataupun Game? Nah dalam artikel ini saya mau berbagi cara untuk membuat
aplikasi, media pembelajaran atau game menggunakan adobe animate cc.
Adobe Animate CC menggunakan bahasa pemrograman AS3 yang telah
digunakan dalam versi lawas nya yaitu adobe Flash. Dalam Adobe Animate ini
kita di haruskan membuat Desain dan script untuk action nya, nah untuk
pembuatan aplikasi atau game android kita di haruskan untuk meng setting
Layar dan perangkat androidnya. Untuk lebih jelasnya kita langsung ke tutorial
nya :
1. Buka Adobe Animate nya, Kemudian Klik FILE > NEW… > Kemudian
pilih AIR FOR ANDROID
2. Dalam Setting Awal di AIR FOR ANDROID Isi Ukuran Layar nya
dengan Width : 480 px dan Height 800 px ( itu di sesuaikan dengan
ukuran layar perangkatnya, jadi jangan terpaku ke ukuran yang ini yah …)
3. Setelah itu Klik OK
4. Nah Setelah itu akan muncul halaman utamanya …
Di halaman utama (Area Kerja adobe animate), kita hanya perlu membuat
desain dan script seperti biasa (ketika menggunakan AS3 di adobe Flash). Untuk
kalian yang belum pernah menggunakan adobe flash atau adeobe animate cc,
Nanti saya akan membuat artikel tentang cara membuat BUTTON, ANIMASI,
dan keperluan lainnya dalam pembuatan aplikasi atau game menggunakan
adobe animate CC.
Nah Sekarang kita lanjut, Setelah kita membuat desain dan script dalam
adobe animate “AIR FOR ANDROID”. Langkah selanjutnya adalah
Membuat Certificate, Certificate ini di gunakan untuk PUBLISH Projek kita
sehingga menjadi APK atau aplikasi yang siap di instal di perangkat Android.
Tutorial Cara Membuat Certificate Di Adobe animate CC (Air for Android) :
1. Pergi Ke Properties (biasanya ada di sebelah kanan), Kemudian
Pilih Publish > Target > Edit Application Setting (yang gambar Kunci)
2. Nah akan muncul kotak dialog seperi di bawah ini kemudian ikuti langkah
berikutnya, perhatikan gambar di bawah ini :

Pilih deployment > kemudian pilih Create Certificate :

Publisher Name : Isi bebas, Contohnya Neicy
Organization Unit : Isi bebas, Contohnya Neicy tekno
Organization Name : Isi bebas, Contohnya Neicy INK
Country : Isi Bebas, Contohnya US
Password : Isi Bebas juga 🙂
3. Setelah itu Save As dan tempatkan di folder mana aja (jangan sampai
hilang atau lupa, agar tidak membuat ulang)
4. Setelah itu Klik Ok, selesai
 Nah Setelah kita mempunyai Certificate Digital, kita setting Publish nya agar
siap di instalkan di perangkat android. Caranya masih di bagian Properties >
Publish > Target > Edit Setting Application
1. Bagian Pertama Kita mengatur Nama dari aplikasinya

Output File : Nama FIle ketika di save

App Name : Nama Aplikasi ATau Game nya
App.Id : Id app bisa di isi bebas
Version : Versi Terendah yang bisa menginstalkan aplikasi atau game
yang kita buat
2. Setelah Itu Kita atur bagian Deployment nya
 Untuk Certificate nya, isi dengan Certificate yang telah kita buat tadi
*Air Runtime :
a. Embed Air Runtime With Application (adobe air nya sudah ada dalam
aplikasi, jadi kita tidak perlu menginstal adobe air nya lagi)
b. Get Air Runtime From : …. (Adobe air nya harus di instal lagi di …)
Munkin itu penjelasan singkat mengenai Air runtime hhe

3. Untuk Icon, kita harus membuat dulu dengan ukuran yang telah di
tentukan.
4. Setelah itu Klik Publish dan lihat hasilnya ..
Cara Menambahkan Google
Maps di Adobe Animate
Pembuatan Aplikasi atau Game Android dan desktop menggunakan Adobe
Animate disaat ini memang sedang ramai-ramainya itu di karnakan kemudahan
dalam membuat desain dan tidak terlalu banyak menggunakan script. Google
maps bisa di tambahkan ke dalam aplikasi atau game yang di buat
menggunakan adobe animate dan adobe flash dengan menggunakan bahasa
pemrograman AS3.
Menambahkan fitur Google Maps menggunakan Bahasa Pemrograman AS3
hanya memerlukan beberapa baris script dan satu tombol maps untuk dijadikan
sebagai penghubung antara projek dan Google maps, dan perlu di ingat bahwa
untuk hasil projeknya harus memiliki koneksi internet karna Google Maps
tersebut akan terhubung dan terbuka jika dalam keadaan Online.
Script untuk menambahkan Google maps pada projek adobe animate ini bisa
digunakan juga untuk menghubungkan dengan situs (site) lainnya, karna pada
dasarnya script ini digunakan untuk membuat link atau URL site dengan Adobe
animate AS3. OK Kita langsung saja ke Tutorialnya :

Cara Mudah Menambahkan Google Maps Di Adobe Animate dengan AS3

Membuat Fitur Google Maps di Adobe animate, berikut langkah-langkah nya :
1. Buka Adobe Animate nya dan Buatlah Dokumen baru (boleh air for
android, air for desktop asalkan menggunakan AS3)
2. Kemudian Buatlah Suatu Button, (Boleh dengan Gambar, Text ataupun
button Default), Sebagai Contoh saya menggunakan Gambar
Location :

Perhatikan Gambar di atas !

Cara membuat Button : Klik Kanan Pada Gambar Kemudian Pilih Convert
to Symbol.. > Button
Setelah itu beri nama pada Instance Name nya dengan nama : Maps

*Instance Name nya ada di Properties

 3. Setelah Membuat Button, Kita langsung Menerapkan Script AS3 untuk
Menambahkan Google Maps nya :
– Buka Google Maps dan copy URL nya :

Klik Kanan di frame 1 (di frame button nya) kemudian Pilih Actions dan
masukan Script berikut :
stop()
Maps.addEventListener(MouseEvent.CLICK, gotoWebPage);
function gotoWebPage(e:MouseEvent):void
{
navigateToURL(new URLRequest(“MASUKAN/TERAPKAN URL NYA
DISINI“), “_blank”);
}

Penjelasan :
Bagian URL (yang diberi huruf tebal) merupakan Link Maps nya, jadi Copy
kan URL Maps yang kalian inginkan di bagian ini.

Sebagai CONTOH :
Ganti (“MASUKAN/TERAPKAN URL NYA DISINI“), “_blank”);
Menjadi (“https://www.google.com/maps/dir//Kabupaten+Garut,
+Jawa+Barat/@-7.3425596,107.497947,10z/data=!4m8!4m7!1m0!1m5!
1m1!1s0x2e68a6a364a7c085:0x301e8f1fc28b8f0!2m2!1d107.763621!2d-
7.5012204”), “_blank”);

4. Selesai……

Script AS3 Untuk Menggerakan

Objek di Adobe Animate CC
Contoh kasusnya : Ketika kamu ingin membuat suatu game Kapal Perang,
Super Mario, Balap Mobil dan lainnya. Kamu memerlukan Script ini untuk
menggerakan objek tersebut ke kiri, kanan, atas, bawah, depan dan belakang.
Nah dalam permainan seperti itu script tombol untuk perpindahan objek sangat
dibutuhkan.

Cara Menggerakan objek menggunakan adobe animate ini bisa kamu pelajari
disini. Script yang digunakan tidak banyak dan hanya beberapa baris saja.
Penggunaan Action Script 3 dalam pembuatan tombol untuk objek bergerak ini
sangat sederhana dan mudah untuk di ikuti.

Tutorial Membuat Objek Bergerak di Adobe Animate CC +Script

Untuk membuat suatu objek bergerak di adobe animate cc. Kamu harus
membuat beberapa tombol beserta objek yang akan digunakannya. Untuk lebih
lengkapnya perhatikan langkah-langkah berikut ini :

1. Buka Adobe Animate nya

2. Buat 9 Layer. Yaitu, Perhatikan gambar berikut ini :

Buatlah layer Percis seperti pada gambar di atas ….

3. Buatlah Tombol dan Objek nya, Dengan Ketentuan :

***Layer Kotak : Berisi Objek yang akan digerakan menggunakan tombol,
Buatlah suatu objek (Movie Clip) yang nantinya akan kamu Kontrol
gerakannya.
 ***Layer Kiri : Berisi Tombol yang digunakan untuk menggerakan objek ke
sebelh kiri,
Buatlah 1 Tombol dengan Instance name : kiri

***layer Kanan : Berisi Tombol yang digunakan untuk menggerakan objek

ke sebelah kanan,
Buatlah 1 tombol dengan Instance Name : kanan

***Layer Zoomout : Berisi Tombol yang digunakan untuk memperkecil

Objek,
Buatlah 1 tombol dengan Instance Name : zoomout

***Layer ZoomIn : Berisi Tombol yang digunakan untuk memperbesar

Objek,
Buatlah 1 tombol dengan Instance Name : zoomin

***Layer Putar : Berisi Tombol Untuk Memutar Objek,

Buatlah 1 tombol dengan Instance Name : putar

***Layer Bawah : Berisi Tombol Untuk menggerakan Objek ke arah

Bawah,
Buatlah 1 tombol dengan Instance Name : bawah

***Layer Atas : Berisi Tombol Untuk Menggerakan Objek ke arah Atas,

Buatlah 1 tombol dengan Instance Name : atas

4. Setelah Tombol selesai dibuat, Masukan Script nya di Layer Actions,

***Layer Actions : Untuk Menyimpan Script nya
Di layer Actions, Klik kanan di frame > Actions dan masukan Script
Berikut :
Script Untuk Menggerakan Objek :

import flash.events.MouseEvent;
kiri.addEventListener(MouseEvent.CLICK,geserKiri);
atas.addEventListener(MouseEvent.CLICK,geserAtas);
kanan.addEventListener(MouseEvent.CLICK,geserKanan);
bawah.addEventListener(MouseEvent.CLICK,geserBawah);
zoomin.addEventListener(MouseEvent.CLICK,perbesar);
zoomout.addEventListener(MouseEvent.CLICK,perkecil);
putar.addEventListener(MouseEvent.CLICK,muter);
function geserKiri(Event:MouseEvent) { kotak.x -=5; }
 function geserAtas(Event:MouseEvent) { kotak.y -=5; }
function geserKanan(Event:MouseEvent) { kotak.x +=5; }
function geserBawah(Event:MouseEvent) { kotak.y +=5; }
function perbesar(Event:MouseEvent) { kotak.scaleX +=0.01; kotak.scaleY
+=0.01; }
function perkecil(Event:MouseEvent) { kotak.scaleX -=0.01; kotak.scaleY -
=0.01; }
function muter(Event:MouseEvent) { kotak.rotation +=5; }
5. Selesai…. Cek dengan cara menekan Tombol CTRL+ENTER