למי שלא יודע scroll bar זהו בעצם גולל טקסט, תפקידו הוא לאפשר לנו צפייה ביותר תוכן ממה שאפשר להכניס בשטח מסוים, נניח ובאתרכם אתם מעוניינים להוסיף הרבה טקסט, אבל הטקסט גדול יותר מגודל השטח שאתם יכולים להרשות לו, ה-scroll bar יכול להיות הפיתרון שלכם:).
חשוב להדגיש! שאומנם ישנם פתרונות נוספים ליצרת גולל טקסט בדרכים פשוטות יותר, כגון הקומפננטה המובנית של פלאש לגלילה (UIScrollbar), אך הן לא מתאימות לכל תוכן אלא לקומפננטות המובנות של פלאש, כמו טקסט, והפיתרון שנמצא לפניכם הינו יותר גנרי וכללי וגם מאוד נוח לעיצוב
הקושי:
הקושי ב-scroll Bar נובע כמובן כתוצאה מחוסר ההתאמה בין גודל ה-scroll דהיינו שטח הגלילה ביחס לגודל התוכן אותו אנו רוצים להציג.
עיקרון הפיתרון:
נניח שגודל ה- scroll היה באותו גובה(או אורך) של התוכן אז היינו פשוט משווים את ה-(y-) של התוכן ל-y של ה-scroll. אבל במקרה שלנו כמו שציינתי אין התאמה בין גובה ה-scroll לגובה התוכן ולכן נצטרך למצוא מקדם(מספר מסוים) שכביכול ישווה את הגבהים של השניים(שימו לב שאנו רוצים לגלול רק את השטח שלא ניראה לעין ולכן בחישוב המקדם נצטרך להפחית את גובה החלון מגובה התוכן).
הפיתרון:
כפי שאתם רואים בציור, יש לנו את גובה התוכן(Y) ואת השטח אותו אנו רוצים לגלול(השטח שמעל הקו המקווקו הכחול העליון והשטח שמתחת לקו המקווקו הכחול התחתון).
את המקדם שאנו מחפשים נמצא ע"י חלוקת גובה התוכן בשטח הבלתי ניראה (הכי קל לחשב את זה כאשר הקו המקווקו העליון מתלכד עם הקו העליון של החלון – עושים פשוט גובה התוכן פחות גובה החלון). לאחר מכן אני רוצים שכאשר אנו נזיז את הידית, הטקסט יגלל לכן, ניצור מאזין שיקרא לפונקציה שתשנה את ה-(Y-)של החלון בהתאם למיקום ה-Y של הידית.
שימו לב! אנחנו משווים את המינוס Y של הידית ל-Y של החלון משום שאנו רוצים שככל שה-Y של הידית יעלה ה-Y של החלון ירד.
והנה הקוד להלן:
Using actionscript3 Syntax Highlighting
//אנו יוצרים אובייקט מטיפוס מלבן שהוא בעצם יהיה הגבול של הידית שלנו
var rec:Rectangle=new Rectangle(zone.x,zone.y,0,zone.height-scrollBar.height);
//יוצרים את המקדם שלנו, גובה התוכן פחות גובה החלון לחלק לגובה החלון פחות גובה הידית
var t:Number = (textScroll.height-zone.height)/(zone.height-scrollBar.height);
//יוצרים מאזין ללחיצה על הידית
this.scrollBar.addEventListener(MouseEvent.MOUSE_DOWN, startdrag);
function startdrag(ev:MouseEvent) {
//מתחילים את הגרירה, שימו לב שהכנסתי פה את האובייקט מלבן שיצרתי מקודם
scrollBar.startDrag(false,rec);
//מחיקת המאזין שמאזין ללחיצה על הידית
this.scrollBar.removeEventListener(MouseEvent.MOUSE_DOWN, startdrag);
//אנו יוצרים מאזין שמאזין לשחרור הלחיצה בשטח הבמה, יש צורך בזה בשביל להמנע ממקרה קצה שהמשתמש לוחץ על הידית יוצא משטח הידית ומשחרר
this.stage.addEventListener(MouseEvent.MOUSE_UP, stopdrag);
//יצירת מאזין שמפסיק את הגרירה ברגע שיחרור הלחיצה מעל הידית
this.scrollBar.addEventListener(MouseEvent.MOUSE_UP, stopdrag);
//יצירת מאזין שמאזין לתזוזת העכבר, ומפעיל את הפונקציה העיקרת
this.scrollBar.addEventListener(MouseEvent.MOUSE_MOVE, scroller)
this.stage.addEventListener(MouseEvent.MOUSE_MOVE, scroller);
}
function stopdrag(ev:MouseEvent) {
//עוצר את הגרירה
scrollBar.stopDrag();
//יצירת מאזיו ללחיצה על הידית
this.scrollBar.addEventListener(MouseEvent.MOUSE_DOWN, startdrag);
//מחיקת המאזין שקורא לפונקצית העצירה
this.scrollBar.removeEventListener(MouseEvent.MOUSE_UP, stopdrag);
this.stage.removeEventListener(MouseEvent.MOUSE_UP, stopdrag);
}
function scroller(ev:MouseEvent) {
//הפונקציה העיקרית, ראה הרחבה במאמר
textScroll.y = (-t)*scrollBar.y;
}
var rec:Rectangle=new Rectangle(zone.x,zone.y,0,zone.height-scrollBar.height);
//יוצרים את המקדם שלנו, גובה התוכן פחות גובה החלון לחלק לגובה החלון פחות גובה הידית
var t:Number = (textScroll.height-zone.height)/(zone.height-scrollBar.height);
//יוצרים מאזין ללחיצה על הידית
this.scrollBar.addEventListener(MouseEvent.MOUSE_DOWN, startdrag);
function startdrag(ev:MouseEvent) {
//מתחילים את הגרירה, שימו לב שהכנסתי פה את האובייקט מלבן שיצרתי מקודם
scrollBar.startDrag(false,rec);
//מחיקת המאזין שמאזין ללחיצה על הידית
this.scrollBar.removeEventListener(MouseEvent.MOUSE_DOWN, startdrag);
//אנו יוצרים מאזין שמאזין לשחרור הלחיצה בשטח הבמה, יש צורך בזה בשביל להמנע ממקרה קצה שהמשתמש לוחץ על הידית יוצא משטח הידית ומשחרר
this.stage.addEventListener(MouseEvent.MOUSE_UP, stopdrag);
//יצירת מאזין שמפסיק את הגרירה ברגע שיחרור הלחיצה מעל הידית
this.scrollBar.addEventListener(MouseEvent.MOUSE_UP, stopdrag);
//יצירת מאזין שמאזין לתזוזת העכבר, ומפעיל את הפונקציה העיקרת
this.scrollBar.addEventListener(MouseEvent.MOUSE_MOVE, scroller)
this.stage.addEventListener(MouseEvent.MOUSE_MOVE, scroller);
}
function stopdrag(ev:MouseEvent) {
//עוצר את הגרירה
scrollBar.stopDrag();
//יצירת מאזיו ללחיצה על הידית
this.scrollBar.addEventListener(MouseEvent.MOUSE_DOWN, startdrag);
//מחיקת המאזין שקורא לפונקצית העצירה
this.scrollBar.removeEventListener(MouseEvent.MOUSE_UP, stopdrag);
this.stage.removeEventListener(MouseEvent.MOUSE_UP, stopdrag);
}
function scroller(ev:MouseEvent) {
//הפונקציה העיקרית, ראה הרחבה במאמר
textScroll.y = (-t)*scrollBar.y;
}
Parsed in 0.037 seconds, using GeSHi 1.0.8.4
חדשות
מפת האתר
אינדקס מפת האתר
רשימת עדכונים