Indonesian (Bahasa Indonesia) translation by Ari Ana (you can also view the original English article)
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.
