Senin, 25 November 2013

Flipping Book dengan Adobe CS3

hai Sobat.. semua uda tau majalah kan.. biasanya kan kita membolak-balik majalah dengan tangan, tapi bagaimana ya kalau kita membolak balik majalah tersebut dengan Mouse... tinggal klik atau drag.. lebih menarik kan..
Itu adalah sebuah Majalah Digital. majalah yang disajikan dalam bentuk digital menggunakan komponen Flipping Book dari software Flash / Macromedia. kita bisa membuatnya dengan template-template yang ada. tetapi aku mau kasih tutor nih buat sobat semua, dengan penggunaan Flipping Book secara manual.




Pastikan Flash Sobat sudah terekstensi Flipping Book jika belum silahkan lihat tutorialnya Disini

Kemudian buka software Adobe Flash CS3 buat project menggunakan Action Script 2.0 (tutorial ini menggunakan AC2)

pada menu Windows pilih Componen atau juga bisa menggunakan tuts Keyboard dengan tekan CTRL+F7 maka akan tampil seperti gambar di bawah ini...


setelah itu pada menu FlippingBook akan ada Premium Page Flip yang bisa di klik drag ke stage area.


Maka akan terbentuk Flipping Book dengan Warna Abu-abu  persegi. ubah ukuran flip sesuai dengan gambar jpg yang telah di sediakan. seperti pada contoh saya menggunakan rasio kertas A4 untuk page per halaman, sehingga untuk ukuran seluruhnya menjadi ukuran A3.atur ukuran buku untuk "W" lebar dan "H" Tinggi 

Pada Instance Name ketiklah nama buku yang anda buat (nama terserah) seperti pada contoh saya menggunakan nama "myBook"
>>> untuk mengatur itu semua terletah pada panel Properties


langkah selanjutnya, desain layout yang terlah di buat dengan ukuran yang sama (setengan buku), Import ke flash, atau juga bisa dengan klik drag ke panel Library. 
setelah image masuk ke panel Library klik drag ke stage.

Ubah ukuran pada panel Properties dengan Tinggi yang sama dan Lebar ukurannya setengah dari ukuran Buku.

ubah image menjadi Movie Clip. 
pada menu Modify - Convert To Symbol (F8 pada keyboard)
ketik nama sesuaikan dengan halaman buku seperti P1 atau Page01 dsb.
pastikan Registration-nya pada titik pojok kiri atas. jangan lupa pilih Movie Clip
apabila pada tampilan Convert to symbol anda tidak muncul Linkage, silahkan klik Advance yang terletak pada sisi bawah kanan.

centang Export for ActionScript maka otomatis Export in First Frame akan tercentang juga.

Klik OK

Hapus Page Movie Clip yang ada di stage

klik Buku kemudian pada panel Parameters


pada panel tersebut kita bisa mengatur berbagai efek dan memasukkan beberapa page image yang akan di tampilkan.

jika ingin menampilkan page pada Book Pages, double klik pada tanda "[]" maka akan mencul jendela seperti dibawah ini

untuk memasukkan gambar atau untuk menambahkan klik "+
 "-" untuk menghapus.
arah atas dan bawah untuk memindahkan halaman ke arah depan atau lebih ke belakang.
angka 0 untuk Cover depan
angka 1 untuk halaman dibalik Cover. 
dan begitu seterusnya hingga cover belakang.
kemudian klik Ok

Maka tampilan buku akan berubah menjadi warna biru dan transparan

klik CTRL+Enter untuk mengecek keberhasilan membuat flipping book ini.

untuk melihat hasilnya klik disini

14 komentar:

  1. mbak mau tanya untuk ekstensi untuk Flash UI Component itu kita donwload sendri atau uadah ada di flashnya? terima kasih

    BalasHapus
    Balasan
    1. Component UI (User Interface) sudah tersedia di dalam Programnya..
      Untuk membukanya berada di Menu Windows kemudian pilih Components.. klik aja yang tanda plus-nya (+) akan terekspan pilihan yang mau digunakan..

      Terima Kasih Sudah mengunjungi Blog saya..
      jadilah member agar tahu info atau tutorial yang mungkin bisa membantu anda :)

      Hapus
  2. kok pas dirunning, gak keluar gambarnya ya? cuma background biru aja? makasi ya :)

    BalasHapus
    Balasan
    1. kalau muncul biru saja satu lembar itu tandanya, gambar belum dimasukkan atau gambar belum terhubung ke flippping booknya :)

      coba masukkan gambar kemudian gambar itu ubah ke "movie clip" dengan ukuran yang disesuakan sama seperti bukunya, kemudian kasih nama pada parameter seperti langkah diatas (nama moviclip sama di parameter harus sama.

      coba cek lagi langkah2 liatas mungkin ada yang terlewat,

      terima kasih :)

      Hapus
  3. mbak, punya saya cs3 nya nggak ada "flipping book" di menu components, trus solusi bagaimana?

    BalasHapus
    Balasan
    1. silahkan ikuti panduan di http://dobel-er.blogspot.com/2013/11/menginstal-ekstensi-flippingbook.html

      disitu juga tersedia downloadannya kok,
      terima kasih.. :) baca yang lain juga ya..

      Hapus
  4. kalo pakek template gimana sis?

    BalasHapus
  5. klo pke cs5 bisa ga. trus ko di component ga ada flipping book

    BalasHapus
  6. bos minta petunjuk....bagaimana cara nya agar file .xml bisa tak pindah ke folder lain.....jadi tidak 1 folder dengan file .swf & .fla

    BalasHapus
  7. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  8. Link download is invalid. Reupload it please

    BalasHapus
  9. Komentar ini telah dihapus oleh pengarang.

    BalasHapus