Membuat Menu gaya dermaga Mac dengan AS3

Indonesian (Bahasa Indonesia) translation by Taufan Prasetyo Basri (you can also view the original English article)

Dalam tutorial ini saya akan menunjukkan Anda bagaimana untuk membuat menu seperti dermaga Apple menggunakan kelas AS3. Kita akan menciptakan satu sebagai file yang akan melakukan semua magic, memperluas untuk menambahkan fitur baru.

Tutorial yang diterbitkan ulang

Setiap beberapa minggu, kita kembali beberapa pembaca kami posting favorit dari sepanjang sejarah situs. Tutorial ini pertama kali diterbitkan pada bulan Maret 2010.

Pratinjau Hasil Akhir

Pertama, mari kita lihat apa yang kita akan menciptakan. Berguling mouse Anda ikon untuk melihat bagaimana mereka bergerak dan skala.

Langkah 1: Buat File ActionScript Baru

Mulailah dengan membuat file ActionScript baru dan menyimpannya sebagai "DockItem.as". Saya menyimpan tambang di c:/macmenu/org/effects/DockItem.as.

Perhatikan bahwa akar dokumen kami (di mana fla tinggal) akan c:/macmenu; folder /org/effects akan membentuk paket untuk kelas DockItem.

Langkah 2: Buat baru FLA

Buat File Flash ActionScript 3.0 baru dan buka, sehingga kami memiliki DockItem.as dan file .fla ini dibuka. Simpan .fla ini di folder root (DockItem.as ada di c: / macmenu / org / effects, jadi root situs kami adalah c: / macmenu) the / org / effects adalah paket Obyek DockItem dan kami menyimpannya. fla sebagai c: /macmenu/macmenu.fla.

Langkah 3: Impor ikon

Sekarang kita mengimpor atau menggambar beberapa ikon ke .fla. Saya telah mengimpor beberapa ikon yang saya miliki di sini dari file Illustrator, tetapi Anda tentu saja dapat menggambar Anda sendiri dan menerapkan gradien kepada mereka.

Langkah 4: Mulai mengubah ikon untuk simbol

Pilih salah satu ikon dan klik memodifikasi > mengkonversi untuk simbol.

Dalam kotak yang terbuka, memberinya nama (Aku bernama simbol ini "Bintang") dan memperhatikan titik pendaftaran; perlu menjadi pusat bawah. Untuk kelas menggunakan nama yang sama (ingat bahwa Anda tidak dapat menggunakan spasi) dan untuk kelas Base, gunakan org.effects.DockItem (kelas yang akan kita buat). Juga, pastikan Tipe Anda diatur ke Klip Video.

Kemudian, menyelaraskan semua benda ke bawah: Pilih Semua, klik jendela > rata, pastikan tombol "untuk tahap" titiknya (jika tidak ia akan segaris di botton panggung), kemudian klik tombol kanan pada panel ini untuk menyesuaikan semua benda.

Langkah 5: Mengkonversi semua ikon untuk simbol

Kita dapat memiliki sebagai banyak tombol seperti yang kita inginkan, jadi mari kita mengubah semua ikon kami ke simbol. Ingatlah untuk memberi mereka nama dan kelas, mengatur semua poin pendaftaran mereka ke bawah pusat dan set kelas basis org.effects.DockItem.

Lihat di bawah ini untuk melihat bagaimana perpustakaan kita dan ikonnya terlihat; perhatikan ruang di antara mereka, penting untuk menciptakan efek yang baik.

Langkah 6: Mulai pengkodean kelas DockItem

Jika kami menguji film sekarang, itu akan menimbulkan kesalahan yang mengatakan bahwa file ActionScript harus memiliki setidaknya satu definisi eksternal dan terlihat; itu karena semua item menu kami memperluas kelas DockItem, yang belum kami tulis. Ayo tulis sekarang ...

Mulai membuat paket dengan memperpanjang kelas Sprite (kami akan memperluas Sprite karena kita tidak memiliki animasi kerangka waktu.)

package org.effects{

  import flash.display.Sprite;

	public class DockItem extends Sprite{
	}
}

Pada titik ini kami memiliki DockItem kami untuk memperluas kelas Sprite, jadi jika Anda mengujinya sekarang ini akan berfungsi, tetapi Anda tidak akan melihat efek.

(Bingung? Tidak digunakan untuk pengkodean dengan kelas? Check out ini tips cepat menggunakan dokumen kelas untuk pengenalan.)

Langkah 7: Mengimpor kelas-kelas yang diperlukan

Sekarang kita akan mengimpor semua kelas yang diperlukan. Kelas khusus sedang digunakan di sini, kelas TweenLite, yang dapat Anda unduh dari GreenSock.com. Ketika Anda men-download TweenLite, ekstrak ke /macmenu/ folder (sehingga Anda akan memiliki folder/macmenu/com/greensock /).

package org.effects{

	import flash.display.Sprite;
	import flash.events.Event;
	import flash.events.MouseEvent;
	import com.greensock.TweenLite; //http://www.greensock.com/tweenlite
	import com.greensock.plugins.TweenPlugin;
	import com.greensock.plugins.TintPlugin;

	public class DockItem extends Sprite{
	}
}

Saya telah mengimpor kelas Sprite karena itulah yang kami kembangkan; jika Anda memiliki animasi di timeline, perpanjang kelas MovieClip. Kami akan menggunakan kelas Acara saat objek kustom ditambahkan ke panggung dan kami akan menggunakan MouseEvent saat memeriksa jarak setiap ikon dari mouse.

Langkah 8: Mendeklarasikan variabel yang diperlukan

Selama langkah ini, kami akan menyatakan variabel yang diperlukan:

package org.effects{

	import flash.display.Sprite;
	import flash.events.Event;
	import flash.events.MouseEvent;
	import com.greensock.TweenLite;
	import com.greensock.plugins.TweenPlugin;
	import com.greensock.plugins.TintPlugin;

	public class DockItem extends Sprite{

		private var _initPosition:Number;
		public var maxXDistance:Number;
		public var maxYDistance:Number;
		public var maxScale:Number;

	}
}

Perhatikan bahwa saya menggunakan _initPosition sebagai pribadi: hanya menetapkan x-posisi awal ikon. Jarak mouse akan selalu diukur dari titik ini, karena sebenarnya-posisi x item akan selalu berubah.

maxXDistance adalah jarak x maksimum di mana mouse akan mempengaruhi ikon, maxYDistance adalah jarak y maksimum di mana mouse akan mempengaruhi ikon dan maxScale adalah skala maksimum yang akan ditambahkan ke ikon (misalnya, jika Anda mengatur ke 2, skala maksimum yang bisa dicapai objek adalah 3.)

Saya telah menggunakan variabel publik selama tiga sehingga kita dapat mengubah mereka pada saat runtime.

Langkah 9: Mengkode Fungsi Konstruktor

Fungsi constructor harus memiliki nama yang sama sebagai kelas (dan karena itu nama yang sama sebagai file), maka DockItem():

package org.effects{

   import flash.display.Sprite;
	import flash.events.Event;
	import flash.events.MouseEvent;
	import com.greensock.TweenLite;
	import com.greensock.plugins.TweenPlugin;
	import com.greensock.plugins.TintPlugin;

	public class DockItem extends Sprite{

		private var _initPosition:Number;
		public var maxXDistance:Number;
		public var maxYDistance:Number;
		public var maxScale:Number;

		public function DockItem($maxXDistance:Number=60,$maxYDistance:Number=30,$maxScale:Number=2):void{
			maxXDistance=$maxXDistance;
			maxYDistance=$maxYDistance;
			maxScale=$maxScale;
			if(stage) init();
			else addEventListener(Event.ADDED_TO_STAGE,init);
			addEventListener(Event.REMOVED_FROM_STAGE,end);
		}

	}
}

Mengapa kita memiliki beberapa parameter di sini? Hal ini memungkinkan kita untuk menggunakan kombinasi jarak yang berbeda dan skala: kita dapat memiliki jarak pendek dengan skala yang sangat besar atau jarak jauh dengan skala kecil. Juga, kita dapat menentukan jarak y di mana mouse akan mempengaruhi ikon.

Seperti kita memperluas kelas Sprite yang kita dapat menambahkan anak-anak atau bahkan kode kelas kustom untuk setiap ikon yang memperluas kelas DockItem, sehingga jika kita memperpanjang itu kita dapat menggunakan fungsi super() untuk melewati parameter baru ke superclass. Kita dapat menggunakan DockItem kelas Kapan dan dimana saja.

Dalam langkah ini kita menetapkan variabel maxXDistance, maxYDistance variabel dan variabel maxScale ke nilai-nilai yang dikirimkan sebagai parameter. Juga, kami memeriksa jika tujuannya adalah di atas panggung - jika tidak, kami menambahkan sebuah Event untuk memeriksa ketika itu. Kita juga menambahkan pendengar acara lain untuk mendeteksi bila ikon dihapus dari panggung. Kami akan menambahkan acara MOUSE_MOVE ke panggung untuk mendapatkan jarak, sehingga sangat penting untuk tahu apakah itu di atas panggung.

Langkah 10: Fungsi Init()

Ini adalah fungsi yang akan dijalankan setelah ikon dibuat dan ditambahkan ke panggung. Dalam fungsi init () kami hanya menambahkan pendengar MouseEvent.MOUSE_MOVE ke panggung, menetapkan variabel _initPosition ke nilai x objek, dan mendengarkan mouse meninggalkan daerah tahap.

package org.effects{

   import flash.display.Sprite;
	import flash.events.Event;
	import flash.events.MouseEvent;
	import com.greensock.TweenLite;
	import com.greensock.plugins.TweenPlugin;
	import com.greensock.plugins.TintPlugin;

	public class DockItem extends Sprite{

		private var _initPosition:Number;
		public var maxXDistance:Number;
		public var maxYDistance:Number;
		public var maxScale:Number;

		public function DockItem($maxXDistance:Number=60,$maxYDistance:Number=30,$maxScale:Number=2):void{
			maxXDistance=$maxXDistance;
			maxYDistance=$maxYDistance;
			maxScale=$maxScale;
			if(stage) init();
			else addEventListener(Event.ADDED_TO_STAGE,init);
			addEventListener(Event.REMOVED_FROM_STAGE,end);
		}

		private function init(e:Event=null):void{
			_initPosition=x;
			stage.addEventListener(MouseEvent.MOUSE_MOVE,mouseMove);
			stage.addEventListener(Event.MOUSE_LEAVE,mouseLeave);
		}

	}
}

Langkah 11: Fungsi Mouse

Ketika mouse bergerak di atas panggung, fungsi ini (dipicu oleh aktivitas MOUSE_MOVE yang kami menambahkan pendengar untuk dalam langkah terakhir) akan memeriksa posisi mouse dari objek induk dan mengukur jarak dari objek ke posisi mouse orangtua.

Kami menggunakan parent.mouseX karena yang membuat kami posisi x mouse relatif terhadap objek apapun berisi ikon, bukan relatif terhadap titik pendaftaran ikon.

Kami juga tween ikon kembali ke mereka mulai posisi jika mouse meninggalkan panggung di mouseLeave() handler.

package org.effects{

	import flash.display.Sprite;
	import flash.events.Event;
	import flash.events.MouseEvent;
	import com.greensock.TweenLite;
	import com.greensock.plugins.TweenPlugin;
	import com.greensock.plugins.TintPlugin;

	public class DockItem extends Sprite{

		private var _initPosition:Number;
		public var maxXDistance:Number;
		public var maxYDistance:Number;
		public var maxScale:Number;

		public function DockItem($maxXDistance:Number=60,$maxYDistance:Number=30,$maxScale:Number=2):void{
			maxXDistance=$maxXDistance;
			maxYDistance=$maxYDistance;
			maxScale=$maxScale;
			if(stage) init();
			else addEventListener(Event.ADDED_TO_STAGE,init);
			addEventListener(Event.REMOVED_FROM_STAGE,end);
		}

		private function init(e:Event=null):void{
			_initPosition=x;
			stage.addEventListener(MouseEvent.MOUSE_MOVE,mouseMove);
			stage.addEventListener(Event.MOUSE_LEAVE,mouseLeave);
		}

		private function mouseMove(e:MouseEvent):void{
			var yDistance:Number=Math.abs(parent.mouseY-y);
			if(yDistance>maxYDistance){
				if(_initPosition==x) return;
				else{
					TweenLite.to(this,.3,{x:_initPosition,scaleX:1,scaleY:1});
					return;
				}
			}
			//get the difference between the parent mouse x position and the initial position of the object
			var xDistance:Number=parent.mouseX-_initPosition;
			
			//check if the distance of the mouse from the object is more than max distance, it can't be bigger...
			xDistance = xDistance > maxXDistance ? maxXDistance : xDistance;

			//check if the distance is lower than the negative of the max distance, it can't be lower...
			xDistance = xDistance < -maxXDistance ? -maxXDistance : xDistance;
			
			//create a variable for the position, assuming that the x position must be the initial position plus the distance of the mouse, but it can't be more than the max distance.
			var posX=_initPosition-xDistance;

			//we get the scale proportion here, it goes from 0 to maxScale variable
			var scale:Number=(maxXDistance-Math.abs(xDistance))/maxXDistance;

			//the minimum scale is 1, the original size, and the max scale will be maxScale variable + 1
			scale=1+(maxScale*scale);

			//here we use a Tween to set the new position according to the mouse position
			TweenLite.to(this,.3,{x:posX,scaleX:scale,scaleY:scale});
		}
		
		private function mouseLeave(e:Event):void{
			TweenLite.to(this,.3,{x:_initPosition,scaleX:1,scaleY:1});
		}
	}
}

Pertama, kita periksa jarak y (vertikal jarak antara ikon dan mouse); Jika itu adalah lebih jauh daripada kisaran kita set dengan maxYDistanceVariable, maka kita memeriksa apakah ikon kembali pada posisi semula, dan, jika tidak, kami tween sana. Kata kunci kembali istirahat dari fungsi, sehingga tidak ada yang lain kode akan dijalankan dalam kasus ini.

Jika mouse adalah dekat dengan ikon vertikal, kami menggunakan beberapa matematika untuk mengetahui skala baru dan posisi ikon didasarkan pada jarak horizontal dari mouse, kemudian tween itu untuk nilai-nilai tersebut.

Langkah 12: Fungsi End()

Jika kami menghapus objek dari panggung, kita perlu menghilangkan pendengar mouseMove dan mouseLeave; Jika tidak kita bisa mendapatkan kesalahan setiap kali mouse tersebut akan dipindahkan. Fungsi ini adalah handler untuk para pendengar REMOVED_FROM_STAGE yang kami menambahkan sebelumnya, sehingga akan dapat dipicu ketika objek dihapus.

package org.effects{

	import flash.display.Sprite;
	import flash.events.Event;
	import flash.events.MouseEvent;
	import com.greensock.TweenLite;
	import com.greensock.plugins.TweenPlugin;
	import com.greensock.plugins.TintPlugin;

	public class DockItem extends Sprite{

		private var _initPosition:Number;
		public var maxXDistance:Number;
		public var maxYDistance:Number;
		public var maxScale:Number;

		public function DockItem($maxXDistance:Number=60,$maxYDistance:Number=30,$maxScale:Number=2):void{
			maxXDistance=$maxXDistance;
			maxYDistance=$maxYDistance;
			maxScale=$maxScale;
			if(stage) init();
			else addEventListener(Event.ADDED_TO_STAGE,init);
			addEventListener(Event.REMOVED_FROM_STAGE,end);
		}

		private function init(e:Event=null):void{
			_initPosition=x;
			stage.addEventListener(MouseEvent.MOUSE_MOVE,mouseMove);
			stage.addEventListener(Event.MOUSE_LEAVE,mouseLeave);
		}

		private function mouseMove(e:MouseEvent):void{
			var yDistance:Number=Math.abs(parent.mouseY-y);
			if(yDistance>maxYDistance){
				if(_initPosition==x) return;
				else{
					TweenLite.to(this,.3,{x:_initPosition,scaleX:1,scaleY:1});
					return;
				}
			}
			//get the difference between the parent mouse x position and the initial position of the object
			var xDistance:Number=parent.mouseX-_initPosition;
			
			//check if the distance of the mouse from the object is more than max distance, it can't be bigger...
			xDistance = xDistance > maxXDistance ? maxXDistance : xDistance;

			//check if the distance is lower than the negative of the max distance, it can't be lower...
			xDistance = xDistance < -maxXDistance ? -maxXDistance : xDistance;
			
			//create a variable for the position, assuming that the x position must be the initial position plus the distance of the mouse, but it can't be more than the max distance.
			var posX=_initPosition-xDistance;

			//we get the scale proportion here, it goes from 0 to maxScale variable
			var scale:Number=(maxXDistance-Math.abs(xDistance))/maxXDistance;

			//the minimum scale is 1, the original size, and the max scale will be maxScale variable + 1
			scale=1+(maxScale*scale);

			//here we use a Tween to set the new position according to the mouse position
			TweenLite.to(this,.3,{x:posX,scaleX:scale,scaleY:scale});
		}
		
		private function mouseLeave(e:Event):void{
			TweenLite.to(this,.3,{x:_initPosition,scaleX:1,scaleY:1});
		}

		private function end(e:Event=null):void{
			stage.removeEventListener(MouseEvent.MOUSE_MOVE,mouseMove);
			stage.removeEventListener(Event.MOUSE_LEAVE,mouseLeave);
		}

	}
}

Semua yang kita lakukan dalam fungsi ini adalah menghilangkan pendengar acara dari panggung.

Langkah 13: Mengujinya!

Pada titik ini kita sudah dapat menguji ia akan bekerja karena setiap objek terkait dengan kelas dasar DockItem. Namun, kita tidak memiliki sebuah kotak yang melompat-lompat untuk mengklik (jika kita mengatur objek kami buttonMode properti untuk benar, kita akan melihat bahwa kita dapat klik itu hanya ketika it atas grafik sebenarnya.)

Langkah 14: Mulai Mengubah Ikon Ke Tombol

Sejauh ini kita dapat melihat efek bekerja, jadi sekarang mari kita menjadi tombol masing-masing item. Kita akan menciptakan sebuah file ActionScript baru dan ini akan memperpanjang DockItem - Mari kita beri nama DockButton. Paket akan sama dengan DockItem (org.effects), jadi kita akan menyelamatkan itb dalam folder yang sama sebagai DockItem.as (contoh: c:/macmenu/org/effects/DockButton.as)

Langkah 15: Mengubah kelas dasar

Sekarang kita mengubah kelas dasar dari setiap objek di Perpustakaan. Kami saat ini menggunakan org.effects.DockItem sebagai dasar kelas, mari kita sekarang menggunakan org.effects.DockButton.

Jika kami menguji it sekarang, akan ada kesalahan. Hal ini karena DockButton.as masih kosong, jadi mari kita kode itu.

Langkah 16: Mulai pengkodean DockButton.as

OK, sekarang kita akan memperpanjang kelas DockItem, karena kita ingin menggunakan segala sesuatu yang kita telah di DockItem dan menambahkan beberapa trik (memungkinkan untuk bertindak sebagai tombol), tetapi kita tidak ingin untuk menambahkan fitur baru ke DockItem langsung. Dengan cara ini, jika kita ingin menggunakan DockItem sebagai sesuatu selain tombol kemudian kita dapat, tetapi jika kita ingin menggunakannya sebagai tombol kita dapat menggunakan DockButton.

package org.effects{

	public class DockButton extends DockItem{
	}
}

Jika kami menguji proyek kami sekarang, itu akan berhasil, tetapi itu akan bekerja persis seperti DockItem karena kami belum menambahkan sesuatu yang baru.

Langkah 17: Impor kelas untuk DockButton

Mari kita mengimpor beberapa hal yang kita akan perlu untuk memperpanjang DockItem. Seperti kita memperluas DockItem kita tidak perlu mengimpor kelas yang sudah ada, karena wont kita menggunakannya langsung di DockButton.

package org.effects{

	import flash.geom.Rectangle;

	public class DockButton extends DockItem{
	}
}

Aku sudah diimpor kelas persegi panjang, tapi kenapa? Hal ini karena kita akan menggunakan kotak melompat-lompat objek untuk membuat latar belakang palsu, untuk memungkinkan button untuk dapat diklik bahkan jika mouse tidak tepat di atas area yang berwarna. Mari kita membuat latar belakang grafis dengan alpha 0 (transparan), jadi kita akan memiliki sebuah persegi untuk klik.

Langkah 18: Constructor untuk DockButton

Karena kita perlu membuat kotak melompat-lompat untuk DockButton, kita akan mendapatkan batas sendiri, itu sebabnya kami diimpor kelas flash.geom.Rectangle

package org.effects{

	import flash.geom.Rectangle;

	public class DockButton extends DockItem{

		public function DockButton():void{
			buttonMode=true;
			mouseChildren=false;
			var bounds:Rectangle=getBounds(this);
			this.graphics.beginFill(0,0);
			this.graphics.drawRect(bounds.x,bounds.y,bounds.width,bounds.height);
			this.graphics.endFill();
		}
	}
}

Apa yang kita lakukan? Kami membuat konstruktor yang pertama menetapkan objek buttonMode ke true, jadi DockButton kami akan diperlakukan sebagai tombol. Kemudian kami mengatur mouseChildren ke false, sehingga acara mouse akan datang dari objek DockButton, tidak ada benda lain di dalamnya. Selanjutnya kita mendapatkan batas-batas obyek menggunakan getBounds() dan menggambar persegi panjang transparan menggunakan objek grafis. (Properti grafis dilengkapi dengan kelas Sprite, dan kami memperluas Sprite untuk membuat objek DockItem kami. Sekarang kami telah memperluas DockItem kami untuk membuat objek DockButton kami, DockButton memiliki segalanya dari kelas Sprite dan kelas DockItem.)

Langkah 19: Memeriksa semuanya dan menguji

OK, mari kita melakukan cek:

Kita perlu file fla (contoh: c:/macmenu/macmenu.fla).
Dalam folder yang sama sebagai file fla kita perlu memiliki folder lain: / org/efek (contoh: c:/macmenu/org/efek).
Di dalam folder ini kita perlu memiliki dua dokumen .dengan (DockItem.as dan DockButton.as)
Dalam Fla, setiap item di Perpustakaan harus dihubungkan ke kelas, dan kelas dasar dari setiap item harus org.effects.DockButton.

Jika semua OK, tes film...

(Pada titik ini, jika Anda ingin memasukkan folder org/efek classpath Anda Anda bisa, jadi Anda tidak perlu menyalin folder ini untuk setiap proyek Anda membuat dan menggunakan DockItem atau DockButton.)

Langkah 20: Mengubah warna pada tikus atas

Mengapa tidak mengubah warna tombol saat mouse melewati itu? Dalam bagian ini saya akan mengajarkan bagaimana. Untuk ini kita akan menggunakan mesin TweenLite lagi untuk memberikan warna beberapa objek. Namun, kami sudah menggunakan TweenLite di objek DockItem dan kita memperluas objek ini di DockButton. Kami ingin memperpanjang DockButton untuk mengubah warna, tapi kami tidak dapat menggunakan TweenLite lagi dalam objek yang sama karena objek TweenLite baru akan menimpa yang lain (bahkan dengan mengganti properti: palsu di TweenLite akan mengurangi kinerja banyak jika kita menggunakannya langsung dalam objek yang sama). Semua itu tidak hilang; Kami memiliki ikon dalam setiap objek Perpustakaan dan kita dapat menerapkan warna untuk itu.

Untuk melakukan ini, mari kita buat File ActionScript lain, tetapi sekarang simpan ini di folder yang sama dengan .fla dengan nama 'OverButton.as' (contoh: c: /macmenu/OverButton.as.)

Langkah 21: Pengkodean objek OverButton

Pertama kami membuat paket dan mengimpor kelas yang diperlukan; karena kita diselamatkan OverButton.as file dalam folder yang sama dengan file fla paket akan menjadi tingkat atas, sehingga tidak perlu untuk menulis "paket org.effects":

package{
	
	import org.effects.DockButton;
	import flash.display.DisplayObject;
	import flash.events.MouseEvent;
	import com.greensock.TweenLite;
	import com.greensock.plugins.TweenPlugin;
	import com.greensock.plugins.TintPlugin;

	public class OverButton extends DockButton{
	}
}

OK, jadi kita sedang memperluas DockButton saat ini dan kami telah diimpor kelas DisplayObject karena kami akan memperlakukan ikon sebagai DisplayObject. Kami juga telah diimpor MouseEvent yang kita akan gunakan untuk memeriksa saat mouse di atas ikon dan ketika itu keluar. Kami juga memiliki TweenLite untuk membuat beberapa efek tween dengan warna.

Langkah 22: Konstruktor OverButton

package{
	
	import org.effects.DockButton;
	import flash.display.DisplayObject;
	import flash.events.MouseEvent;
	import com.greensock.TweenLite;
	import com.greensock.plugins.TweenPlugin;
	import com.greensock.plugins.TintPlugin;

	public class OverButton extends DockButton{
		
		private var _object:DisplayObject;
		
		public function OverButton():void{
			_object=this.getChildAt(0) as DisplayObject;
			this.addEventListener(MouseEvent.MOUSE_OVER, mouseOver);
			this.addEventListener(MouseEvent.MOUSE_OUT, mouseOut);
			TweenPlugin.activate([TintPlugin]);
		}  
	}
}

Mengapa kami telah menciptakan pribadi var _object sebagai DisplayObject? Ikon kami sebenarnya disimpan dalam variabel ini (yang adalah apa jalur 13) dan diperlakukan sebagai DisplayObject; kami akan menggunakan efek warna ikon kami, bukan di seluruh objek.

Kami menambahkan acara pendengar mouse untuk memeriksa ketika mouse sudah selesai dan ketika mouse keluar.

Langkah 23: Coding fungsi Mouse

Karena kami telah membuat pendengar untuk mouse dan mouse keluar, sekarang kita akan menciptakan fungsi mereka:

package{
	
	import org.effects.DockButton;
	import flash.display.DisplayObject;
	import flash.events.MouseEvent;
	import com.greensock.TweenLite;
	import com.greensock.plugins.TweenPlugin;
	import com.greensock.plugins.TintPlugin;

	public class OverButton extends DockButton{
	
		private var _object:DisplayObject;
		
		public function OverButton():void{
			_object=this.getChildAt(0) as DisplayObject;
			this.addEventListener(MouseEvent.MOUSE_OVER, mouseOver);
			this.addEventListener(MouseEvent.MOUSE_OUT, mouseOut);
			TweenPlugin.activate([TintPlugin]);
		}  

		private function mouseOver(e:MouseEvent):void{
			new TweenLite(_object,.5,{tint:0x990099});
		}
		
		private function mouseOut(e:MouseEvent):void{
			new TweenLite(_object,.5,{tint:null});
		}
	}
}

Perhatikan bahwa kita menggunakan TweenLite pada _object sekarang, bukan pada "ini" lagi. Itu karena OverButton meluas DockButton yang memanjang DockItem dimana sudah ada TweenLite yang sedang digunakan. Juga, di DockButton kami memiliki latar belakang alpha 0 palsu yang tidak perlu dicat.

Untuk warna milik TweenLite saya menggunakan kode warna dari 0x990099, yang merupakan media ungu; Jika Anda menggunakan null sebagai nilai warna akan dihapus lembut.

Langkah 24: Mengubah kelas dasar

Pada titik ini jika Anda menguji film, Anda tidak akan melihat setiap warna berubah, karena kita perlu mengubah kelas dasar dari setiap objek di Perpustakaan lagi. Membuka perpustakaan sekali lagi dalam fla (jendela > perpustakaan). Klik kanan setiap objek dan ubah kelas dasarnya menjadi OverButton (bukan org.effects.OverButton, karena file kelas tidak ada di folder / org / efek).

OK, sekarang Anda dapat menguji!

Kesimpulan

Dalam tutorial ini saya sudah menjelaskan tentang memperluas objek. Efek dermaga sebenarnya adalah matematika murni - perhitungan jarak, pengaturan skala - tapi itu penting kita melihat dalam kode yang kita tidak dapat menggunakan properti "x" sebagai referensi posisi, karena properti "x" akan berubah setiap waktu. Saya harap Anda semua memiliki pemahaman yang lebih baik "meluas" kata kunci, dan dapat menghargai bagaimana perhitungan lakukan di sini. Terima kasih untuk membaca :)