KK 11 Gambar 2D Multimedia

Membuat Company Profile dengan Flash [AS-2]

Tutorial Flash Membuat Company Profile. Bingung untuk membuat company profile dengan Flash sederhana dan dapat dibuat dalam waktu yang singkat? Kita dapat belajar untuk mencoba membuatnya dengan mudah dan singkat serta perlu untuk dikembangkan lebih lanjut lagi agar terlihat lebih kompleks dan menarik lagi. Okey, langsung saja untuk mulai tutorial flash Membuat Company Profile Sederhana. Tutorial Flash Membuat Company Profile Sederhana yang akan dibahas di sini adalah menggunakan Adobe Flash CS4 atau CS5. Ikuti langkah-langkah berikut ini:

Tutorial Flash Membuat Company Profile

Tutorial flash membuat company profile yang Pertama, Buat file baru Flash File (ActionScript 2.0). Ubah ukuran Stage pada Properties menjadi 800 x 600 dan FPS=12 serta beri warna Background dengan warna abu-abu (#999999).Selanjutnya kita akan membuat empat buah tombol. Klik Rectangle Tool (R) buatlah objek persegi. Pilih objek persegi lalu ubah ukuran pada Properties Position And Size = 120 x 40.Klik Paint Bucket Tool, beri warna gradasi Linier dari atas ke bawah dengan warna dari putih ke hitam.

Kemudian pilih objek dengan Selection Tool (V) lalu ubah ke symbol button tekan F8, beri nama ‘home’ lalu pilih Type = Button tekan OK.

Objek masih dalam keadaan terpilih, pilih menu Edit > Edit Symbol. Setelah masuk ke mode edit symbol, Klik Text Tool (T) buat Static Text dengan ukuran 20pt dan warna teks putih, buat teks HOME lalu posisikan ditengah objek persegi.

Klik di Frame Over lalu masukan Keyframe (F6). Pilih teks lalu ubah ukuran menjadi 22pt dan ubah warna menjadi hitam.

Klik di Frame Down masukan Keyframe dan ubah ukuran teks menjadi 20 dan ubah warna menjadi putih.

Tekan tombol Ctrl+E untuk kembali ke modus edit document. Pilih tombol home pada Library (jika belum terbuka, pilih menu Window > Library).

Klik kanan pada tombol home di Library lalu pilih Duplicate, ubah nama menjadi profile, tekan OK. Maka dalam Library terdapat dua buah tombol.

Pilih tombol profile lalu seret masukan kedalam Stage dan posisikan seperti gambar berikut.

Pilih tombol profile pada Stage lalu pilih menu Edit > Edit Symbol. Klik di Frame UP lalu ubah teks menjadi PROFILE, ubah juga teks HOME menjadi PROFILE pada Frame Over dan Down.Pilih tombol profile pada Library lalu lakukan Duplicate dan beri nama galery. Seret masukan tombol ke dalam Stage dengan posisi dibawah tombol profile.

Klik tombol galery lalu masuk ke modus edit symbol. Ubah semua tulisan yang ada pada Frame Up, Over dan Down menjadi GALERY. Setelah selesai, kembali ke modus edit document.

Lakukan Duplicate pada tombol dalam Library dan beri nama contact. Seret tombol contact ke dalam Stage dengan posisi di bawah tombol galery.

Pilih tombol contact lalu masuk ke modus edit symbol, ubah semua teks pada Frame Up, Over dan Down menjadi CONTACT. Kembali ke modus edit document dan lihat hasilnya.

Kemudian klik Rectangle Tool (R), pada Rectangle Option masukan nilai 15 agar objek mempunyai sudut tumpul. Buat objek persegi tanpa Stroke color dan Fill color warna hitam di Stage. Lalu pilih objek persegi dengan Selection Tool (V), atur ukuran persegi pada Properties Position And Size, atur pengaturan seperti gambar berikut.

Objek masih dalam keadaan terpilih, tekan F8 untuk merubah ke simbol, beri nama ‘info dan pilih Type = Movie Clip.

Dengan objek masih dalam keadaan terpilih, pilih menu Edit > Edit Symbol untuk masuk ke modus edit symbol.

Klik di Frame 1, tekan tombol F6 sebanyak tiga kali untuk memasukan Keyframe. Sehingga terdapat empat buah Keyframe pada Timeline.

Kemudian klik di Frame 1, lalu dengan Text Tool tuliskan kalimat ‘Selamat Datang di Halaman Home’ dengan jenis font Arial bold (tebal), size=22, warna=abu-abu/putih dan Align Center. Posisikan seperti gambar berikut.

Klik di Frame 2 lalu dengan pengaturan teks yang sama, tuliskan ‘Selamat Datang di Halaman Profile’. Pada Frame 3 tuliskan ‘Selamat Datang di Halaman Galery’ dan di Frame 4 tuliskan ‘Contact Me’.Klik lagi di Frame 1 lalu buka panel Actions kemudian tuliskan script berikut.stop();

Kembali ke modus edit document.Klik atau pilih Movie Clip info lalu pada Properties di bagian Instance Name tuliskan ‘info’.

Kemudian pilih tombol HOME lalu buka panel Actions, tuliskan script berikut.on (release) {            info.gotoAndStop(1);}

Kemudian untuk script pada ketiga tombol lainnya secara berurutan adalah sebagai berikut.Tombol PROFILE :on (release) {            info.gotoAndStop(2);

}

Tombol GALERY :on (release) {            info.gotoAndStop(3);}

Tombol CONTACT :on (release) {            info.gotoAndStop(4);}

Untuk melihat hasilnya tekan Ctrl+Enter. Klik tombol Profile maka halaman akan benuju ke frame halaman profile, begitu juga jika klik tombol yang lainnya maka akan menuju ke sebuah informasi sesuai dengan tombolnya.

Hasil Akhir Dari Company Profile Flash SederhanaAnda dapat memodifikasi dan mengembangkan dari tutorial dasar yang Saya posting diatas. Selamat berkarya dan semoga menjadi manfaat bagi Anda. Jika Anda ingin melihat tutorial membuat company profile flash dengan AS 3 silahkan lihat juga : Membuat Company Profile Flash CS 5 dengan ActionScript 3.0Terima kasih

Company Profile Flash CS 5 [AS-3]

Tutorial membuat company profile flash CS 5. Kali ini Saya akan memberikan tutorial tentang bagaimana membuat Company Profile sederhana dengan Adobe Flash CS5 menggunakan ActionScript 3.0.

Tutorial Membuat Company ProfileBerikut adalah langkah-langkah untuk membuat company profile dengan adobe Flash cs5.

1. Buka file flash baru, denga pilihan ActionScript 3.0

Pengaturan File Flash

2. Setelah lembar kerja baru Flash terbuka, selanjutnya buatlah objek persegi dengan Rectangle Tool (R), buat persegi pada Stage dengan warna objek hitam dan posisikan seperti gambar berikut.

Posisi objek rectangle pada Stage

3. Pilih objek persegi (rectangle) kemudian ubah ke simbol dengan cara pilih menu Modify > Convert to Symbol… (F8), beri nama info dan pilih type = Movie Clip.

Mengubah ke Symbol Movie Clip

4. Pastikan objek movie clip tadi dalam keadaan terpilih, lalu buka panel Properties, beri nama “info” (tanpa tanda petik) pada Instance name.

Memberikan instance name pada symbol

5. Selanjutnya edit symbol movie clip info tadi dengan cara pilih objek lalu klik kanan dan pilih Edit in Place untuk masuk kedalam modus edit simbol. Setelah masuk ke modus edit simbol, klik di Frame 1 lalu tekan tombol F9 untuk membuka panel Action, lalu ketikan script :stop();

Tutup panel Action tersebut, klik di frame 2 lalu klik kanan pilih Insert Keyframe, ubah warna objek menjadi hijau.

Objek pada frame 2

Klik di frame 3, klik kanan dan pilih Insert Keyframe, ubah warna objek menjadi warna biru, dan untuk frame 4 ubah warna menjadi merah.Setelah keempat frame terisi oleh objek persegi dengan warna yang berbeda, kembali ke Scene 1 dengan cara pilih menu Edit > Edit Document untuk kembali ke scene utamanya.Selanjutnyanya adalah membuat empat buah tombol untuk dapat menavigasikan keempat objek tersebut yang berada pada simbol movie clip info.Buat objek persegi kecil dengan Rectangle Tool (R) dan beri warna hitam, buat objek pada Stage dan posisikan seperti gambar berikut.

Objek rectangle pada Stage

Pilih objek rectangle kecil, kemudia ubah menjadi simbol. Pilih menu Modify > Convert to Symbol.. (F8) lalu berikan nama “home” dan pilih type Button.

Mengubah ke simbol button

Objek simbol button masih dalam keadaan terpilih, edit simbol tersebut untuk masuk ke modus edit simbol. Lalu klik di Frame UP, dengan Text Tool (T) tuliskan “HOME” dengan warna teks putih dan size = 20. Posisi teks seperti gambar berikut.

Teks pada tombol home

Selanjutnya adalah membuat ketiga tombol yang tersisa yaitu tombol PROFIL, GALERI dan KONTAK. Buatlah ketiga tombol tersebut dengan cara yang sama seperti cara membuat tombol HOME tadi. Kemudian posisikan tombol-tombolnya seperti pada gambar berikut.

Posisi tombol pada stage

Setelah keempat tombol diatas dibuat, selanjutnya adalah memberikan instance name pada keempat tombol tersebut untuk membuat variable pemanggil pada actionScriptnya. Berikut adalah nama-nama instance pada tiap-tiap tombolnya:

instance name home

tombol HOME instance name = hometombol PROFIL instance name = profiltombol GALERI instance name = galeritombol KONTAK instance name = kontakSemua instance name telah diberikan, kemudian tambahkan Layer baru dengan cara pilih menu Insert > Timeline > Layer, ubah nama layer menjadi Action. Klik di frame 1, buka panel Action tekan F9 pada keyboard dan tuliskan script berikut:

import flash.events.MouseEvent;stop();home.addEventListener(MouseEvent.CLICK, tombolHome);function tombolHome(event:MouseEvent):void{info.gotoAndStop(1);}profil.addEventListener(MouseEvent.CLICK, tombolProfil);function tombolProfil(event:MouseEvent):void{info.gotoAndStop(2);}galeri.addEventListener(MouseEvent.CLICK, tombolGaleri);function tombolGaleri(event:MouseEvent):void{info.gotoAndStop(3);}kontak.addEventListener(MouseEvent.CLICK, tombolKontak);function tombolKontak(event:MouseEvent):void{info.gotoAndStop(4);}

Tekan Ctrl + Enter untuk melihat hasilnya, dan simpanlah hasil pekerjaan Anda. Selamat berkreasi dan Anda juga dapat memodifikasinya dengan menambahkan teks informasi atau gambar pada setiap halaman tersebut.

Flash : Memasukan Sound ke dalam Flash

Sound merupakan salah satu bagian penting dalam suatu aplikasi flash. Berikut adalah cara memasukkan sound ke dalam file flash.

Seperti biasa buat sebuah dokumen flash baru. Kemudian kita klik menu File > Import > Import to Stage, maka akan muncul dialog

seperti berikut.

import sound

kemudian pilih file yang ingin dimasukkan, kemudian klik open. Jika sound yang kita import sangat besar, maka akan tampil progres bar.

Terkadang file tidak bisa kita import, hal ini dikarenakan file yang dimasukkan kurang sempurna, karena flash mengharapkan file yang sempurna.

Jika sudah berhasil, sound tersebut masuk ke library, untuk menampilkan library, tekan F11 pada keyboard.

panel library

Agar suara dapat dijalankan pada flash, suara kita perlu untuk dimasukkan ke timeline. Yaitu, klik pada frame 1, kemudian tekan Ctrl + F3 untuk membuka panel properties,

kemudian ganti sound menjadi suara yang tadi kita importkan.

properties sound

Selesai

Sumber : flashindonesia.com

Flash : Membuat Preloader

Preloader merupakan hal yang tidak dapat dipisahkan ketika kita mendeploy file swf kita ke internet. Walaupun ukurannya kecil, namun kita perlu untuk memberikan preloader agar user dapat mengerti sejauh mana konten swf-nya telah terdownload.Berikut ini yang akan kita buat. (Jika loading tidak tampil, maka refresh halaman ini)Baik, kita akan mulai membuat preloader.

Langkah 1 : Desain FramePertama-tama, kita buat 2 buah keyframe pada timeline, masing-masing beri label dengan teks Preloader dan Main. Untuk membuat Keyframe baru, cukup klik kanan dan pilih Insert Keyframe. Untuk memberikan label, cukup klik pada frame, kemudian munculkan panel Properties, kemudian ketikkan nama labelnya.

frame

Langkah 2 : Desain PreloaderSekarang, kita klik pada frame 1, kemudian kita gambar sebuah kotak dan jadikan movieclip dengan titik registrasi/registration point berada di sebelah kiri. Cara untuk menjadikan movieclip cukup mudah, yaitu pastikan kotak masih dalam keadaan terseleksi, kemudian klik kanan dan pilih Convert to Symbol dan pilih Movieclip.

convert to symbol

Kemudian klik pada movieclip yang telah dibuat, sekarang kita memberikan instance namenya. Caranya : pastikan movieclip masih dalam keadaan terseleksi, kemudian tekan Ctrl + F3 untuk menampilkan panel Properties.

preloader_mc

Langkah 3 : Memberi KontenAgar loading terlihat, maka, setidaknya ukuran file harus besar. Tapi kalo kita sudah mem-publish game kita, yaa lebih baik ukurannya kecil. File harus besar di sini maksudnya hanya sebagai tes saja untuk melihat progress ketika men-download. Cara untuk memberikan konten adalah mengimport gambar berukuran besar ke frame 10.

Cara memasukkan gambar

Langkah 4 : Scripting…

Langkah terakhir adalah langkah terpenting Ketikkan actionscript berikut pada frame 1 :

01 stop();

02 //memberikan event saat selesai loading

03 this.loaderInfo.addEventListener(Event.COMPLETE, selesaiLoading);

04 //memberikan event saat sesudah loading

05 this.loaderInfo.addEventListener(ProgressEvent.PROGRESS, sedangLoading);

06 function sedangLoading(e:ProgressEvent):void {

07     //persentase yang sudah diload (nilai prosentase yaitu 0 s/d 1)

08     var prosentase:Number = (e.bytesLoaded / e.bytesTotal );

09     //mengubah ukuran dari preloader tergantung pada persentase

10     preloader_mc.scaleX = prosentase;

11 }

12 function selesaiLoading(e:Event):void {

13     //setelah selesai, pergi ke frame Main

14     gotoAndStop("Main");

15 }

Jika kita ingin mensimulasi download tanpa mengupload swf terlebih dahulu, kita cukup melakukan setting pada flash player seperti berikut :

setting untuk preloader

Centang Bandwidth profiler untuk menunjukkan ukuran dari tiap2 frame.Centang Streaming Graph untuk menampilkan grafik streaming.Pilih Download Settings untuk memilih kecepatan koneksi internet yang disimulasikan.Dan tekan Ctrl + Enter kembali

Sumber : flashindonesia.com

Kuis sering sekali kita butuhkan ketika membuat sebuah media pembelajaran dengan flash. Di sini kita tidak akan membuat kuis dari template yang ada di flash, meskipun template tersebut

sangat mudah dikostumisasi, namun yang saya tawarkan di sini adalah membuat kuis dengan data yang diambil dari XML.

Kuis ini dibuat dengan menggunakan Actionscript 2.0, sehingga kita dapat menggunakan Macromedia Flash 8 atau Flash CS 3 dan lebih.

Mari kita mulai pembuatannya.

Langkah awal adalah membuat layout untuk kuis, kuis ini hanya berisi multiple choice (pilihan ganda), jadi di sini saya menggunakan radio button.

Untuk mengambil radio button, kita cukup mengambilnya pada menu Window -> Components, atau cukup tekan Ctrl + F7.

Components

Sekarang akan muncul panel seperti berikut ini, pilih radio button, drag (seret) ke dalam stage sebanyak 4 buah.

RadioButton

Rapikan masing-masing radio button, kemudian berikan Instance Name untuk setiap radio button yang ada, yaitu radio1, radio2, radio3, dan radio4.

Instance Name

Sekarang buat Dynamic Text dengan Text Tool, letakkan di atas radio button, dynamic text ini berguna sebagai soal.

Soal

Jangan lupa untuk meng-embed-kan font, hal ini penting, karena jika tidak, maka font kita tidak akan tampil pada komputer yang tidak memiliki font tersebut. Lebih jelasnya dapat dilihat di sini : Memasukkan Font ke dalam Flash.

Sekarang kita menambahkan frame lagi, sehingga total framenya ada 2. Klik kanan pada frame 2, pilih insert blank keyframe. Sehingga hasilnya seperti ini:

Insert Blank KeyFrame

Simpan file flash ini sekarang pada suatu folder. Buat sebuah file data.xml yang berada satu folder dengan file flash kita.

data.xml

Isi file data.xml dengan teks berikut :

data.xml

Sekarang saatnya kita mengetik scriptnya klik pada frame 1, kemudian tekan F9. Ketikkan script berikut :

kuis_as_part1

Koding di atas menjelaskan jika soal habis, maka kita menuju frame 2. Nah, berarti sekarang klik frame 2, tambahkan sebuah dynamic text dengan nama variabel yaitu nilai. Jangan lupa untuk tidak mencentang Auto Kern.

Nilai

Kurang lengkap rasanya jika tidak kita berikan tombol kembali. Buat tombol kembali seperti di bawah ini, beri instance name berupa kembali_btn.

Tombol Kembali

Karena tombol membutuhkan script, maka kita tambahkan saja di frame 2. Klik frame 2 dan tekan F9.

1 kembali_btn.onRelease=function(){

2     gotoAndStop(1);

3     counter = 0;

4     nilai = 0;

5     prosesSoal();

6 }

Sekarang test movienya.. Silakan dilihat di Sini

Catatan : XML sewaktu-waktu dapat diedit tanpa harus melakukan publish pada file flash kita.

File .fla dapat dibuka dengan Adobe Flash CS 3.