ไปเอาเค้ามาอีกที ไม่เคยจะคิดเองได้ 555+
มาเริ่มกันเลย
1) อันแรก ง่ายสุด แต่มีแค่ scrollbar เลื่อนได้ แต่ข้อความเป็น plain text ธรรมด๊า ธรรมดา
ตามรูปเลยจ้ะ *** ถ้าดูแล้วงง click ดูแบบเต็มๆจอที่รูปจ้ะ
2) แบบลากเลื่อน ไม่ยากมาก ข้อความทำเป็นตัวหนา สี ใส่รูปได้
click ที่รูปเพื่อดูเต็มๆนะจ๊ะ
**mc คือ movie clip นะจ๊ะ
STEP
- ทำ mc มา 4 ตัว ตามรูป
- ตั้งชื่อกำกับ mc 3 ตัว ตามรูป : txt_message, area_message, และ thumb (ตัวที่เราจะลาก/ ตั้งใน mc ชื่อ scroll_bar นะจ๊ะ)
- ทำ mask ให้ txt_message โดยมี area message เป็น mask
- ใส่ script ข้างล่างนี้ ใน frame แรกของ mc ชื่อ scroll_bar
**************************************
thumb.onPress = function() {***************************************************
this.startDrag(false,0,0,0,240);
this.onMouseMove = function() {
mostup = _parent.area_message._y-_parent.txt_message._height+_parent.area_message._height;
mostdown = _parent.area_message._y;
range = mostdown-mostup;
pixel = range/100;
py = this._y;
_parent.txt_message._y = _parent.area_message._y-(py*pixel);
updateAfterEvent();
};
};
thumb.onMouseUp = function() {
delete this.onMouseMove;
stopDrag();
};
*** ในรูปพิมพ์ผิด ต้องเป็น area_message นะคะ
-------------------------------------------------------------------------------
DL source code ได้ที่ : mediafire นะจ๊ะ
*** ต้องใช้ Flash CS3 หรือ version สูงกว่านั้นเปิด นะคะ
-------------------------------------------------------------------------------
ขอบคุณ ความรู้จาก NetDesign อาจารย์ pping
3) ลากเลื่อน ติด easing (คือ scroll แบบ smooth หน่อย)
เอามาจาก ThaiFlashDev.com ขอบคุณน๊า อิอิ
DL source code ที่ >> mediafire
*** ต้องใช้ Flash CS3 หรือ version สูงกว่านั้นเปิด นะคะ
INSTANCE NAME OF MOVIE CLIP(MC) mc ที่ต้องตั้งชื่อ ตามนี้
1) mc_txt = เนื้อหา (content)
2) mc_txt_mask = บริเวณที่จะโชว์เนื้อหา (mask ของ content)
3) mc_scrollbar = รวม scrollbar ทั้งหมด (scrollbar)
4) mc_scrollbar_area = บริเวณที่จะให้ scroller ของเราวิ่ง
CODE::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
frame แรก ด้านนนอก
//โค้ดส่วนแรก ใช้สำหรับเคลื่อนที่ slider พร้อมๆไปกับตัวเนื้อหา ถ้าไม่มีส่วนนี้ส่วนอื่นก็ไม่เวิร์ก
var startPt:Number = mc_txt._y;
var displayLength:Number = mc_txt._height - mc_txt_mask._height;
var easeSpeed:Number = 0.12;
function moveContent(percent:Number) {
percent = Math.round(percent);
if (percent < 0) {
percent = 0;
} else if (percent > 100) {
percent = 100;
}
mc_scrollbar.toPercent = percent;
mc_scrollbar.curPercent = mc_scrollbar._currentframe - 1;
mc_scrollbar.onEnterFrame = function() {
if(this._currentframe != this.toPercent+1) {
this.curPercent += easeSpeed*(this.toPercent - this.curPercent);
this.gotoAndStop(Math.round(this.curPercent)+1);
mc_txt._y = startPt - this.curPercent * displayLength / 100;
} else {
delete this.onEnterFrame;
}
}
}
//โค้ดส่วนนี้ใช้เลื่อนสไลด์เดอร์เมื่อคลิ้กลาก
mc_scrollbar.onPress = function() {
moveContent(100 * this.mc_scrollbar_area._ymouse / this.mc_scrollbar_area._height);
this.onMouseMove = function(Void):Void {
moveContent(100 * this.mc_scrollbar_area._ymouse / this.mc_scrollbar_area._height);
};
};
mc_scrollbar.onRelease = function() {
delete this.onMouseMove;
};
mc_scrollbar.onReleaseOutside = mc_scrollbar.onRelease;
--------------------------------------------------------------------------------------
frame แรก ใน mc_scrollbar
stop();
//mc_scrollbar_area มีเอาไว้สำหรับ การคำนวณ percent การเลื่อนของตัวสไลดเดอร์
//ถ้าเม้าส์อยู่ตำแหน่งบนสุดของ area_mc จะให้ค่า percent = 0 และใต้สุดจะได้ให้ค่า percent = 100
mc_scrollbar_area._visible = false;
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
4) ลากเลื่อน & click เลื่อน & mouse wheel ได้ (แต่ไม่มี easing) - แกน y, height
เอามาจาก ThaiFlashDev.com ขอบคุณน๊า อิอิ
DL source code ที่ >> mediafire
*** ต้องใช้ Flash CS3 หรือ version สูงกว่านั้นเปิด นะคะ
INSTANCE NAME OF MOVIE CLIP(MC) mc ที่ต้องตั้งชื่อ ตามนี้
1) mc_txt = เนื้อหา (content)
2) mc_txt_mask = บริเวณที่จะโชว์เนื้อหา (mask ของ content)
3) mc_scrollbar = รวม scrollbar ทั้งหมด (scrollbar)
4) mc_scrollbar_area = บริเวณที่จะให้ scroller ของเราวิ่ง
5) mc_up = click เลื่อนข้อความขึ้นบน
6) mc_down = click เลื่อนข้อความลงล่าง
CODE::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
frame แรก ด้านนนอก
//โค้ดส่วนแรก ใช้สำหรับเคลื่อนที่ slider พร้อมๆไปกับตัวเนื้อหา ถ้าไม่มีส่วนนี้ส่วนอื่นก็ไม่เวิร์ก
var startPt:Number = mc_txt._y;
var displayLength:Number = mc_txt._height - mc_txt_mask._height;
function moveContent(percent:Number) {
percent = Math.round(percent);
if (percent < 0) {
percent = 0;
} else if (percent > 100) {
percent = 100;
}
mc_scrollbar.gotoAndStop(percent + 1);
mc_txt._y = startPt - percent * displayLength / 100;
}
function moveContentOneStep(inc:Number) {
moveContent(mc_scrollbar._currentframe + inc - 1);
}
//โค้ดส่วนนี้ใช้เลื่อนสไลด์เดอร์เมื่อคลิ้กลาก หากไม่ต้องการคลิ้กลากก็ไม่ต้องใส่
mc_scrollbar.onPress = function() {
moveContent(100 * this.mc_scrollbar_area._ymouse / this.mc_scrollbar_area._height);
this.onMouseMove = function(Void):Void {
moveContent(100 * this.mc_scrollbar_area._ymouse / this.mc_scrollbar_area._height);
};
};
mc_scrollbar.onRelease = function() {
delete this.onMouseMove;
};
mc_scrollbar.onReleaseOutside = mc_scrollbar.onRelease;
//โค้ดส่วนนี้ใช้เลื่อนสไลด์เดอร์เมื่อเลื่อนลูกกลิ้ง หากไม่ต้องการก็ไม่ต้องใส่
//เครื่องMac ยังไม่supportการใช้ลูกกลิ้งในแฟลช ไม่ต้องงงว่าทำไมใช้ไม่ได้ และไม่ต้องเดือดร้อนหาโค้ดให้เมื่อยตุ้ม
var mouseListener:Object = new Object();
mouseListener.onMouseWheel = function(delta_num:Number, scrollTarget:String) {
moveContent(mc_scrollbar._currentframe - delta_num - 1);
};
Mouse.addListener(mouseListener);
//โค้ดส่วนนี้ใช้เลื่อนสไลด์เดอร์เมื่อกดปุ่ม หากไม่ต้องการก็ไม่ต้องใ่ส่
mc_up.step = -5;
mc_down.step = 5;
mc_up.onRelease = function() {
moveContentOneStep(this.step);
delete this.onEnterFrame;
};
mc_down.onRelease = mc_up.onRelease;
//โค้ดส่วนนี้ใช้เลื่อนสไลด์เดอร์เมื่อกดปุ่มค้างเอาไว้ หากไม่ต้องการก็ไม่ต้องใส่
mc_up.onPress = function() {
this.clickDelay = 10;
this.onEnterFrame = function() {
if (this.clickDelay > 0) {
this.clickDelay--;
} else {
this.onEnterFrame = function() {
moveContentOneStep(this.step);
};
}
};
};
mc_up.onReleaseOutside = function() {
delete this.onEnterFrame;
};
mc_down.onPress = mc_up.onPress;
mc_down.onReleaseOutside = mc_up.onReleaseOutside;
--------------------------------------------------------------------------------------
frame แรก ใน mc_scrollbar
stop();
//mc_scrollbar_area มีเอาไว้สำหรับ การคำนวณ percent การเลื่อนของตัวสไลดเดอร์
//ถ้าเม้าส์อยู่ตำแหน่งบนสุดของ area_mc จะให้ค่า percent = 0 และใต้สุดจะได้ให้ค่า percent = 100
mc_scrollbar_area._visible = false;
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
5) ลากเลื่อน & click เลื่อน & mouse wheel ได้ (แต่ไม่มี easing) :: เลื่อนตามทางขวาง horizon (แกน X, width)
เอามาจาก ThaiFlashDev.com ขอบคุณน๊า อิอิ
DL source code ที่ >> mediafire
*** ต้องใช้ Flash CS3 หรือ version สูงกว่านั้นเปิด นะคะ
INSTANCE NAME OF MOVIE CLIP(MC) mc ที่ต้องตั้งชื่อ ตามนี้
1) mc_txt = เนื้อหา (content)
2) mc_txt_mask = บริเวณที่จะโชว์เนื้อหา (mask ของ content)
3) mc_scrollbar = รวม scrollbar ทั้งหมด (scrollbar)
4) mc_scrollbar_area = บริเวณที่จะให้ scroller ของเราวิ่ง
5) mc_up = click เลื่อนข้อความไปทางซ้าย
6) mc_down = click เลื่อนข้อควาไปทางขวา
CODE::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
frame แรก ด้านนนอก
//โค้ดส่วนแรก ใช้สำหรับเคลื่อนที่ slider พร้อมๆไปกับตัวเนื้อหา ถ้าไม่มีส่วนนี้ส่วนอื่นก็ไม่เวิร์ก
var startPt:Number = mc_txt._x;
var displayLength:Number = mc_txt._width - mc_txt_mask._width;
function moveContent(percent:Number) {
percent = Math.round(percent);
if (percent < 0) {
percent = 0;
} else if (percent > 100) {
percent = 100;
}
mc_scrollbar.gotoAndStop(percent + 1);
mc_txt._x = startPt - percent * displayLength / 100;
}
function moveContentOneStep(inc:Number) {
moveContent(mc_scrollbar._currentframe + inc - 1);
}
//โค้ดส่วนนี้ใช้เลื่อนสไลด์เดอร์เมื่อคลิ้กลาก หากไม่ต้องการคลิ้กลากก็ไม่ต้องใส่
mc_scrollbar.onPress = function() {
moveContent(100 * this.mc_scrollbar_area._xmouse / this.mc_scrollbar_area._width);
this.onMouseMove = function(Void):Void {
moveContent(100 * this.mc_scrollbar_area._xmouse / this.mc_scrollbar_area._width);
};
};
mc_scrollbar.onRelease = function() {
delete this.onMouseMove;
};
mc_scrollbar.onReleaseOutside = mc_scrollbar.onRelease;
//โค้ดส่วนนี้ใช้เลื่อนสไลด์เดอร์เมื่อเลื่อนลูกกลิ้ง หากไม่ต้องการก็ไม่ต้องใส่
//เครื่องMac ยังไม่supportการใช้ลูกกลิ้งในแฟลช ไม่ต้องงงว่าทำไมใช้ไม่ได้ และไม่ต้องเดือดร้อนหาโค้ดให้เมื่อยตุ้ม
var mouseListener:Object = new Object();
mouseListener.onMouseWheel = function(delta_num:Number, scrollTarget:String) {
moveContent(mc_scrollbar._currentframe - delta_num - 1);
};
Mouse.addListener(mouseListener);
//โค้ดส่วนนี้ใช้เลื่อนสไลด์เดอร์เมื่อกดปุ่ม หากไม่ต้องการก็ไม่ต้องใ่ส่
mc_up.step = -5;
mc_down.step = 5;
mc_up.onRelease = function() {
moveContentOneStep(this.step);
delete this.onEnterFrame;
};
mc_down.onRelease = mc_up.onRelease;
//โค้ดส่วนนี้ใช้เลื่อนสไลด์เดอร์เมื่อกดปุ่มค้างเอาไว้ หากไม่ต้องการก็ไม่ต้องใส่
mc_up.onPress = function() {
this.clickDelay = 10;
this.onEnterFrame = function() {
if (this.clickDelay > 0) {
this.clickDelay--;
} else {
this.onEnterFrame = function() {
moveContentOneStep(this.step);
};
}
};
};
mc_up.onReleaseOutside = function() {
delete this.onEnterFrame;
};
mc_down.onPress = mc_up.onPress;
mc_down.onReleaseOutside = mc_up.onReleaseOutside;
--------------------------------------------------------------------------------------
frame แรก ใน mc_scrollbar
stop();
//mc_scrollbar_area มีเอาไว้สำหรับ การคำนวณ percent การเลื่อนของตัวสไลดเดอร์
//ถ้าเม้าส์อยู่ตำแหน่งบนสุดของ area_mc จะให้ค่า percent = 0 และใต้สุดจะได้ให้ค่า percent = 100
mc_scrollbar_area._visible = false;
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::