Showing posts with label Adobe Flash. Show all posts
Showing posts with label Adobe Flash. Show all posts

Wednesday, October 7, 2015

Mengenal Adobe Flash Professional CC

Setiap kali membuka program Adobe Flash Professional CC langsung membuat diriku jatuh cinta. Terrmehek-mehek, melihat tampilan yang ciamik saat loading seperti pada gambar berikut ini. Mengenal Adobe Flash Professional CC

Kemudian akan disuguhi tampilan Welcome Screen ( selamat datang alias sugeng rawuh) seperti berikut ini.

Mengenal Adobe Flash Professional CC

Tampak berbeda dengan versi sebelumnya, sudah tidak lagi muncul ActionScript 2.0. Artinya jika ingin belajar Adobe Flash CC ini tidak boleh tidak harus bermigrasi ke ActionScript 3.0. Dilema ya...ketika belajar ActionScript 2.0 belum bisa menguasai malah harus pindah ke versi yang lebih baru.

Tetapi, membaca beberapa referensi memang lebih baik lupakan ActionScript 2.0, langsung saja tancap gas untuk mempelajari ActionScript 3.0. Lebih powerfull..ekskusi lebih cepat. Wow...cocok banget buat bikin berbagai game yang kompleks sekalipun..(kalau bisa).

Sebelum belajar lebih jauh mengenai Adobe Flash CC ini, iseng-iseng pada Introduction (artinya pengenalan ya), saya klik Geting Started yang diarahkan ke http://www.adobe.com/devnet/flash/getting_started.html.

Mengenal Adobe Flash Professional CC

Jangan khawatir kalau sebelumya belum pernah belajar Flash. Ikuti saja langkah-langkah sederhana untuk membuat sebuah file FLA, menambahkan animasi sederhana mempublish hasilnya. Begitu seperti yang tertulis di web tersebut.

Selanjutnya saya buka http://www.adobe.com/devnet/flash/articles/create-first-flash-document.html dan di sana ada tutorial Adobe Flash Professional CS6 mengenai cara membuat aplikasi flash sederhana. Pada prinsipnya sama saja sih caranya baik ketika pakai versi CS6, versi CC maupun versi sebelumnya.

Pertama, membuat file FLA dan menambahkan elemen grafik

Di sini dicontohkan mengenai membuat file FLA sederhana dan menambahkan elemen lingkaran.

Selanjutnya, cara membuat simbol dan menambahkan animasi

Lingkaran yang telah dibuat, kemudian diubah dalam symbol dan kemudian dianimasikan. Animasi ini terus terulang, untuk menghentikannya diberikan perintah stop();

Selanjutnya, file FLA yang dibuat dipublish dalam bentuk SWF maupun yang lain. Terakhir untuk meningkatkan interaktivitas agar lebih menarik dan terkontrol diberikan sebuah tombol untuk mengulangi animasinya. Untuk apa? Bukankan sebelumnya animasi tersebut dihentikan, jadi perlu diberikan tombol untuk memainkan kembali.

Bagi yang pernah atau sudah mahir belajar flash, ya ndak usahlah mempelajari yang materi seperti ini. Langsung tancap bikin aplikasi yang canggih-canggih.

Tuh kan, baru menulis sampai ini saja mata sudah mulai mengantuk. Ayo bertahan..

Sebelum lebih jauh belajar Flash CC, marilah kita kenali dulu bagian-bagiannya. Tidak boleh tidak, karena tidak ada pilihan ActionScript 2.0, ya ActionScript 3.0 menjadi pilihan satu-satunya. Oke, setelah diklik ActionScript 3.0 diperoleh tampilan sebagai berikut. Ciamik banget ya

Mengenal Adobe Flash Professional CC

Kalau diklik library-nya, akan muncul tampilan seperti ini

Mengenal Adobe Flash Professional CC

Masih kosong, karena memang belum ada symbol yang dibuat maupun elemen lain yang ditambahkan ke situ. Elemen yang dimaksud bisa gambar, suara/audio maupun video yang diimport dari luar.

Penjelasannya adalah sebagai berikut. Tampilan Flash pada dasarnya dibagi menjadi 5 bagian utama, yaitu Stage, Timeline, Tool Panel, Property inspector dan Library Panel.

Stage ibaratnya sama dengan kanvas tempat kita bekerja. Di situ kita bisa mengisinya dengan grafik, video, tombol dan elemen-elemen lain. Diibaratkan panggung juga boleh lah. Apa saja nanti yang muncul, ya hanya yang ada di panggung/stage tadi.

Timeline, merupakan lembar kerja yang terdiri dari frame dan layer. Animasi akan berjalan dari Frame 1 dan seterusnya berjalan dari kiri ke kanan. Sedangkan layer tempat kita menaruh berbagai elemen grafik, termasuk tempat memberikan label maupun menuliskan kode skripnya. Terkait dengan elemen grafik, jika grafik diletakkan pada layer yang lebih tinggi maka pada stage akan terlihat di atas.

Tool Panel berisi senjata-senjata andalan bagi pengguna flash untuk memilih/membuat berbagai obyek, menggunakan berbagai jenis teks sampai mengelolanya lebih lanjut.

Property Inspector menampilkan berbagai informasi, menampilkan berbagai perintah, maupun mengubah setigan dari suatu obyek

Library Panel berisi berbagai elemen media dan simbol yang tersimpan dalam suatu proyek yang dibuat. Yang namanya libary tentunya memudahkan kita ketika ingin mengambil simbol maupun elemen yang lain jika dibutuhkan sewaktu-waktu.

Ya, sampai di sini dulu postingannya. Semoga bermanfaat.

Posted by Ais Production
Ais Production Updated at: 10:33 AM

Monday, February 2, 2015

Membuat Animasi dengan ActionScript 3.0, Animasi Rotasi Flash CS6

Membuat Animasi dengan ActionScript 3.0, Animasi Rotasi Flash CS6

Membuat animasi dengan ActionScript 3.0 dapat dilakukan secara mudah dan cepat menggunakan Code Snippet. Dengan menggunakan Code Snippet,  yang ada pada flash versi Adobe Flash CS5 ke atas, kita dapat membuat animasi tanpa perlu memahami scriptnya. 

Pada tutorial pembuatan animasi dengan AS3 ini, saya menggunakan program Flash CS6. Langsung saja, kita mulai :
1. Buka lembar kerja baru (gunakan Ctrl + N) dan pilih ActionScript 3,0 kemudian klik OK.
ActionScript 3.0



















2. Buatlah baling-baling, as, maupun tiangnya. Perhatikan gambar berikut.
Obyek As berbentuk lingkaran diletakkan pada layer paling atas.
Obyek baling-baling diletakkan pada layer di bawahnya
Obyek tiang diletakkan pada layer paling bawah
(Untuk cepatnya, bikin obyek baling-balingnya saja)
ActionScript 3.0

3. Pilih obyek baling-baling, kemudian tampilkan panel Code Snippets melalui Windows - Code Snippets. Seperti gambar berikut.
Code Snippets ActionScript 3.0



















4. Klik simbol panah di sebelah folder Animation dan pilih perintah yang akan dipasang pada obyek baling-baling. Untuk kebutuhan animasi kali ini, akan dipilih Rotate Continuosly. 

Code Snippets ActionScript 3.0
















5. Dobel klik Rotate Continuosly. Kemudian akan muncul tampilan sebagai berikut.
Code Snippets ActionScript 3.0
Maksud dari komentar tersebut adalah obyek yang dipilih harus dirubah dalam bentuk movie klip agar dapat diberikan kode snippet. Program flash secara otomatis akan mengubah obyek yang dipilih (baling-baling) menjadi movie klip dan diberikan instance name-nya. Baru nanti diberikan code snippet-nya. Klik OK ata Cancel untuk membatalkan. Tentunya klik OK untuk melanjutkan.
Kemudian akan tampil perintah dalam panel Actions.
Code Snippets ActionScript 3.0




















6. Demikian juga, jika diperhatikan ada tambahan layer Action seperti gambar.
Code Snippets ActionScript 3.0







Hasilnya adalah sebagai berikut.


Klik  di sini untuk mendownload .fla dan .swf-nya

Bagi yang tidak mau menggunakan code snippets, bisa saja mengkopi code script-nya dengan menghilangkan yang tidak diperlukan.
Intinya : bikin obyek, kemudian ubah obyek dalam movie clip. Jangan lupa kasih instance name. Bikin layer, misalnya kasih nama Action. Dan masukkan kode berikut :

baling_mc.addEventListener(Event.ENTER_FRAME, rotasi);

function rotasi(event:Event)
{
baling_mc.rotation += 10;
}

Kode ini saya dapatkan dari code snippets tutorial di atas. Komentarnya dihapus, serta ada beberapa bagian yang diganti (warna merah).
Perhatikan juga angka 10, yang menunjukkan kecepatan rotasinya. Ubahlah angka 10 tersebut untuk mendapatkan kecepatan putar yang diiinginkan.

Demikian tutorial membuat animasi menggunakan ActionScript 3.0 menggunakan Flash, khususnya untuk membuat animasi rotasi. Terima kasih semoga postingan ini bermanfaat bagi kita semua.
Posted by Ais Production
Ais Production Updated at: 7:27 PM

Friday, January 30, 2015

Membuat Animasi Guide Menggunakan Flash

Membuat Animasi Guide Menggunakan Flash

Membuat animasi guide bisa dilakukan dengan mudah menggunakan flash. Animasi guide dapat diartikan sebagai animasi yang mengikuti suatu lintasan atau alur yang telah ditentukan. Berbagai jenis animasi dapat dibuat dengan menggunakan animasi ini, misalnya animasi bumi mengitari matahari, animasi benda yang bergerak berubah-ubah dan lain-lain.

Kalau sudah siap, mari buka program flash yang kita punya bisa versi macromedia maupun versi flash. Untuk tutorial membuat animasi guide ini menggunakan Adobe Flash CS6.
1. Buka lembar kerja baru
2. Klik kanan Layer 1 dan pilih Add Classic Motion Guide

Animasi guide menggunakan flash












Tampilan layer hasil dari penambahan  Add Classic Motion Guide

Animasi guide menggunakan flash










3. Buatlah garis bebas saja, misalnya garis berlekuk-lekuk yang akan dijadikan sebagai guide. Tentunya garis tersebut diletakkan pada frame 1 layer Guide : Layer 1
Animasi guide menggunakan flash
Masih  dalam Guide : Layer 1, klik kanan frame 40 kemudian pilih Insert frame. Langkah ini digunakan untuk memperpanjang tampilan garis lengkung hingga frame 40.
4. Buatlah obyek, misalnya berbentuk bola pada frame 1 Layer 1.Pada frame yang sama, klik kanan frame 40 dan pilih Insert Keyframe. 
Letakkan obyek bola tersebut pada ujung awal garis lengkung yang dijadikan guide.
Pada frame 40 pindahkan posisi obyek bola tersebut. Kemudian letakkan obyek bola tersebut pada ujung garis lengkung yang dijadikan guide.
Animasi guide menggunakan flash

5. Di antara frame 1 - 40 pada Layer 1, klik kanan layer tersebut dan pilih Create Classic Tween.

Animasi guide menggunakan flash

Posted by Ais Production
Ais Production Updated at: 6:13 PM

Membuat Animasi Masking Menggunakan Flash

Membuat Animasi Masking Menggunakan Flash


Membuat animasi masking bisa dilakukan dengan mudah menggunakan program flash, baik flash versi lama maupun versi adobe. Dilihat dari asal katanya yaitu mask = topeng, bolehlah kalau masking diartikan dengan menutupi. Karena memang prinsip dari animasi masking ini adalah bagaimana menampilkan bidang yang tertutup serta menyembunyikan bagian yang terbuka.

Kalau sudah siap, mari kita buka program flashnya.
1. Buka lembar kerja baru
2. Tambahkan layer baru sehingga di time line terdapat 2 buah layer, yaitu Layer 1 dan Layer 2.
3. Ubahlah nama layer 1 dan layer 2 dengan nama  "Obyek" dan "Masking"
Perhatikan gambar berikut.
Animasi masking menggunakan flash








4. Klik pada frame 1 layer "Obyek", kemudian buat teks "Adobe Flash Professional CS6". (Obyeknya berupa teks saja ya?)
5. Perpanjang teks "Adobe Flash Professional CS6" sampai ke frame 30.
Caranya klik kanan frame 30 dan pilih Insert Frame seperti tampilan gambar berikut.
Animasi masking menggunakan flash










6. Sekarang kita siapkan layer maskingnya. Pada layer masking buatlah sebuah persegi panjang, dan letakkan di sebelah kiri teks "Adobe Flash Professional CS6".
Jangan lupa ubahlah persegi panjang yang dibuat menjadi symbol-graphic atau Movie Clip.
7. Klik kanan frame 30 layer "Masking" kemudian pilih Insert Keyframe untuk membatas gerak obyek. Geser obyek persegi panjang tersebut sampai posisi sebelah kanan teks.
8. Di antara frame 1 - 30 layer "Masking" klik kanan frame, dan pilih Create Classic Tween.
9. Langkah selanjutnya, berilah perintah masking pada layer "Masking". Klik kanan pada layer "Masking" dan pilih Mask.
Perhatikan gambar berikut:
Animasi masking menggunakan flash
10. Kalau sudah siap, publish hasilnya atau tekan Ctrl + enter untuk melihat hasilnya.
Begini hasilnya.



Demikianlah cara membuat animasi masking menggunakan flash. Moga-moga postingan ini bermanfaat. Contoh animasi animas bisa melihat postingan yang lain di blog ini.

Download Cara Membuat Animasi Menggunakan Flash dalam .fla dan .swf

Posted by Ais Production
Ais Production Updated at: 12:28 AM

Thursday, January 29, 2015

Pengenalan Flash dari versi Macromedia sampai versi Adobe

Pengenalan Flash dari versi Macromedia sampai versi Adobe


Sebelum belajar lebih jauh mengenai pembuatan animasi, perlu pengenalan terlebuh dulu mengenai flash baik dalam versi macromedia maupun dalam versi adobe. Sejak tahun 1996, flash begitu populer yang menjadikan suatu website menjadi lebih menarik dan interaktif. Dulunya, software ini dikembangkan oleh Macromedia sebelum akhirnya diakuisi..apa ya istilahnya...sebelum dikembangkan dan dikelola oleh Adobe.

Perkembangan Versi Flash 

  • FutureSplash Animator (10 April 1996)
  • Macromedia Flash 1 (Desember 1996)
  • Macromedia Flash 2 (Juni 1997)
  • Macromedia Flash 3 (31 Mei 1998)
  • Macromedia Flash 4 (15 Juni 1999)
  • Macromedia Flash 5 (24 Agustus 2000) - ActionScript 1.0
  • Macromedia Flash MX (versi 6) (15 Maret 2002)
  • Macromedia Flash MX 2004 (versi 7) (9 September 2003) - ActionScript 2.0
  • Macromedia Flash MX Professional 2004 (versi 7) (9 September 2003)
  • Macromedia Flash Basic 8 (13 Desember 2005)
  • Macromedia Flash Professional 8 (13 Desember 2005)
  • Adobe Flash CS3  - ActionScript 3.0
  • Adobe Flash CS4 (15 Oktober 2008)
  • Adobe Flash CS5 (2010)
  • Adobe Flash CS5.5 (2011)
  • Adobe Flash CS6 (2012)
  • Adobe Flash CC (2013)
Macromedia Flash 8 merupakan versi terakhir yang masih menggunakan nama "Macromedia". Setelah diakuisisi oleh Adobe System, pada tanggal 3 Desember 2005, maka produk flash berganti nama menjadi Adobe Flash.

Pada Adobe Flash CS3, sudah didukung ActionScript 3.0 yang lebih powerfull kerimbang versi sebelumnya. Pada versi selanjutnya, yaitu Adobe Flash CS4 terdapat fitu s inverse kinematics (bones), manipulasi obyek 3D, animasi berbasis obyek dan pengembangan lebih lanjut dari ActionScript 3.0. Pada versi Flash CS5, terdapat code snippet yang membantu membuat kode dengan cepat. Demikian juga pada versi selanjutnya, flash semakin powerfull saja.

Bandingkan tampilan dari Macromedia Flash 8 dengan Adobe Flash CS6 sebagai berikut:
Macromedia Flash 8
 Adobe Flash CS6

Mau pilih versi berapa, itu kembali kepada kebutuhan kita sendiri. Untuk pengenalan, menggunakan versi berapa pun tidak masalah. Tetapi untuk mendapatkan hasil yang maksimal, pilihlah versi Flash yang terbaru. Apalagi sekarang ada Air for Android, ya bagi yang ingin membuat aplikasi aplikasi mobile, Flash versi CS 5.5 ke atas direkomendasikan. Salah-satu syaratnya siap-siap bermigrasi dari ActionScript 2.0 ke ActionScript 3.0.

Jadi, apa saja sih yang bisa kita lakukan dengan Flash?


  • Menggambar (baik gambar kartun maupun realistis)
  • Membuat animasi
  • Membuat game
  • Membuat iklan
  • Membuat profil 
  • Membuat iklan
  • Membuat aplikasi mobile
  • Membuat website (baik full flash maupun kolaborasi dengan program lain)
  • Membuat presentasi pembelajaran maupun multimedia pembelajaran interaktif
  • Aplikasi lain seperti membuat player, menu interaktif, arloji keren, dan berbagai bentuk animasi lain.
Demikian postingan mengenai pengenalan flash dari versi Macromedia maupun versi Adobe. Untuk detailnya bisa juga membaca postingan terdahulu mengenai :

Maupun postingan lain tentang flash di blog ini.

Terima kasih, atas kunjungan sobat semua.
Posted by Ais Production
Ais Production Updated at: 10:36 PM