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

Membuat Nifty Polaroid Photo Viewer Dengan Flash dan Photoshop

by
Read Time:19 minsLanguages:

Indonesian (Bahasa Indonesia) translation by Uady (you can also view the original English article)

Pernah ingin membuat aplikasi photo viewer yang indah dan mudah diatur? Dalam tutorial ini, saya akan menunjukkan kepada Anda bagaimana merancang dan mengkodekan photo viewer Polaroid yang bagus, dengan fokus pada desain dan tweening.


Pratinjau Hasil Akhir

Mari lihat hasil akhir yang akan kita upayakan:


Bagian 1: Penyusunan

Di bagian ini kita akan membahas struktur folder, juga akan memperoleh stock imagery.


Langkah 1: Membuat Folder Kita

Pertama mari kita buat folder di mana proyek akan berlokasi. Kita akan menamainya "Polaroid Viewer".

Setelah itu cukup salin struktur folder ini:

The folder structure which we'll use in our tutorialThe folder structure which we'll use in our tutorialThe folder structure which we'll use in our tutorial

Langkah 2: Memahami Struktur Folder Kita

Saat membuat proyek yang sangat visual, sangat penting untuk terlebih dahulu benar-benar tahu apa yang ingin Anda desain. Di dalam folder Desain, saya selalu memiliki konsep visual dan di folder Desain, saya mengedit gambar yang saya perlukan untuk sebuah proyek.

Setelah saya selesai mengerjakan konsep saya, saya melanjutkan membuat produk yang berfungsi, saya melakukan ini di dalam folder Project. Di dalam folder Project adalah struktur folder bin, lib dan src yang sangat terkenal:

  • bin: Semua yang diekspor dan diperlukan untuk meluncurkan produk akhir, termasuk aset data.
  • lib: Dokumen Flash Kita.
  • src: Semua kode, kelas sendiri, serta frameworks lainnya.

Langkah 3: Dapatkan Stock Imagery

Sekarang kita telah membuat folder, mari lanjutkan ke gambar. Dalam tutorial ini kita akan membutuhkan setidaknya dua gambar:

Anda memerlukan akun Stock Xchange untuk mengunduh gambar-gambar ini, jika Anda belum memilikinya, Anda harus mendaftar! Ini adalah situs web yang diisi dengan stock imagery gratis!

Klik tautan untuk mengunduh gambar, kemudian simpan atau pindahkan ke folder Desain kita.

Kita juga perlu gambar untuk ditempatkan di dalam bingkai polaroid. Berikut adalah daftar gambar yang telah saya gunakan, tetapi jangan ragu untuk menggunakan gambar Anda sendiri.


Bagian 2: Desain

Di bagian ini kita akan mengedit stock images. Setelah melakukannya, kita akan mengimpor gambar-gambar ini ke dalam dokumen Flash, yang akan dibuat nanti.

Kita akan mengedit gambar dengan Photoshop, saya akan menggunakan CS5, namun Anda selalu dapat menggunakan versi yang lebih lama. Jika Anda tidak begitu percaya diri dengan keterampilan Photoshop Anda, Anda dapat mengunduh gambar yang sudah saya edit. Cukup unduh file sumber dari tutorial ini, dan Anda dapat menemukan gambar di dalam folder Edited Images.


Langkah 4: Mempersiapkan Lantai Kayu Kita

Dalam contoh terakhir, semua gambar polaroid kita terletak di lantai kayu. Sekarang kita akan membuat background ini.

Buat Dokumen Baru di Photoshop dengan dimensi 600x600px.

Tambahkan gambar tekstur kayu ke dokumen. Skalakan sehingga Anda senang dengan hasil akhir.

Our background has been scaled down.Our background has been scaled down.Our background has been scaled down.

Saya juga menambahkan Gradient Map, atur warna menjadi hitam dan putih.

Add a gradient map to our background

Terakhir saya telah mengubah transisi gradient map menjadi 80%. Untuk melakukannya, klik pada salah satu panah bawah, dan kemudian klik pada titik di tengah gradient. Seret titik ini ke 80%.

Editing the Gradient MapEditing the Gradient MapEditing the Gradient Map

Dan ta-dah! Kita telah menciptakan backgound kayu! Simpan sebagai Dokumen Photoshop (.psd) di folder Desain kita, dan beri nama Background.psd.

Our background which we'll use in our projectOur background which we'll use in our projectOur background which we'll use in our project

Langkah 5: Mempersiapkan Frame Polaroid

Kita ingin menempatkan gambar sendiri di dalam bingkai polaroid. Kita harus melakukan dua hal, pertama-tama kita harus menghapus bingkai polaroid dari background (putih), dan juga kita harus memotong bagian "foto".

Untuk melakukan ini, pertama-tama kita akan membuat dokumen Photoshop 600x600px baru. Tempel gambar polaroid di dalam dokumen, turunkan ukurannya sampai pas.

The polaroid frame image has been opened in PhotoshopThe polaroid frame image has been opened in PhotoshopThe polaroid frame image has been opened in Photoshop

Mengapa kita menurunkan skala gambar? Karena kita sedang membuat dokumen Flash 600x600px, dan tidak perlu memiliki dan memuat gambar besar jika kami bahkan tidak akan men-skala itu lebih besar dari 600 px.


Langkah 6: Mengisolasi Frame Polaroid

Pilih pen tool (P) dan klik di sekitar tepi luar bingkai polaroid. Saat bekerja dengan Pen tool, pastikan untuk mengatur Pen tool dalam mode Paths-nya.

Set the Pen Tool to paths mode.Set the Pen Tool to paths mode.Set the Pen Tool to paths mode.

Tekan Control + Enter (Windows) atau Cmd + Enter (Mac) untuk memilih jalur Anda saat ini.

Select with the pen tool the outer area of the polaroid pictureSelect with the pen tool the outer area of the polaroid pictureSelect with the pen tool the outer area of the polaroid picture

Dengan jalur Anda, klik pada tombol "Add Layer Mask". Kita sekarang telah mengisolasi polaroid dari background!

Add a layer mask to the polaroid

Langkah 7: Memotong Bagian Foto Dari Bingkai Polaroid

Langkah ini sangat mirip dengan Langkah Desain 4. Sekali lagi pilih pen tool, dan klik di sekitar area bagian dalam bingkai polaroid. Setelah itu pilih jalur saat ini dengan Ctrl + Enter/Cmd + Enter.

Select with the pen tool the inner area of the polaroid pictureSelect with the pen tool the inner area of the polaroid pictureSelect with the pen tool the inner area of the polaroid picture

Sekarang Alt-klik pada mask di Panel Layers. Anda sekarang sedang mengedit mask secara langsung.

Editing the Layer Mask of our polaroid pictureEditing the Layer Mask of our polaroid pictureEditing the Layer Mask of our polaroid picture

Pilih Marquee tool (M). Klik kanan pilihan Anda dan pilih Fill > Black.

Alt-klik lagi pada mask icon, untuk kembali ke Layer view "normal". Kita telah berhasil mengedit mask dan sekarang polaroid siap digunakan. Mari simpan gambar sebagai dokumen Photoshop (.psd), saya telah menamai dokumen saya Polaroid.psd.

The polaroid picture has been editedThe polaroid picture has been editedThe polaroid picture has been edited

Bagian 3: Flash

Di bagian ini kita (akhirnya) akan menggunakan Flash. Kita akan mengatur dokumen Flash untuk menggunakan folder bin untuk mengekspor, dan folder src untuk kode kita. Saatnya membuka Flash!


Langkah 8: Membuat Dokumen Flash Kita

Buat Dokumen Flash baru (ActionScript 3.0) dengan Flash Professional. Atur dimensi ke 600x600px dan framerate menjadi 24 fps. Atur Document Class ke Main. Ubah juga background menjadi hitam (#000000). Simpan sebagai "Polaroid.fla", di dalam folder lib.


Langkah 9: Mengubah Publish Settings Kita

Setelah itu buka File > Publish Settings, ubah Polaroid.swf ke ../bin/Polaroid.swf, Anda dapat menghapus centang opsi HTML. Sekarang semua yang diekspor (hanya SWF) akan berada di folder bin. Jangan tutup jendela Publish Settings.

Change our publish settings of our Flash DocumentChange our publish settings of our Flash DocumentChange our publish settings of our Flash Document

Langkah 10: Mengubah Jalur Sumber Kita

Klik tab Flash. Setelah itu klik Settings button di sebelah Script: ActionScript 3.0.

Sekarang kita dapat mengubah jalur sumber. Anda akan melihat ikon folder dengan teks ".", Ubah itu menjadi "../src".

Flash akan menggunakan folder src untuk semua kelasnya.

Change the ActionScript settings of our Flash DocumentChange the ActionScript settings of our Flash DocumentChange the ActionScript settings of our Flash Document

Langkah 11: Mengimpor Grafik Kita ke Flash

Sekarang saatnya untuk mulai mengimpor grafik kita ke Dokumen Flash. Jika Anda memiliki masalah dengan gambar, Anda selalu dapat mengunduh file sumber dari tutorial ini di bagian atas. Akan ada folder bernama "Edited Images", di dalamnya akan ada gambar yang diedit yang dapat digunakan.

Buat Dokumen Flash baru (ActionScript 3.0) dengan Flash Professional. Atur dimensi ke 600x600px dan framerate menjadi 24 fps. Ubah juga background menjadi hitam (#000000).

Kita telah menyimpan gambar kita sebagai file .psd karena sangat bekerja dengan produk Adobe lainnya, seperti Flash. Setelah membuat dokumen kami, pilih File > Impor ke Perpustakaan dan pilih Polaroid.psd dan Background.psd. Setelah melakukannya, library kita terlihat seperti ini:

We've imported our assets in to our Flash Document's library

Langkah 12: Membuat Sprite Background Kita

Seret Background.psd dari Library ke stage kita, lalu konversikan ke klip video. Beri nama background, dan centang kotak "Ekspor untuk ActionScript". Atur kelas dasar ke flash.display.Sprite. Setelah melakukannya, Anda dapat menghapus background lagi dari atas stage.

Convert the background to a symbolConvert the background to a symbolConvert the background to a symbol

Mengapa saya mengatur kelas dasar Background ke Sprite daripada kelas dasar default MovieClip? Karena satu-satunya perbedaan antara MovieClip dan Sprite adalah MovieClips dapat berisi beberapa frame, dan Sprite tidak bisa. Kita tidak memerlukan banyak bingkai untuk Background kita, jadi mari kita atur kelas dasar Background ke Sprite.


Langkah 13: Membuat dan Klip Polaroid Movie Kita

Sama seperti yang dilakukan dengan background, seret polaroid.psd dari Libary ke stage kita. Konversikan ke klip video dan beri nama Polaroid, centang lagi kotak Export for ActionScript. Atur kelas dasar ke flash.display.Sprite.


Langkah 14: Membuat Layer Polaroid Kita

Polaroid kita masih di atas panggung, klik dua kali, sehingga kita dapat mengeditnya. Sejauh ini Polaroid hanya memiliki satu layer, ganti nama layer ini menjadi Polaroid Frame.

Buat dua Layers baru, beri nama Mask dan Image Holder.

The layers inside the symbol PolaroidThe layers inside the symbol PolaroidThe layers inside the symbol Polaroid

Langkah 15: Membuat Image Holder

Polaroid kita akan berisi gambar, gambar ini harus ditampilkan di suatu tempat, ini akan dilakukan dalam klip video bernama "Image Holder".

Gambarlah sebuah persegi panjang dengan ukuran kira-kira sebagai "area foto" dari polaroid, lakukan ini di layer Image Holder. Tidak masalah warna persegi panjangnya. Setelah membuat persegi panjang ini, konversikan ke klip video, beri nama "Image Holder".

Berikan Image Holder nama instance dari imageHolder.


Langkah 16: Menambahkan Mask ke Image Holder

Image Holder akan berisi gambar-gambar yang akan kita muat. Terkadang gambar ini terlalu besar -- misalnya, gambar berukuran 400x100px; gambar ini terlalu lebar, dan ujung-ujungnya akan keluar dari polaroid. Kita ingin mencegah ini. Karenanya kita harus menyembunyikan semua citra yang memanjang di luar area Image Holder.

Untuk melakukan ini, kita harus membuat mask. Mask memberi tahu layer bagian mana yang harus ditampilkan, dan bagian mana yang harus disembunyikan.

Jika kita ingin setiap gambar ditampilkan di dalam Image Holder, tanpa ada tepi yang menonjol, kita harus mengatur ukuran mask ke dimensi yang sama dengan Image Holder itu sendiri.

Salin Image Holder, dan tempel di tempatnya dengan Ctrl + Shift + V (Windows) / Cmd + Shift + V (Mac) pada layer Mask. Setelah itu hancurkan Image Holder yang disalin dengan Ctrl + B (Windows) / Cmd + B (Mac).

Terakhir kita harus memberi tahu layer Mask kita bahwa itu adalah Mask. Klik kanan pada layer Mask dan pilih opsi Mask.


Bagian 4: Kode

Saatnya memulai pengkodean, jika Anda mengalami masalah dengan Flash Section, Anda bisa menyalin folder Flash Section Completed. Di dalam folder itu adalah semua yang Anda butuhkan untuk mulai mengikuti langkah-langkah ini.


Langkah 17: Membuat File XML

Untuk memuat gambar, kita akan menggunakan file XML. File XML akan memberi tahu produk di mana gambar berada.

Buka editor teks dan ketikkan yang berikut:

Anda harus mengubah IMAGE_1.jpg, IMAGE_2.jpg, dll menjadi nama file asli, yang merujuk ke gambar yang terletak di dalam folder bin. Jika Anda tidak memiliki gambar, unduh gambar yang saya sebutkan di Langkah 3.

Simpan file XML ini sebagai images.xml, di dalam folder bin.


Langkah 18: Kelas Mana Yang Kita Butuhkan?

Sebelum memulai pengkodean, penting untuk mengetahui tugas mana yang harus dilakukan proyek kita:

  • Kita harus memuat gambar kita dari file XML.
  • Kita harus menampilkan gambar-gambar ini di dalam Polaroid.
  • Kita harus mencegah Polaroid lain dari memperbesar ketika kita sudah diperbesar pada Polaroid.

Untuk mengkodekan semua fungsi ini dalam satu kelas akan membuat kelas itu sangat kompleks, lebih baik memisahkan setiap tugas ke kelas yang berbeda.

  • ImageLoader: Akan memuat file XML dan meneruskan gambar ke PolaroidHolder.
  • PolaroidHolder: Saat menerima gambar, itu akan membuat Polaroid untuk setiap gambar, jadi itu juga memastikan bahwa hanya satu Polaroid yang diperbesar secara bersamaan.
  • Polaroid: Gambar akan ditampilkan di dalam kelas ini.

Langkah 19: Membuat Kelas Utama Kita

Main class adalah kelas yang dipanggil Polaroid.fla saat diinisiasi.

Buat file ActionScript baru dan beri nama "Main.as", simpan di dalam folder src. Main class terlihat sebagai berikut.

Itu sangat kosong karena pertama-tama kita perlu membuat kelas yang lain, sementara kita sibuk kita akan terus menambahkan kode ke Main class.


Langkah 20: Menjelaskan Absolute dan Relative File Paths

Dalam proyek ini kita memuat beberapa aset: file xml dan berbagai gambar. Kita dapat menggunakan relative file paths atau absolute paths. Izinkan saya menjelaskan perbedaannya dengan sebuah contoh; kita memiliki struktur folder berikut:

An imaginary folder setup, we're using this example to understand the difference between absolute and relative file pathsAn imaginary folder setup, we're using this example to understand the difference between absolute and relative file pathsAn imaginary folder setup, we're using this example to understand the difference between absolute and relative file paths

Loader.swf harus memuat image1.jpg. Dari posisi saat ini, Loader.swf harus "membuka" direktori gambar dan memuat image1.jpg. Kita memberi tahu Loader.swf untuk memuat gambar images/image1.jpg. Jenis pemuatan ini disebut relative file path loading, karena url relative terhadap posisi Loader.swf saat ini.

Jadi, bagaimana Anda memuat image1.jpg, terlepas dari di mana Loader.swf berada? Ini dilakukan dengan absolute file path loading. Jalur file dimulai dari inti atas, dari akarnya. Jika ada di komputer, akarnya adalah hard drive. Kita sedang menyebarkan proyek secara online, jadi akarnya akan menjadi server situs.


Langkah 21: Mengapa Kita Membutuhkan Absolute File Paths

Ketika proyek selesai, kita ingin menggunakannya. Kemungkinan besar itu akan tertanam di dalam halaman HTML. Ada satu masalah kecil. Jika Loader.swf ingin memuat, itu akan memuat dari lokasi saat ini, dari lokasi halaman HTML. Kita tidak menginginkan ini, dan oleh karena itu kita harus menggunakan absolute file path loading.

Sekarang datang masalah terbesar, kita tidak akan tahu lokasi file HTML. Kita perlu menemukan path absolute ke file .swf, dan mengedit path itu sehingga kita dapat memuat imagery kita.

Kita bisa mendapatkan path absolut ke file .swf dengan root.loaderInfo.url.

Saatnya untuk membuat kelas ImageLoader kita.


Langkah 22: Membuat Kelas ImageLoader Kita

Buat file ActionScript baru dan beri nama ImageLoader.as, simpan di dalam folder .src. Kelasnya terlihat seperti ini, telah dikomentari secara menyeluruh:


Langkah 23: Meningkatkan Kelas Utama Kita

Sekarang kita memiliki kelas ImageLoader, kita dapat meningkatkan Main class.


Langkah 24: Membuat Kelas PolaroidHolder Kita

PolaroidHolder akan menerima gambar sebagai Vector. Setelah menerima gambar, itu akan menciptakan Polaroid untuk setiap gambar. Mari kita membuat kelas PolaroidHolder:

Pada baris 50 dan 62, kita memanggil fungsi mute() dan unmute(). Mute membuat Polaroid mati untuk semua event, itu tidak akan menanggapi overs mouse, atau klik. Inilah yang kita inginkan saat zoom in. Kita tidak ingin Polaroid lain melakukan apa pun. Setelah melakukan zoom out, kita ingin Polaroids merespons event; dengan memanggil unmute, Polaroids akan merespons lagi terhadap overs dan klik mouse.


Langkah 25: Membuat Kelas Polaroid Kita

Sekarang saatnya membuat kelas yang paling menarik, kelas Polaroid! Untuk kelas ini kita membutuhkan tweening library tweener yang populer. Unduh, dan simpan library di dalam folder src (lihat panduan ini untuk lebih jelasnya).


Langkah 26: Menambahkan PolaroidHolder Anda ke Main Class Kita

Buat perubahan seperti yang terlihat pada kode di bawah ini.


Langkah 27: Hasilnya Sejauh Ini

Tampaknya bekerja, tetapi itu tidak terlalu menarik. Saat zoom in, pengguna tidak "tertarik", produk kita tidak cukup mendalam. Yang dibutuhkan adalah background! Secara kebetulan kita membuat satu di Langkah 4. Saatnya untuk menambahkan background kita!


Langkah 28: Menambahkan Background Kita

Kita telah mengekspor background dengan kelas Background.

Kita tidak hanya akan menambahkan Background sebagai anak Utama, kita juga akan membuat Background menjadi lebih gelap saat kita zoom in, dan mencerahkan saat kita zoom out. Bagaimana kita melakukan ini? Setiap kali Polaroid diklik, ia mengirim acara kustom, zoomIn atau zoomOut. Kita dapat melacak acara ini, cukup tambahkan listener event ke Main class kita, mereka akan mengambil event zoomIn dan zoomOut, dan setiap kali mereka diambil, kita dapat memberitahu Background kita untuk menjadi terang atau gelap:


Langkah 29: Mencari Kembali

Tada! Sudah selesai, benar-benar tutorial! Saya harap kalian bersenang-senang mengikuti tutorial ini, dan juga belajar sesuatu darinya. Mengapa tidak bermain-main dengan kode? Anda dapat mencoba menambahkan bidang teks dan entah bagaimana menampilkan judul gambar. Atau gunakan beberapa jenis Polaroid. Terima kasih, dan jangan ragu untuk berkomentar jika Anda memiliki pertanyaan atau komentar. T tetap awasi tutorial saya berikutnya!

Advertisement
Did you find this post useful?
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.