Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. ActionScript

Menciptakan efek aliran Cover menggunakan Flash dan AS3

by
Difficulty:IntermediateLength:LongLanguages:

Indonesian (Bahasa Indonesia) translation by Keti Pritania (you can also view the original English article)

Anda sudah pasti melihat tampilan "Cover Flow" efek. Itu adalah seluruh tempat pada hal-hal Apple. Dan Anda juga mungkin telah melihat sejumlah implementasi Cover Flow di Flash. Dalam tutorial ini, Anda akan mendapatkan satu lagi. Kami akan memanfaatkan kemampuan 3D built-in Flash Player 10 (yang pra-Stage3D) dan membangun versi kita sendiri berbasis XML Cover Flow.

Catatan: Tutorial ini awalnya diterbitkan pada bulan April 2011 - sebelum Stage3D dirilis - sebagai freebie untuk pelanggan newsletter kami. Karena Activetuts + telah sekarang ditutup, kami membuatnya gratis untuk semua pembaca.

Hasil akhir Tinjauan

Periksa demo untuk melihat apa yang kita sedang bekerja menuju.



Klik untuk melihat demo.


Langkah 1: Buat File Flash ActionScript 3

Hal pertama yang harus dilakukan adalah membuat file Flash di mana kami akan bekerja. Membuka Flash CS4 atau CS5 dan pilih File > baru, dan pilih Flash File (ActionScript 3.0), dan tekan OK. Simpan file ini ke folder yang akan didedikasikan untuk proyek ini.

Flash version settings

Aku akan menetapkan ukuran panggung untuk 600 x 400. Merasa bebas untuk menggunakan ukuran apa pun yang Anda inginkan, tapi saya akan merekomendasikan 600 x 400 sebagai minimum, mengingat bahwa memainkannya efek terbaik ketika memiliki banyak ruang untuk menampilkan itu sendiri. Juga, memilih tingkat bingkai cukup tinggi, seperti default 24. Ini akan membuat animasi yang halus.

Stage size and frame rate

Simpan file ini sebagai CoverFlow.fla dalam folder Anda dapat mendedikasikan untuk proyek ini.


Langkah 2: Buat dokumen kelas eksperimen

Tujuan kami akan membuat kelas memainkannya dapat digunakan kembali, tetapi untuk mengembangkan itu kita perlu tempat untuk tinggal. Kita akan menggunakan file Flash kami hanya dibuat untuk bertindak sebagai tanah pengujian untuk memainkannya kelas seperti yang kita mengembangkan itu, dan begitu kita akan membutuhkan dokumen kelas untuk pergi dengan Flash file. Kelas ini akan berfungsi untuk menyediakan tempat untuk instantiate dan menguji kelas memainkannya. Ini akan, dengan demikian, memberikan contoh bagaimana menggunakan kelas memainkannya setelah lengkap.

Di dalam editor teks pilihan Anda, buat sebuah file baru dan Simpan sebagai CoverFlowTest.as dalam folder yang sama sebagai file Flash Anda.

Your project folder

Tulisan rintisan keluar kelas sederhana:

Ini tidak berbuat banyak, tetapi akan melacak pesan jika itu dihubungkan dengan benar, yang akan kita lakukan selanjutnya.


Langkah 3: Kawat kelas dokumen ke FLA

Dalam Flash file, klik di suatu tempat di panggung kosong, dan membuka panel properti (perintah/kontrol-F3, atau jendela > Properties). Di bidang kelas, ketik CoverFlowTest untuk menetapkan kelas dokumen.

Uji film Anda sekarang, dan Anda akan melihat jejak tersebut.

The Output Panel when running this FLA

Step 4: Membuat kelas memainkannya

Selanjutnya kami akan membuat file untuk kelas memainkannya. Ini akan hidup dalam sebuah paket, jadi pertama menciptakan struktur folder. Mulai dalam folder proyek (pada tingkat yang sama sebagai FLA Anda), membuat sebuah folder bernama com. Dalam itu, membuat folder lain yang disebut tutsplus. Dalam hal ini, buat satu folder lain yang disebut memainkannya.

Sekarang membuat file teks lain yang disebut CoverFlow.as dalam folder memainkannya.

The project folder with the CoverFlow class

Tambahkan boilerplate berikut:

Hal ini sangat mirip dengan kelas dokumen, kita hanya sedang mengantisipasi kebutuhan untuk lebih kelas, sehingga ada lebih pernyataan impor. Kelas ini juga akan memperpanjang Sprite, sehingga kami dapat mengobati memainkannya sebagai objek tampilan.


Step 5: Membuat sebuah Instance memainkannya

Sekarang untuk memastikan bahwa kami dapat menciptakan dan bekerja dengan memainkannya dalam kelas dokumen kami. Kembali di CoverFlowTest.as, mengimpor kelas memainkannya. Setelah impor lain:

Sekarang kita perlu tempat untuk menyimpan contoh memainkannya. Sebelum pembuat:

Dan sekarang untuk membuat contoh dan menambahkannya ke daftar tampilan. Dalam konstruktor, menghapus jejak dan menggantinya dengan:

Tes aplikasi Anda sekarang, dan sekarang Anda akan melihat "Memainkannya" jejak di Output panel. Jika demikian, semua baik. Kita sekarang dapat mulai membangun memainkannya.

Berikut adalah kode kelas seluruh dokumen, untuk referensi:


Step 6: Membuat kelas Cover

Kelas penutup akan item tunggal di seluruh "arus." Kita akan mulai dengan menyempurnakan kelas pada satu item, kemudian khawatir tentang loading data dan membangun "arus" setelah yang dirawat.

Sekali lagi, dalam editor teks Anda, membuat file kelas baru. Simpan sebagai Cover.as dalam folder com/tutsplus/memainkannya yang sama sebagai kelas memainkannya (dibandingkan dengan CoverFlowTest class...yes, kami memiliki beberapa nama yang berpotensi membingungkan. Saya akan mencoba untuk membantu Anda menjaga hal-hal lurus selama tutorial ini).

The project folder structure

Tambahkan boilerplate berikut (Lihat pola belum?):

Ini benar-benar identik boilerplate memainkannya, kecuali untuk penggunaan kata "Penutup" bukan "Memainkannya." Ini akan berakhir dengan sangat berbeda, jangan khawatir, aku hanya membuat yakin kita mendapatkan file di tempat sebelum pergi terlalu jauh ke lubang kelinci pengkodean.


Langkah 7: Membuat contoh Cover

Jadi, kita akan memiliki objek memainkannya membuat dan menggunakan sebuah objek penutup. Pada akhirnya, memainkannya akan bertanggung jawab untuk menciptakan dan mengelola beberapa objek Cover, tetapi untuk sekarang, karena kami membangun kelas Cover, kita hanya bisa membuat dan menampilkan objek penutup tunggal.

Dalam memainkannya, bukan menelusuri "Memainkannya," Mari kita memiliki itu melakukan pembuatan obyek ini.

Jika Anda menguji sekarang, Anda akan melihat "Menutupi" sedang dilacak (ingat, itu adalah penutup satu objek, tidak jejak tes sebelumnya kami telah menggunakan).

Tracing "Cover"

Namun, mari kita pergi satu langkah lebih lanjut dan mencoba untuk menampilkan sesuatu pada layar. Di sampul file, menghapus jejak dan menambahkan ini:

Sekarang, bukan merunut ke Output panel, Anda akan melihat kotak merah muncul di sudut kiri atas dari film Anda. Jika itu terjadi, kita tidak cukup banyak set untuk terus bekerja. Apa ini berarti adalah bahwa tidak hanya kode mengeksekusi semua jalan ke objek penutup individu, tetapi kita telah berhasil menambahkan elemen ke tahap sehingga kita dapat membuat objek visual.

Actually seeing something in the movie

Langkah 8: Menempatkan meliputi dalam wadah

Kami hanya menambahkan objek penutup langsung ke memainkannya tampilan daftar. Untuk alasan yang mungkin tidak jelas pada saat ini, kita akan akhirnya membutuhkannya dalam wadah tambahan; itu adalah, memainkannya akan berisi sebuah Sprite, yang akan berisi semua contoh Cover. Seperti yang kita maju melalui tutorial ini, kita akan menambahkan tampilan lainnya, bebas-Cover objek, dan itu akan sangat nyaman untuk memastikan semua mencakup mudah dikelola.

Pertama, dalam memainkannya, menyatakan properti Sprite yang akan referensi kami kontainer.

Dan dalam konstruktor, menciptakan Sprite itu dan menambahkannya ke daftar tampilan. Juga, bukan menambahkan tes penutup objek untuk memainkannya di tampilan daftar, tambahkan ke _coversContainer Sprite:

Jika Anda menguji sekarang, Anda harus melihat hal yang sama seperti sebelumnya, yang baik. Kami tidak ingin terlihat berbeda, tapi kami ingin fungsi yang berbeda di bawah tenda.


Langkah 9: Mengatur ukuran memainkannya

Ada beberapa hal yang kita harus berhati-hati sekarang. Ukuran wadah yang memegang tampilan memainkannya adalah salah satu dari mereka, sebagai lebar dan tinggi akan digunakan di tempat lain. Ini akan menjadi sederhana seperti beberapa properti dan pencocokan setter dan pengambil.

Pertama, dalam CoverFlow.as, tambahkan dua sifat pada awal kelas:

Dan setelah konstruktor, tambahkan setter dan pengambil berikut:

Karena memainkannya subclass dari Sprite, sudah ada lebar dan tinggi setter dan pengambil. Jadi kita perlu untuk memastikan untuk menimpa mereka. Kami tidak ingin perilaku default peregangan, jadi kita akan ingin mengontrol yang kita sendiri. Kita akan kembali ke ini setter dalam beberapa langkah.

Namun, memiliki ukuran untuk memainkannya objek cukup penting untuk meminta parameter ini dalam konstruktor. Lebar dan tinggi menentukan banyak tata letak akhir, sehingga kami akan menambahkan beberapa parameter ke konstruktor dan kemudian segera mengatur properti kami dengan mereka:

Dan tentu saja kita perlu menyediakan beberapa argumen ini dari CoverFlowTest. Dalam file tersebut, memperbarui baris yang menciptakan memainkannya baru ini:

Tidak ada banyak untuk menguji sekarang, tetapi jika Anda suka Anda dapat mempublikasikan film dan melihat jika kesalahan kompilator muncul. Jika ada kesalahan, mengurus mereka sekarang. Anda akan tahu bahwa kesalahan yang entah bagaimana berhubungan dengan kode Anda sehingga hanya mengetik, mulai dari sana.


Langkah 10: Mengatur warna latar belakang

Properti lain yang akan digunakan kemudian akan warna latar belakang dari seluruh "arus." Apple membuat mereka hitam, tapi tidak ada alasan untuk tetap dengan itu, karena akan menjadi agak sederhana untuk mengubahnya. Untuk membuatnya terjadi, meskipun, kita akan membutuhkan sebuah objek bentuk yang duduk di bagian bawah tumpukan tampilan objek memainkannya, dan kita harus pemrograman menggambar persegi panjang dengan warna pilihan ke dalam bentuk itu.

Pertama, tambahkan dua sifat untuk memainkannya, satu untuk memegang contoh bentuk dan satu untuk menyimpan warna latar belakang:

Perhatikan bahwa kami memberikan _backgroundColor nilai default, sehingga jika pernah diatur oleh pengguna kelas ini, kita akan memiliki latar belakang hitam tetap. Jumlah 0 adalah kode warna untuk hitam.

Selanjutnya, menulis dalam penyetel dan pengambil untuk backgroundColor (kita tidak perlu bentuk agar dapat diakses di luar kelas ini, hanya warna):

Anda akan melihat bahwa kita menyebut sebagai--namun tidak ada metode disebut drawBackground. Ini akan melakukan apa yang ia mengatakan pada label. Mari kita menulis sekarang:

Ini hanya membersihkan keluar setiap grafis sebelumnya dalam bentuk latar belakang, set mengisi warna pada saat ini nilai properti, dan kemudian menarik sebuah persegi panjang.

Akhirnya, kita perlu untuk mengatur bentuk awalnya. Dalam konstruktor, menambahkan ini pada akhir:

Dan pergi ke depan dan mengujinya! Anda harus melihat latar belakang hitam di belakang kami red square.

The published SWF, with a black background

Jika Anda suka, Anda dapat mengubah ukuran jendela pemain, dan Anda akan melihat bahwa kita memang memiliki sebuah persegi panjang hitam yang duduk di atas dasar putih film.

Untuk referensi, di sini adalah kelas memainkannya lengkap saat ini. Perubahan yang dibuat dalam langkah ini yang disorot.


Langkah 11: Membuat masker

Kami telah menciptakan bentuk latar belakang yang merespon ukuran memainkannya, tapi apa pun kita menambahkan ke objek – seperti individu mencakup-mungkin tidak menghormati ukuran dimaksudkan. Apa yang kita butuhkan adalah masker untuk memainkannya seluruh tampilan objek yang akan ditetapkan untuk ukuran yang sama.

Kita bisa menggunakan masker ol ' biasa untuk tugas ini, tapi karena kami berharap masker persegi panjang, kita memiliki pendekatan yang lebih mudah. Properti scrollRect DisplayObjects menyediakan fungsionalitas mirip dengan masker, meskipun ada perbedaan. Salah satu keuntungan kita memiliki dengan scrollRect adalah optimasi kinerja. Aku tidak tahu secara spesifik, tetapi memanfaatkan scrollRect memberitahu Flash untuk membuat hanya piksel yang terkandung dalam persegi panjang, bukan biasa masker, yang masih menjadikan semua piksel terlibat dalam konten bertopeng.

Pengaturannya yang sederhana seperti ini, dalam konstruktor memainkannya:

Tidak ada banyak untuk menguji sekarang, tapi Anda dapat mengkompilasi untuk memastikan Anda tidak membuat kesalahan ketik.


Langkah 12: Menyesuaikan lebar dan tinggi

Sekarang, kita perlu untuk mengimplementasikan logika ukuran kita sendiri. Dalam lebar dan tinggi setter memainkannya, tambahkan baris-baris berikut:

Kita dapat menguji ini untuk gelar dengan menambahkan perubahan ukuran obyek memainkannya di CoverFlowTest:

Anda harus melihat apakah Anda telah melihat, hanya bertopeng.

The size-adjusted CoverFlow. The scrollRect is in effect.

Sulit untuk mengatakan bahwa scrollRect bekerja pada saat ini, tapi setidaknya Anda harapkan hasil untuk sekarang. Menghapus dua baris baru saja ditambahkan; kita akan ingin memainkannya ukuran penuh untuk meneruskan pembangunan.


Langkah 13: Menambahkan properti untuk menutupi

Kita akan kembali ke CoverFlow.as di masa depan, tetapi untuk sekarang kita akan fokus pada mendapatkan instance penutup individu untuk mempercepat.

Mari kita berpikir tentang apa sampul akan perlu untuk melakukan. Ini akan perlu untuk memuat dan menampilkan gambar. Ini akan perlu untuk menampilkan keterangan. Itu harus diposisikan. Ini juga akan perlu untuk menampilkan refleksi di bawah gambar. Ketika kita mendapatkan untuk XML data, kita akan memiliki masing-masing menutupi menyimpan node XML yang berkaitan dengan hal itu, sehingga kita dapat menyimpan informasi tambahan terkait dengan penutup terkait. Dan akan perlu untuk mengirimkan beberapa peristiwa, kemajuan beban, beban lengkap, pilih (untuk ketika penutup datang ke posisi tengah), dan klik. Sampul pasti bisa berbuat lebih banyak, tetapi untuk sekarang, kemampuan ini sangat erat cocok apa iTunes pelaksanaan Cover Flow tidak, dan akan membantu menjaga kami tutorial untuk lingkup yang wajar. Untuk kode, set fitur ini berarti:

Memuat gambar yang kita akan membutuhkan sebuah Loader untuk memuat gambar, bersama dengan menentukan URL gambar untuk memuat.

Menampilkan gambar yang kita harus menambahkan Loader ke tampilan daftar.

Tampilan Caption kita akan perlu untuk dapat mengatur keterangan, memasukkannya ke dalam TextField, dan menampilkan TextField. Catatan bahwa ini membuka kaleng cacing yang gaya teks, dan pertanyaan tentang berapa banyak kontrol gaya untuk membuka di luar kelas. Untuk tujuan kita, kita akan tetap dengan style standar. Jika Anda ingin sebuah implementasi yang memungkinkan user-ditentukan gaya, itu adalah latihan untuk nanti.

Namun, perhatikan bahwa dalam referensi pelaksanaan Cover Flow, keterangan tidak terikat pada gambar cover, ini adalah daerah yang tetap di bawah pusat di seluruh tampilan layar. Apa yang akan kita butuhkan adalah tidak TextField untuk setiap objek Cover, tetapi TextField tunggal untuk seluruh sistem memainkannya. Semua penutup objek perlu lakukan adalah menyimpan keterangannya. Kita akan memiliki memainkannya kemudian menarik informasi dari masing-masing menutupi seperti yang terfokus dan menangani dengan tampilan. Sehingga semua kita benar-benar butuhkan sekarang adalah sebuah mekanisme penyimpanan untuk keterangan.

Tampilan gambar refleksi ini akan membutuhkan sebuah objek Bitmap dan fanciness BitmapData beberapa, tapi tidak sulit. Namun, itu memerlukan bahwa kita tahu warna latar belakang umum Cover Flow seluruh layar, karena cara termudah untuk menangani transparansi refleksi adalah tidak benar-benar menjadi transparan (jika mereka, kita akan memiliki overlaying refleksi Tampilkan melalui satu sama lain). Jadi, kami akan memerlukan bahwa warna latar belakang dilewatkan dalam ke konstruktor kami dari memainkannya.

Juga, kita akan ingin menggantung ke Bitmap, tetapi BitmapData dapat menjadi suatu obyek yang digunakan untuk membuat refleksi di tempat pertama.

Posisi karena kami sedang subclassing Sprite, apa pun yang kita menampilkan dalam Sprite yang secara otomatis diposisikan sebagai unit oleh sifat posisi sprite. Kita tidak perlu melakukan apa-apa untuk mendapatkan fungsi ini, selain pastikan bahwa kita menambahkan objek tampilan sesuai sebagai anak-anak dari contoh penutup itu sendiri.

XML Data kita akan hanya perlu tempat untuk menyimpan node XML sewenang-wenang dan cara untuk mendapatkan itu kembali keluar dari objek.

Peristiwa lagi, karena kita subclass dari Sprite, kami juga secara otomatis memiliki kemampuan untuk mengirimkan peristiwa. Pada kenyataannya, acara klik sudah didefinisikan oleh Sprite. Beban kemajuan dan lengkap akan benar-benar hanya diteruskan peristiwa dari LoaderInfo Loader yang kita gunakan untuk memuat gambar. Dan pilih akan benar-benar ditangani oleh memainkannya, karena tahu cara untuk mengelola koleksi selimut. Jadi, kita sudah selesai dengan yang satu ini, juga!

Mari kita tambahkan sifat-sifat yang kita butuhkan, setter dan pengambil dimana tepat. Kita akan mengikuti konvensi membuat sebenarnya properti pribadi, dan memberikan akses publik melalui setter dan pengambil.

Dalam Cover.as, menambahkan beberapa properti untuk file kelas. Saya suka untuk menjaga mereka dikelompokkan bersama-sama, di bagian paling atas dari definisi kelas:

Menulis dan setter Getter:

Mengapa hanya memiliki ini? Yah, benda-benda lain benar-benar tidak perlu akses ke Bitmap atau Loader, dan untuk keterangan dan data, kami akan beroperasi pada asumsi bahwa setelah nilai-nilai yang ditetapkan, mereka tidak perlu mengubah. Kita akan berurusan dengan yang di langkah berikutnya.

Pergi ke depan dan menguji hal ini. Tidak akan ada perubahan untuk mencatat; Anda harus masih hanya melihat kotak merah. Tapi dengan menguji film kita menjalankan hal-hal melalui compiler, yang membantu kita menemukan kesalahan harus ada diperkenalkan. Jika semua berjalan lancar, film akan berjalan dan Anda akan melihat red square. Di sini adalah kelas penutup lengkap sampai sekarang:


Langkah 14: Mengatur properti

Seperti disebutkan, kami akan menetapkan sifat seperti teks, data dan warna latar belakang melalui konstruktor. Memodifikasi Pembina Cover.as sehingga dibutuhkan tiga nilai, dan kemudian transfer nilai-nilai tersebut ke sifat yang sesuai. Perubahan ke konstruktor di bawah ini yang disorot:

Sekarang, kembali di CoverFlow.as, kita perlu memberikan nilai ketika kita membuat tes kami penutup atau lain kita akan mendapatkan kesalahan. Dalam konstruktor:

Kami jelas menggunakan dummy data sekarang, tapi ini aman harus mengkompilasi. Sekali lagi, kita tidak akan melihat perubahan apapun, tetapi tes film untuk memastikan Anda belum memperkenalkan kesalahan. Namun, kita dapat menulis tes cepat dari apa yang kita menulis dengan menelusuri nilai-nilai pengambil. Masih dalam konstruktor memainkannya:

Anda harus melihat berikut dalam panel Output Anda:

The results of tracing our new getters

Ini memverifikasi bahwa kita benar pengaturan dan mendapatkan setidaknya caption, data XML dan backgroundColor properti.


Langkah 15: Memuat gambar

Untuk langkah ini, kita akan perlu gambar untuk memuat. Ada beberapa dalam paket download untuk tutorial ini, sudah dipotong dan berukuran sebagai kotak. Mari kita hanya memilih satu untuk memuat. Aku akan menggunakan "best.jpg."

Pertama, meletakkan folder gambar dalam folder proyek yang sama yang Anda telah menggunakan. Seharusnya berada di lokasi yang sama seperti CoverFlowTest.swf Anda. Baik drop folder foto dari download di sini, atau membuat folder foto Anda sendiri di sini dan menempatkan gambar yang Anda inginkan untuk me-load ke dalam folder itu.

The current project folder structure

Selanjutnya, dalam konstruktor Cover.as, menghapus garis-garis yang menarik red square.

Sekarang, membuat metode umum yang disebut beban. Ini akan menerima string URL sebagai parameter, menyimpannya dalam properti _src, dan kemudian load gambar dari URL itu.

Ini adalah standar Loader hal. Ini akhirnya akan sampai dengan objek lain (seperti memainkannya) untuk memberi makan nilai ini penutup.

Kami telah menambahkan tiga pendengar acara, Semua makanan standar untuk loading. Mari kita menulis beberapa fungsi pendengar rintisan sehingga kita dapat menguji. Tambahkan kode ini ke kelas Anda. Ini adalah metode baru, tidak kode dalam metode lain:

Akhirnya kita akan melakukan sesuatu yang lebih berguna dengan ini, tetapi untuk sekarang kita akan api dari jejak hanya untuk memastikan fungsi dipanggil dalam menanggapi peristiwa. Untuk referensi, seluruh kelas harus terlihat seperti ini (tambahan dari langkah ini disorot):

Sekarang, untuk menguji ini, kita perlu untuk naik kembali ke CoverFlow.as dan di beberapa titik dalam konstruktor, memanggil metode beban dan lulus dalam berlaku path ke gambar:

Jika Anda menguji film sekarang, tidak hanya harus Anda melihat gambar muncul tempat red square:

A Cover loading an image

... tapi Anda juga harus melihat beberapa jejak di panel Output yang mengkonfirmasikan bahwa kemajuan dan lengkap peristiwa penembakan (kemajuan Anda sebenarnya acara mungkin berbeda):

Events tracing to the Output panel

Jelas, beban selesai karena gambar muncul, tetapi baik untuk memastikan kita terhubung acara dengan benar. Jika Anda ingin menguji acara kesalahan, hanya mengubah nilai jalan melintasi konstruktor penutup untuk sesuatu yang tidak akan bekerja, dan Anda akan melihat jejak berbeda.


Langkah 16: Pusat gambar

Gerakan dalam "arus" memiliki dua persyaratan. Pertama, item perlu memutar tentang sumbu vertikal yang berpusat horizontal pada gambar. Kedua, Bagian bawah gambar perlu disesuaikan dengan "tanah" sehingga gambar dari berbagai tinggi semua "duduk" pada pesawat yang sama.

Untuk memudahkan rotasi vertikal, kita dapat pusat gambar horizontal dalam kaitannya dengan Sprite yang mengandung. Demikian pula, untuk memudahkan penyelarasan bawah, kami dapat posisi gambar sehingga ujung bawah di sumbu x sprite yang mengandung. Untuk menarik ini off, kita perlu tahu ukuran gambar yang kita baru saja dimuat. Untuk menentukan bahwa, kita perlu memastikan bahwa gambar ini dimuat sebelum mencoba untuk bekerja dengan ukuran. Jadi, semua kebutuhan kode kita centering berada di handler lengkap.

Menambahkan ini ke metode onLoadComplete Cover.as (dan menghapus jejak yang ada saat ini):

Jika Anda menguji ini sekarang, Anda mungkin tidak akan melihat gambar sama sekali, karena sprite penutup yang diposisikan di (0, 0) di panggung, tapi semua yang terlihat konten adalah di atas titik pendaftaran sprite penutup. Jadi, sebelum pengujian, menambahkan beberapa baris kode untuk posisi objek penutup di CoverFlow.as, hanya setelah membuat tes penutup objek:

Tes aplikasi Anda sekarang, dan Anda akan melihat gambar di suatu tempat di tengah panggung.
Jika Anda suka, Anda dapat kembali dan kembali menguji pengaturan lebar dan tinggi memainkannya (Lihat langkah 12) untuk melihat apakah scrollRect bekerja untuk keluar memainkannya isi topeng. Anda akan melihat sebuah objek penutup parsial.


Langkah 17: Mencerminkan Image

Sekarang kita masuk ke dalam beberapa hal yang lebih menantang. Kita akan mengambil gambar yang kita baru saja dimuat dan menciptakan salinan yang membalik vertikal (yaitu adalah berputar di sekitar tepi bagian bawah). Kita akan menggunakan BitmapData untuk mengkloning tampilan gambar. Seperti sebelumnya, karena kita perlu gambar yang sebenarnya sebelum kita bisa melakukan ini, kita akan memulai gambar refleksi dalam onLoadComplete metode:

Itulah banyak kode yang mungkin asing bagi Anda, tergantung pada berapa banyak Anda telah bekerja dengan BitmapData.

BitmapData, pertama-tama, adalah kelas yang memungkinkan Anda bekerja dengan pixel bitmap. Baris pertama menciptakan satu, menentukan lebar dan tinggi, transparansi, dan default mengisi warna.

Hal berikutnya yang akan kita lakukan adalah biasanya operasi lurus ke depan, mana kita menarik grafis lain tampilan objek menjadi representasi diberikan bitmap. Namun, kita tidak ingin sebuah klon lurus, kami ingin membalik gambar. Kita bisa melakukannya oleh lewat di sebuah matriks objek ke parameter kedua metode menarik. Sebuah objek matriks mewakili geometris, dua dimensi transformasi, termasuk skala, rotasi, dan terjemahan (atau posisi). Jadi, sebelum kita melakukan operasi menarik, kami membuat objek matriks baru. Kemudian kita akan menggunakan metoda skala pada matriks untuk flip vertikal (dua argumen adalah skala horisontal dan vertikal skala; 1 menjadi tidak ada perubahan dan menjadi inversi -1). Selanjutnya, karena skala operasi melakukan demikian pula untuk bagaimana menampilkan benda bekerja, kita benar-benar skala gambar sehingga "menunjuk" arah lain. Jadi kita perlu reposisi untuk mendapatkan kembali ke kanvas bitmap. Metode terjemahan melakukan ini, reposisi skala gambar menurut gambar tinggi.

Dengan membalik gambar diwakili dalam sebuah objek BitmapData, kita perlu untuk benar-benar menampilkannya dalam sebuah Bitmap objek. BitmapData adalah representasi data yang murni dan tidak, itu sendiri, tampilan. Namun, objek Bitmap dapat, dan mudah cukup mengambil BitmapData objek sebagai parameter ke konstruktor nya, jadi kita membuat Bitmap, menambahkannya ke daftar tampilan dan akhirnya posisi itu horizontal untuk itu selaras dengan gambar asli.

Coba ini keluar, dan Anda harus melihat ganda.

The image showing off a reflection

Operasi BitmapData yang dapat membingungkan, jadi jika mereka tidak jelas bagi Anda saat ini saya mendorong Anda untuk melanjutkan informasi di atasnya. BitmapData membuka beberapa kemungkinan yang sangat menarik, jadi it's worth belajar lebih banyak tentang.


Langkah 18: Memudar refleksi

Sekarang, untuk membuat refleksi memudar, kita perlu memudar untuk warna latar belakang, dan menjaga refleksi buram. Ini akan memberikan tampilan yang transparan, tapi jika kita menjaga buram, satu refleksi dapat berlapis di atas lain tanpa semakin rendah satu menampilkan melalui. Pergi ke depan dan melihat preview lagi jika Anda perlu untuk memvisualisasikan ini:

Faded reflections

Kami akan menambahkan sekelompok gambar kode untuk drawReflection (di Cover.as). Berikut adalah seluruh metode, dengan perubahan disorot:

Yup, itu adalah cukup banyak kode untuk mengunyah. Singkatnya, itu menciptakan objek bentuk lain, di mana kita menarik gradien linier. Gradien diatur menjadi warna yang sama sebagai latar belakang utama, dengan alpha perubahan yang terjadi dari setengah transparan untuk sepenuhnya buram, atas ke bawah. Gradien ini kemudian mendapat digabung menjadi BitmapData yang sudah berisi refleksi membalik gambar, sehingga efek akhir adalah refleksi yang memudar keluar untuk warna latar belakang.

Pergi ke depan dan coba ini keluar, Anda harus merasa baik tentang mendapatkan hasil ini:

A nicely faded reflection

Namun, jika Anda menguji ini lebih lanjut dan mencoba mendirikan contoh memainkannya di CoverFlowTest dengan warna latar belakang selain hitam, Anda akan melihat beberapa hasil yang tak terduga:

A not-so-nicely faded reflection

Kami akan alamat berikutnya ini.


Langkah 19: menjaga melacak yang contoh Cover

Kami saat ini menggunakan contoh memainkannya sebagai tempat untuk menguji satu contoh Cover. Dan meskipun kami akan akhirnya menyingkirkan contoh tes, kita sekarang perlu untuk menyimpannya di daftar resmi dari semua kasus. Kita akan menciptakan Array menutupi kasus, dan setiap orang yang mendapat menciptakan akan disimpan dalam Array. Sebenarnya, karena kami menargetkan Flash 10, kita dapat membuat vektor, yang akan menawarkan peningkatan kinerja kecil.

Pertama, di CoverFlow.as, menyatakan vektor, bersama dengan sisa properti:

Kemudian, instantiate vektor yang segera. Dalam konstruktor, meletakkan baris ini tepat setelah Anda mengatur _width dan _height:

Dan setelah "ujian" menutupi objek telah dibuat (masih dalam konstruktor), menambahkannya ke vektor:

Bagian atas kelas memainkannya Anda akan terlihat seperti ini (tambahan disorot):


Langkah 20: Mengatur warna latar belakang dari selimut

Sekarang, di backgroundColor setter, kita tidak hanya perlu untuk menarik latar belakang utama, tetapi kita perlu menginformasikan semua kasus penutup kami yang telah berubah warna latar belakang. Seluruh metode akan terlihat seperti ini (kode disorot):

Kemudian, di kelas Cover, memperbarui setter backgroundColor nya sehingga itu redraws refleksi:

Terakhir, kita perlu untuk melakukan pengecekan kesalahan. Dalam kasus uji bahwa kami telah menyiapkan sekarang, backgroundColor mendapat ditetapkan sebelum gambar beban (dan ini adalah tindakan yang wajar; biasanya Anda akan mengatur memainkannya dan memberikannya backgroundColor segera, seperti yang memuat gambar). Karena ini, Loader memiliki lebar dan tinggi dari 0, yang membuat baris pertama dari drawReflection menghasilkan kesalahan. Jika Anda menetapkan backgroundColor objek memainkannya sekarang dan menguji film, Anda akan melihat ini:

Runtime error from trying to set the background color too soon

Hal ini cukup mudah untuk menangani. Jika Loader memiliki lebar dan/atau ketinggian 0, kita bisa berasumsi bahwa loader belum selesai loading belum. Jadi, baris pertama drawReflection dapat memeriksa ini:

Hanya keluar metode, dan semuanya akan beres. Jangan khawatir, kita juga menyebut drawReflection dari onLoadComplete, jadi saat itu, properti _backgroundColor akan ditetapkan dengan nilai yang benar, dan Loader akan dimuat, sehingga kita dapat menarik. Dalam hal kita ingin mengubah warna latar belakang setelah gambar telah dimuat, ini masih bekerja, karena Loader akan memiliki dimensi bukan nol, dan drawReflection akan berjalan dari backgroundColor setter.

Mencobanya: kembali ke CoverFlowTest dan mengatur contoh memainkannya latar belakang warna:

Dan Anda akan memiliki satu jeruk mulia yang terjadi:

Orange background and orange reflections

Merasa bebas untuk menghapus baris setelah Anda puas bahwa warna latar belakang dan refleksi bekerja (apa, Anda tidak suka orange?).


Langkah 21: Menulis sumber Data XML

Kita akan melanjutkan untuk menyediakan satu set data yang nyata untuk mendorong sepotong ini. Citra tes kita bisa pergi, dan kita akan mulai menampilkan satu set gambar.

Kami akan beranggapan bahwa untuk menyediakan data untuk objek memainkannya, itu akan paling mungkin disediakan sebagai file XML eksternal. Ini membuat lebih mudah perubahan hidup konten, tetapi juga memungkinkan kita untuk memuat lebih dari satu file XML untuk menggunakan kembali memainkannya modul yang sama dengan konten yang berbeda dalam film sama.

Sebelum kita menulis ActionScript untuk menangani XML, mari kita menulis file XML kami. Buat sebuah file teks baru yang disebut coverFlowImages.xml dalam folder yang sama sebagai CoverFlow.fla file. Akan ada akar, tentu saja, dan dalam itu hanya akan menjadi daftar gambar node, satu untuk setiap item untuk muncul di aliran. Format umum untuk node gambar akan terlihat seperti ini:

Hal ini diasumsikan bahwa gambar akan memiliki jalur gambar, dan mungkin judul. Namun, kita mungkin ingin mengaitkan data lebih dengan setiap gambar, yang mungkin saja teks sederhana, atau kami bahkan dapat menyediakan struktur XML bersarang dengan data yang kompleks dalam, misalnya:

Intinya di sini adalah bahwa dalam gambar node, kita dapat menempatkan apapun yang kita inginkan (dari panjang dan kompleks XML data tidak sama sekali). Data ini akan tersedia melalui kelas memainkannya, sebagai node XML itu.

Berikut adalah dokumen lengkap kami akhir (saya menggunakan gambar dan link lain dalam membangun), daftar gambar dan data yang diambil dari active.tutsplus.com:

Tampak seperti banyak, tetapi itu adalah benar-benar hanya daftar gambar node dengan dua atribut, src dan judul, dan <link> node bersarang dalam<image>node, yang memiliki URL artikel yang terkait dengan gambar.</image>


Langkah 22: Memuat XML File

Untuk memuat XML, kita akan perlu tempat untuk menyimpan XML, dan properti URLLoader untuk memuat XML. Kami akan memerlukan metode umum untuk memulai beban dengan String URL, beberapa internal event handler untuk URLLoader untuk menangani peristiwa-peristiwa beban XML. Unsur-unsur dari langkah ini cukup standar tarif untuk memuat XML, jadi saya hanya akan tumpukan itu semua dalam satu langkah dan tidak menghabiskan terlalu banyak waktu menjelaskan hal-hal.

Mulailah dengan menambahkan dua sifat, satu untuk urlLoader dan satu untuk xml, di bagian atas kelas memainkannya, dengan sisa properti.

Dalam konstruktor memainkannya 's, membuat dan mengatur URLLoader (tidak benar-benar peduli mana dalam konstruktor, tapi aku 'm memilih pada akhir):

Menulis acara URLLoader fungsi penanganan, di suatu tempat di tubuh utama dari kelas Anda:

Sekarang kita berada hanya melacak hal; kami memastikan kami mengkonversi data URLLoader ke XML, maka meludahkannya sebagai-adalah. Kami juga menangani kesalahan dalam kasus kita mendapatkan URL yang buruk untuk memuat. Kita bisa melakukan sesuatu pengujian di sini, tetapi untuk sekarang kita akan benar-benar hanya mencegah kesalahan menghentikan segala sesuatu, sementara masih melacak pesan.

Kami memerlukan metode umum beban, untuk memulai beban XML. Kita bisa berasumsi bahwa jika ada sudah sesuatu dimuat, kita harus membersihkan pertama, kemudian mulai beban baru. Untuk itu, kita akan tidak hanya mulai beban pada URLLoader, tetapi juga memanggil metode yang disebut clearContents untuk menghapus apa-apa yang sebelumnya dibuat di memainkannya. Kita akan mengisi yang kemudian, tapi kami akan merencanakan untuk itu dan menyebutnya, dan menciptakan metode kosong ke rumah itu.

Terakhir, kita perlu meng-upgrade pengujian kami. Kita perlu untuk menghapus garis-garis yang membuat tes penutup dari memainkannya di konstruktor (Aku sudah berkomentar mereka di sini sehingga Anda dapat mengidentifikasi mereka, tapi pergi ke depan dan menghapusnya. Snipet kode berikutnya fungsi ini akan memiliki mereka dihapus):

Dan kemudian kita perlu kembali ke CoverFlowTest.as dan menambahkan panggilan untuk memuat. Lulus dalam file coverFlowImages.xml yang kami ciptakan dalam langkah terakhir.

Anda harus melihat kami dokumen XML yang dilacak ke Output panel.


Langkah 23: Mengurai XML

Selanjutnya kita perlu untuk mengurai XML dan akhirnya melakukan sesuatu dengan data. Kami akan mem-parsing dalam langkah ini, dan mulai melakukan sesuatu dengan itu di langkah berikutnya.

Dalam metode onXMLLoad memainkannya, menghapus jejak dan menggantinya dengan beberapa dasar XML perulangan. Untuk sekarang, kita akan menjejaki nilai-nilai untuk memastikan kami sedang parsing mereka dengan benar.

Tidak ada sesuatu yang terlalu istimewa terjadi. Kami hanya Anda memilih semua gambar node, loop atas mereka, dan kemudian mengeluarkan atribut dari mereka. Sekarang, kita akan melakukan sesuatu dengan mereka.


Langkah 24: Membuat objek Cover

Kita akan memiliki potensi untuk memuat beberapa gambar. Akan lebih baik untuk mengontrol beban dengan memuat satu per satu waktu. Hal ini akan memaksimalkan bandwidth untuk masing-masing gambar, membiarkan gambar pertama muncul secepat mungkin, sehingga ada sesuatu untuk melihat pada layar sebelum terlalu lama. Juga, kebanyakan browser cenderung throttle jumlah permintaan secara bersamaan pula, jadi daripada membiarkan browser mengontrol itu, kita mungkin juga mengendalikannya di Flash.

Untuk bekerja dalam hal ini, kita harus benar-benar memuat beberapa gambar menjadi beberapa benda-benda penutup, jadi kita akan mulai dengan menciptakan objek Cover dan mulai beban. Kami akan kemahiran proses selama beberapa langkah berikutnya.

Dalam memainkannya 's onXMLLoad metode, kami akan menghapus jejak-jejak dan sebaliknya membuat objek penutup:

Anda akan melihat bahwa kita sedang melakukan mungkin apa yang Anda harapkan: pertama, kita membuat objek baru Cover, melewati dalam data yang diambil dari XML. Kemudian kami tambahkan ke daftar tampilan. Selanjutnya kami posisi itu; ini bersifat sementara, tetapi akan memungkinkan kita untuk melihat hasil untuk sekarang. Nilai x didasarkan pada jumlah iterasi, sehingga kita mendapatkan penempatan kiri-ke-kanan. Sekali lagi, kami akan meninjau kembali tata letak logika, ini adalah hanya untuk melihat sesuatu sekarang.

Kemudian kami memberitahu penutup untuk me-load dengan sumber gambar yang ditemukan dalam XML, dan akhirnya menyimpan penutup objek dalam kita _covers vektor.

Panggilan ini untuk memuat juga sementara; Sekarang kita hanya membuat yakin bahwa kami berhasil menciptakan objek penutup dari XML data. Kita akan melanjutkan untuk memuat gambar berikutnya secara berurutan.

Jika Anda menerbitkan sekarang, Anda harus melihat sesuatu yang setidaknya sedikit menarik:

Covers that load images from the XML document

3D tidak lagi, tapi itu akan datang. Bersabar!


Langkah 25: Memuat gambar dalam urutan

Kita akan beralih logika dari pemuatan setiap penutup segera untuk memuat mereka secara progresif. Ini akan melibatkan menjaga melacak yang counter yang menunjuk ke penutup yang saat ini sedang loading, dan fungsi yang memuat sampul berikutnya. Kami memiliki beberapa berhenti di sepanjang jalan, jadi mengikuti bersama.

Pertama, dalam Cover, kami ingin memastikan bahwa kita kembali mengirimkan peristiwa yang lengkap setelah Load gambar. Dalam onLoadComplete, tambahkan baris ini pada akhir:

Sisa perubahan kami akan terjadi dalam memainkannya. Pertama, tambahkan properti untuk melacak saat ini memuat Cover oleh indeks:

Kemudian, di onXMLLoad, kami akan menghapus var src:String =... dan cover.load(src) baris, dan set _loadCounter properti untuk 0, serta panggilan metode yang kita tidak menulis lagi:

Sekarang mari kita menulis metode loadNextCover. Idenya adalah untuk mengambil nilai sekarang dari _loadCounter dan menggunakannya untuk menargetkan sampul dan gambar sumber.

Pertama, kita mendapatkan objek Cover dibuat sebelumnya dari _covers vektor. Maka kita mendapatkan URL gambar tersebut cocok dengan kembali ke data dari XML dan menemukan gambar node menggunakan nilai yang sama dari _loadCounter. Kemudian kami hanya meminta penutup untuk memuat URL itu. Akhirnya, kita menambahkan pendengar yang lengkap, yang kita butuhkan untuk menulis berikut:

Setiap kali sebuah Cover selesai loading, mari kita pertama membersihkan diri kita dan menghapus pendengar acara lengkap. Kemudian akan kenaikan _loadCounter dan kemudian memeriksa untuk melihat apakah kita dapat masih memiliki sampul yang tersisa di _covers vektor. Jika kita lakukan, maka kita sebut loadNextCover() lagi, yang mulai proses atas lagi dengan sampul berbeda dan gambar. Jika tidak, maka kita harus pada akhir, sehingga kami dapat mengirimkan peristiwa yang lengkap.

Untuk menguji acara ini, hop kembali ke CoverFlowTest dan tambahkan kode berikut:

Ini harus langsung: kami hanya menambahkan pendengar untuk peristiwa yang lengkap yang hanya menelusuri. Pergi ke depan dan menjalankan film sekarang. Anda akan melihat gambar muncul secara berurutan, dan, setelah gambar semuanya dimuat, Anda akan melihat pesan "Memainkannya dimuat dan siap untuk pergi." di Output panel.

Proof that all images have loaded.

Langkah 26: Menentukan kemajuan

Untuk dapat mengirimkan peristiwa kemajuan seperti memuat gambar, kita akan hal-hal palsu sedikit. Kami akan menganggap bahwa gambar pertama untuk memuat, rata-rata, perwakilan dari semua gambar. Pasti akan ada kasus-kasus yang mana hal ini tidak benar, tetapi untuk untuk sebagian besar aplikasi kita akan berurusan dengan gambar sama dimensi, kualitas, dan konten, dan karena itu paling gambar akan jatuh di sekitar ukuran file yang sama.

Pertama, kita perlu mengubah metode onLoadProgress di sampul sehingga kami bisa menyingkirkan jejak dan redispatch acara berlangsung:

Kemudian kita akan membutuhkan dua sifat yang lebih dalam memainkannya untuk membantu melacak kemajuan keseluruhan:

Sekarang, hal berikutnya yang harus dilakukan adalah mendapatkan ukuran gambar pertama setelah itu mulai loading. Kita perlu memastikan bahwa kami menambahkan pendengar acara berlangsung ketika kita mulai beban. Dalam memainkannya 's loadNextCover metode:

Dan menambahkan onCoverProgress metode:

Sekarang, untuk menguji itu, kembali ke CoverFlowTest dan menambahkan pendengar untuk kemajuan acara:

Dan tes film. Anda harus melihat serangkaian panjang kemajuan jejak, mengakhiri dalam pesan "load", seperti berikut:

You'll see quite a few numbers go by in the Output panel

Tentu saja, Anda akan ingin menampilkan sesuatu yang informatif di panggung, tidak jejak keluar angka. Tugas khusus ini, namun, tidak benar-benar memenuhi memainkannya; itu sudah cukup bahwa itu adalah pengiriman sesuai peristiwa. Saya tidak akan memukul penciptaan sebuah progress bar, dan sebaliknya, aku akan mengubah pekerjaan lebih menarik menampilkan meliputi dalam 3D.


Langkah 27: Refactor logika

Kita akan melihat bahwa loop yang mem-parsing XML, menciptakan objek Cover, dan meletakkan mereka. Mari kita offload logika tata letak untuk metode lain. Menghapus garis-garis dalam lingkaran yang posisi objek Cover (Anda mungkin ingin menyalinnya), dan menambahkan panggilan ke metode belum-untuk--ditulis setelah loop.

Selanjutnya, menulis metode tata letak. It's lain loop, satu ini atas _covers vektor, dan internal itu logika posisi yang sama:

Pergi ke depan dan mengujinya sekarang; Anda harus melihat benar-benar tidak ada perubahan. Satu-satunya perbedaan adalah murni behind-the-scenes logika. Kami telah menambahkan keuntungan adalah bahwa kami akan dapat menelepon layout() setiap saat, independen dari onXMLLoad().


Langkah 28: Layout awal

Mari kita pergi untuk membayar besar sekarang. Kami akan menulis ulang tata letak logika sehingga hal itu mulai terjadi dalam 3D. Menghapus cover.x =... baris dan tambahkan baris disorot di bawah ini (masih dalam memainkannya):

Logika ini membutuhkan banyak cinta, tapi pergi ke depan dan jalankan sekarang, dan Anda harus melihat... sesuatu yang tidak benar.

It's in 3D, but clearly we're not finished

Anda harus melihat potensi tidak, tapi jelas kita perlu mengelola kedalaman. Ini adalah kelemahan untuk menggunakan Flash's built-in kemampuan 3D: menjadikan DisplayObject masing-masing dengan benar, tetapi tidak "adegan" dari beberapa DisplayObjects. Kedalaman 2D normal susun aturan berlaku, bahkan jika "z" objek tersebut harus tempat itu sebaliknya.

Ini sedikit logika, meskipun, memberikan Anda sekilas dari apa yang akan kita lakukan: pertama, menentukan dimana dalam "aliran" penutup diberikan-terpusat, di sebelah kanan atau (akhirnya) di sebelah kiri. Kemudian mengatur x Cover, z dan sifat rotationY tepat. Matematika terlibat dalam posisi sisi kanan x adalah mulut penuh, tapi dapat dibaca seperti ini:

Mulai di pusat (_background.width / 2), memindahkan 60 piksel ke kanan untuk memberikan beberapa ruang di sekitar item terpusat (... + 60), kemudian, tergantung pada mana kita berada dalam lingkaran, pindah penutup selanjutnya ke kanan (... + (saya + 30)).


Langkah 29: Mengelola kedalaman

Mari kita selanjutnya mengatasi kedalaman masalah. Berikut adalah apa yang perlu terjadi: item terpusat perlu paling depan. Setelah itu, item di kedua sisi perlu menjadi penurunan indeks kedalaman lebih lanjut mereka berasal dari pusat. Ini adalah, Untungnya, relatif sederhana untuk mencapai. Menyesuaikan logika di memainkannya di tata letak metode:

Di blok jika pertama, kita berada di tengah penutup, sehingga kami mengatur indeks penutup dengan indeks tertinggi yang tersedia. Dalam blok lain, semakin tinggi saya adalah, semakin rendah nomor indeks yang kita dapatkan. Yang bekerja dibandingkan lainnya meliputi di sebelah kanan, tetapi kita perlu untuk mencatat indeks oleh satu lagi untuk mengakomodasi pusat Cover (tertinggi).

Mencobanya sekarang... Anda akan melihat beberapa visual yang menjanjikan!

Proper depth sorting

Langkah 30: Sisi kiri

OK, sejauh ini kami telah membuat asumsi yang membuatnya sangat sulit untuk meletakkan hal-hal yang nyata. Asumsi besar adalah bahwa kita sedang berpusat penutup pertama (indeks 0). Jika Anda mencoba untuk pusat, mengatakan, penutup keempat, Anda akan mendapatkan hasil yang sangat tidak diharapkan:

The fourth cover centered

Ini tidak terlihat buruk pada pandangan pertama, tetapi berpikir tentang hal itu. Jika kita sedang berpusat penutup keempat, kita berharap untuk melihat tiga meliputi di sebelah kiri, satu-keempat di pusat, dan sisanya di sebelah kanan. Mari kita membuat itu terjadi.

Pertama, mari kita membuat sebuah properti baru (masih dalam memainkannya) yang akan memegang nilai indeks kami saat ini. Mari kita menyebutnya _selectedIndex.

Dan, untuk tujuan pengujian, kami akan menetapkan nilai ke 4 di atas metode tata letak. Ini akan mendapatkan dihapus pada langkah berikutnya. Kemudian, kami akan mengolah logika dalam loop tata letak untuk menjadi sedikit lebih dinamis.

Itu banyak logika dan matematika, tapi itu benar-benar agak berulang-ulang. Baru blok di tengah, tapi hampir identik dengan yang lain lain jika memblokir, hanya beberapa hal dibalik. Tapi pergi ke depan dan menguji film, seharusnya terlihat seperti ini:

Proper depth sorting

Perubahan besar itu pindah dari saya sebagai faktor langsung penempatan meliputi, tetapi sebaliknya menentukan jarak yang saya dari indeks saat ini. Yang lebih jauh, selanjutnya merupakan berjarak x harus dari pusat, dan juga kembali makin jauh di kedalaman telah menjadi. Matematika adalah hanya terjemahan dari apa yang kami lakukan sebelum untuk pendekatan yang lebih dinamis. Jika Anda suka, pergi ke depan dan mencoba mengatur _selectedIndex ke nilai-nilai lain, dan memastikan bahwa Anda mendapatkan hasil yang Anda harapkan.


Langkah 31: Menyesuaikan penampilan

Anda mungkin merasa bahwa distribusi mencakup adalah sedikit sempit (saya tahu saya lakukan, tetapi saya harus bekerja dalam batas lebar 600 pixel yang Activetuts + tempat saya). Bahkan, ada beberapa parameter posisi yang dapat men-tweak untuk menyesuaikan tampilan keseluruhan. Kita akan pergi ke depan dan membuat sekelompok properti, setter terkait dan pengambil, untuk menangani kustomisasi ini. Dan kita akan tentu saja menggunakan properti-properti bukan keras-kode nomor dalam metode tata letak kami.

Ini akan menjadi langkah panjang, tapi jangan takut, itu cukup mendasar.

Pertama, properti:

Properti ini akan mengontrol berikut:

  • centerMargin kontrol jumlah ruang di kedua sisi pusat Cover dan selimut pertama ke samping. Ini harus menjadi nilai positif.
  • horizontalSpacing mengontrol jumlah ruang antara meliputi dalam "kembali." Semua penutup di sebelah kiri dan kanan (tapi tidak menghitung pusat) akan memiliki jumlah yang sama ruang di antara meliputi berdekatan. Ini harus menjadi nilai positif.
  • backRowDepth mengontrol seberapa jauh ke belakang barisan belakang adalah. Ini akan dalam bentuk sebuah offset, sehingga mencegah barisan belakang dari yang di depan pusat penutup. Ini harus menjadi nilai positif.
  • backRowAngle kontrol sudut di mana mencakup di barisan belakang akan berubah. Ini adalah semacam nilai mutlak, dan nilai adalah "cermin" untuk sisi lainnya. Itu harus dibatasi antara 0 dan 90.
  • verticalOffset kontrol jumlah yang digunakan untuk memindahkan seluruh set meliputi atas atau bawah, offset dari nilai y secara otomatis ditetapkan. Ini bisa menjadi nomor. Kita akan kembali kepada sedikit logika, tetapi kita juga dapat menulis properti, penyetel dan pengambil sementara kita lakukan yang lain empat.

Kami akan membuat konstanta mengandung nilai-nilai default dari masing-masing properti ini. Ini dapat pergi dengan sisa properti Anda:

Dalam konstruktor, menetapkan masing-masing properti nilai-nilai default ini (jika Anda tidak menyukai nilai-nilai default, Anda dapat mengubah mereka, bahwa bagian dari alasan untuk menempatkan mereka bersama-sama yang mudah untuk menemukan tempat). Dengan cara ini kita akan pastikan bahwa setiap variabel ini ditetapkan dengan nilai cocok bahkan jika pengguna tidak pernah ditentukan salah satu.

Dan, dengan nilai yang valid dalam pikiran, menulis dan setter Getter (Aku akan menempatkan ini tepat setelah kami saat ini setter dan pengambil, di sekitar baris 89):

Dan akhirnya kita perlu mengganti nomor tertanam di logika tata letak kami dengan sifat-sifat ini. Dalam tata letak:

Anda dapat menguji film seperti, dan hal-hal harus berfungsi persis seperti yang mereka miliki sebelumnya. Namun, Anda juga bisa menguji properti ini dengan menetapkan mereka dari CoverFlowTest. Mengatur mereka namun Anda (pada kenyataannya, pastikan untuk menguji nilai ilegal, seperti -200 untuk centerMargin), misalnya:

Things are a little more spread out with these settings

Langkah 32: Efisien Layout

Sekarang, memainkannya kami bekerja dan agak customizable, tetapi hanya jika kita mengatur nilai sebelum memuat XML file. Seperti yang sekarang, menetapkan sifat pada setiap titik setelah itu akan mengakibatkan tidak ada perubahan.

Ini bisa menjadi semudah hanya memanggil layout() dari masing-masing setter. Namun, ini rentan terhadap penggunaan yang tidak efisien siklus CPU. Jika Anda perlu untuk mengatur semua properti lima dalam satu kali kejadian, yang akan berakhir melaksanakan tata letak logika 5 kali berturut-turut, 4 pertama menjadi sia-sia karena Anda tidak melakukan setting nilai untuk apa yang Anda perlu.

Karena Flash beroperasi pada model frame dari render, dimana melaksanakan kode di antara setiap frame, dan kemudian tampilan diperbarui, kita perlu cara untuk hanya menjalankan metode tata letak ketika panggung akan diberikan untuk frame berikutnya. Ini bisa Mari kita mengatur properti sebanyak yang kita suka, tapi masih hanya redraw memainkannya sekali per frame.

Ada cara mudah untuk melakukan ini, Untungnya, tapi itu mengambil beberapa sarana. Kita perlu memanfaatkan acara RENDER. Acara RENDER akan mendapatkan Dikirim oleh DisplayObject ketika panggung adalah tentang untuk mendapatkan diterjemahkan, tapi sebelum membuat terjadi. Sebagai bonus, acara tidak pengiriman ketika Flash Player diminimalkan, berarti kita tidak boleh membuang siklus jika Anda bahkan tidak bisa melihat film.

Menerapkan ini adalah proses tiga langkah: pertama, kita perlu untuk mendengarkan acara. Dalam konstruktor memainkannya, tambahkan baris ini:

Selanjutnya, tambahkan metode pendengar:

Yup, itu adalah itu... kita akan hanya menelepon tata letak setiap kali kita mendapatkan acara.

Terakhir, kita perlu menelepon membatalkan di panggung setiap kali kita ingin membuat acara datang dengan cara kami. Ini berarti bahwa setiap dari setter, kita perlu tambahkan baris ini pada akhir:

Jika tidak ada tahap, kita tidak ingin untuk memanggil metode dan menyebabkan kesalahan referensi objek null. Lagi pula, jika tidak ada tahap, maka objek memainkannya bukan pada tampilan daftar anyway, sehingga tidak ada gunanya meminta untuk membuat acara.

Panggilan untuk membatalkan, bagaimanapun, adalah bagaimana kita bisa membuat acara untuk api. Tanpa panggilan itu, kita tidak akan mendapatkan acara, bahkan dengan pendengar acara. Jadi, kita perlu ini dalam berbusana setiap:

Jadi sekarang, jika kita mengatur properti 5 pada saat yang sama, kami mungkin membatalkan panggilan pada tahap lebih dari sekali, tapi itu baik, bahwa tidak akan menyebabkan masalah. Kita harus mendapatkan satu peristiwa RENDER sebagai akibatnya, berarti kita meletakkan keluar memainkannya hanya sekali per frame.

Untuk menguji ini, kita dapat menempatkan beberapa jejak ke metode kami, dan kemudian menetapkan properti ini setelah XML telah dimuat. Pertama, menambahkan pesan jejak ke onRender:

Kemudian, dalam CoverFlowTest, menetapkan semua 5 properti di onCoverFlowLoaded:

Anda harus melihat film memuat gambar seperti sebelumnya, namun, kali ini, gambar harus melompat ke tata letak yang sedikit berbeda setelah semua gambar telah dimuat. Ini membuktikan bahwa hal-hal bekerja secara visual, tetapi lebih penting lagi, periksa Output panel. Anda akan melihat pesan "membuat" tunggal. Kita dipanggil stage.invalidate dari setter 5, tapi yang mengakibatkan hanya satu RENDER peristiwa, yang adalah apa yang kita setelah.

Merasa bebas untuk menghapus jejak dan kode tata letak kami hanya menambahkan.


Langkah 33: berkumpul kembali

Sudah beberapa saat sejak saya telah terdaftar kode kelas penuh. Pekerjaan kami telah terutama memainkannya. Inilah keadaan saat ini dengan kelas:


Langkah 34: Caption

Kami memiliki beberapa hal untuk membereskan sebelum kita interaktivitas animasi dan menyenangkan. Kami akan mengambil pada label. Untuk mendapatkan bergulir ini, kita hanya perlu field teks. Kami akan membuat beberapa default styling, dan membuka gaya untuk kustomisasi di langkah berikutnya.

Pertama, membuat TextField, dan menambahkannya ke memainkannya. Dalam memainkannya, bersama dengan sisa properti Anda, membuat sebuah properti TextField:

Kemudian mengatur it up di konstruktor (di mana pun baik-baik saja, tapi aku meletakkan setelah segala hal lain dalam konstruktor):

Akhirnya, dalam tata letak, tambahkan dalam garis untuk menetapkan teks dari TextField:

Penciptaan TextField di constructor mungkin sedikit menakutkan. Untuk sebagian besar, meskipun, itu adalah setup TextField cukup standar, semua dilakukan melalui kode. Jika Anda belum pernah melakukan itu sebelumnya, Anda mungkin akan terkejut dengan jumlah baris yang diperlukan untuk mengatur TextField. Ini khas; default TextField dalam cukup hambar, dan kita perlu memastikan bahwa ukuran diatur, bahwa itu adalah multiline textfield, dan bahwa hal itu memiliki format dasar.

Bahkan jika Anda sudah menulis program TextFields sebelum, bisnis "fontName" mungkin masih menjadi kejutan. Ide umum adalah bahwa kita sedang menyiapkan gaya default, berdasarkan Apple menggunakan font Lucida Grande sebagai font sistem mereka. Tapi kita tidak bisa yakin bahwa pengguna akan memiliki font yang (paling, jika tidak semua, Mac menjalankan OS X harus, tapi kita tidak bisa 100% yakin dan PC adalah cerita lain). Jadi kita mendapatkan Array sistem font, menggunakan Font.enumerateFont(true). "Benar" memberitahu enumerateFont untuk menghitung font sistem; Jika tidak, itu membilang emebedded font ke SWF. Ini mengembalikan Array Font objek. Kami mengulang melalui Array itu, mencari font dengan nama mirip dengan "Lucida Grande." Itu adalah kalimat biasa dalam panggilan "Cari", yang hanya memberikan kita beberapa fleksibilitas dalam kasus nama font sedikit berbeda pada satu sistem dibandingkan dengan lain. Jika kami menemukan kecocokan, ambil nama font dan istirahat loop. Jika kita membuat itu melalui loop tanpa pertandingan, hanya menggunakan "Verdana." Ini memberikan kita Lucida Grande jika pengguna memiliki itu, dan mundur sans serif font jika mereka tidak.

Pergi ke depan dan mencobanya; Anda harus melihat label Anda muncul di bawah item terpusat.

The label showing

Juga, Anda mungkin melihat sekelompok jejak-jejak tambahan yang muncul di Output panel. Ini adalah dari loop font di konstruktor. Kita tidak perlu jangka panjang ini, tapi saya pikir itu akan berguna untuk melihat font ini yang disebutkan. Keluaran Anda akan berbeda, tentu saja, tergantung pada font yang diinstal pada sistem Anda.

A sampling of the Output panel, showing fonts on my system

Setelah Anda sudah mengisi Anda memeriksa nama font, Anda dapat menghapus trace(font.fontName); garis dari konstruktor (jalur 74 dalam daftar di atas).


Langkah 35: Aktifkan teks

Sekarang, bagaimana jika Anda ingin menyesuaikan bidang caption sedikit? Itu adalah permintaan yang masuk akal, dan kami memiliki beberapa pilihan. Salah satunya adalah bahwa kita bisa menulis setter dan pengambil untuk hal-hal yang kami ingin mengekspos pengendalian eksternal. Ini mungkin mencakup hal-hal seperti memungkinkan multiline, menyesuaikan lebar, menetapkan warna teks, pengaturan jenis rata, pengaturan font, dan pengaturan ukuran font. Bagian yang baik dari pendekatan ini adalah bahwa hal itu membuat hal-hal yang dikemas dan akan mungkin membuat segalanya lebih mudah untuk programmer yang menggunakan objek memainkannya ini. Jika semua yang perlu Anda lakukan adalah menulis "coverFlow.fontSize = 16" untuk membuat penyesuaian kecil yang satu, maka itu sekitar semudah itu mendapat. The downside adalah bahwa kita perlu untuk memilih dan memilih apa yang terkena, dan lebih banyak kontrol kami menawarkan kode lain kita harus menulis di memainkannya untuk mengakomodasi itu.

Pendekatan lain adalah untuk hanya mengekspos TextField sebagai properti (baca-saja) dari memainkannya. Ini pada dasarnya memiliki hal pro con yang berlawanan sebagai pilihan pertama. Itu mudah bagi kita untuk melaksanakan sekarang, dan memberikan kontrol total kepada pengguna akhir; Jika Anda bisa melakukannya untuk TextField, Anda dapat melakukannya keterangan memainkannya. Namun, melepaskan kontrol terlalu banyak mungkin memiliki efek bencana. Kebanyakan orang tidak akan repot-repot benar-benar menyentuh, tetapi terjadi kecelakaan. Lebih buruk lagi, meskipun (menurut pendapat saya) adalah bahwa dalam rangka untuk mengatur ukuran font judul, Anda berakhir dengan agak verbose (dan sepenuhnya hipotetis, pikiran Anda):

Bukan untuk menyebutkan bahwa ada perbedaan antara defaultTextFormat di setTextFormat(), dan Anda lebih baik akan akrab dengan mana yang digunakan dalam skenario ini.

Jadi mana lebih baik? Dalam dunia ideal, aku harus memilih metode enkapsulasi dimana cukup banyak setiap opsi yang mungkin diperhitungkan. Namun, untuk tujuan dari tutorial ini, itu adalah banyak kode berulang-ulang. Jadi, dalam kepentingan berusaha menunjukkan teknik ini, namun masih memungkinkan kustomisasi yang luas, saya akan menerapkan tiga properti untuk styling teks, dengan hanya mengekspos TextField untuk lebih rinci styling, yang, seperti yang terjadi, adalah pilihan nomor tiga .

Jika Anda suka enkapsulasi dan ingin menghindari mengungkapkan TextField objek-objek eksternal, maka berikut akan bertindak sebagai panduan untuk bagaimana menulis lebih setter.

Kita akan menambahkan properti dan mendapatkan nama font, ukuran font dan warna font. Juga, kami akan menambahkan getter (tidak berbusana) untuk captionField. Sifat styling akan memerlukan penangguhan render seperti tata letak properti, serta perhatian dibayarkan kepada bagaimana menerapkan TextFormat objek. Untuk memulai hal off, menyatakan sebuah properti terus TextFormat objek:

Selanjutnya, kita akan membuat objek constructor ketika kami mendirikan TextField:

Atas hanya menggantikan sementara "format" variabel dari sebelum dengan properti ini.

Selanjutnya kita dapat menambahkan Getter (Aku akan menaruh ini setelah semua setter lainnya dan kami telah menambahkan sejauh pengambil) dan setter:

Mereka semua mirip satu sama lain, satu-satunya perbedaan menjadi tipe data dan sifat TextFormat sebenarnya kita mempengaruhi. Perhatikan bahwa kita tetapkan nilai pada objek TextFormat, kemudian mengajukan permohonan kembali objek sebagai format default untuk keterangan TextField. Kita melakukan ini karena pengaturan defaultTextFormat membuat copy dari objek format, sehingga meskipun kita mengubah referensi kami ke objek ini, kita kehilangan referensi ke salah satu yang benar-benar menetapkan gaya. Singkat cerita, kita perlu me-reset defaultTextFormat setiap kali bahwa perubahan.

Namun, ini hanya menetapkan gaya teks baru datang ke bidang teks. Untuk memperbarui gaya pada teks yang sudah ada di lapangan, kita perlu menggunakan setTextFormat(). Ini, meskipun, menyajikan masalah rendering yang sama seperti sebelumnya. Jika kita menetapkan tiga sifat styling sekaligus, kita tidak selalu ingin mengajukan permohonan kembali format tiga kali berturut-turut. Jadi, alih-alih, kita memanggil stage.invalidate(), yang, seperti yang Anda ingat, akan akhirnya api dari acara RENDER sehingga kami bisa merubah tampilan.

Sekarang, inilah mengapa kami ingin metode onRender terpisah yang dihubungkan ke acara RENDER, bukan hanya mengaitkan metode tata letak langsung untuk itu. Metode tata letak akan memperbarui keterangan, namun, karena kami telah menetapkan format teks default, ada tidak perlu untuk menerapkan format teks setiap waktu tata letak disebut. Kami hanya ingin menerapkan format teks ke teks yang ada, sehingga kami dapat tetap keluar dari tata letak dan meletakkannya di onRender:

Terakhir, kita perlu mengekspos bidang teks itu sendiri. Menulis satu getter terakhir:

Dan untuk menguji semua ini, kami dapat memperbarui CoverFlowTest's onCoverFlowLoaded metode:

Jalankan itu, dan sekali gambar semua beban dan perubahan tata letak, Anda akan melihat keterangan gaya berubah, juga. Merasa bebas untuk menghapus garis-garis ini saat ini.

The (rather ugly but obvious) change to the caption styles

Langkah 36: Posisi vertikal

Anda akan menyadari bahwa judul tidak bergerak dengan sampul ketika mereka menyesuaikan mereka offset vertikal.

Seperti Anda ketahui, kami menambahkan sebuah properti verticalOffset beberapa langkah kembali, dan kami menambahkan ke nilai default 250 ketika posisi kami penutup objek. Mana Apakah 250 yang datang dari? Aku menarik nomor yang keluar dari udara sebagai sesuatu yang bekerja untuk sekarang.

Kita sekarang dapat menerapkan logika sedikit posisi vertikal baris. Kita hanya dapat menguncinya ke bawah dengan margin standar. Jadi, dalam tata letak, mengambil baris yang berbunyi cover.y = 250; dan menggantinya dengan:

Di Apple memainkannya, Bagian bawah baris meliputi sama terkunci ke tepi bagian bawah dari tampilan, tetapi mereka juga mengubah ukuran sampul berdasarkan seberapa tinggi pandangan. Kita akan melewatkan sedikit logika, tetapi ini akan menjadi olahraga yang menarik jika Anda memiliki demam yang hanya bisa disembuhkan oleh memainkannya lagi setelah tutorial ini selesai.

Namun, kami masih belum selesai dengan logika kami. Kami akan menerapkan margin pixel teks antara tepi bagian bawah aliran dan keterangan. Jadi masuk akal bahwa kita akan ingin bergerak dibidang caption ketika menjalankan tata letak, dalam kasus tinggi telah berubah. Tambahkan baris ini setelah loop dalam tata letak:

Untuk referensi seluruh metode akan terlihat seperti ini:

Tapi ada satu tugas yang tersisa. Jika lebar atau tinggi bisa berubah, kita harus memanggil layout lagi. Ini akan menjadi sederhana seperti membuat panggilan lain untuk stage.invalidate di lebar dan tinggi setter.

Untuk menguji ini, pergi ke depan dan menghapus kode tes lain di onCoverFlowLoaded dan tambahkan baris ini sebaliknya, di CoverFlowTest:

Hal ini penting: jika Anda tidak menghapus setidaknya coverFlow.verticalOffset = 50 baris, Anda benar-benar akan meniadakan efek yang mengubah ketinggian. Untuk lebih mudah melihat tinggi berubah, saya akan menyarankan hanya mengeluarkan sebelumnya tata letak properti dan caption styling, jika Anda belum melakukannya.

Uji film, dan Anda harus melihat selimut dan keterangan menarik sebagai sebelum, dan di samping pemandangan seluruh menjadi lebih pendek, sementara melestarikan tata letak yang relatif.


Langkah 37: Tambahkan Drop Off

Untuk melihat memainkannya lebih otentik, kami akan menambahkan sedikit zazz penutup untuk membuatnya "drop off" lebih lanjut hal ini dari pusat. Ia memiliki efek perubahan opacity, tetapi, seperti dengan refleksi, kita benar-benar tidak dapat menyesuaikan Alfa, meskipun itu lebih mudah. Kami akan mencapai efek melalui teknik yang cukup sederhana, meskipun: kami hanya akan menggunakan mengubah warna untuk "warna" item untuk warna latar belakang.

Pewarnaan dengan murni ActionScript melibatkan sedikit matematika tipu daya. Itu sedikit banyak untuk sepenuhnya menjelaskan di sini, tetapi di sini adalah kode. Tambahkan metode set penurunan di sampul:

Singkatnya, kode ini mengambil nilai numerik dari 0 ke 1, dan akan menjadi bahwa jumlah yang digunakan untuk menerapkan warna: 0 berarti warna tidak sama sekali, 1 berarti warna warna penuh solid.

Untuk melakukan itu, kita akan mengambil warna latar belakang dan memecahkannya menjadi komponen nilai dari merah, hijau dan biru. Ini menggunakan bitwise operator, dan jika mereka asing bagi Anda, maka itu adalah tugas Anda untuk pergi membaca tentang mereka. Anda bisa mulai dengan Wikipedia untuk gambaran umum, dan beralih ke situs Colin Moock dan Adobe devnet artikel untuk diskusi ActionScript-spesifik.

Membuat ColorTransform adalah topik yang cukup kompleks lain yang aku akan meninggalkan sebagai sebuah proyek penelitian jika Anda membutuhkannya. Ini adalah nilai-nilai yang diperlukan untuk membuat efek warna dengan warna pilihan pada kekuatan yang diinginkan. Nice diskusi teknik ini dapat ditemukan di flashandmath.com. It's worth dicatat bahwa pilihan lain (juga dibahas dalam artikel flashandmath) untuk mengimpor kelas fl.motion.Color, yang memanjang hingga ColorTransform, dan menggunakan yang bukan sebuah objek ColorTransform. Kelas warna memberikan kenyamanan pewarnaan dengan setTint metode, yang pada dasarnya tidak bagi kita matematika kita lakukan tulisan tangan di sini. Aku memilih untuk menunjukkan versi mur dan baut, yang karenanya tidak memerlukan komponen kelas, yang saya anggap bonus (Anda tidak akan memiliki fl.motion.Color tersedia dalam proyek Flex).

Untuk menguji ini, menambahkan beberapa baris (disorot) untuk metode tata letak kami di memainkannya:

Tambahan dua baris sama, dan pastikan bahwa jika penutup tidak berpusat pada satu, kemudian mendapat warna diterapkan. Lebih jauh dari pusat, penuh warna. Selama 10 meliputi, mereka mendapatkan semakin lebih berwarna (lebih gelap, dalam kasus latar belakang hitam), sampai satu 10 kaki tak terlihat, menjadi sepenuhnya berwarna dengan warna latar belakang.

Pergi ke depan dan tes, dan Anda harus melihat sesuatu seperti ini:

Drop-off applied

Bandingkan bahwa untuk gambar ini dari sebelum penurunan diterapkan:

Before Drop-off applied

Aku tidak akan pergi ke detail di sini, karena saya percaya Anda harus mampu bekerja mereka sendiri sekarang, tapi nomor 10 dalam di atas drop off persamaan akan menjadi calon yang baik untuk sebuah properti untuk kustomisasi. Memperlakukannya seperti properti distanceFromCenter dan Anda akan ditetapkan.


Langkah 38: Menetapkan indeks saat ini

Kita akan mulai bekerja menuju potongan interaktif yang menjiwai. Untuk mendapatkan itu untuk bekerja, kita akan memerlukan kemampuan untuk menetapkan indeks saat ini. Ini harus menjadi metode umum, sebagai satu lagi perwakilan daftar mungkin akan hadir, dan keduanya dapat bekerja sama untuk telah disinkronisasi pilihan. Pikirkan bagaimana iTunes bekerja, dimana memilih lagu dalam daftar di bawah ini juga berfokus item yang sesuai di memainkannya di atas.

Pertama, dalam tata letak (dari memainkannya), Hapus baris yang _selectedIndex bagi kita. Jika Anda ingat, itu hanya sebuah tes sementara.

Sementara kita sudah memiliki properti pribadi untuk _selectedIndex, kita harus menambahkan penyetel dan pengambil. Tambahkan baris berikut ke memainkannya:

Getter khas, tapi setter memiliki beberapa tambahan masukan-pembersihan logika. Pertama, jika tidak ada dalam _covers vektor, maka kita mungkin belum dimuat dokumen XML kami belum, jadi hanya menyimpan nilai dan berhenti di sini. Jika tidak, kita dapat memastikan bahwa nilai tidak di luar jangkauan sebelum menyimpannya dalam _selectedIndex. Dan kemudian kita dapat meminta tampilan untuk redraw dengan stage.invalidate().

Kita dapat menguji dengan pergi ke CoverFlowTest dan menetapkan properti setelah memainkannya dibuat.

Dan Anda akan melihat bahwa kita memilih meliputi.

The 9th cover selected at startup

Langkah 39: Klik untuk Pilih

Dengan kemampuan untuk memilih Cover di tempat, kita dapat dengan mudah menambahkan fungsionalitas klik yang diharapkan. Jika Anda klik pada Cover yang di sisi, menjadi sampul terfokus.

Kita perlu menambahkan acara pendengar untuk masing-masing menutupi kita membuat mereka. Masih dalam memainkannya, tambahkan baris ini untuk loop di onXMLLoad:

Dan kemudian menambahkan metode onCoverClick.

Ini yang sederhana. Kita tahu indeks kami ingin memilih karena kita tahu sampul yang diklik (melalui currentTarget). Vektor (dan array) menyediakan metode indexOf berguna sehingga kita bisa mendapatkan indeks dari objek tersebut di vektor. Kita hanya perlu untuk feed bahwa properti selectedIndex kami, dan sekarang kami memiliki beberapa interaktivitas dasar yang akan.

Berinteraksi dengan tonggak ini SWF untuk menguji itu.



Klik untuk melihat demo tonggak.


Langkah 40: Tambahkan Tween: objek memainkannya

Tetapi untuk benar-benar membuat memainkannya, Yah, mengalir, kita perlu tween selimut dari satu posisi ke yang lain. Ini adalah, tentu saja, pièce de kabar dan mungkin mengapa Anda di sini di tempat pertama. Mendapatkan ini bersama-sama akan berarti beberapa update yang signifikan ke kode kita, tetapi mereka akan sia-sia.

Anda mungkin berpikir kami akan terbaik dari menggunakan paket tweening pihak ketiga. Dan sementara itu akan lebih mudah dalam beberapa hal, kita memiliki banyak hal yang kustom untuk memperbarui kami mencakup bernyawa. Kami benar-benar akan roll semi-remaja kita sendiri, yang tidak seburuk yang Anda mungkin berpikir itu.

Ini, namun, akan menjadi maraton langkah, sehingga bertahan di sana.

Pertama, dalam memainkannya, kita perlu menambahkan beberapa properti yang lain. Di bagian atas kelas, bersama dengan sisa properti, menyatakan sebagai berikut:

Ya, itu cukup banyak. Berikut adalah keterangan singkat tentang apa yang akan mereka lakukan:

  • _tweenDuration: Berapa lama, dalam milidetik, animasi harus berlangsung.
  • _startTime: setiap kali animasi dimulai, kita akan menyimpan hasil getTimer() di properti ini.
  • _elapsed: setiap kali kami memperbarui animasi, kita akan menyimpan waktu yang telah berlalu sejak awal tween di sini.
  • _coversLength: jumlah item dalam _covers vektor.
  • _iteration: "Aku" variabel di loop kami.
  • _iterationCover: sebuah properti untuk menyimpan objek penutup individu seperti kita iterate melalui _covers.
  • _sortedCovers: A diduplikasi dan kemudian diurutkan versi _covers vektor. Kita akan menggunakannya untuk menyortir kedalaman.
  • _unitsFromCenter: seberapa jauh, dalam jumlah dari selimut, objek sampul tersebut adalah dari posisi tengah.
  • _distanceA dan _distanceB: digunakan dalam kedalaman penyortiran fungsi, memegang jarak dari pusat (dalam pixel) definisi penutup tertentu.

Perhatikan bahwa dalam kebanyakan kasus, kita hanya sedang mendeklarasikan properti untuk tujuan optimasi. Kita akan menulis banyak metode yang dipanggil berulang kali, beberapa kali bingkai, jadi kami mencoba untuk meminimalkan biaya overhead Deklarasi variabel dengan menyatakan mereka sekali untuk objek, kemudian menggunakan slot setiap kali kita perlu variabel.

Selanjutnya, kami akan mengubah set selectedIndex metode untuk menghapus stage.invalidate() baris, dan menambahkan baris berikut yang memulai animasi:

Di sini kita mengatur properti _startTime menggunakan getTimer(), yang mengembalikan Jumlah milidetik sejak film Flash mulai bermain. Kita memanggil fungsi tata letak baru, menggunakan _selectedIndex, dan akhirnya mendirikan ENTER_FRAME pendengar. Perhatikan kita juga menghapus pendengar acara sebelum menambahkan itu, dalam kasus animasi itu masih berlaku ketika satu kebutuhan untuk memulai.

Kami akan menulis metode determineLayout yang selanjutnya; ini dapat pergi ke mana pun di kelas yang masuk akal.

Perhatikan bahwa ini sangat mirip dengan metode layout() kami, hanya kita tampaknya pengaturan properti pada objek penutup yang tidak ada... belum. Apa yang kita coba lakukan adalah mengetahui nilai-nilai tujuan kami berdasarkan pemilihan baru. Kita kemudian akan menggunakannya untuk melakukan interpolasi posisi kami sebagai tween berlangsung. Selain itu, dan fakta bahwa kami sudah dilucuti keluar beberapa hal seperti dropOff dan posisi _captionField, ini adalah logika yang sama sebagai layout().

Sekarang mari kita menulis metode yang bernyawa, pendengar ENTER_FRAME.

Di sini kita mendapatkan ke beberapa mur dan baut dari program semi-remaja. Pertama, kita menemukan waktu yang telah berlalu sejak tween dimulai. Jika itu lebih lama daripada durasi tween, maka kita perlu untuk menghentikan tween (dengan menghapus pendengar acara). Jika tidak, kami melanjutkan, dan loop atas penutup objek. Pada masing-masing, yang kita sebut (seperti yang belum untuk ditulis) metode yang benar-benar akan melakukan pembaruan visual berdasarkan perkembangan kami melalui tween.

Paruh kedua metode diberikan kepada kedalaman penyortiran. Ini akan sedikit trickier ketimbang di layout() tua polos, seperti kita tidak dapat mengandalkan mencakup berada di setiap posisi pada setiap saat. Sebaliknya, kita akan mengurutkan vektor meliputi, menggunakan metode urut disediakan oleh vektor (dan array). Parameter berlalu dalam metode ini adalah referensi fungsi, sehingga depthSort adalah sesuatu yang kita butuhkan untuk menulis lagi. Perhatikan juga bahwa kita perlu menyalin vektor, sebaliknya kita akhirnya bermain-main dengan urutan meliputi dari kiri ke kanan, dan itu tidak baik.

Setelah vektor diurutkan, meskipun, kita dapat loop atasnya dan menetapkan kedalaman selimut agak mudah.

Selanjutnya, kita akan menulis depthSort penyortiran fungsi:

Ide di balik penyortiran metode ini adalah bahwa mereka menerima dua objek dari vektor yang diurutkan, dan perlu untuk mengembalikan nilai yang memberitahu vektor cara untuk menyortir kedua barang. Jika nilai kembali negatif, maka objek yang dikirimkan ke parameter pertama pergi dulu. Jika kembali positif, maka parameter kedua pergi dulu. Jika kembali adalah 0, maka tidak ada perubahan yang dibuat.

Logika penyortiran kami melibatkan membandingkan mutlak jarak dari pusat. Pada dasarnya, yang lebih jauh dari pusat, semakin jauh kembali kami menginginkannya untuk mengatur.

That's it untuk perubahan memainkannya, tapi kami memiliki beberapa pekerjaan yang harus dilakukan di sampul sekarang. Dengan demikian, tidak mengganggu pengujian film sekarang karena Anda akan mendapatkan kesalahan kompilator.


Langkah 41: Tambahkan Tween: objek Cover

Di kelas Cover, mari kita mulai dengan menyatakan sekelompok properti.

Berikut adalah apa yang ini akan dilakukan:

  • _startX, _startRotationY, _startZ: toko nilai sekarang x, rotationY, dan z saat tween dimulai.
  • _endX, _endRotationY, _endZ: toko nilai akhir dihitung x, rotationY, dan z ketika tween berakhir.
  • _coverFlowParent: menyimpan referensi untuk memainkannya yang berisi sampul ini.
  • _centerMargin: menyimpan nilai CoverFlow.centerMargin.
  • _distanceFromCenter: menghitung jarak dari pusat memainkannya.

Selanjutnya, kita akan menulis setter untuk endX, endRotationY dan endZ.

Ini adalah khas setter, kecuali bahwa mereka juga menyimpan nilai saat ini properti terkait. Kita akan membutuhkan nilai tersebut untuk memperbarui properti sebagai kami tween, sehingga kami mungkin juga menyimpan itu setiap kali kita mendapatkan instruksi juga toko nilai akhir kami dihitung. Mereka juga luar biasa dalam bahwa mereka tidak umum, mereka internal. Ini hanya membatasi akses ke objek dari paket yang sama, jadi sedikit lebih dilindungi dari umum, tapi masih Mari kita memainkannya objek mengaturnya. Saya juga tidak repot-repot menulis sesuai pengambil. Kita tidak perlu mereka, tetapi tidak ada salahnya dalam melakukannya jika Anda suka.

Kita perlu untuk menulis metode updateTween yang selanjutnya. Ini akan menjadi mana kami benar-benar memperbarui posisi dan rotasi:

Pertama tiga baris mengandalkan persamaan meredakan kita masih perlu untuk menulis. Mari kita pop yang sekarang:

Aku mendapat ini dari persamaan meredakan Penner's, yang dirilis di bawah lisensi BSD. Dengan demikian, kita perlu memastikan untuk juga menyertakan pemberitahuan hak cipta:

Anda dapat mengetahui lebih lanjut tentang persamaan ini situs Robert Penner.

Jadi, dalam kombinasi, apa ini lakukan? Meredakan persamaan yang sudah dipasang untuk mengambil empat argumen: waktu berlalu tween, nilai awal properti yang sedang tweened, jarak ke ditempuh selama tween seluruh, dan akhirnya durasi tween seluruh. Mereka kembali sejumlah: nilai interpolated berdasarkan masukan nilai-nilai dan persamaan mendasar. Selain itu, aku akan sulit ditekan untuk memberitahu Anda bagaimana mereka bekerja. Hanya bersyukur Penner persamaan ini dirilis sebagai open source.

Mengapa tidak menggunakan kelas meredakan karena mereka? Yah, dengan cara ini, kita tidak perlu khawatir tentang mendistribusikan kelas pihak ketiga dengan paket memainkannya. Semuanya adalah mandiri. Ini akan menjadi yang jauh lebih rapi.

Singkatnya, kami menetapkan x saat ini, rotationY, dan z berdasarkan waktu melalui tween dan persamaan ini.

Setelah itu, it's all about berangkat drop. Kami pertama pastikan kita memiliki referensi ke orangtua memainkannya. Kemudian kita mengetahui seberapa jauh kita berasal dari pusat. Kemudian kita mengetahui apa penurunan harus didasarkan pada nilai. Matematika ini mendapat sedikit berbulu, tetapi pada dasarnya kita sedang interpolasi nilai didasarkan pada kenyataan bahwa jika penutup pada tujuan akhir, itu akan memiliki tempat drop off 10% atau 30%, 80%, atau beberapa beberapa 10 persen. Idenya adalah untuk mengetahui seberapa dekat kami adalah salah satu posisi tersebut.


Langkah 42: Resize on the Fly

Kita memiliki sesuatu yang kita perlu, tetapi kebutuhan untuk itu tidak cukup jelas. Dengan menambahkan fullscreen jenis Resize, kami dapat berdua menguji kemampuan untuk mengubah ukuran memainkannya dengan cepat, dan mengungkapkan sedikit perilaku aneh yang perlu ditangani.

Semua ini terjadi di CoverFlowTest.as. Dalam konstruktor, tambahkan baris-baris berikut pada akhir:

Dan kemudian menambahkan pendengar acara onResize:

Beberapa baris ini adalah cukup standar tarif untuk menciptakan SWF yang mengubah ukuran mulus dengan perubahan ukuran pemain. Dalam produk Apple, kita lihat pandangan memainkannya dalam jendela besar, tetapi itu dapat diubah ukurannya, misalnya dengan mengubah ukuran jendela atau dengan menyeret tepi bagian bawah memainkannya untuk mengubah ukurannya dalam jendela. Pada dasarnya, kita sedang simulasi kemampuan ini.

Anda mungkin akan melihat bahwa Apple memainkannya mengubah ukuran gambar seperti Anda mengubah ukuran tampilan memainkannya. Ini adalah sesuatu yang kita tidak akan menciptakan, tetapi merasa bebas untuk memiliki pergi sendiri.


Langkah 43: Mengoreksi perspektif

Ketika Anda mengubah ukuran jendela dan memindahkan selimut di sekitar, Anda mungkin melihat sesuatu yang lain agak aneh yang pasti perlu diambil dari perawatan. Jika Anda melakukan peregangan jendela agak lebar, Anda akan melihat bahwa gambar berbaris dengan benar, tapi mereka tampaknya miring agak stangely. Ini adalah hal yang "tidak cukup jelas" kami perlu untuk mengurus.

Images don't seem to be rotated quite right

Mengapa hal ini terjadi? Yah, secara default, render 3D Flash 10 terjadi melalui satu "kamera", dan kamera berada pada lokasi yang tetap, di tengah-tengah panggung. Namun, kamera yang tidak bergerak jika Anda mengubah ukuran panggung. Jadi sementara Anda mengharapkan titik lenyap untuk tetap di pusat persegi panjang Anda memainkannya, tidak peduli seberapa besar, Flash set up titik lenyap ke suatu titik tertentu berdasarkan persegi asli panggung, dan kemudian daun itu ada.

Untungnya kita bisa bekerja it out. Ada sesuatu yang memanggil sebuah objek PerspectiveProjection pada akar tampilan objek Flash film. Anda dapat menganggap ini sebagai kamera virtual melalui mana kita memandang 3D rendering. Dan tentu saja, kita bisa memindahkannya sekitar (jika Anda datang dari Papervision3D atau Away3D mode berpikir, ini bukan sebuah kamera adalah pengertian Anda memiliki kamera di paket-paket. Jangan terlalu bersemangat; Hal ini lebih terbatas).

Tetapi jika kita mulai bergerak di sekitar, kami mungkin mempengaruhi proyeksi 3D unsur 3D di Flash film, tidak hanya kami memainkannya. Yah, Untungnya, setiap DisplayObject memiliki sebuah objek PerspectiveProjection, yang tidak aktif secara default. Tetapi jika kita mengubahnya pada, kemudian DisplayObject bahwa anak objek akan membuat menurut PerspectiveProjection itu, bukan akar satu. Dengan demikian, kita dapat mengatur titik vanishing independen untuk memainkannya kami tanpa khawatir tentang bagaimana itu akan mempengaruhi render 3D lainnya dalam film.

Untuk melakukan ini, kembali ke memainkannya dan menemukan tempat di constructor untuk memasangnya. Saya telah menambahkan beberapa baris tepat setelah mendirikan scrollRect:

Pertama kita harus membuat objek PerspectiveProjection pada objek tampilan memainkannya. Kemudian kita mengatur properti projectionCenter untuk sebuah titik yang baru. Kuncinya adalah bahwa kita mengatur properti ini ke titik. Kami tidak dapat menetapkan x dan y titik secara langsung, untuk beberapa alasan. Jadi kami membuat titik dan x terletak setengah dari lebar memainkannya kami.

Jadi yang mendirikannya dengan benar saat pertama (yang, omong-omong, akan membantu jika memainkannya tidak selebar panggung untuk memulai dengan). Selanjutnya, kita perlu meninjau kembali lebar dan tinggi setter dan memperbarui projectionCenter dengan nilai-nilai baru:

Sekarang, setiap kali dimensi contoh memainkannya berubah, jadi adalah titik lenyap. Pergi ke depan dan mencobanya; Jika Anda menjalankan film dan mengubah ukuran panggung, Anda harus melihat perilaku yang baik dari render 3D, tidak peduli bagaimana Anda ukuran.


Langkah 44: Pusat Keterangan

Hal yang tampak cukup manis, tetapi Anda mungkin akan menyadari bahwa-seperti Anda mengubah ukuran panggung-keterangan bergerak secara vertikal dengan sampul, tetapi tidak secara horizontal. Hal ini, Untungnya, memperbaiki agak mudah. Dalam metode tata letak memainkannya di, kita perlu untuk memperbarui _captionField x properti.

Ini hanya membuat yakin TextField serangkaian dalam objek memainkannya.


Langkah 45: Aktifkan Double klik pada Cover

Hampir selesai. Kami sekarang ingin mengaktifkan kemampuan untuk klik pada frontmost cover dan mengutus acara. Juga, kami ingin agar dapat mengambil sebuah Cover diberikan data XML, seperti yang diberikan oleh dokumen XML asli.

Kita akan mulai dengan penutup. Pertama, kami memungkinkan tindakan klik dua kali di sampul, dalam konstruktor:

Dua baru baris hanya mengaktifkan kemampuan untuk menerima double-clicks dari pengguna. Garis mouseChildren tidak selalu mengaktifkan double-clicks, tapi diperlukan dalam kasus kami, sebaliknya Loader akan semacam mencegat double-clicks.


Langkah 46: Melakukan sesuatu dengan Double klik di kelas eksperimen

Untuk mendengarkan double-clicks, kepala kembali ke CoverFlowTest dan mendengarkan untuk DOUBLE_CLICK acara. Karena peristiwa menggelegak, suatu peristiwa yang dikirim oleh objek penutup akan listenable dari CoverFlowTest:

Setelah menambahkan pendengar acara, kita perlu menulis:

Perhatikan bahwa e.target akan objek penutup itu double-clicked. Ini memberi kami akses ke data yang disimpan dalam objek penutup yang dimaksud. Dalam kasus khusus ini, kami memiliki bersarang <link> node (ingat, data hanya XML node untuk objek Cover- dan kita dapat menempatkan apapun yang kita inginkan dalam simpul tersebut). Jadi jika Anda menjalankan film seperti berdiri sekarang, Anda akan melihat seluruh XML node di Output panel. Jika kita ingin melakukan sesuatu yang lebih bermakna, kita dapat melakukan ini:

Ingat bahwa Anda dapat menyimpan informasi apapun yang Anda inginkan dalam XML, dan mengaksesnya secara node-by-node melalui data properti penutup individu. Ada informasi lebih lanjut tentang bahwa dalam tutorial XML saya.


Langkah 47: Satu hal terakhir...

Anda mungkin sudah lupa, tapi aku tidak. Kita mematikan dalam metode clearContents() yang beberapa waktu lalu, tetapi tidak pernah diisi. Nah, sekarang bahwa kita semua tapi selesai, kita dapat mengisi itu. Tujuan dari metode ini adalah hanya untuk melestarikan contoh memainkannya dan pengaturannya tata letak dan gaya, dan untuk menghapus selimut dan data terkait. Ini juga akan menjadi tempat untuk memastikan bahwa kami telah dibersihkan setiap pendengar acara tersesat. Kemudian memainkannya objek bisa memuat file XML yang berbeda dan memulai lagi dengan data baru. Temukan metode kosong clearContents() di memainkannya dan tambahkan berikut:

Aku sedang agak terlalu berhati-hati, tetapi saya hanya ingin memastikan bahwa setiap peristiwa yang pernah dihubungkan membabat habis. Pada akhir fungsi, meskipun, objek penutup individu dibersihkan, dihapus dari tampilan, dan akhirnya dihapus, bersama dengan ENTER_FRAME handler, dalam kasus kami kebetulan menyebut ini di tengah-tengah sebuah animasi. Mari kita menguji it out, dengan menambahkan beberapa kode untuk CoverFlowTest:

Ini adalah ujian yang agak sia-sia, tetapi mudah untuk mengeksekusi. Ini hanya menunggu satu detik setelah beban memainkannya, kemudian load XML file lagi. Ini benar-benar masuk urutan tak berujung, tapi itu harus menunjukkan bahwa metode clearContents() melakukan trik.


Quittin' waktu

Ini bukanlah proyek kecil. Tergantung pada pengalaman Anda dengan Flash dan ActionScript, Anda mungkin belajar satu atau dua, terlepas dari bagaimana untuk menciptakan tampilan memainkannya di Flash. Beberapa topik yang lebih maju termasuk BitmapData, manual tweening, 3D kedalaman penyortiran dan manajemen perspektif 3D.

Terima kasih untuk menempel dengan saya sampai akhir. Saya berharap saya telah menunjukkan bahwa dengan sedikit kerja keras, Anda dapat membuat menarik 3D konten dalam Flash 10 tanpa perlu untuk paket pihak ke-3 untuk menangani 3D rendering. 3D Flash 10 asli tidak cocok untuk segala sesuatu, tetapi untuk proyek tertentu, hal ini sering banyak lebih mudah untuk bekerja dengan, belum lagi jauh lebih kecil dalam ukuran file SWF.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.