Panduan komprehensif prapembebanan File SWF tunggal

() translation by (you can also view the original English article)

Dalam tutorial ini kami akan membuat SWF yang preloads sendiri, berarti bahwa preloader dan konten pada file yang sama. Kita akan pergi ke bagaimana melakukan hal-hal dengan cara yang benar dan menghindari jebakan.

Langkah 1: Apa itu satu SWF prapembebanan?

Ide dari satu SWF prapembebanan adalah bahwa Anda memiliki objek Flash yang preloads itu sendiri. Itu berarti bahwa preloader, fungsionalitas terkait dengan aset, tertanam bersama-sama pada file SWF yang sama sebagai film seluruh Flash atau aplikasi.

Kami akan memulai tutorial ini dengan beberapa teori dan finish it off dengan menciptakan FLA bersama dengan kelas preloader bahwa Anda dapat menggunakan di masa depan proyek-proyek. Selama tutorial kita akan membahas perangkap Umum dan pertimbangan.

Juga, sekarang bahwa Activetuts + telah mulai berfokus pada kelas dokumen dan umumnya menjaga hal-hal dalam file kelas sebanyak mungkin, kami akan melakukan hal itu di bagian praktis dari tutorial ini. Periksa tips cepat: bagaimana menggunakan kelas dokumen di Flash jika Anda perlu untuk mempelajari dasar-dasar.

Pastikan Anda memiliki versi terbaru dari Flash CS3 atau Flash CS4. Aku tahu pasti bahwa update CS4 kemudian telah mengubah cara kelas dimuat dan yang dapat membuat semua perbedaan di sini!

Aku akan mengakui segera bahwa tutorial ini cukup panjang untuk subjek ini sempit, tapi ini berisi semua yang Anda perlu tahu, jadi gesper dan mari kita ke sana!

Langkah 2: Mengapa tunggal SWF prapembebanan?

Gagasan preloader cukup jelas: Anda ingin memastikan bahwa pengguna mendapatkan umpan balik visual yang menunjukkan bahwa objek Flash sedang loading. Embedding file Flash besar yang membutuhkan waktu 10 detik untuk me-load bisa berarti perbedaan antara pengguna tinggal atau meninggalkan website, itu tidak boleh untuk preloader memberitahu pengguna untuk berpegang pada.

Proses pembuatan file Flash "diri prapembebanan" menyajikan beberapa masalah dan masalah. Ada teknik prapembebanan lain yang benar-benar mudah untuk menempatkan bersama-sama, seperti file SWF satu prapembebanan lain dan menambahkannya ke panggung setelah konfigurasi dimuat.

Jadi mengapa repot-repot? Yah, ada situasi di mana Anda tidak punya pilihan.

Misalnya, Anda mungkin ingin membuat Flash game yang Anda berharap untuk menyebar ke banyak Flash game portal sebanyak mungkin. Sebagian besar portal ini hanya mendukung permainan dalam bentuk file SWF tunggal yang meninggalkan Anda tidak mempunyai pilihan selain untuk memastikan bahwa permainan Anda preloads baik dari dalam dirinya sendiri.

Selain seperti contoh yang jelas, ada argumen memiliki produk selesai di hanya satu file yang membuat untuk mudah mengelola.

Langkah 3: Bagaimana SWF file dimuat

Ketika browser Anda tersandung atas sebuah objek Flash dan mulai loading, dimulai dari awal timeline. Beban frame satu demi satu. Segera setelah frame pertama dimuat, ini dapat ditampilkan.

Pendekatan kami di sini adalah untuk meletakkan preloader pada frame pertama sehingga pengguna melihat sesuatu terjadi, sementara browser terus memuat seluruh file. Kami menulis kode untuk memeriksa kemajuan secara keseluruhan dan ketika selesai kita lanjutkan ke konten utama dari file.

Tantangannya adalah untuk menjaga ukuran bingkai pertama ke minimum. Jika Anda membiarkan kode dan suara menumpuk di bingkai pertama Anda mungkin memiliki preloader yang tidak terlihat sampai setelah Anda telah dimuat mungkin 60% dari film.

Tip besar ketika datang ke menggunakan counter persentase yang menampilkan nomor adalah dengan menggunakan font yang kecil dalam ukuran byte. Tapi ini hanya membawa Anda sejauh ini. Sayangnya, kita harus bekerja cukup sedikit lebih sulit untuk memiliki hal-hal cara kami!

Itu sudah mengatakan berkali-kali sebelum dan it's worth mengatakan lagi:

Preloaders, yang paling sulit dari tugas-tugas sederhana di Flash...

Langkah 4: Mendefinisikan variabel

Ada beberapa hal yang akan mempengaruhi apa yang akan dimasukkan dalam bingkai yang, seperti:

Mana pada timeline Anda meletakkan aset.
Bingkai yang Anda pilih sebagai "kelas ekspor bingkai" (Lihat langkah 11).
Apakah Anda menempatkan aset sebelum atau setelah kelas ekspor frame.
Di Flash CS4 - memilih apakah atau tidak untuk ekspor aset dalam rangka ekspor kelas (dalam dialog properties simbol).
Di Flash CS3 - memilih apakah atau tidak untuk ekspor aset dalam frame pertama (dalam dialog properties simbol).
Apakah Anda menggunakan suara.

Langkah 5: Masalah

Masalah utama yang kita hadapi adalah mengendalikan apa berakhir pada frame satu, karena, seperti yang disebutkan di atas, semuanya pada frame yang harus diambil sebelum preloader dapat ditampilkan.

Selain itu, ada perbedaan antara bagaimana Flash CS3 dan CS4 bekerja. Selanjutnya langkah saya akan membuat beberapa pernyataan diteliti secara menyeluruh yang Anda dapat merujuk kembali ke jika perlu. Ini harus menjadi sumber daya yang besar jika Anda cepat ingin memecahkan prapembebanan Anda, untuk mencari tahu mengapa itu tidak berfungsi seperti yang Anda harapkan.

Saya akan mencoba untuk membuat pernyataan yang sedikit lebih nyata dengan merujuk kepada TweenLite, sebuah perpustakaan besar tweening oleh Jack Doyle atas di greensock.com. Kita akan menggunakan TweenLite di bagian tangan tutorial ini sehingga hal ini akan membuat yang paling masuk akal.

Langkah 6: Pernyataan

Pernyataan ini berlaku untuk kedua Flash CS3 dan CS4 kecuali dinyatakan sebaliknya. Pada dasarnya "Impor TweenLite" berarti "mengimpor dan menggunakan TweenLite" - hasil mungkin berbeda jika Anda tidak benar-benar menggunakan kode sebagai Flash kompiler metatags tidak terpakai impor. Hanya mengetik pernyataan impor tidak sama dengan menggunakan kode.

Jika Anda mengimpor TweenLite pada setiap frame di timeline utama, TweenLite akan dimuat dalam bingkai pertama dari film.
Jika Anda memiliki sebuah movieklip bahwa impor TweenLite di timeline yang internal dan tempat movieklip ini setelah kelas ekspor bingkai, TweenLite akan dimuat dalam rangka ekspor kelas.
Jika Anda memiliki sebuah movieklip bahwa impor TweenLite di timeline yang internal dan tempat ini movieklip sebelum kelas ekspor frame, TweenLite akan dimuat dalam bingkai pertama dari film.

Tiga pernyataan mengacu pada skenario di mana Anda memiliki sebuah movieklip yang diekspor untuk ActionScript, menggunakan file eksternal kelas, yang pada gilirannya impor TweenLite di file kelas.

Menempatkan movieklip setelah kelas ekspor bingkai akan membuat TweenLite beban pada kelas ekspor frame. Ada tidak ada perbedaan Apakah Anda memeriksa "Ekspor dalam bingkai X" ("ekspor dalam frame pertama" untuk CS3) mengenai impor kelas seperti TweenLite. Namun, kotak centang akan mempengaruhi apakah aset (bentuk, bitmap) movieklip akan dimuat dalam rangka ekspor atau tidak. Dalam kasus CS3, Anda tentu saja hanya bisa memilih bahwa atau tidak muat di frame pertama.
Di Flash CS4 menempatkan movieklip sebelum kelas ekspor bingkai akan membuat TweenLite beban pada frame pertama. Ada tidak ada perbedaan Apakah Anda memeriksa "Ekspor dalam bingkai X". Aset non-kode movieklip akan juga memuat pada frame pertama.
Di Flash CS3 jika Anda menempatkan movieklip sebelum kelas ekspor bingkai, maka terlepas dari Apakah Anda sudah memeriksa "Ekspor dalam frame pertama", Anda akan mendapatkan gagal diam! Artinya: movieklip Anda meletakkan pada tahap yang harus menggunakan file eksternal kelas hanya akan muncul sebagai movieklip normal, tidak memberikan indikasi apapun. Anda dapat tetap, namun, mempengaruhi apakah isi bentuk bitmap movieklip harus dimuat dalam bingkai pertama atau tidak. Ini tidak benar-benar membantu meskipun sebagai Anda sama mengacaukan dengan pemuatan kelas.

Tiga pernyataan merujuk pada skenario di mana Anda memiliki movieklip yang diekspor untuk ActionScript sebagai "CustomClass", baik menggunakan file eksternal kelas atau tidak, yang dipakai dan ditambahkan ke panggung dari movieklip yang ditempatkan pada timeline (seperti movieklip dari tiga pernyataan sebelumnya.) CustomClass ini hanya dipakai dan tidak ada sebelumnya di timeline utama.

Di Flash CS4 dengan "Ekspor dalam bingkai X" kotak dicentang, CustomClass dimuat dalam bingkai X dan akan menampilkan dengan benar. Dengan kotak dicentang itu masih terisi dalam bingkai X dan ditampilkan dengan benar.
Di Flash CS3 dengan "Ekspor dalam frame pertama" kotak dicentang, CustomClass dimuat dalam bingkai pertama dan akan menampilkan dengan benar. Dengan kotak dicentang Anda akan mendapatkan kesalahan jenis 1046, sebagai kelas tidak dapat ditemukan.

Dengan semua pembatasan ini, mari kita setidaknya menganggap pernyataan positif:

Jika Anda menempatkan movieklip yang hanya berisi bentuk bitmap, itu hanya akan memuat tepat sebelum bingkai yang dibutuhkan. Kecuali Anda memilih untuk ekspor sebelumnya, itu adalah!

Berikut adalah salah satu yang sangat menarik:

Di Flash CS3 Anda tidak dapat mengekspor suara pada apa pun selain frame pertama. Di Flash CS4 Anda bisa, pada kelas ekspor frame.

Ya, Anda membaca bahwa benar. Saya kira itu wajar untuk berasumsi bahwa Adobe ingin orang untuk meng-upgrade ke CS4. Jadi apa yang harus dilakukan jika Anda terjebak dengan CS3 dan rumput hijau di sisi lain? Aku akan memberitahu Anda pada langkah berikutnya.

Langkah 7: Memuat aset di Flash CS3

Langkah ini seluruh adalah hanya untuk orang-orang menggunakan Flash CS3.

Jika Anda membaca seluruh pernyataan dalam langkah sebelumnya, maka Anda akan menyadari masalah banyak movieklip diekspor untuk ActionScript. Ini semua harus dimuat ke dalam bingkai salah satu, atau menjadi tidak tersedia. Untungnya, pernyataan itu berada di bawah asumsi bahwa aset-aset pernah ditempatkan pada timeline utama, yang kebetulan menjadi solusi kami! (Ini adalah juga satu-satunya cara untuk me-load suara lain daripada dalam bingkai satu..)

Ini adalah bagaimana hal itu dilakukan:

Pergi ke properti dari semua aset movieklip/Sprite/suara yang Anda ingin ekspor dan Hapus centang "Ekspor dalam frame pertama".
Dalam rangka kedua timeline utama, membuat movieklip kosong yang disebut AssetHolder.
Dalam movieklip AssetHolder ini, membuat lapisan tindakan yang memiliki stop(); panggilan pada frame pertama.
Masih dalam AssetHolder, membuat lapisan untuk setiap suara yang Anda ingin menggunakan dan tarik suara keluar ke frame kedua lapisan sendiri. Mereka tidak perlu menjadi lebih dari satu frame, untungnya. Untuk semua sprite dan movieklip lain Anda dapat menempatkan ini di lapisan tunggal atau ganda untuk mengatur lebih mudah. Menempatkan pada bingkai kedua serta dan meninggalkan frame pertama kosong.

Ini akan membuat semua aset Anda memuat dalam bingkai kedua. Solusinya sedikit norak, tetapi tidak sebagai kasar sebagai harus pergi dan membeli perangkat lunak baru untuk masalah khusus yang satu ini.

(Kudos untuk 8bitrocket untuk trik ini!)

Langkah 8: Bandwidth Profiler & ukuran laporan

Satu hal saya harus menyebutkan sebelum kita mulai bekerja adalah bandwidth profiler. Ini adalah alat penting dalam memilah masalah prapembebanan Anda. Ketika Anda melihat pratinjau film Anda dapat pergi ke Lihat, kemudian pilih bandwidth profiler. Atau tekan saja Ctrl + B.

Di sini Anda dapat beralih antara frame-by frame grafik dan grafik streaming. Anda juga dapat mensimulasikan men-download film dengan kecepatan koneksi pilihan Anda dengan memilih dari lihat menu atau menekan Ctrl + Enter sekali lagi (mengubah kecepatan download simulasi menggunakan tampilan > submenu Download pengaturan). Ini penting dalam mencari tahu bagaimana preloader Anda akan terlihat, tanpa melalui kerumitan meng-upload dan pembatasan bandwidth Anda. Untuk kasus khusus itu walaupun, saya dapat merekomendasikan Firefox Throttle.

Selain alat yang sangat berguna yang bandwidth profiler sana adalah pilihan untuk menghasilkan laporan ukuran. Tekan Ctrl + Shift + F12 untuk membuka kotak dialog Pengaturan mempublikasikan.

Pergi ke Flash tab, dan di bagian lanjutan di sana adalah sebuah kotak centang berlabel "Menghasilkan ukuran laporan". Bila kotak ini dicentang, pratinjau atau penerbitan film Anda akan menghasilkan yang file teks dalam folder yang sama sebagai file FLA Anda yang berisi informasi yang berguna pada bagian apa yang membentuk ukuran total film.

Langkah 9: Akhir dari teori

Akhirnya kami dapat mulai membuat film Flash dengan preloader mandiri yang bagus!

Kita akan menggunakan teknik "tiga bingkai prapembebanan". Pada frame pertama kami akan menempatkan preloader movieklip yang memiliki kelas tersendiri "Preloader". Pada frame kedua kami memuat semua kelas dan pada frame ketiga kami memuat dan menampilkan konten. Kami akan menempatkan konten dalam sebuah movieklip bernama aplikasi dengan kelas terkait "Aplikasi". Ini adalah dimana daging aplikasi pergi.

Langkah 10: Membuat dokumen baru

Mulailah dengan membuat dokumen AS3 baru. Saya membuat 600x400px, latar belakang abu-abu gelap 24 FPS. Pengaturan ini tidak masalah walaupun.

Set dokumen kelas utama dan tekan OK.

Langkah 11: Mengatur bingkai ekspor kelas

Pergi ke File > mempublikasikan pengaturan, Flash tab, maka pengaturan ActionScript 3.0. Ketik "bingkai 2" di bidang "Ekspor kelas dalam bingkai".

Langkah 12: Desain Preloader

Jelas desain preloader tidak akan mempengaruhi fungsi. Saya akan memberikan petunjuk langkah demi langkah, tapi jangan ragu untuk melewati bagian ini dan mengambil pendekatan Anda sendiri jika Anda begitu ingin. Hanya pastikan Anda perhatikan bagian apa yang saya lihat dalam kode nanti.

Menggambar persegi panjang dengan sudut-sudut membulat dan memberikannya gradien biru. Kemudian mengubahnya menjadi sebuah movieklip simbol, menyebutnya Preloader. Memilih untuk export untuk ActionScript dan panggilan kelas Preloader.

Dalam movieklip baru ini, menggambar persegi panjang bulat sudut baru dengan gradien abu-abu, mengubahnya menjadi movieklip lain dan memberikannya nama contoh progressArea.

Pergi ke depan dan menyesuaikan tata letak lapisan yang saya miliki terjadi pada gambar di atas. Selanjutnya, membuat duplikat dari bentuk terakhir dan menempatkannya dalam lapisan bar kemajuan di atas daerah kemajuan satu. Berikan gradien biru terang, mengubahnya menjadi sebuah movieklip dan memberikannya nama contoh progressBar. Aktifkan panduan untuk 9-slice scaling dan pastikan Anda tetap kiri dan kanan bulat tepi luar.

Terakhir, membuat kolom teks dinamis dengan nama contoh percentageText. Membuat teks kanan-blok. Dengan cara itu, tanda persentase akan pernah bergerak, hanya angka (yang mengubah anyway). Pergi ke karakter embedding dan pastikan Anda menanamkan angka dan tanda persentase (%). Untuk membuat preloader sangat kecil saya menggunakan pixelfont kecil yang disebut Pixel campuran dari dafont.com. Saya juga memberikan itu cahaya biru hanya karena aku bisa.

Langkah 13: kembali ke panggung

Pastikan seluruh preloader movieklip ditempatkan dalam bingkai pertama dan diberikan nama contoh preloader. Buat layer baru disebut "Sebagai" dan menempatkan stop(); dalam frame pertama. Perlu preloader lapisan sendiri, "Preloader". Membuat lapisan lain yang disebut "Aplikasi". Ini adalah tempat kami akan menyimpan konten utama pada akhirnya.

Langkah 14: Buat kelas utama

Buat sebuah file baru ActionScript dan menyimpannya dalam direktori yang sama seperti file FLA Anda. Nama Main.as:


package
{
  import flash.display.MovieClip;
	import flash.events.Event;
	
	public class Main extends MovieClip
	{
		public function Main()
		{
			preloader.addEventListener(Event.COMPLETE, onPreloaderComplete);
			preloader.setLoaderInfo(loaderInfo);
		}
		
		private function onPreloaderComplete(e:Event):void
		{
			gotoAndStop(3);
		}
	}
}

Langkah 15: Buat Preloader kelas

Buat sebuah file baru ActionScript dan menyimpannya dalam direktori yang sama seperti Preloader.as:


package
{
	import flash.display.LoaderInfo;
	import flash.display.MovieClip;
	import flash.events.Event;
	import flash.events.ProgressEvent;
	
	public class Preloader extends MovieClip
	{
		public function Preloader()
		{
		}
		
		public function setLoaderInfo(ldrInf:LoaderInfo):void
		{
			ldrInf.addEventListener(ProgressEvent.PROGRESS, onProgress);
			ldrInf.addEventListener(Event.COMPLETE, onComplete);
		}
		
		private function onProgress(e:ProgressEvent):void
		{
			var percent:int = Math.round(e.bytesLoaded / e.bytesTotal * 100);
			progressBar.width = percent / 100 * progressArea.width;
			percentageText.text = percent + "%";
		}
		
		private function onComplete(e:Event):void
		{
			dispatchEvent(e);
		}
	}
}

Langkah 16: Menggenggam utama dan Preloader

Jadi apa dua kelas ini lakukan?

Dalam konstruktor utama, kita memanggil metode setLoaderInfo() kustom preloader kami dan menyampaikan objek LoaderInfo yang berhubungan dengan utama.

Preloader menerima objek ini dan menambah dua pendengar acara itu. ProgressEvent memicu fungsi onProgress, di mana kita menghitung persentase byte yang dimuat dibandingkan dengan total byte dimuat. Persentase digunakan untuk mengatur lebar progress bar dan teks dari bidang teks kami.

Peristiwa yang lengkap hanya dikirim kembali ke utama yang pada gilirannya melompat timeline utama ke frame tiga ketika menerima acara.

Langkah 17: Menambahkan beberapa konten

Untuk memiliki sesuatu yang dengan jelas menunjukkan preloader bekerja, saya menambahkan foto bagus makro kucing bernama Runa yang diambil oleh seorang teman saya. Anda dapat menemukan gambar di file sumber yang disediakan dengan tutorial ini. Saya telah diimpor bitmap dan saya mengubahnya menjadi sebuah movieklip yang disebut "Kucing".

Merasa bebas untuk menggunakan gambar apa pun Anda menemukan cocok. Memberikan klip nama contoh "kucing".

Langkah 18: Membuat aplikasi movieklip

Seperti yang Anda lihat pada gambar di atas, saya sudah ditempatkan movieklip Cat pada frame tiga di lapisan aplikasi. Mengambil movieklip apa pun Anda membuat, kucing atau kucing tidak, dan tekan F8 sekali lagi untuk bertelur di dalam sebuah movieklip baru yang Anda sebut aplikasi. Ekspor ini untuk ActionScript sebagai aplikasi.

Langkah 19: Kelas aplikasi

Membuat kelas aplikasi dengan memulai yang baru sebagai file dan menyimpannya sebagai "Application.as". Memiliki kelas aplikasi yang terlihat seperti ini:


package
{
	import com.greensock.TweenLite;
	import com.greensock.easing.Sine;
	import flash.display.MovieClip;
	
	public class Application extends MovieClip
	{
		
		public function Application()
		{
			TweenLite.to(cat, 7, {
						 scaleX:4,
						 scaleY:4,
						 onComplete:tweenBack,
						 ease:Sine.easeInOut});
		}
		
		private function tweenBack():void
		{
			TweenLite.to(cat, 3, {
						 scaleX:1,
						 scaleY:1,
						 onComplete:reTween,
						 ease:Sine.easeInOut } );
		}
		private function reTween():void
		{
			TweenLite.to(cat, 7, {
						 scaleX:4,
						 scaleY:4,
						 onComplete:tweenBack,
						 ease:Sine.easeInOut } );
		}
	}
}

Ini akan menghidupkan kucing dan keluar tanpa batas waktu sehingga Anda akan selamanya ingat detail dari bulu hidung Nya. Bagaimana ini bekerja kelas tidak penting, yang penting adalah bahwa kita mengimpor TweenLite dan menggunakannya, sehingga membuat yakin bahwa itu akan menjadi bagian dari file SWF sekali diekspor.

Langkah 20: CS3 dan isu-isu CS4

Mari kita kembali ke bangku Sekolah lagi untuk sebentar.

Film ini mengkompilasi halus di CS4. Aplikasi movieklip diatur untuk ekspor pada bingkai 2 kecuali Anda telah berubah itu. Jika Anda telah mengubah itu Anda mungkin melihat sesuatu yang aneh. Lebih lanjut tentang ini pada langkah berikutnya.

Jika Anda berada di CS3 pengaturan ini benar-benar penting. Anda harus pergi dan pastikan Anda hapus centang kotak centang "Ekspor dalam frame pertama" dalam properti movieklip aplikasi, jika itu yang akan semua beban dalam bingkai pertama!

Itu bukanlah satu-satunya masalah. Jika Anda mencoba untuk mengkompilasi Anda akan mendapatkan 1046 jenis kesalahan, mengatakan bahwa Anda tidak memiliki jenis TextField tersedia. Jadi seperti yang Anda bisa menebak, CS3 tidak hal-hal yang sedikit berbeda. Apa yang terjadi? Yah, Anda mencoba untuk menggunakan TextField dalam movieklip Preloader tetapi Anda tidak memiliki diimpor. Di CS4 ini ditangani secara otomatis untuk Anda, tapi tidak di CS3.

Untungnya Solusinya sederhana, hanya menambahkan:

1
2	import flash.text.TextField;

untuk Anda Preloader kelas, dan Anda sudah siap.

Beberapa dari Anda mungkin berpikir sudah bahwa aku harus telah diperpanjang Sprite untuk kelas Preloader saya bukan movieklip. Well, ini adalah alasan saya tidak melakukan itu; Saya ingin menunggu sampai titik ini untuk membawa itu. Karena simbol Preloader berisi "ProgressArea" dan "ProgressBar", yang keduanya movieklip, Anda akan mendapatkan 1046 sama kesalahan jenis.

Solusi yang sama dimungkinkan di sini juga tentunya. Pada kenyataannya, Anda sekarang harus mengubah Preloader untuk memperpanjang Sprite bukan movieklip, dan jika Anda menggunakan CS3 membuat yakin Anda mengimpor kelas Sprite di dalam kelas Preloader juga.

Langkah 21: Masalah lain

Saya menyebutkan kejadian aneh dalam langkah terakhir. Jika Anda hapus centang "Ekspor dalam bingkai 2" aplikasi dan menjalankan download simulasi, Anda akan melihat dilenyapkan preloader, kecuali Anda telah diperpanjang preloader keyframe untuk menutupi kedua bingkai serta.

Jadi apa yang sebenarnya terjadi? Sederhananya, stop() pertama; pernyataan tidak masuk hitungan. Bagaimana adalah bahwa untuk jelas pekerjaan aliran perencanaan? Catatan bahwa jika Anda menaruh jejak pernyataan dalam bingkai pertama setelah stop(); panggilan, itu melacak. Penting: dicatat bahwa masalah ini hanya menunjukkan itu sendiri ketika kita sedang simulasi download!

Pelajaran di sini adalah tidak mempercayai simulasi download! Itu tidak menunjukkan secara akurat bagaimana hal-hal akan memuat dan fungsi. Anda bisa menyimpan stop(); dan preloader dalam bingkai pertama dan Anda akan baik-baik ketika datang ke penggunaan. Namun dapat rasa sakit untuk melihat pratinjau kecuali jika Anda memiliki aplikasi yang ditetapkan untuk ekspor pada bingkai 2. Dan itu hanya untuk skenario tertentu ini.

Di CS3 Anda harus Hapus centang pada kotak ekspor pada movieklip aplikasi jika tidak Anda akan berakhir dengan itu loading dalam frame pertama. Tetapi jika Anda melakukannya, Anda akan menjalankan ke masalah ini. Jadi pergi ke depan dan memperpanjang preloader ke frame kedua.

Langkah 22: Menguji film

Pergi ke depan dan melihat film. Jalankan download simulasi pada kecepatan rendah dan menikmati ahlinya * dibuat preloader (* ahlinya hanya berlaku jika Anda telah mengikuti instruksi saya ke huruf).

Jika Anda melihat grafik frame-by frame, atau ukuran dihasilkan laporan, Anda akan melihat bahwa kode dimuat dalam bingkai kedua. Frame pertama hanya 4 KB dan terdiri dari kelas Preloader dan mesin terbang tertanam font. Sekarang, 4kb cukup terjangkau sejauh waktu tunggu sebelum melihat preloader bersangkutan, jangan Anda berpikir?

Anda mungkin melihat ukuran yang berbeda di CS3 dan Anda pasti akan melihat ukuran yang berbeda dengan font yang berbeda. Atau kucing.

Langkah 23: Tweening Preloader

Anda mungkin memiliki gagasan bahwa Anda ingin menggunakan TweenLite untuk memudar preloader oleh tweening Alfa untuk 0 - tetapi Anda tidak ingin memuat TweenLite dalam frame pertama sejak yang menambah lain 8kb download awal.

Ada beberapa cara untuk mencapai hal ini dan kami akan menyelesaikannya dengan memiliki sebuah movieklip pada frame yang ketiga yang menangkap preloader dan semi-remaja itu. Ketika selesai, itu akan maju ke frame keempat yang kami akan pindah aplikasi untuk.

Alasan untuk memasukkannya ke dalam bingkai ketiga adalah bahwa kita tidak dapat memasukkannya dalam bingkai kedua tanpa TweenLite dimuat dalam frame pertama.

Sekarang kami bergerak dari standar tiga bingkai prapembebanan teknik.

Langkah 24: Tambahkan lapisan dan Stop(); Panggilan

Tambahkan lapisan baru yang disebut "Preloader penangkap". Pastikan Anda meletakkan stop(); panggilan pada frame satu, dua dan tiga. Hal ini untuk mencegah mengacaukan pratinjau ketika simulasi download, seperti yang disebutkan sebelumnya.

Pergi ke depan dan memindahkan aplikasi ke frame keempat serta memperluas Preloader ke frame ketiga.

Langkah 25: Buat penangkap

Pastikan Anda memiliki keyframe pada frame yang ketiga Preloader penangkap lapisan. Pergi ke frame ini, menggambar bentuk kecil dan memiliki alpha mengisi warna diatur ke 0%. Hal ini seharusnya menjadi movieklip terlihat. Mengubahnya menjadi sebuah movieklip simbol yang disebut PreloaderCatcher atau sesuatu yang serupa.

Ekspor movieklip sebagai PreloaderCatcher. Jika Anda menggunakan CS4 tidak masalah jika Anda ekspor untuk frame 2 atau tidak, karena itu akan dimuat dalam bingkai yang tidak peduli apa. Yah, itu apakah mengubah satu hal, ingat? Apakah atau tidak bentuk dimuat pada bingkai 2. Pada dasarnya tidak masalah mengingat dekat tidak ada ukuran untuk bentuk ini file. Anda mungkin juga Hapus centang untuk kebiasaan yang baik meskipun.

Langkah 26: Kelas PreloaderCatcher

Membuat file kelas baru bernama PreloaderCatcher.as:


package
{
	import com.greensock.TweenLite;
	import flash.display.MovieClip;
	import flash.display.Sprite;
	import flash.events.Event;
	import Preloader;
	
	public class PreloaderCatcher extends Sprite
	{
		public function PreloaderCatcher()
		{
			addEventListener(Event.ADDED_TO_STAGE, onAdded);
		}
		
		private function onAdded(e:Event):void
		{
			removeEventListener(Event.ADDED_TO_STAGE, onAdded);
			
			var preloader:Sprite = MovieClip(parent).getChildByName("preloader") as Sprite;
			
			TweenLite.to(preloader, 0.5, {
										alpha:0,
										onComplete:function():void
											{
												MovieClip(parent).nextFrame();
											}
										} );
		}
	}

Seperti yang Anda lihat, kelas ini bekerja dengan pertama mendapatkan preloader oleh pengecoran orangtua sebagai sebuah Sprite dan memanggil getChildByName("preloader"), mana preloader adalah nama contoh. Preloader adalah melemparkan sebuah Sprite juga, maka TweenLite digunakan untuk memudar.

Setelah tweening selesai, fungsi onComplete di TweenLite melemparkan orangtua sebagai sebuah movieklip sehingga dimungkinkan untuk memanggil metode nextFrame.

Langkah 27: Mengapa empat frame?

Seperti saya katakan sebelumnya, kita sekarang sudah pindah dari tiga bingkai prapembebanan teknik. Itu sendiri tidak persis penghujatan, tapi saya yakin beberapa dari Anda bertanya-tanya mengapa kita melakukan itu. Sebaliknya, kami bisa telah menangani tweening preloader dalam klip aplikasi...

Dalam hal ini, Anda sempurna benar! Alasan saya menggunakan empat bingkai di sini adalah untuk menunjukkan Anda bagaimana untuk melakukannya sambil menjaga hal-hal yang terpisah. Tweening berjarak preloader; Apakah itu milik bagian preloader, atau bagian aplikasi? Preloader pasti, tetapi dalam kasus ini kita tidak ingin memuat dalam frame pertama. Oleh karena itu, kita berakhir dengan kelas tambahan "penangkap" ini.

Ingatlah bahwa ini semua opsional. Setelah Anda mengetahui bagaimana melakukan segala sesuatu yang Anda dapat dengan mudah memutuskan apa pun situasi Anda membutuhkan.

Langkah 28: Suara dan tambahan aset

7 langkah saya katakan tentang aset loading masalah di CS3. Karena tutorial ini ditujukan terhadap kedua pengguna CS3 dan CS4 kita akan pergi dengan common denominator terendah dan menggunakan pendekatan AssetHolder. Jika Anda menggunakan CS4 Anda dapat melakukan langkah berikutnya dengan cara yang sama dan itu akan bekerja sama, atau Anda dapat melewatkan pendekatan AssetHolder.

Mulailah dengan mengimpor "music.wav" suara dari file source ke fla Anda

Masuk dan mengekspornya untuk ActionScript dan pastikan Anda hapus centang pada kotak "Ekspor dalam frame pertama" di CS3. Untuk CS4 ini tidak membuat banyak perbedaan. Saya menggunakan Flash CS4 yang mungkin Anda pikir keluar sekarang, jadi screenshot menunjukkan kotak dialog CS4. Jika Anda ingin Anda dapat beralih dari kompresi MP3 default untuk sesuatu yang lebih menyenangkan. Dengan cara itu tidak akan terdengar mengerikan.

Mari kita pergi melalui beberapa langkah, menambahkan beberapa teks untuk film dan meletakkan semuanya dalam movieklip AssetHolder!

Step 29: Membuat beberapa teks

Tekan Ctrl + F8 membuat simbol movieklip baru. Nama itu TextHolder dan ekspor untuk ActionScript, sekali lagi (di CS3) memastikan "Ekspor dalam frame pertama" kotak dicentang.

Ketika membuat, Anda akan "dalam" movieklip ini. Ketik beberapa teks statis dan memberikan warna putih. Saya menggunakan font PixelMix yang sama seperti sebelumnya. Untuk membuat simulasi stroke warna, saya memberikan efek cahaya filter dengan pengaturan yang dilihat di bawah ini.

Step 30: Membuat AssetHolder

Buat layer baru disebut AssetHolder. Membuat keyframe pada frame yang kedua, tekan Ctrl + F8 untuk membuat movieklip baru dan nama itu AssetHolder. Tidak ekspor ini untuk ActionScript.

Dalam movieklip AssetHolder, membuat tiga lapisan yang disebut AS, musik dan aset. Karena "musik" adalah nama objek suara yang kami menggunakan, itu adalah apa yang saya penamaan lapisan. Sekarang Anda harus meletakkan stop(); panggilan pada bingkai pertama dari lapisan AS.

Selanjutnya, buat keyframe pada frame yang kedua dari lapisan aset dan musik. Tarik suara musik ke panggung ketika kau berdiri di keyframe kedua dalam lapisan musik. Kemudian melakukan hal yang sama dengan TextHolder movieklip ke lapisan aset.

Keluar dari movieklip AssetHolder dan pastikan Anda menempatkannya pada kedua keyframe lapisan AssetHolder pada timeline utama. Karena Anda akan melihat, movieklip tidak terlihat, tetapi itu placable, yang cukup keren!

Langkah 31: Mengubah kelas aplikasi

Baiklah, sekarang kita hanya ingin memastikan bahwa kita memainkan suara dan menunjukkan movieklip TextHolder. Menambahkan ini ke konstruktor kelas aplikasi:


var s:Music = new Music();
s.play();

var textHolder:TextHolder = new TextHolder();
textHolder.x = 120;
textHolder.y = 20;
addChild(textHolder);

Langkah 32: Pratinjau film

Pergi ke depan dan melihat film. Sekarang, terlepas dari Apakah Anda berada di CS3 atau CS4, Anda dapat mensimulasikan download film ini dan melihatnya preload indah mulai dari 1 persen! Perhatikan bahwa itu bukan dimulai dari 0 persen. Memiliki isi kami telah lebih besar dan preloader kecil kemudian yang bisa menjadi mungkin.

Sekarang, Anda mungkin bertanya-tanya mengapa Anda menatap ini kucing oranye yang dipasangkan dengan tag musik acara permainan-esque pendek. Ini normal untuk meminta sendiri.

Kesimpulan

Mudah-mudahan sekarang Anda harus memiliki semua pengetahuan yang Anda butuhkan untuk preload hal-hal seperti yang Anda inginkan, dalam satu file SWF! Untuk melihat versi final dari semua kelas file hanya men-download file sumber untuk tutorial ini dan memeriksa mereka.

Aku tak sehat terobsesi dengan subjek ini jadi saya akan dengan senang hati masuk ke dalam diskusi di komentar. Silakan bergabung dalam jika Anda memiliki pertanyaan atau ide-ide!