அடோப் ஃபிளாஷ் (36) - Custom Scrollbar

custom scroller செய்வதற்கு முன் சில விஷயங்களை பார்ப்போம். scroll barல் scroll track, scroll face, butttons ஆகிய விஷயங்கள் உள்ளன. படத்தில் காணவும். இவற்றை தனித்தனியாக நீங்கள் உருவாக்க வேண்டும்.

முதலில் ஸ்க்ரோலருக்குள் நீங்கள் வைக்க நினைப்பவற்றை(படம், எழுத்துக்கள்) அதனை ஒரு சிம்பலாக கன்வர்ட் செய்யவும். type-ல் Movie Clipஐ தேர்ந்தெடுக்கவும். பிறகு அதன் Instance Nameல் contentMain என கொடுக்கவும்.
புதிய லேயரை உருவாக்கி ஒரு செவ்வகத்தை வரையவும். செவ்வகத்தின் அளவும் content-ன் அகலத்திற்கும் சமமாகவும் உயரம் விருப்பம்போலும் அமைக்கவும். (இந்த செவ்வக அளவில்தான் நம் ஸ்க்ரோல் content தெரியும்.) அதனை ரைட்கிளிக் செய்து சிம்பலாக கன்வர்ட் செய்யவும். type-ல் Movie Clipஐ தேர்ந்தெடுக்கவும். பிறகு அதன் Instance Nameல் maskedView என கொடுக்கவும். Mask1 லேயரை ரைட்கிளிக் செய்து Maskஐ கிளிக் செய்யவும். இப்போது செவ்வகம் உள்ள இடத்தில் மட்டும் content தெரியும்.

புதிய லேயரை உருவாக்கிய பிறகு Scroll track-காக ஒரு செவ்வகத்தை வரையவும். அது கிட்டத்தட்ட மாஸ்க் அளவில் இருக்க வேண்டும். ( பட்டன்கள் வேண்டுமெனில் அதற்கான இடத்தை மேலும் கீழும் விட வேண்டும். அதனால் மாஸ்க் அளவை விட கொஞ்சம் குறைத்து கொள்ளவும்.) அதை சரியாக மாஸ்க் அருகே பொருத்தவும். அதனை ரைட்கிளிக் செய்து சிம்பலாக கன்வர்ட் செய்யவும். type-ல் Movie Clipஐ தேர்ந்தெடுக்கவும். பிறகு அதன் Instance Nameல் scrollTrack என கொடுக்கவும்.

புதிய லேயரை உருவாக்கிய பிறகு Scroll face-காக ஒரு செவ்வகத்தை வரையவும். அது கிட்டத்தட்ட scroll track அகலத்திலும் தேவையான உயரத்திலும் இருக்க வேண்டும்.  அதை சரியாக scroll track மீது வைக்கவும். அதனை ரைட்கிளிக் செய்து சிம்பலாக கன்வர்ட் செய்யவும். type-ல் Movie Clipஐ தேர்ந்தெடுக்கவும். பிறகு அதன் Instance Nameல் scrollFace என கொடுக்கவும்.

புதிய லேயரை உருவாக்கிய பிறகு ஒரு பட்டனை உருவாக்கவும். (வடிவத்தை வரைந்து  அதனை ரைட்கிளிக் செய்து சிம்பலாக கன்வர்ட் செய்யவும். type-ல் Buttonஐ தேர்ந்தெடுக்கவும். )
அதை லைப்ரரியில் வைத்து ரைட்கிளிக் செய்து Duplicate என்பதை கிளிக் செய்தால் அதே போல் இன்னொரு பட்டன் உருவாகி விடும். ஒரு பட்டனை Button Up மற்றொன்றை Button Down எனவும் வைத்துக் கொள்ளவும். 

புதிய லேயரை உருவாக்கி அதில் இரண்டு பட்டன்களையும் சரியாக scroll trackக்கு மேலேயும் கீழேயும் வைக்கவும். Button Up-க்கு  Instance Nameல் btnUp என கொடுக்கவும். Button Down-க்கு Instance Nameல் btnDown என கொடுக்கவும்.

புதிய லேயரை உருவாக்கி அதில் ரைட்கிளிக் செய்து Actions என்பதை கிளிக் செய்து பெட்டியில் கீழ்காணும் ஸ்கிரிப்டை பேஸ்ட் செய்யவும்.

scrolling = function () {
var scrollHeight:Number = scrollTrack._height;
var contentHeight:Number = contentMain._height;
var scrollFaceHeight:Number = scrollFace._height;
var maskHeight:Number = maskedView._height;
var initPosition:Number = scrollFace._y=scrollTrack._y;
var initContentPos:Number = contentMain._y;
var finalContentPos:Number = maskHeight-contentHeight+initContentPos;
var left:Number = scrollTrack._x;
var top:Number = scrollTrack._y;
var right:Number = scrollTrack._x;
var bottom:Number = scrollTrack._height-scrollFaceHeight+scrollTrack._y;
var dy:Number = 0;
var speed:Number = 10;
var moveVal:Number = (contentHeight-maskHeight)/(scrollHeight-scrollFaceHeight);

scrollFace.onPress = function() {
var currPos:Number = this._y;
startDrag(this, false, left, top, right, bottom);
this.onMouseMove = function() {
dy = Math.abs(initPosition-this._y);
contentMain._y = Math.round(dy*-1*moveVal+initContentPos);
};
};
scrollFace.onMouseUp = function() {
stopDrag();
delete this.onMouseMove;
};
btnUp.onPress = function() {
this.onEnterFrame = function() {
if (contentMain._y+speed<=top) { scrollFace._y = top; } else { scrollFace._y -= speed/moveVal; } contentMain._y += speed; } else { scrollFace._y = top; contentMain._y = maskedView._y; delete this.onEnterFrame; } }; }; btnUp.onDragOut = function() { delete this.onEnterFrame; }; btnUp.onRelease = function() { delete this.onEnterFrame; }; btnDown.onPress = function() { this.onEnterFrame = function() { if (contentMain._y-speed>finalContentPos) {
if (scrollFace._y>=bottom) {
scrollFace._y = bottom;
} else {
scrollFace._y += speed/moveVal;
}
contentMain._y -= speed;
} else {
scrollFace._y = bottom;
contentMain._y = finalContentPos;
delete this.onEnterFrame;
}
};
};
btnDown.onRelease = function() {
delete this.onEnterFrame;
};
btnDown.onDragOut = function() {
delete this.onEnterFrame;
};

if (contentHeight

horizontal scrollbar தேவையென்றால் கீழ்காணும் ஸ்கிரிப்டையும் புதிய லேயரை உருவாக்கி சேர்க்கவும். (horizontal scrollbar உருவாக்கும்போது buttons, scrolltrack, scrollface ஆகியவற்றை மீண்டும் உருவாக்க வேண்டும். அப்படி உருவாக்கினால் கீழ்காணுமாறும் instance nameகளை கொடுக்கவும். horizontal scrolltrackக்கு scrollTrack2 எனவும், horizontal scrollfaceக்கு scrollFace2 எனவும், horizontal left buttonக்கு btnLeft எனவும், horizontal right buttonக்கு btnRight எனவும் instance nameகளை அளிக்கவும்.

scrolling = function () {
var scrollWidth:Number = scrollTrack2._width;
var contentWidth:Number = contentMain._width;
var scrollFaceWidth:Number = scrollFace2._width;
var maskWidth:Number = maskedView._width;
var initPosition:Number = scrollFace2._x=scrollTrack2._x;
var initContentPos:Number = contentMain._x;
var finalContentPos:Number = maskWidth-contentWidth+initContentPos;
var left:Number = scrollTrack2._x;
var top:Number = scrollTrack2._y;
var right:Number = scrollTrack2._width-scrollFaceWidth+scrollTrack2._x;
var bottom:Number = scrollTrack2._y;
var dx:Number = 0;
var speed:Number = 10;
var moveVal:Number = (contentWidth-maskWidth)/(scrollWidth-scrollFaceWidth);

scrollFace2.onPress = function() {
var currPos:Number = this._x;
startDrag(this, false, left, top, right, bottom);
this.onMouseMove = function() {
dx = Math.abs(initPosition-this._x);
contentMain._x = Math.round(dx*-1*moveVal+initContentPos);
};
};
scrollFace2.onMouseUp = function() {
stopDrag();
delete this.onMouseMove;
};
btnLeft.onPress = function() {
this.onEnterFrame = function() {
if (contentMain._x+speed<=left) { scrollFace2._x = left; } else { scrollFace2._x -= speed/moveVal; } contentMain._x += speed; } else { scrollFace2._x = left; contentMain._x = maskedView._x; delete this.onEnterFrame; } }; }; btnLeft.onDragOut = function() { delete this.onEnterFrame; }; btnLeft.onRelease = function() { delete this.onEnterFrame; }; btnRight.onPress = function() { this.onEnterFrame = function() { if (contentMain._x-speed>finalContentPos) {
if (scrollFace2._x>=right) {
scrollFace2._x = right;
} else {
scrollFace2._x += speed/moveVal;
}
contentMain._x -= speed;
} else {
scrollFace2._x = right;
contentMain._x = finalContentPos;
delete this.onEnterFrame;
}
};
};
btnRight.onRelease = function() {
delete this.onEnterFrame;
};
btnRight.onDragOut = function() {
delete this.onEnterFrame;
};

if (contentWidth

Demo: