Breaking News

Wednesday, May 30, 2012

Picture Gallery Menggunakan Macromedia Flash 8

Tutorial ini menjelaskan mengenai cara pembuatan Picture Gallery atau photo slide show dengan menggunakan tombol interaktif untuk pergantian gambarnya.


Berikut adalah urutan langkah – langkah untuk membuat nya:
Scene 1
1.      Pengaturan Area Kerja atau Stage :
a.       Buka Buka Aplikasi Macromedia Flash pada komputer anda, kemudian pilih Flash Document kemudian OK.
b.      Setelah lembar kerja terbuka kemudian ubah ukuran stage atau lembar kerja menjadi 700 x 600 pixel
c.       Ubah Background menjadi warna hitam

2.      Memberi efek masking pada background :
a.         Import 2 gambar yang sama tetapi berbeda waran (hitam putih dan berwarna)
File >> Import >> Import to Library >> Pilih gambar >> OK
b.         Lakukan Pengaturan pada kedua gambar tersebut, sesuaikan dengan ukuran stage
c.         Lakukan Pengaturan Layer dan Frame seperti gambar berikut

·         Untuk layer background berisi gambar hitam putih, Klik kanan >> Insert Keyframe pada frame 45
·         Untuk Layer Gmbar berisi gambar berwarna, klik kanan pada frame 45 >> Insert Keyframe
·         Layer Mask berisi objeck kotak yang digunakan sebagai objek mask.
§  Pilih rectangle tool >>  buat objek kotak dengan tinggi sesuai stage
§  Atur pergerakan objek kotak tersebut, pada frame 1 posisi disebelah kiri, frame 15 posisi ndisebelah kanan, frame 30 posisi ditengah dan frame 45 perlebar ukuran hingga seukuran stage.
·         Klik kanan layer Mask >> Mask
3.      Membuat efek untuk teks “Picture Gallery”
·         Buat layer baru, beri nama Teks1
·         Klik text tol (T) Ketikkan “Picture Gallery”, Tekan F8 >> pilih Movie Clip >> OK
·         Klik ganda pada Teks ( untuk masuk ke halaman edit Movie clip)
·         Seleksi teks menggunakan selction tol >> Ctrl+B (Break Apart : Untuk memisahkan teks menjadi perhuruf/karakter) >> masih dalam keadaan terseleksi klik kanan >> Distribute to layers (Untuk memasukkan setiap karakter kedalam layer yang berbeda).
·         Blok frame 10 seluruh layer tekan F6 (untuk insert Keyframe)
·         Seleksi Frame 1 layer P sampai E >> Ctrl+K (untuk menampilkan panel Align & Info & Transform) >> Klik Align Horizontal Center>> Geser Teks Ke luar stage sebelah kiri, Klik menu Modify >> Transform >> Scale and Rotate >> Scale : 200 >> OK
·         Klik kanan pada frame 1 layer P hingga E >> Create Motion Tween, Seleksi kembali frame 1 layer P hingga E klik pada objek >> masuk ke panel properties >> Color >> Alpha : 0%
·         Lakukan hal yang lama untuk layer G hingga Y, yang berbeda hanya pengeseran ke atas bukan sampiong kiri
·         Lakukan pengaturan posisi frame seperti gambar berikut  

*Penggesaran tersebut diloakukan agar saat animasi berjalan akan muncul perkarakter

4.      Membuat efek masking pada teks “Created By :”
·         Buat layer baru dengan nama Teks2, Klik text tol >> ketikkan Created By : >> Tekan F8 >> Movie Clip >> OK
·         Klik ganda Teks >> insert frame pada frame 20 layer 1
·         Buat layer baru>> Buat objek kotak menggunakan Rectangle tool >> letaakkan sebelah kiri >> Insert keyframe pada frame 20, pindahkan sebelah kanan
·         Tukar posisi layer 1 dan 2 (layer satu atas) >> klik kanan layer 1 >> mask

*lakukan pengaturan seperti gambar diatas

5.      Memberi efek pada foto
·         Buat layer baru dengan nama Yahya> masukkan foto >> F8 >> Movie Clip >> OK
·         Klik ganda untuk masuk area edit movie clip foto1
·         Klik kanan frame 15 >> inser frame
·         Insert New Layer >> ketikan teks Nama “M.Yahya” Klik kanan frame 15 >> insert frame
·         Insert New Layer >> Buat object kotak tenpatkan disebelah kanan, Klik kanan frame 15 >> Insert keyframe >> pindahkan objek kotak kesebelah kanan
·         Klik kanan layer 2 >> Mask

·         Kembali ke stage Scene1, insert keyframe pada frame 1, 30 dan 45. Pada frame 1 posisi gambar diluar stage sebelah kanan untuk frame 30 dan45 pada posisi awal penempatan (dalam stage)
·         Lakukan hal sama untuk foto2

6.      Memberi Action Script pada teks “Loading Please Wait…”
·         Buat layer baru > Insert keyframe pada frame 35 dan 45, ketikkan teks “Loading Please Wait pada frame 35 create motion tween,klik frame 45 pindahkan teks kedalam stage sebelah kanan. Klik frame 45 >> properties >> color alpha : 0%
·         Klik frame 45 >> F9 >> Ketikan
gotoAndStop("Scene 2", 1);



            *Pengaturan layer dan frame pada scene1



Scene 2

  1. Layer Background berisi gambar untuk latar
  2. Layer Photo berisi Movie Clip objek kotak merah
  3. Layer Button berisi tombol “Back” dan “Next”
Script untuk tombol Back :
on (release){
            _root.changePhoto(-1);
}
Script tombol Next :
on (release){
            _root.changePhoto(1);
}
  1. Layer Teks berisi Movie Clip teks yang menggunakan efek masking (pembuatan seperti cara sebelumnya)
  2. Layer Action berisi scrip untuk menampilkan image yang berda pada sub folder galeri dalam folder Tugas Multimedia. Scriptnya adalah sebagai berikut :

this.pathToPics = "galeri/";
this.pArray = ["image0.jpg", "image1.jpg", "image2.jpg", "image3.jpg", "image4.jpg", "image5.jpg", "image6.jpg", "image7.jpg", "image8.jpg", "image9.jpg"];
this.fadeSpeed = 20;
this.pIndex = 0;

loadMovie(this.pathToPics+this.pArray[0], _root.photo);
MovieClip.prototype.changePhoto = function(d) {
           
            this.pIndex = (this.pIndex+d)%this.pArray.length;
            if (this.pIndex<0) {
                        this.pIndex += this.pArray.length;
            }
            this.onEnterFrame = fadeOut;
};
MovieClip.prototype.fadeOut = function() {
            if (this.photo._alpha>this.fadeSpeed) {
                        this.photo._alpha -= this.fadeSpeed;
            } else {
                        this.loadPhoto();
            }
};
MovieClip.prototype.loadPhoto = function() {

            var p = _root.photo;
           
            p._alpha = 0;
            p.loadMovie(this.pathToPics+this.pArray[this.pIndex]);
            this.onEnterFrame = loadMeter;
};
MovieClip.prototype.loadMeter = function() {
            var i, l, t;
            l = this.photo.getBytesLoaded();
            t = this.photo.getBytesTotal();
            if (t>0 && t == l) {
                        this.onEnterFrame = fadeIn;
            } else {
                        trace(l/t);
            }
};
MovieClip.prototype.fadeIn = function() {
            if (this.photo._alpha<100-this.fadeSpeed) {
                        this.photo._alpha += this.fadeSpeed;
            } else {
                        this.photo._alpha = 100;
                        this.onEnterFrame = null;
            }
};

this.onKeyDown = function() {
            if (Key.getCode() == Key.LEFT) {
                        this.changePhoto(-1);
            } else if (Key.getCode() == Key.RIGHT) {
                        this.changePhoto(1);
            }
};
Key.addListener(this);

Untuk menjalankan Porgram Tekan CTRL+ENTER pada keyboard
Selamat Mencoba….!!!
*Tutorial ini hanya dasar nya saja, untuk pengembangan nya silahkan rekan – rekan kreasikan sendiri. Terimakasih :)

Download Bahan | Download File Exe | Download File Fla

4 comments:

  1. coba bikin versi youtube mas,,aku sangat terbantu sekali..hatur nuhun

    ReplyDelete
  2. Mari bergabung bersama ASIANBET77.COM Disini kami menyediakan berbagai macam jenis permainan betting online, seperti Taruhan Bola Online, Casino Online, Togel Online, Sabung Ayam Online dan masih banyak lagi game taruhan online lainnya....

    Pendaftaran gratis tidak dikenakan biaya apapun juga, minimal Deposit sangat ringan, hanya dengan Rp 100.000 saja anda sudah bisa bergabung bersama kami. ASIANBET77.COM bekerja sama dengan bank lokal yakni BCA, MANDIRI & BNI. Sehingga memudahkan anda untuk bertransaksi bersama kami.

    Customer service kami yang Ramah dan Profesional akan siap membantu anda selama 24 jam full, ayo segera daftarkan diri anda bersama kami ASIANBET77.COM. Dan dapatkan promo2 menarik dari kami.untuk keterangan lebih lanjut silahkan hubungi CS kami :

    YM : op1_asianbet77@yahoo.com
    Wechat : asianbet_77
    sms center : +639052137234
    pin bb : 2B4BB06A

    ReplyDelete
  3. www.indobet77.com

    Master Agen Bola , Casino , Tangkas , Togel Terbesar
    dan Terpercaya Pilihan Para Bettor

    Promo Terbaru :
    - Bonus  10% New Member Sportsbook
    - Bonus 5% New Member Casino Online
    - Bonus 10% Setiap Hari Bola Tangkas
    - CASHBACK untuk Member
    - BONUS REFERRAL 5% + 1% Seumur Hidup

    untuk Informasi lebih jelasnya silahkan hubungi CS kami :
    - YM : indobet77_sb2@yahoo.com
    - EMAIL : indobet77@gmail.com
    - WHATSAPP : +63 905 213 7238
    - WECHAT : indobet77
    - SMS CENTER : +63 905 213 7238
    - PIN BB : 2B65A547 / 24CC5D0F

    Salam Admin ,
    http://indobet77.com/

    ReplyDelete

Designed By