Dalam tutorial ini saya ingin menunjukkan kepada Anda penggunaan jenis kamera khusus dari Esquimo yang disebut "Presentasi". Menggunakan kamera ini memungkinkan pengguna untuk memanipulasi tampilan di output SWF. Anda dapat memutar, memperbesar/memperkecil dan menerjemahkan kamera menggunakan mouse. SWF semacam itu memberikan kemungkinan untuk melihat objek Anda dari sudut mana pun yang mungkin sangat berguna saat Anda ingin menampilkan objek 3D apa pun di situs web. Seluruh prosesnya sangat sederhana. Buat atau impor objek 3D, tambahkan kamera "Presentasi" ke pemandangan dan ekspor SWF (File/Publikasikan). Itu dia. Lalu untuk apa tutorialnya? Saya ingin menunjukkan kepada Anda contoh alur kerja membangun halaman web daripada menyajikan joystick.
Saya telah membuat dan memberi tekstur pada joystick di Blender - aplikasi sumber terbuka untuk pembuatan 3d, yang sangat bagus. Saya tidak akan membahas seluruh proses pembuatan model karena ada banyak tutorial untuk Blender dan menurut saya pakar Blender dapat melakukannya dengan lebih baik. Saya menemukan Blender sangat nyaman dalam menyiapkan tekstur. Pertama saya telah menerapkan warna solid untuk dasar, tongkat dan tombol dan memanggang 3 adegan rendering tekstur terpisah dengan petir oklusi sekitar. Kemudian saya membuat beberapa koreksi di Photoshop menggunakan teknik proyeksi lukisan. Hasilnya saya mendapatkan 8 elemen bertekstur dengan 3 jpg. Jika Anda memiliki Blender, Anda dapat memeriksanya.
Menambahkan Kamera Presentasi
Jika Anda mengunduh paket di atas, Anda akan menemukan folder 3ds yang berisi semua file yang akan kami impor ke Esquimo. Luncurkan Esquimo dan impor model joystick. Pilih Buat/Geometri/Impor geometri dari menu utama atau pilih ikon yang sesuai di tab Geometri dan pilih fileblend_joy.3ds . Ingat bahwa tekstur model harus ditempatkan di direktori yang sama jika Anda ingin menerapkannya secara otomatis. Tentu saja Anda masih dapat menetapkan tekstur secara manual ke elemen tertentu setelah mengadopsi model. Model sampel memiliki ukuran kecil dibandingkan dengan dimensi awal adegan Esqumio. Oleh karena itu skala ulang selama pengambilan.
Esquimo akan menanyakan apakah Anda ingin menggunakan perender "Adobe". Pilih "yes" karena ini adalah satu-satunya mode yang menampilkan tekstur pada versi saat ini (1.1). Anda dapat menghilangkan beberapa artefak tampilan yang mengubah parameter Face sort dalam wadah Properties menjadi "Near-Z". Masalah Z-sorting akan hilang pada generasi berikutnya dari Flash Player - Molehill.
Ubah ukuran layar SWF yang dihasilkan menjadi 400x400px (buka tab Scene dan atur nilaiWidth dan Height ) dan atur warna Background ke # 1B1D20. Tambahkan kamera Presentasi ke TKP.
Tempatkan kamera sehingga kamera target diatur di tengah joystick dan kamera di sebelahnya. Setel salah satu dari empat tampilan ke tampilan CAMERA ( ALT + C ). Pastikan kotak centang "Show rendering region" ( Tools->Options ) aktif. Tempatkan kamera pada posisinya sehingga joystick pas dengan bingkai wilayah rendering. Kurang lebih seperti gambar di bawah ini.
Sekarang, Anda dapat menguji tempat kejadian ( F5 ). Kamera Presentasi telah memberikan gerakan orbital awal. Sampai Anda mengklik area SWF, kamera bergerak di sekitar targetnya dan suasana joystick berputar. Setelah klik pertama pada area SWF, film beralih ke mode manual di mana Anda dapat memutar tampilan menggunakan seret & lepas, gerakkan sambil menahan CTRL dan perbesar/perkecil dengan roda mouse. Jika Anda pergi ke opsi kamera Presentasi (pilih dengan mengklik kamera di tempat kejadian atau di daftar elemen Pemandangan) Anda dapat mengatur parameter gerakan awal.
Menambahkan interaksi
Ada dua cara untuk menambahkan interaksi ke film SWF yang dibuat oleh Esquimo: mengaktifkan acara bawaan ke elemen tertentu dan menggunakan API. Keduanya dapat digunakan secara bersamaan
Menggunakan acara bawaan Esquimo
Saya ingin menunjukkan semua kontrol joystick. Saya akan mengatur penanganan acara untuk elemen khusus ini.
Pilih tombol atas, luaskan wadah Acara dan tentukan respons untuk acara saat mouse bergerak di atas tombol. Mari gerakkan tombol sedikit ke atas setiap kali mouse berada di atasnya. Saya menggunakan nilai seperti pada gambar di bawah ini.
Kiat:
- Gunakan kotak pembatas untuk mendeteksi peristiwa guna menghemat penggunaan CPU tetapi hanya jika elemen kotak pembatas dengan peristiwa yang ditentukan tidak tumpang tindih.
- Untuk mempratinjau elemen papan pembatas kotak, cukup pilih. Bingkai kuning akan menandai pembatas kotak volume untuk setiap elemen.
Tentukan acara untuk semua tombol lainnya. Biarkan masing-masing bergerak setelah mouse bergerak. Biarkan 2 elemen lainnya (tuas throttle dan roda di depan joystick) berputar. Dua elemen joystick yang berputar tidak memiliki titik yang terletak di tempat yang tepat secara default. Anda perlu menyesuaikan posisi titik pivot agar rotasi terlihat lebih alami. Pertama pindahkan titik pivot roda seperti yang ditunjukkan pada gambar di bawah ini. Objek "Base" mungkin mengganggu, matikan sebentar.
Sekarang tetapkan Mouse atas penanganan acara. Buka wadah Acara dan tataArahkan mouse ke (daftar tarik-turun) ke "Putar " dan di properti Acara atur nilai Z ke 15.
Tambahkan penanganan acara ke "Throttle lever". Titik pivotnya juga terletak di tempat yang salah tepat setelah diimpor. Pindahkan kurang lebih ke posisi seperti yang ditunjukkan pada layar di bawah ini.
Tetapkan parameter berikut dalam wadah Acara "Throttle lever".
- Arahkan mouse ke: Putar
- Properti acara: Z: -25.00
- Properti acara: Tween: Memudahkan
Peristiwa AS3 khusus dengan menggunakan API
Setelah Anda selesai menyetel acara di Esquimo, publikasikan file SWF ( tombol F12 ). Beri nama file yang diterbitkan sebagai joystick.swf. Sekarang kita akan membuat SWF yang akan disematkan di halaman web sampel kita. File joystick.swf akan dimuat ke induk SWF sebagai child-movieclip.
Ada masalah saat Esquimo SWF menggunakan anak dari movieklip induk. Menyetel warna Latar Belakang di Esquimo hanya berpengaruh jika perender Esquimo disetel ke "Nive Vectors". Jika menggunakan prosedur rendering Adobe, Anda perlu menyetel warna latar belakang di lingkungan pengembangan Flash Anda. Apakah itu Flash IDE atau FlashDevelop atau yang lainnya, Anda pasti akan menemukan opsinya.
Saya menggunakan Flashdevelop 4.0.0RC1 dan Flex SDK 4.5.1 untuk membuat final SWF yang akan disematkan di situs web sampel. Tujuan menggunakan kode AS3 tambahan adalah menampilkan info singkat tentang pengontrol joystick tempat kursor mouse masuk. Dimuat sebagai joystick.swf anak (dihasilkan oleh Esquimo) MovieClip dapat menghasilkan peristiwa internalnya untuk objek geometri tertentu yang termasuk dalam adegan. Dalam hal ini saya akan menggunakan event Esquimo3D.MOUSE_OVER / Esquimo3D.MOUSE_OUT untuk mendeteksi momen ketika kursor mouse berada di atas salah satu pengontrol. Sebagai tanggapan atas acara tersebut, saya akan menampilkan teks pada bilah transparansi dengan info singkat tentang elemen runcing. Jangan menganggap serius pesan ini.Mereka hanya untuk tujuan tutorial.
Jika Anda tidak terbiasa dengan Esquimo API, bacalah setidaknya bagian mengenai peristiwa di atas di sini: www.ninevectors.com/manual/06_api.html
Seluruh proyek ini cukup sederhana dan saya yakin Anda akan menemukan kodenya. Anda dapat mengunduh kode sumber di sini:
E squimo SWF viewer dengan interaksi tambahan - file sumber (proyek FlashDevelop)
Saya ingin memfokuskan perhatian Anda pada bagian kode yang berhubungan dengan penanganan event Esquimo:
{
joystickClip.addEventListener("Esquimo3D.MOUSE_OVER", mouseOverHandler);
joystickClip.addEventListener("Esquimo3D.MOUSE_OUT", mouseOutHandler);
}
private function mouseOverHandler(e:MouseEvent):void
{
labelContainer.visible = true;
var whichone:int = e.delta;
switch (whichone)
{
case 11: displayInfo(0); break;
case 12: displayInfo(1); break;
case 6: displayInfo(2); break;
case 8: displayInfo(3); break;
case 7: displayInfo(4); break;
case 1: case 2: case 3: case 4: case 5: displayInfo(5); break;
}
}
mana adalah variabel yang menangkap nomor ID objek tempat kursor mouse dimasukkan. Nomor ID diberikan ke objek geometri tertentu di Esquimo.
Dua hal lagi yang layak disebutkan. Setelah menambahkan Esquimo SWF yang dimuat ke atas panggung, Anda mungkin melihat batas kuning yang tidak diinginkan di sekelilingnya. Garis :
tahap . stageFocusRect = false ;
memperbaiki masalah. Saat Anda menelusuri kode, Anda akan melihat bahwa saya menggunakan perpustakaan pihak ketiga untuk menangani remaja yang disebut Acutate . Omong-omong, ini jauh lebih cepat daripada kelas Adobe tween. Jika Anda tidak memiliki aset Flash IDE atau SWC termasuk kelas fl.transition, Anda mungkin memerlukan pustaka pihak ketiga mana pun untuk menangani remaja. Tentu saja hanya saat Anda membutuhkan remaja. Saya menggunakannya di proyek saya, tetapi Anda dapat menulis fungsi respons acara yang tidak memerlukan tween. Terserah kamu.
Merakit halaman web
Saya telah membuat beberapa halaman sederhana hanya untuk menunjukkan kepada Anda bagaimana Anda dapat menggunakan kamera presentasi dalam praktiknya. Jika Anda memiliki HTML dasar-dasar, saya yakin kodenya akan jelas untuk Anda. Saya menulis lebih banyak tentang menyematkan flash dalam HTML di tutorial saya yang lain ( Flash di atas dan di bawah konten HTML ). Anda dapat mengunduh kode lengkap di bawah ini dan ini adalah efek akhir.
