Saturday, September 11, 2010

அடோப் ஃபிளாஷ் (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:



16 comments:

  1. அருமையாக உள்ளது பகிர்வுக்கு நன்றி நண்பரே....

    ReplyDelete
  2. //Thomas Ruban said... //
    மிக்க நன்றி நண்பரே!

    ReplyDelete
  3. நண்பரே, உங்கள் வருகை மூலம், ப்ளாஷ் பற்றிய விவரங்களை அறிய முடிந்தது . . . மிக்க நன்றி, படித்துவிட்டு தொடர்பு கொள்கின்றேன்

    ReplyDelete
  4. //மார்கண்டேயன் said...//
    மிக்க நன்றி!

    ReplyDelete
  5. //மகாதேவன்-V.K said... //
    வருகைக்கும் கருத்துக்கும் மிக்க நன்றி சார்!

    ReplyDelete
  6. ஆகஸ்ட் மாசம் 36 பதிவா?அப்போ தினசரி பதிவு போடலைனா உங்களுக்கு தூக்கமே வராதுனு சொல்லுங்க.டெக்னிக்கல் பதிவு.உபயோகமானது

    ReplyDelete
  7. //சி.பி.செந்தில்குமார்//
    கிட்டத்தட்ட அப்படிதான்! :-)
    வருகைக்கும் கருத்துக்கும் மிக்க நன்றி சார்!

    ReplyDelete
  8. இதிலும் ஸ்கிரிப்ட்எரர்(31 line) என்று வருகிறது.

    ReplyDelete
  9. //Thomas Ruban said..//
    ஸ்கிரிப்டில் ஏதாவது ஒரு லைன் விட்டாலும் பிரச்சினைதான் சரி பாருங்கள். என் மின்னஞ்சல் psych.suresh@gmail.com தொடர்பு கொள்ளலாம்!

    ReplyDelete
  10. சரி பார்க்கிறேன்.அப்படியே எதாவது சந்தேகம்னா உங்களை தொடர்பு கொள்கிறேன் நன்றி.

    actionscript2 தமிழ் யுனிகோடு சப்போட் செய்யாத?

    ReplyDelete
  11. //Thomas Ruban said...//
    அடோப் மென்பொருள்களே யுனிகோடுக்கு சப்போர்ட் செய்யாது! தமிழில் எழுத வேறு வழி உள்ளது!

    ReplyDelete
  12. //தமிழில் எழுத வேறு வழி உள்ளது! //

    எப்படி என்று சொன்னால்(அ)பதிவிட்டால் எல்லோருக்கும் பயனுள்ளதாக இருக்கும்.தொல்லை கொடுபதர்க்கு மன்னிக்கவும் நண்பரே...

    ReplyDelete
  13. தொல்லையெல்லாம் ஒன்றுமில்லை நண்பரே! தனி பதிவு தேவையில்லை இங்கேயே சொல்கிறேன்!

    நீங்கள் NHM பயன்படுத்துபவரானால் எளிது. முதலில் NHMல் சில settingsஐ அமைத்துக் கொள்ளவும்.
    taskbarல் பெல் போன்ற சிம்பலுடன் உள்ள NHM Writerஐ ரைட்கிளிக் செய்து settingsஐ கிளிக் செய்யவும். அதில்
    tamil, phonetic, tscii,
    tamil, phonetic, tab,
    tamil, phonetic, tam
    ஆகியவற்றை டிக் செய்து கொள்ளவும். அவர்றிற்கான short cut கொடுக்கவும். (Alt+3, Alt+4) NHM ரீஸ்டார்ட் ஆகும்.

    பிறகு சில ttf ஃபோண்ட்களை டவுன்லோட் செய்து கண்ட்ரோல் பேனலில் ஃபோண்ட் போல்டரில் பேஸ்ட் செய்யவும். பிறகு பிளாஷில் டெக்ஸ்ட் டூலை கிளிக் செய்து அதில் ttf போண்டை தேர்ந்தெடுத்து நீங்கள் கொடுத்த ஷார்ட் கட்டை கிளிக் செய்து டைப் செய்யவும்.

    அவ்வளவுதான்!

    ReplyDelete
  14. உங்கள் விரிவான,விளக்கமான பின்னுட்டத்திற்கு மகிழ்ச்சி நன்றி. நான் கூகிள்தமிழ் இன்புட் பயன்படுத்துகிறேன்.NHM ம் உள்ளது பயன்படுத்தி பார்க்கிறேன்.

    ReplyDelete
  15. Scene 1, Layer 'Layer 7', Frame 1, Line 31 1086: Syntax error: expecting semicolon before else.

    Scene 1, Layer 'Layer 7', Frame 1, Line 31 1084: Syntax error: expecting rightbrace before leftbrace.
    இதிலும் ஸ்கிரிப்ட்எரர் என்று வருகிறது.திரும்ப நாளைக்கு முயற்ச்சி செய்கிறேன் நன்றி.

    ReplyDelete