E-Magz menggunakan Flash dengan komponen Premium Page Flip – PART II


Melanjutkan dari Part I, pada kesempatan kali ini saya akan mencoba membahas mengenai pembuatan komponen tambahan pada Premium Page Flip yang telah dibahas pada Part I. Pembuatan komponen yang akan dibahas kali ini yaitu pembuatan tombol Next, Previous, Cover dan Stopsound. Selain itu akan dibahas juga cara menambahkan backsound serta pengaturan-pengaturan lain yang sangat bermanfaat untuk menjadikan majalah digital (e-Magz) menjadi lebih fungsional dan menarik.

Sebelumnya ada informasi tambahan yang belum dibahas pada Part I. Yaitu pembuatan layer untuk memudahkan dalam mengatur component. Dapat dilihat pada gambar dibawah ini terdapat layer action, button, sound, catalogue, dan background. Semua komponen dimasukan pada frame pertama.

Layer dengan nama action dibuat untuk memasukan kode-kode atau pengaturan tambahan. Layer dengan nama button dibuat untuk memasukan komponen tombol next,previous,cover,backcover dan sebagainya. Layer dengan nama sound dibuat untuk memasukan backsound. Layer dengan nama catalogue digunakan untuk memasukan komponen Premium Page Flip yang telah dibahas pada Part I. Kemudian Layer background digunakan untuk background.

Untuk membuat tombol navigasi kita gunakan Layer button. Pertama buat komponen button dengan nama Cover, Backcover, Prev dan Next.

Tombol navigasi sebelumnya harus di convert ke dalam library symbol button dengan cara klik kanan tombol kemudian pilih convert to symbol maka akan keluar kotak dialog,beri nama kemudian cek list button lalu ok, seperti gambar dibawah ini.

Setelah diconvert masukan kode sesuai dengan fungsi masing-masing komponen/tombol dengan cara klik kanan -> action.

Untuk tombol NEXT masukan perintah sebagai berikut :

on (release) {

book.flipForward();

}

Perintah on (release) artinya pada saat mouse klik dilepaskan pada tombol/komponen tersebut. Perintah book.flipForward() artinya book merupakan nama instance komponen Premium Page Flip yang diberikan sebelumnya (pada Part I), flipForward merupakan perintah menuju halaman selanjutnya.

Untuk tombol PREV masukan perintah sebagai berikut :

on (release) {

book.flipBack();

}

Kode tersebut merupakan perintah pada saat melepas klik komponen Page Flip menuju halaman sebelumnya.

 

Untuk tombol Cover masukan perintah sebagai berikut :

on (release) {

book.flipGotoPage(0);

}

 

Kode book.flipGotoPage(0) merupakan perintah untuk menuju halaman ke 0 yaitu cover.

Untuk tombol Backcover masukan perintah sebagai berikut :

on (release) {

book.flipGotoPage(5);

}

Angka 5 pada kode book.flipGotoPage(5) berarti perintah menuju halaman terakhir yaitu halaman ke-5 pada kasus ini. Pemberian nilai ini tergantung halaman terakhir yang kita buat. Halaman terakhir biasanya merupakan angka ganjil.

Untuk memasukan backsound kita harus meng import file sound tersebut ke library, caranya klik file -> import to library kemudian klik layer sound lalu pilih sound yang telah diimport dan pada sync pilih event seperti gambar dibawah ini, misalkan file yang diimport bernama music :

Kode untuk menghentikan suara backsound yaitu dengan cara menuliskan kode dibawah ini pada komponen :

stopAllSounds();

Konfigurasi seperti shortcut key untuk komponen ataupun mengatur agar tampilan flash langsung fullscreen pada saat dibuka dapat dilakukan pada layer action dengan memasukan kode-kode sebagai berikut :

scommand(“fullscreen”,true); //Fungsi Auto Full Screen

fscommand(“showmenu”,false); //Fungsi disable showmenu

var lo = new Object(); //Fungsi Arrow Flip

Key.addListener(lo);

lo.onKeyDown = function() {

if (Key.getCode() == 37) { //Tombol left arrow pada keyboard sebagai shortcut previous

Book.flipBack();

} else if (Key.getCode() == 39) { //Tombol right arrow pada keyboard sebagai shortcut next

Book.flipForward();

}

};

var esc = new Object(); //Fungsi esc

Key.addListener(esc);

esc.onKeyDown = function() {

if (Key.getCode() == 27) {

fscommand(“quit”,””);

}

};

Masih banyak konfigurasi yang dapat dilakukan, untuk kode-kode nya dapat di download pada link dibawah ini.

Mungkin hanya itu kemampuan yang saya miliki untuk di sharing, semoga artikel ini bermanfaat bagi para pembaca. Salam sejahtera.

Untuk tombol Cover masukan perintah sebagai berikut :

on (release) {

book.flipGotoPage(0);

}

Kode book.flipGotoPage(0) merupakan perintah untuk menuju halaman ke 0 yaitu cover.

Untuk tombol Backcover masukan perintah sebagai berikut :

on (release) {

book.flipGotoPage(5);

}

Angka 5 pada kode book.flipGotoPage(5) berarti perintah menuju halaman terakhir yaitu halaman ke-5 pada kasus ini. Pemberian nilai ini tergantung halaman terakhir yang kita buat. Halaman terakhir biasanya merupakan angka ganjil.

Untuk memasukan backsound kita harus meng import file sound tersebut ke library, caranya klik file -> import to library kemudian klik layer sound lalu pilih sound yang telah diimport dan pada sync pilih event seperti gambar dibawah ini, misalkan file yang diimport bernama music :

29 thoughts on “E-Magz menggunakan Flash dengan komponen Premium Page Flip – PART II

  1. artikel yang bagus…
    Mohon bantuannya mas..
    saya sedang menyusun TA(tugas akhir), saya ingin angkat judul mengenai e-magazine tapi isinya mengenai materi kuliah,.
    tapi saya juga masih pemula..
    gimana caranya dan apa saja software yang dibutuhkan?

    terimakasih sebelumnya mas..
    jawabannya sangat saya tunggu.
    ini email saya: lie_897@yahoo.co.id

  2. gan klo kita publish ke bentuk exe , page nya udah nyatu belom,apa page nya kita bawa foldernya juga

  3. Salam kenal,

    artikel yang sangat bagus, dan saya sudah mencoba tutornya n berhasil!
    Thankz untuk informasinya…
    tapi apakah didalam halaman (page) nya bisa disisipi video, animasi flash atau link url ??
    apakah anda sudah posting tutorial mengenai hal itu? Mohon pencerahannya…

    thankz!! n Sukses Selalu!!

    1. waduhhhh ane msihh mentok nihhh pas bgian ngdrag flip pagenya ko … ane pas drag ga muncul gambar ???? btw kalo masalah layer di gunainga kalo kita mau page klip

  4. kalau ingin melihat isi majalah digital dalam bentuk PDF bagaimana caranya? trus kalau isi majalah itu mau dicetak bagaimana? terimakasih… mohon bantuannya

  5. gan gimana caranya kalau misalnya kita pengen buat daftar isi di pages 2. tapi daftar isinya di jadikan link atau di convert to simbol, jadi kalau misalnya kita klik salah satu daftar isinya maka kita akan langsung lari ke halaman sesuai dengan daftar isinya.

  6. mau nanya gan…
    kalau buat tampilan utama (berupa gambar) sebelum masuk ke flipping booknya gimana gan…?
    mohon pencerahannya.

  7. gan tolong kasih pencerahan buat table of cotents/ daftar isi dalam page
    dengan bentuk swf.
    trik yang di atas udah dicoba tapi gagal…
    tolong gan ya…

    1. button di sfw yang udah dibuat masukin method ‘flipOnClickProp’ ,misal :

      on (release){
      book.gotoPage(3); //misal pada saat direlease langsung loncat ke halaman 3
      }
      on (rollOver) {
      book.flipOnClickProp = false; //ini biar komponen page flip nya ga sensitif pada saat di rollover
      }
      on (rollOut) {
      book.flipOnClickProp = true;
      }

  8. kang, kalo misalnya mau ngasih tombol zoom (pas diklik gambarnya jadi gede) trus nyediain kolom go to page, sama ngecilin volume backsound, itu gimana? mohon pencerahan nya kang🙂

  9. Wah, keren nih cara manual. ane muter2 di google banyakannya yang pake software sama yang download udah jadi, jadinya agak susah dimodif, nah yang ini pake manual, keren nih jadi ngerti segamblang2nya….heuheu….
    mancaplah, buat siakangnya mudah2an rezekinya lancar, amiiiinnn….😀

  10. LUARBIASA…..ane udah ubek-ubek senatero google baru skrg nemu tutor yg oke abisss..mantabsss dan sangat inspiratif..thanks gan..rajin-rajin update yak..biar inyong rajin juga kasih komen positip!!!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s