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:
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.
Saya juga menambahkan Gradient Map, atur warna menjadi hitam dan putih.
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%.
Dan ta-dah! Kita telah menciptakan backgound kayu! Simpan sebagai Dokumen Photoshop (.psd) di folder Desain kita, dan beri nama Background.psd.
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.
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.
Tekan Control + Enter (Windows) atau Cmd + Enter (Mac) untuk memilih jalur Anda saat ini.
Dengan jalur Anda, klik pada tombol "Add Layer Mask". Kita sekarang telah mengisolasi polaroid dari background!
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.
Sekarang Alt-klik pada mask di Panel Layers. Anda sekarang sedang mengedit mask secara langsung.
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.
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.
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.
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:
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.
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.
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:
<images> <image> <file>IMAGE_1.jpg</file> </image> <image> <file>IMAGE_2.jpg</file> </image> <image> <file>IMAGE_3.jpg</file> </image> </images>
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.
package {
import flash.display.MovieClip;
public class Main extends MovieClip {
public function Main():void {
}
}
} 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:
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:
package {
//import the classes we need
import flash.net.URLLoader;
import flash.net.URLRequest;
import flash.events.Event;
import flash.display.Loader;
import flash.display.Bitmap;
import flash.display.Sprite;
public class ImageLoader extends Sprite{
//will load our xml
private var xmlLoader:URLLoader = new URLLoader();
//stores the xml
private var xml:XML;
//a list of file paths to the images
private var imageFileList:XMLList;
//the path to the .swf file
private var swfPath:String;
//the project folder path (where the folders bin, src and lib are located)
private var projectPath:String;
//we must know the title of our project, so we can edit the .swf url to get our projectPath
private var projectTitle:String;
//we need to count how many images we've already loaded
private var count:uint = 0;
//we must store the images, the images are Bitmaps
public var images:Vector.<Bitmap> = new Vector.<Bitmap>;
public function ImageLoader(_projectTitle:String) {
//we must know when ImageLoader has been added, then we can figure out what the root's url is
addEventListener(Event.ADDED, whenAdded);
//store the project's title
projectTitle = _projectTitle;
//when imageLoader is done with loading, call xmlLoaded
xmlLoader.addEventListener(Event.COMPLETE, xmlLoaded);
}
private function whenAdded(event:Event):void {
//store the swf path
swfPath = root.loaderInfo.url;
//get our projectPath
projectPath = swfPath.substr(0, swfPath.length - projectTitle.length);
}
//this function will load the images from an xml, and store the images
public function load(url:String):void {
//load the xml, which we'll need to load the images
xmlLoader.load(new URLRequest(projectPath + url));
}
private function xmlLoaded(event:Event):void {
//store the xml, which xmlLoader has loaded
xml = new XML(event.target.data);
//store all the file links in an XMLList
imageFileList = new XMLList(xml.image.file);
//now that we have the file information, we can load the images
loadImages();
}
private function loadImages():void {
for each (var imageFile:String in imageFileList){
//create
var imageLoader:Loader = new Loader();
//whenever an image has been loaded, call imageLoaded
imageLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, imageLoaded, false, 0, true);
imageLoader.load(new URLRequest(projectPath + imageFile));
}
}
private function imageLoaded(event:Event):void {
//we're counting how many images we've already loaded, we've just loaded (another) one
count++;
//get the image Bitmap
var image:Bitmap = Bitmap(event.target.loader.content);
//store the image in our images Vector
images.push(image);
//if this is the last image we needed to load
if(count == imageFileList.length()){
//we're done, dispatch an event
dispatchEvent(new Event('imagesLoaded'));
}
//--cleanup
//unload the loader
event.target.loader.unload();
}
public function cleanUp():void {
xmlLoader.data = null;
xmlLoader = null;
xml = null;
imageFileList = null;
count = 0;
images = null;
}
}
} Langkah 23: Meningkatkan Kelas Utama Kita
Sekarang kita memiliki kelas ImageLoader, kita dapat meningkatkan Main class.
package {
import flash.display.MovieClip;
import flash.events.Event;
public class Main extends MovieClip {
//a custom class we've made which will load all images from an xml file as Bitmaps
private var imageLoader:ImageLoader;
//this class will hold and display all our Polaroids
private var polaroidHolder:PolaroidHolder;
public function Main():void {
//load our images, give imageLoader the name of the .swf file, so it can load using absolute paths
imageLoader = new ImageLoader('Polaroid.swf');
addChild(imageLoader);
imageLoader.addEventListener('imagesLoaded', displayImages, false, 0, true);
imageLoader.load('pictures.xml');
}
private function displayImages(event:Event):void {
//we've loaded all our images
polaroidHolder = new PolaroidHolder(imageLoader.images);
addChild(polaroidHolder);
//also clean up the imageLoader
imageLoader.cleanUp();
imageLoader = null;
}
}
} 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:
package {
import flash.display.MovieClip;
import flash.display.Bitmap;
import flash.events.MouseEvent;
public class PolaroidHolder extends MovieClip {
//this vector will hold all our Polaroids
public var polaroids:Vector.<Polaroid> = new Vector.<Polaroid>;
//with this variable we no
private var zoomedIn:Boolean;
//the Polaroid we're zoomed in on
private var currentPolaroid:Polaroid;
public function PolaroidHolder(images:Vector.<Bitmap>) {
// constructor code
for each (var image:Bitmap in images) {
//create a new Polaroid
var polaroid:Polaroid = new Polaroid(image);
//position and rotate it
polaroid.x = Math.random() * 200 + 100;
polaroid.y = Math.random() * 200;
polaroid.rotation = Math.random() * 60 - 30;
//add a clicking eventListener
polaroid.addEventListener(MouseEvent.CLICK, onPolaroidClick);
addChild(polaroid);
//add it to the polaroids vector
polaroids.push(polaroid);
}
}
private function onPolaroidClick(event:MouseEvent):void {
//there's been a click on a Polaroid!
if (currentPolaroid == null) {
//no currentPolaroid has been set, we're zooming in
//set the clicked Polaroid as the current Polaroid
currentPolaroid = event.currentTarget as Polaroid;
//mute all other Polaroids (the ones which aren't zoomed in)
for each (var polaroid:Polaroid in polaroids) {
if (polaroid != currentPolaroid) {
polaroid.mute();
}
}
} else {
//check if the click was on the current polaroid
if (event.currentTarget == currentPolaroid) {
//the same polaroid has been clicked (again), time to zoom out
//unmute all other Polaroids, they can respond again to events
for each (var polaroid:Polaroid in polaroids) {
if (polaroid != currentPolaroid) {
polaroid.unmute();
}
}
//now we're not zoomed in, so we don't have a current polaroid
currentPolaroid = null;
}
}
}
}
} 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).
package {
import flash.display.MovieClip;
import flash.events.MouseEvent;
import caurina.transitions.*;
import caurina.transitions.properties.*;
import flash.display.Bitmap;
import flash.events.Event;
public class Polaroid extends MovieClip {
//the scale at which the Polaroid is zoomed in
private static const ZOOMED_IN_SCALE:Number = 1;
//the scale at which the Polaroid is zoomed out
private static const ZOOMED_OUT_SCALE:Number = .6;
//the max height an image can be
private var IMAGE_MAX_HEIGHT:Number;
//the max width an image can be
private var IMAGE_MAX_WIDTH:Number;
//we must scale the loaded images, remember the scale
private var scale:Number;
//when we zoom out, we zoom out back to the Polaroid's original position and rotation
//the Polaroid's original x coordinate.
private var origX:Number;
//we also need the original y coordinate
private var origY:Number;
//store the Polaroid's original rotation
private var origRotation:Number;
//when this Boolean becomes true, the Polaroid will not respond to mouse events
private var muted:Boolean;
//we need to know if the Polaroid has been clicked
public var clicked:Boolean;
public function Polaroid(image:Bitmap) {
//make the Polaroid a button
buttonMode = true;
//the maximum dimensions for an image are limited by the dimensions of imageHolder
IMAGE_MAX_HEIGHT = imageHolder.height;
IMAGE_MAX_WIDTH = imageHolder.width;
//scale the Polaroid down
scaleX = ZOOMED_OUT_SCALE;
scaleY = ZOOMED_OUT_SCALE;
//we'll need to resize the image to make it fit
//first check if it is a portrait or landscape
if (image.width > image.height) {
//it is a landscape
//the scale is limited by the image's height
scale = IMAGE_MAX_HEIGHT / image.height;
} else {
//it is a portrait
//the scale is limited by the image's width
scale = IMAGE_MAX_WIDTH / image.width;
}
//scale the image
image.scaleX = scale;
image.scaleY = scale;
//add the scaled image
imageHolder.addChild(image);
//add event listeners to the Polaroid;
addEventListener(MouseEvent.MOUSE_OVER, onMouseOver);
addEventListener(MouseEvent.MOUSE_OUT, onMouseOut);
addEventListener(MouseEvent.CLICK, onClick);
addEventListener(Event.ADDED, whenAdded);
}
public function mute():void {
//calling this function will make the Polaroid not respond to events
buttonMode = false;
muted = true;
}
public function unmute():void {
//calling this function will make the Polaroid respond to events
buttonMode = true;
muted = false;
}
private function whenAdded(event:Event):void {
//store the Polaroid's original coordinates and rotation
origX = x;
origY = y;
origRotation = rotation;
//we won't need this event listener anymore, remove it
removeEventListener(Event.ADDED, whenAdded);
}
private function onMouseOver(event:MouseEvent):void {
//only respond if the Polaroid has not been muted
if (! muted) {
//only respond if the Polaroid has not been clicked, clicked Polaroids should not respond to mouse overs.
if (! clicked) {
//move the polaroid to the front
parent.setChildIndex(this, parent.numChildren - 1);
//move and turn the polaroid in a random direction
Tweener.addTween(this, {x: origX + Math.random() * 30 - 15, y: origY + Math.random() * 30 -15, rotation:origRotation + Math.random() * 20 - 10, time:1});
}
}
}
private function onMouseOut(event:MouseEvent):void {
//only respond if the Polaroid has not been muted
if (! muted) {
//only respond if the Polaroid has not been clicked
if (! clicked) {
//move the polaroid back to it's original position and rotation
Tweener.addTween(this, {x: origX, y:origY, rotation:origRotation, time:1});
}
}
}
private function onClick(event:MouseEvent):void {
//only respond if the Polaroid has not been muted
if (! muted) {
//if it hasn't been clicked before
if (! clicked) {
//we've been clicked, let's make that true
clicked = true;
//we're zooming in, let's dispatch an event (Main will pick this up)
dispatchEvent(new Event('zoomIn'));
//zoom the Polaroid in to the center of the stage
Tweener.addTween(this, {x:stage.stageWidth/2 - width/2, y:stage.stageHeight/2 - height/2, rotation:0, scaleX:ZOOMED_IN_SCALE, scaleY:ZOOMED_IN_SCALE, time: 1});
} else {
//we've already been clicked, so make clicked false
clicked = false;
//we're zooming out, let's dispatch an event (Main will pick this up)
dispatchEvent(new Event('zoomOut'));
//zoom the polaroid out, back to its original position
Tweener.addTween(this, {x: origX, y:origY, rotation:origRotation, scaleX: ZOOMED_OUT_SCALE, scaleY:ZOOMED_OUT_SCALE, time:1});
}
}
}
}
} Langkah 26: Menambahkan PolaroidHolder Anda ke Main Class Kita
Buat perubahan seperti yang terlihat pada kode di bawah ini.
package {
import flash.display.MovieClip;
public class Main extends MovieClip {
//a custom class we've made which will load all images from an xml file as Bitmaps
private var imageLoader:ImageLoader;
private var polaroidHolder:PolaroidHolder;
public function Main():void {
//load our imagges
imageLoader = new ImageLoader();
imageLoader.addEventListener('imagesLoaded', displayImages, false, 0, true);
imageLoader.load('pictures.xml');
}
private function displayImages(event:Event):void {
//we've loaded all our images
polaroidHolder = new PolaroidHolder(imageLoader.polaroids);
addChild(polaroidHolder);
//also clean up the imageLoader
imageLoader.cleanUp();
imageLoader = null;
}
}
} 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:
package {
import flash.display.MovieClip;
import flash.events.Event;
import caurina.transitions.*;
import caurina.transitions.properties.*;
public class Main extends MovieClip {
//a custom class we've made which will load all images from an xml file as Bitmaps
private var imageLoader:ImageLoader;
//this class will display all our Polaroids, by receiving a Vector of Bitmaps
private var polaroidHolder:PolaroidHolder;
//the wooden background, bg is an abbrivation for background
private var bg:Background
public function Main():void {
//load our images
imageLoader = new ImageLoader('Polaroid.swf');
imageLoader.addEventListener('imagesLoaded', displayImages, false, 0, true);
addChild(imageLoader);
imageLoader.load('pictures.xml');
//add our bg as a child
bg = new Background();
addChild(bg);
//add event listener, so we know when we're zoomed in or out
//3rd parameter of addEventListener is true, so we can capture the event, when it "bubbles" up from the Polaroid
addEventListener('zoomIn', onZoomIn, true);
addEventListener('zoomOut', onZoomOut, true);
}
private function displayImages(event:Event):void {
//we've loaded all our images
polaroidHolder = new PolaroidHolder(imageLoader.images);
addChild(polaroidHolder);
//also clean up the imageLoader
imageLoader.cleanUp();
imageLoader = null;
}
private function onZoomIn(event:Event):void {
//upon zooming in, we'll darken the bg
Tweener.addTween(bg, {alpha:.6, time:1});
}
private function onZoomOut(event:Event):void {
//upon zooming out, we'll lighten the bg
Tweener.addTween(bg, {alpha:1, time:1});
}
}
} 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!
