Materi Adobe Animate [PDF]

Citation preview

MODUL I ADOBE ANIMATE CC



1.1 Tujuan Pembelajaran a. Mahasiswa memahami konsep dasar Adobe Animate b. Mahasiswa memahami komponen-komponen pada Adobe Animate c. Mahasiswa mampu mengoperasikan tools pada Adobe Animate dan membuat objek 2D sederhana



1.2 Capaian Pembelajaran a. Mahasiswa diharapkan mampu menjelaskan konsep dasar Adobe Animate b. Mahasiswa diharapkan mampu menggunakan komponen-komponen pada Adobe Animate c. Mahasiswa diharapkan mampu membuat objek 2D sederhana dengan tool-tool yang ada pada Adobe Animate



1.3 Materi a. Animasi 2D Animasi 2D atau animasi dwi-matra dikenal juga dengan nama flat animation. Ada beberapa teknik yang dapat digunakan dalam proses pembuatannya, antara lain dengan sistem: Cell Technique (Film Animasi Teknik Sel) Teknik cell ini merupakan teknik dasar pembuatan film animasi klasik. Rangkaian gambar dibuat di atas lembaran transparan yang tembus pandang/sel (cell). Objek utama yang mengeksploitir gerak dibuat terpisah dengan latar belakang dan depan yang statis. Dengan demikian, latar belakang (background) dan latar depan (foreground) dibuat hanya sekali saja. Cara ini dapat menyiasati pembuatan gambar yang terlalu banyak. Proses pembuatan animasi seperti ini mendominasi seluruh film animasi klasik



1



yang juga masih dapat kita nikmati hingga saat sekarang, seperti Scooby Doo, The Flintstone, dan lain-lain. Software animasi 2D adalah software yang digunakan untuk membuat animasi tradisional



(flat



animation),



umumnya



mempunyai



kemampuan



untuk



menggambar, mengatur gerak, mengatur waktu, beberapa dapat mengimpor suara. Dari sisi penggunaan umumnya tidak sulit. Contoh dari Software Animasi 2D ini antara lain: CrazyTalk Animator 3, OpenToonz, Toon Boom Harmony, MOHO (Studio Anime), Synfig Studio, Tupi, Adobe Animate CC, Stop Motion Studio, Pivot Animator, Pencil2D, Animaker dan sebagainya.



b. Adobe Animate Adobe Animate (dulunya Adobe Flash) adalah multimedia yang berguna untuk membuat animasi dari Adobe Systems Adobe Animate digunakan untuk merancang grafik vektor dan animasi untuk program televisi, video online, situs web, aplikasi web, aplikasi internet yang kaya, dan permainan video. Program ini juga menawarkan dukungan untuk grafik raster, teks kaya, embedding audio dan video, dan skrip ActionScript. Animasi dapat diterbitkan untuk HTML5, WebGL, Scalable Vector Graphics (SVG) animasi dan spritesheets, dan warisan Flash Player (SWF) dan format Adobe AIR. Ini pertama kali dirilis pada tahun 1996 sebagai FutureSplash Animator, dan kemudian berganti nama menjadi Macromedia Flash setelah diakuisisi oleh Macromedia. Itu dibuat untuk berfungsi sebagai lingkungan penulis utama untuk platform Adobe Flash, perangkat lunak berbasis vektor untuk membuat konten animasi dan interaktif. Itu berganti nama menjadi Adobe Animate pada tahun 2016 untuk mencerminkan posisi pasarnya dengan lebih akurat, karena lebih dari sepertiga dari semua konten yang dibuat di Animate menggunakan HTML5 Versi pertama dari Adobe Flash / Adobe Animate adalah FutureSplash Animator, sebuah program grafik vektor dan animasi vektor yang dirilis pada Mei 1996. FutureSplash Animator dikembangkan oleh FutureWave Software, sebuah perusahaan perangkat lunak kecil yang produk pertamanya, SmartSketch, adalah program menggambar berbasis vektor untuk komputer berbasis pena. Dengan



2



ledakan sistem dioperasikan berorientasi pena, itu porting ke Microsoft Windows serta Classic Mac OS Apple Inc. Pada tahun 1995, perusahaan memutuskan untuk menambahkan kemampuan animasi ke produk mereka dan untuk membuat platform animasi berbasis vektor untuk World Wide Web; karenanya FutureSplash Animator dibuat. (Pada saat itu, satu-satunya cara untuk menyebarkan animasi semacam itu di web adalah melalui penggunaan Java.) Teknologi animasi FutureSplash digunakan di situs web seperti MSN, situs web Simpsons, dan Disney Daily Blast dari The Walt Disney Company. Pada bulan Desember 1996, Macromedia membeli FutureWave dan mengganti nama produk tersebut menjadi Macromedia Flash, nama merek yang berlanjut selama 8 versi utama. Adobe Systems mengakuisisi Macromedia pada tahun 2005, dan merek-ulang produk Adobe Flash Professional untuk membedakan dari pemain, Adobe Flash Player. Itu dimasukkan sebagai bagian dari Creative Suite produk dari CS3 ke CS6, sampai Adobe menghapus jajaran Creative Suite demi Creative Cloud (CC). Pada 1 Desember 2015, Adobe mengumumkan bahwa program tersebut akan diganti nama menjadi Adobe Animate pada pembaruan besar berikutnya. Langkah ini datang sebagai bagian dari upaya untuk memisahkan program dari Adobe Flash Player, mengakui peningkatan penggunaannya untuk pembuatan HTML5 dan konten video, dan upaya untuk mulai mengecilkan penggunaan Flash Player demi solusi berbasis web standar. Versi pertama dengan nama baru dirilis 8 Februari 2016.



3



c. Komponen Adobe Animate



1. Menu Bar, Berisi kumpulan menu atau perintah - perintah serta menyediakan akses cepat menuju tool - tool yang umum digunakan. 2. Timeline, Merupakan komponen yang digunakan untuk mengatur atau mengontrol jalannya animasi. Timeline terdiri dari beberapa layer. Layer digunakan untuk menempatkan suatu atau beberapa objek dalam stage agar dapat diolah oleh objek lain. Setiap layer terdiri dari frame - frame yang digunakan untuk mengatur kecepatan animasi. Semakin panjang frame dalam layer, maka semakin lama animasinya akan berjalan. 3. Toolbar, Panel yang berisi berbagai macam tool yang digunakan untuk membuat animasi. 4. Layer/Stage, Stage adalah lembar kerja tempat kita yang digunakan untuk memainkan objek - objek yang akan diberi animasi. Dalam stage ini kita dapat membuat gambar, teks, memberi warna dan lain - lain. 5. Actions, Panel Action tempat untuk memberikan kode ActionScript untuk membuat animasi atau interaksi. 6. Properties, Panel propeties akan berubah tampilan dan fungsinya mengikuti bagian mana yang sedang diaktifkan. Misalnya anda sedang mengaktifkan Line Tool, maka yang muncul pada jendela properties adalah



4



fungsi - fungsi untuk mengatur line/garis seperti bentuk garis, besarnya garis, dan warna garis. 7. Library, Panel Library mempunyai fungsi sebagai perpustakaan simbol/media yang digunakan dalam animasi yang sedang dibuat. Simbol merupakan kumpulan gambar baik movie, tombol (button), sound, dan gambar statis (graphic), dll.



d. Fungsi-Fungsi Tools Tools yang disediakan pada Adobe Animate ini berfungsi untuk mempermudah atau membantu kita dalam kegiatan pembuatan animasi. Berikut terdapat beberapa tools dan fungsinya yang terdapat pada Adobe Animate. 1. Selection Tool



Selection tool berfungsi untuk memilih dan memindahkan objek-objek yang ada di dalam stage. Bisa diaktifkan dengan shortcut tombol (V) pada keyboard. 2. Subselection Tool



Subselection tool, mirip dengan Selection Tool, tetapi kita bisa memilih komponen-komponen terkecil bila objek yang aktif merupakan objek shape. Bisa diaktifkan dengan shortcut tombol (A) pada keyboard. 3. Free Transform Tool dan Gradient Transform Tool



-



Free Transform Tool digunakan untuk memanipulasi objek yang terpilih. Manipulasi yang bisa kita lakukan antara lain rotate, scaling, skew, dll. Bisa diaktifkan dengan shortcut tombol (Q) pada keyboard.



5



-



Gradient Transform Tool digunakan untuk memanipulasi warna gradien yang ada pada objek. Bisa diaktifkan dengan shortcut tombol (F) pada keyboard.



4. 3D Rotation Tool



3D Rotation berfungsi untuk memanipulasi objek menjadi gambar tiga dimensi. Bisa diaktifkan dengan shortcut tombol (W) pada keyboard. 5. Lasso Tool



-



Lasso Tool digunakan untuk memilih bagian dar objek shape dengan bentuk yang kita inginkan. Tidak seperti selection Tool yang hanya memungkinkan kita memilih objek Shape dengan cakupan wilayah persegi. Bisa diaktifkan dengan shortcut tombol (L) pada keyboard.



-



Polygon tool berfungsi untuk membuat persegi dengan sudut tergantung jumlah lekukan. tool ini bisa menggambar segitiga, segilima dll. Bisa diaktifkan dengan shortcut tombol (L) pada keyboard.



-



Magic Wand Tool berfungsi untuk menteleksi objek berbentuk vector yang memiliki atribut yang sama seperti warna, garis, gradient. Bisa diaktifkan dengan shortcut tombol (L) pada keyboard.



6. Pen Tool



-



Pen Tool digunakan untuk menggambar objek shape secara manual. Bisa diaktifkan dengan shortcut tombol (P) pada keyboard.



-



Add Anchor Point Tool digunakan untuk menggambar objek shape secara manual. Bisa diaktifkan dengan shortcut tombol (=) pada keyboard.



6



-



Delete Anchor Point digunakan untuk menghapus vertex yang ada pada garis shape. Bisa diaktifkan dengan shortcut tombol (-) pada keyboard.



-



Convert Anchor Point berfungsi untuk merubah garis menjadi bentuk kurva. Bisa diaktifkan dengan shortcut tombol (Shift+C) pada keyboard.



7. Text Tool



Text Tool digunakan untuk menambahkan komponen teks pada satge, typenya antara lain Static text, dynamic text, input text. Bisa diaktifkan dengan shortcut tombol (T) pada keyboard. 8. Line Tool



Line Tool digunakan untuk menggambar garis lurus, hasilnya berupa garis shape. Bisa diaktifkan dengan shortcut tombol (N) pada keyboard. 9. Rectangle Tool dan Rectangle Primitive Tool



-



Rectangle Tool digunakan untuk membuat objek shape berbentuk persegi. Bisa diaktifkan dengan shortcut tombol (R) pada keyboard.



-



Rectangle Primitive Tool digunakan untuk membuat gambar berupa persegi, yang modifikasinya tetap dipertahankan pada bentuk aslinya, type gambarnya bersifat vektor tapi bukan shape. Bisa diaktifkan dengan shortcut tombol (R) pada keyboard.



10. Oval Tool



-



Oval Tool digunakan untuk membuat objek shape berbentuk oval/lingkaran. Bisa diaktifkan dengan shortcut tombol (O) pada keyboard.



7



-



Oval Primitive Tool digunakan untuk membuat gambar berupa Oval, yang modifikasinya tetap dipertahankan pada bentuk aslinya, type gambarnya bersifat vektor tapi bukan shape. Bisa diaktifkan dengan shortcut tombol (O) pada keyboard.



11. PolyStar Tool



Polystar Tool digunakan untuk membuat objek shape dengan banyak sisi. 12. Pencil Tool



Pencil Tool digunakan Untuk Menggambar garis secara bebas, hasilnya berupa garis shape. Bisa diaktifkan dengan shortcut tombol (Shift+Y) pada keyboard. 13. Paint Brush Tool



Paint Brush Tool berfungsi untuk menggambar sesuai keinginan kita seperti kita sedang menggambar menggunakan kuas namun gambar yang di hasilnya berbentuk path. Bisa diaktifkan dengan shortcut tombol (Y) pada keyboard. 14. Brush Tool



Brush digunakan untuk mewarnai stage, seakan layaknya sebuah cat, bentuk yang dihasilkan merupakan objek shape. Bisa diaktifkan dengan shortcut tombol (B) pada keyboard. 15. Bone Tool



-



Bone Tool digunakan sebagai alat bantu untuk melakukan pergerakan animasi. Bisa diaktifkan dengan shortcut tombol (M) pada keyboard.



8



-



Bind Tool digunakan untuk mengedit dan memodifikasi titik sendi dari peranti Bone tool. Bisa diaktifkan dengan shortcut tombol (M) pada keyboard.



16. Paint Bucket Tool



Paint Bucket Tool digunakan untuk mewarnai pada suatu bidang/objek yang dipilih. Bisa diaktifkan dengan shortcut tombol (K) pada keyboard. 17. Ink Bottle



Ink Bottle digunakan untuk mewarnai pada tepi/edge dari objek yang dipilih. Bisa diaktifkan dengan shortcut tombol (S) pada keyboard. 18. Eyedropper Tool



Eyedropper digunakan untuk mengeset warna yang dipilh sebagai warna aktif untuk Stroke atau Fill Color. Bisa diaktifkan dengan shortcut tombol (I) pada keyboard. 19. Eraser Tool



Eraser digunakan untuk mengahapus objek shape yang ada dalam stage. Bisa diaktifkan dengan shortcut tombol (E) pada keyboard. 20. Camera



Camera digunakan untuk membawa objek ke mana yang diinginkan dan bisa keluar dari kanvas. Bisa diaktifkan dengan shortcut (C) pada keyboard. 21. Hand Tool



Hand Tool digunakan untuk bernavigasi secara bebas. Bisa diaktifkan dengan shortcut (H) pada keyboard. 9



22. Zoom Tool



Zoom Tool digunakan untuk memperbesar/memperkecil ukuran semua objek yang ada pada stage. Bisa diaktifkan dengan shortcut (Z) pada keyboard.



1.4 Latihan a) Membuat objek gambar dengan tool Adobe Animated 1. Membuat Bulan a) Buatlah dokumen baru b) Gantilah warna backgound selain warna putih (yang gelap) c) Buatlah sebuah lingkaran berwarna putih tanpa garis. Seleksi lingkaran tersebut dan tekan F8. Pada kotak dialog yang muncul masukkan bulan sebagai name dan movie clip sebagai type lalu tekan OK. d) Seleksi movie clip bulan di stage dan klik filter pada properties e) Setelah berpindah ke panel filters, tekan add filter dan pilih Glow. Ubah Blur X menjadi 5, Blur Y menjadi 5, Strength 100%, Quality Low, dan color berkode #CCCCCC. f) Tekan add filter lagi dan pilih Glow. Pada Glow yang muncul masukkan settingan berikut : ubah Blur X menjadi 33, Blur Y menjadi 33, Strength 100%, Quality High, dan color berkode #FFFFFF.



10



2. Membuat Bunga g) Buatlah sebuah lingkaran lonjong berwarna merah dengan hitam sebagai warna garisnya. h) Tekan tombol Free Transform Tool pada toolbox sehingga anda akan menggunakan tool tersebut.



i) Pastikan anda masih menyeleksi objek lingkaran yg baru saja, kemudian tekan Ctrl+T maka akan terbuka jendela panel transform, pada rotate tuliskan angka 40. Jika sudah tekan tombol duplicate selection and transform sampai membentuk kelopak bunga. j) Buatlah lingkaran kecil berwarna kuning dengan hitam sebagai warna garisnya. Letakan lingkaran tersebut di tengah kelopak bunga.



11



k) Tekan Ctrl+Enter untuk melihat hasilnya. l) Jika seluruh garis tepi warna hitam dihapus maka hasilnya adalah seperti ini:



b) Import gambar vector a) Siapkan gambar vector (*.SVG, *.EPS, *.AI, *.CDR, dll) b) Masuk ke menu file ➔ import ➔ import to library / import to stage ➔ cari file yg akan di importkan (cth: pedagang.ai)



c) Kemudian seleksi objek dalam gambar yang akan diimportkan ➔ import



12



d) Objek gambar akan tersimpan kedalam library secara otomatis



1.5 Tugas Buatlah sebuah tampilan yang menarik dengan menggunakan Adobe Animate dengan memaksimalkan tools yang ada dan tuliskan tema dari tampilan yang anda buat.



13



MODUL II ANIMASI SEDERHANA ADOBE ANIMATE



2.1 Tujuan Pembelajaran Mahasiswa memahami jenis-jenis animasi sederhana yang dapat dibuat dalam Adobe Animate 2.2 Capaian Pembelajaran Mahasiswa diharapkan mempu membuat animasi-animasi sederhana dengan Adobe Animate 2.3 Materi Animasi adalah gambar begerak berbentuk dari sekumpulan objek yang disusun secara beraturan mengikuti alur pergerakan yang telah ditentukan pada setiap pertambahan hitungan waktu yang terjadi. Gambar atau objek yang dimaksud bisa berupa gambar manusia, hewan, maupun tulisan. Ada 2 cara untuk membuat animasi di dalam Flash yaitu animasi frame by frame dan animasi tweening. a. Animasi Frame by Frame Animasi frame by frame adalah membuat sebuah ilusi pergerakan dari sebuah gambar/objek yang diam (still image) frame demi frame-nya. b. Animasi Tweening Animasi tweening adalah suatu pergerakan dari tempat yang satu ke tempat yang lain yang mungkin pergerakan tersebut bisa berbeda. Animasi tweening dibagi menjadi 6, yaitu: 1. Animasi Motion Animasi motion merupakan animasi dengan mode tweening. Untuk membuat animasi ini, hanya menentukan titik awal dan titik akhir, selebihnya dikerjakan oleh komputer. 2. Animasi Motion Guide



14



Animasi motion guide adalah animasi yang mempunyai gerakan sesuai dengan jalur yang kita buat. Animasi ini sangat cocok digunakan untuk jenis animasi yang membutuhkan ketelitan dalam pergerakan yang dikehendaki atau sesuai keinginan pembuat animasi. 3. Animasi Mask Animasi Mask adalah animasi yang pada intinya menampilkan objek yang semula kita sembunyikan. 4. Animasi Alpha Animasi Alpha adalah animasi yang membuat perubahan tampilan objek menjadi transparan atau sebaliknya. 5. Animasi Transform Animasi Transform adalah animasi perubahan posisi, baik perpindahan maupun perputaran. 6. Animasi Shape Animasi Shape adalah animasi yang digunakan untuk membuat animasi perubahan bentuk dari satu bentuk ke bentuk yang lain.



2.4 Latihan a. Membuat animasi Frame by frame a) Pada layer 1 pilih Teks Tool, Ketikan huruf awal dari kalimat yang akan dibuat, Misalnya kita akan membuat kata ANIMASI jadi huruf yang diketikan adalah huruf A. b) Pada Frame ke 5 klik kanan pilih insert keyframe, kemudian ketikan huruf kedua yaitu N. c) Pada Frame ke 10 klik kanan pilih insert keyframe, kemudian ketikan huruf ketiga yaitu I. d) Ulangi langkah di atas sampai kalimat yang ingin kita buat selesai. e) Tekan CTRL + ENTER untuk melihat hasilnya. b. Membuat animasi Montion a) Buatlah file baru, pilih menu File –New



15



b) Buatlah lingkaran pada stage disebelah kiri dengan menggunakan ovale tools. c) Klik kanan pada keyframe 1, pilih Create Classic Tween. d) Klik kanan pada frame 20, pilih insert keyframe. e) Pada frame 20 pindahkan lingkaran ke sebelah pojok kanan bawah dengan Selection Tool. f) Tekan CTRL + ENTER untuk melihat hasilnya. c. Membuat animasi Montion guide a) Buatlah file baru, pilih menu File –New b) Buatlah lingkaran pada stage disebelah kiri dengan menggunakan ovale tools. c) Klik kanan pada keyframe 1, pilih Create classic tween. d) Klik kanan pada frame 60, pilih Insert keyframe. e) Klik kanan pada layer 1, pilih Add classic motion guide, maka akan terbentuk sebuah layer baru bernama Motion Guide. f) Klik frame 1 pada layer Motion guide yang terbentuk kemudian dengan menggunakan pencil tools buatlah lengkungan sebagai lintasan. g) Klik pada frame akhir / frame 60 pada layer 1, pindahkan objek (lingkaran) ke titik terakhir garis menggunakan Selection Tool. h) Tekan CTRL + ENTER untuk melihat hasilnya. d. Membuat animasi Mask a) Buatlah file baru, pilih menu File –New b) Buatlah tulisan dengan Text Tool, tebalkan dan perbesar tulisan tersebut. c) Klik kanan pada frame 40, pilih Insert frame. d) Tambahkan layer baru menggunakan tombol new layer. e) Pilih layer baru tersebut, buatlah lingkaran menggunakan Ovale tool di sebelah kiri teks. f) Klik kanan pada frame 40 layer 2, pilih Insert keyframe. g) Pindahkan lingkaran ke sebelah kanan teks. h) Klik kanan pada frame 1 layer 2, pilih create classic tween. i) Klik kanan pada layer 2, pilih mask.



16



j) Tekan CTRL + ENTER untuk melihat hasilnya. e. Membuat animasi Alpha a) Buatlah file baru, pilih menu File –New b) Buatlah bentuk persegi dengan menggunakan Rectangle Tool c) Klik objek persegi, tekan tombol F8 atau klik kanan pilih convert to symbol, isikan nama symbol kemudian pilih type graphic d) Klik kanan pada frame 1, pilih create classic tween e) Klik kanan pada frame 15, pilih insert keyframe f) Klik objek persegi, kemudian pada Color Effect Properties ubah style dari none ke alpha, untuk alphanya kita isikan 30% untuk memberi efek penampakan objek. g) Tekan CTRL + ENTER untuk melihat hasilnya f. Membuat animasi Transform a) Buatlah file baru, pilih menu File –New b) Buatlah persegi panjang dengan menggunakan Rectangle tools c) Klik kanan pada frame 1, pilih Create classic tween d) Klik kanan pada frame 30, pilih insert keyframe e) Pilih tool Free Transform f) Klik objek bantu persegi panjang yang terbentuk, transformasikan ke bentuk yang anda inginkan. g) Tekan CTRL + ENTER untuk melihat hasilnya g. Membuat animasi Shape a) Buatlah file baru, pilih menu File –New b) Buatlah lingkaran dengan menggunakan ovale tools c) Klik kanan pada frame 60, pilih Insert Blank Keyframe d) Buatlah objek kotak dengan menggunakan rectangle tool e) Klik kana pada timeline diantara frame 1 dan frame 25, pilih create shape tween f) Tekan CTRL + ENTER untuk melihat hasilnya



17



MODUL III ANIMASI LANJUT DENGAN ADOBE ANIMATE



3.1 Tujuan Pembelajaran a. Mahasiswa memahami cara mengkombinasikan jenis-jenis animasi sederhana b. Mahasiswa memahami konsep tombol dalam Adobe Animate c. Mahasiswa memahami konsep menu dalam Adobe Animate



3.2 Capaian Pembelajaran a. Mahasiswa mampu mengkombinasikan jenis-jenis animasi sederhana b. Mahasiswa mampu membuat tombol dalam Adobe Animate c. Mahasiswa mampu membuat menu dalam Adobe Animate



3.3 Latihan a. Membuat Animasi Loading 1. Loading lingkaran Frame by Frame a) Buka aplikasi Adobe Animate kemudian buat proyek baru b) Buat 2 buah layer sebagai berikut



c) Tambahkan objek kotak dengan kombinasi warna #666666 sebagai background pada layer BG frame 1, kemudian kunci layer BG agar tidak berubah.



18



d) Buat objek seperti gambar berikut menggunakan lingkaran pada layer loading frame 1



e) Seleksi kedua objek tersebut (lingkaran dan text), kemudian convert menjadi movie clip dengan cara tekan F8 ➔ masukan nama movie clip



f) Double klik movie clip yang baru saja dibuat g) Di dalam movie clip loading, buat 2 buah layer (lingkaran dan text), pindahkan text loading tadi ke dalam layer text



19



h) Kemudian buat animasi frame by frame pada layer lingkaran dan text, i) Perubahan animasi pada layer lingkaran adalah warna putih yang bergeser setiap framenya. j) Perubahan animasi pada layer text adalah penambahan titik “.” Setelah text “loading” ➔ “loading.” (frame selanjutnya) ➔ “loading.” (frame selanjutnya).



20



k) Tambahkan scene baru kemudian tambahkan text “Selamat Datang” pada scene 2.



l) Klik kanan frame 1 (scene 2) >> Actions m) Masukan script stop(); kemudian jalankan aniamsi



21



n) Kembali ke Scene 1 klik kanan pada frame 75 ➔ insert frame, jalankan animasi



2. Loading animasi Mask a) Buka aplikasi Adobe Animate kemudian buat proyek baru b) Buat 4 buah layer sebagai berikut:



22



c) Tambahkan objek kotak warna hitam sebagai background pada layer BG frame 1, kemudian kunci layer BG agar tidak berubah. d) Tambahkan kotakan kecil panjang berwarna putih pada layer Garis frame 1, letakan kotak tersebut ditengah-tengah lembar kerja, kemudian kunci frame. e) Tambahkan kotakan kecil (sama seperti langkah d) pada layer Mask frame 1, letakan kotak tersebut tepat di samping kanan kotakan yang pertama (langkah d)



f) Tambahkan tulisan 2% pada layer Angka frame 1, letakan tulisan tersebut di atas kotak pertama (langkah d)



23



g) Klik kanan layer Mask frame 50 ➔ Insert Keyframe, kemudian pindahkan objek kotakan pada frame 50 hingga menutupi objek yang ada di layer garis. h) Klik kanan frame 60 (Mask) ➔ Insert Frame i) Klik kanan frame 1 (Mask) >> Create Classic Tween



j) Klik frame 1 (Angka) >> tekan F6 pada keyboard, kemudian ganti angkanya (frame 2) menjadi 4% k) Klik frame 2 (Angka) >> tekan F6 pada keyboard, kemudian ganti angkanya (frame 3) menjadi 6% l) Lakukan langkah di atas (J, K) hingga frame 50 dengan angka 100% m) Klik kanan frame 60 (Angka) >> Insert Frame



n) Klik kanan layer Mask >> pilih Mask, sehingga tampilan akhir timeline akan seperti ini



24



o) Tambahkan scene baru kemudian tambahkan text “Selamat Datang” pada scene 2 p) Klik kanan frame 1 (scene 2) ➔ Actions q) Masukan script stop(); kemudian jalankan animasinya b. Membuat Animasi Text Bersinar a) Buka aplikasi Adobe Animate kemudian buat projek baru b) Buat 2 buah layer (BG dan Text1), kemudian atur warna BG pada objek kotang (layer BG) dan text pada layer Text1 sebagai berikut



25



c) Duplikat layer text1 sebanyak 2x kemudian rubah namanya (text2 dan text3) d) Rubah warna text pada layer text2 dan text3 serta rubah sedikit posisinya



e) Tambahkan layer baru (sinar) kemudian beri objek kotakan disebelah kiri text f) Klik kanan layer sinar ➔ Create Motion Tween g) Atur panjang frame pada motion tween layer sinar



h) Geser objek kotak pada layer sinar kesebelah kanan tulisan i) Klik kanan frame 35 layer text3 ➔ insert frame j) Lakukan Langkah yang sama pada layer text2, text1 dan BG



26



k) Klik kanan layer sinar ➔ mask l) Geser layer text2 hingga masuk ke bagian mask layer sinar (seperti pada layer text3)



m) Jalankan animasi c. Membuat Tombol a) Buka aplikasi Adobe Animate kemudian buat projek baru b) Buat design awal tombol yg akan dibuat (kotak dan text)



c) Seleksi kedua objek (kotak dan text) ➔ Modify ➔ convertr to symbol atau tekan tombol F8, kemudian tentukan nama untuk tombol dan pilih button pada bagian type ➔ OK



27



d) Pada dasarnya tombol sudah jadi dan bisa langsung digunakan, tapi kita juga bisa mengatur design tampilan tombol saat keadaan normal, saat di lewati cursor, saat di tekan serta area yang bisa ditekan dalam tombol, dengan cara sebagai berikut e) Double klik symbol tombol yang baru saja kita buat



f) Secara default jumlah layer dalam tombol adalah satu/1 (tapi masih bisa ditambakan lagi) g) Frame Up, Over, Down dan Hit berfungsi untuk mengatur tampilan pada tombol nantinya



28



Up



: Tempat untuk mengatur tampilan awal tombol



Over : Tempat untuk mengatur tampilan saat tombol disentuh Down : Tempat untuk mengatur tampilan saat tombol di klik Hit



: Tempat untuk mengatur area yang dapat di tekan



h) Setiap frame dapat diberi tampilan yang berbeda-beda, tergantung dari keinginan pengguna



i) Jalankan animasi d. Membuat Halaman Menu dan Memasukan Suara a) Buka aplikasi Adobe Animate kemudian buat projek baru b) Buat 4 buah layer seperti berikut untuk meletakan objek-objeknya: 29



Action : layer yang digunakan untuk meletakan ActionScript Text



: layer yang digunakan untuk meletakan isi text halaman



Btn



: layer yang digunakan untuk meletakan tombol



BG



: layer yang digunakan untuk meletakan backGround gambar



c) Buat tampilan halaman (scene) Home dengan menempatkan komponenkomponen pada layer yang telah dibuat, kemudian atur instance name (IN) tombol seperti berikut:



30



d) Kemudian Duplicate Scene yang di atas menjadi 4 buah dan rubah nama tiap scene menjadi seperti berikut:



e) Kemudian rubah isi text setiap halaman untuk membedakan antara scene satu dengan yang lainnya:



f) Selanjutnya berikan ActionScript berikut pada s_home, layer Action, frame 1.



31



stop(); function Fsi_home(Fsi_home:MouseEvent):void{ gotoAndPlay(1, "s_home"); } function Fsi_kompetensi(Fsi_kompetensi:MouseEvent):void{ gotoAndPlay(1, "s_kompetensi"); } function Fsi_materi(Fsi_materi:MouseEvent):void{ gotoAndPlay(1, "s_materi"); } function Fsi_kuis(Fsi_kuis:MouseEvent):void{ gotoAndPlay(1, "s_kuis"); } btn_kompetensi.addEventListener(MouseEvent.CLICK,Fsi_kompetensi); btn_materi.addEventListener(MouseEvent.CLICK,Fsi_materi); btn_kuis.addEventListener(MouseEvent.CLICK,Fsi_kuis);



g) Selanjutnya berikan ActionScript berikut pada s_kompetensi, layer Action, frame 1. stop(); btn_home.addEventListener(MouseEvent.CLICK,Fsi_home); btn_materi.addEventListener(MouseEvent.CLICK,Fsi_materi); btn_kuis.addEventListener(MouseEvent.CLICK,Fsi_kuis);



h) Selanjutnya berikan ActionScript berikut pada s_materi, layer Action, frame 1. stop(); btn_home.addEventListener(MouseEvent.CLICK,Fsi_home); btn_kompetensi.addEventListener(MouseEvent.CLICK,Fsi_kompetensi); btn_kuis.addEventListener(MouseEvent.CLICK,Fsi_kuis);



i) Selanjutnya berikan ActionScript berikut pada s_kuis, layer Action, frame 1. stop(); btn_home.addEventListener(MouseEvent.CLICK,Fsi_home); btn_kompetensi.addEventListener(MouseEvent.CLICK,Fsi_kompetensi); btn_materi.addEventListener(MouseEvent.CLICK,Fsi_materi);



j) Sehingga daftar ActionScript dalam projek seperti berikut



32



k) Jalankan animasi l) Ada juga bisa menambahkan sound pada setiap halaman, dengan cara: -



Import sound ke dalam library



-



Tentukan frame mana yang akan diberi sound



-



Tarik sound dari library ke area kerja atau setting bagian propertis sound



33



e. Membuat halaman PopUp Exit a) Buka projek “memuat halaman” pada Langkah sebelumnya b) Masuk ke scene s_home, tambahkan layer baru dengan nama exit



c) Kemudian buat sebuah movie clip (mc_keluar) pada layer exit frame 1, berikut movie clipnya -



Buat 3 buah layer pada movie clip untuk meletakan objek-objek dalam movie clip



-



Buat objek kotak sepertiberikut pada layer BG, dan atur alphanya agar konten dibelakang movie clip nanti tetap terlihat



34



-



Tambahkan kata-kata keterangan dan 2 buah tombol pada layer isi, kemudian atur instance name (IN) tombol seperti berikut:



-



Selanjutnya berikan ActionScript berikut pada layer Action, frame 1



import flash.display.MovieClip; stop(); var _root:MovieClip = MovieClip(root); function fsi_tidak(tidak:MouseEvent):void{ _root.mc_keluar.visible = false; } function fsi_ya(ya:MouseEvent):void{ fscommand("quit","true"); } btn_tidak.addEventListener(MouseEvent.CLICK,fsi_tidak); btn_ya.addEventListener(MouseEvent.CLICK,fsi_ya);



d) Kembali ke scene s_home utama, modifikasi ActionScript pada layer Action menjadi seperti berikut:



35



import flash.events.MouseEvent; stop(); mc_keluar.visible = false; function fsi_keluar(keluar:MouseEvent):void{ mc_keluar.visible = true; } btn_exit.addEventListener(MouseEvent.CLICK,fsi_keluar);



function fsi_home(home:MouseEvent):void{ gotoAndPlay(1, "s_home"); } ….. ….. …..



e) Kemudian copy layer Exit pada scene S_Home ini ke semua scane (s_kompetensi, s_materi, dan s_kuis) f) Kemudian modifikasi ActionScript pada scane s_kompetensi, s_materi dan s_kuis layer Action menjadi seperti berikut stop(); mc_keluar.visible = false; btn_exit.addEventListener(MouseEvent.CLICK,fsi_keluar); btn_home.addEventListener(MouseEvent.CLICK,Fsi_home); ….. ….. …..



g) Kemudian jalankan animasi



3.4 Tugas Buatlah tampilan multimedia interaktif sederhana yang memuat halaman loading beberapa scene dan tombol untuk berpindah antar scene



36



MODUL IV KUIS DAN PUBLISH APK



4.1 Tujuan Pembelajaran a. Mahasiswa memahami konsep kuis sederhana dengan Adobe Animate b. Mahasiswa memahami konsep kuis acak dengan Adobe Animate c. Mahasiswa memahami konsep pembuatan APK dalam Adobe Animate



4.2 Capaian Pembelajaran a. Mahasiswa mampu membuat kuis sederhana dengan Adobe Animate b. Mahasiswa mampu membuat kuis acak dengan Adobe Animate c. Mahasiswa mampu membuat APK dalam Adobe Animate



4.3 Latihan a. Kuis Pilihan Ganda Sederhana a) Buka aplikasi Adobe Animate kemudian buat projek baru b) Buat 4 buah layer seperti berikut untuk meletakan objek-objeknya:



c) Buat 1 buah tombol pada layer Tombol sebagai tombolo opsi nantinya, kemudian copy menjadi 4 serta tambahkan text untuk pertanyaan dan opsi jawaban pada layer Text d) Kemudian atur instance name (IN) tombol seperti berikut:



37



e) Selanjutnya berikan ActionScript berikut pada layer Action, frame 1. stop(); var nilai:int; function mulai(e:MouseEvent):void{ gotoAndPlay(1); nilai = 0; } function benar(benar:MouseEvent):void{ nilai+=3; this.nextFrame(); } a.addEventListener(MouseEvent.CLICK,benar); function salah(salah:MouseEvent):void{ this.nextFrame(); } b.addEventListener(MouseEvent.CLICK,salah); c.addEventListener(MouseEvent.CLICK,salah); d.addEventListener(MouseEvent.CLICK,salah);



f) Masuk ke frame 2 layer Tombol ➔ tekan F6 / klik kanan pilih insert Keyframe g) Atur soal dan jawaban nomor 2 pada frame 2 h) Kemudian atur instance name (IN) tombol seperti berikut:



38



i) Selanjutnya berikan ActionScript berikut pada layer Action, frame 1. stop(); a2.addEventListener(MouseEvent.CLICK,salah); b2.addEventListener(MouseEvent.CLICK,benar); c2.addEventListener(MouseEvent.CLICK,salah); d2.addEventListener(MouseEvent.CLICK,salah);



j) Ulangi Langkah f – i sesuai jumlah soal yg diinginkan (pastikan mengganti instance name setiap tombol masing-masing soal) k) Tambahkan 1 keyframe baru setelah soal terakhir, kemudian tambahankan 1 tombol dan 1 dynamic text



l) Selanjutnya berikan ActionScript berikut pada layer Action, frame terakhir



39



stop(); text_skor.text = String(nilai); btn_mulai.addEventListener(MouseEvent.CLICK,mulai);



m) Jalankan animasi



b. Kuis Pilihan Ganda Acak a) Buka aplikasi Adobe Animate kemudian buat projek baru dengan ukuran resolusi handphone b) Buat 3 buah layer seperti berikut untuk meletakan objek-objeknya:



Layer BG



: untuk menempatkan gambar latar belakang



Layer Isi



: untuk menempatkan objek-objek kuis (soal, jawaban, dan



tombol) Layer Action : untuk menempatkan ActionScript c) Tambahkan 1 tombol pada frame 1 yang mengarah ke frame 2 (bertujuan untuk memulai kuis) d) Buatlah sebuah MovieClip untuk membuat tombol pilihan jawaban e) Kemudian buat 2 buah layer (BG dan text) didalam MovieClip yang baru saja dibuat f) Tambahkan dynamic text pada layer text untuk menempatkan jawaban kemudian rubah instance name menjadi “jawaban_txt” g) Buatlah kotak background pada layer BG frame 1 untuk efek mouse over kemudian insert keyframe pada frame 2 dan rubah warna kotakan (*efek mouse over dapat ditampilkan secara otomatis pada symbol button, akan tetapi button atau tombol tidak dapat menampilkan objek lain seperti dynamic text di dalamnya, sehingga kita gunakan objek bertipe MovieClip)



40



h) Kembali ke scene awal frame 2 kemudian tambahkan MovieClip yang baru saja dibuat sebanyak 4 buah serta tambahkan 2 buah dynamic text untuk tempat penulisan soal dan tempat nilai, kemudian setting instance name masing-masing objek sebagai berikut;



i) Buat Movieclip lagi untuk menunjukan pesan benar dan salah j) Pastikan anda centang opsi Export for ActionScript pada saat membuat MovieClip ini 41



k) Masuk ke frame 2 MovieClip hasil_mc kemudian rubah design untuk jawaban yang salah



l) Kembali ke scene utama kemudian masuk ke frame 3 dan tambahkan 1 dynamic text untuk menampilkan skor akhir kuis dan 1 tombol untuk mengulang kuis dari awal



42



m) Selanjutnya berikan ActionScript berikut pada layer Action, frame 1 stop(); function Fsi_Btn_UK_PG(Fsi_Btn_UK_PG:MouseEvent):void{ gotoAndPlay(2); } Btn_UK_PG.addEventListener(MouseEvent.CLICK,Fsi_Btn_UK_PG);



n) Selanjutnya berikan ActionScript berikut pada layer Action, frame 2 (*code berwarna merah dengan tanda “//” didepannya hanya baris komentar dan bisa diabaikan) stop(); var nilai:Number = 0; var no_soal:Number = 0; var max_soal:Number = 6; //jumlah soal yang ditampilkan var hasil:hasil_mc; // struktur soal 0. Soal 1-4 jawaban, Jawaban benar diletakkan no 1 var soal:Array = [["Tempat soal", "opsi Benar", "opsi Salah 1", "opsi Salah Salah 3"], ["Tempat soal", "opsi Benar", "opsi Salah 1", "opsi Salah 2", "opsi Salah ["Tempat soal", "opsi Benar", "opsi Salah 1", "opsi Salah 2", "opsi Salah ["Tempat soal", "opsi Benar", "opsi Salah 1", "opsi Salah 2", "opsi Salah ["Tempat soal", "opsi Benar", "opsi Salah 1", "opsi Salah 2", "opsi Salah ["Tempat soal", "opsi Benar", "opsi Salah 1", "opsi Salah 2", "opsi Salah ["Tempat soal", "opsi Benar", "opsi Salah 1", "opsi Salah 2", "opsi Salah ["Tempat soal", "opsi Benar", "opsi Salah 1", "opsi Salah 2", "opsi Salah var temp_soal:Array; var temp_jawaban:Array;



43



2", "opsi 3"], 3"], 3"], 3"], 3"], 3"], 3"]];



function acak_soal():void{ //mengacak soal temp_soal = soal.slice(0, soal.length); for (var i:Number = 0; i < soal.length; i++){ var acak:Number = Math.floor(Math.random()*soal.length); var temp:Array = temp_soal[acak]; temp_soal[acak] = temp_soal[i]; temp_soal[i] = temp; } } function restart():void{ //restart kuis, semua variabel dikembalikan ke posisi semula acak_soal(); nilai = 0; no_soal = 0; max_soal = 6; //jumlah soal yang ditampilkan score_txt.text = "0"; } function tampilkan_soal():void{ //tampilkan soal soal_txt.text = temp_soal[no_soal][0]; //acak jawaban temp_jawaban = temp_soal[no_soal].slice(1, 5); for (var i:Number = 0; i < temp_jawaban.length; i++){ var acak:Number = Math.floor(Math.random()*temp_jawaban.length); var temp:String = temp_jawaban[acak]; temp_jawaban[acak] = temp_jawaban[i]; temp_jawaban[i] = temp; } //tampilkan jawaban jawaban_1.jawaban_txt.text = temp_jawaban[0]; jawaban_2.jawaban_txt.text = temp_jawaban[1]; jawaban_3.jawaban_txt.text = temp_jawaban[2]; jawaban_4.jawaban_txt.text = temp_jawaban[3]; } function setup_awal():void{ restart(); tampilkan_soal(); //mengatur jawaban jawaban_1.stop(); jawaban_2.stop(); jawaban_3.stop(); jawaban_4.stop(); jawaban_1.addEventListener(MouseEvent.CLICK, cek_jawaban); jawaban_2.addEventListener(MouseEvent.CLICK, cek_jawaban); jawaban_3.addEventListener(MouseEvent.CLICK, cek_jawaban); jawaban_4.addEventListener(MouseEvent.CLICK, cek_jawaban); //listener untuk efek tombol jawaban_1.addEventListener(MouseEvent.MOUSE_OVER, mouse_over); jawaban_2.addEventListener(MouseEvent.MOUSE_OVER, mouse_over); jawaban_3.addEventListener(MouseEvent.MOUSE_OVER, mouse_over); jawaban_4.addEventListener(MouseEvent.MOUSE_OVER, mouse_over); //mouse out jawaban_1.addEventListener(MouseEvent.MOUSE_OUT, mouse_out); jawaban_2.addEventListener(MouseEvent.MOUSE_OUT, mouse_out); jawaban_3.addEventListener(MouseEvent.MOUSE_OUT, mouse_out); jawaban_4.addEventListener(MouseEvent.MOUSE_OUT, mouse_out); }



44



function mouse_over(e:MouseEvent):void{ e.currentTarget.gotoAndStop(2); } function mouse_out(e:MouseEvent):void{ e.currentTarget.gotoAndStop(1); } function cek_jawaban(e:MouseEvent):void{ var no_jawaban:Number = Number(e.currentTarget.name.substr(8))-1; if (temp_jawaban[no_jawaban] == temp_soal[no_soal][1]){ //jawaban benar tampilkan_hasil(1); //penambahan score untuk setiap soal yg benar nilai+=5; score_txt.text = String(nilai); }else{ //jawaban salah tampilkan_hasil(2); } } function tampilkan_hasil(tp:Number):void{ hasil = new hasil_mc(); hasil.x = 236,4; hasil.y = 433,5; hasil.gotoAndStop(tp); hasil.scaleX = 0.2; hasil.scaleY = 0.2; hasil.waktu = 0; hasil.tp = tp; hasil.addEventListener(Event.ENTER_FRAME, gerak_hasil); addChild(hasil); } function gerak_hasil(e:Event):void{ var ob:Object = e.currentTarget; if (ob.scaleX < 1){ ob.scaleX+=0.1; ob.scaleY+=0.1; } if (ob.waktu > -1 && ob.tp < 3){ ob.waktu++; if (ob.waktu > 25){ ob.waktu = -1; //tambah no soal no_soal++; ob.removeEventListener(Event.ENTER_FRAME, gerak_hasil); removeChild(DisplayObject(ob)); if (no_soal < max_soal){ tampilkan_soal(); }else{ gotoAndStop(3); //tombol restart kuis Btn_ulang.addEventListener(MouseEvent.CLICK,Fsi_Btn_UK_PG); } } } } setup_awal();



45



o) Selanjutnya berikan ActionScript berikut pada layer Action, frame 3 stop(); score_txt.text = String(nilai); p) Jalankan animasi



c. Publish APK a) Buka projek flash yang akan dipublish dalam bentuk apk, pastikan ActionScript yang digunakan adalah ActionScript 3 b) Masuk ke menu file ➔ Publish Setting c) Klik tombol Player Setting (icon kunci) sebelah targer



d) Masuk ke menu Deployment ➔ Create certificate (jika belum punya) e) Isi data pada certificate baru yang dibuat



46



f) Kembali ke menu Deployment kemudian masukan password certificate yang baru saja dibuat



g) Kemudian publish



47



h) Tunggu hingga proses publish selesai, secara default file .apk akan tersimpan difolder yang dengan dengan file projek .fla nya



2.4 Projek Adobe Animate Buatlah Multimedia Interaktif lengkap dengan Adobe Animate kemudian publis dalam bentuk .swf dan .apk



48