() translation by (you can also view the original English article)
Dalam tip cepat ini, saya akan menunjukkan kepada Anda bagaimana untuk menyimpan dan mengakses SharedObjects (setara dengan Flash cookies) sehingga Anda dapat menyimpan dan memuat data pengguna diantara sesi.
Hasil akhir Tinjauan
Mari kita lihat pada hasil akhir yang kita akan kerjakan:
Perhatikan bahwa animasi intro tidak berjalan jika Anda sudah melihatnya sekali. Coba masuk (Anda dapat menggunakan kombinasi nama pengguna/sandi) dan kemudian refresh browser tanpa log out. Rincian Anda akan secara otomatis dimasukkan.
Untuk mereset data yang disimpan dalam SharedObject, login dan kemudian logout lagi.
Langkah 1: Menyiapkan dokumen
Hal pertama yang harus lakukan adalah men-download source file untuk tutorial ini. Karena tutorial ini adalah tip cepat, aku akan melewatkan langkah-langkah tata letak. Setelah Anda sudah mendownliad filenya, buka file 'sharedObject.fla'. Ketika file di-load, Anda akan melihat bahwa kita memiliki tiga keyframes di timeline.
Keyframe pertama memegang animasi intro. Animasi adalah hanya sebuah movieklip dengan motion tween dan aksi 'stop' di akhir.
Keyframe kedua adalah layar login. Di sini, pengguna dapat memasukkan informasi mereka. Mereka dapat memilih untuk menyimpan atau tidak. Jika pengguna mengklik tombol 'Watch animation again', mereka akan dibawa kembali ke keyframe pertama. Juga, SharedObject yang kita atur akan dihapus.
Keyframe terakhir berisi RSS reader sederha untuk ActiveTuts+ feed. Jika pengguna mengklik tombol 'Log out', mereka akan dibawa kembali ke keyframe kedua dan SharedObject akan dihapus. Ini berarti bahwa pengguna akan melihat animasi intro ketika waktu berikutnya mereka mengunjungi situs.
Langkah 2: Kelas dokumen
Buat sebuah file baru 'ActionScript' dan Simpan ke folder yang sama sebagai 'sharedObject.fla.' Berikan file ini nama 'sharedObject.as.' Selanjutnya, link Flash file dan ActionScript file bersama-sama dalam panel properti. Untuk melihat lebih mendalam cara mengatur dokumen kelas, kunjungi Tip cepat lainnya.
Langkah 3: Impor
Berikut adalah pernyataan impor yang kita akan gunakan untuk file ini. Karena kita menggunakan lebih dari satu frame Timeline, kita akan perlu untuk memperpanjang itu sebagai sebuah MovieClip.
1 |
|
2 |
package { |
3 |
|
4 |
import flash.display.MovieClip; |
5 |
import flash.display.SimpleButton; |
6 |
import flash.events.Event; |
7 |
import flash.events.MouseEvent; |
8 |
import flash.net.SharedObject; |
9 |
import flash.net.URLLoader; |
10 |
import flash.text.TextField; |
11 |
|
12 |
public class sharedObject extends MovieClip |
13 |
{
|
14 |
|
15 |
public function sharedObject() |
16 |
{
|
17 |
|
18 |
}
|
19 |
}
|
20 |
}
|
Langkah 4: Dimulai dengan SharedObject
Berikut adalah apa yang dikatakan referensi bahasa ActionScript 3.0 tentang SharedObjects:
Kelas SharedObject digunakan untuk membaca dan menyimpan data dalam jumlah terbatas pada pengguna komputer atau server. Bersama objek menawarkan real-time berbagi data antara beberapa file SWF klien dan objek-objek yang ada pada komputer lokal atau remote server. Local shared objek mirip dengan cookie browser dan remote shared objek mirip dengan perangkat transfer real-time data. Untuk menggunakan remote objek yang dibagi, Anda memerlukan Adobe Flash Media Server.
Dalam contoh ini, kita hanya akan bekerja dengan objek yang dibagi lokal. Untuk memulai dengan SharedObjects, kita membuat sebuah variabel disebut 'shared' dan sebagai SharedObject. Selanjutnya, kita akan menggunakan metode 'getLocal' kelas SharedObject. Saya memberikannya nama 'example', tetapi Anda dapat memberikan nama apapun yang Anda suka.
Setelah kami telah diinisialisasi SharedObject kami, kita memanggil fungsi 'init'. Dalam fungsi 'init', kita berhentikan timeline utama. Kami juga memeriksa SharedObject untuk melihat jika animasi intro telah mengamati. Jika iya, kami mengirim pengguna ke frame 2. Jika 'melihat' properti pada objek 'data' SharedObject kami belum diatur, kami menjalankan animasi dan mendengarkannya hingga selesai menggunakan peristiwa ENTER_FRAME.
1 |
|
2 |
package { |
3 |
import flash.display.MovieClip; |
4 |
import flash.display.SimpleButton; |
5 |
import flash.events.Event; |
6 |
import flash.events.MouseEvent; |
7 |
import flash.net.SharedObject; |
8 |
import flash.net.URLLoader; |
9 |
import flash.text.TextField; |
10 |
|
11 |
public class sharedObject extends MovieClip |
12 |
{
|
13 |
private var shared:SharedObject; |
14 |
|
15 |
public function sharedObject() |
16 |
{
|
17 |
shared = SharedObject.getLocal("example"); |
18 |
init(); |
19 |
}
|
20 |
private function init():void |
21 |
{
|
22 |
this.stop(); |
23 |
if(shared.data.watched === true) |
24 |
{
|
25 |
this.gotoAndStop(2); |
26 |
frame2handler(); |
27 |
}
|
28 |
else
|
29 |
{
|
30 |
this.addEventListener(Event.ENTER_FRAME, onEnter); |
31 |
}
|
32 |
}
|
33 |
}
|
34 |
}
|
Langkah 5: Penanganan Animasi Intro
Dalam fungsi 'onEnter', kita mendengarkan untuk melihat jika animasi telah mencapai akhir framenya. Ketika iya, kami menghapus event listener, pergi ke keyframe kedua pada timeline utama, dan panggil fungsi 'frame2handler'. Kami juga mengatur properti 'watched' pada 'data' objek SharedObject. Karena 'data' adalah objek, kita dapat menetapkan nilai apapun untuk itu. Saya hanya menggunakan 'watched' sebagai indikator untuk animasi intro.
Selanjutnya, kita memanggil metode 'flush' dari SharedObject. Ini akan menyimpan SharedObject ke file lokal yang sesuai dan dapat diakses untuk digunakan nanti.
1 |
|
2 |
private function onEnter(event:Event):void |
3 |
{
|
4 |
if(animation.currentFrame === animation.totalFrames) |
5 |
{
|
6 |
this.removeEventListener(Event.ENTER_FRAME, onEnter); |
7 |
this.gotoAndStop(2); |
8 |
frame2handler(); |
9 |
shared.data.watched = true; |
10 |
shared.flush(); |
11 |
}
|
12 |
}
|
Langkah 6: Layar Login
Dalam fungsi 'frame2handler', Anda akan melihat bahwa aku memanggil 'addFrameScript' metode. Menggunakan metode ini, kita dapat mengakses movieklip berbeda di berbagai belahan timeline. 'addFrameScript' adalah berbasis nol, sehingga untuk mengakses movieklip pada frame 2, kami memasukan angka 1. Juga, kami memasukan sebuah fungsi inline untuk menangani logika apapun pada frame 2. Dalam fungsi itu, kami memeriksa untuk melihat jika SharedObject sudah mengatur nilai 'user', 'password' dan 'remember'. Jika iya, kita mengisi bidang teks dengan informasi yang sesuai.
1 |
|
2 |
private function frame2handler():void |
3 |
{
|
4 |
this.addFrameScript(1, function(){ |
5 |
if(shared.data.user != null && shared.data.password != null) |
6 |
{
|
7 |
user.text = shared.data.user; |
8 |
password.text = shared.data.password; |
9 |
remember.selected = shared.data.remember; |
10 |
}
|
11 |
remember.label = "Remember me"; |
12 |
enter.addEventListener(MouseEvent.CLICK, onClick); |
13 |
watcher.addEventListener(MouseEvent.CLICK, onClick); |
14 |
}); |
15 |
}
|
Langkah 7: Penanganan tombol klik
Karena app kecil, kami akan menangani semua klik dengan satu fungsi. Dalam fungsi 'onClick', kami memeriksa nama target event. Jika namanya adalah 'enter', kami kemudian memerika untuk melihat jika pengguna ingin informasi login mereka diingat. Jika mereka melakukannya, kami hanya menambahkan nilai untuk objek 'data'. Jika tidak, kami akan menghapus nilai-nilai dari objek 'data'. Setelah itu, kita mengirim pengguna ke frame 3 dan memanggil 'frame3handler.' Jika pengguna telah mengklik tombol 'watcher', kami menghapus nilai yang terkait dengan animasi intro. Pengguna kemudian kembali ke frame pertama, dan kita memanggil fungsi 'init' menggunakan 'addFrameScript.' Akhirnya, pada frame yang ketiga, jika pengguna mengklik tombol 'clearer', kita hapus 'data' objek dan semua nilai SharedObject terhapus. Pengguna kemudian dikirim kembali ke frame 2 dan tidak ada informasi yang dipertahankan.
1 |
|
2 |
private function onClick(event:MouseEvent):void |
3 |
{
|
4 |
switch(event.target.name) |
5 |
{
|
6 |
case "enter" : |
7 |
if(remember.selected) |
8 |
{
|
9 |
shared.data.user = user.text; |
10 |
shared.data.password = password.text; |
11 |
shared.data.remember = remember.selected; |
12 |
shared.flush(); |
13 |
}
|
14 |
else
|
15 |
{
|
16 |
delete shared.data.user; |
17 |
delete shared.data.password; |
18 |
}
|
19 |
this.gotoAndStop(3); |
20 |
frame3handler(); |
21 |
break; |
22 |
case "watcher" : |
23 |
delete shared.data.watched; |
24 |
this.gotoAndStop(1); |
25 |
this.addFrameScript(0, function(){ |
26 |
init(); |
27 |
}); |
28 |
break; |
29 |
case "clearer" : |
30 |
shared.clear(); |
31 |
this.gotoAndStop(2); |
32 |
break; |
33 |
}
|
34 |
}
|
Langkah 8: Frame 3
Dalam fungsi 'frame3handler', kita menggunakan 'addFrameScript' lagi untuk mengakses movieklip pada frame 3. Dalam fungsi inline, kami memuat RSS feed dan menggunakan List dan TextArea komponen untuk menampilkan informasi.
1 |
|
2 |
private function frame3handler():void |
3 |
{
|
4 |
this.addFrameScript(2, function(){ |
5 |
clearer.addEventListener(MouseEvent.CLICK, onClick); |
6 |
var url:URLLoader = new URLLoader(); |
7 |
url.addEventListener(Event.COMPLETE, function(){ |
8 |
var xml:XML = new XML(url.data); |
9 |
var xmlList:XMLList = xml..item; |
10 |
for(var i:int = 0; i<xmlList.length(); i++) |
11 |
{
|
12 |
list.addItem({label:xmlList[i].title.text(), data:xmlList[i].description.text()}); |
13 |
}
|
14 |
list.selectedIndex = 0; |
15 |
area.htmlText = list.selectedItem.data; |
16 |
list.addEventListener(Event.CHANGE, function(){ |
17 |
area.htmlText = list.selectedItem.data; |
18 |
}); |
19 |
}); |
20 |
url.load(new URLRequest("http://feeds.feedburner.com/flashtuts")); |
21 |
}); |
22 |
}
|
Kesimpulan
Ada banyak aplikasi untuk SharedObjects. Silahkan periksa situs seperti Pandora atau situs game seperti Adult Swim. Namun, cara terbaik untuk belajar adalah untuk bereksperimen sendiri dan, tentu saja, berlangganan Tuts+.
Terima kasih sudah mengikuti bersama!
