Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Web Design
Code

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

by
Difficulty:BeginnerLength:MediumLanguages:

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.

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):


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.

Advertisement
Advertisement
Advertisement
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.