[x] ปิดหน้าต่างนี้
Powered by CAISTUDIO.INFO >>คลังสื่อ CAI
<< หน้าหลัก / Home >>

  << บทความ /cai >>

Flash 8 (As 2.0)
สร้าง Scrollbar ใช้เอง

พฤหัสบดี ที่ 24 เดือน มิถุนายน พ.ศ.2553



สร้าง Scrollbar ใช้เอง
หมดปัญหาเรื่องตัวอักษรหาย แทกรูปได้ ตามคำขอของสมาชิกครับ
ข้อตกลง : เพื่อความกระชับในการเขียนบทความให้เข้าใจง่าย และรวดเร็ว
ผมขอใช้คำย่อดังนี้ครับ
  
    mc  หมายถึง  MovieClip
      as   หมายถึง  ActionScript
      cai  หมายถึง  บทเรียนคอมพิวเตอร์ช่วยสอน

ลองทดสอบดูครับ
ดาวโหลดไฟล์ตัวอย่าง (.fla)

 

 มาเริ่มกันเลยครับ

1. เปิดโปรแกรม Flash ขึ้นมา แล้วทำการเพิ่ม Layer ขึ้นมาเป็น 2 Layer โดยตั้งชื่อ Layer ว่า bak กับ text ตามภาพ

 

 
2. ที่ Layer : bak  สร้างพื้นหลัง ตรงนี้แล้วแต่การออกแบบของแต่ละท่านนะครับ เมื่อสร้างแล้วทำการล็อค Leyer ไว้หน่อยก็ดีครับ
ป้องกันการคลิกพลาด..อิอิ
 
 
 
3. ที่ Layer : text  สร้างกรอบ Scrollbar แล้วแปลงเป็น mc แล้วตั้งชื่อว่า  scroll_mc 
 
4. ดับเบิลคลิกเข้าไปแก้ภายใน mc : scroll_mc  และทำการแปลงกรอบ scroll เป็น mc อีกครั้งแล้วตั้งชื่อว่า area_mc
ต่อไปก็ทำการเพิ่ม Layer อีก 2 Layer รวมกับ Layer เดิม (ที่เป็นกรอบ Scrollbar ) รวมเป็น 3 Layer โดยทำการตั้งชื่อ Layer
ว่า frame,scroll,line  ตามภาพ
 

 
5. ที่ Layer : scroll  สร้าง mc แล้วนำมาวางตำแหน่งดังภาพ
 

6. ที่ Layer : line  สร้างเส้นดังภาพ
 


7. คลิกขวาที่ Layer : line  เลือก Guide แล้วลาก Layer : scroll มาวางใต้ Leyer : line เพื่อให้ mc วิ่งตามเส้น ดังภาพ
 


8. คลิกเฟรม 100 Layer : line  และ Layer : frame กดปุ่ม F5  ส่วน Layer : scroll ให้กด F6 ที่เฟรมที่ 100 จะได้ดังภาพ
 


9. คลิกขวาที่เฟรมที่ 1 Layer : scroll เลือก Create Motion Tween และที่เฟรมที่ 1 ขยับ mc ให้ตรงจุดเริ่มต้นของเส้น
และที่เฟรม 100 ย้าย mc มาวางปลายเส้น ดังภาพ
 


10. คลิกที่เฟรมที่ 1 Layer : frame ใส่คำสั่ง 
stop();
 

11. กลับมายัง Timeline หลัก แล้วนำปุ่มมาวางแล้วตั้งชื่อว่า up_mc และ down_mc ดังภาพ
 


12. พิมพ์เนื้อหา แล้วแปลงเป็น mc แล้วตั้งชื่อว่า content_mc
 


13. เพิ่ม Layer แล้วตั้งชื่อว่า mask ที่ Layer นี้ให้สร้างสี่เหลี่ยมเพื่อ mask ข้อความแล้วแปลงเป็น mc ตั้งชื่อว่า mask_mc
 


14. คลิกขวาที่ Layer : mask เลือก mask จะได้ดังภาพ
 

 

15. ทำการคัดลอก as ด้านล่างไปใส่ไว้ที่เฟรมที่ 1 Layer : mask
 
// as นี้ผมได้มาจาก ThaiFlashdev นะครับ
stop();
//โค้ดส่วนแรก ใช้สำหรับเคลื่อนที่ slider พร้อมๆไปกับตัวเนื้อหา  ถ้าไม่มีส่วนนี้ส่วนอื่นก็ไม่เวิร์ก
var startPt:Number = content_mc._y;
var displayLength:Number = content_mc._height - mask_mc._height;
function moveContent(percent:Number) {
 percent = Math.round(percent);
 if (percent < 0) {
  percent = 0;
 } else if (percent > 100) {
  percent = 100;
 }
 scroll_mc.gotoAndStop(percent + 1);
 content_mc._y = startPt - percent * displayLength / 100;
}
function moveContentOneStep(inc:Number) {
 moveContent(scroll_mc._currentframe + inc - 1);
}
//โค้ดส่วนนี้ใช้เลื่อนสไลด์เดอร์เมื่อคลิ้กลาก หากไม่ต้องการคลิ้กลากก็ไม่ต้องใส่
scroll_mc.onPress = function() {
 moveContent(100 * this.area_mc._ymouse / this.area_mc._height);
 this.onMouseMove = function(Void):Void  {
  moveContent(100 * this.area_mc._ymouse / this.area_mc._height);
 };
};
scroll_mc.onRelease = function() {
 delete this.onMouseMove;
};
scroll_mc.onReleaseOutside = scroll_mc.onRelease;
//โค้ดส่วนนี้ใช้เลื่อนสไลด์เดอร์เมื่อกดปุ่ม หากไม่ต้องการก็ไม่ต้องใ่ส่
up_mc.step = -5;
down_mc.step = 5;
up_mc.onRelease = function() {
 moveContentOneStep(this.step);
 delete this.onEnterFrame;
};
down_mc.onRelease = up_mc.onRelease;
//โค้ดส่วนนี้ใช้เลื่อนสไลด์เดอร์เมื่อกดปุ่มค้างเอาไว้ หากไม่ต้องการก็ไม่ต้องใส่
up_mc.onPress = function() {
 this.clickDelay = 10;
 this.onEnterFrame = function() {
  if (this.clickDelay > 0) {
   this.clickDelay--;
  } else {
   this.onEnterFrame = function() {
    moveContentOneStep(this.step);
   };
  }
 };
};
up_mc.onReleaseOutside = function() {
 delete this.onEnterFrame;
};
down_mc.onPress = up_mc.onPress;
down_mc.onReleaseOutside = up_mc.onReleaseOutside;

16. ทำการทดสอบได้เลยครับ
 


เข้าชม : 63947


Flash 8 (As 2.0) 5 อันดับล่าสุด

      แสดงผลเป็นเลขไทย 5 / ส.ค. / 2555
      สร้าง Scrollbar ใช้เอง 24 / มิ.ย. / 2553
      FLVPlayback เล่น vdo แบบต่อเนื่อง 17 / มิ.ย. / 2553
      การใช้ for ช่วยให้การเขียน as สั้นลง 4 / พ.ค. / 2553
      as โหลดไฟล์ mp3 4 / เม.ย. / 2553


Powered by : PHP | Mysql | MAXSITE 1.10 | Design by : JP_Graphic [E-mail : webmaster@caistudio.info]