Flash Gallery AS2 light box ตอนที่1

[audio:http://www.blog.ibargame.com/wp-content/uploads/2010/08/teen+kim.mp3|titles=หลบไปพัก]

ตัวอย่าง FlashGallery AS2
ติดตามสงครามระหว่าง Flash กับ Html5 แล้วก็รู้สึกว่าสงครามนี้จะยาวนาน จนกว่าจะเกิดการผสมผสานในจุดนึงที่ตกผลึกร่วมกัน
ได้ซะทีแต่ก็ไม่รู้เมื่อไหร่ ในเมื่อ standard ในการทำเวปไซต์ปัจจุบันมีเทคโนโลยีที่ทำเวปไซต์ให้ smooth และสวยงามได้มากขึ้น
ไม่จำเป็นต้องใช้ Flash ทั้งหน้าเวปไซต์ ก็สามารถทำให้ผู้เข้าชมเวปไซต์ เกิดความประทับใจได้ไม่แพ้กัน แต่ก็ขึ้นอยู่กับสไตล์ และ
ความบ้าพลัง ของเจ้าของที่คิดจะมีเวปไซต์ว่่าต้องการจะนำเสนอ และสื่อผลงานของตนเองให้น่าตื่นตา ตื่นใจ ในระดับได

ตัว Action Script ตัวนี้ที่ผมจะนำเสนอก็มีผู้สอนมาอีกทีครับ ของอาจารย์ฮาร์ทแห่งบ้าน TFD ผมคิดว่าอาจจะมีประโยนช์หากมี
ใครต้องการจะศึกษา หรือนำไปต่อยอด เก็บไว้ไม่เกิดประโยชน์ เลยเต็มใจนำเสนอครับ

1 > สร้าง folder ชื่อ images แล้วสร้าง folder ด้านในอีกสองอัน อันที่หนึ่งตั้งชื่อ icon(เก็บรูปเล็ก) อันที่สองชื่อ pic(เก็บรูปใหญ่)
flash gallery1
2 > เลเยอร์ bg ทำกราฟฟิก แล้วแต่ถนัดนะครับ แล้วก็ใส่สคลิปนี้เข้าไป บน timeline นะครับ ตรงเลเยอร์ที่ 1
flash gallery2

//all = 20; //มีรูปกี่รูปก็สั่งตรงนี้ให้วนลูปตามจำนวนรูป
row = 0;
col = 0;

_root.createEmptyMovieClip(“gallery”,1); //copy mc ชื่อ gallery กำหนด depth=1
gallery.setMask(msk); //จัดการแมส
gallery._x = msk._x;
gallery._y = msk._y;
//gallery._x = 350;
//กำหนด พิกัด ของแกลรอรี่
//gallery._y = 5;
all=40;
// กำหนดให้แสดง icon ทั้งหมด 40 เพื่อดูการทำงานของ scorllbar
for (i=1; i<=all; i++){ //เงื่อนไขวนลูป สามารถกำหนดการทำงานใหม่ได้
mc = gallery.attachMovie(“photo”,”p”+i,i); //mc เพิ่มเข้ามาเพื่อจัดการตัวแกลรอรี่
mc.createEmptyMovieClip(“area”,1); //การสร้างมูฟวี่คลิปป่าว
mc.area.loadMovie(“images/icon/burn”+i+”.jpg”); //เรียกพิคเจอมาแสดงเลียงตามจำนวนรูป
mc.fileImage = “images/pic/p”+i+”.jpg”; //สร้างตัวแปลให้ mc จำค่าของรูป จำตัวมันเองว่าโชว์รูปไหนอยู่
mc.onRelease = function(){
pop = _root.attachMovie(“popup”,”p”,10); //ค่าเดฟใช้10 กรณีนี้ดูแล้วว่าไม่มีตัวอื่นตั้งค่าเป็น10 คงไม่ทับซ้อนกัน
pop.area.loadMovie(this.fileImage);
}
mc._x = 105*col;
col++;
mc._y = 105*row;
if(col == 4){
col = 0;
row++;
}
}
scrollbar._visible = (gallery._height > msk._height);
//กำหนด mask

3 > เลเยอร์ที่ 2 สร้าง mc ตั้งชื่อ instant name ชื่อ msk ขนาดของมูฟวี่คลิปคือ 420 x 520 กว้างคูณยาวก็เอาขนาด
icon=105px (row = 4 icon / colum = 5 icon)
flash gallery3

4 > เลเยอร์ที่ 3สร้าง mc สองตัว ตัวแรกเป็นปุ่มของสกอบาร์ อีกตัวเป็นความยาวของสกอบาร์ครับ ตั้งชื่อ instant name
ตามรูป แล้วจับทั้งสองตัว กำหนดให้จุดสูงสุดของทั้งสอง mc สูงเท่ากัน แล้วอยู่ระหว่างกลาง (กด ctrl+k เลื่อง top+align)
แล้วกด F8 เพื่อกำหนดให้เป็น mc (ทำมูฟวี่คลิปสองตัวในเลเยอร์เดียวกันแล้วกรุฟรวมกันให้เป็น 1 มูฟวี่คลิป)
flash gallery4

flash gallery5

5 > ตอนนี้อยู่ในเลเยอร์ที่3 scrollbar ดับเบิลคลิกเข้าในในมูฟวี่คลิปสกอบาร์ แล้วใส่ script บน timeline ตามนี้ครับ

obj = new Object(); //ประกาศฟังชั่น
obj.onMouseWheel = function(delta){
//trace(delta);//ตรวจค่าความเร็วของเม้าท์
btn._y-=delta*3;
if(btn._y<0){ btn._y=0; } if(btn._y > track._height-btn._height){
btn._y = track._height-btn._height;
}
p =btn._y/(track._height-btn._height);
//ค่า p คือเปอร์เซ็นต์
moveArea =_root.gallery._height-_root.msk._height; //จำนวนแกลรอรี่ที่เราสามารถลากขึ้นลงได้
_root.gallery._y =_root.msk._y-(moveArea*p);
}
Mouse.addListener(obj);
//แอดค่าให้กับเม้าท์

เอาไว้มาติดตามตอนที่สองกันครับ เรื่องของ linkge การสร้างมูฟวี่คลิปป่าวๆ เพื่อเอาไว้สำหรับแสดงรูป icon กับ ตัว
popup ที่แสดง lightbox แสดงรูปใหญ่ โปรดติดตามตอนต่อไป

16,759 views

315 thoughts on “Flash Gallery AS2 light box ตอนที่1

  1. This site can be a stroll-via for the entire data you wanted about this and didn’t know who to ask. Glimpse here, and also you’ll positively uncover it.

  2. Pingback: Owen
  3. Pingback: Royal
  4. Pingback: friv
  5. Pingback: miniclip games
  6. Pingback: My Homepage
  7. Pingback: instant cash
  8. Pingback: cheap holidays
  9. Pingback: My Homepage

Leave a Reply

Your email address will not be published.