Advertisement
  1. Code
  2. Flash

Membuat Pencarian YouTube dan Memutar Gadget dengan PureMVC

Scroll to top
Read Time: 23 min

Indonesian (Bahasa Indonesia) translation by Dzu Al-Faqqar (you can also view the original English article)

Mengikuti tutorial saya tentang PureMVC dan API YouTube Player, saya pikir itu akan menjadi ide yang baik untuk menunjukkan kepada Anda cara menggunakan API GData YouTube untuk mencari dan memutar video. Jadi saya telah membuat sedikit tutorial yang menggabungkan keahlian PureMVC dan YouTube Player baru Anda ke dalam gadget pencarian dan putar yang bagus dan sederhana.




Sebelum kita mulai...

Ini adalah tutorial untuk Actionscripters menengah hingga mahir dan itu akan berguna jika Anda pertama kali membaca tutorial API PureMVC dan YouTube Player saya.

Langkah 1: Mengapa Menggunakan PureMVC?

Anda mungkin bertanya-tanya mengapa saya memilih menggunakan PureMVC. Yah, saya pikir itu hebat! Dan ini adalah alat hebat yang memungkinkan Anda untuk membuat sesuatu yang kecil dan kemudian mengembangkannya menjadi aplikasi besar - semuanya tentang skalabilitas. Jadi sementara kami membuat aplikasi ini, perlu dicatat bahwa ini dapat digunakan sebagai gadget untuk dimasukkan di beberapa tempat seperti iGoogle, blog, dan bahkan iklan gadget.

Langkah 2: Pengaturan

Jalankan IDE favorit Anda, entah itu Flex Builder, FDT, FlashDevelop, atau TextMate, dan buat proyek Actionscript baru. Kami juga akan membuat SWC jadi sangat berguna jika Anda memiliki salinan Flash (Anda dapat mengunduh jejak dari situs web Adobe).

Selain itu, kita akan menggunakan kelas TweenLite GreenSock dan tidak melupakan basis kode PureMVC.

Catatan: Dalam beberapa langkah pertama kami akan menyiapkan kerangka untuk PureMVC. Penjelasan tentang langkah pertama tersedia di tutorial PureMVC saya.

Langkah 3: Membuat Aplikasi Basis

Sama seperti dengan aplikasi PureMVC, kita perlu mengatur aplikasi dasar kami. Saya akan mulai dengan hanya membuat latar belakang sederhana untuk aplikasi dan kemudian menjalankan perintah start up di fasad, jadi buat file baru bernama 'App.as' dalam 'src /':

Langkah 4: Membuat Facade

Kami sekarang hanya membuat fasad, tidak ada yang istimewa, seperti fasad yang kami buat di tutorial PureMVC, jadi buat file baru bernama 'ApplicationFacade.as' di dalam 'src / com / flashtuts /':

Langkah 5: Membuat Perintah Startup

Sekarang kami akan membuat perintah startup kami dan memastikan bahwa kami mendaftarkan mediator proxy dan aplikasi kami. Buat file bernama 'StartupCommand.as' di 'src / com / flashtuts / controller /':

Langkah 6: Membuat Proxy

Kami sekarang perlu mengatur proxy kami, jadi mari kita membuat file bernama 'DataProxy.as' di 'src / com / flashtuts / model /':

Kami akan kembali ke proxy nanti di tutorial karena kami akan menggunakannya untuk memuat data dari GData dan menyimpannya di VO.

Langkah 7: Menciptakan VO

Kami akan menggunakan VO untuk menyimpan data dari kueri GData kami sehingga jika pengguna mencari kata kunci lebih dari sekali, kami hanya akan memuat data dari VO daripada membuat permintaan lain ke GData API. Buat file bernama 'DataVO.as' di 'src / com / flashtuts / model / vo /':

Memiliki membaca cepat tentang dokumentasi API GData Anda akan melihat bahwa var 'gdataURL' menunjukkan bahwa kita akan mendapatkan 15 hasil dan kami telah membiarkan URL terbuka sehingga kami dapat menempatkan string kueri di bagian belakang URL permintaan.

Langkah 8: Membuat Mediator Aplikasi

Bagian akhir kerangka PureMVC kami adalah mediator aplikasi kami. Kami akan membuatnya dan kemudian mendapatkannya untuk mendaftar pandangan pertama dan mediator kami, 'ProgressView' dan 'ProgressViewMediator', jadi buat file bernama 'ProgressViewMediator.as' dalam 'src / com / flashtuts / view /':

Langkah 9: Membuat Progress View kami

Kami hanya akan memulai dengan tampilan kemajuan yang serupa dengan yang kami buat di tutorial PureMVC, jadi buat file 'ProgressView.as' dalam 'src / com / flashtuts / view / component /':

Anda akan melihat bahwa kami menggunakan kelas baru yang disebut 'LoaderAsset'. Ini, sebenarnya, adalah klip film yang akan kami buat di IDE Flash dan kemudian digunakan dalam tampilan kemajuan kami, bukan hanya menampilkan persentase.

Langkah 10: Membuat SWC

Jalankan Flash IDE (jika Anda tidak memiliki Flash IDE, Anda dapat mengunduh percobaan dari situs web Adobe) dan membuat file AS3 baru:

Sebelum melanjutkan, kita perlu memastikan Flash tahu bahwa kita ingin menargetkan Flash Player 9 dan bahwa kita mengekspor SWC, jadi pilih 'Flash Player 9' dari drop down di bagian atas dan centang kotak di sebelah 'Ekspor SWC 'di bawah judul' Pengaturan SWF ':

Sekarang kita akan membuat loader sederhana. Saya memilih untuk memilih yang berputar, tetapi terserah Anda apa yang Anda lakukan. Buat lingkaran dan buat lubang di dalamnya:

Setelah Anda menempatkan lubang di lingkaran Anda, terapkan gradien radial, pindahkan ke kanan lingkaran. Lalu salin setengah lingkaran, tempelkan di atas lingkaran saat ini dan terapkan isinya. Selesai Sekarang, hal berikutnya adalah membuatnya berputar, jadi mari buat tween:

Saya punya tween berjalan selama 15 frame, Anda dapat memiliki Anda cepat, yang sama atau lebih lambat. Sekarang kita cukup mengaturnya untuk memutar satu kali:

Hal terakhir yang harus dilakukan adalah membungkus ini semua dalam klip film. Setelah Anda selesai melakukannya, buka jendela properti untuk klip video itu dan atur untuk diekspor ke Actionscript:

Seperti yang Anda lihat, saya sudah menyebutnya 'LoaderAsset', nama tautan ini akan menjadi nama kelas yang akan Anda gunakan dalam tampilan Anda, jadi kembali ke 'ProgressView' kami. Pastikan Anda menambahkan aset Anda dengan cara yang sama dengan yang saya miliki di kelas:

Langkah 11: Menyiapkan Mediator Tampilan Kemajuan

Mediator tampilan kemajuan kami akan serupa dengan yang kami buat dalam tutorial PureMVC dengan pengecualian bahwa tidak ada pembaruan karena kami hanya memiliki roda berputar daripada tanda persentase. Buat file 'ProgressViewMediator.as' di 'src / com / flashtuts / view /':

Anda bebas menggunakan loader apa pun yang Anda inginkan, tetapi ada masalah dengan GData YouTube. Anda melihat ketika Flash Player melakukan panggilan, sebagian besar server mengirim panjang konten permintaan ke loader, sehingga memungkinkan Flash Player untuk mengetahui berapa banyak byte yang akan dimuat dan memungkinkan kami untuk mencari persentase. Namun, YouTube GData tampaknya tidak mengirim panjang konten ini dan setiap kali Anda mencoba untuk menentukan persentase, Flash Player menemukan dirinya membagi 'bytesLoaded' dengan nol. Malu.

Langkah 12: Membuat Tampilan Pencarian

Selanjutnya yang perlu kita lakukan adalah membuat tampilan pencarian kita. Ini akan berisi kotak pencarian di mana pengguna akan memasukkan permintaan mereka dan kemudian tombol untuk mereka untuk menekan yang menjalankan query. Selain itu, kami akan menggunakan pendengar acara di kotak pencarian sehingga jika pengguna menekan 'masukkan' permintaan masih akan dijalankan. Buat file bernama 'SearchView.as' dalam 'src / com / flashtuts / view / components /':

Kode ini seharusnya bukan hal baru untuk ActionScripter, tetapi ini cepat dijalankan: pertama kita mengatur format teks, kemudian membuat kotak latar belakang (saya menggunakan Sprite.drawRoundRectComplex () untuk menggambar kotak), saya kemudian mengatur label, buat kotak input teks dan kemudian impor aset dari SWC untuk tombol pencarian.

Seperti yang saya sebutkan sebelumnya, saya telah menambahkan pendengar acara ke kotak input teks dan ke tombol kirim. Ini berarti bahwa pengguna dapat menekan enter atau klik pada tombol submit untuk menjalankan query. Fungsi 'handleSearchFieldKeyUp ()' memeriksa untuk memastikan jika tombol enter telah dipukul, jika ada, kemudian menjalankan pencarian. Ini juga merupakan praktik yang baik untuk masalah kegunaan sebagai orang yang sering digunakan untuk memukul masuk daripada harus klik tombol.

Langkah 13: Membuat View Cari Mediator

Cari pemandangan mediator tidak memiliki terlalu banyak tidak seperti itu tidak mendengarkan peristiwa apapun, melainkan itu adalah mengirim mereka ke fasad. Kemudian, mulailah dengan membuat file bernama 'SearchViewMediator.as' dalam ' src/com/flashtuts/pemandangan /':

Jika Anda melihat tampilan, Anda akan melihat bahwa itu akan pengiriman 'DataEvent' sampai dengan mediator. Dalam pengantara kita kita mendengarkan itu dan kemudian mengirim pemberitahuan ke fasad Anda. Pemberitahuan ini akan dijemput oleh perintah yang akan berinteraksi dengan proxy dan kemudian mengirim sebuah acara dengan hasil.

Kami telah mencapai tahap ketika pandangan kami akan mengirimkan permintaan kami untuk fasad, jadi kita sekarang perlu untuk membuat perintah untuk lulus query ini ke proxy kami dan kemudian memperbarui kode kita proxy. Ini kemudian akan menjalankan query, menyimpannya dalam VO, meneruskannya kembali ke mediator dan kemudian pandangan.

Langkah 14: Menciptakan perintah Data

Kita akan mulai dengan memperbarui fasad sehingga akan melewati pemberitahuan 'SearchView.SEARCH_RUN' perintah data kita. Membuka 'ApplicationFacade.as' dan tambahkan lain 'registerCommand' dalam fasad 'initializeController()' fungsi:

Sekarang kita perlu membuat file 'DataCommand.as' dalam ' src/com/flashtuts/controller /':

Ini adalah controller yang cukup sederhana, itu adalah mendengarkan di satu pemberitahuan, kemudian hanya lewat ke proxy. Sekali lagi, kita referensi proxy menggunakan fungsi mendapatkan, ini berarti bahwa kita sedang menggunakan contoh fasad daripada kembali menyatakan proxy.

Langkah 15: Menyelesaikan Proxy

Sekarang bahwa gelembung pandangan kami atas acara untuk fasad dan fasad melewati perintah data kita, kita perlu kita proxy untuk melakukan pekerjaan kotor, jadi mari kita memuat beberapa XML.

Kecuali jika Anda bekerja dengan GData sebelum, it's worth dicatat bahwa XML melewati kembali dalam Atom format dan telah mendapat banyak namespaces di dalamnya. Di AS2 menggunakan namespaces adalah sedikit hack, seperti sisa bahasa, tetapi sekarang dalam AS3 ada dua cara:

  1. Cara yang tepat
    Ini adalah cara yang tepat, tetapi itu adalah rasa sakit di gelandangan karena Anda perlu menyatakan setiap namespace dalam AS3 sebelum loading dalam XML, seperti:

    Hanya kemudian Anda dapat mengakses variabel XML seperti:

    Jadi Anda melihat bahwa Anda menaruh namespace yang dinyatakan dan titik dua (ini :) di depan tag tersebut / nama atribut. Hal ini mungkin terlihat menyakitkan - dan itu, tetapi Anda dapat menemukan informasi lebih lanjut di Adobe LiveDocs.

  2. Cara mudah
     Dengan cara ini jauh lebih mudah (dan bersantai kurasa) tapi mendapatkan pekerjaan dilakukan dan tidak berantakan atau hack. Namespace adalah hanya sebuah metode untuk mengasosiasikan Tag (atau atribut) untuk referensi URL, jadi misalnya GData referensi OpenSearch, YouTube dan Google sendiri skema dan banyak lagi. Cara mudah sekitar adalah menyatakan namespaces dan awalan mereka untuk tag / nama atribut, Anda cukup menambahkan asterisk (ini *) seperti:

    Mudah

Jadi sekarang kita mengerti bagaimana menangani XML kami mendapatkan kembali, mari kita pergi tentang menyelesaikan proxy. Peluncuran 'DataProxy.as' di ' src com/flashtuts/model /' dan di sini adalah kode untuk itu:

Kami memulai dengan menciptakan fungsi umum bahwa perintah data kita akan memicu 'searchRun()'. Seperti yang Anda lihat menerima satu parameter, string permintaan:

Sekarang untuk membuat aplikasi berjalan lebih cepat. Saya menggunakan prinsip bahwa setelah query telah dijalankan, data yang disimpan dalam VO dan tidak perlu untuk kueri tersebut untuk menjalankan lagi. Jadi menggunakan kelas AS3's Dictionary, mampu memeriksa untuk melihat apakah hasilnya sudah di VO. Jika mereka tidak, kita perlu untuk mendapatkannya, atau mengirimkannya ke pengantara kita. Kami akan datang ke fungsi 'dataReady()' sedikit lebih bawah:

Jika query belum tetapi telah dijalankan, kita perlu memuat beberapa XML:

Anda akan melihat bahwa kita sedang suffixing query ke 'gdataURL' string disimpan dalam VO kami. Kami kemudian referensi string permintaan menggunakan proxy Kamus sehingga ketika data siap, kita dapat menyimpannya dalam VO di bawah kueri tersebut dan tidak perlu beban itu lagi. Kemudian kita menambahkan acara pendengar dan membuat panggilan. Setelah kami telah mendapat data kembali, kami mendapatkan permintaan dari kamus, menyimpannya dalam VO dan kemudian menjalankan 'dataReady()' fungsi:

Fungsi ini hanya mendapat entri dan mengirim pemberitahuan kembali ke fasad. Sekarang kita dapat menampilkan video kami.

Langkah 16: Membuat tampilan hasil

Setelah kita memiliki entri, hal ini kemudian mudah bagi kita untuk memuat thumbnail untuk entri tersebut dan menampilkan mereka di grid. Mari kita mulai dengan menciptakan sebuah file yang bernama 'ResultsView.as' dalam ' src/com/flashtuts/komponen /':

Ini adalah hanya sebuah kelas yang hanya membutuhkan id video YouTube dan kemudian beban thumbnail sesuai. Pertama-tama kita mulai dengan menghapus semua anak pandangan dan ketika itu selesai kami menjalankan melalui loop yang kemudian beban thumbnail, masker (sehingga kami memiliki bagus lengkung) dan menambahkan pendengar acara ke sprite. Anda akan melihat bahwa saya menggunakan Kamus lagi di sini disebut 'idsDic'. Ini hanya akan menyimpan referensi sprite yang ditambahkan ke panggung sehingga ketika telah diklik pada, kita tahu id video YouTube terkait untuk memuat.

Akhirnya Anda akan melihat bahwa kelas satu 'DataEvent' yang berisi nomor video kembali untuk mediator yang.

Langkah 17: Menciptakan Mediator Lihat hasil

Mediator ini akan memiliki dua pekerjaan sederhana:

  1. Untuk (re-) membangun thumbnail ketika query telah dijalankan
  2. Untuk lulus nomor video ke pemutar YouTube kami

Jadi mari kita mulai dengan membuat file 'ResultsViewMediator.as' dalam ' src/com/flashtuts/pemandangan /':

Seperti saya katakan sebelumnya, mediator ini didengarkan 'SearchView.SEARCH_RESULTS' (Dikirim oleh proxy) dan mengirimkan 'PlayerView.PLAY' setelah thumbnail telah dibuat. Sekarang kita bisa untuk menciptakan tampilan pemain yang akan rumah pemutar YouTube.

Langkah 18: Membuat tampilan pemain

Sebelum Anda memulai dengan ini, Anda harus benar-benar membaca tentang YouTube Player API tutorial saya menulis seperti yang kita akan menggunakan itu di sini. Dalam tutorial yang kami menciptakan satu set kelas dan bungkus pemain. Sekarang salin pembungkus pemain itu dan paste di untuk ' aset/src/swf /'. Untuk kelas kami, aku telah menempatkan mereka dalam sebuah direktori reusable sederhana yang disebut ' src/com/flashtuts/lib /', karena itu aku punya kelas 'YouTubePlayer.as' di ' src/com/flashtuts/lib/tampilan /' dan 'YouTubePlayerEvent.as' dalam ' src/com/flashtuts/lib/peristiwa /'. Ini akan berarti bahwa Anda dapat dengan mudah kembali kelas-kelas ini waktu dan waktu lagi.

Setelah Anda senang dengan lokasi kelas pemutar YouTube Anda, kami akan mulai dengan pandangan pemain, jadi Buat sebuah file baru yang disebut 'PlayerView.as' dalam ' src/com/flashtuts/pemandangan/komponen /':

Seperti yang Anda lihat, saya mulai dengan menciptakan pemutar YouTube, Semua dalam 'init ()' fungsi dan meninggalkan kelas untuk menjadi tak terlihat. Saya juga telah menggunakan aset SWC lain yang disebut 'CloseButtonAsset'. Kemudian kita memiliki dua fungsi utama kami 'play()' dan 'stop()' dan mereka melakukan persis apa yang tertulis di kaleng.

Sekarang bahwa kami senang dengan pandangan pemain kita, kita bisa mendapatkan dengan mediator.

Langkah 19: Membuat pemain View Mediator

Lagi mediator ini tidak akan sebagai kompleks seperti yang Anda mungkin berpikir. Itu akan lakukan adalah mendengarkan pemberitahuan 'PlayerView.PLAY' dan menunjukkan pemain:

Langkah 20: Menunda dapat mediator

Kita berada hampir di akhir, tetapi jika Anda telah membayar perhatian Anda akan melihat bahwa kita belum belum ditambahkan hasil Lihat mediator atau mediator Lihat pemain ke kita aplikasi yang belum. Hal ini karena mereka tidak dibutuhkan pada awal aplikasi, misalnya, hasil Lihat mediator hanya diperlukan setelah query sedang dijalankan dan mediator Lihat pemain hanya diperlukan setelah hasil dalam dan siap untuk mengklik. Mediator aplikasi kami akan mengontrol semua ini, peluncuran 'ApplicationMediator.as' - kami akan memperbarui 'listNotificationInterests()' dan 'handleNotification()' fungsi seperti sehingga:

Anda akan melihat bahwa kita hanya sedang mendaftarkan mediator pada titik tertentu selama interaksi pengguna dengan aplikasi.

Dan kita telah melakukannya! Jalankan aplikasi dan mari kita...

Kesimpulan

Jadi di sana Anda memilikinya. Menggunakan kelincahan PureMVC dan YouTube Player API tutorial Anda sekarang dapat memperluas aplikasi kecil untuk melakukan banyak hal atau mengintegrasikan kode ke situs web atau aplikasi besar. Bantuan terbesar adalah layanan Google GData API, sejak mereka telah mendorongnya ke YouTube, query layanan telah menjadi lebih mudah dan lebih mudah. It's worth memiliki membaca dokumentasi GData karena ada banyak hal yang dapat dilakukan dengan produk Google, meng-upload video ke YouTube, menggunakan Picasa api dan api kalender.

Terima kasih untuk mengikuti sepanjang.

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
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.