Membuat Aplikasi WebCam Dengan Adobe Flash CS5

Membuat Aplikasi WebCam Dengan Adobe Flash CS5

Membuat Aplikasi WebCam Dengan Adobe Flash CS5

Hampir semua laptop yang ada sekarang memiliki fitur webcam sebagai bawaannya. Seberapa sering kita memanfaatkannya? Aplikasi Online yang menyediakan Live Streaming webcam pun rupanya tidak jauh berbeda halnya dengan aplikasi streaming video, dimana sebagian besar menggunakan Flash sebagai platformnya. Hanya saja untuk mentransmisikannya, diperlukan Flash Media Server atau alternatifnya, Red5.

Pada flash kita dapat menembus kamera dengan cara membuat objek sebuah camera, kemudian dengan methodgetCamera() gambar yang ditangkap oleh kamera di komputer kita menjadi sebuah live video. Nah, untuk melihat hasil video tersebut secara local (tanpa melalui koneksi streaming), kita dapat meng-attach –nya di sebuah objek movie yang kita buat. Langkah-langkahnya adalah sebagai berikut:

1. Buat sebuah file flash baru dengan action script 3.0. Caranya klik menu File > New > General > ActionScript 3.0. 
   
2. Pada panel, Properties tuliskan Webcam di kolom document class. Bila muncul warning abaikan saja, karena definisi class ini akan kita buat nanti. 
   
3. Simpan file flash ini, klik menu File > Save As.
4. Buatlah sebuah file ActionScript eksternal yang mendefinisikan class dokumen kita, caranya klik menu File > New > General > ActionScript File. 
   
5. Tuliskan Script berikut pada pada file ActionScript tersebut:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

package {     import flash.display.Sprite;     import flash.media.Camera;     import flash.media.Video;     public class Webcam extends Sprite     {         private var webcam:Video = new Video();         private var camera:Camera;         private var camQuality:int = 80;         private var fps:int = 30;         public function Webcam():void {             webcam.width = 640;             webcam.height = 480;             camera = Camera.getCamera();             camera.setQuality(0, camQuality);             camera.setMode(webcam.width, webcam.height, fps);             webcam.attachCamera(camera);             this.addChild(webcam);         }     } }

Perhatikan code diatas, disini kita men-settings ukuran video pada layar sebesar 640 x 480 dengan kualitas 80, dan nilai FPS sebesar 30. Sederhana bukan?
6. Klik menu File > Save As. Simpan file ini dengan nama Webcam.as pada folder yang sama dengan tempat kita menyimpan file Flash sebelumnya.
7. Sekarang kembali ke File Flash untuk mengecek settingan publish, dan kemudian mem-publisnya. Klik menu File > Publish Settings. 
   
8. Checklish pilihan HTML untuk mendapatkan hasil SWF yang di embed ke sebuah file HTML, agar kita dapat melihat hasilnya nanti melalui web browser. 
   
9. klik pilihan publish, atau tekan Shift+F12 pada keyboard. 
   
10. lihat file HTML yang keluar, buka file ini dengan web broser yang kita punya. Jika sukses, maka pada awal tampilan Flash keluar akan menunjukkan sebuah dialog konfirmasi , ini muncul karena Flash Player memiliki prosedur standar untuk menjaga keamanan dan privasi dimana pada flash movie ini kita mencoba untuk meng-akses kamera webcam yang ada di komputer. Klik Allow untuk melanjutkan. 
    
11. Akhirnya, wajah anda yang tersorot webcam pun muncul di browser jika anda memiliki fasilitas Cam. 
    

Bagi yang ingin mendapatkan Source File secara lengkap bisa di download di: http://v5.indowebster.com/webcam_1.html.

Membuat Aplikasi WebCam Dengan Adobe Flash CS5

Hampir semua laptop yang ada sekarang memiliki fitur webcam sebagai bawaannya. Seberapa sering kita memanfaatkannya? Aplikasi Online yang menyediakan Live Streaming webcam pun rupanya tidak jauh berbeda halnya dengan aplikasi streaming video, dimana sebagian besar menggunakan Flash sebagai platformnya. Hanya saja untuk mentransmisikannya, diperlukan Flash Media Server atau alternatifnya, Red5.

Pada flash kita dapat menembus kamera dengan cara membuat objek sebuah camera, kemudian dengan methodgetCamera() gambar yang ditangkap oleh kamera di komputer kita menjadi sebuah live video. Nah, untuk melihat hasil video tersebut secara local (tanpa melalui koneksi streaming), kita dapat meng-attach –nya di sebuah objek movie yang kita buat. Langkah-langkahnya adalah sebagai berikut:

1. Buat sebuah file flash baru dengan action script 3.0. Caranya klik menu File > New > General > ActionScript 3.0. 
   
2. Pada panel, Properties tuliskan Webcam di kolom document class. Bila muncul warning abaikan saja, karena definisi class ini akan kita buat nanti. 
   
3. Simpan file flash ini, klik menu File > Save As.
4. Buatlah sebuah file ActionScript eksternal yang mendefinisikan class dokumen kita, caranya klik menu File > New > General > ActionScript File. 
   
5. Tuliskan Script berikut pada pada file ActionScript tersebut:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

package {     import flash.display.Sprite;     import flash.media.Camera;     import flash.media.Video;     public class Webcam extends Sprite     {         private var webcam:Video = new Video();         private var camera:Camera;         private var camQuality:int = 80;         private var fps:int = 30;         public function Webcam():void {             webcam.width = 640;             webcam.height = 480;             camera = Camera.getCamera();             camera.setQuality(0, camQuality);             camera.setMode(webcam.width, webcam.height, fps);             webcam.attachCamera(camera);             this.addChild(webcam);         }     } }

Perhatikan code diatas, disini kita men-settings ukuran video pada layar sebesar 640 x 480 dengan kualitas 80, dan nilai FPS sebesar 30. Sederhana bukan?
6. Klik menu File > Save As. Simpan file ini dengan nama Webcam.as pada folder yang sama dengan tempat kita menyimpan file Flash sebelumnya.
7. Sekarang kembali ke File Flash untuk mengecek settingan publish, dan kemudian mem-publisnya. Klik menu File > Publish Settings. 
   
8. Checklish pilihan HTML untuk mendapatkan hasil SWF yang di embed ke sebuah file HTML, agar kita dapat melihat hasilnya nanti melalui web browser. 
   
9. klik pilihan publish, atau tekan Shift+F12 pada keyboard. 
   
10. lihat file HTML yang keluar, buka file ini dengan web broser yang kita punya. Jika sukses, maka pada awal tampilan Flash keluar akan menunjukkan sebuah dialog konfirmasi , ini muncul karena Flash Player memiliki prosedur standar untuk menjaga keamanan dan privasi dimana pada flash movie ini kita mencoba untuk meng-akses kamera webcam yang ada di komputer. Klik Allow untuk melanjutkan. 
    
11. Akhirnya, wajah anda yang tersorot webcam pun muncul di browser jika anda memiliki fasilitas Cam. 
    

Bagi yang ingin mendapatkan Source File secara lengkap bisa di download di: http://v5.indowebster.com/webcam_1.html.

Trik Mask dalam Adobe Flash

Trik Mask dalam Adobe Flash

Trik Mask dalam Adobe Flash

Mask Effect yang sering kita jumpai dalam Flash merupakan salah satu fitur yang diberikan oleh Adobe Flash Professional CS5 untuk menutupi sebagian bentuk Objek. Dalam tutorial ini di bahas pemanfaatan mask effect dengan perpaduan dragging. 

1. Sebagai langkah awal, siapkan dua buah foto atau gambar. Buat dokumen baru dan pilih New > Flash File (Action Script 2.0).
2. Import Foto atau gambar yang sudah disiapkan, pilih File > Import To Stage (Ctrl+R). 
3. Tekan Ctrl+J untuk membukan Document Settings. Selanjutnya, sesuaikan ukuran gambar anda, persiapkan dengan background, dan ubah Frame rate menjadi 30. 
4. Buat gambar menjadi Movie Clip dengan cara tekan V dan pilih gambar yang sudah di-Import kemudian klik kanan dan pilih Convert To Symbol atau tekan F8. 
5. Ganti nama Instance name pada panel Properties untuk langkah awal membuat Mask lewat Action Script, Ganti dengan nama “myImage”.
6. Buat Layer baru dan beri nama “mask”.
7. Sekarang memasuki pembuatan mask movie clip. Buat persegi panjang dengan menekan R atau pun kluk Rectange Tool pada toolbar (Anda dapat mengganti persegi panjang dengan lingkaran ataupun bentuk lain sesuai keinginan anda). Ubah menjadi Movie Clip dengan cara yang sama pada step ke-4 dan beri nama “masking rectangle”.
8. Ganti Instance name dan beri nama “myMask”.
9. Agar Action Script dapat berjalan dengan lancar, cek posisi mask dan ganti dengan angka nol pada setiap akhir angka kuadrat. 
10. Tahap berikutnya adalah penulisan ActionScript yang diawali dengan membuat layer baru khusus untuk penulisan Script. Beri nama “action”. Pilih Windows > Action.

    1	myImage.setMask(myMask);

    
11. Tahap terakhir untuk meng-aktifkan drag pada mask, Anda dapat memasukkan kode berikut ini:

    1	myMask.onPress = function() { startDrag(this); } myMask.onRelease = function() { stopDrag();}

12. Sebagai catatan, bilamana pada awal pembuatan efek ini memilih ActionScript 3.0, Anda harus mengganti kode yang ditulis:

    1	myImage.setMask(myMask); myMask.onPress = function() { startDrag(this); } myMask.onRelease = function() { stopDrag(); }

13. Simpan dan coba movie-nya (Ctrl+Enter). Drag masking yang sudah dibuat. 

Previewnya bisa dilihat disini: http://www.youtube.com/watch?v=CQuY_7T1g6k. Selamat mencoba dan pastikan berhasil.

Trik Mask dalam Adobe Flash

Mask Effect yang sering kita jumpai dalam Flash merupakan salah satu fitur yang diberikan oleh Adobe Flash Professional CS5 untuk menutupi sebagian bentuk Objek. Dalam tutorial ini di bahas pemanfaatan mask effect dengan perpaduan dragging. 

1. Sebagai langkah awal, siapkan dua buah foto atau gambar. Buat dokumen baru dan pilih New > Flash File (Action Script 2.0).
2. Import Foto atau gambar yang sudah disiapkan, pilih File > Import To Stage (Ctrl+R). 
3. Tekan Ctrl+J untuk membukan Document Settings. Selanjutnya, sesuaikan ukuran gambar anda, persiapkan dengan background, dan ubah Frame rate menjadi 30. 
4. Buat gambar menjadi Movie Clip dengan cara tekan V dan pilih gambar yang sudah di-Import kemudian klik kanan dan pilih Convert To Symbol atau tekan F8. 
5. Ganti nama Instance name pada panel Properties untuk langkah awal membuat Mask lewat Action Script, Ganti dengan nama “myImage”.
6. Buat Layer baru dan beri nama “mask”.
7. Sekarang memasuki pembuatan mask movie clip. Buat persegi panjang dengan menekan R atau pun kluk Rectange Tool pada toolbar (Anda dapat mengganti persegi panjang dengan lingkaran ataupun bentuk lain sesuai keinginan anda). Ubah menjadi Movie Clip dengan cara yang sama pada step ke-4 dan beri nama “masking rectangle”.
8. Ganti Instance name dan beri nama “myMask”.
9. Agar Action Script dapat berjalan dengan lancar, cek posisi mask dan ganti dengan angka nol pada setiap akhir angka kuadrat. 
10. Tahap berikutnya adalah penulisan ActionScript yang diawali dengan membuat layer baru khusus untuk penulisan Script. Beri nama “action”. Pilih Windows > Action.

    1	myImage.setMask(myMask);

    
11. Tahap terakhir untuk meng-aktifkan drag pada mask, Anda dapat memasukkan kode berikut ini:

    1	myMask.onPress = function() { startDrag(this); } myMask.onRelease = function() { stopDrag();}

12. Sebagai catatan, bilamana pada awal pembuatan efek ini memilih ActionScript 3.0, Anda harus mengganti kode yang ditulis:

    1	myImage.setMask(myMask); myMask.onPress = function() { startDrag(this); } myMask.onRelease = function() { stopDrag(); }

13. Simpan dan coba movie-nya (Ctrl+Enter). Drag masking yang sudah dibuat. 

Previewnya bisa dilihat disini: http://www.youtube.com/watch?v=CQuY_7T1g6k. Selamat mencoba dan pastikan berhasil.