Tip Cepat: Cara Mengubah Ukuran Gambar Secara Otomatis untuk Menyesuaikan Layar

Tip Cepat ini menjelaskan cara menggunakan gambar sebagai latar belakang situs web dan mengukurnya secara proporsional dengan ukuran panggung. Ini bagus untuk saat Anda menggunakan SWF yang tinggi-penuh dan lebar-penuh di dalam halaman web.

Ikon iMac oleh bobbyperux.

Pratinjau Hasil Akhir

Lihatlah apa yang akan kita kerjakan. Ubah ukuran jendela browser Anda dan klik SWF untuk mengubah ukuran gambar secara otomatis.

Langkah 1: Membuat File Baru

Mari kita mulai dengan membuat File Actionscript 3.0 yang baru. Simpan sebagai resize.fla di mana pun Anda mau - Saya akan berasumsi C:\resize\resize.fla

Langkah 2: Konfigurasikan Folder-foldernya

Mari kita buat folder yang kita perlukan untuk tutorial ini. Jika Anda sudah familiar dengan classpaths dan Anda memiliki classpath Anda sendiri, buat folder \org\display\ di dalamnya (anggap Anda belum memilikinya dengan nama yang sama).

Jika tidak, buat folder \org\display dalam folder yang sama dengan dokumen resize.fla (misalnya: C:\resize\org\display).

Langkah 3: Impor File Gambar

Impor gambar ke perpustakaan FLA Anda sehingga kita dapat menggunakannya untuk menguji efeknya. Klik File > Import > "Import to library".

Pada dialog yang terbuka, temukan file yang ingin Anda gunakan. Gambar langit yang saya pilih tersedia dalam unduhan Sumber di bagian atas halaman.

Langkah 4: Konfigurasikan Gambar untuk Ekspor

Selanjutnya kita akan mengekspor gambar kita untuk ActionScript, sehingga kita dapat merujuknya dalam kode kita.

Pertama buka perpustakaan Anda (jika Anda tidak dapat melihatnya, klik Window > Library), klik kanan gambar, dan klik Properties.

Ubah namanya menjadi "Sky."

Jika opsi lanjutan tidak terlihat, klik Advanced di sudut kanan bawah jendela Properties. Centang opsinya, "Export for ActionScript" dan "Export in Frame 1", menggunakan nama Sky untuk kelasnya dan flash.display.BitmapData untuk kelas dasar. Juga pastikan opsi "Allow smoothing" dicentang; opsi ini akan memastikan bahwa kita menjaga kualitas gambar yang baik saat mengubah ukuran gambar.

Klik OK untuk menutup panel Properties. Jadi, sekarang kita telah mengkonfigurasi semuanya dalam FLA kita, Anda dapat menyimpannya.

Langkah 5: Kelas Kustom OffsetResize

Sekarang mari kita buat dokumen ActionScript baru dan simpan di dalam folder \org\display\ sebagai OffsetResize.as (misalnya: C:\resize\org\display\OffsetResize.as), atau di dalam folder \org\display\ di classpath Anda.

Selanjutnya: kode. Lihat komentarnya.

package org.display{
  
    //Import the needed classes for this object
	import flash.display.Sprite;
	import flash.display.DisplayObject;
	import flash.events.Event;
	

    //Creating a new class extending the Sprite class
	public class OffsetResize extends Sprite{
		
        //Create the static constants for maximum and minimum
        //We will use this for the offsetType property
		public static const MAX:String="max";
		public static const MIN:String="min";

        //The kind of the resize -- whether the image is bigger or smaller than the stage
		private var _offsetType:String;
		
        //The constructor function
		public function OffsetResize($child:DisplayObject,$offsetType:String="max"):void{

        	//The offsetType; if no value is set the "max" value will be automatically assumed
			_offsetType=$offsetType;

            //Add the child here, any kind of DisplayObject
			addChild($child);

            //Check if this object is on stage. if so, call the init() function
			if(stage) init();

            //If it's not on stage it will listen for when it's added to the stage and then call the init() function
			else addEventListener(Event.ADDED_TO_STAGE,init);

            //This will check when this object is removed from the stage and call the end() function
			addEventListener(Event.REMOVED_FROM_STAGE,end);
		}
		

        //The init() function (called when the object is in the stage)
        //The Event=null parameter is because we used the init() without any parameter in the constructor
		// and because it's also used as an event listener (ADDED_TO_STAGE)
		private function init(e:Event=null):void{

        	//Detect when the stage is resized and call the stageResize() function
			stage.addEventListener(Event.RESIZE,stageResize);

            //Call the stageResize() function now, too
			stageResize();
		}
		
        //The stageResize() function will be called every time the stage is resized
        //The e:Event=null parameter is because we have called the stageResize() function without a parameter
		private function stageResize(e:Event=null):void{

        	//Calculate the width ratio by dividing the stage's width by the object's width
			var px:Number=stage.stageWidth/width;

            //Calculate the height ratio by dividing the stage's height by the object's height
			var py:Number=stage.stageHeight/height;

            /*
            	This is the ternary operator; in one line it checks if _offsetType is "max".
                If so, it sets the variable div as the maximum value between the width's ratio and the height's ratio.
                If not, it sets the variable div as the minimum value between the width's ratio and the height's ratio.
                So, this line is responsible for whether the image is bigger or smaller than the stage.
            */
			var div:Number=_offsetType=="max" ? Math.max(px,py) : Math.min(px,py);

            //These two lines resize this object according to the division ratio.
            //If we use scaleX or scaleY here it wont work as we need it to.
			width*=div;
			height*=div;

            //These two lines are responsible for centering this object on the stage.
			x=(stage.stageWidth/2)-(width/2);
			y=(stage.stageHeight/2)-(height/2);
		}
		
        //This function is called when this object is removed from stage, as we don't need the stageResize() function any more
		private function end(e:Event):void{
        	//Remove the RESIZE listener from the stage
			stage.removeEventListener(Event.RESIZE,stageResize);
		}
		
        /*
        	Here we create the offsetType parameter, so we can change how the object
            resizes dynamically
        */
		public function set offsetType(type:String):void{
			_offsetType=type;

            //After changing the type we call stageResize function again to update
			if(stage) stageResize();
		}
		
        //Just for if we want to know what the offsetType is
		public function get offsetType():String{ return _offsetType; }
	}
}

Sekarang Anda dapat menyimpan file OffsetResize.as. Anda dapat menutupnya jika Anda mau; mulai sekarang, kita tidak akan mengeditnya lagi, hanya menggunakannya di dalam kelas lain.

Langkah 6: Konfigurasikan Kelas Dokumen

Sekarang kembali ke FLA dan mari menetapkan kelas dokumen untuk itu. (Tidak akrab dengan kelas dokumen? Baca pengantar singkat ini.)

Buka panel Properties dari FLA dengan cara mengklik di ruang kosong di atas panggung (tanpa objek yang dipilih), kemudian mengklik Window > Properties.

Di panel yang terbuka, ketik "Main" untuk Class (atau Document Class, di Flash CS3).

Simpan FLA lagi tetapi jangan menutupnya.

Langkah 7: Buat Kode Kelas Dokumen

Kita bisa menulis kode kita langsung di timeline, tapi itu bukan kebiasaan yang baik; tujuan dari kelas dokumen adalah untuk menghilangkan pemrograman timeline.

Jadi, buat File ActionScript baru dan simpan sebagai "Main.as" di folder yang sama dengan FLA Anda (misalnya: C:\resize\Main.as).

Mari mengkodenya sekarang (lihat komentar di kode):

package{
	
    //Let's import the needed classes
	import org.display.OffsetResize;
	import flash.display.Sprite;
	import flash.display.Bitmap;
	import flash.display.StageAlign;
	import flash.display.StageScaleMode;
	import flash.events.Event;
	import flash.events.MouseEvent;
	
    //We are extending the Sprite class, rather than MovieClip, since we won't use any timeline animation here
	public class Main extends Sprite{
		
        //This will be the instance of our custom object OffsetResize
		private var _bg:OffsetResize;
		
        //The constructor
		public function Main():void{

        	/*
            	We could use the stage property directly here, but I'm assuming that a lot of people
                create a document like "base.swf" which loads the "main.swf" file -- in which case our
                main.swf wouldn't have the stage property.
				
                But it checks if there is a stage property. We can use this swf we will create with
                or without the base.swf; in this case we will use it without the base.swf, but it's
                prepared to use with the latter if we want.

                So this line will check if our swf is on the stage, and, if so, call init().
            */
			if(stage) init();

            //If not on the stage it will call the init() function only when it's added to the stage
			else addEventListener(Event.ADDED_TO_STAGE,init);
		}
		
        //The init function is called only when the object is in the stage
        //It was explained before whe we are using this in the constructor function
		private function init(e:Event=null):void{

        	//Setting how the stage will scale (it will not scale) and its alignment (top-left corner)
			stage.scaleMode=StageScaleMode.NO_SCALE;
			stage.align=StageAlign.TOP_LEFT;

            //Remember the picture in the library? Well, this is why we exported it for AS.
            //Let's create a Bitmap object with that image:
			var picture:Bitmap=new Bitmap(new Sky(0,0));

            //Now we create an instance of the OffsetResize class we coded before.
            //The second parameter is optional and can be left blank; its value can be OffsetResize.MAX or OffsetResize.MIN.
			_bg=new OffsetResize(picture,OffsetResize.MIN);

            //add the instance of the OffsetResize to the stage at child index 0, so it will be behind everything (it's a background)
			stage.addChildAt(_bg,0);

            //The code so far is enough to make this work, but I will show how to change the offsetType dynamically.
            //So let's add a MOUSE_DOWN event, which will call the mouseDown() function when we click on the stage.
			stage.addEventListener(MouseEvent.MOUSE_DOWN,mouseDown);
		}
		
        //This function is called every time that we click the stage
		private function mouseDown(e:MouseEvent):void{
        	/*
            	This is the ternary operator, it's a compact version of this long if statement:
                if(_bg.offsetType==OffsetResize.MAX){
                	_bg.offsetType=OffsetResize.MIN;
                }
                else{
                	_bg.offsetType=OffsetResize.MAX;
                }
            */
			_bg.offsetType = _bg.offsetType==OffsetResize.MAX ? OffsetResize.MIN : OffsetResize.MAX;
		}
	}
}

Langkah 8: Uji Coba

Periksa apakah itu baik-baik saja.

• Kita perlu memiliki gambar di Library yang disebut "Sky" yang diekspor untuk ActionScript dengan nama kelas Sky dan kelas dasar flash.display.BitmapData.
• Kita juga harus mengatur kelas dokumen ke "Main"
• file Main.as di folder yang sama dengan FLA
• dan file OffsetResize.as di dalam \org\display (yang berada di dalam folder yang sama dengan file .fla atau di dalam classpath).

Jika semua persyaratan ini dipenuhi, Anda dapat mengujinya sekarang!

Kesimpulan

Kita membuat kelas kustom yang disebut "OffsetResize", yang mengubah ukuran objek tertentu sesuai dengan ukuran panggung. Jika Anda membuatnya di classpath Anda maka Anda dapat menggunakannya di mana pun Anda mau: semua yang perlu Anda lakukan adalah mengimpor objek OffsetResize dan menggunakannya; itu dapat diperpanjang dan dapat digunakan kembali. Tapi ingat itu untuk digunakan dengan konten terukur, misalnya SWF dalam HTML yang membutuhkan 100% dari lebar dan tinggi.

Terima kasih telah membaca! Posting semua pertanyaan di komentar.